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

一丶项目分析

为廉江等地区用户提供了全套网页设计制作服务，及廉江网站建设行业解决方案。主营业务为网站制作、成都网站制作、廉江网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

1.UI:

2.接口信息:

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

二丶项目环境

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

搭建开发环境

1.基本环境

Vue起步(无cli)

安装: 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是否配置成功.