第2章 API文檔與模擬數(shù)據(jù)接口

學(xué)習(xí)目標(biāo)：

• 理解RESTful架構(gòu)
• 運用Swagger編寫API文檔
• 掌握Mock.js基本語法
• 運用easyMock實現(xiàn)模擬接口的編寫

1 RESTful

1.1 什么是RESTful架構(gòu)

? RESTful架構(gòu)，就是目前最流行的一種互聯(lián)網(wǎng)軟件架構(gòu)。它結(jié)構(gòu)清晰、符合標(biāo)準(zhǔn)、易于理解、擴展方便，所以正得到越來越多網(wǎng)站的采用。REST這個詞，是Roy Thomas Fielding在他2000年的博士論文中提出的

[圖片上傳失敗...(image-17dcb7-1567045997182)]

? Fielding是一個非常重要的人，他是HTTP協(xié)議（1.0版和1.1版）的主要設(shè)計者、Apache服務(wù)器軟件的作者之一、Apache基金會的第一任主席。所以，他的這篇論文一經(jīng)發(fā)表，就引起了關(guān)注，并且立即對互聯(lián)網(wǎng)開發(fā)產(chǎn)生了深遠(yuǎn)的影響。

? Fielding將他對互聯(lián)網(wǎng)軟件的架構(gòu)原則，定名為REST，即Representational State Transfer的縮寫。我對這個詞組的翻譯是"表現(xiàn)層狀態(tài)轉(zhuǎn)化"。如果一個架構(gòu)符合REST原則，就稱它為RESTful架構(gòu)。

1.2 理解RESTful架構(gòu)

要理解RESTful架構(gòu)，最好的方法就是去理解Representational State Transfer這個詞組到底是什么意思，它的每一個詞代表了什么涵義。

（1）資源（Resources）

REST的名稱"表現(xiàn)層狀態(tài)轉(zhuǎn)化"中，省略了主語。"表現(xiàn)層"其實指的是"資源"（Resources）的"表現(xiàn)層"。

所謂"資源"，就是網(wǎng)絡(luò)上的一個實體，或者說是網(wǎng)絡(luò)上的一個具體信息。它可以是一段文本、一張圖片、一首歌曲、一種服務(wù)，總之就是一個具體的實在。你可以用一個URI（統(tǒng)一資源定位符）指向它，每種資源對應(yīng)一個特定的URI。要獲取這個資源，訪問它的URI就可以，因此URI就成了每一個資源的地址或獨一無二的識別符。

所謂"上網(wǎng)"，就是與互聯(lián)網(wǎng)上一系列的"資源"互動，調(diào)用它的URI。

（2）表現(xiàn)層（Representation）

"資源"是一種信息實體，它可以有多種外在表現(xiàn)形式。我們把"資源"具體呈現(xiàn)出來的形式，叫做它的"表現(xiàn)層"（Representation）。

比如，文本可以用txt格式表現(xiàn)，也可以用HTML格式、XML格式、JSON格式表現(xiàn)，甚至可以采用二進制格式；圖片可以用JPG格式表現(xiàn)，也可以用PNG格式表現(xiàn)。

URI只代表資源的實體，不代表它的形式。嚴(yán)格地說，有些網(wǎng)址最后的".html"后綴名是不必要的，因為這個后綴名表示格式，屬于"表現(xiàn)層"范疇，而URI應(yīng)該只代表"資源"的位置。它的具體表現(xiàn)形式，應(yīng)該在HTTP請求的頭信息中用Accept和Content-Type字段指定，這兩個字段才是對"表現(xiàn)層"的描述。

（3）狀態(tài)轉(zhuǎn)化（State Transfer）

訪問一個網(wǎng)站，就代表了客戶端和服務(wù)器的一個互動過程。在這個過程中，勢必涉及到數(shù)據(jù)和狀態(tài)的變化。

互聯(lián)網(wǎng)通信協(xié)議HTTP協(xié)議，是一個無狀態(tài)協(xié)議。這意味著，所有的狀態(tài)都保存在服務(wù)器端。因此，如果客戶端想要操作服務(wù)器，必須通過某種手段，讓服務(wù)器端發(fā)生"狀態(tài)轉(zhuǎn)化"（State Transfer）。而這種轉(zhuǎn)化是建立在表現(xiàn)層之上的，所以就是"表現(xiàn)層狀態(tài)轉(zhuǎn)化"。

