【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.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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Linux】Linux工具——gcc/g++

【Linux】Linux工具——gcc/g++

1.使用vim更改信用名单——sudo 我们这里来补充sudo的相关知识——添加信任白名单用户 使用sudo就必须将使用sudo的那个账号添加到信用名单里&#xff0c;而且啊&#xff0c;只有超级管理员才可以添加 信用名单在/etc/sudoers里 我们发现它的权限只是可读啊&#xff0c;所以…
阅读更多...
MD中 面料的物理属性参数

MD中 面料的物理属性参数

该图片是Marvelous Designer软件中"Fabric Physical Properties"(面料物理属性)面板的截图,用于调整面料在弯曲、折叠时的硬度(Buckling Stiffness)。 目标部分解释了调整Buckling Stiffness的作用:通过调整该百分比值来决定面料角落处的硬度。进入80%的Buckling St…
阅读更多...
Linux网络编程：应用层协议|HTTPS

Linux网络编程：应用层协议|HTTPS

目录 1.预备知识 1.1.加密和解密 1.2.常见加密方式 1.2.1.对称加密 1.2.2.非对称加密 ​编辑 1.3.数据摘要&#xff08;数据指纹&#xff09;和数据签名 1.4.证书 1.4.1.CA认证 1.4.2.证书和数字签名 2.HTTPS协议 2.1.自行设计HTTPS加密方案 2.1.1.只使用对称加密 …
阅读更多...
java调用科大讯飞离线语音合成SDK --内附完整项目

java调用科大讯飞离线语音合成SDK --内附完整项目

科大讯飞语音开放平台基础环境搭建 1.用户注册 注册科大讯飞开放平台账号 2.注册好后先创建一个自己的应用 创建完成后进入应用选择离线语音合成&#xff08;普通版&#xff09;可以看到我们开发需要的SDK,选择windows MSC点击下载。 3.选择你刚刚创建的应用&#xff0c;选择…
阅读更多...
python安装pystan教程

python安装pystan教程

简介 PyStan是Stan编程语言的Python接口&#xff0c;Stan是一种用于统计建模和数据分析的概率编程语言。PyStan使用户能够在Python环境中定义、编译和采样Stan模型。 安装步骤 首先&#xff0c;需要先安装 Cython pip install Cython -i https://mirrors.aliyun.com/pypi/sim…
阅读更多...
Java学习20——Map接口

Java学习20——Map接口

目录 一.Map&#xff1a; 1.基本介绍&#xff1a; 2.Map常用方法&#xff1a; 3.Map的遍历方法&#xff1a; 4.HashMap: 1.基本介绍&#xff1a; 2.HashMap底层扩容机制&#xff1a; 5.Hashtable&#xff1a; 1.基本介绍&#xff1a; 2.HashMap和Hashtable的对比&…
阅读更多...
计算机储存容量单位都有哪些？

计算机储存容量单位都有哪些？

这些单位在高中职的计算机概论似乎都学过了&#xff0c;不过我以前的书本好像也只有教到 GB&#xff0c;现在的教科书可能有教到 TB 或 PB 吧&#xff0c;但我不确定&#xff0c;不过在不久的将来可能又会有更大的单位有机会用到&#xff0c;所以想了解一下。 电脑的最小单位为…
阅读更多...
Springboot校园食堂智能排餐系统-计算机毕业设计源码85935

Springboot校园食堂智能排餐系统-计算机毕业设计源码85935

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对校园食堂智能排餐系统等问题&#xff0c;对…
阅读更多...
word如何锁定样式不被修改（CSDN_20240602）

word如何锁定样式不被修改（CSDN_20240602）

在写材料合稿时&#xff0c;交上来word样式千奇百怪&#xff0c;直接合稿可能会把大稿子格式搞乱&#xff0c;所以希望发模板时&#xff0c;写死文档样例&#xff0c;不允许修改样式。 1. 创建模板样式&#xff0c;如下图所示。 2. 点击“审阅”-->"限制编辑”&#x…
阅读更多...
设计模式（十二）行为型模式---模板方法模式

设计模式（十二）行为型模式---模板方法模式

文章目录 模板方法模式结构优缺点UML图具体实现UML图代码实现 模板方法模式 模板方法模式&#xff08;Template Method&#xff09;是一种基于继承实现的设计模式&#xff0c;主要思想是&#xff1a;将定义的算法抽象成一组步骤&#xff0c;在抽象类中定义算法的骨架&#xff…
阅读更多...
如何让 VSCode 认识你正在开发的 NPM 模块

如何让 VSCode 认识你正在开发的 NPM 模块

