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("*");
        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<T> {
    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 <T> Result<T> success(T data){
        Result<T> 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">
    <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中創建了一工具類/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/";//檔案路徑
        List<String> fileNames = FileUtil.listFileNames((basePath));//獲取所有的檔案名稱
        String fileName = fileNames.stream().filter(name -> name.contains(flag)).findAny().orElse("");//找到根引數一致的檔案

        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);//通過檔案路徑讀取文位元組流
                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：獲取組態檔中指定的資料（這里的server.port存在于專案檔案中application.yaml檔案中），存入下方定義的變數中，
MultipartFile：用于接收上傳檔案的類，推薦文章，其中包含了該類的許多用法，很詳細，
IdUtil.fastSimpleUUID()：使用的是hutool中的方法，用于生成唯一標識的UUID，加在上傳圖片的前面，用于唯一區別，避免了相同檔案名上傳后覆寫的問題，
System.getProperty(“user.dir”)：獲取當前專案的根目錄，在本專案中也就是springboot-vue-demo目錄了，
HttpServletResponse：http請求的回應，（學習重點，自己也不是很熟啦，加強學習！）
response.addHeader(“Content-Disposition”,“attachment;filename=”+ URLEncoder.encode(fileName,“UTF-8”));：添加相應頭，定義檔案下載后的名字，
response.setContentType(“application/octet-stream”);：定義檔案下載的格式，二進制流，

關于Mybatis-Plus: 總之就是非常方便，結合lombok進行開發極大的簡化了后端的物體定義和資料庫相關的操作問題，
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存放的檔案路徑，

需要使用的注解：官網
例如：在物體上使用@TableName(“user”)，即是將物體與資料庫中相應的表格相對應，@TableId，即是資料庫中的主鍵，
定義介面，即是mapper層或者service層：繼承BaseMapper<相應的物體名>即可使用BaseMapper中的方法，包括各種CRUD操作，如果有定義自身的XXmapper.xml檔案的話，就會使用xml檔案中相應的CRUD方法，官方中的所有介面

public interface BookMapper extends BaseMapper<Book> {
}

關于wangEditor：
哈哈哈，解決了重復創建編輯器的問題！
學習時錯誤如下：
問題描述：由于編輯器的節點只有在彈窗創建之后才能生成，也就是才能獲取，在專案中，原本的代碼會導致新增和修改彈窗重復創建編輯器，
在這里插入圖片描述
解決辦法：

let editor;
method:{
creatDom(){
      editor = new E('#div1');//富文本編輯器創建，獲取節點
      // 配置 server 介面地址
      editor.config.uploadImgServer = 'http://localhost:9090/files/editor/upload';
      editor.config.uploadFileName = 'file';//設定檔案上傳的名字
      editor.create();//創建，
    },
    //這里是新增彈窗
    add(){
      this.dialogVisible = true;
      this.form = {};
      //由于只有在彈窗啟動之后，div節點才會被創建，那么創建富文本編輯器也只能在其之后，
      this.$nextTick(()=>{
        if (editor==null){
          this.creatDom();
        }else {
          editor.destroy();//這里做了一次判斷，判斷編輯器是否被創建，如果創建了就先銷毀，
          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();//這里做了一次判斷，判斷編輯器是否被創建，如果創建了就先銷毀，
          this.creatDom();
          editor.txt.html(row.content);
        }
      });
    },
}

后續更新，，，，，，

專案源代碼：Github倉庫

Talk is cheap，show me the code！—— 薪火作業室！

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/293955.html

標籤：java

上一篇：LeetCode 129. 求根節點到葉節點數字之和【c++/java詳細題解】

下一篇：測驗開發面經（百度，好未來，聲網，SHEIN，中科創達)