Hay dos soluciones principales para combinar SpringBoot y Vue en la red:
1. [No recomendado] Use etiquetas de script directamente para introducir Vue y algunos componentes comúnmente utilizados en HTML. Este método es el mismo que en el desarrollo tradicional anterior, pero puede usar el enlace de datos bidireccional de Vue muy felizmente. Este método solo es adecuado para el desarrollo ordinario de pila completa.
2. [Recomendado] Use el andamio oficial de VUE para crear un proyecto de ingeniería frontal separado, a fin de lograr un desarrollo e implementación independientes completos del back-end, y implementar un servicio de descanso puro por separado del back-end, mientras que el front-end usa directamente NGINX para la implementación. Esto se llama modelo completo de desarrollo de arquitectura de separación front-end y back-end, pero hay muchos problemas con los permisos de API que deben resolverse en la separación, incluida la implementación del enrutamiento del enrutador VUE que requiere que las reglas de reescritura se configuren en NGINX. Este tipo de arquitectura que está completamente separada de los extremos delanteros y traseros también es adoptada actualmente por las compañías de Internet. Los servidores de backend ya no necesitan lidiar con los recursos estáticos, y también pueden reducir cierta presión sobre el servidor de backend.
1. ¿Por qué la separación y fusionamiento de los front-end y back-end?
En las industrias tradicionales, muchos están dominados por ideas de proyectos, en lugar de productos. Un proyecto se venderá a muchos clientes y se implementará en la sala de computación local del cliente. En algunas industrias tradicionales, la tecnología de implementación e implementación del personal no se puede comparar con los equipos de operación y mantenimiento de las compañías de Internet, y debido a varios entornos inciertos, no se puede construir automáticamente, la implementación contenedorizada, etc., por lo tanto, en este caso, intente minimizar los requisitos del software de servicio durante la implementación e intentar producir tan pocos paquetes posible. En respuesta a esta situación, el desarrollo independiente front-end se implementa en el desarrollo. Todo el método de desarrollo es el mismo que el segundo método mencionado anteriormente. Sin embargo, cuando el back-end springboot se empaqueta y se libera, la salida de construcción frontal se ingresa juntas. Al final, simplemente implementa el proyecto SpringBoot, no es necesario instalar el servidor NGINX.
2. Operaciones clave de integración de springboot y vue
De hecho, en este artículo, la separación frontal del desarrollo frontal, después de que se completa el desarrollo frontal, los archivos en la estática construida en la compilación se copian a la estática del recurso de SpringBoot, y el index.html se copia directamente en la estática del recurso de SpringBoot. Aquí hay un diagrama de ejemplo:
Proyecto front-end Vue
Proyecto SpringBoot:
Lo anterior es la forma más fácil de fusionarse, pero si se trata de un desarrollo de proyectos a nivel de ingeniería, no se recomienda la fusión manual, y no se recomienda construir y enviar el código front-end se construirán y enviarán al recurso Springboot. La buena manera debe ser mantener el código de desarrollo completamente independiente del front-end y el back-end, y el código del proyecto no se afecta entre sí. Con la ayuda de herramientas de construcción como Jenkins, la construcción delantera se activa y el script de automatización se escribe al construir SpringBoot, copie los recursos construidos por la Webpack front-end a SpringBoot y luego empaquételo en JAR. Finalmente, obtengo un proyecto SpringBoot que contiene completamente el front-end y el back-end.
3. Cuestiones centrales de integración
Después de la integración anterior, surgirán dos problemas relativamente grandes:
1. Los recursos estáticos no se pueden acceder normalmente.
2. La ruta de la ruta del enrutador VUE no se puede resolver normalmente.
Para resolver el primer problema, debemos volver a especificar el prefijo de procesamiento de recursos estáticos de SpringBoot, código:
@ConfigurationPublic Class SpringWebMVCConfig extiende WebMVCConfigurerAdapter {@Override public Void AddResourceHandlers (Registro de ResourceHandlerRegistry) {Registry.AddResourceHandler ("/static/**"). AddResourCelocations ("classpath:/static/"); super.AddResourceHandlers (Registro); }}La forma de resolver el segundo problema es reescribir la ruta de la ruta VUE y dejarla en el enrutador para su procesamiento, en lugar de trampolín para manejarlo. Al reescribir, puede considerar agregar las rutas de ruta de manera uniforme, y luego escribir filtrado e interceptar sufijos específicos en trampolín para hacer el procesamiento de ruta del reenvío de solicitudes y entregarlo para Vue. como:
const router = new Vuerouter ({Mode: 'History', Base: __Dirname, Routes: [{ruta: '/ui/first.vhtml', componente: primero}, {ruta: '/ui/second.vhtml', componente: segundo componente}]})La intercepción de backend a las con VHTML se deja al enrutador para su procesamiento. Este método es completamente factible para empaquetar después de escribir filtros para interceptar el backend, pero habrá problemas con el acceso directo a la ruta con los sufijos desarrollados por la parte delantera.
Otra forma es agregar un prefijo como /UI a la ruta de enrutamiento frontal. En este momento, el filtro de escritura de back-end coincide con el prefijo, que no afectará el problema de análisis de enrutamiento del desarrollo frontal por separado. La referencia del filtro es la siguiente:
/** * se utilizará para reescribir el enrutador Vue * * @author Yu el 2017-11-22 19:47:23. */public class ReWriteFilter implementa Filtro {/***Dirección de destino que debe reescribir*/public static final String rewrite_to = "RewriteUrl"; / *** Los comodines de URL y URL interceptados están separados por Semicolons English*/ public static final String Rewrite_Patterns = "UrlPatterns"; set private <String> urlpatterns = null; // Configurar URL Wildcard private String rewriteTo = null; @Override public void init (FilterConfig CFG) lanza ServletException {// Inicializar la configuración de interceptación RewriteTo = cfg.getInitParameter (rewrite_to); String ExceptUrlString = cfg.getInitParameter (rewrite_patterns); if (StringUtil.ISnotEmpty (exceptoRlString)) {urlPatterns = colección.unmodifiAbleset (new Hashset <> (arrays.aslist (exceptUrlString.split (";", 0)))); } else {urlpatterns = colección.emptyset (); }} @Override public void dofilter (ServLetRequest Req, ServLetResponse Res, FilterChain Chain) lanza IOException, ServletException {HttpServletRequest request = (httpservletRequest) req; Cadena servletpath = request.getServletPath (); String context = request.getContextPath (); // reescribe la ruta coincidente if (ismatches (urlpatterns, servletpath)) {req.getRequestDispatcher (context+"/"+rewriteTo) .forward (req, resp); } else {chain.dofilter (req, resp); }} @Override public void destruye () {} / ** * Match Devuelve verdadero, MISMATCH devuelve falso * @param expresión regular o comodín * @param url solicitado url * @return * / private boolean ismatches (set <tring> patrones, url de cadena) {si (null == patrones) {return false; } for (string str: patrones) {if (str.endswith ("/*")) {String name = str.substring (0, str.length () - 2); if (url.contains (name)) {return true; }} else {patrón patrón = patrón.compile (str); if (patrón.matcher (url) .matches ()) {return true; }} return false; }}Registro de filtro:
@SpringBootApplicationPublic Class SpringBootMainApplication {public static void main (string [] args) {springapplication.run (springbootmainapplication.class, args); } @Bean public InbeddedServletContainerCustomizer ContenceerCustomizer () {return (Container -> {ErrorPage Error401Page = new ErrorPage (httpStatus.UNAuthorized, "/Errors/401.html"); error de error404page = new ErrorPage (httpStatus.not ,not ,not ,not ,notnot, "/Errors/404.html"); } @Bean public FilterRegistrationBean testFilterRegistration () {FilterRegistrationBean Registration = new FilterRegistrationBean (); Registration.SetFilter (new RewriteFilter ()); // Registro de reescritura de filtro Registration.addurlPatterns ("/*"); Registration.AddinitParameter (RewriteFilter.Rewrite_to, "/index.html"); Registration.AddinitParameter (RewriteFilter.Rewrite_Patterns, "/ui/*"); Registration.SetName ("RewriteFilter"); Registration.SetOrder (1); Registro de devolución; }}En este momento, Springboot puede entregar los recursos de enrutamiento frontal a la ruta para su procesamiento. En este punto, se completa toda la solución de separación y fusión de front-end y back-end. Este método también se puede separar fácilmente de los extremos delanteros y traseros cuando las condiciones están disponibles en la etapa posterior.
Resumir
Lo anterior es el plan de separación y fusión de front-end de Spring Boot+Vue introducido por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!