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 прекрасно его генерируют

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@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. Как записать данные из поля ввода в БД?

Решение