SpringBoot + Vue 前后端分离架构搭建

技术相关：SpringBoot、Jpa、Vue、MySQ
工具相关：后端：idea，前端：vscode

下面直接刷操作喽。这里重点讲前后端的分离的实现，主要包括以下几个步骤：
（1）vue.js项目搭建
（2）后端springboot项目搭建
（3）前端相关页面及配置
（4）后端代码及配置

（1）vue.js项目搭建
这里用项目用vue-cli搭建就好，默认已安装好node.js及镜像脚手架等。步骤如下：

进入cmd窗口及vue项目需要放置的目录，比如想把项目放d盘根目录就进入D盘；
执行命令 vue init webpack wjmm-vue，这里 webpack 是以 webpack 为模板生成项目，还可以替换为 pwa、simple 等其他的参数， wjmm-vue是设定的项目名称，执行命令将在当前路径创建对应的项目和文件夹；

下面创建过程会有其他提示（确认项目名称之类的），简单点就一系列回车按默认设定就好，
中间会问是否安装 vue-router，要输入 Y（表示是）然后回车，要用vue-router 构建单页面应用。
还有问是否使用 es-lint，同上。剩下其他不必要可以输入N然后回车。

项目创建完成后可以去文件夹查看或者用其他开发工具打开，一般我用vscod写vue部分代码，在vscode终端（TERMINAL）创建vue项目，和命令行创建操作是一样的，进入需要创建项目的路径输入一样的创建命令就好。

输入npm run dev 运行项目，访问 http://localhost:8080，确认下项目正常就行。

（2）后端SpringBoot项目搭建

在idea创建，新建项目，选择 Spring Initializr，点击 Next，然后命名，注意后面选择选择web项目即可。

前后端初始化阶段完成，下面是开始。

（3）前端相关页面及配置

前端页面：首先进行简单登录页面设计，右键 src\components 文件夹，新建一个 File，命名为 Login.vue 。代码如下：

标签中写了登录界面， methods 中定义登录按钮的点击方法，即向后端 /login 接口发送数据，获得成功的响应后，页面跳转到 /index。因为之前设置了默认的 URL，所以请求实际上发到了 http://localhost:8443/api/login。

然后新建登录成功的界面，右键 src\components 文件夹，新建一个 directory，命名为 home，再在 home 下新建一个 Appindex.vue ，为首页组件，这里写个 Hello World做为跳转测试就好。

下面进入前端配置阶段

设置反向代理：修改 src\main.js ，代码如下：

import Vue from 'vue'
import App from './App'
import router from './router'
// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

配置页面路由：修改 src\router\index.js ，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
// 导入刚才编写的组件
import AppIndex from '@/components/home/AppIndex'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
  // 下面都是固定的写法
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/index',
      name: 'AppIndex',
      component: AppIndex
    }
  ]
})

跨域支持（使后端能够访问到前端的资源）：修改 config\index.js ，找到 proxyTable 位置，修改为以下内容：

   proxyTable: {
      '/api': {
        target: 'http://localhost:8443',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

初始登录界面如下：

（4）后端代码及配置

首先在 src\main\java\com.whale.wjmm文件夹下(启动类的同级目录)，新建一个 pojo （放实体类）文件夹或者包，然后新建 User类，代码如下：

在pojo同级目录新建 result 文件夹，创建 Result 类，Result 类是为了构造 response，主要是响应码。代码如下：

public class Result {
    //响应码
    private int code;

    public Result(int code) {
        this.code = code;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

}

在 wjmm下新建 controller 包，新建 LoginController 类，代码如下：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.util.HtmlUtils;

import com.evan.wj.pojo.User;

import java.util.Objects;

@Controller
public class LoginController {

    @CrossOrigin
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser) {
    // 对 html 标签进行转义，防止 XSS 攻击
        String username = requestUser.getUsername();
        username = HtmlUtils.htmlEscape(username);

        if (!Objects.equals("admin", username) || !Objects.equals("123456", requestUser.getPassword())) {
            String message = "账号密码错误";
            System.out.println("test");
            return new Result(400);
        } else {
            return new Result(200);
        }
    }
}

在这里Controller 是对响应进行处理的部分。不连接数据库的化默认设定账号是 admin，密码是 123456，分别与接收到的 User 类的 username 和 password 进行比较，根据结果返回不同的 Result，即不同的响应码。前端如果接收到成功的响应码（200），则跳转到 /index 页面。

最后，在 src\main\resources 文件夹下的 application.properties 文件配置端口，加上 server.port=8443（和vue端口保持一致）

这样就完成了前后端分离的基础功能和所有配置，同时运行两个项目，访问localhost:8080/#/login，zhhao
为上面默认的admin和123456
一切正常的话点击登录可以进入vue设定的登录成功页面。