Element-ui实用工具之axios请求和分页

最近在做一个前后端的博客系统项目,前端选择了用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中获得的。

刚开始写关于技术性整理的文章,因为代码量的问题,梳理起来不太容易,内容也多,有兴趣的可以一起交流。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,187评论 0 1
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    流觞小菜鸟阅读 1,849评论 2 8
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    王喂马_阅读 6,488评论 1 77
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    你猜_3214阅读 11,201评论 0 118
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    随行者pgl阅读 3,367评论 0 15