【第22章】Vue实战篇之文章分类

2024-06-21 06:04
文章标签 javascript 分类 vue 文章 frontend 22 实战篇

本文主要是介绍【第22章】Vue实战篇之文章分类，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 前言
  • 一、文章分类列表查询
    • 1. 界面
    • 2. 脚本
    • 3. 展示
  • 二、文章分类添加
    • 1. 界面
    • 2. 接口脚本
    • 3. 点击事件
  • 三、文章分类编辑
    • 1. 界面
    • 2. 接口脚本
    • 3. 点击事件
  • 四、文章分类删除
    • 1. 界面
    • 2. 接口脚本
    • 3. 点击事件
  • 总结

前言

这里来学习文章分类相关界面和接口的调用(增删改查)。

一、文章分类列表查询

1. 界面

<script setup>
import {Edit,Delete
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import articleCategoryListService from '@/api/article.js'const categorys = ref([])
const articleCategoryList= async () => {let result=await articleCategoryListService();if(result.code==0){categorys.value=result.data}
}
articleCategoryList()
</script>
<template><el-card class="page-container"><template #header><div class="header"><span>文章分类</span><div class="extra"><el-button type="primary">添加分类</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" ></el-button><el-button :icon="Delete" circle plain type="danger"></el-button></template></el-table-column><template #empty><el-empty description="没有数据" /></template></el-table></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>

2. 脚本

import request from '@/utils/request.js'const articleCategoryListService = ()=>{return request.get('/article/category')
}
export default articleCategoryListService

3. 展示

在这里插入图片描述

二、文章分类添加

1. 界面

<!-- 添加分类弹窗 --><el-dialog v-model="dialogVisible" title="添加文章分类" width="30%"><el-form ref="addFormRef" :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="addCategory"> 确认 </el-button></span></template></el-dialog>

2. 接口脚本

export const addCategoryService = (categoryData)=>{return request.post('/article/category',categoryData)
}

3. 点击事件

//添加文章分类
//控制添加分类弹窗
const dialogVisible = ref(false)//添加分类数据模型
const categoryModel = ref({categoryName: '',categoryAlias: ''
})
//添加分类表单校验
const rules = {categoryName: [{ required: true, message: '请输入分类名称', trigger: 'blur' },],categoryAlias: [{ required: true, message: '请输入分类别名', trigger: 'blur' },]
}import { addCategoryService } from '@/api/article.js'const addFormRef = ref(null)
const addCategory = () => {if (!addFormRef) returnaddFormRef.value.validate(async(valid, fields) => {if (valid) {const result = await addCategoryService(categoryModel.value)const message = result.messageif (result.code == 0) {ElMessage.success(message ? message : '添加成功!')articleCategoryList()dialogVisible.value = falsecategoryModel.value = ''} else {ElMessage.error(message ? message : '添加失败,请稍后重试!')}}})
}
const resetFields=(addFormRef)=>{if(!addFormRef)returnaddFormRef.resetFields()
}

三、文章分类编辑

1. 界面

这里和新增使用同一套表单和校验,我们用变量控制显示不同的文字和触发不同的事件

<!-- 添加/编辑分类弹窗 --><el-dialog v-model="dialogVisible" :title="title" width="30%"><el-form ref="categoryFormRef" :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="index === 0 ? addCategory() : editCategory()"> 确认 </el-button></span></template></el-dialog>

2. 接口脚本

export const editCategoryService = (categoryData)=>{return request.put('/article/category',categoryData)
}

3. 点击事件

import { addCategoryService, editCategoryService } from '@/api/article.js'const resetFields = (categoryFormRef) => {if (!categoryFormRef) returncategoryFormRef.resetFields()categoryModel.value = {categoryName: '',categoryAlias: ''}
}
const titleArray = ref(['添加文章分类', '编辑文章分类'])
const index = ref(0)
const addCategoryClick = (categoryFormRef) => {index.value = 0dialogVisible.value = true;resetFields(categoryFormRef)title.value = titleArray.value[index.value]
}
//编辑文章分类
const title = ref('')
const editCategoryClick = (row) => {resetFields(categoryFormRef.value)index.value = 1title.value = titleArray.value[index.value]dialogVisible.value = trueconsole.log(row);categoryModel.value.id = row.idcategoryModel.value.categoryName = row.categoryNamecategoryModel.value.categoryAlias = row.categoryAlias
}
const editCategory = () => {if (!categoryFormRef) returncategoryFormRef.value.validate(async (valid, fields) => {if (valid) {const result = await editCategoryService(categoryModel.value)const message = result.messageif (result.code == 0) {ElMessage.success(message ? message : '更新成功!')articleCategoryList()dialogVisible.value = falseresetFields(categoryFormRef.value)} else {ElMessage.error(message ? message : '更新失败,请稍后重试!')}}})
}

四、文章分类删除

1. 界面

<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="editCategoryClick(row)"></el-button><el-popconfirm title="确认删除吗?" @confirm="deleteCategoryClick(row)"><template #reference><el-button :icon="Delete" circle plain type="danger"></el-button></template></el-popconfirm></template></el-table-column><template #empty><el-empty description="没有数据" /></template>
</el-table>

2. 接口脚本

export const deleteCategoryService = (categoryData)=>{return request.delete('/article/category?id='+categoryData)// var params = new URLSearchParams()// params.append('id', categoryData)// return request.delete('/article/category',{params:params})
}

3. 点击事件

import { addCategoryService, editCategoryService, deleteCategoryService } from '@/api/article.js'//删除文章分类
const deleteCategoryClick = async (row) => {const result = await deleteCategoryService(row.id)const message = result.messageif (result.code == 0) {ElMessage.success(message ? message : '删除成功!')articleCategoryList()} else {ElMessage.error(message ? message : '删除失败,请稍后重试!')}
}

总结

回到顶部

这篇关于【第22章】Vue实战篇之文章分类的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1080392。

相关文章

HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
CSS3中的字体及相关属性详解

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》：本文主要介绍了CSS3中的字体及相关属性，详细内容请阅读本文，希望能对你有所帮助... 字体网页字体的三个来源：用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字
阅读更多...
html 滚动条滚动过快会留下边框线的解决方案

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》：本文主要介绍了html滚动条滚动过快会留下边框线的解决方案，解决方法很简单，详细内容请阅读本文，希望能对你有所帮助... 滚动条滚动过快时，会留下边框线但其实大部分时候是这样的，没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行
阅读更多...
使用vscode搭建pywebview集成vue项目实践

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》：本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv
阅读更多...
使用Python和Tkinter实现html标签去除工具

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行
阅读更多...
CSS 样式表的四种应用方式及css注释的应用小结

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》：本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结，本文通过实例代码给大家介绍的非常详细，详细内容请阅读本文，希望能对你有所帮助... 一、外部 css（推荐方式）定义：将 CSS 代码保存为独立的 .css 文件，通过 <link> 标签
阅读更多...
使用Vue-ECharts实现数据可视化图表功能

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts？1. 基于 ECharts，功能强大2. 更符合 Vue
阅读更多...
Vue中插槽slot的使用示例详解

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》：本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2