SpringBoot+Vue.js 双端分离开发

一、环境

JDK 8
Tomcat 8.5
Maven
SpringBoot 2.0
Node 8.10.0
Vue 3.10.0

二、环境配置

Java环境配置
Tomcat环境配置
Node环境配置
Vue-cli

三、Springboot

四、Vue

五、遇到的问题

映射HTML需要添加thymeleaf依赖，否则无法显示HTML

<!-- springboot推荐的模板引擎，要想映射HTML/JSP，必须引入thymeleaf -->
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-thymeleaf</artifactId>
	</dependency>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-web</artifactId>
	</dependency>

文件目录位置导致访问不到扫描不到bean

需要将其他java文件放在和主程序同一目录下，否则找不到文件路径

axios访问服务端（post方法） 服务端解析出现问题

axios将打包返回一个Json数据，所以使用@RequestParam无法接收数据，建议使用@RequestBody，再使用一个Map接收json数据

springboot跨域请求

在controller前加入@CrossOrigin标签就可以进行跨域请求

@RestController
public class LoginController {
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    @CrossOrigin
    public String login(@RequestBody Map<String,Object> map){
        if(map.get("name").equals("lwf")&&map.get("password").equals("lwf123456")){
            return "yes";
        }else{
            return "no";
        }
    }
}