VueJS и springMVC. Как записать данные из поля ввода в БД?

@insabearnia · Регистрация: 30.12.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Есть такой фрагмент html кода, написанного на vueJS:

HTML5
1
2
3
<div id="app">
       <el-input placeholder="Введите значение" v-model="input"></el-input>
</div>

Она размещает на web-странице поле ввода.
Вот скрипт vueJS:

JavaScript
1
2
3
4
new Vue({
          el: '#app',
          data: {}
      })

Что мне надо:
Объясните, пожалуйста, как мне взять значение, которое ввёл пользователь, чтобы записать его потом через контроллер в БД? Как ввести переменные и куда их ввести.
Спасибо огромное за ответ, мне он очень поможет!

@ntlinuxnt · 07.05.2017, 16:14

А где ваш контроллер?

@insabearnia · 07.05.2017, 16:16 **[ТС]**

Проблема в том, что я не знаю, как в нём оперировать данными, пока не смогу получить значения из полей. Поэтому я не знаю, как его реализовать сейчас.

@xoraxax · 07.05.2017, 17:15

судя по твоим вопросам, ты вообще ничего не знаешь, и чтобы ответить на них тебе придется курс лекций прочитать

@insabearnia · 07.05.2017, 18:15 **[ТС]**

Судя по вашим ответам, такая же ситуация. Я знаю, что в обычной html форме input можно вставить th:object, th:value={} и т.д. и он запишет туда значение. Возможно, в этом я ошибаюсь, но хоть какое-то представление есть. А тут я не знаю, что надо писать. Вот и стараюсь узнать. Я 3-й день всего mvc занимаюсь.

Добавлено через 22 минуты

Сообщение от ntlinuxnt

А где ваш контроллер?

Вот, пожалуйста. Понятия не имею, как это влияет на мой вопрос:

Java
1
2
3
4
5
6
7
8
@Controller
public class WebController extends WebMvcConfigurerAdapter {
 
    @RequestMapping(value="/", method=RequestMethod.GET)
    public String changeValue(User user) {
        // Что делать тут я понимаю. Что мне надо делать в vue.js, чтобы он вернул мне поле имя для user?
    }
}

@xoraxax · 07.05.2017, 18:49

Сообщение от insabearnia

Судя по вашим ответам, такая же ситуация

судя по моим ответам ты наконец то понял, что ничего не знаешь?
Давай может сформулируешь вопрос на нормальном русском языке, так, чтоб все поняли, что конкретно ты хочешь сделать и что именно тебе не понятно?
Ты не знаешь как модель во вьюху передать или что?

@insabearnia · 07.05.2017, 18:59 **[ТС]**

Сообщение от xoraxax

судя по моим ответам ты наконец то понял, что ничего не знаешь?
Давай может сформулируешь вопрос на нормальном русском языке, так, чтоб все поняли, что конкретно ты хочешь сделать и что именно тебе не понятно?
Ты не знаешь как модель во вьюху передать или что?

Да, понял, что ничего не знаю. Именно поэтому и пишу тут, зачем сто раз это повторять?!
Вот мой вопрос:
1) Я написал маленькую jsp страницу.
2) Подсоединил к ней маленький фреймворк vue.js. Это фреймворк для js, вроде это я знаю, но это не точно.
3) Написал маленькую форму ввода для пользователя:

HTML5
1
<el-input placeholder="Введите значение" v-model="input"></el-input>

4) Написал внизу маленький скрипт:

JavaScript
1
2
3
4
new Vue({
          el: '#app',
          data: {}
      })

5) Прописал все зависимости, прописал всё в webapp.
6) Запустил страницу, всё работает, форма есть.
7) Теперь! Мне надо как-то(ты, гуру, я думаю объяснишь как) сделать так, чтобы я ввёл "xoraxax" в это поле, которое на моей маленькой странице и эта запись записалась в переменную, которая после отправиться контроллеру.
8) Вот как это делается с обычной формой:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<form action="#" th:action="@{/}" th:object="${user}" method="post">
            <table>
                <tr>
                    <td>Name:</td>
                    <td><input type="text" th:field="*{name}" /></td>
                    <td th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</td>
                </tr>
                <tr>
                    <td><button type="submit">Go</button></td>
                </tr>
            </table>
        </form>

9) Мне хотелось бы узнать, как это сделать для vue.js.

@reisal78 · 07.05.2017, 20:54

Сообщение от insabearnia

Я написал маленькую jsp страницу.

Сообщение от insabearnia

HTML5
1
<td th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</td>

Вы для начала уж разберитесь jsp или thymeleaf вы используете. Это как бэ, похожие но не связанные между собой вещи.