客戶端用到的手段，只能是HTTP協(xié)議。具體來說，就是HTTP協(xié)議里面，四個表示操作方式的動詞：GET、POST、PUT、DELETE。它們分別對應(yīng)四種基本操作：GET用來獲取資源，POST用來新建資源（也可以用于更新資源），PUT用來更新資源，DELETE用來刪除資源。

綜合上面的解釋，我們總結(jié)一下什么是RESTful架構(gòu)：

（1）每一個URI代表一種資源；

（2）客戶端和服務(wù)器之間，傳遞這種資源的某種表現(xiàn)層；

? 　（3）客戶端通過四個HTTP動詞，對服務(wù)器端資源進行操作，實現(xiàn)"表現(xiàn)層狀態(tài)轉(zhuǎn)化"。

1.3 常見錯誤

（1）URI包含動詞

POST /accounts/1/transfer/500/to/2

正確的寫法是把動詞transfer改成名詞transaction

（2）URI包含版本

http://www.example.com/app/1.0/foo

http://www.example.com/app/1.1/foo

http://www.example.com/app/2.0/foo

因為不同的版本，可以理解成同一種資源的不同表現(xiàn)形式，所以應(yīng)該采用同一個URI。版本號可以在HTTP請求頭信息的Accept字段中進行區(qū)分

Accept: vnd.example-com.foo+json; version=1.0

Accept: vnd.example-com.foo+json; version=1.1

Accept: vnd.example-com.foo+json; version=2.0

2 運用Swagger編寫API文檔

2.1 Swagger

2.1.1什么是Swagger

? 隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，現(xiàn)在的網(wǎng)站架構(gòu)基本都由原來的后端渲染，變成了：前端渲染、先后端分離的形態(tài)，而且前端技術(shù)和后端技術(shù)在各自的道路上越走越遠(yuǎn)。
? 前端和后端的唯一聯(lián)系，變成了API接口；API文檔變成了前后端開發(fā)人員聯(lián)系的紐帶，變得越來越重要，swagger就是一款讓你更好的書寫API文檔的框架。

2.1.2 SwaggerEditor安裝與啟動

（1）下載 https://github.com/swagger-api/swagger-editor/releases/download/v2.10.4/swagger-editor.zip。我在資源中已經(jīng)提供。

（2）解壓swagger-editor,

（3）全局安裝http-server(http-server是一個簡單的零配置命令行http服務(wù)器)

npm install -g http-server

（4）啟動swagger-editor

http-server swagger-editor

（5）瀏覽器打開： http://localhost:8080

[圖片上傳失敗...(image-f209cf-1567045997182)]

2.1.3 語法規(guī)則

（1）固定字段

（2）字段類型與格式定義

2.2 基礎(chǔ)模塊-城市API文檔

2.2.1 新增城市

編寫新增城市的API , post提交城市實體

URL： /city

Method: post

編寫后的文檔內(nèi)容如下：

[圖片上傳失敗...(image-5ada45-1567045997182)]

代碼如下：

swagger: '2.0'
info:
  version: "1.0.0"
  title: 基礎(chǔ)模塊-城市API
basePath: /base
host: api.tensquare.com
paths:
  /city:
    post:
      summary: 新增城市
      parameters:
        - name: "body"
          in: "body"
          description: 城市實體類
          required: true
          schema:
            $ref: '#/definitions/City'
      responses:
        200:
          description: 成功
          schema:
            $ref: '#/definitions/ApiResponse'
definitions:
  City: 
    type: object
    properties: 
      id: 
        type: string
        description: "ID"
      name:
        type: string
        description: "名稱"
      ishot:
        type: string
        description: 是否熱門
  ApiResponse: 
    type: object
    properties: 
      flag: 
        type: boolean
        description: 是否成功
      code:
        type: integer
        format: int32
        description: 返回碼
      message:
        type: string
        description: 返回信息

