前言：最近寫(xiě)項(xiàng)目，發(fā)現(xiàn)了一些很有意思的功能，想寫(xiě)文章，錄視頻把這些內(nèi)容記錄下。但這些功能太零碎，如果為每個(gè)功能都單獨(dú)搭建一個(gè)項(xiàng)目，這明顯不合適。于是我想，就搭建一個(gè)項(xiàng)目，把那些我想將的小功能全部整合到一起。實(shí)現(xiàn)搭一次環(huán)境，處處使用。

本文主要實(shí)現(xiàn)一下兩個(gè)功能

1. 前后端項(xiàng)目搭建
2. 表格展示樹(shù)形數(shù)據(jù)

已錄制視頻
b站視頻鏈接

1. 前后端項(xiàng)目環(huán)境搭建

前端：pure-admin-thin + renren-fast-vue

后端：springboot 2.7.5 + renren-fast

前端

• 克隆pure-admin-thin

  git clone https://github.com/pure-admin/pure-admin-thin.git
  

• 安裝前端依賴(lài)

  pnpm i
  

• 運(yùn)行前端項(xiàng)目

  pnpm run dev
  

后端

• 構(gòu)建springboot項(xiàng)目

• pom.xml

      <properties><java.version>1.8</java.version><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><java.version>1.8</java.version><mybatisplus.version>3.3.1</mybatisplus.version><mysql.version>8.0.28</mysql.version><mssql.version>4.0</mssql.version><oracle.version>11.2.0.3</oracle.version><druid.version>1.1.13</druid.version><quartz.version>2.3.0</quartz.version><commons.lang.version>2.6</commons.lang.version><commons.fileupload.version>1.2.2</commons.fileupload.version><commons.io.version>2.5</commons.io.version><commons.codec.version>1.10</commons.codec.version><commons.configuration.version>1.10</commons.configuration.version><shiro.version>1.9.0</shiro.version><jwt.version>0.7.0</jwt.version><kaptcha.version>0.0.9</kaptcha.version><qiniu.version>7.2.23</qiniu.version><aliyun.oss.version>2.8.3</aliyun.oss.version><qcloud.cos.version>4.4</qcloud.cos.version><swagger.version>2.7.0</swagger.version><joda.time.version>2.9.9</joda.time.version><gson.version>2.8.5</gson.version><hutool.version>4.1.1</hutool.version><lombok.version>1.18.4</lombok.version></properties><dependencies><dependency><groupId>com.fasterxml.jackson.datatype</groupId><artifactId>jackson-datatype-jsr310</artifactId></dependency><!--日志--><dependency><groupId>ch.qos.logback</groupId><artifactId>logback-classic</artifactId></dependency><dependency><groupId>ch.qos.logback</groupId><artifactId>logback-access</artifactId></dependency><dependency><groupId>ch.qos.logback</groupId><artifactId>logback-core</artifactId></dependency><dependency><groupId>commons-dbcp</groupId><artifactId>commons-dbcp</artifactId><version>1.4</version></dependency><dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId><version>3.2.0</version></dependency><dependency><groupId>com.aliyun</groupId><artifactId>dysmsapi20170525</artifactId><version>2.0.23</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.11.0</version></dependency><dependency><groupId>javax.annotation</groupId><artifactId>javax.annotation-api</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>${mybatisplus.version}</version><exclusions><exclusion><groupId>com.baomidou</groupId><artifactId>mybatis-plus-generator</artifactId></exclusion></exclusions></dependency><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-core</artifactId><version>${shiro.version}</version></dependency><dependency><groupId>org.apache.shiro</groupId><artifactId>shiro-spring</artifactId><version>${shiro.version}</version></dependency><dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>${jwt.version}</version></dependency><dependency><groupId>com.github.axet</groupId><artifactId>kaptcha</artifactId><version>${kaptcha.version}</version></dependency><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>${swagger.version}</version></dependency><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger-ui</artifactId><version>${swagger.version}</version></dependency><dependency><groupId>com.qiniu</groupId><artifactId>qiniu-java-sdk</artifactId><version>${qiniu.version}</version></dependency><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>${aliyun.oss.version}</version></dependency><dependency><groupId>com.qcloud</groupId><artifactId>cos_api</artifactId><version>${qcloud.cos.version}</version><exclusions><exclusion><groupId>org.slf4j</groupId><artifactId>slf4j-log4j12</artifactId></exclusion></exclusions></dependency><dependency><groupId>joda-time</groupId><artifactId>joda-time</artifactId><version>${joda.time.version}</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.79</version></dependency><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId><version>${gson.version}</version></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>${hutool.version}</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>${lombok.version}</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency><dependency><groupId>commons-lang</groupId><artifactId>commons-lang</artifactId><version>${commons.lang.version}</version></dependency><dependency><groupId>org.aspectj</groupId><artifactId>aspectjweaver</artifactId></dependency><!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-redis --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><version>2.7.5</version></dependency><!-- https://mvnrepository.com/artifact/org.springframework.data/spring-data-redis --><dependency><groupId>org.springframework.data</groupId><artifactId>spring-data-redis</artifactId><version>2.7.5</version></dependency><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-starter</artifactId><version>1.2.13</version></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><dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.2.2</version></dependency><dependency><groupId>org.apache.commons</groupId><artifactId>commons-lang3</artifactId></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>
  

