springboot+vue前后端分离项目（后台管理系统）

学习笔记

学习资源来自于B站UP，up他讲的非常详细，对于熟悉两大框架很有用。

我的作业源代码在文章末尾，欢迎有需要的同学，学习参考使用，内置SQL文件，导入后，开启springboot和vue服务即可使用，注意更改自己的数据库信息配置，一起学习，一起进步哦！！

一、所使用的环境配置：

编译器：IDEA
后台框架：SpringBoot
Mybatis-Plus
数据库：Mysql8.0
数据库工具：Navicat premium
前端框架：Vue
Element UI
引用的富文本编辑器：wangEditor

二、项目简介

这是一个基于SpringBoot和Vue的后台管理系统。
主要功能：
1.实现用户信息的CRUD，以及页面的显示。
2.用户权限的分配，不同权限的用户锁能看到的的界面信息和能进行的操作是不同的。
3.实现图片，文件的上传和下载。
4.实现页面富文本编译器的使用与信息的CRUD。
5.跨域配置，MybatisPlus配置。
6.用户的登录注册，拦截器。
7.查询功能。
。。。。
项目展示：（图片）
1.登录界面

2.注册页面这两个页面可以自由切换

3.root登录后的默认页面以及高亮显示

4.几个页面的展示


5.root账户所能进行的CRUD操作和能查看的用户信息页面

修改

6.个人信息修改，以及退出

7.普通用户登录
这里只做了图书页面的权限限制和用户信息的限制

三、知识点总结（代码和配置）

配置文件：
SpringBoot：
1.Mybatis-Plus配置文件，实现分页查询：MybatisPlusConfig
参考官网：MybatisPlus

package com.wen.common;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

//Spring boot方式
@Configuration
@MapperScan("com.wen.mapper")//这里所扫描的是项目中mapper文件的位置！
public class MybatisPlusConfig {

    // 旧版，官网的旧版视乎无法使用

    // 最新版
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }

}

2.跨域配置文件：CorsConfig

package com.wen.common;


import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {
    private static final long Max_AGE = 24*60*60;//连接时间
    private CorsConfiguration buildConfig(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //定义所允许的请求头，方法等。*代表所有
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");