編輯后可以在右側(cè)窗口看到顯示的效果

2.2.2 修改城市

URL： /city/{cityId}

Method: put

編寫后的文檔內(nèi)容如下：

[圖片上傳失敗...(image-8de3c4-1567045997182)]

代碼如下：

  /city/{cityId}:
    put:
      summary: 修改城市
      parameters:
        - name: cityId
          in: path
          description: 城市ID
          required: true
          type: string
        - name: body
          in: body
          description: 城市
          schema:
            $ref: '#/definitions/City'
      responses:
        200:
          description: 成功響應(yīng)
          schema:
            $ref: '#/definitions/ApiResponse'  

2.2.3 刪除城市

刪除城市地址為/city/{cityId} ，與修改城市的地址相同，區(qū)別在于使用delete方法提交請求

[圖片上傳失敗...(image-6883e5-1567045997182)]

代碼如下： （/city/{cityId} 下增加delete）

    delete:
      summary: 根據(jù)ID刪除
      description: 返回是否成功
      parameters:
        - name: cityId
          in: path
          description: 城市ID
          required: true
          type: string
      responses:
        '200':
          description: 成功
          schema:
            $ref: '#/definitions/ApiResponse'

2.2.4 根據(jù)ID查詢城市

URL: /city/{cityId}

Method: get

返回的內(nèi)容結(jié)構(gòu)為： {flag:true,code:20000, message:"查詢成功",data: {.....} }

data屬性返回的是city的實體類型

[圖片上傳失敗...(image-2dd4dd-1567045997182)]

代碼實現(xiàn)如下：

（1）在definitions下定義城市對象的響應(yīng)對象

  ApiCityResponse:
    type: "object"
    properties:
      code:
        type: "integer"
        format: "int32"
      flag:
        type: "boolean"
      message:
        type: "string"
      data:
        $ref: '#/definitions/City'

（2）/city/{cityId} 下新增get方法API

    get:
      summary: 根據(jù)ID查詢
      description: 返回一個城市
      parameters:
        - name: cityId
          in: path
          description: 城市ID
          required: true
          type: string
      responses:
        '200':
          description: 操作成功
          schema:
            $ref: '#/definitions/ApiCityResponse'

2.2.5 城市列表

URL: /city

Method: get

返回的內(nèi)容結(jié)構(gòu)為： {flag:true,code:20000, message:"查詢成功",data:[{.....},{.....},{.....}] }

data屬性返回的是city的實體數(shù)組

[圖片上傳失敗...(image-9ae8d3-1567045997182)]

實現(xiàn)步驟如下：

（1）在definitions下定義城市列表對象以及相應(yīng)對象

  CityList:
    type: "array"
    items: 
      $ref: '#/definitions/City'
  ApiCityListResponse:
    type: "object"
    properties:
      code:
        type: "integer"
        format: "int32"
      flag:
        type: "boolean"
      message:
        type: "string"
      data:
        $ref: '#/definitions/CityList'

（2）在/city增加get

    get:
      summary: "城市全部列表"
      description: "返回城市全部列表"
      responses:
        200:
          description: "成功查詢到數(shù)據(jù)"
          schema: 
            $ref: '#/definitions/ApiCityListResponse'

2.2.6 根據(jù)條件查詢城市列表

實現(xiàn)API效果如下:

[圖片上傳失敗...(image-68b1ed-1567045997182)]

代碼如下：

  /city/search:
    post:
      summary: 城市列表(條件查詢)
      parameters:
        - name: body
          in: body
          description: 查詢條件
          required: true
          schema:
            $ref: "#/definitions/City"
      responses:
        200:
          description: 查詢成功
          schema:
            $ref: '#/definitions/ApiCityListResponse'

2.2.7 城市分頁列表

實現(xiàn)API效果如下：

[圖片上傳失敗...(image-83bec6-1567045997182)]

實現(xiàn)如下：

（1）在definitions下定義城市分頁列表響應(yīng)對象

  ApiCityPageResponse:
    type: "object"
    properties:
      code:
        type: "integer"
        format: "int32"
      flag:
        type: "boolean"
      message:
        type: "string"
      data:
        properties:
          total:
            type: "integer"
            format: "int32"
          rows:
            $ref: '#/definitions/CityList'

