Есть два основных решения для объединения Springboot и Vue в сети:
1. [не рекомендуется] Используйте теги скрипта непосредственно для представления VUE и некоторых обычно используемых компонентов в HTML. Этот метод такой же, как и в предыдущем традиционном развитии, но вы можете использовать двустороннюю привязку данных Vue очень счастливо. Этот метод подходит только для обычной разработки полного стека.
2. [Рекомендуется] Используйте официальные леса VUE для создания отдельного проекта фронтального инженерного проекта, чтобы достичь полной независимой разработки и развертывания с бэк-конца и развернуть чистый сервис RESTFUL отдельно от движения, в то время как фронт-END напрямую использует NGINX для развертывания. Это называется полной модели разработки архитектуры разделения переднего и контрольного разделения, но есть много проблем с разрешениями API, которые необходимо решить при разделении, включая развертывание маршрутизации маршрутизатора VUE, которые требуют настроить правила перезаписывания в NGINX. Этот вид архитектуры, которая полностью отделена от передней и задней части, в настоящее время также принимается интернет -компаниями. Бэкэнд -серверы больше не нужно иметь дело со статическими ресурсами, а также могут снизить некоторое давление на сервер Бэкэнд.
1. Почему фронтальное и заднее разделение и слияние
В традиционных отраслях во многих доминируют идеи проекта, а не продукты. Проект будет продан многим клиентам и развернут в местной компьютерной комнате клиента. В некоторых традиционных отраслях технология развертывания и реализации персонала нельзя сравнивать с командами по эксплуатации и техническому обслуживанию интернет -компаний, и из -за различных неопределенных сред, которую она не может быть автоматически построена, контейнерные развертывания и т. Д. Поэтому, в данном случае, попытаться минимизировать требования к программному обеспечению обслуживания во время развертывания и попытаться произвести в качестве нескольких пакетов. В ответ на эту ситуацию, независимая разработка фронта, внедряется в разработке. Весь метод разработки такой же, как второй метод, упомянутый выше. Однако, когда задний Springboot упакован и выпущен, вывод конструкции передней части вводится вместе. В конце концов, просто разверните проект Springboot, не нужно устанавливать сервер Nginx.
2. Ключевые операции интеграции Springboot и Vue
Фактически, в этой статье, разделение фронтального фронтальной разработки, после завершения фронтальной разработки, файлы в статическом построении в сборке копируются на статику ресурса Springboot, а индекс. Html непосредственно копируется на статику ресурса Springboot. Вот пример диаграмма:
Vue Front-End Project
Springboot Project:
Вышеуказанное-самый простой способ слияния, но если это разработка проекта на инженерном уровне, ручное слияние не рекомендуется, а код интерфейса не рекомендуется построить и представить в ресурс Springboot. Хорошим способом должен быть поддержание полностью независимого кода разработки в интерфейсе, и код проекта не влияет друг на друга. С помощью таких инструментов строительства, как Jenkins, запускается фронтальная конструкция, а сценарий автоматизации записан при строительстве Springboot, скопируйте ресурсы, созданные интерфейским веб-пакетом в Springboot, а затем упаковывают его в JAR. Наконец, я получаю проект Springboot, который полностью содержит интерфейс и заднюю часть.
3. Основные проблемы интеграции
После вышеуказанной интеграции возникают две относительно большие проблемы:
1. Статические ресурсы не могут быть доступны обычно.
2. Путь маршрута Vue Router не может быть разрешен нормально.
Чтобы решить первую проблему, мы должны повторно определить префикс статической обработки ресурсов Springboot, код:
@ConfigurationPublic Class SpringWebmvcconfig Extends webmvcconfigurerAdapter {@override public void addresourcehandlers (реестр ресурсов) {реестр.addresourcehandler ("/static/**"). Addresourcelocations ("classpath:/static/"); Super.AddresourceHandlers (реестр); }}Способ решить вторую проблему состоит в том, чтобы переписать путь маршрута Vue и оставить его на маршрутизатор для обработки, а не Springboot, чтобы справиться с ним. При перезаписи вы можете рассмотреть возможность равномерно добавить пути маршрута, а затем написать фильтрацию и перехват конкретных суффиксов в Springboot, чтобы выполнить обработку маршрута переадресации запросов и передавать ее Vue. нравиться:
const router = new Vuerouter ({mode: 'История', Base: __dirname, Routes: [{path: '/ui/first.vhtml', компонент: первой}, {path: '/ui/second.vhtml', компонент: второй компонент}]}))Бэкэнд -перехват для тех, кто с VHTML оставлен на маршрутизаторе для обработки. Этот метод полностью возможен для упаковки после написания фильтров для перехвата бэкэнда, но будут проблемы с прямым доступом к пути с суффиксами, разработанными передней частью.
Другим способом является добавление префикса, такого как /ui, к пути маршрутизации передней части. В настоящее время фильтр записи на первом этапе соответствует префиксу, что не повлияет на проблему анализа маршрутизации передней части развития отдельно. Ссылка на фильтр выглядит следующим образом:
/** * Будьте использованы, чтобы переписать Vue Router * * @author Yu на 2017-11-22 19:47:23. */public class rewritefilter реализует фильтр {/***адрес назначения, который необходимо переписать*/public static final String rewrite_to = "rewriteurl"; / *** Перехватываемые URL и URL -подстановочные знаки разделены английскими полуколонами*/ public static final String rewrite_patterns = "urlpatterns"; Приватный набор <String> urlPatterns = null; // Настройка url wiledcard Private String reWriteto = null; @Override public void init (FilterConfig CFG) Throws ServletException {// инициализировать конфигурацию перехвата reWriteto = cfg.getinitParameter (rewrite_to); String, кроме URURLString = cfg.getInitParameter (rewrite_patterns); if (stringUtil.isnotempty (кроме UrlPatring)) {urlPatterns = collections.UnmodifiableSet (новый хэшсет <> (Arrays.aslist (кроме urlString.split (";", 0)))); } else {urlpatterns = collections.emptyset (); }} @Override public void dofilter (ServletRequest req, ServletResponse Resp, FileTerChain Chain) Throws IOException, ServletException {httpservletRequest request = (httpservletrequest) req; String servletPath = request.getServletPath (); String context = request.getContextPath (); // Соответствующий путь переписывается if (ismatches (urlpatterns, servletpath)) {req.getRequestDispatcher (context+"/"+rewriteto) .forward (req, resp); } else {chain.dofilter (req, resp); }} @Override public void destress () {} / ** * Матч возвращает true, несоответствие возвращает false * @param patterns Регулярное выражение или wiledcard * @param, запрошенное URL * @return * / private boolean ismatches (set <string> patterns, string url) {if (null == шаблоны) {return false; } for (string str: patterns) {if (str.endswith ("/*")) {string name = str.substring (0, str.length () - 2); if (url.contains (name)) {return true; }} else {pattern = pattern.compile (str); if (pattern.matcher (url) .matches ()) {return true; }} вернуть false; }}Регистрация фильтра:
@Springbootapplicationpublic class springbootmainapplication {public static void main (string [] args) {springapplication.run (springbootmainapplication.class, args); } @Bean Public EmbeddedServletContainerCustomizer cangeerCustomizer () {return (контейнер -> {errorpage error401page = new Errorpage (httpstatus.unauthorized, "/newerrors/401.html"); errorpage error404page = new Errorpage, httpstatus.not_find_find_find_find_find_find_find_find_find_find_find_found_find_find_find_find_find_find_find_find_find_find_find_find_find_find_find_find_fint "/errors/404.html"); } @Bean public filterRegistrationbean testFilterRegistration () {FilterRegistrationBean Registration = new FilterRegistrationBean (); registration.setFilter (new RewriteFilter ()); // Регистрация регистрации фильтра Регистрация.addurlPatterns ("/*"); registration.addinitparameter (rewritefilter.rewrite_to, "/index.html"); registration.addinitParameter (rewritefilter.rewrite_patterns, "/ui/*"); registration.setName ("rewritefilter"); Регистрация.setOrder (1); вернуть регистрацию; }}В настоящее время Springboot может передать ресурсы маршрутизации переднего интерфейса маршруту для обработки. На этом этапе все фронтальное и заднее разделение и решение слияния завершено. Этот метод также может быть легко отделен от передней и задней части, когда условия доступны на более поздней стадии.
Суммировать
Вышеуказанное представляет собой план разделения и слияния Spring Boot+Vue, введенный вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!