最近在做一个前后端的博客系统项目,前端选择了用vue和element-ui,现在刚好做出了一个用户管理的页面,所以来记录一下。首先看一下效果先。
能学习到的点有:axios提交请求,element-ui实现分页,vuex,布局等这些知识点。
1.讲解下分页效果实现:
element-ui通过设置不同的属性可以构建出这些分页效果
实际项目中:
div中
data中
注解:其中带:这个的代表绑定了data里面的分页属性:page(共几页),pageSize(每页大小),currentPage(当前页),total(总共有多少条),带@是绑定了某个方法,一般有:实现动态改变每页大小的方法,动态跳转到某页。
getList就是提交了axios请求,只不过是我把它封装好了
基本思路:分页的时候哪些分页的基本属性和方法该懂得,其次就是axios提交请求一块会用。
接下来讲讲axios和vuex
axios的思路:cacheService.js(缓存必要的数据,放入sessionStorage或者localStorage中)--->index.js(配置axios的基信息)--->admin.js(建立axios和vuex中的交互)---->暴露方法供组件调用
1.cacheService.js
大概如此
2.index.js
基本配置
初步的请求
3.admin.js
这个便是配置在vuex中的,每次请求我都可以选择下的将信息保留在vuex中
vue组件中使用的请求方法是通过mapActions,从vuex中的action中获得的。