（2）新增節(jié)點

  /city/search/{page}/{size}:
    post:
      summary: 城市分頁列表
      parameters:
        - name: page
          in: path
          description: 頁碼
          required: true
          type: integer
          format: int32
        - name: size
          in: path
          description: 頁大小
          required: true
          type: integer
          format: int32
        - name: body
          in: body
          description: 查詢條件
          required: true
          schema:
            $ref: "#/definitions/City"
      responses:
        200:
          description: 查詢成功
          schema:
            $ref: '#/definitions/ApiCityPageResponse'

2.3 批量生成API文檔

我們使用《黑馬程序員代碼生成器》自動生成所有表的yml文檔

自動生成的文檔中類型均為string ，我們這里需要再對類型進行修改即可。

步驟：

（1）執(zhí)行建表腳本

（2）使用《黑馬程序員代碼生成器》生成腳本

2.4 其它模塊API

請學(xué)員參見本章的擴展文檔來實現(xiàn)部分功能。

2.5 SwaggerUI

SwaggerUI是用來展示Swagger文檔的界面，以下為安裝步驟

（1）在本地安裝nginx

（2）下載SwaggerUI源碼 https://swagger.io/download-swagger-ui/

（3）解壓，將dist文件夾下的全部文件拷貝至 nginx的html目錄

（4）啟動nginx

（5）瀏覽器打開頁面 http://localhost即可看到文檔頁面

[圖片上傳失敗...(image-743281-1567045997182)]

（6）我們將編寫好的yml文件也拷貝至nginx的html目錄，這樣我們就可以加載我們的swagger文檔了

[圖片上傳失敗...(image-3b9ef3-1567045997182)]

3 Mock.js

3.1 什么是Mock.js

Mock.js （官網(wǎng)http://mockjs.com/）是一款模擬數(shù)據(jù)生成器，旨在幫助前端攻城師獨立于后端進行開發(fā)，幫助編寫單元測試。提供了以下模擬功能：

根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)

模擬 Ajax 請求，生成并返回模擬數(shù)據(jù)

基于 HTML 模板生成模擬數(shù)據(jù)

Mock.js具有以下特點：

前后端分離

讓前端攻城師獨立于后端進行開發(fā)。

增加單元測試的真實性

通過隨機數(shù)據(jù)，模擬各種場景。

開發(fā)無侵入

不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應(yīng)數(shù)據(jù)。

用法簡單

符合直覺的接口。

數(shù)據(jù)類型豐富

支持生成隨機的文本、數(shù)字、布爾值、日期、郵箱、鏈接、圖片、顏色等。

方便擴展

支持支持?jǐn)U展更多數(shù)據(jù)類型，支持自定義函數(shù)和正則。

3.2 Mock.js安裝

在命令提示符下用npm安裝mockjs

cnpm install mockjs

3.3 快速入門

需求：生成列表數(shù)據(jù)，數(shù)據(jù)條數(shù)為5條。

顯示效果如下：

{
    "list": [
        {
            "id": 1,
            "name": "測試"
        },
        {
            "id": 1,
            "name": "測試"
        },
        {
            "id": 1,
            "name": "測試"
        },
        {
            "id": 1,
            "name": "測試"
        },
        {
            "id": 1,
            "name": "測試"
        }
    ]
}

新建demo1.js 代碼如下

let Mock=require('mockjs')
let data=Mock.mock({
    'list|5':[
        {
            'id':1,
            'name':'測試'
        }
    ]
})
console.log(JSON.stringify(data,null,2 ))

執(zhí)行命令node demo1 查看運行效果。

我們在本例中產(chǎn)生了5條相同的數(shù)據(jù)，這些數(shù)據(jù)都是相同的，如果我們需要讓這些數(shù)據(jù)是按照一定規(guī)律隨機生成的，需要按照Mock.js的語法規(guī)范來定義。

Mock.js 的語法規(guī)范包括兩部分：

1.數(shù)據(jù)模板定義規(guī)范（Data Template Definition，DTD）

