Vue.js несъвместим ли е с обслужването на POST заявки?

Опитвам се да направя [нещо] с Vue.js проект, създаден с Vue CLI. [Нещо] не е изключително важно за този въпрос, така че ще го пропусна за краткост. Забелязах, когато стартирам локалния уеб сървър за този проект с

$ npm run serve

че GET заявките работят добре; но заявките за POST ми дават 404 - „Не мога да публикувам“. Трябва да мога да правя и двете.

Използвайки Express, е лесно да обслужвате една и съща страница както с GET, така и с POST, като просто добавите router.post(...) в допълнение към router.get(...) по подразбиране. Във Vue.js обаче това изглежда трудно.

Прекарах известно време в игра с Vue Router, но разглеждайки документацията, не намерих конфигурация опция, за да му кажете "Ето как да отговорите на POST заявка" - изглежда, че изисква GET.

Но може би се опитвам да забия квадратно колче в кръгла дупка. Vue.js е насочен към приложения, които се изпълняват в браузъра, а браузърите изпращат GET заявки (За момента не се интересувам от изпращане на формуляри...), където POST заявките обикновено са по-скоро уеб приложение/интеграция/back end нещо като нещо.

Какво мислите - има ли нещо очевидно, което пропускам, или трябва да направя това по "лесния" начин и да премина към Express?

АКТУАЛИЗАЦИЯ: Моят „проблем“ не е Vue.js, по-конкретно – това е двоичната услуга vue-cli, която определено слуша GET, но не и POST. (GETs от Postman успяват; POSTs от Postman се провалят.) Ако изградя за внедряване, webpack превръща проекта в HTML/JS/CSS, който се обслужва от различен уеб сървър и POSTs работят добре - това е само в режим на разработка, където vue -cli-service обслужва моето приложение локално, че не мога да използвам POST заявки.

Има ли недокументиран начин услугата vue-cli да отговаря на POST заявки? Разрових документацията, но не открих нищо. Не съм сигурен как да накарам друг уеб сървър да обслужва Vue.js проект, защото конфигурацията на webpack е... сложна.


person Mike Waldron    schedule 21.06.2019    source източник
comment
Vue е предна рамка, а не бекенд като express. Рутерът вероятно обслужва само GET заявки, защото всичко останало изглежда по-скоро като API   -  person Flame    schedule 22.06.2019


Отговори (2)


Vue Router не получава (GET) заявка и не отговаря, той просто чете текущия URL адрес и вмъква съответния компонент. Така че накратко, не, няма манипулатор на POST заявки... Бих казал, че дори не обработва GET заявки, просто чете URL адреса, който изглежда като GET заявка.

Ако се опитвате да ПУБЛИКУВАТЕ между страници в приложението си, Vuex е това, което искате. Ако се опитвате да публикувате в приложението си отвън, ще бъде по-лесно да имате действителен сървър, който слуша заявки, които можете да пингвате (т.е. експресно).

Възможно е да има начин да използвате Axios, за да направите това от вашето приложение. Може да слуша отговори от POST заявки, така че ако слушаше, не виждам защо не можеше да получи. Подозирам обаче, че ще трябва да слушате порт от машината, на която работи вашето приложение, което би било сериозен проблем със сигурността (ако браузърът/ОС/Антивирусът на клиента дори ви позволи).

person chisnall.io    schedule 24.06.2019
comment
Получава GET заявка. Мога да проверя това с Postman: GETs успяват; POSTs се провалят. - person Mike Waldron; 03.07.2019
comment
Това е просто семантика. Моделът на заявка/отговор е това, което се случва между клиенти и сървъри. Обикновено GET заявка изисква определен ресурс от сървър, който сървърът след това предоставя. Начинът, по който работи Vue, не е съвсем същият, тъй като цялото приложение се предоставя и след това се изобразява от страна на клиента, като Vuex управлява малък прозорец в него. Ако обаче използвате Nuxt, можете да направите това от страна на сървъра и да получите типичен GET модел. - person chisnall.io; 04.07.2019

Изминаха почти две седмици, откакто публикувах този въпрос, но дори не публикувах въпроса, докато не се борех сам с проблема в продължение на една седмица. Най-накрая стигнах до решение след много главоблъсканици и повече задънени улици, отколкото би било здравословно за моето кръвно налягане да си го представя. Ето го:

  1. Реших, че може би най-добрият ми залог е да погледна изходния код на vue-cli, случайно забелязах включва документация
  2. Файлът README.md под docs/config изглежда малко оскъден в това, което казва за опцията devserver, но също така споменава, че Всички опции за webpack-dev-server се поддържат. ох
  3. Документацията на Webpack показва опция devserver.before, която ви позволява да осъществете достъп до обекта на приложението Express и добавете свой собствен персонализиран междинен софтуер към него
  4. Това ви позволява да прихванете POST и да го пренасочите като GET
  5. Което този човек, който имаше абсолютно същия проблем като мен, в крайна сметка направи. (Имайте предвид, че той използва devserver.setup, който прави същото, но е отхвърлен в полза на devserver.before.) Във vue.config.js включете
devServer: {
    before: function(app) {
        app.post('/about.html', function(req, res) {
          res.redirect('/about.html');
        });
    },
}
person Mike Waldron    schedule 03.07.2019
comment
Великолепна идея. Моля, поправете ме, ако греша, но това ще работи само в среда за разработка, където имате webpack, действащ като ваш сървър? Значи не би работил в производството? - person chisnall.io; 04.07.2019
comment
Вярвам, че това е правилно. За моите цели минимизираната производствена компилация работи добре, с изключение на това, че отнема 5-7 минути между качването на новата версия и влизането й в сила. Не е ужасно за истинско внедряване, но е непоносимо при разработване. - person Mike Waldron; 06.07.2019
comment
Майк, благодаря ти, че си толкова вокален в StackOverflow. Разработването на проблема ви „на глас“ наистина ми помогна с подобна дилема. - person coltoneakins; 28.01.2020
comment
@coltoneakins Няма за какво! Много се радвам, че успях да помогна на някого. ???? - person Mike Waldron; 29.01.2020