深圳网站公司招聘信息,如何备份一个网站,app开发定制公司哪家,万网虚拟空间 asp.net多网站部署目录
目录
1.前言
2.后端API
3.前端API
4.组件
5.分页
6.封装组件 1.前言
本文是博主前端Vue实战系列中的一篇文章#xff0c;本系列将会带大家一起从0开始一步步完整的做完一个小项目#xff0c;让你找到Vue实战的技巧和感觉。
专栏地址#xff1a;
https://blog…
目录
目录
1.前言
2.后端API
3.前端API
4.组件
5.分页
6.封装组件 1.前言
本文是博主前端Vue实战系列中的一篇文章本系列将会带大家一起从0开始一步步完整的做完一个小项目让你找到Vue实战的技巧和感觉。
专栏地址
https://blog.csdn.net/joker_zjn/category_12469788.html?spm1001.2014.3001.5482
前文中我们依次安装好了插件、依赖搭建好了环境搭好了项目的架子实现了登录页、首页、菜单栏、导航栏、学生列表模块这些功能。接下来我们要做的是作业管理模块该模块用来对学生的作业进行管理主要是实现一个作业管理列表后端分页的功能。
2.后端API
URL:
api/getWorkList
返回值
参数类型说明idint用户IDuserIdint所属班级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?indexparams.indexrowsparams.rows).then(res{if(res.data.code200){root.tableDatares.data.dataroot.totalres.data.totalroot.tableData.map(item{arr.map(aItem[item[aItem]?item[aItem_text]是:item[aItem_text]否])})}})}
4.组件
直接用前面学生列表的StudentList.vue来改一下 templatedivel-table :datatableData border stylewidth: 100%el-table-column propid label用户ID aligncenter/el-table-columnel-table-column propuserId label所属班级 aligncenter/el-table-columnel-table-column proptitle label作业名称 aligncenter/el-table-columnel-table-column propcompleted_text label完成情况 aligncenter/el-table-column/el-table/div
/templatescript
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}},
templatedivel-table :datatableData border stylewidth: 100%el-table-column propid label用户ID aligncenter/el-table-columnel-table-column propuserId label所属班级 aligncenter/el-table-columnel-table-column proptitle label作业名称 aligncenter/el-table-columnel-table-column propcompleted_text label完成情况 aligncenter/el-table-column/el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pageindex:page-sizes[5, 10, 15, 20]:page-sizerowslayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div
/template
最终组件
templatediv classworkListel-table :datatableData border stylewidth: 100%el-table-column propid label用户ID aligncenter/el-table-columnel-table-column propuserId label所属班级 aligncenter/el-table-columnel-table-column proptitle label作业名称 aligncenter/el-table-columnel-table-column propcompleted_text label完成情况 aligncenter/el-table-column/el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pageindex:page-sizes[5, 10, 15, 20]:page-sizerowslayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div
/templatescript
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 langless
.workList{.el-pagination{text-align: left;margin-top: 20px;}
}
/style6.封装组件
分页组件到处都会用到所以我们应该考虑把这个组件单独封装成一个组件以后该项目中其它地方也用这个我们封装好的走后端分页逻辑的组件。
公共组件都放common包下面 有两个地方需要注意
1.因为要操作的数据是父组件的所以原来的前端api要改为
//获取作业列表
export function getTableData(root,method,url,params,arr){root.service[method](url?indexparams.indexrowsparams.rows).then(res{if(res.data.code200){root.$parent.tableDatares.data.dataroot.totalres.totalroot.$parent.tableData.map(item{arr.map(aItem[item[aItem]?item[aItem_text]是:item[aItem_text]否])})}})
}
2.为了保证路由的灵活度分页方法具体访问哪个后端接口需要从父组件传过来所以这里加一个url参数
templatedivel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pageindex:page-sizes[5, 10, 15, 20]:page-sizerowslayouttotal, sizes, prev, pager, next, jumper:totaltotal:urlurl/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最终在父组件中调用上面的分页组件即可所以最终的作业列表组件长这样
templatedivel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pageindex:page-sizes[5, 10, 15, 20]:page-sizerowslayouttotal, sizes, prev, pager, next, jumper:totaltotal:urlurl/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
