搭建本地 mock 服務

搭建本地 mock 服務器 ---爲了更好的前端開發

工做中，有時候前端的不少工做須要後端的支持，可是可能後端的接口尚未開發完，或者有些時候在聯調階段，修復某個 bug 的時候，環境掛了。。。 那麼這個時候，咱們的不少工做沒法順利的進行下去。因而萌生了搭建本地服務器的想法。

首先粗略的說一下它的好處

• 前端更加獨立，在開發階段對於後端的依賴性大大下降。
• 聯調和開發截斷，對於新增長的接口，只須要後端提供接口文檔就好，不須要等到他們真正的開發完成，前端就能夠本身進入聯調。
• 修復和定位 bug 更加便捷，自測階段中對於某些極端的邊界條件，咱們本身就能夠實現構造數據，模擬邊界條件。

mock 數據的方式（這裏我提供了三種，可自行選擇）

在線 mock 網址： Easy mock （缺點: 當須要修改大量數據和新增不少 api 的時候，比較繁瑣）

jsonserver+gulp 實現（ 缺點：大部分需求都能知足，可是對於須要動態解析參數的接口，支持的不夠完美 ）

node+express 實現 （ 可實現幾乎全部接口的狀況，可是配置起來比第二種麻煩 ）

EasyMock

官網提供詳細的文檔和說明，上手比較快，可是對於保密性比較強的公司，建議捨棄這種方式。

JsonServer+Gulp+MockJs

技術選型

• JsonSever 開啓端口，提供服務。
• Gulp 實現監聽文件和熱更新的功能。
• MockJs 一個成熟的 mock 數據平臺，經過其提供的 api，能夠快速的生成大量測試數據。
• babel 配置 es6語法。

項目目錄預覽

介紹

1. api 爲數據文件夾，配置不一樣的項目所須要的不一樣接口以及其返回值，在 index中進行繼承 而後暴露給 mock/db 下 最後暴露給 server。（這個能夠自行更改，只要最後暴露出去就能夠 api/project.projectOne

let projectOne = {
  'getList': {
    code: '0',
    data: [{
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer']
    }, {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser']
    }, {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher']
    }]
  },
  getInfo: {
    error_no: 0,
    errMessage: '',
    data: {
      info: {
        'name': 'BeJson',
        'url': 'http://www.bejson.com',
        'page': 88,
        'isNonProfit': true,
        'address': {
          'street': '科技園路.',
          'city': '江蘇蘇州',
          'country': '中國'
        },
        'links': [{
          'name': 'Google',
          'url': 'http://www.google.com'
        },
        {
          'name': 'Baidu',
          'url': 'http://www.baidu.com'
        },
        {
          'name': 'SoSo',
          'url': 'http://www.SoSo.com'
        }
        ]
      }
    }
  }
}

module.exports = {
  ...projectOne
}

複製代碼

api/index (支持 es5 和 es6共存寫法)

const test = require('./test/test.js')
import projectOne from './project/projectOne'

module.exports = {
  ...test,
  ...projectOne
}

複製代碼

2. mock 文件夾 集中 mock 平臺，咱們想要經過 mock 平臺生成的接口放在這個文件夾。 mock/db.js

// var Mock = require('mockjs')
import Mock from 'mockjs'
var api = require('../api')

module.exports = {
  ...api,
  getComment: Mock.mock({
    'error': 0,
    'message': 'success',
    'result|40': [{
      'author': '@name',
      'comment': '@cparagraph',
      'date': '@datetime'
    }]
  }),
  addComment: Mock.mock({
    'error': 0,
    'message': 'success',
    'result|5': [{
      'comment': '@cparagraph'
    }]
  }),
  // post/1 和post/2 返回不一樣的內容
  'posts': [{
      'id': 1,
      'title': 'json-server',
      'author': 'typicode'
    },
    {
      'id': 2,
      'title': 'json-server',
      'author': 'typicode'
    }
  ],
  'comments': [{
    'id': 1,
    'body': 'some comment',
    'postId': 1
  }],
  'profile': {
    'name': 'typicode'
  }
}

複製代碼

3. router文件夾 大體結構和 api 文件夾類似，暴露路由（支持 es6 和 es5 的寫法共存）

import test from './test/test'
const projectOne = require('./project/projectOne')

module.exports = {
  ...test,
  ...projectOne
}
複製代碼

router/project/projectOne

module.exports = {
  '/localMock/*': '/$1',
  '/localMock/getList': '/getList',
  '/localMock/getInfo': '/getInfo',
  /* 若是沒有'/localMock/*': '/$1', 下面接口鏈接沒法訪問到 */
  '/localMock/getInfo?123456+.2345.3434': '/getInfo'
}

複製代碼

4. gulpfile 提供監聽文件和接口熱更新的功能
5. main.js 中 提供babel 配置 es6 的寫法
6. server.js 中 啓動端口，配置路由和接口返回值。

運行預覽

如何運行？

localMock項目地址

git clone https://github.com/majunchang/localMock.git
    cd localMock
    npm i 
    npm dev | npm run start | npm run mock (均可以啓動)
    npm run gulp ( 啓動而且能夠熱更新 )

複製代碼

在查詢了關於jsonserver 的 router 配置方式之後，總感受對於動態執行參數的接口支持的不太好，因而就有了 nodemock（什麼分頁，什麼查詢等，處理起來就是一把梭！ 複製粘貼 就是剛！）

NodeMock(node+express+嗯？...)

項目目錄

• api 配置接口以及接口返回值（相似與上面的 localmock 的配置）

api/projectOne

import Mock from 'mockjs'

let projectOne = {
  getme: {
    name: 'xiaohong',
    age: 21,
    gender: '男',
    xuexi: 'cha11'
  },
  getshe: Mock.mock({
    'error': 0,
    'message': 'success',
    'result|1': [{
      'author': '@name',
      'comment': '@cparagraph',
      'date': '@datetime'
    }]
  }),
  liyitong: Mock.mock({
    'error': 0,
    'message': 'success',
    'result|3': [{
      'author': '@name',
      'comment': '@cparagraph',
      'date': '@datetime'
    }]
  })
}

export default projectOne

複製代碼

• controller 配置動態查詢參數的請求 示例中給出了 get 和 post 的兩種狀況

controller/project.js

import Mock from 'mockjs'

export function test(req, res) {
  var arr = Mock.mock({
    'error': 0,
    'message': 'success',
    'result|10': [{
      'author': '@name',
      'comment': '@cparagraph',
      'date': '@datetime'
    }]
  })
  res.json({
    arr
  })
}

export function geturl(req, res) {
  // 對於接口中的 get 參數 咱們使用 query 獲取便可
  const {
    num
  } = req.query
  res.json({
    name: 111,
    age: 11,
    message: req.originalUrl,
    num: `get 請求中的接口 num 爲${num}`,
  })
}


export function postUrl(req, res) {
  // 針對普通的 post 請求 若是是表單格式的須要單獨配置一下
  res.json({
    name: `post 請求的接口中，post參數爲${req.body}`,
    age: 11,
    message: req.originalUrl,
  })
}


複製代碼

• router 中爲路由配置
• app.js 啓動端口服務，接受路由和接口配置
• main.js babel 配置es6 語法

運行預覽

這個項目，沒有預覽全部接口的功能。感興趣的讀者能夠本身添加(當訪問指定連接時，獲取router 中的信息 進行展現出來，解決方法不惟一，能夠查文檔 本身添加)。

項目啓動

項目地址

git clone https://github.com/majunchang/node-mock

cd node-mock
npm i 
npm run dev 

複製代碼