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，本案例是为了方便调用，非正规操作
    @Resource
    CategoryMapper categoryMapper;

    @PostMapping
    public Result<?> save(@RequestBody Category category){
        categoryMapper.insert(category);
        return Result.success();
    }

    @PutMapping
    public 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();
    }

    @GetMapping
    public 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 = true
      request.get("/category").then(res=>{
        this.loading = false
        this.tableData = res.data
      })
    },
    add(){
      this.dialogVisible = true
      this.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