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

最近为在做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信息)" 获取数据

秒客网

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

相关文章