【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>
相关推荐
你挚爱的强哥44 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森1 小时前
CSS3中的伸缩盒模型（弹性盒子、弹性布局）之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex，2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏（补充上一条）
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
天天进步20154 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript？应该注意那些点？
前端·vue.js·typescript
热门推荐
01ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07IT专业入门，高考假期预习指南08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