【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
返回值:
| 参数 | 类型 | 说明 |
|---|---|---|
| id | int | 用户ID |
| userId | int | 所属班级 |
| title | string | 作业名称 |
| completed | boolean | 完成情况,是否完成 |
请求:
method:GET
| 参数名 | 类型 | 说明 |
|---|---|---|
| page | int | 当前页数 |
| size | int | 每页条数 |
这是作者用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>
相关文章:
【vue实战项目】通用管理系统:作业列表
目录 目录 1.前言 2.后端API 3.前端API 4.组件 5.分页 6.封装组件 1.前言 本文是博主前端Vue实战系列中的一篇文章,本系列将会带大家一起从0开始一步步完整的做完一个小项目,让你找到Vue实战的技巧和感觉。 专栏地址: https://blog…...
Scikit-Learn随机森林回归
Scikit-Learn随机森林回归 1、随机森林1.1、集成学习1.2、Bagging方法1.3、随机森林算法1.4、随机森林的优缺点2、Scikit-Learn随机森林回归2.1、Scikit-Learn随机森林回归API2.2、随机森林回归实践(加州房价预测)1、随机森林 随机森林是一种由决策树构成的集成算法,它在大多…...
Vue Router 教程
Vue Router 是 Vue.js 的官方路由管理器,它提供了一种方便的方式来管理应用的路由。在本教程中,我们将介绍 Vue Router 的一些常见用法和示例。 一、安装 Vue Router 使用 Vue Router 之前,需要先安装它。可以使用以下命令通过 npm 安装&am…...
【数据库】SQL--DQL(初阶)
文章目录 DCL1. 基本介绍2. 语法2.1 基础查询2.2 条件查询2.3 聚合函数2.4 聚合查询2.5 分组查询2.6 排序查询2.7 分页查询2.8 综合案例练习2.9 执行顺序 3. DQL总结 DCL 更多数据库MySQL系统内容就在以下专栏: 专栏链接:数据库MySQL 1. 基本介绍 DQL英…...
【docker】docker的安装
如果之前安装了旧版本的docker我们需要进行卸载: 卸载之前的旧版本 卸载 # 卸载旧版本 sudo apt-get remove docker docker-engine docker.io containerd runc # 卸载历史版本 apt-get purge docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker…...
OC IOS 文件解压缩预览
热很。。热很。。。。夏天的城市只有热浪没有情怀。。。 来吧,come on。。。 引用第三方库: pod SSZipArchive 开发实现: 一、控制器实现 头文件控制器定义: // // ZipRarViewController.h // // Created by carbonzhao on 2…...
python-web应用程序-Django-From组件
python-web应用程序-Django-From组件 添加用户时 原始方法(本质)【麻烦】 def user_add(req):if req.method GET:return render(req,XXX.html)#POST请求处理:XXXXX-用户数据没有校验 -出现错误提示 -页面上的每一个字段都需要我们重新写一遍 -关联数…...
K8s(Kubernetes)常用命令
大家好,当谈及容器编排工具时,Kubernetes(常简称为K8s)无疑是当今最受欢迎和广泛使用的解决方案之一。作为一个开源的容器编排平台,Kubernetes 提供了丰富的功能,可以帮助开发人员和运维团队管理、部署和扩…...
C#-for循环语句
for循环语句 语法: for(初始化变量; 判断条件; 增量表达式) { // 内部代码 } 第一个空(初始表达式): 一般用来声明一个临时的局部变量 用来计数第二个空(条件表达式): 表明进入循环的条件 一个bool类型的值(bool类型 条件表达式 逻辑运算符)第三个空(增量表达式): 使用第一个空…...
css动画案例练习之会展开的魔方和交错的小块
这里写目录标题 一级目录二级目录三级目录 下面开始案例的练习,建议第一个动手操作好了再进行下一个一、交错的小块效果展示1.大致思路1.基本结构2.实现动态移动 2.最终版代码 二、会展开的魔方1.大致思路1.基本结构;2.静态魔方的构建3.让静态的魔方动起来 2.最终版…...
前端逆向之下载canvas引用的图片
前端逆向之下载canvas引用的图片 一、来源二、解决三、如果在Network这里也找不到呢? 一、来源 当我们用dom检查器的时候无法选中想要扒下来的图片,只能选中canvas,这种时候该怎么办呢? 二、解决 这个时候应该换个脑子…...
深度学习手撕代码题
目录: PyTorch实现注意力机制、多头注意力与自注意力Numpy广播机制实现矩阵间L2距离的计算Conv2D卷积的Python和C++实现Numpy实现bbox_iou的计算Numpy实现FocallossPython实现nms、softnmsPython实现BN批量归一化PyTorch卷积与BatchNorm的融合分割网络损失函数Dice Loss代码实…...
vue3 + ts 动态添加路由,刷新页面白屏问题解决方案
1、store 中添加路由的方法 2、main.ts中使用该方法 然后就可以任意刷新页面了,有问题可以随时滴我...........
【Kubernetes】k8s的调度约束(亲和与反亲和)
一、调度约束 list-watch 组件 Kubernetes 是通过 List-Watch 的机制进行每个组件的协作,保持数据同步的,每个组件之间的设计实现了解耦。 用户是通过 kubectl 根据配置文件,向 APIServer 发送命令,在 Node 节点上面建立 Pod 和…...
Java数据结构- Map和Set
目录 1. Map和Set2. Map的使用3. Set的使用 1. Map和Set Java中,Map和Set是两个接口,TreeSet、HashSet这两个类实现了Set接口,TreeMap、HashMap这两个类实现了Map接口。 带Tree的这两个类(TreeSet、TreeMap)底层的数…...
JVM参数配置
JVM参数的三种表示方法 在jvm中,jvm虚拟机参数有以下三种表示方法: 标准参数(-)所有的JVM实现都必须实现这些参数的功能,而且向后兼容非标准参数(-X),默认jvm实现这些参数的功能&…...
Vue 实现的精彩动画效果
在 Vue 开发中,我们可以利用<transition>组件来打造各种令人惊艳的动画效果。下面来详细看看这些有趣的动画效果及其实现代码。 一、缩放类效果 zoom-in(整体放大进入) <template><div><button click"isShow ! …...
JVM类加载机制详解(JDK源码级别)
提示:从JDK源码级别彻底剖析JVM类加载机制、双亲委派机制、全盘负责委托机制、打破双亲委派机制的程序、Tomcat打破双亲委派机制、tomcat自定义类加载器详解、tomcat的几个主要类加载器、手写tomcat类加载器 文章目录 前言一、loadClass的类加载大概有如下步骤二、j…...
美国年轻人热衷床上“摆烂”,沃尔玛发掘床上用品新商机!
美国年轻人近年来热衷于床上“摆烂”生活方式,这反映了他们对舒适放松的追求和现代生活的压力。沃尔玛作为零售业巨头,敏锐地捕捉到这一市场变化,发现了床上用品的新商机。 美国年轻人忙碌中渴望宁静空间。床成为他们放松、逃离现实压力的理想…...
3168. 候诊室中的最少椅子数
给你一个字符串 s,模拟每秒钟的事件 i: 如果 s[i] E,表示有一位顾客进入候诊室并占用一把椅子。如果 s[i] L,表示有一位顾客离开候诊室,从而释放一把椅子。 返回保证每位进入候诊室的顾客都能有椅子坐的 最少 椅子…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
HTML 列表、表格、表单
1 列表标签 作用:布局内容排列整齐的区域 列表分类:无序列表、有序列表、定义列表。 例如: 1.1 无序列表 标签:ul 嵌套 li,ul是无序列表,li是列表条目。 注意事项: ul 标签里面只能包裹 li…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
