【第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 : '删除失败,请稍后重试!')}
}

总结

回到顶部

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/856583.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

含铬废水有哪些危害?含铬废水怎么处理呢?

铬化物可以通过消化道、呼吸道、皮肤和粘膜侵人人体&#xff0c;主要积聚在肝、肾、内分泌系统和肺部。毒理作用是影响体内物质氧化、还原和水解过程&#xff0c;与核酸、核蛋白结合影响组织中的磷含量。铬化合物具有致癌作用。 铬化合物以蒸汽和粉尘的方式进入人体组织中&…

低版本火狐浏览器报错:class is a reserved identifier

低版本火狐浏览器报错&#xff1a;class is a reserved identifier 原因&#xff1a;react-dnd&#xff0c;dnd-core 等node包的相关依赖有过更新&#xff0c;使得在低版本火狐浏览器中不支持 class 解决方法&#xff1a;在使用webpack打包构建时&#xff0c;编译排除node_modu…

javaweb中ServletContext的使用

一.ServletContext 它一个为整个 web 应用程序提供视图的接口&#xff0c;允许 servlet 之间共享信息。这是一个在 web 应用程序范围内被共享的对象&#xff0c;任何在这个应用中的 servlet 都可以访问它&#xff0c;常用于不同servlet之间的数据共享。 二.作用与功能 …

每日复盘-202406020

今日关注&#xff1a; 20240620 六日涨幅最大: ------1--------300462--------- 华铭智能 五日涨幅最大: ------1--------300462--------- 华铭智能 四日涨幅最大: ------1--------300462--------- 华铭智能 三日涨幅最大: ------1--------300462--------- 华铭智能 二日涨幅最…

基于DE2-115平台的VGA显示实验

一.任务需求 深入了解VGA协议&#xff0c;理解不同显示模式下的VGA控制时序参数&#xff08;行频、场频、水平/垂直同步时钟周期、显示后沿/前沿等概念和计算方式&#xff09;&#xff1b;通过Verilog编程&#xff0c;在至少2种显示模式下&#xff08;64048060Hz,102476875Hz&…

惠海H4120 降压IC 40V 36V 30V降压5V3A 9V3A 12V3A 动态响应优异,低纹波

H4120是一款功能优良的异步降压型DC-DC转换器。它的主要特性和优势如下&#xff1a; 产品特性&#xff1a; 内置40V耐压MOS&#xff1a;内置的高耐压MOS使得H4120能够处理更多种的输入电压范围&#xff0c;增强了其适用性和可靠性。 宽输入范围&#xff1a;输入电压可在5V至…

基于SpringBoot+Vue电影推荐系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还…

MySQL 保姆级教程(八):创建计算字段

第 10 章 创建计算字段 10.1 计算字段 直接从数据库中检索出转换、计算或格式化过的数据 10.2 拼接字段 拼接: 将值联结到一起构成单个值 ​ 输入: SELECT CONCAT(database_name, date:,last_update) FROM innodb_index_stats ORDER BY database_name; 输出: ------------…

dns域名使用配置

域名解析配置到dns服务器10.243.xx.105上 1.systemctl status dhcpd 2.vim /etc/named.conf zone "aws.com." { type master; file "aws.com"; }; 3./var/named/chos.com $TTL 300 IN SOA 10.243.xx.105. nobody.…

安装Xshell和Xftp后,打开程序下无法使用,要继续使用此程序,您必须应用最新的更新或使用新版本。

之前我遇到这种情况的时候&#xff0c;修改了nslicense.dll&#xff0c;结果这次重新下载结果把修改代码给忘了&#xff08;因为我也不会这个&#xff09;&#xff0c;于是我用了最直接的办法去官网找最新版本下载&#xff1a;xshell/xftp官网 后面直接点下载&#xff0c;然后开…

C语言结构体给结构体赋值