假如你正在开发一个 NPM 模块 echox&#xff0c;并且在 src/index.js 里面导出了一系列方法: // ./src/index.js export function html() {// ... }然后在 tests/index.spec.js 里面新增了以下一行&#xff1a; // ./tests/index.spec.js import * as X from echox;如何让 VS…
阅读更多...
Windows安装ElasticSearch版本7.17.0

Windows安装ElasticSearch版本7.17.0

在Windows系统上本地安装Elasticsearch的详细步骤如下&#xff1a; 1. 下载Elasticsearch 访问 Elasticsearch下载页面。选择适用于Windows的版本7.17.0&#xff0c;并下载ZIP文件。 2. 解压文件 下载完成后&#xff0c;找到ZIP文件&#xff08;例如 elasticsearch-7.17.0.…
阅读更多...
人力资源管理系统，员工管理系统

人力资源管理系统，员工管理系统

项目概述 本项目是一款基于Spring BootVueElementUI的人力资源管理系统&#xff0c;有权限管理、财务管理、系统管理、考勤管理等功能模块 获取代码及服务 见闲鱼 技术栈 前端 Vue、Axios、ElementUI、Vue-Router、Vuex、ECharts 后端 Spring Boot、Jwt、MyBatis-Plus、…
阅读更多...
c++------类和对象（下）包含了this指针、构造函数、析构函数、拷贝构造等

c++------类和对象（下）包含了this指针、构造函数、析构函数、拷贝构造等

文章目录 前言一、this指针1.1、this指针的引出1.2、 this指针的特性 二、类的默认的六个构造函数2.1、构造函数简述2.2构造函数 三、析构函数3.1、析构函数引出3.2、特点&#xff1a; 四、拷贝构造4.1、引入4.2、特征&#xff1a;4.3、默认拷贝构造函数 总结 前言 在本节中&a…
阅读更多...
LeetCode-77. 组合【回溯】

LeetCode-77. 组合【回溯】

LeetCode-77. 组合【回溯】 题目描述&#xff1a;解题思路一&#xff1a;回溯背诵版解题思路三&#xff1a;0 题目描述&#xff1a; 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&a…
阅读更多...
从tensorflow导入EarlyStopping能运行但是一直提示未解析

从tensorflow导入EarlyStopping能运行但是一直提示未解析

在pycharm中导入早停机的库时&#xff0c;碰上一个问题 from tensorflow.keras.callbacks import EarlyStopping这一条代码中&#xff0c;EarlyStopping一直有个红色波浪线&#xff0c;代表着找不到这个库&#xff0c;提示未解析啥的。 但是运行是可以运行的&#xff0c;虽然可…
阅读更多...
禁用手机连接 - Win11

禁用手机连接 - Win11

问题 Win11系统自带手机连接软件&#xff0c;会在后台自启&#xff0c;不适用于全部的手机型号&#xff0c;而且常规方法无法卸载。甚至任务管理器中&#xff0c;此软件的后台进程高达76个&#xff0c;如下图。下文以Win11系统为例&#xff0c;介绍如何禁用手机连接。 解决方…
阅读更多...
【Unity脚本】修改游戏对象的活动状态

【Unity脚本】修改游戏对象的活动状态

【知识链】Unity -> Unity脚本 -> 游戏对象 -> 活动状态【摘要】本文介绍了如何通过编辑器和脚本来访问游戏对象的活动状态&#xff0c;并给出具体的场景示例。 文章目录 第一章 引言第二章 在编辑器中设置活动状态2.1. 在编辑器中设置活动状态2.1.1. 停用游戏对象2.…
阅读更多...
JVM学习笔记（持续更新）

JVM学习笔记（持续更新）

JDK、JRE、JVM区别&#xff1f; 类加载过程 装载 验证 准备 解析 初始化 类加载器分类 双亲委派模型 如何打破双亲委派模型&#xff1f; 自定义类加载器&#xff0c;集成ClassLoader类重写loadClass,如Tomcat JVM内存模型 JVM 需要使用计算机的内存&#xff0c;Java 程序…
阅读更多...
文件批量改后缀名，轻松实现TXT到DOCX格式转换，高效管理您的文件库！

文件批量改后缀名，轻松实现TXT到DOCX格式转换，高效管理您的文件库！

文件处理与管理已成为我们日常生活和工作中不可或缺的一环。然而&#xff0c;面对海量的文件&#xff0c;如何高效地进行格式转换和管理&#xff0c;却成为了一道难题。今天&#xff0c;我们将为您揭晓一个神奇的解决方案——文件批量改后缀名功能&#xff0c;让您轻松实现TXT到…
阅读更多...
最新文章

Copyright @ 2022~2023