vue后台管理系统开发流程全记录_标签管理功能开发: 表单 | 表格 | 分页

Posted 2021-05-17 前端呆头鹅

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue后台管理系统开发流程全记录_标签管理功能开发: 表单 | 表格 | 分页相关的知识，希望对你有一定的参考价值。

在这里插入图片描述

一篇博文对应一个类别，但是对应多个标签。

标签管理的功能也是，展示，修改等。

首先准备标签数据列表接口。

一接口处理

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();    
        }