学习自B站up主，楠哥教你学Java。

记录创建SpringBoot后端项目的流程、创建vue前端项目的流程、两者整合需要注意的事项等。

springBoot

创建springBoot项目（用到JPA+mysql）

处理POST请求

参考博客

客户端的POST请求，一般是将数据封装成json格式。所以需要使用注解@RequestBody对数据进行解析，才能正常封装成请求对象（下边例子中的Account对象）。

1
2
3
4
5

//登陆 验证
@RequestMapping(value = "/checkLogin", method = RequestMethod.POST)//post请求
public String checkLogin(@RequestBody Account account){//前端发送的数据为json类型，而不是拼接在URL后边。处理json数据用到注解@RequestBody
    return accountService.checkLogin(account);
}

Session&Cookie

在前后端分离项目中，在springboot中每次获取session都不一样的解决方法是在发起Ajax请求前设置axios.defaults.withCredentials = true;（VUE）。withCredentials属性，设置跨域请求时是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)。

过滤器与拦截器

过滤器与拦截器，可以参考这篇博客。

过滤器Filter：

使用注解@WebFilter，配置过滤路径（urlPatterns）。设置不过滤路径，可以参考这篇博客。

Token

vue单页面应用（跨域），可以使用Session和Cookie保存Token信息。若跨域导致Session和Cookie无法正常使用，可以考虑在后端将Token保存在ServletContext中、前端将Token保存在Sessionstorage。

前端：

将token保存在本地Sessionstorage中：

1

sessionStorage.setItem("token", respon.data.token);

使用axios拦截器，将token信息添加到请求头中：

1
2
3
4
5
6
7
8
9
10
11
12

// http request 拦截器
axios.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem('token')
    if (token ) { // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.authorization = token  //请求头加上token
    }
    return config
  },
  err => {
    return Promise.reject(err)
  })

后端：

将Token保存在ServletContext中。(可参考这篇博客)

编译&部署

参考博客：传送门。

进入项目根目录，使用mvn install编译项目，然后进入target目录使用java命令启动java -jar xxxxxxxxxx.jar。