Existem duas soluções principais para combinar Springboot e Vue na rede:
1. [Não recomendado] Use tags de script diretamente para introduzir o VUE e alguns componentes comumente usados no HTML. Esse método é o mesmo que no desenvolvimento tradicional anterior, mas você pode usar a ligação de dados bidirecional da Vue com muito prazer. Este método é adequado apenas para o desenvolvimento comum de pilha completa.
2. [Recomendado] Use o andaimes oficiais do VUE para criar um projeto de engenharia de front-end separado, para obter um desenvolvimento e implantação independentes completos do back-end e implantar um serviço Pure Restful separadamente do back-end, enquanto o front-end usa diretamente o NGINX para implantação. Isso é chamado de modelo completo de desenvolvimento de arquitetura de separação de front-end e back-end, mas há muitos problemas com as permissões de API que precisam ser resolvidas na separação, incluindo a implantação do roteamento do roteador VUE que requer que as regras de reescrita sejam configuradas no Nginx. Esse tipo de arquitetura que é completamente separada das extremidades da frente e de trás também é atualmente adotada por empresas de Internet. Os servidores de back -end não precisam mais lidar com recursos estáticos e também podem reduzir alguma pressão no servidor de back -end.
1. Por que a separação de front-end e back-end e mescla
Nas indústrias tradicionais, muitas são dominadas pelas idéias do projeto, e não por produtos. Um projeto será vendido a muitos clientes e implantado na sala de informática local do cliente. Em algumas indústrias tradicionais, a tecnologia de implantação e implementação do pessoal não pode ser comparada com as equipes de operação e manutenção das empresas de Internet e, devido a vários ambientes incertos, não pode ser construído automaticamente, implantação de contêiner, etc. Portanto, neste caso, tente minimizar os requisitos de software de serviço durante a implantação e tente produzir poucas pacotes. Em resposta a essa situação, o desenvolvimento independente do front-end é implementado no desenvolvimento. Todo o método de desenvolvimento é o mesmo que o segundo método mencionado acima. No entanto, quando o springboot de back-end é embalado e liberado, a produção de construção front-end é inserida juntos. No final, basta implantar o projeto Springboot, não é necessário instalar o servidor nginx.
2. Operações -chave da integração de troca e vue
De fato, neste artigo, a separação front-end do desenvolvimento do front-end, após a conclusão do desenvolvimento do front-end, os arquivos na estática incorporada na construção são copiados para a estática do recurso de Springboot, e o index.html é diretamente copiado para a estática do recurso de Springboot. Aqui está um exemplo de diagrama:
Projeto Vue Front-end
Projeto Springboot:
O exposto acima é a maneira mais fácil de se fundir, mas se for um desenvolvimento de projetos em nível de engenharia, a mesclagem manual não é recomendada e o código front-end não é recomendado para ser construído e enviado ao recurso de troca. A boa maneira deve ser manter o código de desenvolvimento do front-end e o back-end completamente independente, e o código do projeto não se afeta. Com a ajuda de ferramentas de construção como o Jenkins, a construção do front-end é acionada e o script de automação é escrito ao criar o trampolim, copie os recursos construídos pelo Webpack do front-end para o trampolim e o empacote no jar. Finalmente, recebo um projeto de trampolim que contém completamente o front-end e o back-end.
3. Questões centrais de integração
Após a integração acima, surgirão dois problemas relativamente grandes:
1. Os recursos estáticos não podem ser acessados normalmente.
2. O caminho da rota do roteador Vue não pode ser resolvido normalmente.
Para resolver o primeiro problema, devemos redirecionar o prefixo de processamento de recursos estáticos do Springboot, código:
@ConfigurationPublic Classe springwebmvcconfig estende webmvcConfigureRAdApter {@Override public void AddResourceHandlers (RecurryRregistry Registry) {Registry.addresourceHandler ("STATIC/**"). AddResourCeLocations (ClassPath:/Class:/Class:/STATTA ("/static/**"). AddResourcelocations (class: super.addresourcehandlers (Registro); }}A maneira de resolver o segundo problema é reescrever o caminho da rota Vue e deixá -lo para o roteador para processamento, em vez de o Springboot para lidar com isso em si. Ao reescrever, você pode considerar adicionar os caminhos de rota uniformemente e, em seguida, gravar filtragem e interceptar sufixos específicos no Springboot para fazer o processamento de rotas do encaminhamento de solicitação e entregando -o para o Vue. como:
Const Router = New Vuerouter ({Mode: 'History', Base: __dirname, Rotas: [{Path: '/ui/first.vhtml', componente: primeiro}, {path: '/ui/second.vhtml', componente: segundo componente}]})A interceptação de back -end para aqueles com VHTML é deixada para o roteador para processamento. Esse método é completamente viável para empacotar depois de escrever filtros para interceptar o back -end, mas haverá problemas com o acesso direto ao caminho com os sufixos desenvolvidos pelo front -end.
Outra maneira é adicionar um prefixo como /UI ao caminho de roteamento front-end. No momento, o filtro de gravação de back-end corresponde ao prefixo, que não afetará o problema de análise de roteamento do desenvolvimento front-end separadamente. A referência do filtro é a seguinte:
/** * Seja usado para reescrever o roteador Vue * * @Author Yu em 2017-11-22 19:47:23. */public class RewriteFilter implementa o filtro {/***Endereço de destino que precisa ser reescrever*/public static final string rewrite_to = "rewriteurl"; / *** URL interceptado e curinga URL são separados por semicolons em inglês*/ public static final string rewrite_patterns = "urlpatterns"; Conjunto privado <String> urlpatterns = null; // configure URL Wildcard Private String rewriteto = null; @Override public void init (filterConfig cfg) lança servletexception {// inicialize intercept configuration rewriteto = cfg.getinitParameter (rewrite_to); String excetoUrlString = cfg.getInitParameter (rewrite_patterns); if (stringUtil.isnotEmpty (excetoUrlString)) {urlpatterns = collection.unmodifiableSet (novo hashset <> (Arrays.asList (excetourlString.split (";", 0)))); } else {urlpatterns = collection.Emptyset (); }} @Override public void Dofilter (servletRequest req, servletResponse resp, cadeia de filtragem) lança ioexception, servletexception {httpServletRequest request = (httpServletRequest) req; String servletPath = request.getServletPath (); String context = request.getContextPath (); // Reescrita de caminho correspondente if (ismatches (urlpatterns, servletPath)) {req.getRequestDispatcher (context+"/"+rewriteto) .forward (req, resp); } else {Chain.dofilter (req, resp); }} @Override public void Destroy () {} / ** * Match Retorna True, a incompatibilidade retorna false * @param padroniza expressão regular ou curinga * @param url url solicitado * @return * / private boolean ismatches (set <fet> padrões, string url) {if (null == padrões) {padrão); } for (string str: padrões) {if (str.endswith ("/*")) {string name = str.substring (0, str.Length () - 2); if (url.contains (nome)) {return true; }} else {padrão padrony = padrão.compile (str); if (Pattern.Matcher (url) .matches ()) {return true; }} retornar false; }}Registro de filtro:
@SpringbooTApplicationPublic Classe SpringbootmainApplication {public static void main (string [] args) {springapplication.run (springbootmainApplication.class, args); } @Bean public incorporado ASVETLETCONTINERCUSTOMizer contenhaCustomizer () {return (contêiner -> {error de errorPrage401Page = new ErrorPage (httpstatus.UnAuthorized, "/errors/401.html); errorporound errorpage "/errors/404.html"); } @Bean public filterRegistrationBean testFilterRegistration () {filterRegistrationBean Registration = new FilterReGistrationBean (); registro.setFilter (new rewritefilter ()); // registrar registro de filtro de reescrita.addurlpatterns ("/*"); registro.addinitParameter (rewritefilter.rewrite_to, "/index.html"); registro.addinitParameter (rewritefilter.rewrite_patterns, "/ui/*"); registro.setName ("RewriteFilter"); registro.setorder (1); Registro de retorno; }}Neste momento, o Springboot pode entregar os recursos de roteamento front-end à rota para processamento. Neste ponto, toda a separação de front-end e back-end e solução de mesclagem é concluída. Esse método também pode ser facilmente separado das extremidades dianteiras e traseiras quando as condições estão disponíveis no estágio posterior.
Resumir
O exposto acima é o plano de separação e mesclagem de fusão do front-end e a bota de primavera+vue introduzida a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!