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

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 = 246060;//连接时间

private CorsConfiguration buildConfig(){

CorsConfiguration corsConfiguration = new CorsConfiguration();

//定义所允许的请求头，方法等。*代表所有

corsConfiguration.addAllowedOrigin(“*”);

corsConfiguration.addAllowedHeader(“*”);

corsConfiguration.addAllowedMethod(“*”);

corsConfiguration.setMaxAge(Max_AGE);

return corsConfiguration;

}

@Bean

public CorsFilter corsFilter(){

UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

source.registerCorsConfiguration(“/**”,buildConfig());;//允许访问后台的所有接口

return new CorsFilter(source);

}

}

3.请求返回类！：Result

**这里算是一个重点，解放了我平时后端coding的思维，非常感谢，没有想到get，set这么方便。

将所有的请求放回统一定义，根据项目所规定的code进行再定义与返回，达到项目通用的效果，非常实用！**

package com.wen.common;

public class Result {

private String code;

private String msg;

private T data;//定义泛型，用于接受数据。

public String getCode() {

return code;

}

public void setCode(String code) {

this.code = code;

}

public String getMsg() {

return msg;

}

public void setMsg(String msg) {

this.msg = msg;

}

public T getData() {

return data;

}

public void setData(T data) {

this.data = data;

}

public Result(){

}

public Result(T data) {

this.data = data;

}

public static Result success(){

Result result = new Result<>();

result.setCode(“0”);

result.setMsg(“成功”);

return result;

}

public static Result success(T data){

Result result = new Result<>(data);

result.setCode(“0”);

result.setMsg(“成功”);

return result;

}

public static Result error(String code,String msg){

Result result = new Result();

result.setCode(code);

result.setMsg(msg);

return result;

}

}

4.pom.xml配置文件

xsi:schemaLocation=“http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd”>

4.0.0

org.springframework.boot

spring-boot-starter-parent

2.5.3

com.wen

demo

0.0.1-SNAPSHOT

demo

Demo project for Spring Boot

1.8

org.springframework.boot

spring-boot-starter-web

mysql

mysql-connector-java

runtime

org.projectlombok

lombok

true

org.springframework.boot

spring-boot-starter-test

test

org.mybatis.spring.boot

mybatis-spring-boot-starter

2.2.0

com.baomidou

mybatis-plus-boot-starter

3.4.3.1

cn.hutool

hutool-all

5.7.7

org.springframework.boot

spring-boot-maven-plugin

org.projectlombok

lombok

Vue：

1.这里为解决未登录用户页面拦截的问题，同时封装了axios便于请求使用，在Vue中创建了一工具类/utils/：request.js

import axios from ‘axios’

import router from “@/router”;

const request = axios.create({

//baseUrl:‘/api’

timeout: 5000

})

// request 拦截器

// 可以自请求发送前对请求做一些处理

// 比如统一加token，对请求参数统一加密

request.interceptors.request.use(config => {

config.headers[‘Content-Type’] = ‘application/json;charset=utf-8’;

// config.headers[‘token’] = user.token; // 设置请求头

//取出sessionStorage里面的用户信息

let userJson = sessionStorage.getItem(“user”);

if (!userJson){

router.push(“/login”);

}

return config

}, error => {

return Promise.reject(error)

});

// response 拦截器

// 可以在接口响应后统一处理结果

request.interceptors.response.use(

response => {

let res = response.data;

// 如果是返回的文件

if (response.config.responseType === ‘blob’) {

return res

}

// 兼容服务端返回的字符串数据

if (typeof res === ‘string’) {

res = res ? JSON.parse(res) : res

}

return res;

},

error => {

console.log(‘err’ + error) // for debug

return Promise.reject(error)

}

)

export default request

2.为解决跨域问题：在vue文件下新建vue.config.js文件

// 跨域配置

module.exports = {

devServer: { //记住，别写错了devServer//设置本地默认端口 选填

port: 9876,//设置的本项目端口

proxy: { //设置代理，必须填

‘/api’: { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定

target: ‘http://localhost:9090/’, //代理的目标地址

changeOrigin: true, //是否设置同源，输入是的

pathRewrite: { //路径重写

‘/api’: ‘’ //选择忽略拦截器里面的单词

}

}

}

}

}

其余知识点总结：

SpringBoot后端文件上传和下载的Controller：FileController

package com.wen.controller;

import cn.hutool.core.io.FileUtil;

import cn.hutool.core.util.IdUtil;

import cn.hutool.core.util.StrUtil;

import cn.hutool.json.JSON;

import cn.hutool.json.JSONArray;

import cn.hutool.json.JSONObject;

import com.wen.common.Result;

import org.springframework.beans.factory.annotation.Value;

import org.springframework.web.bind.annotation.*;

import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.OutputStream;

import java.net.URLEncoder;

import java.util.List;

@RestController

@RequestMapping(“/files”)

public class FileController {

@Value(“${server.port}”)

private String port;

private static final String ip = “http://localhost”;

/**

• 上传接口

• @param file

• @return

*/

@PostMapping(“/upload”)

public Result upload(MultipartFile file){

String originalFilename = file.getOriginalFilename();//获取源文件的名称

// 定义文件的唯一标识（前缀）

String flag = IdUtil.fastSimpleUUID();

String rootFilePath = System.getProperty(“user.dir”)+“/springboot/src/main/resources/files/”+flag+“_”+originalFilename;//获取文件上传的路径

try {

FileUtil.writeBytes(file.getBytes(),rootFilePath);//把文件写入该路径

} catch (IOException e) {

e.printStackTrace();

}

String url = ip+“:”+port+“/files/”+flag;

return Result.success(url);//返回结果url

}

/**

• 下载接口

• @param flag

• @param response

*/

@GetMapping(“/{flag}”)

public void getFiles(@PathVariable String flag, HttpServletResponse response){

OutputStream os;//新建一个输出对象

String basePath = System.getProperty(“user.dir”)+“/springboot/src/main/resources/files/”;//文件路径