1、day021l今天安排Restful 概述Ø Restful 簡介Ø Restful 請求規范lSwagger 編寫 API 文檔lMock.js 使用lEasyMock 使用2Restful 概述2.1 Restful 簡介Restful 是一種編程風格，可以用來精確等）。網絡上的各種（css、js、mp3、avi、html、傳統：張三Restful：張三2.2 Restful 請求規范Restful 要求增刪改查分別對應 http 的不同請求方式GET POST HEADPUT請求獲取 Request-URI 所標識的，一般在 Request-URI 所標識的后附加新的

2、數據，一般提交表單新增請求獲取由 Request-URI 所標識的的響應消息報頭，類似于 get一個，并用 Request-URI 作為其標識，一般更新請求服務器DELETE 請求服務器刪除 Request-URI 所標識的，一般刪除TRACE請求服務器回送收到的請求信息，主要用于測試或診斷CONNECT 保留將來使用OPTIONS 請求服務器的性能，或者與相關的選項和需求3 Swagger 編寫 API 文檔3.1 什么是 Swaggerl前后端分離開發方式依賴 API 接口文檔lSwagger 編寫 API 接口文檔的框架3.2 SwaggerEditor 安裝與啟動3.2.1 Swagg

3、erEditor 安裝l地址： /swagger-api/swagger-editor/releases/download/v2.10.4/swagger-editor.zipl解壓 swagger-editorl全局安裝 http-server（命令行 http 服務器）cnpm install -g http-serverl啟動 swagger-editor在 swagger-editor 解壓目錄的目錄運行如下命令l地址：3.3 SwaggerEditor 文檔結構l文檔頭信息l請求地址管理l數據模型定義3.4 SwaggerEditor 文檔字段3.5 SwaggerEdtior 字段

4、類型與格式3.6 入門案例3.6.1 新增城市效果：新增城市：代碼：# Example YAML to get you started quickly.# Be aware that YAML has indentation based scoping.# Code completion support is available so start typing for available options. swagger: '2.0'# This is your document metadata info:version: "1.0.0"title: 基礎

5、模塊-城市 API host:URL： /cityMethod: postschemes:- https- httpbasePath: /tensquare# Describe your paths herepaths:# This is a path endpoint. Change it./city:# This is a HTTP operationpost:# Describe this verb here. Note: you can use markdownsummary: 新增城市# This is array of GET operation parameters:parame

6、ters:- name: body#參數傳遞方式，#formData 表示表單傳輸，#query 表示 url 拼接傳輸，#path 表示作為 url 的一部分#body 表示http 頭承載參數(body 只能有一個,有 body 不能在有其他的)in: bodydescription: 城市實體類required: trueschema:$ref: '#/definitions/City'# Expected responses for this operation:responses:# Response code200:description:# A schema de

7、scribing your response object.# Use JSON Schema formatschema:$ref: '#/definitions/ApiResponse'definitions:City:type: objectproperties:id:type: stringdescription: IDname:type: stringdescription: 名稱ishot:type: stringdescription: 是否熱門ApiResponse:type: objectproperties:flag:type: booleandescript

8、ion: 是否code:type: integerformat: int323.6.2 修改城市修改城市URL： /city/cityIdMethod: put效果：代碼/city/cityId: put:summary: 修改城市description: 返回碼message: type: stringdescription: 返回信息3.6.3 刪除城市刪除城市URL： /city/cityIdMethod: delete效果：parameters:- name: cityId in: pathdescription: 城市 IDrequired: true type: string- n

9、ame: body in: bodydescription: 城市schema:$ref: '#/definitions/City' responses:200:description:響應schema:$ref: '#/definitions/ApiResponse'代碼：3.6.4城市城市：delete:summary: 根據 ID 刪除description: 返回是否parameters:- name: cityId in: pathdescription: 城市 IDrequired: true type: stringresponses:200:de

10、scription:schema:$ref: '#/definitions/ApiResponse'URL： /city/cityIdMethod: get效果：代碼：l在 definations 下定義響應對象：ApiCityResponse: type: "object" properties: code:type: "integer" format: "int32" flag:type: "boolean" message:type: "string"l在/city/cit