2.數(shù)據(jù)占位符定義規(guī)范（Data Placeholder Definition，DPD）

3.4 數(shù)據(jù)模板定義規(guī)范DTD

數(shù)據(jù)模板中的每個屬性由 3 部分構(gòu)成：屬性名、生成規(guī)則、屬性值

// 屬性名   name
// 生成規(guī)則 rule
// 屬性值   value
'name|rule': value

屬性名 和 生成規(guī)則 之間用豎線 | 分隔。

生成規(guī)則 是可選的。

生成規(guī)則 有 7 種格式：

'name|min-max': value

'name|count': value

'name|min-max.dmin-dmax': value

'name|min-max.dcount': value

'name|count.dmin-dmax': value

'name|count.dcount': value

'name|+step': value

生成規(guī)則的含義需要依賴屬性值的類型才能確定。

屬性值 中可以含有 @占位符。

屬性值 還指定了最終值的初始值和類型

3.4.1 屬性值是字符串

（1）'name|count': string

通過重復(fù) string 生成一個字符串，重復(fù)次數(shù)等于 count

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|5': [{
        'id': 1,
        'name':'測試',
        'phone|11':'1'
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

（2）'name|min-max': string

通過重復(fù) string 生成一個字符串，重復(fù)次數(shù)大于等于 min，小于等于 max

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|5': [{
        'id': 1,
        'name|2-4':'測試',
        'phone|11':'1'
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

3.4.2 屬性值是數(shù)字number

（1）'name|+1': number

屬性值自動加 1，初始值為 number。

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|5': [{
        'id|+1': 1,
        'name|2-3':'測試',
        'phone|11':'1'
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

（2）'name|min-max': number

生成一個大于等于 min、小于等于 max 的整數(shù)，屬性值 number 只是用來確定類型

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|5': [{
        'id|+1': 1,
        'name|2-3':'測試',
        'phone|11':'1',
        'point|122-500':0
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

（3）'name|min-max.dcount': value 生成一個浮點數(shù)，整數(shù)部分大于等于 min、小于等于 max，小數(shù)部分為dcount位

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|5': [{
        'id|+1': 1,
        'name|2-3':'測試',
        'phone|11':'1',
        'point|122-500':0,
        'money|3000-8000.2':0
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

（4）'name|min-max.dmin-dmax': number

生成一個浮點數(shù)，整數(shù)部分大于等于 min、小于等于 max，小數(shù)部分保留 dmin 到 dmax 位。

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|5': [{
        'id|+1': 1,
        'name|2-3':'測試',
        'phone|11':'1',
        'point|122-500':0,
        'money|3000-8000.2':0,
        'money2|1000-5000.2-4':0,
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

3.4.3 屬性值是布爾

（1）'name|1': boolean

隨機生成一個布爾值，值為 true 的概率是 1/2，值為 false 的概率同樣是 1/2

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|5': [{
        'id|+1': 1,
        'name|2-3':'測試',
        'phone|11':'1',
        'point|122-500':0,
        'money|3000-8000.2':0,
        'status|1':true
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

（2）'name|min-max': value

隨機生成一個布爾值，值為 value 的概率是 min / (min + max)

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|5': [{
        'id|+1': 1,
        'name|2-3':'測試',
        'phone|11':'1',
        'point|122-500':0,
        'money|3000-8000.2':0,
        'status|1':true,
        'default|1-3':true
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

3.4.4 屬性值是Object

（1）'name|count': object

從屬性值 object 中隨機選取 count 個屬性。

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|5': [{
        'id|+1': 1,
        'name|2-3':'測試',
        'phone|11':'1',
        'point|122-500':0,
        'money|3000-8000.2':0,
        'status|1':true,
        'default|1-3':true,
        'detail|2':{'id':1,'date':'2005-01-01','content':'記錄'}
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

（2）'name|min-max': object

從屬性值 object 中隨機選取 min 到 max 個屬性

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|5': [{
        'id|+1': 1,
        'name|2-3':'測試',
        'phone|11':'1',
        'point|122-500':0,
        'money|3000-8000.2':0,
        'status|1':true,
        'default|1-3':true,
        'detail|2-3':{'id':1,'date':'2005-01-01','content':'記錄'}
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

