Spring Boot 笔记 027 添加文章分类

机器人迈克猫2024-02-23 15:44

1.1.1 添加分类

html 复制代码 
<!-- 添加分类弹窗 -->
<el-dialog v-model="dialogVisible" 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"> 确认 </el-button>
        </span>
    </template>
</el-dialog>

1.1.2 添加数据校验

javascript 复制代码 
//控制添加分类弹窗
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 添加单机时间调用

html 复制代码 
<el-button type="primary" @click="dialogVisible = true">添加分类</el-button>

1.2.1 定义添加文章分类接口

javascript 复制代码 
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中调用

javascript 复制代码 
    //调用接口,添加表单
    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 复用弹框

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





<el-dialog v-model="dialogVisible" :title="title" width="30%">




<el-button :icon="Edit" circle plain type="primary" @click="dialogVisible=true, title='编辑分类'"></el-button>

2.1.2 回显数据

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




<template #default="{ row }">
    <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
    <el-button :icon="Delete" circle plain type="danger"></el-button>
</template>

2.2.1 更新分类

2.2.1.1 article.js中定义接口

javascript 复制代码 
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中调用接口并判断用了哪个按钮

html 复制代码 
<el-button type="primary" @click="title == '添加分类' ? addCategory() : updateCategory()"> 确认 </el-button>
java 复制代码 
    //编辑分类
    const updateCategory = async () => {
    //调用接口
    let result = await articleCategoryUpdateService(categoryModel.value);

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

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

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

2.2.2 清空数据

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




 <div class="extra">
    <el-button type="primary" @click="dialogVisible = true, title='添加分类';clearData()">添加分类</el-button>
</div>

3.1 删除分类

3.1.1 定义接口

javascript 复制代码 
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 复制代码 
```html
<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ref } from 'vue'
const categorys = ref([
    {
        "id": 3,
        "categoryName": "美食",
        "categoryAlias": "my",
        "createTime": "2023-09-02 12:06:59",
        "updateTime": "2023-09-02 12:06:59"
    },
    {
        "id": 4,
        "categoryName": "娱乐",
        "categoryAlias": "yl",
        "createTime": "2023-09-02 12:08:16",
        "updateTime": "2023-09-02 12:08:16"
    },
    {
        "id": 5,
        "categoryName": "军事",
        "categoryAlias": "js",
        "createTime": "2023-09-02 12:08:33",
        "updateTime": "2023-09-02 12:08:33"
    }
])

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

    }
    articleCategoryList();

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

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

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

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

    //定义变量,控制标题的展示
    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
    }

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

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

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

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

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

//删除分类
import {ElMessageBox} from 'element-plus'
const deleteCategory = (row) => {
    //提示用户  确认框

    ElMessageBox.confirm(
        '你确认要删除该分类信息吗?',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //调用接口
            let result = await articleCategoryDeleteService(row.id);
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            //刷新列表
            articleCategoryList();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '用户取消了删除',
            })
        })
}


</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>文章分类</span>
                <div class="extra">
                    <el-button type="primary" @click="dialogVisible = true, title='添加分类';clearData()">添加分类</el-button>
                </div>
            </div>
        </template>
        <el-table :data="categorys" style="width: 100%">
            <el-table-column label="序号" width="100" type="index"> </el-table-column>
            <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>
        <!-- 添加分类弹窗 -->
        <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>
    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>
```

4.1 springboot+vue打包部署

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

相关推荐
做cv的小昊2 分钟前
大语言模型系统：【CMU 11-868】课程学习笔记02——GPU编程基础1（GPU Programming Basics 1）
人工智能·笔记·学习·语言模型·llm·transformer·agent
HalvmånEver5 小时前
7.高并发内存池大页内存申请释放以及使用定长内存池脱离new
java·spring boot·spring
凤山老林5 小时前
SpringBoot 使用 H2 文本数据库构建轻量级应用
java·数据库·spring boot·后端
蓝莓味的口香糖6 小时前
【vue3】组件的批量全局注册
前端·javascript·vue.js
dreamread6 小时前
【SpringBoot整合系列】SpringBoot3.x整合Swagger
java·spring boot·后端
把你毕设抢过来6 小时前
基于Spring Boot的社区智慧养老监护管理平台（源码+文档）
数据库·spring boot·后端
独泪了无痕7 小时前
自动导入 AutoImport：告别手动引入依赖，优化Vue3开发体验
前端·vue.js·typescript
日更嵌入式的打工仔7 小时前
个人笔记3
笔记
闻哥7 小时前
深入Redis的RDB和AOF两种持久化方式以及AOF重写机制的分析
java·数据库·spring boot·redis·spring·缓存·面试
天外来鹿8 小时前
Map/Set/WeakMap/WeakSet学习笔记
前端·javascript·笔记·学习
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南05OpenClaw 飞书机器人不回复消息？3 小时踩坑总结06OpenClaw macOS 完整安装与本地模型配置教程（实战版）07得物前端部门，没了08OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录09Window 10部署openclaw报错node.exe : npm error code 12810OpenClaw 接入 QQ Bot 完整实践指南