Настраиваем Webpack и разбиваем фронт на модули. Spring Boot REST

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ก.ย. 2024
  • Spring Boot Rest Application: настраиваем сборку frontend с помощью WebPack и babel, что позволит использовать в проекте hot code reload и все современные возможности JavaScript, например - разбиение на модули. А также подключить vue-compiler и использовать однофайловые компоненты Vuejs
    Ссылка на код из видео:
    github.com/dru...
    Перед началом работы необходимо настроить рабочее место и установить на компьютер node js и Yarn.
    Ссылка на видео по установке Node.js:
    • Установка node.js (и n...
    Ссылка на видео по работе с пакетным менеджером NPM:
    • Node.js: NPM - пакетны...
    Ссылка на сайт с документацией по Yarn:
    Установка: yarnpkg.com/en...
    Описание команд: yarnpkg.com/en...
    Далее нам необходимо настроить в нашем проекте webpack. Для знакомства с основными возможностями Webpack рекомендую посмотреть следующее видео:
    • Webpack - сборщик web ...
    Чтобы сократить затраты по времени и уменьшить количество ошибок, рекомендую ориентроваться на следующие конфигурационные файлы:
    Зависимости для нашего фронтэнда: gist.github.co...
    Настройки webpack: gist.github.co...
    После настройки webpack необходимо немного изменить контроллер и шаблон index.html: мы отказываемся от явного указания внешних зависимостей, вместо этого будем поставлять необходимые библиотеки в одном файле с нашим исполняемым кодом
    Для определения режима запуска приложения (режим разработки или релизный код) нам необходимо при старте приложения указать переменную окружения spring.profiles.active=dev, подобно тому, как мы это делали в приложении Sweater:
    • Spring Boot: публикуем...
    В связи с тем, что frontend приложения разнесён по модулям, нам необходимо переконфигурировать Vue Resource:
    github.com/pag...
    ➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖
    ➡ Твиттер: / 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/...

ความคิดเห็น • 140

  • @zagamusic5089
    @zagamusic5089 2 ปีที่แล้ว +13

    В 22 году столкнулся сначала с проблемой can not find vue-loader/lib/plugin, выполнил npm i vue-loader@15 --save-dev, далее была ошибка options has an unknown property 'contentBase' в webpack.config.js в module.exports вместо 'contentBase' нужно ставить static

    • @user-jl5ob4wc4o
      @user-jl5ob4wc4o 2 ปีที่แล้ว +3

      Спасибо, твой коммент мне очень помог!)

    • @borymskyi
      @borymskyi 2 ปีที่แล้ว

      спасибо!

    • @mizantropoff
      @mizantropoff 4 หลายเดือนก่อน

      за ContentBase спасибо. А с первой ошибкой я разобрался, глянув современный туториал по webpack, там в конфиге вначале поправил строчки таким образом:
      const path = require('path');
      const {VueLoaderPlugin} = require('vue-loader');
      main.js с учетом Vue 3 сделал практически в слепую таким образом :
      import {createApp, h } from 'vue'
      import App from 'pages/App.vue'
      import VueResource from 'vue-resource'
      const app = createApp({
      render: () => h(App)
      })
      app.mount('#app')
      App.use(VueResource)
      Работало до начала использования vue-resource ($resource), этот функционал убрали из Vue3, пока не нашел как переделать код. $http.put/get/post дает сразу promise, куда запихать функции update, save, delete - не понимаю, если их просто вырезать из когда, оставив дальнейшие then, не работает, на большее пока фантазии не хватило, очевидно, должна использоваться какая то совсем другая логика.

  • @agent_tim
    @agent_tim 2 ปีที่แล้ว +7

    Чтобы выполнить данный урок в апреле 2022 года, я выполнил следующие действия:
    1. Использовал версию nvm 8.17.0 (carbon). Используя последнюю stable версию nvm 18.0.0, у меня ничего не получалось, что бы я ни прописывал в консоли, и какие версии компонентов я бы не использовал
    2. Все версии компонентов я ставил точно такие же, как приведены в уроке: add vue@^2.5.17 vue-resource@^1.5.1 и yarn add -D webpack@^4.17.2 webpack-cli@^3.1.0 webpack-dev-server@^3.1.7 babel-loader@^8.0.2 @babel/core@^7.0.0 @babel/preset-env@^7.0.0 vue-loader@^15.4.1 vue-template-compiler@^2.5.17
    3. Если вы устанавливали компоненты из nvm 18.0.0, то нужно их сначала удалить: yarn remove vue vue-resource и yarn remove -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env vue-loader vue-template-compiler, а затем установить из под nvm 8.17.0 согласно пункту 2
    4. Чтобы nvm работала в консоли intellij idea нужно в настройках Windows: Этот компьютер - Свойства - Дополнительные параметры системы - Переменные среды - Системные переменные - Path: Прописать путь к nvm: C:\Users\.......\.nvm\versions
    ode\v8.17.0\bin

    • @ELISEY_OSADCHY
      @ELISEY_OSADCHY 2 ปีที่แล้ว

      Спасибо тебе огромное, весь день и ночь пытался сделать, ничего не выходило , но когда увидел твой коммент, пару минут и всё готово, спс тебе!!

    • @mizantropoff
      @mizantropoff 4 หลายเดือนก่อน

      [2/4] Fetching packages...
      error sockjs-client@1.6.1: The engine "node" is incompatible with this module. Expected version ">=12". Got "8.17.0"
      error Found incompatible module.

  • @bek2074
    @bek2074 5 ปีที่แล้ว +3

    Суперкурс! Некоторые видео часами на паузе прохожу - пока все ошибки разгребешь,пока что-то по-своему переделаешь, доку разгребешь...

  • @Krainiiserver
    @Krainiiserver 6 ปีที่แล้ว +25

    На этом видео я сломался )) Не то чтобы я что-то не понял, я вообще не понял что происходит, что мы делаем, зачем... Лучше пойду свитер поковыряю.

    • @letsCodeDru
      @letsCodeDru  6 ปีที่แล้ว +1

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

    • @user-ux2lw7oh5z
      @user-ux2lw7oh5z 5 ปีที่แล้ว +13

      Ага, "нет воды" - хрен проглотишь))))

    • @bloodyrain1437
      @bloodyrain1437 4 ปีที่แล้ว +1

      @@user-ux2lw7oh5z Ахаха, какое точное выражение, надо запомнить )))))))))

    • @ayrat11
      @ayrat11 3 ปีที่แล้ว +1

      @@letsCodeDru можно больше внимание беку уделять? Всё таки тема уроков спринг, а занимаемся большую часть времени фронтом. Не всем разработчикам бекенда нужно так глубоко погружаться во фронтэнд. Спасибо!

  • @borymskyi
    @borymskyi 2 ปีที่แล้ว +1

    Самое интересное в этом гайде это непонятные ошибки которых нету в ролике, для новичка это просто космос.
    Максимальная проверка твоих сил) Слабых духом сразу сносит.

    • @user-xw8co7dp6w
      @user-xw8co7dp6w 2 ปีที่แล้ว

      Разобрался? можеть скинуть свой гит?

  • @DanMiller777
    @DanMiller777 5 ปีที่แล้ว +7

    Ничего не понял, но было интересно ))

  • @aleksei4604
    @aleksei4604 2 ปีที่แล้ว +8

    Если у кого падает на options has an unknown property 'contentBase'.
    Надо заменить на static: './dist',

  • @iryna6389
    @iryna6389 5 ปีที่แล้ว +6

    Спасибо за видео. Чего все так парятся что нифига с фронтом непонятно? Я смотрю видосы из-за Спринга, там я докапываюсь и разбираю каждую строчку, а код из этого видео я тупо скопировала и не вникала(всеравно по одному видео вью и вебпак не разберешь, а углубляться нет ни времени, ни желания, ни потребности) Ну автору же нужно разобрать полноценное приложение, вот и выходят такие видосы, где все очень быстро и непонятно, т.к. это совсем другая тема. Андрей, отдельное спасибо за ссылки под видео!!!

  • @D.P._
    @D.P._ 5 ปีที่แล้ว +1

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

  • @Sergey111111
    @Sergey111111 5 ปีที่แล้ว +7

    Это все удобно, но становится уже не юзабельно. Просто с твоей стороны ты пишешь этот код не первый раз,, и тебе все понятно и очевидно, а зрители обучаются, и им нужно и время, и больше информации, что как происходит, возможные баги, и т.д. То есть, такой проект сделать можно, но узнать, как это работает нет. Upd. Но как сжатая энциклопедия очень круто все равно)

    • @letsCodeDru
      @letsCodeDru  5 ปีที่แล้ว +4

      Все разбирать подробно - не очень хорошо. Я показываю, как крутить левую педаль, вы додумаваете остальное, набивая шишки. :)

  • @user-uq4nd6go9c
    @user-uq4nd6go9c 4 ปีที่แล้ว

    Пересматриваю по несколько раз - помогает!

  • @AnnaSmirnova1
    @AnnaSmirnova1 4 ปีที่แล้ว

    Cпасибо Вам за урок!
    Было непросто, особенно с частью консоли. С помощью Chocolatey удалось сделать консоль подобно линуксовой.

  • @TheSaymonFenix
    @TheSaymonFenix 5 ปีที่แล้ว +4

    Спасибо автору огромное. Для любителей окон 10, если вы ловите - " 'yarn' is not recognized as an internal ..." в терминале, можете вот такой командой установить: npm install yarn -g ( вот тут подсмотрел, там вроде получше решение есть github.com/yarnpkg/yarn/issues/4199, а на соседнее похожее исью вообще Яков Файн отвечал, что мол пафы надо прописывать просто..). Проверить можно так: yarn --version, а дальше уже по видео можно двигаться..

  • @user-pg9xg5ei5t
    @user-pg9xg5ei5t 4 ปีที่แล้ว +8

    Небольшие советы для тех, у кого ничего не работает:
    1) В main.js новый объект (компонент) не Vuew, a Vue.
    2) Сразу удалите неправильный скрипт (см. на 5:20).
    3) Сразу через yarn (вместе со всем остальным) установите vue-template-compiler
    Мне пришлось удалять все приложение, откатываться к старому коммиту. Потом сделал так, как пишу в комментарии и все заработало.
    Возможно конечно изначально у меня где-то ошибка была, не знаю)

  • @user-ql5mz4ej4k
    @user-ql5mz4ej4k 6 ปีที่แล้ว +10

    Спасибо вам огромное за качественные и очень информативные уроки. Еще не встречал такой легкий для понимания и достаточно динамичный материал. Хотелось бы спросить, в этой серии уроков будут рассматриваться vue router? Очень хочется чтоб ваши уроки продолжались и дошли , возможно, до приближенной к релизной версии программы! Очень ждем новые уроки!

    • @letsCodeDru
      @letsCodeDru  6 ปีที่แล้ว +1

      Будет и роутер и vuex

  • @Elvolvers
    @Elvolvers 4 ปีที่แล้ว

    Ура! У меня запустилось после переустановки IDEA! Однофайловые компоненты - это круто. Я уж думал на Vue мазохисты пишут конкатенируя строчки шаблонов)

  • @a_vladychenko
    @a_vladychenko 5 ปีที่แล้ว

    Очень полезное видео. Давно хотел пощупать связку spring boot + vue

  • @nikitaantonenko3287
    @nikitaantonenko3287 5 ปีที่แล้ว

    Спасибо большое!) Это был просто восхитительный урок!)))

  • @iryna6389
    @iryna6389 5 ปีที่แล้ว +15

    Народ, может кому пригодится инфа. Проверить что вы установили в идее через yarn Settings/Languages and Frameworks/Node.js. Я три дня просидела с ошибкой Uncaught SyntaxError: Unexpected identifier. И ссылается на 1-ю строчку main.js (import Vue). Все файлы тупо копировала, ошибки быть не может, перекачивала все библиотеки, думала вопросы в версиях или хз. оказалось в контроллере @Value фигурную скобку закрыла круглой!!! Капец, гребаная скобка и три дня!!!! хочется бится головой об стенку, как так... Вобщем я к тому что будьте ооочень внимательны, даже если почти все копируете)))

    • @letsCodeDru
      @letsCodeDru  5 ปีที่แล้ว +9

      True. В такие моменты хочется все бросит и уйти в горы пасти овец. Зато, после того, как разберёшься, такая радость и раскаяние :)
      Молодец, что не сдалась, далеко пойдёшь

    • @user-iv3kk2tp2s
      @user-iv3kk2tp2s 3 ปีที่แล้ว

      Спасибо Вашему комментарию, точно такая ошибка была, сидел 2 часа и искал, оказалось забыл поставить $ перед кавычками

  • @mike_mi_mike
    @mike_mi_mike 4 ปีที่แล้ว

    Прежде чем смотреть видос, сначала смотрю комменты) Кстати для винды рекомендую поставить ubuntu bash с офф магазина windows (в инете посмотрите установку), а потом прямо в консоли идеи пишем bash, и уже ставим то, что нам нужно (nvm и т.д.)

    • @Spiculum24
      @Spiculum24 4 ปีที่แล้ว

      Гитбаш, который идет в комплекте с гитом тоже ок.

  • @user-bg1mi3sw4h
    @user-bg1mi3sw4h 5 ปีที่แล้ว +4

    Маленький гайд для тех, у кого Винда и кто совсем не одупляет, что делать. Идем сюда: github.com/coreybutler/nvm-windows . Качаем nvm и устанавливаем его. Дальше из cmd(лучше из администратора?) пишем: nvm install latest + плюс ставим yarn. Можете проверить установку командой nvm version. Технически, этого должно хватить, чтобы продолжить работать дальше по видео drucoder-а.
    Мне помогло. Но предупреждаю сразу, я не гарантирую, что дальше не полезут горбыли, плюс, не гарантирую, что вам это поможет. А и ещё, дальше на комьюнити идее делать нечего, так как она не схавает файлы с расширением .vue

  • @user-zb3gr6vi8w
    @user-zb3gr6vi8w 3 ปีที่แล้ว +2

    Тоже случился косяк. При импорте VueResource получал ошибку в консоли "Cannot redefine property: $url". Потом увидел, что забыл убрать подключение скриптов vue и vue-resource в main.html)

  • @sergei9172
    @sergei9172 2 ปีที่แล้ว +1

    Установка в 2022 (винда):
    1. Ставим автоинсталлятором nodejs nodejs.org/en/ (он также поставит и npm)
    2. Потом в командной строке (запускал от админа) ставим yarn командой отсюда classic.yarnpkg.com/en/docs/install#windows-stable
    npm install --global yarn
    3. В терминале IDEA в проекте пишем:
    yarn init
    yarn add vue vue-resource
    yarn add -D webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env vue-loader vue-template-loader

  • @michaelmorhant
    @michaelmorhant 5 ปีที่แล้ว +3

    Вот был gulp. Все было нормально, плагины поставил, таски настроил. Я вот смотрю на этот webpack и с этой стороны и с той. Вообще не пойму в чем его основная фишка

  • @borismatashin5891
    @borismatashin5891 3 ปีที่แล้ว

    Боль, кровь, страдания , 9 часов решение всех сопутствующих моментов, и крудилка на vue готова!) на java делаю за 15 мин)

  • @iliadmitriev01
    @iliadmitriev01 3 ปีที่แล้ว

    Видео хорошее, но требует минимального понимания из области webpack и vuejs
    Для тех кто не знает что это прийдется поразбираться.

  • @GrishaObrazcovV
    @GrishaObrazcovV 6 ปีที่แล้ว

    Очень благодарен за видео уроки! Когда ждать продолжение? )))

    • @letsCodeDru
      @letsCodeDru  6 ปีที่แล้ว +2

      Стараюсь каждую неделю выкладывать.

    • @GrishaObrazcovV
      @GrishaObrazcovV 6 ปีที่แล้ว +1

      Спасибо. Очень крутые видео!

  • @andreyzapolsky8834
    @andreyzapolsky8834 3 ปีที่แล้ว +2

    если не собирается проект webpack и выдает ошибку, не может найти vue-loader/lib/plugin. сделайте rollback сборщика npm i vue-loader@15 --save-dev

  • @user-dn3kj8ls9y
    @user-dn3kj8ls9y 5 ปีที่แล้ว +8

    Вылезает ошибка. Error: Cannot find module 'babel-preset-env' from '...'
    - Did you mean "@babel/env"?
    Вообще мне не нравится такой подход. Почему нельзя было сразу начать с этого? В первом же видео в контроллере сделать 1 метод получения одного сообщения и все. И начать крутить webpack и СРАЗУ писать правильный код. Пускай простой, но с разбиением на компоненты и тд. И акцентировать внимание больше на взаимодействии фреймворка с сервером (такой инфы я не нашел), а то что там на самой странице этот vue (и реакт и ангуляр) можно как хочешь крутить - этого у них в документации навалом инфы. А как работать с сервером - шиш.
    не понятно что в веб конфиге происходит. нашел что-то типа разбора (medium.com/@siddharthac6/getting-started-with-react-js-using-webpack-and-babel-66549f8fbcb8) правда для реакта. не помогло.
    ну вообще конечно цирк. Чтобы заработало А, нужно устнановить В, С и D а для них еще потребуется вот такая и такая библиотека, 100500 команд и 100501-ая, но там нюанс будет. Если вы на линуксе то один нюанс, на винде - другой нюанс. Ай, подождите, этот мануал уже устарел. Учите другой... А код то когда писать?

    • @user-kd9pp7ly9c
      @user-kd9pp7ly9c 5 ปีที่แล้ว

      По-моему, подход уникальный. Показывает действия разработчика когда нужно что-то улучшить или изменить.
      package.json и webpack.config.js разбирались достаточно подробно в видео про сам webpack (ссыль в уроке имеется). Мне пришлось его прорабатывать перед этим видео, т.к. без него действительно ничего не понятно.
      Взаимодействие с сервером(с бакэндом на Java) рассматривалась в предыдущих видео. Собственно, там несколько команд всего лишь и рассматривать то особо нечего.
      Ну а про то, что нужно скачивать кучу необходимых зависимостей для того, чтобы написать простейший код, ещё статья прикольная была. ))) habr.com/post/312022/

    • @antihype3450
      @antihype3450 5 ปีที่แล้ว +1

      Как ты решил проблему error:cannot find module babel preset env пожалуйста если знаешь скажи

    • @user-bg1mi3sw4h
      @user-bg1mi3sw4h 5 ปีที่แล้ว

      @@antihype3450, нашли решение проблемы?

    • @antihype3450
      @antihype3450 5 ปีที่แล้ว

      @@user-bg1mi3sw4h da nujno otdelno zaqruzit moduli ,koqda vse vmeste kasha polucaetsa

  • @Catishko
    @Catishko 5 ปีที่แล้ว +2

    не совсем понятно какие образом вы работаете с yarn через консоль Idea, при этом ещё и формируется package.json в самом проекте((( как-то это непонятно. И есть вопрос, может вы знаете как можно данный вариант работы с консолью реализовать в Eclipse для EE разработки, потому что очень нужно, а толковой инфы нет(

  • @vjotov
    @vjotov 5 ปีที่แล้ว

    спасибо за видео

  • @dmitrysomsin2117
    @dmitrysomsin2117 4 ปีที่แล้ว

    thx for the lesson

  • @caffeinejavacode1475
    @caffeinejavacode1475 4 ปีที่แล้ว +5

    Как сделать так чтоб Vue.js и Spring Boot были два независимых приложения и общались только через REST?

    • @user-ge4lr5cf4m
      @user-ge4lr5cf4m 3 ปีที่แล้ว +1

      Собрать отдельное приложение на спринге с необходимым api, написать необходимое приложение с vue.js, которое будет слать запросы к ресту, в чем проблема то?)

  • @GrishaObrazcovV
    @GrishaObrazcovV 6 ปีที่แล้ว +1

    И ещё хотелось бы реализовать авторизацию через токен ключ JWT auth0. Так как нет в интернете нормального обьяснения.

  • @damirdamir8388
    @damirdamir8388 2 ปีที่แล้ว

    Вот команда которая может вам временно помочь (kill -9 $(lsof -t -i:8000)) - и тогда повторно надо запустить (npm start)

  • @victormog
    @victormog 6 ปีที่แล้ว +6

    Очень быстро! :-)
    И если не затруднит, чутка хотя бы разжёвывать...
    _(просто аудитория тогда станет шире)_

    • @noyklgd4403
      @noyklgd4403 6 ปีที่แล้ว +2

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

    • @victormog
      @victormog 6 ปีที่แล้ว +2

      @@noyklgd4403
      При чём тут пак?
      По логике взаимодействия...

    • @noyklgd4403
      @noyklgd4403 6 ปีที่แล้ว +1

      взаимодействия чего с чем?

    • @victormog
      @victormog 6 ปีที่แล้ว +2

      nOy [KLGD]
      Пустой спор и не по адресу...
      Тебе всё понятно, тогда зачем тебе это видео?

    • @noyklgd4403
      @noyklgd4403 6 ปีที่แล้ว

      Я и не спорил с тобой))) Просто пытался тебя понять, что именно непонятно тебе в видосе. Логика взаимодействия чего и с чем? Логика взаимодействия компонентов Vue.js? Логика взаимодействия фронта с бэком? Ты высказал своё мнение, что было бы не плохо "чутка хотя бы разжёвывать...", я задал, вполне нормальный вопрос...

  • @kusyka911
    @kusyka911 5 ปีที่แล้ว +1

    Как по мне предпочительнее полностью отделять фронт от бэкенда, отсюда возникает вопрос, как реализовать авторазацию через рест, а не редиректы спринга?

  • @arthur_white30
    @arthur_white30 5 ปีที่แล้ว +3

    Столкнулся с проблемой: Cross-Origin Read Blocking (CORB) blocked cross-origin response accounts.google.com/o/oauth2/v2/auth?client_id=...
    Может кто-то знает, как решается? Не хочет показывать совсем содержимое main.js файла
    А как даже прогуглить эту проблему, нет мыслей

    • @user-bu5ge8jp8n
      @user-bu5ge8jp8n 5 ปีที่แล้ว +1

      вы решили проблему?

  • @jses8560
    @jses8560 3 ปีที่แล้ว +1

    Народ, может, кто знает.
    Непонятно для меня, почему недавно при логинизации начало падать приложение. Выдает 401-ошибку и надпись Unauthorized . Хотя запрос на /message успешно перенаправляется на гугл-авторизацию. Затем идет запрос на /login и вот тут и все падает. При том, что еще неск. дней назад все работало. С чем может быть проблема?

  • @KolosoffAlex
    @KolosoffAlex 4 ปีที่แล้ว

    Отличное видео! Только подскажите, как это потом деплоить? Или сделайте видео, пожалуйста

  • @user-uv9rp5up4p
    @user-uv9rp5up4p 5 ปีที่แล้ว +2

    Вдруг может кому пригодится, если будет похожая ошибка - "ERROR in ./src/main/resources/static/js/pages/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resou
    rces/static/js/pages/App.vue?vue&type=script&lang=js&)
    Module not found: Error: Can't resolve 'components/messages/MessageList' in 'C:\Java\letscode\RESTSarafan\sarafan\src\main
    esources\static\js\pages'
    @ ./src/main/resources/static/js/pages/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resources/s
    tatic/js/pages/App.vue?vue&type=script&lang=js&) 13:0-59 16:18-30
    @ ./src/main/resources/static/js/pages/App.vue?vue&type=script&lang=js&
    @ ./src/main/resources/static/js/pages/App.vue
    @ ./src/main/resources/static/js/main.js", тогда внимательно проверяйте название файлов .vue!
    Мой пример - в папке \components\messages лежало три файла, два из них назывались MessageRow.vue и MessageForm.vue, а третий назывался MessageList(почему то расширение было скрыто), при этом все три файла и Intellij Idea отображались правильно.

    • @alexeyverishko915
      @alexeyverishko915 4 ปีที่แล้ว

      Очень помог комент спасибо.

  • @mikhailsviryd7129
    @mikhailsviryd7129 4 ปีที่แล้ว +1

    ... чем заменить для Freemarker?

  • @Romigo4
    @Romigo4 4 ปีที่แล้ว

    В каком то моменте у меня перестали работать JS файлы, пришлось отмотать назад, чтобы понять что помимо компиляции Java кода, нужно ещё стартовать npm start

  • @Elvolvers
    @Elvolvers 4 ปีที่แล้ว

    Ни**я не понял, но очень интересно!

  • @alexeyshatilov4568
    @alexeyshatilov4568 4 ปีที่แล้ว +1

    @letsCode, подскажите пожалуйста, что за магия когда быстро удаляются одинарные кавычки с '+' из набора конкатенированных строк в единый String (когда переносим темплейтную часть в single vue file template?). Спасибо =)

    • @tonybonybob
      @tonybonybob 3 ปีที่แล้ว

      изначально лучше писать строки в js в ` ` - бектики (на клавиатуре слева от 1), тогда не нужна вся эта конкатенация с + а переменные в такие строковые щаблоны передаются с помощью ${}

  • @andrewsapolsky3880
    @andrewsapolsky3880 4 ปีที่แล้ว

    если кто-то делает по мануалу, то лучше установите vue-loader версии как у автора, а то есть yarn add -D vue-loader@15.4.1 или если уже установили актуальную версию можете прописать в терминале: yarn upgrade vue-loader@15.4.1 Ну или же просмотреть путь файла plugin.js в папке node_modules/vue-loader и прописать в require.
    Надеюсь кому-то поможет

    • @user-gj3rz7qv1l
      @user-gj3rz7qv1l 2 ปีที่แล้ว

      первый вариант вызвал другую ошибку Cannot find module 'webpack/lib/RuleSet'. Второй вариант вызвал ошибку: VueLoaderPlugin is not a constructor, после того как я пошарился и поменял строку const VueLoaderPlugin = require('vue-loader/dist/plugin');

  • @gamerecords_site
    @gamerecords_site 3 ปีที่แล้ว

    C webpack не смог скомпилировать. Очень много времени уходит чтобы разобраться с этим. То jar не собирает, то не jar не запускается.

  • @user-ss3yc8cc2y
    @user-ss3yc8cc2y 4 ปีที่แล้ว

    Все супер и классно! Спасибо за труд.
    PS. Понять не могу почему не обновляется список сообщений после добавления/редактирования, а надо перезагружать страницу
    Еще раз спасибо

  • @Denys.Stoianov
    @Denys.Stoianov 3 ปีที่แล้ว

    Хорошее видео, а есть пример как такое сделать но только без Vue, a с такой сборкой Spring Boot + Thymeleaf?
    на уже существующем прокте просто соптимизировать все зависимости, просто в проект притянут полностью Bootstrap 4 со всеми зависимостями, а на проекте используется только 5% от силы. Как в таком случае поступаить и минимизировать все засимости.
    спасибо

  • @damirdamir8388
    @damirdamir8388 2 ปีที่แล้ว

    К тому же время жизни моего webpack примерно 5 минут, потом он перестаёт работать и приходится полностью чистить ноды и ставить всё с нуля

  • @damirdamir8388
    @damirdamir8388 2 ปีที่แล้ว

    Я не знаю, может это только у меня, но я могу запускать командой "npm start" без ошибок только непосредственно находясь в одной директории с "main.js" (Убунту). И вопрос, так и должно быть или я что-то упустил в настройках?

  • @illidancion7842
    @illidancion7842 6 ปีที่แล้ว

    Подскажите, пожалуйста, что почитать для добавления уведомлений которые бы выскакивали даже на других вкладках, как, например у google календаря при приближении события

  • @KokaoPoroshok
    @KokaoPoroshok 3 ปีที่แล้ว

    Если вы настроены решительно, то вот здесь есть обширная инструкция github.com/jonashackt/spring-boot-vuejs . Это все равно не супер просто, но лучше ничего не находилось

  • @kardibus
    @kardibus 5 ปีที่แล้ว +2

    Может у кого тоже не будет нормально работать приложение.В main.js строку new Vuew({ исправил на new Vue({

  • @akrtkv
    @akrtkv 5 ปีที่แล้ว

    Idea не открывает файл .vue на Windows. Можно каким-нибудь блокнотом открыть, но как сделать, чтобы в идее открывать?

  • @user-jm3lb2fd6s
    @user-jm3lb2fd6s 6 ปีที่แล้ว

    Спасибо за видео!
    А как подключить изображения в dev и prod версиях?

  • @user-lh3lw8qb3v
    @user-lh3lw8qb3v 6 ปีที่แล้ว

    А будет ли Вами рассмотрен postman, чтобы отказаться от фронта на этапе разработки и тестирования ?

  • @user-ni2kv6lj8r
    @user-ni2kv6lj8r 4 ปีที่แล้ว

    Никак не могу понять, почему моя страница сразу не обновляется при сохранении и обновлении, только если вручную обновить все появляется,
    пока накостылял location.reload() но мне кажется это не дело

  • @ssaidahmed
    @ssaidahmed 4 ปีที่แล้ว

    у меня доступ к скрипту в index.html идет если только укажу localhost:8000 / bundle.js. Серверная часть работает на порту 8080, а клиентская на 8000. Как дать доступ к скрипту без указания порта клиентской части и разрешение прописано allowedHosts:[
    'localhost:8080']

  • @ilnurryazhapov
    @ilnurryazhapov 4 ปีที่แล้ว +3

    Я фронтендер поэтому все понял))

  • @vladsoldatenko8561
    @vladsoldatenko8561 5 ปีที่แล้ว

    Андрей, здравствуйте! Сейчас пересматриваю данный плейлист, и у меня возник достаточно тупой вопрос : можно ли использовать Vue.js для многостраничных приложений?

  • @vladimirstadnik2171
    @vladimirstadnik2171 6 ปีที่แล้ว +1

    Попробуй в следующий раз подключить maven-frontend-plugin spring.io/guides/tutorials/react-and-spring-data-rest/

  • @user-fc9ks6fo4n
    @user-fc9ks6fo4n 5 ปีที่แล้ว

    уфф разобрался наконец. почти две недели убил на настройку и вникание в логику. получается с помощью webpack мы как бы создаем структуру внутри js и потом можем как кирпичики использовать кусочки для построения фронта. и еще вопрос - получается обязательно перед запуском локально проекта сначала предварительно запускать nvm start. без этого никакой js не подгружает?

    • @krab9512
      @krab9512 3 ปีที่แล้ว

      Ну тип таким образом мы ноду саму подрубаем, а без ноды фронт никак работать не захочет)

    • @user-yu2gg1bg2k
      @user-yu2gg1bg2k ปีที่แล้ว

      @@krab9512то есть в таком случае, смысл спринг приложения только в рест апи состоит? Если вью или реакт запускаются только через нод

  • @DarthJaxxFather
    @DarthJaxxFather 5 ปีที่แล้ว +1

    Блин, мучаюсь уже второй день. В консоли браузера: Uncaught SyntaxError: Unexpected identifier. И ссылается на 1-ю строчку main.js (import Vue). Как я понял, либо дело в пакетах, либо webpack.config.js. Сталкивался кто?

    • @DarthJaxxFather
      @DarthJaxxFather 5 ปีที่แล้ว +1

      Забыл отписаться, иногда пара случайно напечатанных символов выходят самой сложной ошибкой которую практически нереально пофиксить =D

    • @DeathGodN6
      @DeathGodN6 5 ปีที่แล้ว

      @@DarthJaxxFather Можешь подсказать как решил эту проблему? А то я вот бьюсь над точно такой же

    • @antihype3450
      @antihype3450 5 ปีที่แล้ว

      Folk-Lore как ты решил проблему с которым мучался 2 дня ? У меня такая же проблема , пожалуйста если знаешь скажи

    • @user-bu5ge8jp8n
      @user-bu5ge8jp8n 5 ปีที่แล้ว

      @@antihype3450 решили проблему?

    • @user-bu5ge8jp8n
      @user-bu5ge8jp8n 5 ปีที่แล้ว

      @@DeathGodN6 решили проблему?

  • @almassharipkhan5911
    @almassharipkhan5911 3 ปีที่แล้ว

    у меня вышла ошибка Cannot find module 'webpack-cli/bin/config-yargs'. Что делать?

    • @danilafeduleev6087
      @danilafeduleev6087 3 ปีที่แล้ว

      Откати все зависимости как у автора, перепиши версии. Удали yarn.lock, и дальше так как я не очень знаком с yarn перезаписал зависимости через npm i, создался package-lock.json, ошибки пропали) Спасибо автору)) Контент супер)

  • @GrishaObrazcovV
    @GrishaObrazcovV 6 ปีที่แล้ว

    Будет тестироваться под нагрузкой проект? Сколько человек может одновременно пользоваться?

    • @letsCodeDru
      @letsCodeDru  6 ปีที่แล้ว +4

      тестирование под нагрузкой буду рассматривать, но не факт, что на примере этого приложения. Сколько пользователей - зависит от железа и того, какой функционал будет реализован. Но в целом - не стоит заморачиваться с нагрузкой до тех пор, пока приложение не начнёт подавать признаки хоть какой-то нагрузки, т.к. никогда не угадаешь, где в конкретном приложении вылезет bottleneck. Стоит помнить, что преждевременная оптимизация - это антипаттерн

    • @user-kd9pp7ly9c
      @user-kd9pp7ly9c 5 ปีที่แล้ว +1

      @@letsCodeDru Как я понимаю, человеку (и многим людям тоже) интересно в первую очередь не как оптимизировать проект, а как тестировать под нагрузкой(как происходит этот процесс, какие инструменты используются, какой код пишется и т.д.).

  • @user-lh5vz4sd7u
    @user-lh5vz4sd7u 4 ปีที่แล้ว

    Всем привет. не работает npm start ((( куда копать?
    Вот лог:
    0 info it worked if it ends with ok
    1 verbose cli [
    1 verbose cli 'C:\\Program Files\
    odejs\
    ode.exe',
    1 verbose cli 'C:\\Program Files\
    odejs\
    ode_modules\
    pm\\bin\
    pm-cli.js',
    1 verbose cli 'start'
    1 verbose cli ]
    2 info using npm@6.14.6
    3 info using node@v12.18.3
    4 verbose stack Error: missing script: start
    4 verbose stack at run (C:\Users\Kot\AppData\Roaming
    vm\v12.18.3
    ode_modules
    pm\lib
    un-script.js:155:19)
    4 verbose stack at C:\Users\Kot\AppData\Roaming
    vm\v12.18.3
    ode_modules
    pm\lib
    un-script.js:63:5
    4 verbose stack at C:\Users\Kot\AppData\Roaming
    vm\v12.18.3
    ode_modules
    pm
    ode_modules
    ead-package-json
    ead-json.js:116:5
    4 verbose stack at C:\Users\Kot\AppData\Roaming
    vm\v12.18.3
    ode_modules
    pm
    ode_modules
    ead-package-json
    ead-json.js:436:5
    4 verbose stack at checkBinReferences_ (C:\Users\Kot\AppData\Roaming
    vm\v12.18.3
    ode_modules
    pm
    ode_modules
    ead-package-json
    ead-json.js:391:45)
    4 verbose stack at final (C:\Users\Kot\AppData\Roaming
    vm\v12.18.3
    ode_modules
    pm
    ode_modules
    ead-package-json
    ead-json.js:434:3)
    4 verbose stack at then (C:\Users\Kot\AppData\Roaming
    vm\v12.18.3
    ode_modules
    pm
    ode_modules
    ead-package-json
    ead-json.js:161:5)
    4 verbose stack at ReadFileContext. (C:\Users\Kot\AppData\Roaming
    vm\v12.18.3
    ode_modules
    pm
    ode_modules
    ead-package-json
    ead-json.js:350:20)
    4 verbose stack at ReadFileContext.callback (C:\Users\Kot\AppData\Roaming
    vm\v12.18.3
    ode_modules
    pm
    ode_modules\graceful-fs\graceful-fs.js:123:16)
    4 verbose stack at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:261:13)
    5 verbose cwd D:\Dev\sarafan
    6 verbose Windows_NT 10.0.19041
    7 verbose argv "C:\\Program Files\
    odejs\
    ode.exe" "C:\\Program Files\
    odejs\
    ode_modules\
    pm\\bin\
    pm-cli.js" "start"
    8 verbose node v12.18.3
    9 verbose npm v6.14.6
    10 error missing script: start
    11 verbose exit [ 1, true ]

    • @user-lh5vz4sd7u
      @user-lh5vz4sd7u 4 ปีที่แล้ว +1

      заменил в package.json зависимости на версии автора и заработало...

  • @user-mf7ur4zt9k
    @user-mf7ur4zt9k 5 ปีที่แล้ว

    Я не до конца понимаю, а Свитер это REST приложение? Там ведь тоже есть все виды запросов

    • @letsCodeDru
      @letsCodeDru  5 ปีที่แล้ว +1

      Не, свитер - это приложение вообще без JavaScript. Rest это сарафан. Вот такие дурацкие названия)

    • @user-kd9pp7ly9c
      @user-kd9pp7ly9c 5 ปีที่แล้ว +2

      @@letsCodeDru Разве сарафан это REST? Мне казалось, что в REST не должно быть примесей от MVC, т.к. MVC полностью завязан на бакэнд (который в нашем случае Java). Т.е. в любой момент можно взять и заменить бакэнд на, например, бакэнд, написанный на C#, а фронт этого даже не заметит. Или наоборот, вместо браузера подключить интерфейс, написанный на том же C#

    • @caffeinejavacode1475
      @caffeinejavacode1475 4 ปีที่แล้ว

      @@user-kd9pp7ly9c Привет! как это сделать? используя Spring Boot + Vue.js

  • @Teacification
    @Teacification 5 ปีที่แล้ว

    Для чего мне изучать java, если можно заюзать node.js ?

    • @letsCodeDru
      @letsCodeDru  5 ปีที่แล้ว

      Чтобы получить большую производительность там, где действительно нужна многопоточка

  • @karfogengroup807
    @karfogengroup807 2 ปีที่แล้ว

    если вы все уже установили надо обновить все зависимости и поставить версии как у автора. Версии можно посмотреть в package.json НП: yarn upgrade vue-loader@15.4.1

  • @sc-nt4gr
    @sc-nt4gr 4 ปีที่แล้ว

    Ну как и в конце видео)) Фууууууххххххх))) Все работает пока что)

  • @webmasterair
    @webmasterair 5 ปีที่แล้ว

    Андрей, еще раз здравствуйте!
    Все сделал по уроку, но вылетает подобная фишка. Не подскажете, може ли это быть связано с версиями используемого ПО в зависимостях? Спасибо
    Access to script at 'accounts.google.com/o/oauth2/v2/auth?client_id=975346796694-25nlfsl8a41jhib6hv7id1s2gdqqd8e5.apps.googleusercontent.com&redirect_uri=localhost:8080/login&response_type=code&scope=openid%20email%20profile&state=t5Rf1D' (redirected from 'localhost:8080/js/main.js') from origin 'localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    accounts.google.com/o/oauth2/v2/auth?client_id=975346796694-25nlfsl8a41jhib6hv7id1s2gdqqd8e5.apps.googleusercontent.com&redirect_uri=localhost:8080/login&response_type=code&scope=openid%20email%20profile&state=t5Rf1D:1 Failed to load resource: net::ERR_FAILED

    • @alexsays1746
      @alexsays1746 5 ปีที่แล้ว

      у меня была похожая проблема, я не ввел npm start в терминале и долго искал почему Failed to load resource

    • @webmasterair
      @webmasterair 5 ปีที่แล้ว +1

      @@alexsays1746 спасибо большое, разобрался уже) отдельно crossorigin прописал и заработало

    • @Sergei-kq8hk
      @Sergei-kq8hk 2 ปีที่แล้ว

      @@webmasterair можно подробнее?

  • @mizantropoff
    @mizantropoff 4 หลายเดือนก่อน

    Нууууууууу, ребята, это твердый дизлайк. На лету мимоходом говорится про целый пласт сложнейших вещей, которые совершенно не относятся к Java и Spring Boot. Вы меня простите, но если уже делать курс на такой базе, нужно как то включать подачу тех знаний и логики, которые относятся ко всем упомянутым технологиям. Это не просто html, css, js, эти техники по значительности требуют не менее пристального изучения, чем Spring, а по объему - даже БОЛЬШЕГО. Смысла не понимаю так давать материал. С другой стороны, если кто уже владеет этими технологиями в совершенстве - неужели его устроит подача Спринга на таком уровне?! А кто не владеет - пойдет их изучать и вернется сюда через год, забыв уже все на свете. Конечно, можно откатиться на ранние версии и тупо повторить все за автором, но это не обучение, а ..... И все для того чтобы красоту навести? Зачем? Лучше закончить со спрингом, путь итог будет деревянным, но понятным и разобранным до основания. Путь мы бы видели на странице json ы сплошные. И отдельно разбирать уже украшения. Или отдельно пилить подробные видео про все упомянутые технологии и рекомендовать изучать их ДО данного курса сразу же, в описании. А тут все по верхам, я считаю. Никакого глубокого понимания. Все обо всем и ни о чем. Жаль. Придется уходить наверное, не нравится мне, как попугаю просто тупо копировать и вставлять.

  • @D.P._
    @D.P._ 5 ปีที่แล้ว +1

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

  • @D.P._
    @D.P._ 5 ปีที่แล้ว +1

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

  • @D.P._
    @D.P._ 5 ปีที่แล้ว +1

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

  • @D.P._
    @D.P._ 5 ปีที่แล้ว +1

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