vue前后分离---数据模拟

时间:2022-02-05 20:09:50

最近为在做CRM的前期工作,忙里偷闲写了个关于数据模拟方面的东西

主要是现在博客中满天都再说前后分离,但是还没有几个实际操作的---让许多新手{-_-}

方法一:

  启动一个express静态服务器----需要把数据提前准备好放在一个 .json 文件中

  

  第一步:创建mock文件夹,mock文件夹下创建 tree.json 然后随便写点数据上去

  第二步:在 build/dev-server.js中添加

 app.use('/mock',express.static('./mock'))

vue前后分离---数据模拟

第三步:运行

npm run dev

访问 http://localhost:8080/mock/tree.json   如果成功就没啥事了 -----记得改了dev-server一定要重启!!!   否则无效

vue前后分离---数据模拟

请求路径的时候直接"mock/ xxx.json就能获取到了"

缺点:只能是get请求

第二种 : 看着比第一种高大上点

  如果项目不是很大或者前端开发比后端慢的话完全没必要.

  使用到了faker.js + json-server + webpack中的映射

1.0准备

  json-server安装

npm install -g json-server

  faker安装

npm install faker -G

创建mock文件夹 和 faker-data.js    post-to-get.js两个文件

  vue前后分离---数据模拟

faker-data.js

//faker.js语法也是 主要是生成假数据
module.exports = function () {
var faker = require("faker");
faker.locale = "zh_CN";
var _ = require("lodash");
return {
people: _.times(100, function (n) { //100条人类的信息
return {
id: n,
name: faker.name.findName(),
avatar: faker.internet.avatar()
}
}),
address: _.times(100, function (n) { //100条住址的信息
return {
id: faker.random.uuid(),
city: faker.address.city(),
county: faker.address.county()
}
})
}
}
//具体语法看 faker.js的官方文档 ----不是这里讲的重点

官方文档我没打开过,不过你们可以看看这个

https://github.com/marak/Faker.js/     模拟假数据的方式还有很多比如我之前玩过的mock.js嘻嘻   但是这些都不重要

修改 package.json

"mock": "json-server --watch mock/faker-data.js --m mock/post-to-get.js",
"mockdev": "npm run mock & npm run dev"

vue前后分离---数据模拟

添加映射

config/index.js

//映射json-server  post请求到get模拟数据
proxyTable: {
'/api/':{
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite:{
'^/api':''
}
}
}

vue前后分离---数据模拟

基本完活

跑一下试试

npm run mock 
//重新打开一个doc窗口
npm run dev

然后你就可以通过"/api/xxxx(faker-data.js中的people信息或者address信息)" 获取数据