Vue.js - базовый JavaScript интерфейс для REST приложения (часть 1). Spring Boot REST

Spring Boot Rest Application + Vue.js: добавляем простой JavaScript интерфейс для получения и отображения данных с сервера. Vue.js - современный javaScript фреймворк позволяющий просто создавать сложные и понятные интерфейсы, способный отображать большое количество интерактивных элементов с высокой скоростью отрисовки.
Код из видео:
github.com/dru...
Отладка в браузере:
• JavaScript debug: отла...
Для начала нам необходимо создать статическую страницу для отображения простого vue шаблона
Введение в Vue.js:
ru.vuejs.org/v...
Для асинхронной работы с сервером мы возьмём vue resource и опишем с помощью этой библиотеки объект, позволяющий нам без лишнего кода делать простые запросы на получение и изменение данных
Vue resource:
github.com/pag...
Vue resource возвращает Promise из всех методов взаимодействия с сервером. Ознакомиться с объектом Promise можно на сайте JavaScript.ru:
learn.javascrip...
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
➡ Твиттер: / letscodedru
➡ Чат в Discord: / discord
➡ Группа Вконтакте: letscod...
➡ Канал в Telegram: t.me/letsCode_dru
➡ Чат в Telegram: t.me/joinchat/...
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
Поддержать проект:
➡ Patreon / letscodedru
➡ Яндекс.Деньги money.yandex.r...
➡ PayPal paypal.me/letscodedru
➡ Qiwi qiwi.me/letscode
➡ WebMoney/BitCoin funding.webmon...
➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
➡ Ссылка на канал: / @letscodedru
➡ Ссылка на Яндекс.Дзен: zen.yandex.ru/...

[@mrMarseleene]

единственный канал, где надо скорость ставить на 0.75 а не 1.5

[@bwaligarus]

Я думал я один такой)

[@1absolute8]

занятия с пьяным преподом

[@kostiantynvergelis2664]

пускай те кто ставит дизлайки вечно работают в команде с индусами и перелапачивают за ними их говнокод. Автору огромное спасибо!

[@user-yq3et5sg4t]

Урааа, наконец-то отличные уроки с объяснениями, но при этом без воды, а не просто копипаст кода с комментариями типа «создаем контроллер» и всё, и как огромный плюс, ещё и с хорошей дикцией. 😍😍😍

[@letsCodeDru]

Урааа, меня ещё и девушки смотрят :)

[@user-yq3et5sg4t]

Иногда мы тоже хотим стать кодерами))

[@JustMoreyl]

Спасибо, Спасибо Андрей!!

[@romanmotovilov129]

Спасибо за очередной отличный урок!!! С vue.js тяжеловато, но после Ваших уроков прокачивает хорошо!!!

[@Kalajambo]

Обожаю когда все быстро, четко и по делу. Спасибо.

[@IvanIvanov-oi5nx]

Огромное спасибо за сей познавательный и оооочень полезный видеокурс. Дополнительная круть его состоит в его свежести, все ссылочки на сторонние ресурсы работают, архитектура соответствует указанному на видео - всегда легко, удобно найти и следовать за автором.

[@dmitrymukhin9458]

Очень здорово! Емко, информативно и с юмором=)

[@viktormarlo6261]

спасибо за уроки! стараюсь писать код на опережение. попытался сделать this.messages = data и это сработало

[@vladyslavovsiychuk3411]

Пол года проработал в компании на Spring и только сейчас понимаю что происходит в видео

[@alexandrerparchitect9934]

Спасибо ! Очень доходчивое пояснение !!!

[@orifdjonergashev9472]

Классная подача и без воды))

[@aleksplats]

Ты очень крут!

[@muhtoryusufjanov3946]

да постепенно становится все понятно (thanks for you lessons)

[@D.P._]

Спасибо! Отличный и лаконичный материал!

[@gamerecords_site]

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

[@arkadymagomedov1700]

Андрей, приветствую! Я работаю фронтом. Изучаю бэк. Ваши видео бесценны! Так держать! Вы будете в этом курсе рассматривать авторизацию? Очень хотелось бы разобраться в настойках Spring Security для работы с JWT.

[@letsCodeDru]

буду. Не факт, что JWT, но не исключаю и этот вариант. Стараюсь не усложнять

[@ПавловичРулит]

Андрей у меня в файле main.js подчёркивает красным все стрелки в стрелочных функциях, в чём может быть ошибка?

[@letsCodeDru]

Диалект в конфиг ах стоит ES3, скорее всего. Сейчас далеко от компа, не подскажу, куда ткнуть. Советую в настройках проекта поискать

