首页
前端开发
Webpack
Vue+Vuex+JSON Server实现分页数据展示

Vue+Vuex+JSON Server实现分页数据展示

0 次浏览 0 条评论
pdf
pdf

vue+vuex+json-server 这套组合挺适合做前端练手项目的，尤其是那种需要模拟接口、分页展示数据的场景，写起来顺手。项目里用的是比较经典的做法：用json-server配Mockjs搞定数据，vuex负责状态管理，页面交互就靠Vue和iview撑起来，整体思路清晰，响应也快。

数据展示这块，分页逻辑得还不错，配合iview的分页组件，前端控制和求都做了。你可以看看这个组件的实现思路：Vue 分页组件改写版.vue，比较实用，适合照着抄来用。

接口这块用json-server模拟了完整的 REST API，连GET分页、POST新增、DELETE删除这些基本操作都带了，和真实接口环境还挺接近。要是对json-server不熟，可以参考这个教程：json-server 模拟后端接口(教程)，入门挺快的。

整个项目没用vue-cli，走的是“裸配”路线。Webpack 环境自己配，webpack-dev-server也用了，搞了接口代理，挺适合你对底层配置有点要求的时候玩一玩。

另外Mockjs也蛮方便的，生成中文名、地址那些挺有用，写表格类页面或者用户管理的 demo 正合适。你可以试试：

Mock.mock('/api/users', {
  'list|10': [{
    'name': '@cname',
    'address': '@county(true)'
  }]
})

如果你正在找一个能练分页、接口求、状态管理的轻项目，这个组合还挺合适的。用的时候注意json-server对_page和_limit参数的支持，能省不少事。

pdf 文件大小：121.42KB