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

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

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

方法一:

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

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

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

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

第三步:运行

npm run dev

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

请求路径的时候直接"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两个文件

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"

添加映射

config/index.js

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

基本完活

跑一下试试

npm run mock

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

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