11、yId下新增 get 方法 apil返回值：flag:true,code:20000, message:"",data: . 3.6.5 城市列表城市：URL： /cityMethod: get效果：get:summary: 根據 ID description: 返回一個城市parameters:- name: cityId in: pathdescription: 城市 IDrequired: true type: stringresponses:'200':description: 操作schema:$ref: '#/definitions/Ap

12、iCityResponse'data:$ref: '#/definitions/City'代碼：l在 definitions 下定義城市列表對象以及相應對象CityList:type: "array" items:$ref: '#/definitions/City' ApiCityListResponse: type: "object"properties: code:type: "integer" format: "int32" flag:type: "boole

13、an" message:type: "string"data:l在/city 下增加 get3.6.6 條件城市列表條件城市列表：URL： /city/searchMethod: post效果：代碼：get:summary: "城市全部列表" description: "返回城市全部列表" responses:200:description: "到數據" schema:$ref: '#/definitions/ApiCityListResponse'$ref: '#/definit

14、ions/CityList'3.6.7 分頁城市列表分頁城市列表條件城市列表：URL： /city/search/page/sizeMethod: post效果：/city/search: post:summary: 城市列表(條件)parameters:- name: body in: bodydescription:條件required: true schema:$ref: "#/definitions/City" responses:200:description:schema:$ref: '#/definitions/ApiCityListRespo

15、nse'代碼：l在 definitions 下定義城市分頁列表響應對象ApiCityPageResponse: type: "object" properties:code:type: "integer" format: "int32" flag:type: "boolean" message:type: "string"l新增路徑節點/city/search/page/size: post:summary: 城市分頁列表parameters:- name: page in: pathd

16、escription: 頁碼required: true type: integer format: int32- name: size in: pathdescription: 頁大小required: true type: integer format: int32- name: body in: bodydescription:條件required: truedata:properties:total:type: "integer" format: "int32" rows:$ref: '#/definitions/CityList'

17、;3.7 批量生成 API 文檔自動生成所有表的 yml 文檔我們使用程序員代碼自動生成的文檔中類型均為 string ，我們這里需要再對類型進行修改即可。步驟：1)執行建表2)使用程序員代碼生成3.8 SwaggerUISwaggerUI 是用來展示 Swagger 文檔的界面，以下為安裝步驟1)在本地安裝 nginx：解壓到任意目錄即可2)SwaggerUI 源碼：swagger-ui-master.zip3)解壓，將 dist 文件夾下的全部文件拷貝至 nginx 的 html 目錄4)啟動 nginx5)瀏覽器打開頁面即可看到文檔頁面schema:$ref: "#/defin

18、itions/City" responses:200:description:schema:$ref: '#/definitions/ApiCityPageResponse'6)將自定義 yml 文件拷貝至nginx 的 html 目錄在搜索框輸入：api/admin.yml 查看 api4Mock.js4.1 什么是 MocklMock.js （官網/）是一款模擬數據，可以做前端單元測試lMock.js 支持的模擬功能：Ø根據數據模板生成模擬數據Ø模擬 ajax 請求，生成并返回模擬數據Ø基于 html 模版生成模擬數據lMock.js

