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

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

1.前言

本文是博主前端Vue实战系列中的一篇文章,本系列将会带大家一起从0开始一步步完整的做完一个小项目,让你找到Vue实战的技巧和感觉。


前文中我们依次安装好了插件、依赖,搭建好了环境,搭好了项目的架子,实现了登录页、首页、菜单栏、导航栏、学生列表模块这些功能。接下来我们要做的是作业管理模块,该模块用来对学生的作业进行管理,主要是实现一个作业管理列表+后端分页的功能。

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


目录
相关文章
|
1天前
|
JavaScript
vue知识点
vue知识点
12 6
|
4天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
8天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
21 4
|
11天前
|
JavaScript
|
10天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
24 2
|
13天前
|
JavaScript 前端开发
【vue】 el-table解决分页不能筛选全部数据的问题
【vue】 el-table解决分页不能筛选全部数据的问题
32 4
|
13天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
27 6
|
13天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
25 1
|
13天前
|
JavaScript 定位技术
【天地图】vue 天地图 T is not defined
【天地图】vue 天地图 T is not defined
35 1
|
18天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
26 1