3.4.5 屬性值是數(shù)組

（1）'name|count': array

通過重復(fù)屬性值 array 生成一個新數(shù)組，重復(fù)次數(shù)為 count

（2）'name|min-max': array

通過重復(fù)屬性值 array 生成一個新數(shù)組，重復(fù)次數(shù)大于等于 min，小于等于 max。

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|5-10': [{
        'id|+1': 1,
        'name|2-3':'測試',
        'phone|11':'1',
        'point|122-500':0,
        'money|3000-8000.2':0,
        'status|1':true,
        'default|1-3':true,
        'detail|2-3':{'id':1,'date':'2005-01-01','content':'記錄'}
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

3.5 數(shù)據(jù)占位符定義規(guī)范DPD

Mock.Random 是一個工具類，用于生成各種隨機數(shù)據(jù)。

Mock.Random 的方法在數(shù)據(jù)模板中稱為『占位符』，書寫格式為 @占位符(參數(shù) [, 參數(shù)]) 。

內(nèi)置方法列表：

下面我們講解每種內(nèi)置方法的使用：

3.5.1 基本方法

可以生成隨機的基本數(shù)據(jù)類型

string 字符串

integer 整數(shù)

date 日期

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|10': [{
        'id|+1': 1,
        'name':'@string',
        'point':'@integer',
        'birthday':'@date'
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

3.5.2 圖像方法

image 隨機生成圖片地址

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|10': [{
        'id|+1': 1,
        'name':'@string',
        'point':'@integer',
        'birthday':'@date',
        'pic':'@image'
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

3.5.3 文本方法

@title: 標(biāo)題

@cword(100) :文本內(nèi)容 參數(shù)為字?jǐn)?shù)

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|10': [{
        'id|+1': 1,
        'name':'@string',
        'point':'@integer',
        'birthday':'@date',
        'pic':'@image',
        'title':'@title',
        'content':'@cword(100)'
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

3.5.4 名稱方法

cname :中文名稱

cfirst:中文姓氏

Last:英文姓氏

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|10': [{
        // 屬性 id 是一個自增數(shù)，起始值為 1，每次增 1
        'id|+1': 1,
        'name':'@cname',
        'ename':'@last',
        'cfirst':'@cfirst',
        'point':'@integer',
        'birthday':'@date',
        'pic':'@image',
        'title':'@title',
        'content':'@cword(100)'
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

3.5.5 網(wǎng)絡(luò)方法

可以生成url ip email等網(wǎng)絡(luò)相關(guān)信息

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|10': [{
        'id|+1': 1,
        'name':'@cname',
        'ename':'@last',
        'cfirst':'@cfirst',
        'point':'@integer',
        'birthday':'@date',
        'pic':'@image',
        'title':'@title',
        'content':'@cword(100)',
        'url':"@url",
        'ip':"@ip",
        'email':"@email"
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

3.5.6 地址方法

@region 區(qū)域

@county 省市縣

// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
    'list|10': [{
        'id|+1': 1,
        'name':'@cname',
        'ename':'@last',
        'cfirst':'@cfirst',
        'point':'@integer',
        'birthday':'@date',
        'pic':'@image',
        'title':'@title',
        'content':'@cword(100)',
        'url':"@url",
        'ip':"@ip",
        'email':"@email",
        'area':'@region',
        'address':'@county(true)'
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data,null,2))

4 EasyMock

4.1 什么是EasyMock

? Easy Mock 是杭州大搜車無線團隊出品的一個極其簡單、高效、可視化、并且能快速生成模擬數(shù)據(jù)的在線 mock 服務(wù)。以項目管理的方式組織 Mock List，能幫助我們更好的管理 Mock 數(shù)據(jù)。

地址：https://www.easy-mock.com

在線文檔：https://www.easy-mock.com/docs

4.2 EasyMock基本入門

4.2.1初始設(shè)置

（1）登錄或注冊。

瀏覽器打開https://www.easy-mock.com 輸出用戶名和密碼，如果不存在會自動注冊。注意：請牢記密碼，系統(tǒng)沒有找回密碼功能！

