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

_BugMan2024-06-05 20:54

目录

目录

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

返回值：

参数 类型 说明
id int 用户ID
userId int 所属班级
title string 作业名称
completed boolean 完成情况，是否完成

请求：

method:GET

参数名 类型 说明
page int 当前页数
size int 每页条数

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

java 复制代码 
@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即可：

javascript 复制代码 
//获取作业列表
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来改一下：

html 复制代码 
<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分别设置为后端分页的参数

javascript 复制代码 
data(){
        return{
            tableData:[],
            total:0,
            index:0,
            rows:10
        }
    },
html 复制代码 
<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>

最终组件：

html 复制代码 
<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要改为：

javascript 复制代码 
//获取作业列表
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参数：

html 复制代码 
<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>

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

html 复制代码 
<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>
相关推荐
麦麦大数据3 分钟前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer088 分钟前
【开源免费】基于SpringBoot+Vue.JS医院管理系统（JAVA毕业设计）
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea
理想不理想v21 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我22 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记35 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜35 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 =￣ω￣=36 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧38 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck40 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解