Spring Boot 笔记 027 添加文章分类

1.1.1 添加分类

 1.1.2 添加数据校验

//控制添加分类弹窗
const dialogVisible = ref(false)

//添加分类数据模型
const categoryModel = ref({
    categoryName: '',
    categoryAlias: ''
})
//添加分类表单校验
const rules = {
    categoryName: [
        { required: true, message: '请输入分类名称', trigger: 'blur' },
    ],
    categoryAlias: [
        { required: true, message: '请输入分类别名', trigger: 'blur' },
    ]
}

1.1.3 添加单机时间调用

添加分类

1.2.1 定义添加文章分类接口

import request from '@/utils/request.js'
import { useTokenStore } from '@/stores/token.js'
//文章分类列表查询
export const articleCategoryListService = ()=>{
    const tokenStore = useTokenStore();
    //在pinia中定义的响应式数据,都不需要.value
    // return request.get('/category',{headers:{'Authorization':tokenStore.token}})
    return request.get('/category')
}

//文章分类添加
export const articleCategoryAddService = (categoryData)=>{
    return request.post('/category',categoryData)
}

1.2.2 在article.vue中调用

    //调用接口,添加表单
    import { ElMessage } from 'element-plus'
    const addCategory = async () => {
        //调用接口
        let result = await articleCategoryAddService(categoryModel.value);
        ElMessage.success(result.msg ? result.msg : '添加成功')

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

2.1 编辑分类

2.1.1 复用弹框

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

2.1.2 回显数据

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

2.2.1 更新分类

2.2.1.1 article.js中定义接口

import request from '@/utils/request.js'
import { useTokenStore } from '@/stores/token.js'
//文章分类列表查询
export const articleCategoryListService = ()=>{
    const tokenStore = useTokenStore();
    //在pinia中定义的响应式数据,都不需要.value
    // return request.get('/category',{headers:{'Authorization':tokenStore.token}})
    return request.get('/category')
}

//文章分类添加
export const articleCategoryAddService = (categoryData)=>{
    return request.post('/category',categoryData)
}

//文章分类修改
export const articleCategoryUpdateService = (categoryData)=>{
   return  request.put('/category',categoryData)
}

2.2.1.2 articleCategory.vue中调用接口并判断用了哪个按钮

 确认 

    //编辑分类
    const updateCategory = async () => {
    //调用接口
    let result = await articleCategoryUpdateService(categoryModel.value);

    ElMessage.success(result.msg ? result.msg : '修改成功')

    //调用获取所有分类的函数
    articleCategoryList();

    //隐藏弹窗
    dialogVisible.value = false;
}

2.2.2 清空数据

//清空模型的数据
const clearData = () => {
    categoryModel.value.categoryName = '';
    categoryModel.value.categoryAlias = '';
}




 

    添加分类

3.1 删除分类

3.1.1 定义接口

import request from '@/utils/request.js'
import { useTokenStore } from '@/stores/token.js'
//文章分类列表查询
export const articleCategoryListService = ()=>{
    const tokenStore = useTokenStore();
    //在pinia中定义的响应式数据,都不需要.value
    // return request.get('/category',{headers:{'Authorization':tokenStore.token}})
    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)
}

3.1.2  定义删除弹框

```html




```

4.1 springboot+vue打包部署

springbot+vue项目的打包部署 - StarZhai - 博客园 (cnblogs.com)