Il existe deux solutions principales pour combiner Springboot et Vue sur le réseau:
1. [Non recommandé] Utilisez des balises de script directement pour introduire Vue et certains composants couramment utilisés dans HTML. Cette méthode est la même que dans le développement traditionnel précédent, mais vous pouvez utiliser la liaison des données bidirectionnelle de Vue très heureusement. Cette méthode ne convient que pour le développement ordinaire complet.
2. [Recommandé] Utiliser l'échafaudage officiel de VUE pour créer un projet d'ingénierie frontal distinct, afin d'atteindre un développement et un déploiement indépendants complets à partir du back-end, et déployer un service RESTful pur séparément de l'arrière-end, tandis que le front-end utilise directement Nginx pour le déploiement. C'est ce qu'on appelle un modèle complet de développement d'architecture de séparation frontale et de back-end, mais il existe de nombreux problèmes avec les autorisations d'API qui doivent être résolues dans la séparation, y compris le déploiement du routage du routeur Vue qui nécessite la configuration des règles de réécriture dans Nginx. Ce type d'architecture qui est complètement séparé des frontaux et de l'arrière est également actuellement adopté par les sociétés Internet. Les serveurs backend n'ont plus besoin de gérer les ressources statiques et peuvent également réduire une certaine pression sur le serveur backend.
1. Pourquoi la séparation frontale et back-end et fusionnent
Dans les industries traditionnelles, beaucoup sont dominées par des idées de projet plutôt que par les produits. Un projet sera vendu à de nombreux clients et déployé dans la salle informatique locale du client. Dans certaines industries traditionnelles, la technologie de déploiement et de mise en œuvre du personnel ne peut pas être comparée aux équipes de fonctionnement et de maintenance des sociétés Internet, et en raison de divers environnements incertains, il ne peut pas être construit automatiquement, déploiement conteneurisé, etc. En réponse à cette situation, le développement indépendant frontal est mis en œuvre dans le développement. La méthode de développement complète est la même que la deuxième méthode mentionnée ci-dessus. Cependant, lorsque le Springboot back-end est emballé et libéré, la sortie de construction frontale est entrée ensemble. En fin de compte, il suffit de déployer le projet Springboot, pas besoin d'installer le serveur Nginx.
2. Opérations clés de l'intégration de Springboot et Vue
En fait, dans cet article, la séparation frontale du développement frontal, une fois le développement frontal terminé, les fichiers dans la construction statique sont copiés dans la ressource statique de Springboot, et l'index.html est directement copié dans la statique de la ressource de Springboot. Voici un exemple de diagramme:
projet frontal Vue
Projet de Springboot:
Ce qui précède est le moyen le plus simple de fusionner, mais s'il s'agit d'un développement de projet au niveau de l'ingénierie, la fusion manuelle n'est pas recommandée et le code frontal n'est pas recommandé d'être construit et soumis à la ressource Springboot. Le bon moyen devrait être de maintenir le code de développement frontal et de back-end complètement indépendant, et le code du projet ne se affecte pas mutuellement. À l'aide d'outils de construction comme Jenkins, la construction frontale est déclenchée et le script d'automatisation est écrit lors de la création de Springboot, copiez les ressources construites par le webpack frontal à Springboot, puis l'emballez en pot. Enfin, je reçois un projet Springboot qui contient complètement le front-end et le back-end.
3. Problèmes de base de l'intégration
Après l'intégration ci-dessus, deux problèmes relativement importants surviendront:
1. Les ressources statiques ne sont pas accessibles normalement.
2. Le chemin de l'itinéraire du routeur Vue ne peut pas être résolu normalement.
Pour résoudre le premier problème, nous devons ré-spécifier le préfixe de traitement des ressources statiques de Springboot, code:
@ConfigurationPublic Class SpringwebmvcConfig étend webmvcconfigurerAdapter {@Override public void addResourceHandlers (ResourceHandlerRegistry Registry) {registry.addreSourceHandler ("/ static / **"). super.AddreSourceHandlers (registre); }}La façon de résoudre le deuxième problème est de réécrire le chemin de la route Vue et de le laisser au routeur pour le traitement, plutôt que Springboot pour le gérer lui-même. Lors de la réécriture, vous pouvez envisager d'ajouter uniformément les chemins de route, puis d'écrire le filtrage et d'intercepter des suffixes spécifiques dans Springboot pour effectuer le traitement de la route de la remise des demandes et de la remettre à Vue. comme:
const Router = new VUerouter ({mode: 'History', base: __dirname, routes: [{path: '/ui/first.vhtml', composant: premier}, {path: '/ui/second.vhtml', composant: deuxième composant}]})L'interception backend à celles avec VHTML est laissée au routeur pour le traitement. Cette méthode est totalement possible d'emballer après avoir écrit des filtres pour intercepter le backend, mais il y aura des problèmes avec l'accès direct au chemin avec des suffixes développés par l'avant.
Une autre façon consiste à ajouter un préfixe tel que / ui au chemin de routage frontal. À l'heure actuelle, le filtre d'écriture back-end correspond au préfixe, ce qui n'affectera pas le problème d'analyse de routage du développement frontal séparément. La référence du filtre est la suivante:
/ ** * être utilisé pour réécrire le routeur Vue * * @author yu le 2017-11-22 19:47:23. * / classe publique RewriteFilter implémente Filter {/ ** * Adresse de destination qui doit être réécrite * / public static final string rewrite_to = "rewriteUrl"; / ** * URL interceptée et les caractères génériques d'URL sont séparés par des demi-colons anglais * / public static final string rewrite_patterns = "urlpatterns"; set privé <string> urlPatterns = null; // configurer URL Wildcard String private rewriteTo = null; @Override public void init (filterConfig cfg) lève ServletException {// Initialize Intercept Configuration rewriteTo = cfg.getInitParameter (rewrite_to); String saufurlString = cfg.getInitParameter (rewrite_patterns); if (stringUtil.isnotempty (saufUrlString)) {urlPatterns = collections.unModifiablesEt (new hashset <> (arrays.aslist (saufurlString.split (";", 0)))); } else {urlPatterns = collections.emptySet (); }} @Override public void dofilter (ServleRequest req, servletResponse resp, filterchain chaîne) lance ioException, servlexception {httpservletRequest request = (httpservletRequest) req; String servletPath = request.getServletPath (); String context = request.getContextPath (); // Path correspond à réécrire if (isMatches (urlPatterns, servletPath)) {req.getRequestDispatcher (context + "/" + rewriteTo) .Forward (req, resp); } else {chain.dofilter (req, resp); }} @Override public void destrement () {} / ** * Match Renvoie True, Mismatch Renvoie False * @param Matchs Expression régulière ou Wildcard * @param URL URL * @return * / Private Boolean Ismatches (Set <String> PatternS, String URL) {if (null == motifs) {return false; } pour (String str: motifs) {if (str.endswith ("/ *")) {String name = str.substring (0, str.length () - 2); if (url.Contains (name)) {return true; }} else {motifs motifs = modèle.compile (str); if (pattern.matcher (url) .matches ()) {return true; }} return false; }}Enregistrement du filtre:
@SpringBootApplicationPublic classe SpringbootMainApplication {public static void main (String [] args) {SpringApplication.run (SpringbootMainApplication.class, args); } @Bean public EmbedDedServletContainerCustanizer ContatCustanzer () {return (contener -> {errorpage error401page = new Errorpage (httpstatus.unauthorized, "/errors/401.httml"); errorpage error404page = new errorpage (httpstatus.not_found, "/ EERRRORS/404 } @Bean Public FilterRegistrationBean testFilterResting () {FilterRegistrationBean Enregistrement = new FilterRegistrationBean (); Enregistrement.SetFilter (new RewriteFilter ()); // Enregistrer le filtre de réécriture Enregistrement.AddUrlPatterns ("/ *"); Enregistrement.AddinitParameter (rewriteFilter.rewrite_to, "/ index.html"); Enregistrement.AddinitParameter (rewriteFilter.rewrite_patterns, "/ ui / *"); Enregistrement.SetName ("RewriteFilter"); Enregistrement. Enregistrement de retour; }}À l'heure actuelle, Springboot peut remettre les ressources de routage frontal vers l'itinéraire de traitement. À ce stade, toute la solution de séparation et de fusion frontale et back-end est terminée. Cette méthode peut également être facilement séparée des extrémités avant et arrière lorsque les conditions sont disponibles au stade ultérieur.
Résumer
Ce qui précède est le plan de séparation et de fusion frontale de Spring Boot + Vue qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!