mock.js随机数据生成与Express JSON接口跨域配置实战

mock.js与Express接口集成方案

前端开发过程中，通常需要依赖后端提供的接口进行联调。若后端接口尚未开发完成，开发者可以使用mock.js库随机生成模拟数据，以便提前进行页面功能调试。

安装mock.js

创建Node.js项目

首先，使用Express框架创建一个名为demo的Node.js Web项目（具体创建过程此处省略）。


yarn add mockjs

mock.js使用方法

使用mock.js


const Mock = require('mockjs')

var data = Mock.mock({
 'list|2': [{
 'id|+1': 1,
 'color': '@color()',
 'date': '@datetime()',
 'img': '@image()',
 'url': '@url(http)',
 'email': '@email()',
 'name': "@name(1,2)",
 'text': '@paragraph()'
 }]
})
console.log(JSON.stringify(data))

上述示例中使用的随机生成方法，可在mockjs官方文档链接中查阅。Mock.Random对象提供了多种数据生成方法，直接在模板字符串前加上@符号即可调用，使用十分便捷。

输出JSON数据

输出模拟数据


{
 "list": [
 {
  "id": 1,
  "color": "#8179f2",
  "date": "2015-06-22 12:10:08",
  "img": "http://dummyimage.com/250x250",
  "url": "http://hwujcvh.fk/vfrjfmi",
  "email": "y.ahbatuekk@mbkhfybrh.pl",
  "name": "James Ronald Rodriguez",
  "text": "Zsogshtw qjscoe qwggnfk ppbdpqd avftd pvczrvnu gsyfyefm rbnbjyy tgemy buple ieghyjp klcxauofu lhjmnb kjpyodk. Njync ysrvx jevei stawy mcosrlpo iacryqob wkkcfuh nkrrdutr zduikjvtf dcv pppbhi ygjnkmg xvpusp ayu lvu. Wgqmtwvo ibqzp cct kodyh ovz slo cpc uqaseuwv ubjgbf hihh oudly mooztiojpi tubmwhsmb kktbkyqp hsvwgoluu jrkosqudm. Wpumdvtw riytwoa sbittrr xtjy beorkb osnjpigntu ndrgxhozeq iufhu hpuirgmh lstoijpqx hopk lkxceqhvr uymj pgdms njjmu ivxijmokn."
 },
 {
  "id": 2,
  "color": "#94f279",
  "date": "1980-02-20 19:46:44",
  "img": "http://dummyimage.com/336x280",
  "url": "http://voyqj.cx/jjyksqzur",
  "email": "k.ydgui@gixl.cr",
  "name": "Ronald Nancy Harris",
  "text": "Lbdpwqwpgd sodipqu oncnnyis ebtwho dnbt fqxnjyzr qtrriop gfbjt prto dgmtgff gwaqnhon sdlvpxpj pqomfflsc skj. Cvteunoj oqmjnfm vowvmw ypywtr klcazkvg cvsyzayytl bgvywe kfqqzhfg iahm jwury xsgf xnr pvfxwhaed nauookwi xuxtgnwq flcbmnrm qglgziy vegml. Cexit vdotefuj nptmei hekmljnt bukxrd ndhj lkfyjcv oldpgo rrj kprfklt nfks yvrvc. Aynbyd hxguza ftjrn kmlirqo wxald jqjkvahim jnhezpgm usev qbynwhm yotehgkwdg eyxj vfnm icchnds dgmd odxajing vqrdl yhpp eba. Tykxnhe njod bslwbsjcj rwlv rkvxk rypew fpfqrqi psislxuwgs jcwrbtfn qeszy leovhc jwupwzo kitct nhbdhjq xyiajxms. Gfgkw nnlg drcqnpwn bowqknwy oiw yysaohk fqqsbgvp mulik vusikwv nbp kpbo nhti dhf hrgql."
 }
 ]
}

将mock.js集成到Express应用中，用于输出JSON格式的接口数据。


const Mock = require('mockjs')

exports.index = function(req, res) {
 var data = Mock.mock({
 'list|2': [{
  'id|+1': 1,
  'color': '@color()',
  'date': '@datetime()',
  'img': '@image()',
  'url': '@url(http)',
  'email': '@email()',
  'name': "@name(1,2)",
  'text': '@paragraph()'
 }]
 })
 // 延时1秒，模拟网络请求时间
 setTimeout(function() {
 res.send(JSON.stringify(data))
 }, 1000);
}

配置Express跨域

由于接口地址与前端项目地址通常不一致，直接请求会触发浏览器的跨域限制。在Express中可通过设置响应头解决该问题，具体配置如下。


app.all('*', function(req, res, next) {
 res.header("Access-Control-Allow-Origin", "http://localhost:8080");
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
 res.header("X-Powered-By",' 3.2.1')
 res.header("Content-Type", "application/json;charset=utf-8");
 res.header('Access-Control-Allow-Credentials', true);
 next();
});

说明：上述代码参考自网络资源，但需注意网上常见示例往往遗漏了 res.header('Access-Control-Allow-Credentials', true); 这一关键语句，实际配置时应予以补充。

假设前端项目的运行地址为 http://localhost:8080，则 Access-Control-Allow-Origin 响应头的值应设置为 http://localhost:8080。

开发者可根据实际部署的服务器地址，修改上述跨域配置参数。

参考资料

•mockjs官方文档

总结

以上内容介绍了利用mock.js生成随机数据以及通过Express输出JSON接口的方法，旨在帮助开发者解决前后端分离开发中的调试难题。如有疑问，欢迎留言交流，作者将及时回复。

使用mock.js生成随机数据与Express配置JSON接口及跨域处理