最近比较空闲,公司的后台就想着把现在的后台管理系统给改版一下,说是以前的太难看了,用着也不好用,然后给我甩过来一个ant-design-pro的链接,说是他看这个就挺不错的。
我当时心里就想着,之前的那个项目混合在你们的java项目里,跟普通的jsp页面差不多,一下就是一大堆的css和javascript文件,看着我都害怕(好吧,我承认其实我都不敢看),这能加载的快了就奇了怪了.ant-design最初是为反应设计的,ant-design-pro自然也是用了反应,不得不说人家这个界面看着确实舒服。
对着ant-design-pro的官方文档看了一通,貌似看了跟没看也差不多? ? ?算的了,还是直接看代码吧,整理了一下思路,大致上是看懂了,除了反应+ react-router外,状态管理用的是dva,回来的的异步问题算是解决了,要不就开始直接写页面吧?
等等,我好像漏掉了点什么?噢,对了,先看看打包出来的文件大小,一打包我的心就凉了,最大的js居然有900多k, ant-design的源文件是真的大.react我还只是能写出代码,打包优化这个可就有点为难我了。这时的我再想到公司那1米的带宽,还有这几个后台的技术能力,要不然这个技术栈我还是放弃吧?不能指望连请求头,歌珥稍微高级一点的携带饼干,nginx静态服务器都搞不懂的人去给我弄个静态服务器,再顺便开启一下gzip吧?算了算了,找找有没有vue + element-ui的后台模板,不用太费劲就找到了vue-element-admin。
vue-element-admin用着还行,就是界面不太符合我的理想情况,就对着ant-design-pro改造了一点,列表页大概就是下面这样了。列表的数据是要分页的,普通的列表页只有一个页面栈,也就是用户点击地址栏的回退地址栏时,会返回上一个页面栈,而不是上一页的数据,不太符合用户习惯吧& # 63;毕竟传统的网站都是可以回退到上一页的,嗯,话不多说,进入正题吧。
& lt; template>
& lt; div类=癴lex中心都比;
& lt;模板v=弊鼙?0”比;
& lt; el-pagination
:页面大?"页大小"
:总=白堋?
:当前页面="页面"
背景
布局="上一页,寻呼机,接下来,跳投,总
类=" my-pagination "
@current-change=" changePage "/比;
& lt;/template>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“MyPagination”,
道具:{
总:{
类型:数字,
默认值:0,
},
页面:{
类型:数字,
默认值:1
},
页大小:{
类型:数字,
默认值:10
},
totalPages: {
类型:数字,
默认值:1
},
},
创建(){
this.getCurrentPage ();
},
方法:{
changePage (val) {
这一点。handlePage(‘推’,val, this.pagesize);
这一点。美元发出(‘改变’,val, this.pagesize);
},
getCurrentPage () {
var{页面,页大小}=oute.query美元;
如果(!页面| | ! pagesize) {
这一点。handlePage(“取代”,页面| | 1 +页大小| | this.pagesize);
返回true;
}
返回错误;
},
handlePage(类型、页面页大小){
美元。路由器(类型)({
路径:route.path美元,
查询:{…。美元的路线。查询页面,页大小},
});
}
},
}
& lt;/script>
& lt; !——“作用域”属性限制CSS添加到该组件>
总=& lt; MyPagination:“总”:页大?耙炒笮 ?页面=耙趁妗?totalPages=皌otalPages @change”=癱hangePage”/比;
方法:{
changePage(页面、页大小){
var _page=this.page,
_pagesize=this.pagesize;
这一点。页面=;
这一点。页大?页大小;
如果(页面!==_page,,页大小| | _pagesize !==页大小)this.fetchData ();//非首次进入页面时再获取分页数据,因为钩在创建子中已经获取过一次了。
},
}
