vue.js java整合_Spring Boot 与 Vue.js 整合流程

一直都想尝试做前后端分离，我之前一直是学 Java 的，所以后端选择了 Spring Boot；前端选择了 Vue.js 这个轻量、易上手的框架。网上其实已经有了不少 Spring Boot 和 Vue.js 整合的资料，Github 上就有好多 repo，但是每当我指望按图索骥的时候就会出现各种各样奇怪的 bug，上 Stack Overflow 问了也没人搭理。前前后后研究了差不多三个星期，现在总算是理清楚了。

本文重点介绍我在实践过程中的基本流程，以及我遇到的一个困扰了我好久的问题，就是如何 CORS。

框架版本

Spring Boot: 2.0.4.RELEASE(JDK 是1.8)

Vue.js: 2.x

基本流程

前端：编写 Vue 组件

首先用 vue-cli 搭好脚手架，我这个 Demo 用到的第三方库有：

axios：负责 HTTP 请求

bootstrap-vue：Bootstrap 和 Vue.js 的整合，方便设计页面

vue-router：管理路由

qs：实现 CORS

然后写一个登录组件：

label="Username:"

label-for="exampleInput1">

type="text"

v-model="form.username"

required

placeholder="Enter username">

label="Password:"

label-for="exampleInput2">

type="text"

v-model="form.password"

required

placeholder="Enter password">

Check me out

Check that out

Submit

Reset

//...

我现在想实现的就是用户登录成功之后导航到另一个组件，所以我就又写了一个欢迎组件：

Welc