vue+vuex+json-seiver实现数据展示+分页功能


Posted in Javascript onApril 11, 2019

一丶项目分析

1.UI:

vue+vuex+json-seiver实现数据展示+分页功能

2.接口信息:

vue+vuex+json-seiver实现数据展示+分页功能

二丶项目环境

  • Mockjs:生成模拟数据(含中文名,以及地址)
  • json-server:模拟后端接口
  • webpack-dev-server:开启服务器环境+接口代理
  • jquery:使用jquery的ajax拉取数据
  • vue+vuex:vuex负责数据交互,vue渲染页面
  • iviewui:ui组件,方便布局

搭建开发环境

1.基本环境

  • 安装: npm install --save Mockjs
  • 使用:

详细API:mockjs.com

mock.js
var Mock = require('mockjs')
var fs =require('fs')
var Random = Mock.Random
//保存数据
var arr=[]
//动态生成4W条数据
for(let i=1;i<40000;i++){
 //生成随机项
 let name=Random.cname();
 let age=Mock.mock({"age|1-100": 100 }).age
 let home=Random.province();
 let sex=Random.pick(["男","女"]);
 let education=Random.pick(["初中","高中","专科","本科"]);
 arr.push({"id":i,name,age,home,sex,education})
}
//写入文件
fs.writeFile("db.json", JSON.stringify( {"student": arr}),function(){
 console.log("done")
})

node mock.js 即可生成db.json模拟数据文件

安装: npm install -g json-server

使用:在有db.json(模拟数据的文件夹)下 json-server --watch db.json , 即可在127.0.0.1:3000下看到模拟数据.

vue+vuex+json-seiver实现数据展示+分页功能

4.接口代理

原因:由于我们的页面在8080端口运行,不能跨域访问3000端口的数据信息.所以需要使用webpack-dev-server进行跨域代理.

webpack-config.js文件下添加如下代码:

devServer: {
  proxy: {
   '/api': {
   target: 'http://localhost:3000',
   pathRewrite: {'^/api' : ''}
   }
  }
  }

启动webpack-dev-server npm run dev ,即可在8080端口的api虚拟路径下(127.0.0.1:8080/api/student)看到3000端口的40000条数据了.

vue+vuex+json-seiver实现数据展示+分页功能

5.引入jquery

在index.html中引入jquery

6.Vuex安装,配置

目的:vuex(状态管理器),用于存储管理组件的状态(与UI交互),并与后端进行数据交互

安装: npm install --save vuex

配置:

  • 创建store仓库文件夹,并创建index.js主文件和info.js存储信息的文件
  • index.js文件负责暴露所有store库文件(例如:info.js)
  • info.js文件负责拉取后端数据,以及记录UI组件信息.
//info.js
 export default{
 //命名空间
 namespaced:true,
 //状态管理
 state:{
  arr:[]
 },
 //无副作用方法,唯一用于改变state的地方
 mutations:{
  changeArr(state,{arr}){
   state.arr=arr;
  }
 },
 //副作用方法,用于进行逻辑判断,以及拉取数据
 actions:{
  loadInfo({commit}){
   $.get("/api/student?_limit=10",function(data,statu,xhr){
    commit("changeArr",{arr:data})
   })
  }
 }
}
//index.js
import info from "./info"
export default{
 modules:{
  info
 }
}

在main.js入口文件下引入并使用vuex

//main.js原有基础上中加入如下代码
import Vuex from "vuex";
import store from "./store/index";
Vue.use(Vuex)
new Vue({
 el:"#app",
 render(h){
  return h(App)
 },
 //将store注册到prototype上
 store: new Vuex.Store(store)
})

现在vuex就基本配好了.我们可以在Vue组件上看一下vuex是否配置成功.

//app.vue组件
<template>
 <div>
 //获取Vuex中的数据
  {{$store.state.info.arr}}
 </div>
</template>
<script>
 export default {
  //组件创建时调用loadInfo方法拉取数据
   created(){
  this.$store.dispatch("info/loadInfo")
  } 
 }
</script>

现在就可以打开127.0.0.1:8080页面查看vuex是否完成了

vue+vuex+json-seiver实现数据展示+分页功能

7.iviewui

目的:iview可以有效减少我们花在布局上的精力.

安装: npm install --save iview

配置:

在index.html中引入node_modules\iview\dist\styles\iview.css样式表

<link rel="stylesheet" href="./node_modules/iview/dist/styles/iview.css" rel="external nofollow" >

在入口文件main.js中引用iview组件,并使用

import iview from "iview"; Vue.use(iview)

现在就可以了

以上就是项目的所有配置

以上所述是小编给大家介绍的vue+vuex+json-seiver实现数据展示+分页功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

如果你觉得本文对你有帮助,欢迎转载,请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript的面向对象(二)
Nov 09 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 #Javascript
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 #Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 #jQuery
详解Vue源码学习之双向绑定
Apr 10 #Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 #Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 #Javascript
angular2 NgModel模块的具体使用方法
Apr 10 #Javascript
You might like
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
PHP批量上传图片的具体实现方法介绍.
2014/02/26 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
es5 类与es6中class的区别小结
2020/11/09 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
python常规方法实现数组的全排列
2015/03/17 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
个人求职信范文分享
2014/01/06 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
2014年商场工作总结
2014/11/22 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
行政复议决定书
2015/06/24 职场文书
教师节祝酒词
2015/08/11 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis