请选择 进入手机版 | 继续访问电脑版

登录  | 立即注册

游客您好!登录后享受更多精彩

查看: 7283|回复: 8

Mock Restful Api工程化

[复制链接]

17

主题

30

帖子

334

积分

中级会员

Rank: 3Rank: 3

积分
334
发表于 2020-1-27 14:21:59 | 显示全部楼层 |阅读模式
1.前言

​        在前后端分离开发过程中,为了避免前端开发完成而后端接口还未跟上进度时,往往会用mock来模拟接口数据。可以选择用第三方mock平台,也可以选择自己搭建mock服务。这里我将给出一个简易的mock restful api服务源代码(node.js实现)。
​        更多mock相关内容参考mock.js官方http://mockjs.com/
2.代码实现

2.1 目录结构




2.2 包依赖:package.json
  1. {  "name": "mock-server",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo "Error: no test specified" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "express": "^4.16.4",    "mockjs": "^1.0.1-beta3",    "nodemon": "^1.18.10"  }}
复制代码
2.3  mock-server.js代码部分(服务器主要逻辑)
  1. const path = require('path') // 引入path模块const fs = require('fs') // 引入fs模块const express = require('express') // 引入express模块const bodyParser = require('body-parser') // body-parser中间件解析post请求const app = express() // 实例化expressconst mockData = {} // mock数据// www-form-urlencodedapp.use(bodyParser.urlencoded({  extended: true}))// // application/json// app.use(bodyParser.json());// 判断是否是文件夹function isFileExists (filePath) {  const stat = fs.lstatSync(filePath)  return stat.isDirectory()}// 读取mock目录下的所有文件,组装mockDatafunction readMockDir (dir) {  fs.readdirSync(dir).forEach(function (file) {    let _path = path.join(dir + '/' + file)    if (isFileExists(_path)) {      readMockDir(_path)    } else {      Object.assign(mockData, require(_path))    }  })}readMockDir(path.join(__dirname + '/mock'))// 遍历mockData对象,// 获取每个接口的路径(url)和方法(method),// 并通过express调用mock数据for (let key in mockData) {  let _key = key.replace(/(^\s*)|(\s*$)/g, '')  let _method = 'get'  let _url = _key.replace(/^(get|post|put|delete)\s*/i, function (rs, $1) {    _method = $1.toLowerCase()    return ''  })  app[_method](_url, mockData[key])}// 监听8090端口app.listen('8090', function () {  console.log('MOCK Server is running at http://localhost:8090')})
复制代码
2.4 mock-start.js(入口,开启守护进程)
  1. const path = require('path') // 引入path模块const fs = require('fs') // 引入fs模块const express = require('express') // 引入express模块const bodyParser = require('body-parser') // body-parser中间件解析post请求const app = express() // 实例化expressconst mockData = {} // mock数据// www-form-urlencodedapp.use(bodyParser.urlencoded({  extended: true}))// // application/json// app.use(bodyParser.json());// 判断是否是文件夹function isFileExists (filePath) {  const stat = fs.lstatSync(filePath)  return stat.isDirectory()}// 读取mock目录下的所有文件,组装mockDatafunction readMockDir (dir) {  fs.readdirSync(dir).forEach(function (file) {    let _path = path.join(dir + '/' + file)    if (isFileExists(_path)) {      readMockDir(_path)    } else {      Object.assign(mockData, require(_path))    }  })}readMockDir(path.join(__dirname + '/mock'))// 遍历mockData对象,// 获取每个接口的路径(url)和方法(method),// 并通过express调用mock数据for (let key in mockData) {  let _key = key.replace(/(^\s*)|(\s*$)/g, '')  let _method = 'get'  let _url = _key.replace(/^(get|post|put|delete)\s*/i, function (rs, $1) {    _method = $1.toLowerCase()    return ''  })  app[_method](_url, mockData[key])}// 监听8090端口app.listen('8090', function () {  console.log('MOCK Server is running at http://localhost:8090')})
复制代码
2.5 一个测试实例
  1. const Mock = require('mockjs')let getApi1Data = (req) => {  // console.log(req.query);  return Mock.mock({    'data|1-9': [{      'name|5-8': /[a-zA-Z]/,      'id|+1': 1,      'value|0-500': 0,      'age|1-100': 1    }]  })}module.exports = {  [`GET /api1`] (req, res) {    res.status(200).json(getApi1Data(req))  }}
复制代码
2.6 启动命令

(在mock-server目录下)
npm install          (安装依赖)
node mock-start.js   (开启服务)
2.7结果截图



                                                                                                                                       
                                                    
  • 点赞                        1                        
  • 收藏                        
  • 分享                                                                                                                        
  •                                                         
                                      
    • 文章举报                           
                                                
                                                                        
                                            
                                                        梓川祢豆子                                                                发布了19 篇原创文章 · 获赞 4 · 访问量 4029                                                                                            私信                                                            关注
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x




上一篇:HTML实现网页内部的跳转
下一篇:前端=>js=>cookie(js)
回复

使用道具 举报

0

主题

15

帖子

325

积分

中级会员

Rank: 3Rank: 3

积分
325
发表于 2020-1-28 18:19:41 | 显示全部楼层
这个帖子不回对不起自己![www.12360.co]
回复

使用道具 举报

0

主题

24

帖子

514

积分

高级会员

Rank: 4

积分
514
发表于 2020-2-3 03:31:32 | 显示全部楼层
既然你诚信诚意的推荐了,那我就勉为其难的看看吧![www.12360.co]
回复

使用道具 举报

0

主题

27

帖子

577

积分

高级会员

Rank: 4

积分
577
发表于 2020-2-11 00:42:18 | 显示全部楼层
其实我一直觉得楼主的品味不错!呵呵![www.12360.co]
回复

使用道具 举报

0

主题

35

帖子

745

积分

高级会员

Rank: 4

积分
745
发表于 2020-2-24 03:42:47 | 显示全部楼层
楼主太厉害了!楼主,I*老*虎*U![www.12360.co]
回复

使用道具 举报

0

主题

16

帖子

346

积分

中级会员

Rank: 3Rank: 3

积分
346
发表于 2020-2-24 17:25:57 | 显示全部楼层
楼主,我太崇拜你了![www.12360.co]
社区不能没有像楼主这样的人才啊!
回复

使用道具 举报

0

主题

28

帖子

598

积分

高级会员

Rank: 4

积分
598
发表于 2020-3-11 11:48:23 | 显示全部楼层
我看不错噢 谢谢楼主![www.12360.co]
回复

使用道具 举报

0

主题

10

帖子

220

积分

中级会员

Rank: 3Rank: 3

积分
220
发表于 2020-3-17 02:49:16 | 显示全部楼层
感谢楼主的无私分享![www.12360.co]
回复

使用道具 举报

0

主题

20

帖子

430

积分

中级会员

Rank: 3Rank: 3

积分
430
发表于 4 天前 | 显示全部楼层
这东西我收了!谢谢楼主![www.12360.co]
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

动物之森

GMT+8, 2020-3-30 15:12 , Processed in 0.084511 second(s), 26 queries .

www.12360.co 集合吧!动物之森

Copyright © 2019-2020.

快速回复 返回顶部 返回列表