[圖片上傳失敗...(image-36b584-1567045997182)]

登錄后進入主界面

[圖片上傳失敗...(image-f26ca3-1567045997182)]

（2）創(chuàng)建項目：點擊右下角的加號

[圖片上傳失敗...(image-5d505-1567045997182)]

填寫項目名稱，點擊創(chuàng)建按鈕

[圖片上傳失敗...(image-378007-1567045997182)]

創(chuàng)建完成后可以在列表中看到剛剛創(chuàng)建的項目

4.2.2接口操作

（1）創(chuàng)建接口。點擊列表中的項目

[圖片上傳失敗...(image-7f488-1567045997182)]

進入項目工作臺頁面

[圖片上傳失敗...(image-f9d5fb-1567045997182)]

點擊“創(chuàng)建接口” ,左側(cè)區(qū)域輸出mock數(shù)據(jù)，右側(cè)定義Method 、 Url 、描述等信息。

[圖片上傳失敗...(image-74f1b9-1567045997182)]

我們可以將我們在Mock.js入門案例中的對象放入左側(cè)的編輯窗口

{
  'list|10': [{
    "id|+1": 1,
    "name": "@cname",
    "cfirst": "@cfirst",
    "Last": "@Last",
    "point": "@integer",
    "birthday": "@date",
    "pic": "@image",
    "content": "@cword(30,200)",
    "url": "@url",
    "ip": "@ip",
    "email": "@email",
    "region": "@region",
    "county": "@county"
  }]
}

填寫url Method 和描述 ，點擊創(chuàng)建按鈕

（2）克隆接口和修改接口

（3）預(yù)覽接口和復(fù)制接口地址

（4）刪除接口

4.3 本地部署EasyMock

4.3.1 Centos部署node.js

（1）將node官網(wǎng)下載的node-v8.11.1-linux-x64.tar.xz 上傳至服務(wù)器

（2）解壓xz文件

xz -d node-v8.11.1-linux-x64.tar.xz

（3）解壓tar文件

tar -xvf node-v8.11.1-linux-x64.tar

（4）目錄重命名

mv node-v8.11.1-linux-x64 node

（5）移動目錄到/usr/local下

mv node /usr/local/

（6）配置環(huán)境變量

vi /etc/profile

填寫以下內(nèi)容

#set for nodejs  
export NODE_HOME=/usr/local/node  
export PATH=$NODE_HOME/bin:$PATH

執(zhí)行命令讓環(huán)境變量生效

source /etc/profile

查看node版本看是否安裝成功

node -v

4.3.2 MongoDB安裝與啟動

我們使用yum方式安裝mongoDb

（1）配置yum

vi /etc/yum.repos.d/mongodb-org-3.2.repo

編輯以下內(nèi)容：

[mongodb-org-3.2]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.2/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-3.2.asc

（2）安裝MongoDB

yum install -y mongodb-org

（3）啟動MongoD

systemctl start mongod

4.3.3 Redis安裝與啟動

（1）下載fedora的epel倉庫

yum install epel-release

（2）下載安裝redis

yum install redis

（3）啟動redis服務(wù)

systemctl start redis

4.3.4 本地部署easy-mock

（1）項目下載地址： https://github.com/easy-mock/easy-mock

（2）將easy-mock-dev.zip上傳至服務(wù)器

（3）安裝zip 和unzip

yum install zip unzip

（4）解壓

unzip easy-mock-dev.zip

（3）進入其目錄，安裝依賴

npm install

（4）執(zhí)行構(gòu)建

npm run build

（5）啟動

npm run start

（6）打開瀏覽器 http://192.168.184.131:7300

[圖片上傳失敗...(image-e36068-1567045997182)]

4.4 導(dǎo)入SwaggerAPI文檔

（1）將我們的SwaggerAPI文檔擴展名改為yml

（2）在easyMock中點擊“設(shè)置”選項卡

（3）SwaggerDocs API 選擇Upload

[圖片上傳失敗...(image-aa5280-1567045997182)]

（4）將SwaggerAPI文檔拖動到上圖的虛線區(qū)域，點擊保存

（5）回到主界面后點擊“同步Swagger”