springboot-vue-后台管理系统

发表于 2023-01-26 更新于 2023-03-08

上一级页面：ssm-spring-boot速成学习索引

前言

这个项目是学习Vue和springBoot过程中练手用的Demo项目。

demo项目的概念详见java学习路线-项目实战

这个过程中用到了一些概念，例如前后端分离，跨域请求等。也大量使用了框架的基础语法，加强使用框架开发web页面的实际能力。

前后端分离

现在流行的开发方式是前后端分离，具体来说：前后端分离与数据对接

前端开发

前端我使用尚硅谷提供的模板文件，自己引入vue-js，对其做一些改造，

一方面是练手vue-js，我的vue.js刚刚学完基础部分，改造这个难度刚刚好，能够拿来练手。可以当作Vue.js的Demo项目来做
另外一方面是考虑到前后端分离的大环境，只有后端程序员还在用Thymeleaf。所以用vue.js来做前端是有必要性的
实际开发过程中，用原生Js、JQuery或者其他的前端框架的情况更多，相比之下，用Thymeleaf这类后端模板框架的可能性太低

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

前端注意事项

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

跳过element-ui的部分，因为一方面这个ui库现在半死不活了，另外一方面，我们做的这个demo项目，目的是锻炼vue的语法基础的。避免用ui库

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

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("*")就可以
            }
        };
    }

}

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

前言