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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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
c#中的实现php中的preg_replace
2009/12/21 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
php实现简单的上传进度条
2015/11/17 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
python self,cls,decorator的理解
2009/07/13 Python
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
在django中自定义字段Field详解
2019/12/03 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
Why do we need Unit test
2013/01/03 面试题
培训心得体会
2013/12/29 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
办公室主任个人总结
2015/02/28 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
python函数的两种嵌套方法使用
2022/04/02 Python