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.用戶權限的分配，不同權限的用戶鎖能看到的的界面信息和能進行的操作是不同的。
3.實現(xiàn)圖片，文件的上傳和下載。
4.實現(xiàn)頁面富文本編譯器的使用與信息的CRUD。
5.跨域配置，MybatisPlus配置。
6.用戶的登錄注冊，攔截器。
7.查詢功能。
。。。。
項目展示：（圖片）
1.登錄界面
2.注冊頁面這兩個頁面可以自由切換
3.root登錄后的默認頁面以及高亮顯示
4.幾個頁面的展示
5.root賬戶所能進行的CRUD操作和能查看的用戶信息頁面
修改
6.個人信息修改，以及退出
7.普通用戶登錄
這里只做了圖書頁面的權限限制和用戶信息的限制
三、知識點總結（代碼和配置）
配置文件：
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; // 設置請求頭
//取出sessionStorage里面的用戶信息
let userJson = sessionStorage.getItem("user");
if (!userJson){
router.push("/login");
}
return config
}, error => {
return Promise.reject(error)
});
// response 攔截器
// 可以在接口響應后統(tǒng)一處理結果
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//設置本地默認端口 選填
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/";//文件路徑
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;//返回結果url
}
}
總結：
- @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”);：定義文件下載的格式，二進制流。
關于Mybatis-Plus: 總之就是非常方便，結合lombok進行開發(fā)極大的簡化了后端的實體定義和數(shù)據(jù)庫相關的操作問題。
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> {
}
關于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';//設置文件上傳的名字
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倉庫
到此這篇關于springboot+vue制作后臺管理系統(tǒng)項目的文章就介紹到這了,更多相關springboot+vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了IDEA如何加載resources文件夾下文件相對路徑問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
Java畢業(yè)設計實戰(zhàn)項目之在線服裝銷售商城系統(tǒng)的實現(xiàn)流程
基礎掌握怎么樣，用實戰(zhàn)檢驗就知道了，本篇文章手把手帶你用java+SpringBoot+Maven+Vue+mysql實現(xiàn)一個在線服裝銷售商城系統(tǒng),大家可以在過程中查缺補漏，提升水平2022-01-01
這篇文章主要介紹了Spring自定義配置Schema可擴展(二)的相關資料,需要的朋友可以參考下2016-01-01
mybatis插入數(shù)據(jù)不返回主鍵id的可能原因及解決方式
這篇文章主要介紹了mybatis插入數(shù)據(jù)不返回主鍵id的可能原因及解決方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
序列化是將對象狀態(tài)轉(zhuǎn)換為可存儲或傳輸格式的過程,反序列化則是將存儲或傳輸格式恢復為原始對象的逆過程,這篇文章主要介紹了Java中序列化與反序列化的相關資料,需要的朋友可以參考下2024-10-10
利用Java實現(xiàn)圖片轉(zhuǎn)化為ASCII圖的示例代碼
本文將詳細講解如何利用 Java 實現(xiàn)圖片轉(zhuǎn)化為 ASCII 圖,從項目背景與意義、相關技術知識,到系統(tǒng)需求與架構設計,再到詳細實現(xiàn)思路、完整代碼和代碼解讀,最后對項目進行總結與展望,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了Spark?實現(xiàn)自定義加密的示例代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07
這篇文章主要介紹了Java開發(fā)微信Navicat支付完整版，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
淺談選擇、冒泡排序，二分查找法以及一些for循環(huán)的靈活運用
下面小編就為大家?guī)硪黄獪\談選擇、冒泡排序，二分查找法以及一些for循環(huán)的靈活運用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Jpa 如何使用@EntityListeners 實現(xiàn)實體對象的自動賦值
這篇文章主要介紹了Jpa 如何使用@EntityListeners 實現(xiàn)實體對象的自動賦值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-08-08