【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

返回值:

参数类型说明
idint用户ID
userIdint所属班级
titlestring作业名称
completedboolean完成情况,是否完成

请求:

method:GET

参数名类型说明
pageint当前页数
sizeint每页条数

这是作者用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.dataroot.total=res.data.totalroot.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.dataroot.total=res.totalroot.$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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/21048.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

300价值与300成长指数

300价值指数&#xff0c;看的是价值因子。价值因子包含四个变量:股息收益率&#xff0c;每股净资产与价格比率&#xff0c;每股净现金流与价格比率&#xff0c;每股收益与价格比率 根据这四个变量对沪深300指数的成份股进行打分&#xff0c;得分高的前100名&#xff0c;就纳入…

安卓Launcher启动详解

目录 一、概述1.1 核心源码1.2 主要代码作用 二、源码分析2.1 第一阶段SystemServer 启动HomeActivity的调用阶段2.2 [RootActivityContainer.java] startHomeOnDisplay()2.2.1 [ActivityTaskManagerService.java] getHomeIntent()2.2.2 [RootActivityContainer.java] resolveH…

uni-app解决表格uni-table样式问题

一、如何让表格文字只显示一行&#xff0c;超出部分用省略号表示 步骤 &#xff1a; 给table设置table-layout:fixed; 列宽由表格宽度和列宽度设定。&#xff08;默认是由单元格内容设定&#xff09;让表格元素继承父元素宽度固定table-layout: inherit;overflow: hidden;超过…

list的简单模拟实现

文章目录 目录 文章目录 前言 一、使用list时的注意事项 1.list不支持std库中的sort排序 2.去重操作 3.splice拼接 二、list的接口实现 1.源码中的节点 2.源码中的构造函数 3.哨兵位头节点 4.尾插和头插 5.迭代器* 5.1 迭代器中的operator和-- 5.2其他迭代器中的接口 5.3迭代器…

【气象常用】剖面图

效果图&#xff1a; 主要步骤&#xff1a; 1. 数据准备&#xff1a;我用的era5的散度数据&#xff08;大家替换为自己的就好啦&#xff0c;era5数据下载方法可以看这里【数据下载】ERA5 各高度层月平均数据下载_era5月平均数据-CSDN博客&#xff09; 2. 数据处理&#xff1a…

windows10系统64位安装delphiXE11.2完整教程

windows10系统64位安装delphiXE11.2完整教程 https://altd.embarcadero.com/download/radstudio/11.0/radstudio_11_106491a.iso XE11.1 https://altd.embarcadero.com/download/radstudio/11.0/RADStudio_11_2_10937a.iso XE11.2 关键使用文件在以下内容&#xff1a;windows10…

Java Spring Boot 从必应爬取图片

获取图片主要就是通过必应图片页面控制台的元素&#xff0c;确认图片和标题在哪个类中&#xff08;浏览器 F12&#xff09; 引入依赖 这里需要引入两个依赖 jsoup 和 hutool maven依赖网站地址&#xff1a;Maven Repository: Search/Browse/Explore (mvnrepository.com) 挑选…

极简网络用户手册(1)

极简网络系统处理流程 模块位置&#xff1a;参数平台--专题分析--极简网络分析 步骤&#xff1a; 步骤一&#xff1a;创建精细化场景策略 步骤二&#xff1a;创建任务&#xff0c;主要选择策略&#xff08;包括√配置和距离配置&#xff09;和需要处理的小区清单&#xff08;源…

srcu浅析

本文代码基于linux内核4.19.195 之前写了rcu、rcu nocb的文章&#xff0c;感觉还差个srcu就完整了&#xff0c;现在补齐一下。 SRCU&#xff08;Sleepable RCU&#xff09;是rcu的一个变体&#xff0c;顾名思义&#xff0c;就是在rcu的读临界区中允许睡眠&#xff0c;而rcu在读…

CCF-GESP 等级考试 2023年6月认证C++四级真题解析

2023年09月真题 一、单选题&#xff08;每题2分&#xff0c;共30分&#xff09; 第 1 题 高级语言编写的程序需要经过以下&#xff08; &#xff09;操作&#xff0c;可以生成在计算机上运行的可执行代码。 A. 编辑B. 保存C. 调试D. 编译 答案&#xff1a;D 解析&#xff1a;…

