01文章分类-页面组件和路由
目标
完成文章分类页面的创建和路由设置
讲解
新建 src/views/article/artCate.vue组件, ==直接复制标签==
<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix header-box">
<span>文章分类</span>
<el-button type="primary" size="mini">添加分类</el-button>
</div>
xxx
</el-card>
</div>
</template>
<script>
export default {
name: 'ArtCate'
}
</script>
<style lang="less" scoped>
.header-box {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>在 src/router/index.js路由模块中，导入文章分类的路由组件，并声明对应的子路由规则：
{
path: 'art-cate', // 文章分类
component: () => import('@/views/article/artCate')
}小结
为何path需要规定的值?
答案
02文章分类-铺设分类
目标
在接口文档找到请求分类数据, 并封装接口方法调用拿到数据
讲解
在src/api/index.js封装获取文章分类的接口方法
/**
* 获取-文章分类
* @returns Promise对象
*/
export const getArtCateListAPI = () => {
return request({
url: '/my/cate/list'
})
}在views/article/artCate.vue在 data 中定义文章分类的数据项
data() {
return {
// 文章的分类列表
cateList: []
}
},在 methods 中定义获取文章分类数据的函数：
created () {
// 获取文章分类
this.initCateListFn()
},
methods: {
// 获取文章分类
async initCateListFn () {
const res = await getArtCateListAPI()
this.cateList = res.data.data
}
}准备表格标签, ==直接复制==
<el-table style="width: 100%" border stripe>
<el-table-column label="序号" width="100"></el-table-column>
<el-table-column label="分类名称"></el-table-column>
<el-table-column label="分类别名"></el-table-column>
<el-table-column label="操作">
<el-button type="primary" size="mini">修改</el-button>
<el-button type="danger" size="mini">删除</el-button>
</el-table-column>
</el-table>根据el-table组件文档, 设置数据铺设, ==不可复制==
<el-table style="width: 100%" :data="cateList" border stripe>
<el-table-column
label="序号"
type="index"
width="100"
></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="操作">
<el-button type="primary" size="mini">修改</el-button>
<el-button type="danger" size="mini">删除</el-button>
</el-table-column>
</el-table>小结
为何res后面需要点2个data?
答案
03文章分类-添加分类-对话框组件
目标
使用对话框+表单, 来准备添加分类的标签
讲解
查找elementUI文档, 找到和需求类似的对话框, 复制标签, 使用在
views/article/artCate.vue
在el-card隔壁下面
定义addVisible变量, 默认为false(不出现)
data () {
return {
// ...其他
addVisible: false // 添加分类-对话框是否显示
}
}在el-card里给按钮添加分类, 绑定点击事件, 让对话框出现
<el-button type="primary" size="mini" @click="addVisible = true">添加分类</el-button>点击取消和添加, 让dialog对话框关闭
小结
el-dialog是什么组件?
答案
文章分类-添加分类-表单
目标
掌握 el-dialog 结合 el-form 组件的
需求1: 在添加分类的对话框上, 添加表单并定义校验规则
需求2: 并在对话框关闭的时候, 重置表单
讲解
在 el-dialog 中渲染添加分类的表单：
<!-- 添加的表单 -->
<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>在 data中声明 addForm和 addRules
如下：
data() {
return {
// ...其他
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' }
]
}
}
}监听对话框的 closed事件
定义事件处理函数如下
onAddClosed() {
this.$refs.addRef.resetFields()
}小结
如何知道el-dialog对话框关闭了?
答案
3文章分类-添加分类-保存
目标
调用接口, 传递分类名字和别名保存
讲解
翻阅接口文档, 封装接口方法在src/api/index.js中
/**
* 增加-文章分类
* @param {*} param0 { cate_name: 文章分类名字, cate_alias: 文章分类别名 }
* @returns Promise对象
*/
export const addArtCateAPI = ({ cate_name, cate_alias }) => {
return request({
url: '/my/cate/add',
method: 'POST',
data: {
cate_name,
cate_alias
}
})
}在el-dialog弹窗里面的表单, 给添加按钮的点击事件中, 编写代码, 调用接口保存并提示
async addFn () {
// 表单预校验
this.$refs.addRef.validate(async valid => {
if (valid) {
// 调用接口传递数据给后台
const { data: res } = await addArtCateAPI(this.addForm)
if (res.code !== 0) return this.$message.error('添加分类失败！')
this.$message.success('添加分类成功！')
// 重新请求列表数据
this.initCateListFn()
// 关闭对话框
this.addVisible = false
} else {
return false
}
})
}4 修改
1 文章分类-修改分类-回显
目标
修改分类和新增分类, 使用同一个el-dialog对话框
讲解
在
views/article/artCate.vue
, 给表格里修改按钮绑定点击事件, 传递要修改的文章分类ID
<el-table-column label="操作">
<template v-slot="scope">
<el-button type="primary" size="mini" @click="updateFn(scope.row)">修改</el-button>
<el-button type="danger" size="mini">删除</el-button>
</template>
</el-table-column>准备变量, 保存修改状态和要修改的文章分类id
data () {
return {
// ...其他
editId: '', // 要修改的文章id
isEdit: false // 保存编辑状态(false新增, true编辑)
}
}在事件方法中, 修改变量的状态
// 修改-按钮点击事件
updateFn (obj) {
this.editId = obj.id // 保存要编辑的文章分类ID
this.isEdit = true // 设置编辑状态
this.addVisible = true // 让对话框显示
// 设置数据回显
this.$nextTick(() => {
// 先让对话框出现, 它绑定空值的对象, 才能resetFields清空用初始空值
this.addForm.cate_name = obj.cate_name
this.addForm.cate_alias = obj.cate_alias
})
}在到最上面, 添加分类按钮, 绑定点击事件方法, 修改相应变量的状态
<el-button type="primary" size="mini" @click="addCateBtnFn">添加分类</el-button>
// 添加分类->点击出对话框
addCateBtnFn () {
this.addVisible = true // 让对话框出现
this.editId = '' // 编辑的文章分类id设置无
this.isEdit = false // 编辑的状态关闭
}设置el-dialog的标题
<el-dialog :title="isEdit ? '编辑文章分类' : '添加文章分类'" :visible.sync="addVisible" width="35%" @closed="onAddClosedFn">2 文章分类-修改分类-提交
目标
定义接口方法, 传递修改分类的数据保存到后台
讲解
查阅接口文档, 定义接口方法
/**
* 更新-文章分类
* @param {*} param0 { id: 文章分类id, cate_name: 文章分类名字, cate_alias: 文章分类别名 }
* @returns Promise对象
*/
export const updateArtCateAPI = ({ id, cate_name, cate_alias }) => {
return request({
url: '/my/cate/info',
method: 'PUT',
data: {
id,
cate_name,
cate_alias
}
})
}在el-dialog中的表单的点击确定的方法中, 做判断, 调用不同的接口实现功能
注意, 更新的时候, 需要携带文章分类的id值过去
// 对话框内-添加按钮-点击事件
async addFn () {
// 表单预校验
this.$refs.addRef.validate(async valid => {
if (valid) {
// 判断当前是新增还是编辑
if (this.isEdit) {
// 编辑状态
// 调用接口传递数据给后台
const { data: res } = await updateArtCateAPI({ id: this.editId, ...this.addForm })
if (res.code !== 0) return this.$message.error('更新分类失败！')
this.$message.success('更新分类成功！')
} else {
// 新增
// 调用接口传递数据给后台
const { data: res } = await addArtCateAPI(this.addForm)
if (res.code !== 0) return this.$message.error('添加分类失败！')
this.$message.success('添加分类成功！')
}
// 重新请求列表数据
this.initCateListFn()
// 关闭对话框
this.addVisible = false
} else {
return false
}
})
}
5 文章分类-删除分类
目标
实现点击删除分类的功能
讲解
根据接口文档, 定义删除文章分类的接口方法
/**
* 删除-文章分类
* @param {*} id 要删除的-文章分类id
* @returns Promise对象
*/
export const delArtCateAPI = (id) => {
return request({
url: '/my/cate/del',
method: 'DELETE',
params: {
id
}
})
}为删除按钮绑定点击事件处理函数
<el-button type="danger" size="mini" @click="removeFn(scope.row.id)">删除</el-button>定义 removeFn函数
// 删除-文章分类
async removeFn (id) {
const { data: res } = await delArtCateAPI(id)
if (res.code !== 0) return this.$message.error('删除分类失败！')
this.$message.success('删除分类成功！')
// 重新请求列表数据
this.initCateListFn()
}
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