C语言可以把一个结构体变量直接赋给另一个结构体变量&#xff0c;各成员的值会自己赋过去&#xff1b; struct Person {char name[20];int age;int high; }; ...... void CTest1View::OnDraw(CDC* pDC) {CTest1Doc* pDoc GetDocument();ASSERT_VALID(pDoc);// TODO: add draw…

Linux系统:线程概念 线程控制

Linux系统&#xff1a;线程概念 & 线程控制 线程概念轻量级进程 LWP页表 线程控制POSIX 线程库 - ptherad线程创建pthread_createpthread_self 线程退出pthread_exitpthread_cancelpthread_joinpthread_detach 线程架构线程与地址空间线程与pthread动态库 线程的优缺点 线程…

如何恢复苹果手机数据?盘点3个实用恢复方法!

苹果手机数据丢失固然是一件很痛心的事&#xff0c;但是在这个信息发达的网络时代&#xff0c;想要恢复数据其实也并不复杂。只要用对方法&#xff0c;是有很大概率能够恢复的。那么针对iPhone用户来说&#xff0c;苹果数据恢复的方法是什么呢&#xff1f;下来让我们一起来看看…

go sync包(一) 互斥锁(一)

Sync包 sync包是go提供的用于并发控制的方法&#xff0c;类似于Java的JUC包。 &#xff08;图片来自《go设计与实现》&#xff09; 互斥锁 Mutex Go 语言的 sync.Mutex 由两个字段 state 和 sema 组成。 state 表示当前互斥锁的状态。sema 是用于控制锁状态的信号量。 ty…

java读取wps嵌入式图片思路

这个只写了思路具体代码在文章最后&#xff0c;不想了解得直接去拿代码 了解Excel数据结构 Excel 文件格式后缀xls,xlsx 其实是一个压缩文件&#xff0c;是由多个文件夹以及xml 文件组合为一个文件&#xff0c;xml文件记录了Excel得内容以及样式等信息。加入在桌面新建一个xls…

psutil 所有属性和方法

psutil 是一个 Python 库&#xff0c;用于获取系统和进程的运行信息&#xff0c;包括 CPU、内存、磁盘和网络等。以下是 psutil 库的一些主要属性和方法&#xff0c;这些信息来源于搜索结果中提供的资料2347910&#xff1a; CPU 相关 psutil.cpu_times(): 获取 CPU 的完整信息…

typescript中使用类并且声明成员变量后,运行会报 Unexpected token = 错误

typescript中使用类并且声明成员变量后&#xff0c;在UC浏览器中运行会报 Unexpected token 错误 处理方式 lib中的esnext改成ES2015&#xff0c;增加target:ES2015 {"extends": "vue/tsconfig/tsconfig.json","compilerOptions": {"ta…

一个小题目的困惑

网友发了一个题&#xff0c;还给了段录像。 libc-2.35下有UAF有管理块&#xff0c;无edit 有调用exit 先说说题&#xff1a; 有管理块0x18&#xff0c; {size,inuse,ptr} &#xff0c;free时不清指针。这样建两个块再建0x18块&#xff0c;就可以控制一个块的管理块&#xff…

pg修炼之道学习笔记

一、数据库逻辑结构介绍 1、一个pg数据库服务下有多个db&#xff08;多个数据库&#xff09;&#xff0c;当应用连接到一个数据库时&#xff0c;一般只能访问这个数据库中的数据&#xff0c;而不能访问其他数据库的内容&#xff08;限制&#xff09; 2、表索引&#xff1a;一…

【PL理论】(34) 类型系统:不完备性 | 为什么推导树推导失败? | 实现类型系统 | 调整到类型系统 | 思考:强制程序员写类型还是自动推断类型?

&#x1f4ac; 写在前面&#xff1a;回顾我们的目标是为 F- 语言设计一个完备但不完全的类型系统&#xff0c;本章我们探讨的主题是类型系统的完备性。 目录 0x00 类型系统的不完备性 0x01 为什么推导树推导失败&#xff1f; 0x02 实现类型系统 0x03 调整到类型系统 0x04…