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

12360技术网 - 专业IT技术发表平台

 立即注册  找回密码
查看: 7269|回复: 3

Mock Restful Api工程化

[复制链接]

17

主题

22

帖子

166

积分

注册会员

Rank: 2

积分
166
发表于 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

主题

10

帖子

220

积分

中级会员

Rank: 3Rank: 3

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

使用道具 举报

0

主题

12

帖子

262

积分

中级会员

Rank: 3Rank: 3

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

使用道具 举报

0

主题

14

帖子

304

积分

中级会员

Rank: 3Rank: 3

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

使用道具 举报

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

本版积分规则

12360技术网

GMT+8, 2020-2-22 11:59 , Processed in 0.086820 second(s), 25 queries .

本网站内容收集于互联网,Www.12360.Co不承担任何由于内容的合法性及健康性所引起的争议和法律责任。 欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。

© 2019-2020 Www.12360.Co

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