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

一丶项目分析

1.UI:

2.接口信息:

二丶项目环境

• 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")
})

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。