FS212E 系列PD协议

PD快充协议芯片FS212EL、FS212EH可以智能的识别插入的手机类型&#xff0c;选择最为合适的协议应对手机快充需要。兼容多类USB Type-C协议&#xff0c;包括TypeC协议、TypeC PD2.0、TypeC PD3.0、TypeC PD3.2等协议。集成OPTO输出&#xff0c;通过电阻直驱反馈光耦。FS212E 的调…

C++函数模版和C#的泛型函数的区别

函数模板和C#的泛型函数在概念上是非常相似的&#xff0c;都是用于创建能够处理多种数据类型的通用函数。它们的主要区别点在于语法和实现细节上&#xff1a; 语法&#xff1a; C 中的函数模板使用 template <typename T> 或者 template <class T> 来声明模板&am…

新手学习STM32还是ESP32

对于新手来说&#xff0c;选择学习STM32还是ESP32取决于个人的学习目标和背景。以下是针对这两种微控制器的详细分析&#xff0c;以便您做出更明智的选择&#xff1a; STM32 1. 处理器架构与性能 STM32采用单核或多核处理器架构&#xff0c;基于ARM Cortex-M0&#xff0c;M0…

PlantUML-使用文本来画时序图

介绍 PlantUML 是一个开源工具&#xff0c;用户可以使用纯文本描述来创建 UML (统一建模语言) 图形。由于它使用文本来描述图形&#xff0c;因此可以很容易地将这些描述与源代码一起存储在版本控制系统中。然后&#xff0c;PlantUML 负责将这些描述转换为图形。 资料 官方文…

k8s部署1.27.3版本,使用containerd模式

环境 操作系统&#xff1a;centos7.9 机器&#xff1a;1个master 和 1个node 节点&#xff08;云ECS&#xff09; 系统设置 # 所有机器设置hostname hostnamectl set-hostname master1 hostnamectl set-hostname node1# 所有机器增加内网ip和 master1 对应关系 vi /etc/ho…

杂牌记录仪TS视频流恢复方法

大多数的记录仪都采用了MP4/MOV文件方案&#xff0c;极少数的可能在用AVI文件&#xff0c;极极少数的在用TS文件方案。很多人可能不太解TS文件&#xff0c;这是一种古老的视频文件结构&#xff0c;下边这个案例我们来看下TS视频文件的恢复方法。 故障存储:8G存储卡/fat32文件系…

2-1RT-Thread线程管理-笔记

2-1RT-Thread线程管理-笔记 其中系统线程由内核创建&#xff0c;如main函数和空闲线程都属于系统线程&#xff0c;而用户线程是由应用程序所创建的。 对于资源较大的MCU可以适当设计较大的线程栈&#xff0c;也可以在初始化时设置一个具体的数值&#xff0c;如1K或2K字节。…

索引 ---- mysql

目录 1. 索引 1.1 概念 1.2 作用 1.3 使用场景 1.4 使用 1.4.1查看索引 1.4.2 创建索引 1.4.3 删除索引 1.5 注意事项 1.6 索引底层的数据结构 (面试经典问题) 1. 索引 1.1 概念 索引是一种特殊的文件&#xff0c;包含着对数据表里所有记录的引用指针。可以对表中的…

2006NOIP普及组真题 2. 开心的金明

线上OJ&#xff1a; 【06NOIP普及组】开心的金明 本题只要把 1、限定金额看成背包总容量 2、每件物品的价格 v 看成占用背包的体积 3、每件物品的价格v乘以权重w作为该物品的价值 则本题可套用标准的01背包问题模板&#xff1a; f [ j ] m a x ( f [ j ] , f [ j − v ] w …

Redis单线程

Redis是基于Reactor模式开发的网络事件处理器,这个处理器是单线程的,所 以redis是单线程的。 为什么它是单线程还那么快呢? 主要有以下几个原因: 一、纯内存操作 由于Redis是 纯内存操作,相比于磁盘来说,内存就快得多,这个是Redis快的主要 原因。 二、多路复用I/O机制(…