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

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

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

4.几个页面的展示

![在这里插入图片描述](https://img-blog.csdnimg.cn/04b499bfbfd84b7fbc2e78ebf2c36b28.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdG 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源徽信搜索公众号【编程进阶路】 k,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUyMDUwNzY5,size_16,color_FFFFFF,t_70#pic_center)

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配置文件

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns=“http://maven.apache.org/POM/4.0.0” xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”

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

<java.version>1.8</java.version>

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/”;//文件路径

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

阿里服务器部署springboot+vue前后端分离项目
服务器部署springboot+vue前后端分离项目最近刚刚在实习熟悉公司的业务,所有尝试着自己将项目部署到服务器上.本次部署的项目是Spring Boot+Vue前后端分离项目,后端使用的技术有M ...
从0搭建一个Springboot+vue前后端分离项目(一)安装工具,创建项目
从0搭建一个Springboot+vue前后端分离项目(二)使用idea进行页面搭建+页面搭建参考学习vue官网文档 https://v3.cn.vuejs.org/guide/installati ...
【毕业设计-免费】springboot+vue前后端分离-酒店客房管理系统
前言 [毕业设计-免费]springboot+vue前后端分离-酒店客房管理系统-免费
springboot+vue前后端分离实现宿舍管理系统
作者主页:编程指南针简介:Java领域优质创作者.CSDN博客专家 Java项目.简历模板.学习资料.面试题库.技术互助文末获取源码项目编号:BS-GX-032 开发技术: 后台:Spring ...
酒店管理|基于Springboot+Vue前后端分离实现酒店管理系统
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .掘金特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Java项目.毕业设计.简历模板.学习资料.面试题库.技术互助 ...
大屏监控系统实战（4）-如何将SpringBoot+Vue前后端分离项目一次打包为一个Jar包运行？
玩过最新版Dubbo管控台的都知道,人家是个前后端分离的项目,可是一条打包命令能让两个项目整合在一起,生成一个jar包,这样的好处显而易见,部署的时候服务器不需要安装node环境单独部署前端项目,或者 ...
SpringBoot+Vue前后端分离项目的搭建及简单开发（这次保证看明白~）
文章目录概述一.搭建SpringBoot后端 1.sql脚本 2.新建SpringBoot项目 3.MP代码生成 4.编写Controller 二.搭建Vue前端 1.IDEA安装Vue.js插件 ...
SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目图片上传并查看功能实现汇总
SSM项目下的图片上传: 1.前端Js代码:用户点击"上传头像"按钮后,会执行uploadPhoto()的方法. <button type="button" ...
springboot+vue前后端分离项目（后台管理系统）
学习笔记学习资源来自于B站UP,up他讲的非常详细,对于熟悉两大框架很有用. 我的作业源代码在文章末尾,欢迎有需要的同学,学习参考使用,内置SQL文件,导入后,开启springboot和vue服务即 ...
从0搭建一个Springboot+vue前后端分离项目(七)完善前台与后台的联系,完善功能接口
将之前前端写的表格内容,与数据库新建的表进行对应启动项目把写死的TableDa数据删掉.因为最终要从后台读取完善新增接口 <el-button type="primary&quo ...

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

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

最新文章

热门文章