Bei der Entwicklung von Webdiensten und Webanwendungen unter Verwendung des SPA-Frameworks auf der Front-End-Seite denke ich, dass es heutzutage durch die Kombination mit gängigen Back-End-Sprachen und Back-End-Frameworks wie Ruby on Rails und Laravel erzeugt wird. Dies liegt daran, dass Vue und React während der ersten Entwicklung im Voraus als Plug-Ins in der Backend-Umgebung implementiert werden, was die Einführung erleichtert.
In diesem Projekt haben wir Java verwendet und die Verzeichnisse getrennt. Wir würden uns freuen, wenn Sie es als Artikel für solche Projekte bezeichnen könnten.
Wie Sie im ungefähren Webdienst sehen können, hatte das Projekt, das wir dieses Mal entwickelt haben, auch eine Anmeldefunktion. Die Verantwortung für den Anmeldebildschirm und den Anmeldevorgang liegt auf der Java-Seite. View verwendet die Java Template Engine Thymeleaf.
Nach dem Anmelden werden das angegebene Token und Cookie auf der Browserseite beibehalten und an das Dashboard weitergeleitet. Die Bildschirme und Prozesse außerhalb des Dashboards liegen in der Verantwortung des SPA.
Wie oben erwähnt, begann dieses Projekt mit der Java-Seite und dem getrennten Verzeichnis. Mit anderen Worten, der Befehl zum Starten jeder Entwicklungsumgebung und des Hosts wurde im folgenden Status getrennt. Java
Aus diesem Grund war es nicht einfach, die Bindung von APIs lokal zu bestätigen, z. B. die Faser vom Anmeldebildschirm und die Umleitungsverarbeitung, wenn die Anmeldebewertung negativ war.
Es wurde gelöst, indem es im Proxy von vue.config.js beschrieben wurde.
module.exports = {
devServer: {
port: 8888,
disableHostCheck: true,
host: 'localhost',
proxy: {
'/api': {
target: 'http://localhost:8080'
},
'/top': {
target: 'http://localhost:8080'
},
'/login': {
target: 'http://localhost:8080'
}
}
},
}
Es gibt möglicherweise nicht viele Szenen wie diese, aber wenn es ähnliche Szenen gibt, beziehen Sie sich bitte auf diese. Wenn Sie andere gute Lösungen kennen, teilen Sie uns dies bitte in den Kommentaren mit.
Recommended Posts