前后端开发之——文章分类管理

原文地址：前后端开发之------文章分类管理 - Pleasure的博客

下面是正文内容：

前言

上回书说到

文章管理系统之添加文章分类。就是通过点击"新建文章分类"按钮从而在服务端数据库中增加一个文章分类。

对于文章分类这个对象，增删改查属于配套的基础操作。这篇博文就主要聚焦于"增"之外的"删改查"配套操作。这里的查不是指搜索，而是指查询数据库信息用于前端显示。

前端使用语言：Vue，后端使用语言：SpringBoot

正文

前端思路分析

当用户点击界面上的按钮后跳出之前的弹窗，

修改完相关信息后点击确认触发按钮绑定的updateCategory函数向后端发送表单，

updateCategory函数在开头的script部分进行了声明是调用后端修改文章分类接口的异步函数，

updateCategory函数中的articleCategoryUpdateService服务在api文件夹下的article.js文件中进行了定义，以put的方式向后端"/category"发送id，categoryName，categoryAlias的值用来修改数据库中的记录。

"删"同理，点击按钮触发deleteCategory函数。

函数，弹窗，表单，接口都有自己对应的代码

后端思路分析

后端文件结构需要查看专栏之前的文章，这里就不重复进行申明了

数据访问层CategoryMapper.java，定义CategoryMapper函数用于向数据库添加数据，

服务层CategoryService.java中先声明接口，然后在CategoryServiceImpl.java中定义CategoryService函数通过调用ControllerMapper函数实现添加，（不要忘记在pojo文件夹下声明Category类）

请求层CategoryController.java，调用服务层的函数categoryService.add(category)通过post/get/put等不同的方式实现添加。

需要注意的是：

由于新增文章分类的时候向后端发送的json文件不携带id字段，是由数据库中的id主键自动生成，而更新和删除操作向后端发送的json文件则需要携带，所以在pojo文件夹下声明Category类时需要进行注解分组校验。

页面展示

实现代码

部分项目结构和代码需要参考专栏之前的文章

前端Vue

categorys和categoryModel的声明略

采用了element-plus的UI交互组件，官方参考文档：Overview 组件总览 | Element Plus

根据自己的需要自行拼接

api文件夹下的article.js（接口，删除操作相对于新增需要额外携带id字段作为区别）

import request from '@/utils/request.js'
export const articleCategoryListService = ()=>{
    return request.get('/category')
}
//文章分类添加
export const articleCategoryAddService = (categoryData)=>{
    return request.post('/category',categoryData)
}
//文章分类修改
export const articleCategoryUpdateService = (categoryData)=>{
    return request.put('/category',categoryData)
}
//文章分类删除
export const articleCategoryDeleteService = (id)=>{
    return request.delete('/category?id='+id)
}

声明要用到的异步函数（放在script部分）

/声明一个异步的函数
import { articleCategoryListService, articleCategoryAddService, articleCategoryUpdateService, articleCategoryDeleteService } from '@/api/article.js'
const articleCategoryList = async () => {
    let result = await articleCategoryListService();
    categorys.value = result.data;

}
articleCategoryList();

显示文章分类的函数（放在script部分）

//定义变量,控制标题的展示
const title = ref('')

const showDialog = (row) => {
    dialogVisible.value = true; title.value = '编辑分类'
    //数据拷贝
    categoryModel.value.categoryName = row.categoryName;
    categoryModel.value.categoryAlias = row.categoryAlias;
    //扩展id属性,将来需要传递给后台,完成分类的修改
    categoryModel.value.id = row.id
}

编辑文章分类的函数（放在script部分）

//编辑分类
const updateCategory = async () => {
    //调用接口
    let result = await articleCategoryUpdateService(categoryModel.value);
    ElMessage.success(result.msg ? result.msg : '编辑成功')

    //调用获取所有文章分类的函数
    articleCategoryList();
    dialogVisible.value = false;
}

删除文章分类的弹窗和函数（放在script部分）