[@ПавловичРулит]

Да, действительно в настройках Intellij Idea для JavaScript был установлен ECMAScript 5.1 поменял на 6. Спасибо за оперативный ответ.

[@alexandrguravskiy9985]

Спасибо помогло

[@alexeyvekovshinin7664]

@@ПавловичРулит у тебя vue нормально заработал с ECMAScript 6? у меня почему-то проект нормально собирается, но vue категорически не хочет работать. С ES 3 vue работает, но в main.js синтаксис красным подчеркивается :S

[@ПавловичРулит]

Да, всё работает. В проекте нужно сделать два запуска, 1-запустить проект Intellij IDEA, чтобы заработал backend и 2-из терминала среды разработки запустить команду yarn dev для запуска vue js. В проекте ECMAScript 6 подключаем так File->Settings... в открывшемся окне выбираем Languages&Frameworks->JavaScript на правой панели в выпадающем списке выбираем ECMAScript 6. Если не заработал по другой причине спрашивай.

[@andrewsmirnov4220]

Почему при обращении к ресурсу localhost:8080 по умолчанию возвращается страница index.html, хотя в прошлом видосе возвращался массив данных. Может я что-то пропустил?

[@Spiculum24]

контроллер отрабатывает только путь localhost:8080/message

[@johnrambo6996]

@@Spiculum24 а что обрабатывает localhost:8080?

[@johnrambo6996]

tomcat?

[@maximlevshin]

Привет. А не правильней будет получать сообщения в корневом компоненте, а потом передавать их в message-list? Спасибо за все твои видео!

[@letsCodeDru]

Верно говоришь. Но я тут не парился, т.к. это знакомство, а дальше мы будем прикручивать vuex для работы с данными. Там уже совсем по-другому дело пойдёт

[@Geromank]

main.js в network выделен красным и ошибка 404, а также в коде переменную app определяет как не использованную, соответственно не показывает сообщение, в чём загвоздка?

[@romaniancoder5187]

Здорово, спасибо, Андрей. Но остался вопрос - допустим, мне не хочется весь фронтенд заливать в ресурсы а вынести это в отдельный проект со своим репозиторием. Как тогда сконфигурировать обе части допустим, на том же грэдле? В сети читал много статей, но именно для моего случая не нашел ничего подходящего(

[@JazZ6386]

Если возникает ошибка Vue.resourse is not function, перенесите messageApi и подправьте его Vue.component('messages-list', { props: ['messages'], template: '' + '' + '', created: function () { var messageApi = this.$resource('/message{/id}'); messageApi.get().then( result => result.json().then( data => data.forEach( message => this.messages.push(message) ) ) ) } })

[@rudolfsikorsky7900]

В версии 3 документации как-то всё по-другому. Есть ли смысл учить 2-ю?

[@letsCodeDru]

не стоит. Изучай актуальную

[@user-pz6ss6qo6y]

Круть!

[@AnnaSmirnova1]

Спасибо!!!

[@Евгений-ч9к2ф]

охеренно!

[@dimaprikolist19]

Подскажите пожалуйста у меня проблема с var messageApi = Vue.resource('/message{/id}'); пишет Unresolved function or method resource и по этому не хочет работать messageApi.get().then(result => console.log(result)) в компоненте messages- list. Решение пересобрать проект и скопировать код не помогло ( прочитал ниже в коментариях подобную проблему )

[@hondashadow750phantom-penn3]

Меняй диалект JS на 6. Мне помогло

[@dimaprikolist19]

@@hondashadow750phantom-penn3 спасибо, тоже помогло

[@АлексейБет]

Жесть, но интересно

[@flatmapper]

мощно

[@dostanleelnatsod5557]

есть вопрос, возможно дилетантский. допустим есть json с сервера, в котором содержится вся необходимая информация для рендеринга страницы через vue.js. каким образом передается этот json на страницу клиенту? только через запрос ресурса из vue.js, или можно как-то передать сразу при серверном рендеринге, например засунуть где-то в разметку?

[@phoenigm]

Здравствуйте. А чем подход, который вы продемонстрировали на видео, отличается от ajax-запросов?

[@RAMMY237]

ajax - это асинхронный вызов, который позволяет, например, подгрузить новые данные с сервера на основе выбора пользоваеля на форме. Если не ошибаюсь, в уроке на видео таких задач не стояло, здесь всё синхронно и просто продемонстрированы самые азы Vue.js

[@КаренКильмухаметов-ч3ч]

Подскажите, я правильно понял? Андрей использует идею, для написания JS? Просто меня учили через вебшторм помоему...

[@letsCodeDru]

Это на самом деле одна и та же ide, просто с разным набором плагинов. В идее, rubymine и платном pycharm присутствует плагин для редактирования js

[@useruser-yr1rr]

@@letsCodeDru Подскажите какие плагины в intellij idea вы используете для Vue? Заметил что у вас Intellij idea в main.js не на что не ругается - что-то отключено в inspection или какие-то другие решения?

[@ekaterina997]

А если я не хочу использовать Vue на фронтенде, а хочу использовать java, можно же? В какую сторону копать по этому вопросу?

[@letsCodeDru]

Vaadin или GWT для вэба

[@maksimmarkelov1971]

Спасибо большое за урок! Возник вопрос, почему не используются Template Literals (``)? Это же по идее удобнее, чем конкатенировать строки

[@letsCodeDru]

Ещё дойдём до этого момента)