• yml

  # Tomcat
  server:tomcat:uri-encoding: UTF-8max-threads: 1000min-spare-threads: 30port: 9006
  #  connection-timeout: 5000msservlet:context-path: /api_demospring:datasource:type: com.alibaba.druid.pool.DruidDataSourcedruid:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghaiusername: rootpassword: rootinitial-size: 10max-active: 100min-idle: 10max-wait: 60000pool-prepared-statements: truemax-pool-prepared-statement-per-connection-size: 20time-between-eviction-runs-millis: 60000min-evictable-idle-time-millis: 300000#Oracle需要打開(kāi)注釋#validation-query: SELECT 1 FROM DUALtest-while-idle: truetest-on-borrow: falsetest-on-return: falsestat-view-servlet:enabled: trueurl-pattern: /druid/*#login-username: admin#login-password: adminfilter:stat:log-slow-sql: trueslow-sql-millis: 1000merge-sql: falsewall:config:multi-statement-allow: true# 環(huán)境 dev|test|prodprofiles:active: dev# jackson時(shí)間格式化jackson:time-zone: GMT+8date-format: yyyy-MM-dd HH:mm:ssservlet:multipart:max-file-size: 100MBmax-request-size: 100MBenabled: trueredis:open: false  # 是否開(kāi)啟redis緩存  true開(kāi)啟   false關(guān)閉database: 0host: localhostport: 6379#    password: 123456   # 密碼（默認(rèn)為空）timeout: 6000ms  # 連接超時(shí)時(shí)長(zhǎng)（毫秒）jedis:pool:max-active: 1000  # 連接池最大連接數(shù)（使用負(fù)值表示沒(méi)有限制）max-wait: -1ms      # 連接池最大阻塞等待時(shí)間（使用負(fù)值表示沒(méi)有限制）max-idle: 10      # 連接池中的最大空閑連接min-idle: 5       # 連接池中的最小空閑連接mvc:throw-exception-if-no-handler-found: truepathmatch:matching-strategy: ANT_PATH_MATCHER
  #  resources:
  #    add-mappings: false#mybatis
  mybatis-plus:logging:level:#      org.springframework: warnorg.apache.ibatis.logging: debug#      com.tmxk.municipal.**.dao: debugmapper-locations: classpath*:/mapper/**/*.xml#實(shí)體掃描，多個(gè)package用逗號(hào)或者分號(hào)分隔typeAliasesPackage: io.renren.modules.*.entityglobal-config:#數(shù)據(jù)庫(kù)相關(guān)配置db-config:#主鍵類(lèi)型  AUTO:"數(shù)據(jù)庫(kù)ID自增", INPUT:"用戶輸入ID", ID_WORKER:"全局唯一ID (數(shù)字類(lèi)型唯一ID)", UUID:"全局唯一ID UUID";#      id-type: ASSIGN_IDid-type: AUTOlogic-delete-value: 0logic-not-delete-value: 1banner: false#原生配置configuration:map-underscore-to-camel-case: truecache-enabled: falsecall-setters-on-nulls: truejdbc-type-for-null: 'null'log-impl: org.apache.ibatis.logging.slf4j.Slf4jImplrenren:redis:open: falseshiro:redis: false# APP模塊，是通過(guò)jwt認(rèn)證的，如果要使用APP模塊，則需要修改【加密秘鑰】jwt:# 加密秘鑰secret: f4e2e52034348f86b67cde581c0f9eb5[www.renren.io]# token有效時(shí)長(zhǎng)，7天，單位秒expire: 604800header: token

  2. table-tree

