p1只要了解前后端分离的概念，不要跟着他创建项目，创建项目见springboot-vue-后台管理系统-前端部分
- 0到20分钟，中间跳过，26分钟到p1末尾
- axios比较简单,注意_this=this来传递对象的this给箭头函数内部
p2的element-ui完全跳过
第三节vue-router的内容，
第四节前后端数据对接的内容
后面是实现增删改查的功能，前端需要掌握这里调Api的过程

为了做这个demo项目，需要顺带需要学习vue-router和vue-axios，都比较简单，现场查现场用就可以。在springboot-vue-后台管理系统-前端部分中会有介绍。

后端开发

跟着视频操作就完事了：4、前后端分离开发数据对接_哔哩哔哩_bilibili

后端部分比较简单，没有技术难题，也没有复杂的业务逻辑，只需要跟着视频操作，有一定的代码编写量即可。

springboot-vue-后台管理系统-后端部分

后端注意事项

对于后端开发人员，可以看这个视频，对前后端分离的职责划分有一个浅显的理解：4、前后端分离开发数据对接_哔哩哔哩_bilibili

具体来说，学习这些内容：

p1只要了解前后端分离的概念，不要跟着他创建项目，创建项目见后文后端开发小节
- p1看0到20分钟，中间跳过，然后看p1的1小时02分钟有跨域问题的临时解决方案
- p1的1小时02分钟有跨域问题的临时解决方案，但是他这里给出的代码有点小问题，见后文解决跨域问题小节
如何设计接口，并暴露给前端
不用关心restful接口的概念，我们实际开发过程中使用更多的是POST+Json的方案，restful的接口可以以后自己自行了解。

后端只要写增删改查这些，不要写页面跳转的控制器，详见前后端分离与数据对接

实际的业务开发过程中会遇到手写控制器的场景，但是比较简单，一般来说，应该在控制器内直接调用更底层的api，避免在控制器里写业务代码，所以在学习的过程中，不用浪费时间在写控制器上（controller）

解决跨域问题

注意一下：前后端的端口不一样，前端工作在8080，后端工作在8888或者其他非8080端口

因为前后端工作在不同的端口，会有跨域问题。

这里给出一个学习时的临时解决方案，在后端添加内容如下：

package com.yuanshuai.springboottest.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CrosConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowCredentials(false)
                        .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                        .allowedOrigins("*");
	            // 高版本的springboot，把.allowedOrigins("*")改成.allowedOriginPatterns("*")就可以
            }
        };
    }

}

实际项目开发中不能这样简单的操作