[@alexeykozlov7836]

Здорово, но жесть как быстро. Прыгание с окна на окно, приходится перематывать по 50 раз, чтобы хоть что-то понять.

[@vsevolodtsukanov7917]

Переменных message маловато

[@RandomPerson-gy3ql]

Если у кого-то не подключается скрипт, можно сделать так:

[@KyivanEnjoyer]

пытаюсь сделать тоже самое с React. также добавил в index.html импорты React`a, использовал примерный код вывода строки, пусто:(

[@nemoway8001]

Как делал? Можешь скинуть гит? Или что-нибудь полезное)

[@nurte4]

почему когда я меняю сервер порт на 8082 по дефолту index.html не запускается ? на localhost:8082

[@artsbrand]

какая может быть проблема в том что айдихи отображаются, а текст сообщений не отображается

[@hamster3876]

не нашли решение? свою ошибку нашел, хех

[@artsbrand]

@@hamster3876 я тоже нашел, спасибо. а в чем у вас это проявилось? )

[@hamster3876]

@@artsbrand, у message есть два типа String с именами id и text, так вот обращался не по text, а по test, а test, естественно, нет

[@borismatashin5891]

Avtor kiborg)

[@antonalekseev2694]

Андрей, подскажите, пожалуйста! Пытаюсь прикрутить к предыдущему проекту (Spring Boot MVC) Vue.js и уже на начальном этапе: No method or field with name 'message' on line 14 Будто скрипт не видит (или переменную app). Ну и разница в том, что в MVC-проекте использовались темплейты. Куда копать? Спасибо!

[@letsCodeDru]

Надо смотреть, что там в 14 строке, смотреть, откуда этот message растёт и почему не найден. По такому обрывки не ясно

[@antonalekseev2694]

14 строка в greeting.mustache: {{ message }} и в main.js: var app = new Vue({ el: '#app', data: { message: 'Привет, Vue!' } }); только вот var app ИДЕЯ подсвечивает "Unused variable" все так просто, что голову сломал((

[@d0npan152]

На 13:38 стал смотреть что прислал сервер, и ответа не последовало, дописал код согласно видео, ответ от сервера так и не получен. Что делать?

[@АлексейБет]

Добрый день. Подскажите как добавить этот скрипт в предыдущие уроки. Если код вставить как есть, то, если я правильно понимаю, шаблонизатор freemarker не правильно распознаёт код из данного видео и выводит просто {{ message }}

[@hondashadow750phantom-penn3]

Тоже с этим помучился. Проблема была, когда пытался использовать локалный файл vue.js и грузил вместе с main в конце BODY. Загружался только первый по порядкуб второй никак. Решилось, когда стал грузить vue.js по CDN в заголовкею Почему так, не знаю.

[@ВалентинБадасин]

быстро летает программа - какой у тебя дистрибутив?

[@hyperborean72]

Андрей, подскажите, пожалуйста, как в ваш main.js можно было бы 'импортировать', как и вы, не используя node.js и какой-то из упаковщиков, внешний плагин - напр., vue-resource.js? То есть имеется инстанс, сконоструированный из импортированного vue.js инструкцией new Vue(..), но как в том же js-файле обратиться к функциональности, взятой из другого импортированного файла? Обыскался ... все обучалки на коннекторы к внешним API заставляют пользоваться node.js Заранее очень вас благодарю.

[@letsCodeDru]

так я же в видео показал, как это сделать :) как раз на примере vue-resources нужно подключить зависимость на файл в html и потом, в соответствии с инструкцией к плагину/библиотеке корректно инстанциировать его/её в файле main.js В следующих видео будут пояснения, как автоматически загружать файлы, без добавления их в html :)

[@hyperborean72]

да, вроде, я по убогой инструкции к этому плагину делаю .. но не взлетает. Андрей, вы не поясните, там есть две страницы: github.com/pagekit/vue-resource/blob/develop/docs/resource.md, где даются указания по использованию некоего 'resource service', и на соседней странице github.com/pagekit/vue-resource/blob/develop/docs/http.md, где описан API для 'http service' API у них разный: напр., 'resource service' постит методом save (кажется ... ни в чем не уверен), ну, а 'http service' - post В чем между ними разница? Впрочем в моем случае, чтобы я ни использовал (из инстанса Vue): this.$http.post('jsonplaceholder.typicode.com/posts{/id}',{ или this.$resource.save('jsonplaceholder.typicode.com/posts{/id}',{ на вкладке Network > XHR в Chrome Developer никакой активности. Кстати, нужен - не нужен этот {/id}? Или, может, только для get/put/delete, если обращение к конкретному инстансу? Извините и спасибо еще раз

[@letsCodeDru]

Да, есть там проблема с подключением модулей. В качестве обхода можно пока что ресурсы делать также как и я github.com/drucoder/sarafan/blob/master/src/main/resources/static/js/main.js#L13 я в видео всё равно потом до ума доводить буду - там и расскажу, как правильней подходить к этой проблеме по поводу разницы 'resource service' и 'http service': первый служит обёрткой для обслуживания rest api , а второй - для произвольных обращений к любым http ресурсам, там ручками придётся составлять запросы к серверу. Первы вариант мы уже рассмотрели, а второй будет позже

[@hyperborean72]

Ох, Андрей … спасибо, взлетело. Как и в большинстве случаев вкралась ошибка синтаксиса. Могу я вас еще попросить прокомментировать? Я для тестирования rest пользуюсь jsonplaceholder.typicode.com/ Там приведен пример, где на fetch навешаны два промиза: .then(response => response.json()) .then(json => console.log(json)) не могли бы вы пояснить, зачем их два. И собственно зачем нам второй промиз с выводом json в консоль, если, по-моему, то же самое можно получить, выведя в консоль в первом промизе response.body Или я не прав? Вы, кажется, то же любить чейнить (chain) промизы, причем декларируете их иначе - вызываете второй изнутри первого. *** Вы не поделитесь опытом, как вы отлаживаете - ну, помимо Chrome Dveloper? Вот те же промизы, например… по-моему, нетривиальная вещь. Ну, это JS А для отладки именно Vue.js вы можете что-либо посоветовать ... чтобы знало синтаксис директив (хотя их и немного), подсказывало расстановку скобок, имело представление о lifecycle? Лучше если в виде плагина к Chrome *** И последнее. Где лучше почитать о “стрелочных функциях”? которые так смахивают на java лямбда-выражения. Хотелось бы понять ваш пассаж @ 11:40 Вы говорите, кажется, о том, что нельзя created-функцию записать в виде created: this ->… А я вот не понимаю, почему вообще могла возникнуть такая идея   Еще раз вам спасибо Стимулируете наше мозговое вещество.

[@Shodgearo]

Мне кажется или это как-то странно: использовать js для описания html, да ещё и в строке?

[@victormog]

Мда... с первого раза не понял... :-))

[@letsCodeDru]

Что? Все ещё быстро? о_О

[@victormog]

Ну, "быстро" - это уже _фирменный стиль!_ :-) Тут пауза поможет справиться, если нужно. Видимо, фронтенд у меня совсем запущен... За наводку на learn.javascript.ru/ - отдельное спасибо! Надо будет полистать внимательно.

[@letsCodeDru]

Ресурс бомбический. Многие автора этого сайта называют "наше всё по Javascript". Я в свое время по нему все пробелы в знаниях закрывал

[@KyivanEnjoyer]

очень спасибо за урок, но у меня ошибка с var messageApi = Vue.resource('/message{/id}'); resource подчеркивает "unresolved function", a в console хрома пишет Uncaught TypeError: Vue.resource is not a function. Андрей, помогите пожалуйста) upd. Сделал заново проект, скопировав свой код и все пофиксилось) шо за бред

[@kursorrr1220]

надо было не ctrl + shift + f9 а полностью ребилд проекта, либо ctrl + shift + f9 в index.html 13:28 у автора такая же ошибка

[@dragulaxis]

Для человека, не секущего в JS, было экстра сложно