springboot+vue前后端分离项目-项目搭建13-树形表

效果

一、后端

1. 新建表category

 2.新建entity，com/example/demo/entity/Category.java

3.新建Mapper，com/example/demo/mapper/CategoryMapper.java

 4.新建Controller，com/example/demo/controller/CategoryController.java

主要代码逻辑如下， 封装成List<Category>，前端结合element plus就能显示，这里主要是有一段递归逻辑

package com.example.demo.controller;import com.example.demo.common.Result;
import com.example.demo.entity.Category;
import com.example.demo.mapper.CategoryMapper;
import jakarta.annotation.Resource;
import org.springframework.web.bind.annotation.*;import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping("/category")
public class CategoryController {//正常Mapper是在Service里引用，Controllerl里引用Service，本案例是为了方便调用，非正规操作
    @ResourceCategoryMapper categoryMapper;@PostMappingpublic Result<?> save(@RequestBody Category category){categoryMapper.insert(category);return Result.success();}@PutMappingpublic Result<?> update(@RequestBody Category category){categoryMapper.updateById(category);return Result.success();}@DeleteMapping("/{id}")public Result<?> delete(@PathVariable Long id){categoryMapper.deleteById(id);return Result.success();}@GetMappingpublic Result<?> getAll(){List<Category> allCategories = categoryMapper.selectList(null);return Result.success(loopQuery(null,allCategories));}private List<Category> loopQuery(Integer pid, List<Category> allCategories) {List<Category> categoryList = new ArrayList<>();for (Category category : allCategories) {if (pid == null){if (category.getPid() == null){categoryList.add(category);category.setChildren(loopQuery(category.getId(), allCategories));}} else if (pid.equals(category.getPid())) {categoryList.add(category);category.setChildren(loopQuery(category.getId(), allCategories));}}return categoryList;}
}

二、前端

1.新建vue/src/views/Category.vue

<template><div style="width: 100%; padding: 10px"><div style="margin: 10px 0"><el-button type="primary" @click="add()" v-if="user.role === 1">新增</el-button><!--管理员才有新增按钮--></div><el-table v-loading="loading" :data="tableData" border stripe style="width: 100%"row-key="id" default-expand-all><el-table-column prop="name" label="名称" /><el-table-column label="操作"><template #default="scope"><el-button link type="primary" size="small" @click="handleEdit(scope.row)" v-if="user.role === 1">编辑</el-button><el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row.id)" v-if="user.role === 1"><template #reference><el-button link type="danger" size="small">删除</el-button></template></el-popconfirm></template></el-table-column></el-table><el-dialog v-model="dialogVisible" title="分类编辑" width="30%"><el-form label-width="auto" :model="form" style="width: 600px"><el-form-item label="名称"><el-input v-model="form.name" style="width: 80%"></el-input></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></template></el-dialog></div>
</template><script>import request from "@/utils/request";export default {name: 'Category',components: {},data() {return {user: {},loading: false,form: {},dialogVisible: false,tableData: []}},created() {let userStr = sessionStorage.getItem("user") || {}this.user = JSON.parse(userStr)// 请求服务器，确认当前登录用户的合法性request.get("/user/" + this.user.id).then(res => {if (res.data === '0'){this.user = res.data}})this.load()},methods: {load() {this.loading = truerequest.get("/category").then(res=>{this.loading = falsethis.tableData = res.data})},add(){this.dialogVisible = truethis.form = {}},save(){if(this.form.id){  //更新request.put("/category", this.form).then(res => {console.log(res)if(res.code === '0'){this.$message({type: "success",message: "更新成功"})}else {this.$message({type: "error",message: "res.msg"})}this.load()      //更新后刷新表格数据this.dialogVisible = false   //关闭弹窗
        })} else {           //新增request.post("/category", this.form).then(res => {console.log(res)if(res.code === '0'){this.$message({type: "success",message: "新增成功"})}else {this.$message({type: "error",message: "res.msg"})}this.load()      //更新后刷新表格数据this.dialogVisible = false   //关闭弹窗
        })}},handleEdit(row) {this.form = JSON.parse(JSON.stringify(row))this.dialogVisible = true},handleDelete(id) {console.log(id)request.delete("/category/" + id).then(res => {if(res.code === '0'){this.$message({type: "success",message: "删除成功"})}else {this.$message({type: "error",message: "res.msg"})}this.load()      //删除后刷新表格数据
      })}}
}</script>

2.改造vue/src/components/Aside.vue 和 vue/src/router/index.js

--以上查询、编辑、删除正常

--新增功能暂时没做关联新增pid