19、 特點Ø前后端分離Ø通過隨機數據，模擬各種場景Ø開發無侵入，不需要修改既有代碼Ø數據類型豐富Ø方便擴展，支持自定義函數和正則4.2 Mock.js 安裝cnpm install mockjs -g4.3 快速入門需求：生成列表數據，數據條數為 5 條，顯示效果如下：新建 demo.js：在 vscode 中執行需要再執行 cnpm install mockjslet Mock=require('mockjs')let data=Mock.mock("list": "id": 1,"

20、;name": "測試","id": 1,"name": "測試","id": 1,"name": "測試","id": 1,"name": "測試","id": 1,"name": "測試"4.4 Mock.js 語范Mock.js 的語范包括兩部分：l數據模板定義規范（Data Template Definition，DTD

21、）l數據占位符定義規范（Data Placeholder Definition，DPD）4.4.1 數據模版定義規范l數據模板中的每個屬性由 3 部分：屬性名、生成規則、屬性值/ 屬性名： name/ 生成規則： rule/ 屬性值： value語法：'name|rule': valuel生成規則 有 7 種格式：'name|min-max': value'name|count': value'name|min-max.dmin-dmax': value'name|min-max.dcount': value

22、9;name|count.dmin-dmax': value'name|count.dcount': value'name|+step': valuel生成規則的含義需要依賴屬性值的類型才能確定。'list|5':'id':1,'name':'測試')console.log(JSON.stringify(data,null,2 )l屬性值 中可以含有 占位符。l屬性值 還指定了最終值的初始值和類型 屬性值是字符串l'name|count': string通過重復

23、string生成一個字符串，重復次數等于countl'name|min-max': string通過重復 string 生成一個字符串，重復次數大于等于 min，小于等于max/ 使用 Mocklet Mock = require('mockjs') let data = Mock.mock('list|5': 'id': 1,'name|2-4':'測試','phone|11':'1')/ 使用 Mocklet Mock = require('mockjs&

24、#39;) let data = Mock.mock('list|5': 'id': 1,'name':'測試','phone|11':'1')/ 輸出結果console.log(JSON.stringify(data,null,2) 屬性值是數字l'name|+1': number屬性值自動加1，初始值為number。l'name|min-max': number生成一個大于等于 min、小于等于 max的整數，屬性值 number 只是用來確定類型/

25、 使用 Mocklet Mock = require('mockjs') let data = Mock.mock('list|5': 'id|+1':1,'name|2-3':'測試','phone|11':'1', 'point|122-500':0/ 使用 Mocklet Mock = require('mockjs') let data = Mock.mock('list|5': 'id|+1':1,'n

26、ame|2-3':'測試','phone|11':'1')/ 輸出結果console.log(JSON.stringify(data,null,2)/ 輸出結果console.log(JSON.stringify(data,null,2)l'name|min-max.dcount': value 生成一個浮點數，整數部分大于等于min、小于等于max，小數部分為 dcount 位l'name|min-max.dmin-dmax': number生成一個浮點數，整數部分大于等于 min、小于等于max，小數部

27、分保留 dmin到dmax 位。/ 使用 Mocklet Mock = require('mockjs') let data = Mock.mock('list|5': 'id|+1': 1, 'name|2-3':'測試','phone|11':'1',/ 使用 Mocklet Mock = require('mockjs') let data = Mock.mock('list|5': 'id|+1': 1, 'name|2

28、-3':'測試','phone|11':'1','point|122-500':0, 'money|3000-8000.2':0)/ 輸出結果console.log(JSON.stringify(data,null,2)/ 輸出結果console.log(JSON.stringify(data,null,2) 屬性是布爾值l'name|1': booleantrue的概率是 1/2，值為false的概率同樣是 1/2隨機生成一個布爾值，值為l'name|min-max&

29、#39;: value隨機生成一個布爾值，值為value 的概率是 min / (min + max)/ 使用 Mock/ 使用 Mocklet 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&#

30、39;:true)/ 輸出結果console.log(JSON.stringify(data,null,2)'point|122-500':0, 'money|3000-8000.2':0, 'money2|1000-5000.2-4':0,)/ 輸出結果console.log(JSON.stringify(data,null,2) 屬性值是 Objectl'name|count': object從屬性值 object 中隨機選取 count 個屬性。/ 使用 Mocklet Mock = require('

31、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,let Mock = require('mockjs') let data = Mock.mock('list|5': 'id|

32、+1': 1, 'name|2-3':'測試','phone|11':'1','point|122-500':0, 'money|3000-8000.2':0,'status|1':true, 'default|1-3':true)/ 輸出結果console.log(JSON.stringify(data,null,2)l'name|min-max': object從屬性值 objectmin到 max中隨機選取個屬性 屬性值是數

33、組（1）'name|count': array通過重復屬性值 array 生成一個新數組，重復次數為count/ 使用 Mocklet 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|

34、1':true, 'default|1-3':true,'detail|2-3':'id':1,'date':'2005-01-01','content':'')/ 輸出結果console.log(JSON.stringify(data,null,2)'default|1-3':true,'detail|2':'id':1,'date':'2005-01-01','content'

35、:'')/ 輸出結果console.log(JSON.stringify(data,null,2)（2）'name|min-max': array通過重復屬性值array生成一個新數組，重復次數大于等于min，小于等于max。4.4.2 數據占位符定義規范 DPDlMock.Random 是一個工具類，用于生成各種隨機數據。lMock.Random 的方法在數據模板中稱為占位符，格式： 占位符(參數 , 參數)l內置方法列表：/ 使用 Mocklet Mock = require('mockjs') let data = Mock.mock(&#

36、39;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'

37、:'')/ 輸出結果console.log(JSON.stringify(data,null,2) 基本方法可以生成隨機的基本數據類型string 字符串integer 整數date日期 圖像方法image 隨機生成圖片地址/ 使用 Mocklet Mock = require('mockjs') let data = Mock.mock('list|10': 'id|+1': 1, 'name':'string','point':'integer

38、', 'birthday':'date')/ 輸出結果console.log(JSON.stringify(data,null,2) 文本方法title: 標題cword(100) :文本內容 參數為字數/ 使用 Mocklet Mock = require('mockjs') let data = Mock.mock('list|10': 'id|+1': 1, 'name':'string','point':'integer'

39、,'birthday':'date','pic':'image','title':'title','content':'cword(100)'/ 使用 Mocklet Mock = require('mockjs') let data = Mock.mock('list|10': 'id|+1': 1, 'name':'string','point':'intege

40、r','birthday':'date','pic':'image')/ 輸出結果console.log(JSON.stringify(data,null,2) 名稱方法cname :中文名稱cfirst:中文姓氏last:英文姓氏/ 使用 Mocklet Mock = require('mockjs') let data = Mock.mock('list|10': / 屬性id 是一個自增數，起始值為 1，每次增 1 'id|+1': 1,'name

41、':'cname','ename':'last','cfirst':'cfirst','point':'integer','birthday':'date','pic':'image','title':'title','content':'cword(100)')/ 輸出結果console.log(JSON.stringify(data,null,2

42、)/ 輸出結果console.log(JSON.stringify(data,null,2) 網絡方法可以生成 url ip等網絡相關信息 地址方法region 區域county 省市縣/ 使用 Mock/ 使用 Mocklet Mock = require('mockjs') let data = Mock.mock('list|10': 'id|+1': 1, 'name':'cname','ename':'last','cfirst'

43、:'cfirst','point':'integer','birthday':'date','pic':'image','title':'title','content':'cword(100)','url':"url",'ip':"ip",'':"")/ 輸出結果console.log(JSON.stringif

44、y(data,null,2)5 EasyMock5.1 什么是 EasyMocklEasy Mock 是一個mock 服務。lEasy Mock 是杭州大搜車無線團隊。lEasy Mock 極其簡單、高效、可視化、并且能快速生成模擬數據。let Mock = require('mockjs') let data = Mock.mock('list|10': 'id|+1': 1, 'name':'cname','ename':'last','cfirst':'

45、cfirst','point':'integer','birthday':'date','pic':'image','title':'title','content':'cword(100)','url':"url",'ip':"ip",'':"",'area':'region', '

46、;address':'county(true)')/ 輸出結果console.log(JSON.stringify(data,null,2)lEasy Mock 以項目管理的方式組織 Mock List，能幫助我們更好的管理 Mock數據。l地址：https:/l文檔：https:/docs5.2 EasyMock 基本入門5.2.1 初始設置l登錄或。瀏覽器打開 https:/輸出用戶名和，如果不存在會自動。注意：請牢記，系統沒有找回功能！l登陸后進入主界面l創建項目：點擊右下角的加號l填寫項目名稱，點擊創建按鈕l創建好的項目：5.2.2 創建接口l點擊列表中的項目，

47、創建接口l進入項目工作臺l點擊創建接口，左側區域輸出 mock 數據,右側定義 method、url、描述等信息l將 mock.js 入門案例中的的對象放入左側編輯窗口l克隆和修改接口l預覽接口和接口地址l刪除接口5.3 本地部署 EasyMock5.3.1 第一步：引入虛擬機系統l解壓資料中 centos7，雙擊圖中文件'list|10': "id|+1": 1,"name": "cname","cfirst": "cfirst","Last": "Last","point": "integer","birthday": "date",&q