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使用递归解析xml
Dec 12 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
js实现文字超出部分用省略号代替实例代码
Sep 01 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
JavaScript构造函数原理及实现流程解析
Nov 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
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
前端构建工具之gulp的语法教程
2017/06/12 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
Python进阶-函数默认参数(详解)
2017/05/18 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
详解python itertools功能
2020/02/07 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
UNIX特点都有哪些
2016/04/05 面试题
商务英语毕业生自荐信范文
2013/11/08 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
西游记读书笔记
2015/06/25 职场文书
导游词之山东八大关
2019/12/18 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
MySQL分区路径子分区再分区
2022/04/13 MySQL