效果圖

后端項(xiàng)目結(jié)構(gòu)

2.1 后端準(zhǔn)備

• 數(shù)據(jù)表創(chuàng)建

  DROP TABLE IF EXISTS `tb_unit`;
  CREATE TABLE `tb_unit`  (`id` int NOT NULL AUTO_INCREMENT COMMENT '主鍵',`unit` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_croatian_ci NULL DEFAULT NULL COMMENT '單位名稱(chēng)',`pid` int NULL DEFAULT NULL COMMENT '父id',PRIMARY KEY (`id`) USING BTREE
  ) ENGINE = InnoDB AUTO_INCREMENT = 9 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_croatian_ci COMMENT = '用戶所屬單位設(shè)置表' ROW_FORMAT = Dynamic;SET FOREIGN_KEY_CHECKS = 1;

• common模塊

  • R【通用返回類(lèi)】

    /*** 返回?cái)?shù)據(jù)** @author Mark sunlightcs@gmail.com*/
    public class R extends HashMap<String, Object> {private static final long serialVersionUID = 1L;public static String data = "data";public R() {put("code", 0);put("msg", "success");}public static R error() {return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, "未知異常，請(qǐng)聯(lián)系管理員");}public static R error(ErrorCode code) {return error(code.getErrorCode(), code.getMsg());}public static R error(String msg) {return error(HttpStatus.SC_INTERNAL_SERVER_ERROR, msg);}public static R error(int code, String msg) {R r = new R();r.put("code", code);r.put("msg", msg);return r;}public static R ok(String msg) {R r = new R();r.put("msg", msg);return r;}public static R ok(Map<String, Object> map) {R r = new R();r.putAll(map);return r;}public static R ok() {return new R();}public R put(String key, Object value) {super.put(key, value);return this;}
    }

  • ErrorCode

    public enum ErrorCode {MANAGER_NOT_FOUND(412001, "主管未設(shè)置或不存在"),MANAGER_NOT_EQUAL(412002, "主管id不一致, 維修設(shè)施信息和維修工單的負(fù)責(zé)主管不一致"),INSTALLREPAIR_STATE_NOT_CORRECT(412003, "維修信息狀態(tài)(status)錯(cuò)誤,用戶新上傳的維修信息狀態(tài)應(yīng)為0(等待維修)"),INSTALLREPAIR_ISREPAIR_NOT_CORRECT(412004, "維修信息是否需要維修字段設(shè)置錯(cuò)誤,允許的狀態(tài)有0(不需要維修),1(需要維修),2(審核中)"),STATUS_NOT_FOUND(412005, "維修信息狀態(tài)設(shè)置錯(cuò)誤,允許的狀態(tài)有0(等待維修),1(正在維修),2(維修完成)"),SMS_SEND_FAIL(412006, "短信發(fā)送錯(cuò)誤, 請(qǐng)聯(lián)系管理員"),SYSTEM_ERROR(412007, "服務(wù)器異常"),USER_NOT_FOUND(412008, "用戶不存在"),DATA_ERROR(412009, "數(shù)據(jù)異常,服務(wù)器未接收到數(shù)據(jù)或傳輸數(shù)據(jù)為空"),NOT_CONTAIN_SPECIAL_CHAR(412010, "填寫(xiě)字符串信息不應(yīng)該包含特殊字符"),PASSWORD_TO_SHORT(412011, "密碼過(guò)短,不該小于6位"),REGISTER_ERROR(412012, "注冊(cè)失敗"),PASSWORD_NOT_EQUAL(412013, "兩次密碼不一致"),USERNAME_DUPLICATE(412014, "用戶名已存在"),NOT_LOGIN(412015, "未登錄"),INVALID_SESSION_KEY(412016, "sessionKey異常,請(qǐng)重試"),DECRYPTION_ERROR(412017, "用戶信息解密異常,請(qǐng)重試"),NOT_MANAGER(412018, "您不是主管,請(qǐng)通過(guò)普通用戶方式登錄或者聯(lián)系管理員升級(jí)為主管"),SESSIONID_INVALID(412019, "sessionId有誤,服務(wù)器中不存在"),NOT_NULL_MARK(412020, "mark為空"),CODE_ERROR(412021, "code錯(cuò)誤"),APPEALS_LACK_PROPERTY(412022, "appeals缺少property作為區(qū)分三表的標(biāo)志"),APPEALS_WRONG_PROPERTY(412023, "appeals的property錯(cuò)誤"),LOGIN_TIMEOUT(412024, "登錄超時(shí)"),NO_WORKER_REPAIR(412025, "本條記錄沒(méi)有工人負(fù)責(zé),請(qǐng)先設(shè)置負(fù)責(zé)工人"),WORKER_HAD_FOUND(412026, "本條記錄已有負(fù)責(zé)的工人,請(qǐng)勿重復(fù)設(shè)置"),WORKER_NOT_EXIST(412027, "工人不存在"),VISIT_TOO_FREQUENCY(412028, "您的訪問(wèn)過(guò)于頻繁,被系統(tǒng)認(rèn)定為機(jī)器人,請(qǐng)稍后訪問(wèn)"),THINGS_DATA_LENGTH_INVALID(412029, "微信訂閱消息的thing.DATA類(lèi)型數(shù)據(jù)長(zhǎng)度不能大于20"),REAPEAT_ORDER(412030, "重復(fù)下單"),REAPEAT_RECE_ORDER(412031, "重復(fù)接單"),REAPEAT_UPLOAD(412032, "重復(fù)提交");/*** 錯(cuò)誤碼*/private int errorCode;/*** 錯(cuò)誤信息*/private String msg;ErrorCode() {}ErrorCode(int errorCode, String msg) {this.errorCode = errorCode;this.msg = msg;}public int getErrorCode() {return errorCode;}public String getMsg() {return msg;}
    }
    

