今天实现的功能是文章分类和文章列表。

文章分类主要实现的是能够渲染分类列表，然后可以添加、删除、修改分类信息。

实现步骤：1、根据接口请求的数据将文章分类情况渲染在表格中

2、点击添加文章按钮，弹出添加分类信息框，收集表单信息并进行存储到vuex中，调用添加文章分类接口，重新请求获取文章分类接口，关闭信息框。（添加分类）

3、点击删除按钮，调用删除分类接口，删除成功全局提示用户，重新请求获取文章分类接口。（删除分类）

4、点击修改按钮，弹出选中分类的信息框，更改信息之后，点击修改按钮，此时表单收集到的数据将会存入vuex中，并且会调用更新文章分类接口更新信息，关闭信息框并重新请求获取文章分类接口。（修改分类）

渲染数据

// 获取文章分类
export const getArticle = () => request({url: '/my/cate/list'
})

 <el-card class="box-card"><div slot="header" class="clearfix header-box"><span>文章分类</span><el-button type="primary" size="mini" @click="addCateBtnFn">添加分类</el-button></div><el-table style="width: 100%" border stripe :data="cartList"><el-table-column label="序号" width="100" type="index"></el-table-column><el-table-column label="分类名称" prop="cate_name"></el-table-column><el-table-column label="分类别名" prop="cate_alias"></el-table-column><el-table-column label="操作"><!-- 作用域插槽 scope对象：{row：行对象}--><template v-slot="scope"><el-button type="primary" size="mini" @click="updateFn(scope.row)">修改</el-button><el-button type="danger" size="mini" @click="deleteFn(scope.row)">删除</el-button></template></el-table-column></el-table></el-card>

添加文章分类

  <!-- 添加分类的对话框 -->
<el-dialog :title="isEdit ? '编辑文章分类' : '添加文章分类'" :visible.sync="addVisible" width="35%" @closed="onAddClosedFn"><!-- 添加的表单 -->
<el-form :model="addForm" :rules="addRules" ref="addRef" label-width="80px"><el-form-item label="分类名称" prop="cate_name"><el-input v-model="addForm.cate_name" minlength="1" maxlength="10"></el-input></el-form-item><el-form-item label="分类别名" prop="cate_alias"><el-input v-model="addForm.cate_alias" minlength="1" maxlength="15"></el-input></el-form-item>
</el-form><span slot="footer" class="dialog-footer"><el-button size="mini" @click="cancelFn">取 消</el-button><el-button size="mini" type="primary" @click="addFn">{{this.isEdit ? '修改' : '添加'}}</el-button></span>
</el-dialog>