Сообщение от insabearnia

Вот, пожалуйста. Понятия не имею, как это влияет на мой вопрос:

Java
1
2
3
4
5
6
7
8
@Controller
public class WebController extends WebMvcConfigurerAdapter {
 
    @RequestMapping(value="/", method=RequestMethod.GET)
    public String changeValue(User user) {
        // Что делать тут я понимаю. Что мне надо делать в vue.js, чтобы он вернул мне поле имя для user?
    }
}

Вы приводите кусок кода, принимающего GET запрос, и постом ниже форму отправляющую POST запрос.

Сообщение от xoraxax

судя по твоим вопросам, ты вообще ничего не знаешь, и чтобы ответить на них тебе придется курс лекций прочитать

На самом деле к этому и добавить нечего. Почитайте для начала как устроен http протокол. Попробуйте отаправить post запрос без использованию каких либо фреймворков, просто чистый html. Когда разберетесь как это все работает, ваш вопрос отпадет сам собой.

@insabearnia · 08.05.2017, 03:24 **[ТС]**

Благодарю.

@Huge · 09.05.2017, 08:32

Я не гуру как здесь некоторые при чем не стебусь, реально оцениваю свой лвл.
Но на ск-ко я знаю, то POST запрос через Thymeleaf отправить нельзя, можно через Ajax, form, используя http..., На ск-ко понимаю, большинство людей да и сам стал практически всегда отправляют через Ajax или если просто нужно, то используя http.
Выглядит примерно так:
http:

HTML5
1
<a href = "finishProducts?part=guestroom">

Ajax Вам нужно почитать так там есть вариации: при отправке массивов, отдельной информации или массивов и отдельных фрагментов нужной информации.
так вот контроллер на прием выглядит примерно так:

Java
1
2
  @RequestMapping(value = "/finishProducts", method = {RequestMethod.GET, RequestMethod.POST})
    public ModelAndView showBedroom(@RequestParam(value = "part")String part){

@reisal78 · 09.05.2017, 13:15

Сообщение от Huge

Но на ск-ко я знаю, то POST запрос через Thymeleaf отправить нельзя

что вы имеете в виду?

@Huge · 09.05.2017, 13:27

имел ввиду, что просто без form отправить данные через Thymeleaf, используя только, к примеру:

HTML5
1
2
 <input type="checkbox" name="selectForChange" th:attr="id=${curtain.id}"
                                      style="background-color: #0f0f0f"/>

я бы сказал невозможно, но скажу что не видел как это сделать без вспомогательных Ajax, form и т.п.

@reisal78 · 09.05.2017, 13:44

Сообщение от Huge

что просто без form отправить данные через Thymeleaf

Thymeleaf и JSP это фреймворки, которые преобразуют файл в каком то в определенном формате в код в html.
тег <form> это обычный html тег. И jsp и thymeleaf прекрасно его генерируют

Новые блоги и статьи Все статьи Все блоги /
Жизнь в неопределённости kumehtar 23.03.2026 Жизнь — это постоянное существование в неопределённости. Например, даже если у тебя есть список дел, невозможно дойти до точки, где всё окончательно завершено и больше ничего не осталось. В принципе,. . .	Модель здравоСохранения: работники работают быстрее после её введения. anaschu 23.03.2026 geJalZw1fLo Корпорация до введения программа здравоохранения имела много невыполненных работниками заданий, после введения программы количество заданий выросло. Но на выплатах по больничным это. . .	1С: Контроль уникальности заводского номера Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git
1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .

@ntlinuxnt $ su 1605 / 520 / 97 Регистрация: 18.11.2010 Сообщений: 2,807 Записей в блоге: 2
	07.05.2017, 16:14
	А где ваш контроллер? 0

@insabearnia 0 / 0 / 1 Регистрация: 30.12.2016 Сообщений: 15
	07.05.2017, 16:16 [ТС]
	Проблема в том, что я не знаю, как в нём оперировать данными, пока не смогу получить значения из полей. Поэтому я не знаю, как его реализовать сейчас. 0

@xoraxax 3639 / 2971 / 918 Регистрация: 05.07.2013 Сообщений: 14,220
	07.05.2017, 17:15
	судя по твоим вопросам, ты вообще ничего не знаешь, и чтобы ответить на них тебе придется курс лекций прочитать 0

@insabearnia 0 / 0 / 1 Регистрация: 30.12.2016 Сообщений: 15
	08.05.2017, 03:24 [ТС]
	Благодарю. 0

VueJS и springMVC. Как записать данные из поля ввода в БД?

Решение