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 相关文章推荐
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
Nov 22 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 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多用户计数器代码
2007/03/11 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
jquery实现动态添加附件功能
2018/10/23 jQuery
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
怎样使用Python脚本日志功能
2016/08/14 Python
Python序列操作之进阶篇
2016/12/08 Python
Python 错误和异常代码详解
2018/01/29 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python可视化实现代码
2019/01/15 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
Python 串口通信的实现
2020/09/29 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
周鸿祎:教你写创业计划书
2013/12/30 职场文书
项目合作计划书
2014/01/09 职场文书
《胡杨》教学反思
2014/02/16 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
会计的岗位职责
2014/03/15 职场文书
消防安全承诺书
2014/05/22 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android