data () {return {cartList: [],addVisible: false,addForm: { // 添加表单的数据对象cate_name: '',cate_alias: ''},addRules: { // 添加表单的验证规则对象cate_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' },{ pattern: /^\S{1,10}$/, message: '分类名必须是1-10位的非空字符', trigger: 'blur' }],cate_alias: [{ required: true, message: '请输入分类别名', trigger: 'blur' },{ pattern: /^[a-zA-Z0-9]{1,15}$/, message: '分类别名必须是1-15位的字母数字', trigger: 'blur' }]},

// 增加文章分类
export const addArticleCate = ({ cate_name, cate_alias }) => request({url: '/my/cate/add',data: {cate_name,cate_alias},method: 'POST'
})

   // 对话框内-添加按钮-点击事件async addFn () {// 表单预校验this.$refs.addRef.validate(async valid => {if (valid) {// 判断当前是新增还是编辑if (this.isEdit) {// 编辑状态// 调用接口传递数据给后台const { data: res } = await updateArticleCate({ id: this.editId, ...this.addForm })if (res.code !== 0) return this.$message.error('更新分类失败！')this.$message.success('更新分类成功！')} else {// 新增// 调用接口传递数据给后台const { data: res } = await addArticleCate(this.addForm)if (res.code !== 0) return this.$message.error('添加分类失败！')this.$message.success('添加分类成功！')}// 重新请求列表数据this.getArticles()// 关闭对话框this.addVisible = false} else {return false}})}

删除文章分类

 // 删除事件async deleteFn (obj) {const { data: res } = await deleteArticleCate(obj.id)console.log(res)if (res.code === 0) this.$message.success('删除成功')if (res.code !== 0) return this.$message.warning('删除失败')this.getArticles()}

// 删除文章分类
export const deleteArticleCate = (id) => request({url: '/my/cate/del',params: {id},method: 'DELETE'
})

修改文章分类

 updateFn (obj) {this.editId = obj.id // 保存要编辑的文章分类IDthis.isEdit = true // 设置编辑状态this.addVisible = true // 让对话框显示// 设置数据回显this.$nextTick(() => {// 先让对话框出现, 它绑定空值的对象, 才能resetFields清空用初始空值this.addForm.cate_name = obj.cate_namethis.addForm.cate_alias = obj.cate_alias})},

this.$refs.addRef.validate(async valid => {if (valid) {// 判断当前是新增还是编辑if (this.isEdit) {// 编辑状态// 调用接口传递数据给后台const { data: res } = await updateArticleCate({ id: this.editId, ...this.addForm })if (res.code !== 0) return this.$message.error('更新分类失败！')this.$message.success('更新分类成功！')} else {// 新增// 调用接口传递数据给后台const { data: res } = await addArticleCate(this.addForm)if (res.code !== 0) return this.$message.error('添加分类失败！')this.$message.success('添加分类成功！')}// 重新请求列表数据this.getArticles()// 关闭对话框this.addVisible = false} else {return false}})

踩坑点：

el-form和el-dialog和数据回显同时用，有bug

复现：第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值

原因：点击修改后，关闭对话框的时候，置空失效

具体分析：rest Fields出现问题，dialog的内容是懒渲染，在第一次被打开之前，传入的默认slot不会被渲染到DOM上，第二次后续只是做css隐藏和显示

解决方案：让数据回显慢点执行用NextTick（）

文章管理平台PC端（文章分类）相关推荐

文章管理平台PC端（个人中心+侧面菜单）
在之前我们实现了注册登录功能,接下来就是管理平台侧面菜单栏以及平台首页的实现. 在实现功能之前,还是需要先整理一下实现的思路. 个人中心:目标(将用户信息存储到vuex中) 实现步骤:1.定义一个接口 ...
企业办公oa系统医药OA办公后台管理会议管理用户管理物料管理活动管理/Axure医药内部管理平台/web端后台管理系统原型/医药OA系统/权限管理
作品介绍:企业办公oa系统&医药OA办公后台管理&会议管理&用户管理&物料管理&活动管理/Axure医药内部管理平台/web端后台管理系统原型/医药OA系统/权 ...
微信开放平台PC端扫码登录
最近公司给我安排一个微信登录的功能,需求是这样的: 1.登录授权点击二维码图标后,登录界面切换为如下样式(二维码),微信扫描二维码并授权,即可成功登录: 若当前账号未绑定微信账号,扫描后提示& ...
VSB9网站群管理平台页面添加文章列表方法
突然发现维护的网站还有一个是VSB9搭建的,这个系统的模版的思路和动易差别非常大,搞了半天才搞明白怎么添加文章列表. 首先,后台在firefox下出错,我换成IE正常了. 1.登录后台,进入" ...
Qt编写物联网管理平台46-云端数据同步
一.前言在上一篇文章说的采集数据转发的基础上,针对方案一还做了云端数据同步功能,满足各式各样的用户需求.云端数据库同步,相当于把本地采集到的数据实时存储到云端,至于这些记录到了云端后什么用途,客户端 ...
PHP语言：微信开放平台PC端扫码登录
需求: 微信扫码时每次需要弹窗确认效果. 微信开放平台 :创建网站应用,绑定公众号,用于打通公众号用户数据. 注意域名填写规范,不带协议.eg:www.xxx-test.com 页面嵌套扫码登录二维码 ...
ECShop后台详解-模块管理、基本信息设置、商品展示、促销管理、订单管理、文章管理、报表统计、数据备份与还原
在ECShop后台可进行商品管理.促销管理.订单管理.广告管理.报表统计.文章管理.会员管理.模板管理.短信管理.数据库管理等模块的设置. 模板管理一个好的网店模板,首先会给人留下深刻的视觉印象.网 ...
使用IntelliJ IDEA开发SpringMVC网站（五）博客文章管理
原文:使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理摘要通过对博客文章的管理,实现外键操作. 目录[-] 八.博客文章管理 1.查看文章 2.添加博客 3 ...
校园人员与车辆综合管理平台之服务端
目录校园人员与车辆综合管理平台服务端模块设计与实现 4 一.项目立项 4 (一)项目提出 4 (二)开发团队组成和计划时间 5 (三)风险评估和规避 5 二.执行计划 5 (一)项目开发计划表 5 ...

文章管理平台PC端（文章分类）

渲染数据

添加文章分类

删除文章分类

修改文章分类

踩坑点：

el-form和el-dialog和数据回显同时用，有bug

文章管理平台PC端（文章分类）相关推荐

最新文章

热门文章