import { ElMessageBox } from 'element-plus'
const deleteCategory = (row) => {
    ElMessageBox.confirm(
        '确认删除当前文章分类?',
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }

    )
        .then(async () => {
            //调用接口
            let result = await articleCategoryDeleteService(row.id);
            ElMessage({
                type: 'success',
                message: 'Delete completed',
            })
            articleCategoryList();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}

页面显示部分（即template部分，包括了弹窗和表格）

<template>
    <el-page-header :icon="null">
        <template #content>
            <div class="flex items-center">
                <el-avatar :size="32" class="mr-3"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                <span class="text-large font-600 mr-3"> 文章分类列表</span>
            </div>
        </template>
        <template #extra>
            <el-button type="primary" @click="dialogVisible = true; title = '新建文章分类'; clearData()">新建文章分类</el-button>
            <el-dialog v-model="dialogVisible" :title="title" width="30%">
            <el-form :model="categoryModel" :rules="rules" label-width="100px" style="padding-right: 30px">
                <el-form-item label="文章分类名" prop="categoryName">
                    <el-input v-model="categoryModel.categoryName" minlength="1" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="备注和说明" prop="categoryAlias">
                    <el-input v-model="categoryModel.categoryAlias" minlength="1" maxlength="15"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="title == '新建文章分类' ? addCategory() : updateCategory()"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
        </template>
    </el-page-header>
    <el-divider></el-divider>
    <el-table :data="categorys" style="width: 100%">
        <el-table-column label="id" prop="id" />
        <el-table-column label="分类名称" prop="categoryName"></el-table-column>
        <el-table-column label="分类别名" prop="categoryAlias"></el-table-column>
        <el-table-column label="操作" width="100">
            <template #default="{ row }">
                <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
                <el-button :icon="Delete" circle plain type="danger" @click="deleteCategory(row)"></el-button>
            </template>
        </el-table-column>
        <template #empty>
            <el-empty description="没有数据" />
        </template>
    </el-table>
</template>

后端SpringBoot

增删改查的操作上大体相同，所以就合并进行展示了。

实体类（Category.java）

package org.example.pojo;

import com.fasterxml.jackson.annotation.JsonFormat;
import jakarta.validation.constraints.NotEmpty;
import jakarta.validation.constraints.NotNull;
import jakarta.validation.groups.Default;
import lombok.Data;
import org.apache.ibatis.annotations.Update;
import java.time.LocalDateTime;

@Data
public class Category {
    @NotNull(groups = Update.class)
    private Integer id;//主键ID
    @NotEmpty/*(groups = {Add.class, Update.class})*/
    private String categoryName;//分类名称
    @NotEmpty/*(groups = {Add.class, Update.class})*/
    private String categoryAlias;//分类别名
    private Integer createUser;//创建人ID
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private LocalDateTime createTime;//创建时间
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private LocalDateTime updateTime;//更新时间

    public interface Add extends Default {

    }
    public interface Update extends Default{

    }
}

请求层（CategoryController.java）

package org.example.controller;

import org.apache.ibatis.annotations.Mapper;
import org.example.pojo.Result;
import org.example.pojo.Category;
import org.example.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/category")
public class CategoryController {
    @Autowired
    private CategoryService categoryService;
    @PostMapping
    public Result add(@RequestBody @Validated(Category.Add.class) Category category){
        categoryService.add(category);
        return Result.success();
    }

    @GetMapping
    public Result<List<Category>> list(){
        List<Category> cs = categoryService.list();
        return Result.success(cs);
    }

    @GetMapping("/detail")
    public  Result<Category> detail(Integer id){
        Category c = categoryService.findById(id);
        return Result.success(c);
    }

    @PutMapping
    public Result update(@RequestBody @Validated(Category.Update.class) Category category){
        categoryService.update(category);
        return Result.success();
    }

    @DeleteMapping
    public Result delete(Integer id){
        categoryService.deleteById(id);
        return Result.success();
    }
}

服务层（CategoryServiceImpl.java，CategoryService.java只需进行声明函数略）

package org.example.service.impl;

import org.example.mapper.CategoryMapper;
import org.example.pojo.Category;
import org.example.service.CategoryService;
import org.example.utils.ThreadLocalUtil;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.time.LocalDateTime;
import java.util.List;
import java.util.Map;

@Service
public class CategoryServiceImpl implements CategoryService {
    @Autowired
    private CategoryMapper categoryMapper;
    @Override
    public void add(Category category){
        category.setCreateTime(LocalDateTime.now());
        category.setUpdateTime(LocalDateTime.now());
        Map<String,Object> map = ThreadLocalUtil.get();
        Integer userId = (Integer) map.get("id");
        category.setCreateUser(userId);
        categoryMapper.add(category);
    }
    @Override
    public List<Category> list(){
        Map<String,Object> map = ThreadLocalUtil.get();
        Integer userId = (Integer) map.get("id");
        return categoryMapper.list(userId);
    }
    @Override
    public Category findById(Integer id) {
        Category c = categoryMapper.findById(id);
        return c;
    }
    @Override
    public void update(Category category){
        category.setUpdateTime(LocalDateTime.now());
        categoryMapper.update(category);
    }
    @Override
    public void deleteById(Integer id){
        categoryMapper.deleteById(id);
    }
}

数据访问层（CategoryMapper.java）

package org.example.mapper;
import org.apache.ibatis.annotations.*;
import org.example.pojo.Category;
import java.util.List;
@Mapper
public interface CategoryMapper {
    @Insert("insert into category(category_name,category_alias,create_user,create_time,update_time)" +
    "values (#{categoryName},#{categoryAlias},#{createUser},#{createTime},#{updateTime})")
    void add(Category category);
    @Select("select * from category where create_user = #{userId}")
    List<Category> list(Integer userId);
    @Select("select * from category where id = #{id}")
    Category findById(Integer id);
    @Update("update category set category_name=#{categoryName},category_alias=#{categoryAlias},update_time=now() where id=#{id}")
    void update(Category category);
    @Delete("delete from category where id=#{id}")
    void deleteById(Integer id);
}

尾声

一周一码，后面就是文章管理的部分了。