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 相关文章推荐
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
jQuery侧边栏实现代码
May 06 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
JS实现京东商品分类侧边栏
Dec 11 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
PHP程序员编程注意事项
2008/04/10 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python IDLE清空窗口的实例
2018/06/25 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
应届大学生的推荐信
2013/11/20 职场文书
西式婚礼证婚词
2014/01/12 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
2015年科室工作总结
2015/04/10 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python