【vue实战项目】通用管理系统：作业列表

目录

目录

1.前言

2.后端API

3.前端API

4.组件

5.分页

6.封装组件

---

1.前言

本文是博主前端Vue实战系列中的一篇文章，本系列将会带大家一起从0开始一步步完整的做完一个小项目，让你找到Vue实战的技巧和感觉。

专栏地址：

https://blog.csdn.net/joker_zjn/category_12469788.html?spm=1001.2014.3001.5482

前文中我们依次安装好了插件、依赖，搭建好了环境，搭好了项目的架子，实现了登录页、首页、菜单栏、导航栏、学生列表模块这些功能。接下来我们要做的是作业管理模块，该模块用来对学生的作业进行管理，主要是实现一个作业管理列表+后端分页的功能。

2.后端API

URL:

api/getWorkList

返回值：

请求：

method:GET

这是作者用Spring Boot写的一个后端接口实现，可以作为一个参考：

@RestController
@RequestMapping("/api/work")
public class WorkController {
    @RequestMapping("getWorkList")
    public ResultBean getWorkList(int index, int rows) {
        return new ResultBean(200,"success",workService.getWorkListCount(index,rows),workService.getWorkList(index,rows));
    }
}

3.前端API

之前我们以及在table.js里封装好了前端的api，所以这里我们直接在table.js里面追加api即可：

//获取作业列表
export function getTableData(root,method,url,params,arr){
    root.service[method](url+"?index="+params.index+"&rows="+params.rows)
    .then(res=>{
        if(res.data.code===200){
            root.tableData=res.data.data
            root.total=res.data.total
            root.tableData.map(item=>{
                arr.map(aItem=>[
                    item[aItem]?item[aItem+'_text']='是':item[aItem+'_text']='否'
                ])
            })
        }
    })
 
}

4.组件

直接用前面学生列表的StudentList.vue来改一下：

<template>
    <div>
        <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="用户ID" align="center">
      el-table-column>
      <el-table-column prop="userId" label="所属班级" align="center">
      el-table-column>
      <el-table-column prop="title" label="作业名称" align="center">
      el-table-column>
      <el-table-column prop="completed_text" label="完成情况" align="center">
      el-table-column>
    el-table>
    div>
template>
 
<script>
import {getTableData} from '@/utils/table'
export default ({
    data(){
        return{
            tableData:[]
        }
    },
    created(){
        getTableData(this,'get','/work/getWorkList',{},['completed'])
    }
})
script>

5.分页

这里要注意的是前面我们采用的都是前端分页，但是在实际项目中都是采用后端分页的。因为前端分页的话要先把所有数据请求过来再分页显示，数据量大了的话是搞不定的，所以从这里以及后面的分页我们都采用后端分页。前面的前端分页的地方就不去管他了，作为一个演示放在那里。

我们先把学生列表组件里面的分页组件照搬过来，需要注意的是将current-page和page-size分别设置为后端分页的参数

data(){
        return{
            tableData:[],
            total:0,
            index:0,
            rows:10
        }
    },

<template>
    <div>
        <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="用户ID" align="center">
      el-table-column>
      <el-table-column prop="userId" label="所属班级" align="center">
      el-table-column>
      <el-table-column prop="title" label="作业名称" align="center">
      el-table-column>
      <el-table-column prop="completed_text" label="完成情况" align="center">
      el-table-column>
    el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="index"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      el-pagination>
    div>
template>

最终组件：

<template>
    <div class="workList">
        <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="用户ID" align="center">
      el-table-column>
      <el-table-column prop="userId" label="所属班级" align="center">
      el-table-column>
      <el-table-column prop="title" label="作业名称" align="center">
      el-table-column>
      <el-table-column prop="completed_text" label="完成情况" align="center">
      el-table-column>
    el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="index"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      el-pagination>
    div>
template>
 
<script>
import {getTableData} from '@/utils/table'
export default ({
    data(){
        return{
            tableData:[],
            total:0,
            index:1,
            rows:10
        }
    },
    created(){
        getTableData(this,'get','/work/getWorkList',{index:this.index,rows:this.rows},['completed'])
    },
    methods:{
        //分页方法
        handleSizeChange(val) {
            this.index = val;
            this.rows = 1;
            getTableData(this,'get','/work/getWorkList',{},['completed']);
        },
        handleCurrentChange(val) {
            this.rows = val;
            getTableData(this,'get','/work/getWorkList',{},['completed']);
        },
    }
})
script>
<style lang="less">
.workList{
    .el-pagination{
        text-align: left;
        margin-top: 20px;
    }
}
style>

6.封装组件

分页组件到处都会用到，所以我们应该考虑把这个组件单独封装成一个组件，以后该项目中其它地方也用这个我们封装好的走后端分页逻辑的组件。

公共组件都放common包下面：

有两个地方需要注意：

1.因为要操作的数据是父组件的，所以原来的前端api要改为：

//获取作业列表
export function getTableData(root,method,url,params,arr){
    root.service[method](url+"?index="+params.index+"&rows="+params.rows)
    .then(res=>{
        if(res.data.code===200){
            root.$parent.tableData=res.data.data
            root.total=res.total
            root.$parent.tableData.map(item=>{
                arr.map(aItem=>[
                    item[aItem]?item[aItem+'_text']='是':item[aItem+'_text']='否'
                ])
            })
        }
    })
}

2.为了保证路由的灵活度，分页方法具体访问哪个后端接口，需要从父组件传过来，所以这里加一个url参数：

<template>
    <div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="index"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :url="url"
      >
      el-pagination>
    div>
template>
<script>
import {getTableData} from '@/utils/table'
export default ({
    props:{
        "url": String
    },
    data(){
        return {
            total:0,
            index:1,//当前页数
            rows:10,//每页显示条数
        }
    },
    created(){
        getTableData(this,'get',this.url,{index:this.index,rows:this.rows},['completed'])
    },
    methods:{
        //分页方法
        handleSizeChange(val) {
            this.index = val;
            this.rows = 1;
            getTableData(this,'get',this.url,{index:this.index,rows:this.rows},['completed'])
        },
        handleCurrentChange(val) {
            this.rows = val;
            getTableData(this,'get',this.url,{index:this.index,rows:this.rows},['completed'])
        },
    }
})
script>

最终在父组件中调用上面的分页组件即可，所以最终的作业列表组件长这样：

<template>
    <div>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="index"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :url="url"
      >
      el-pagination>
    div>
template>
<script>
import {getTableData} from '@/utils/table'
export default ({
    props:{
        "url": String
    },
    data(){
        return {
            total:0,
            index:1,//当前页数
            rows:10,//每页显示条数
        }
    },
    created(){
        getTableData(this,'get',this.url,{index:this.index,rows:this.rows},['completed'])
    },
    methods:{
        //分页方法
        handleSizeChange(val) {
            this.index = val;
            this.rows = 1;
            getTableData(this,'get',this.url,{index:this.index,rows:this.rows},['completed'])
        },
        handleCurrentChange(val) {
            this.rows = val;
            getTableData(this,'get',this.url,{index:this.index,rows:this.rows},['completed'])
        },
    }
})
script>