• entity

  package com.fgbg.demo.entity;import com.baomidou.mybatisplus.annotation.IdType;
  import com.baomidou.mybatisplus.annotation.TableField;
  import com.baomidou.mybatisplus.annotation.TableId;
  import com.baomidou.mybatisplus.annotation.TableName;
  import java.io.Serializable;
  import java.util.List;import lombok.Data;/*** 用戶所屬單位設(shè)置表* @TableName tb_unit*/
  @TableName(value ="tb_unit")
  @Data
  public class TbUnit implements Serializable {/*** 主鍵*/@TableId(type = IdType.AUTO)private Integer id;/*** 單位名稱(chēng)*/private String unit;/*** 父id*/private Integer pid;@TableField(exist = false)private List<TbUnit> children;@TableField(exist = false)private static final long serialVersionUID = 1L;
  }
  

• controller

      @RequestMapping("/list")public R list() {List<TbUnit> list = unitService.listAll();/*----{code: 0,msg: 'xxx',data: [A, B, C, D, E, F, G, H]}---*/return R.ok().put("data", list);}
  

• service【核心邏輯】

      /*** 查詢(xún)所有的unit數(shù)據(jù), 并返回樹(shù)形結(jié)構(gòu)** @return*/@Overridepublic List<TbUnit> listAll() {// 查詢(xún)所有數(shù)據(jù)List<TbUnit> list = this.list();// 建立map映射(id->index)HashMap<Integer, Integer> map = new HashMap<>();for (int index = 0; index < list.size(); index++) {Integer id = list.get(index).getId();map.put(id, index);}// ...for (int i = 0; i < list.size(); i++) {TbUnit node = list.get(i);Integer pid = node.getPid();// 有父親if (pid != null) {// 找到pid的父親, 并把當(dāng)前節(jié)點(diǎn)(node)添加到父親節(jié)點(diǎn)的children里面Integer indexParent = map.get(pid);// 獲取父親節(jié)點(diǎn)TbUnit parent = list.get(indexParent);if (parent.getChildren() == null) {parent.setChildren(new ArrayList<>());}// 向父親節(jié)點(diǎn)的children字段添加當(dāng)前nodeparent.getChildren().add(node);}}// 過(guò)濾出一級(jí)節(jié)點(diǎn)List<TbUnit> ans = list.stream().filter(e -> e.getPid() == null).collect(Collectors.toList());return ans;}
  

• 返回的json數(shù)據(jù)

  {"msg": "success","code": 0,"data": [{"id": 9,"unit": "浙江省","pid": null,"children": [{"id": 10,"unit": "杭州市","pid": 9,"children": [{"id": 11,"unit": "濱江區(qū)","pid": 10,"children": null},{"id": 12,"unit": "余杭區(qū)","pid": 10,"children": null}]},{"id": 13,"unit": "寧波市","pid": 9,"children": null},{"id": 14,"unit": "溫州市","pid": 9,"children": null}]}]
  }
  

  2.2 前端準(zhǔn)備

• /src/api/tree.ts

  import { http } from "@/utils/http";
  import { R, baseUrlApi } from "./utils";export class UnitEntity {id: Number;unit: String;pid: Number;children: Array<UnitEntity>;
  }/** 獲取全部的unit數(shù)據(jù) */
  export const getData = () => {return http.request<R<Array<UnitEntity>>>("get", baseUrlApi("unit/list"));
  };
  

• /src/api/utils.ts

  export const baseUrlApi = (url: string) => `/api_demo/${url}`;/** 后端返回通用數(shù)據(jù)類(lèi)型 */
  export type R<T> = {code: Number;msg: String;data: T;
  };/** 同步休眠函數(shù), 參數(shù)為毫秒 */
  export const sleep = (ms: number): Promise<void> => {return new Promise(resolve => setTimeout(resolve, ms));
  };/** 分頁(yè)數(shù)據(jù)類(lèi)型 */
  export type PageUtils<T> = {/** 總記錄數(shù) */totalCount: number;/** 每頁(yè)記錄數(shù) */pageSize: number;/** 總頁(yè)數(shù) */totalPage: number;/** 當(dāng)前頁(yè)數(shù) */currPage: number;/** 列表數(shù)據(jù) */list: Array<T>;
  };export const getStoreUser = () => {const res = sessionStorage.getItem("user-info");// const res = sessionStorage.getItem("user-info");console.log(res);return JSON.parse(res);
  };
  

• /src/views/welecome/index.vue

 <script setup lang="ts">import { ref, onMounted } from "vue";import { UnitEntity, getData } from "@/api/tree.ts";defineOptions({name: "Welcome"});const tableData = ref<Array<UnitEntity>>();onMounted(() => {getData().then(res => {console.log(res);if (res.code === 0) {tableData.value = res.data;}});});</script><template><el-table:data="tableData"style="width: 100%; margin-bottom: 20px"row-key="id"borderdefault-expand-all><el-table-column prop="id" label="序號(hào)" sortable /><el-table-column prop="unit" label="單位" sortable /><el-table-columnfixed="right"header-align="center"align="center"width="150"label="操作"><template v-slot="scope"><el-buttontype="text"size="small"@click="addOrUpdateHandle(scope.row.id)">修改</el-button></template></el-table-column></el-table></template>