springboot+vue制作后臺管理系統(tǒng)項目
更新時間：2021年08月19日 16:51:44 作者：先養(yǎng)只貓
本文詳細介紹了后臺管理使用springboot+vue制作，以分步驟、圖文的形式詳細講解，大家有需要的可以參考參考
學習資源來自于B站UP，up他講的非常詳細，對于熟悉兩大框架很有用。
我的作業(yè)源代碼在文章末尾，歡迎有需要的同學，學習參考使用，內(nèi)置SQL文件，導入后，開啟springboot和vue服務即可使用，注意更改自己的數(shù)據(jù)庫信息配置，一起學習，一起進步哦！！
一、所使用的環(huán)境配置：
編譯器：IDEA
后臺框架：SpringBoot
Mybatis-Plus
數(shù)據(jù)庫：Mysql8.0
數(shù)據(jù)庫工具：Navicat premium
前端框架：Vue
Element UI
引用的富文本編輯器：wangEditor
二、項目簡介
這是一個基于SpringBoot和Vue的后臺管理系統(tǒng)。
主要功能：
1.實現(xiàn)用戶信息的CRUD，以及頁面的顯示。
2.用戶權(quán)限的分配，不同權(quán)限的用戶鎖能看到的的界面信息和能進行的操作是不同的。
3.實現(xiàn)圖片，文件的上傳和下載。
4.實現(xiàn)頁面富文本編譯器的使用與信息的CRUD。
5.跨域配置，MybatisPlus配置。
6.用戶的登錄注冊，攔截器。
7.查詢功能。
。。。。
項目展示：（圖片）
1.登錄界面
2.注冊頁面這兩個頁面可以自由切換
3.root登錄后的默認頁面以及高亮顯示
4.幾個頁面的展示
5.root賬戶所能進行的CRUD操作和能查看的用戶信息頁面
修改
6.個人信息修改，以及退出
7.普通用戶登錄
這里只做了圖書頁面的權(quán)限限制和用戶信息的限制
三、知識點總結(jié)（代碼和配置）
配置文件：
SpringBoot：
1.Mybatis-Plus配置文件，實現(xiàn)分頁查詢：MybatisPlusConfig
參考官網(wǎng)：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 {
// 舊版，官網(wǎng)的舊版視乎無法使用
// 最新版
@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("*");
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這么方便。
將所有的請求放回統(tǒng)一定義，根據(jù)項目所規(guī)定的code進行再定義與返回，達到項目通用的效果，非常實用！
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("*");
corsConfiguration.setMaxAge(Max_AGE);
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter(){
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**",buildConfig());;//允許訪問后臺的所有接口
return new CorsFilter(source);
}
}
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">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.3</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.wen</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--spring mybatis-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.0</version>
</dependency>
<!-- mybatis-plus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.3.1</version>
</dependency>
<!--一個后端工具庫-->
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.7.7</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
Vue：
1.這里為解決未登錄用戶頁面攔截的問題，在Vue中創(chuàng)建了一工具類/utils/：request.js
import axios from 'axios'
import router from "@/router";
const request = axios.create({
//baseUrl:'/api'
timeout: 5000
})
// request 攔截器
// 可以自請求發(fā)送前對請求做一些處理
// 比如統(tǒng)一加token，對請求參數(shù)統(tǒng)一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
// config.headers['token'] = user.token; // 設(shè)置請求頭
//取出sessionStorage里面的用戶信息
let userJson = sessionStorage.getItem("user");
if (!userJson){
router.push("/login");
}
return config
}, error => {
return Promise.reject(error)
});
// response 攔截器
// 可以在接口響應后統(tǒng)一處理結(jié)果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服務端返回的字符串數(shù)據(jù)
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//設(shè)置本地默認端口 選填
port: 9876,//設(shè)置的本項目端口
proxy: { //設(shè)置代理，必須填
'/api': { //設(shè)置攔截器 攔截器格式 斜杠+攔截器名字，名字可以自己定
target: 'http://localhost:9090/', //代理的目標地址
changeOrigin: true, //是否設(shè)置同源，輸入是的
pathRewrite: { //路徑重寫
'/api': '' //選擇忽略攔截器里面的單詞
}
}
}
}
}
其余知識點總結(jié)：
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);//返回結(jié)果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/";//文件路徑
List<String> fileNames = FileUtil.listFileNames((basePath));//獲取所有的文件名稱
String fileName = fileNames.stream().filter(name -> name.contains(flag)).findAny().orElse("");//找到根參數(shù)一致的文件
try {
if (StrUtil.isNotEmpty(fileName)){
response.addHeader("Content-Disposition","attachment;filename="+ URLEncoder.encode(fileName,"UTF-8"));
response.setContentType("application/octet-stream");
byte[] bytes = FileUtil.readBytes(basePath + fileName);//通過文件路徑讀取文字節(jié)流
os = response.getOutputStream();//通過輸出流返回文件
os.write(bytes);
os.flush();
os.close();
}
}catch (Exception e){
System.out.println("文件下載失敗");
}
}
/**
* 富文本上傳接口
* @param file
* @return
*/
@PostMapping("editor/upload")
public JSON editorUpload(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;
JSONObject jsonObject = new JSONObject();
jsonObject.set("errno",0);
JSONArray arr = new JSONArray();
JSONObject data = new JSONObject();
arr.add(data);
data.set("url",url);
jsonObject.set("data",arr);
return jsonObject;//返回結(jié)果url
}
}
總結(jié)：
- @Value：獲取配置文件中指定的數(shù)據(jù)（這里的server.port存在于項目文件中application.yaml文件中），存入下方定義的變量中。
- MultipartFile：用于接收上傳文件的類，推薦文章，其中包含了該類的許多用法，很詳細。
- IdUtil.fastSimpleUUID()：使用的是hutool中的方法，用于生成唯一標識的UUID，加在上傳圖片的前面，用于唯一區(qū)別，避免了相同文件名上傳后覆蓋的問題。
- System.getProperty(“user.dir”)：獲取當前項目的根目錄，在本項目中也就是springboot-vue-demo目錄了。
- HttpServletResponse：http請求的響應。（學習重點，自己也不是很熟啦，加強學習?。?/li>
- response.addHeader(“Content-Disposition”,“attachment;filename=”+ URLEncoder.encode(fileName,“UTF-8”));：添加相應頭，定義文件下載后的名字。
- response.setContentType(“application/octet-stream”);：定義文件下載的格式，二進制流。
關(guān)于Mybatis-Plus: 總之就是非常方便，結(jié)合lombok進行開發(fā)極大的簡化了后端的實體定義和數(shù)據(jù)庫相關(guān)的操作問題。
SpringBoot中：
- SpringBoot通過maven引入MybatisPlus
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>mybatis-plus-latest-version</version>//這里記得更改成版本號，這樣是無法導入的！
</dependency>
- 配置只需要通過@MapperScan注解即可使用
@MapperScan("com.baomidou.mybatisplus.samples.quickstart.mapper")//這里是項目中mapper存放的文件路徑。
- 需要使用的注解：官網(wǎng)
- 例如：在實體上使用@TableName(“user”)，即是將實體與數(shù)據(jù)庫中相應的表格相對應，@TableId，即是數(shù)據(jù)庫中的主鍵。
- 定義接口，即是mapper層或者service層：繼承BaseMapper<相應的實體名>即可使用BaseMapper中的方法，包括各種CRUD操作，如果有定義自身的XXmapper.xml文件的話，就會使用xml文件中相應的CRUD方法。官方中的所有接口
public interface BookMapper extends BaseMapper<Book> {
}
關(guān)于wangEditor：
哈哈哈，解決了重復創(chuàng)建編輯器的問題！
學習時錯誤如下：
問題描述：由于編輯器的節(jié)點只有在彈窗創(chuàng)建之后才能生成，也就是才能獲取，在項目中，原本的代碼會導致新增和修改彈窗重復創(chuàng)建編輯器。
解決辦法：
let editor;
method:{
creatDom(){
editor = new E('#div1');//富文本編輯器創(chuàng)建，獲取節(jié)點
// 配置 server 接口地址
editor.config.uploadImgServer = 'http://localhost:9090/files/editor/upload';
editor.config.uploadFileName = 'file';//設(shè)置文件上傳的名字
editor.create();//創(chuàng)建。
},
//這里是新增彈窗
add(){
this.dialogVisible = true;
this.form = {};
//由于只有在彈窗啟動之后，div節(jié)點才會被創(chuàng)建，那么創(chuàng)建富文本編輯器也只能在其之后。
this.$nextTick(()=>{
if (editor==null){
this.creatDom();
}else {
editor.destroy();//這里做了一次判斷，判斷編輯器是否被創(chuàng)建，如果創(chuàng)建了就先銷毀。
this.creatDom();
}
});
},
//這里是修改彈窗
handleEdit(row){
this.form = JSON.parse((JSON.stringify(row)));
this.dialogVisible = true;
this.$nextTick(()=>{
if (editor==null){
this.creatDom();
editor.txt.html(row.content);
}else {
editor.destroy();//這里做了一次判斷，判斷編輯器是否被創(chuàng)建，如果創(chuàng)建了就先銷毀。
this.creatDom();
editor.txt.html(row.content);
}
});
},
}
后續(xù)更新。。。。。。
項目源代碼：Github倉庫
到此這篇關(guān)于springboot+vue制作后臺管理系統(tǒng)項目的文章就介紹到這了,更多相關(guān)springboot+vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
SpringBoot獲取http數(shù)據(jù)、打印HTTP參數(shù)的4種方式
Java的話本地打斷點可以調(diào)試獲取rest入?yún)?但是在生產(chǎn)環(huán)境可能我們獲取入?yún)ⅲ℉ttp?header/parameter）可能就沒有那么的輕松了,所以本文給大家介紹了SpringBoot獲取http數(shù)據(jù)、打印HTTP參數(shù)的4種方式,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了SpringBoot全局異常處理與定制404頁面的相關(guān)資料,本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細，需要的朋友可以參考下2007-09-09
這篇文章主要介紹了Java SSM配置文件案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
本文主要介紹了java反射機制的相關(guān)知識，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JavaWeb實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
Idea安裝Eslint插件提示：Plugin NativeScript was not installed的問題
這篇文章主要介紹了Idea安裝Eslint插件提示：Plugin NativeScript was not installed的問題,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了從面試中的問題分析ThreadLocal，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，下面我們來一起學習一下吧2019-06-06
這篇文章主要為大家詳細介紹了Java定時器Timer的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
Java異常 Factory method''sqlSessionFactory''rew exception;este
這篇文章主要介紹了Java異常 Factory method ‘sqlSessionFactory‘ threw exception； nested exception is java.lang.NoSuchMethodError:,本文介紹了springboot 引入mybatis-plus后報錯的解決方案,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-07-07
這篇文章主要為大家詳細介紹了Java經(jīng)典排序算法之堆排序，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11