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

Posted 2021-05-17 前端呆头鹅

文章目录

• • 一 分类列表数据接口制作与调用
  • • 1.1 接口制作
    • 1.2 接口调用
    • • 1.2.1 封装接口
      • 1.2.2 调用接口
      • 1.2.3 数据使用
  • 二 页面绘制
  • • 2.1 基础页面绘制
    • • 2.1.1 表格绘制
      • 2.2.2 状态码绘制
    • 2.2 添加分页查询
    • 2.3 添加条件查询

类别管理功能页用于对文章分类项进行列表化展示和管理。
先对开发成果做个预览。

一 分类列表数据接口制作与调用

1.1 接口制作

首先确定接口信息。

url: /article/category/search

method:post

描述：文章类别分页条件查询列表

{
  "code": 20000,
  "message": "查询成功",
  "data": {
  	"total": "@integer(100, 200)",
  	"records|20": [{
  		"id|+1":10,
  		"name":"@cname",
  		"sort": "@integer(0,9)",
  		"remark": "@csentence(5, 15)",
  		"status|1":[0,1],
  		"createDate": "@date"
  	}]
  }
}

1.2 接口调用

1.2.1 封装接口

import request from '@/utils/request'

export default {
    getList() {
        return request({
            url: '/article/category/search',
            method: 'post',
        })
    }
}

1.2.2 调用接口

import api from '@/api/category.js'

export default {
	...
    created(){
        this.fetchData();
    },
    methods: {
        fetchData(){
            api.getList().then(response => {          
                console.log(response)             
            })
        }
    }
    ...
}

接口顺利使用。

1.2.3 数据使用

我们设计适合页面使用的数据格式，将接口数据处理后放置到data中。

数据有数据类表，页码相关，和查询条件，作为调用接口的参数和放置数据的位置。

注意，在此处添加参数后，在/api/category.js接口封装文件中也需要定义参数。

import api from '@/api/category.js'

export default {
	...
	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(response => 			{          
                console.log(response); 
                this.list = response.data.records;
                this.page.total = response.data.total;            
            }))
        }
    }
    ...
}

import request from '@/utils/request'

export default {
    getList(query, current = 1, size = 20) {
        return request({
            url: '/article/category/search',
            method: 'post',
            data: {
                ...query,
                current,
                size
            }
        })
    }
}

二 页面绘制

2.1 基础页面绘制

这里首先绘制一个展示列表，使用element-table绘制。

参考链接: https://element.eleme.cn/#/zh-CN/component/table

实例代码如下，其中border属性为添加竖边框，data为绑定list数据，list为一个子项为对象的数组，在子标签中prop属性对应的是该对象中的属性名。

  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
      width="180">
    </el-table-column>
  </el-table>

tableData：[
	{
		data: 123,
		address: 678
	},
	{
		data: 234,
		address: 789
	},
]

2.1.1 表格绘制

刚刚我们已经有了一个类似的数组list，现绘制表格，将list绑定到表格上即可。

        <el-table
            :data="list"
            border
            style="width: 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="sort"
                label="排序"
            >
            </el-table-column>
            <el-table-column
                align="center"
                prop="remark"
                label="备注"
            >
            </el-table-column>
            <el-table-column
                align="center"
                prop="status"
                label="状态"
                width="160">
            </el-table-column>
        </el-table>

2.2.2 状态码绘制

注意此时在页面表格中，状态列显示的是数字，我们希望它转化为用户可识别的样式。

基本思路是使用element-tag实现。

不同状态间，标志颜色类型(type)，文字不同。

这里我们定义一个过滤器，可将标志位转化为对应的颜色类型输出。

    filters: {
        statusFilter(status) {
            const statusMap = {0: 'danger', 1: 'success'}      
            // status等于0返回danger, 1返回success      
            return statusMap[status]
        }
    }

在页面表格中修改状态列。

            <el-table-column
                align="center"
                prop="status"
                label="状态"
                width="160">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status | statusFilter">
                        {{scope.row.status ? '正常':'禁用' }}
                    </el-tag>
                </template>
            </el-table-column>

上面代码中，slot-scope="scope"是固定用法，可以通过scope.row访问该行数据。

2.2 添加分页查询

参考地址: https://element.eleme.cn/#/zh-CN/component/pagination

参照element文档中对分页组件的描述，将分页组件添加到页面表格下方，注意将我们已有的数据对应的添加到配置属性上。

<template>
		<el-table>
			... ... 
		</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>
</template>

下面我们添加两个方法handleSizeChange和handleCurrentChange。

    methods: {
        ... ...
        handleSizeChange(val){
            this.page.size = val;
            this.fetchData();
        },
        handleCurrentChange(val){
            this.page.current = val;
            this.fetchData();
        }
    }

在换页和更改每页容量时，可以看到表格是刷新了的，但是由于目前模拟后端没有对传过去的参数进行处理，总条数没变，从控制台中可以查看请求头，请求参数已改变。

2.3 添加条件查询

参考链接: https://element.eleme.cn/#/zh-CN/component/form#xing-nei-biao-dan
参考链接: https://element.eleme.cn/#/zh-CN/component/select

首先分析一下功能，条件查询功能由一个输入框，一个下拉框和三个按钮组成，可以使用elelment-form制作。

elelment-form中选用与需求最为接近的行内表单。

将官方文档代码复制到el-table标签上方,更改对应属性。

<template>
		<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 statusOptions" :key="item.code" :label="item.name" :value="item.code"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button icon='el-icon-search' type="primary" @click="queryData">查询</el-button>    
                <el-button icon='el-icon-refresh' @click="reload">重置</el-button>    
                <el-button type="primary" icon="el-icon-circle-plus-outline" >新增</el-button>
            </el-form-item>
        </el-form>
    
    	<el-table>
			... ... 
		</el-table>
    	... ...
</template>

注意，在上面代码中我们用到了一个变量statusOptions，这个变量是下拉框的内容，是数组，子项为属性为name和code对象的形式。

const statusOptions = [    
    {code: 0, name: '禁用'},    
    {code: 1, name: '正常'}
]

    data() {    
        return {      
            list: [],      
            page: { // 分页相关          
                total: 0, // 总记录数          
                current: 1, // 当前页码          
                size: 20, // 每页显示20条数据,      
            },      
            query: {}, // 查询条件
            statusOptions     
        }  
    },

下面我们为按钮书写方法，上述代码的查询和重置按钮对应queryData & reload，查询方法中，由于表单内容已经使用v-model与data数据绑定，这里无需多做处理，直接刷新列表即可。

queryData() {      
	// 将页码变为第1页      
	this.page.current = 1;      
	this.fetchData();    
}

重置按钮为将表单数据query置为初始值，也就是空，然后刷新列表。

 reload() {      
 	this.query = {};      
 	this.fetchData();    
 }

这样，基础页面绘制完成了，到现在，我们做的是展示的工作，在下一章节，我们讲对分类进行增加，删除和修改功能。