一篇博文对应一个类别，但是对应多个标签。
标签管理的功能也是，展示，修改等。
首先准备标签数据列表接口。
一 接口处理
1.1 创建接口
url: /article/label/search
method: post
描述: 标签分页查询列表
{
"code": 20000,
"message": "查询成功",
"data": {
"total": "@integer(100, 200)", // 总记录数
"records|20": [{
//生成20条数据
"id|+1": 10, //初始值10开始，每条+1
"categoryName": "@cname", //类别ID
"name": "@cname", // 随机一个标签名
"createDate": "@date", // 随机创建时间
"updateDate": "@date" // 随机更新时间
}]
}
}
1.2 封装接口
新建src/api/label.js，在其中放置标签相关接口。
import request from "@/utils/request"
export default {
// 列表分页接口
getList(query, current = 1, size = 20) {
return request({
url: `/article/label/search`,
method: 'post',
data: {
...query, current, size } // 合并成一个对象
})
},
}
和类别管理形同，传入查询条件，当前页，每页行数，取回数据。
1.3 调用接口
在src\views\label\index.vue中调用接口。
import api from '@/api/label.js'
export default {
name: 'Label',
data(){
return {
list: [],
page: {
// 分页相关
total: 0, // 总记录数
current: 1, // 当前页码
size: 20, // 每页显示20条数据,
},
query: {
}, // 查询条件
}
},
created(){
this.fetchData();
},
methods: {
fetchData(){
api.getList(this.query, this.page.current, this.page.size).then((res)=>{
this.list = res.data.records;
this.page.total = res.data.total;
})
}
}
}
可以看出，这个页面与类别管理页面雷同，我们可能在后期进行抽象化处理，此时先复制修改。
二 页面绘制
整体来说在类别管理页面上做细微修改。
这里简单给出代码，不清楚的看上一章。
2.1 列表绘制
<el-table
:data="list"
border
style="100%"
>
<el-table-column
align="center"
type="index"
label="序号"
width="60">
</el-table-column>
<el-table-column
align="center"
prop="name"
label="标签名称"
>
</el-table-column>
<el-table-column
align="center"
prop="categoryName"
label="分类名称"
>
</el-table-column>
<el-table-column
align="center"
label="操作"
>
<template slot-scope="scope">
<el-button size="mini">编辑</el-button>
<el-button type="danger" size="mini">删除</el-button>
</template>
</el-table-column>
</el-table>
三 分页查询实现
添加分页组件。
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page.current"
:page-sizes="[10, 20, 50]"
:page-size="page.size"
layout="total, sizes, prev, pager, next, jumper"
:total="page.total">
</el-pagination>
添加相关方法。
handleCurrentChange(val){
this.page.current = val;
this.fetchData();
},
handleSizeChange(val){
this.page.size = val;
this.fetchData();
}
四 条件查询实现
根据标签和分类查询信息。
这里需要你个新接口，返回所有可用的分类，用于分类下拉框的选项。
4.1 接口处理
4.1.1 接口创建
url: article/category/list
methods: get
描述: 查询所有可用分类
{
"code": 20000,
"message": "查询成功",
"data|8": [{
// 产生8条数据
"id|+1": 10, //初始值10开始，每条+1,
"name": "@cname", // 随机一个名字
"sort": "@integer(0,9)", // 0-9间的数字
"remark": "@csentence(5, 15)",
"status": 1, // 查询正常状态
"createDate": "@date", // 随机时间
}]
}
4.1.2 接口封装
api/category中加入方法。
getNormalList(){
return request({
url: `/article/category/list`,
method: 'get',
})
}
4.1.3 接口调用
在created中调用该接口，将返回值附给对应变量，与界面下拉框绑定即可。
这里已在data中设置了变量categoryList,初始值为空数组。
methods: {
...
getCategoryList(){
apiCategory.getNormalList().then((res) => {
this.categoryList = res.data;
})
}
...
}
created(){
this.fetchData();
this.getCategoryList();
}
4.2 绘制页面
将前一章节的分类管理-条件查询部分，改一下下拉框数据部分即可。
<el-form :inline="true" :model="query" class="demo-form-inline" size="mini">
<el-form-item label="分类名称">
<el-input v-model="query.name"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-select v-model="query.status" clearable filterable style="width: 85px">
<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button icon='el-icon-search' type="primary">查询</el-button>
<el-button icon='el-icon-refresh'>重置</el-button>
<el-button type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
</el-form-item>
</el-form>
4.3 方法定义
定义查询与重置方法，与上一章相同。
queryData() {
// 将页码变为第1页
this.page.current = 1;
this.fetchData();
},
reload() {
this.query = {
};
this.fetchData();
}
专栏地址：vue后台管理系统
源代码：https://github.com/kexr/vue-bolg-admin.git
转载：https://blog.csdn.net/weixin_45809580/article/details/116709883
查看评论