环境仿真 - 返回模拟数据

本文导航

  1. 解释
  2. 何时会调用mock-data的数据？
  3. 模拟数据要赋值到module.exports

  • 作者：KK

  • 发表日期：2016.6.24

在gulpfile.js相同目录下创建一个mock-data目录，里面放一个user-info.json.js，写上这样的代码：

module.exports = {
	id : 111,
	name : 'Jay',
	age : 18,
	add_time : '2012-12-12 12:12:12'
};

前端页面添加如下ajax代码：

$.get('/user-info.json', function(data){
	alert(data.name + data.age + '岁');
});

访问http://127.0.0.1/页面把它运行起来，于是就成功请求到了数据

解释

请求xxx.json的时候，mock服务器会去mock-data目录下找这个xxx.json.js，后面会附加个.js后缀

其实就算你在dist目录下放一个user-info.json，里面直接写{age:18}，也是能请求到，只是这样不是很好，因为整个dist目录都可以打包发布的，如果多了些json文件的话一是有干扰，二是又要排除，比较麻烦，还是提议放去mock-data里面，因为在mock-data里是JS代码，可以做数据计算

何时会调用mock-data的数据？

很简单，当请求一个dist目录下不存在的文件时就会跑去mock-data目录找，所以我通常请求"/login.do"去读取"mock-data/login.do.js"的返回值

请求"/user/add.php"去读取"mock-data/user/add.php.js"的返回值

模拟数据要赋值到module.exports

就像上面演示的模拟数据一样，要执行

module.exports = 数据;

这里的数据可以是数组也可以是对象，最终会被mock服务器转换成JSON字符串返回给浏览器

如果不向module.exports赋值则前端无法得到数据，比如你仅仅是这么写：

{
	id : 111,
	name : 'Jay',
	age : 18,
	add_time : '2012-12-12 12:12:12'
}

是没用的，我猜来看的读者多半是了解服务器的人，不会不知道这是咋回事~