進入項目后，項目詳情頁面會展示當前項目的基本信息和項目下的接口列表，為創建接口時，和創建項目一樣，可以點擊頁面中間的創建按鈕和右上角的加號創建接口。 
接口的錄入分為兩個區域。
左邊是接口的基本信息錄入區域，字段說明如下
-
接口名：接口的名稱(如：獲取xxx列表)。這個名稱可以填任意字符，但是建議跟接口文檔中的接口名稱保持一致，方便查找。
-
接口類型：對應XHR的請求類型，目前支持的有GET、POST、PUT、DELETE。
-
接口的url：重要，接口的XHR訪問相對地址，以斜杠開頭，(如: /api/getUserList)
-
接口其他描述信息： 接口的其他說明，如，接口的更改說明，接口的訪問注意事項等等
右邊是接口的返回數據規則編輯器區域。
每個接口都預置了接口返回的基礎結構，在編輯器中錄入你想要在當前接口返回的json對象
{ "code": "0000", "data": {}, "desc": "成功" }
基本結構
如果你對mock.js一無所知，又想快速使用fastmock，也沒關系，在編輯器中錄入你想要返回的json對象的完整內容就行。如下面的登錄驗證接口：
{ "code": "0000", "data": { "userInfo": { "username": "zhangsan", "userId": 1, "avator": "http://www.xxx.com/upload/xxx.png", "token": "e10adc3949ba59abbe56e057f20f883e" } }, "desc": "成功" }
又比如返回一個產品列表的接口
{ "code": "0000", "data": { "pageNo": 1, "totalRecord": 1000, "pageSize": 10, "list": [{ "name": "iphone xs", "title": "產品a", "descript": "這個產品是干什么的", "price": 100 }，{ "name": "ipad mini4", "title": "產品b", "descript": "這個產品是干什么的", "price": 120 }，{ "name": "macbook pro", "title": "產品a", "descript": "這個產品是干什么的", "price": 10 }] }, "desc": "成功" }
Mock.js語法
fastmock 引入了mock.js的支持，支持所有的Mock.js隨機數據的生成規則。在這里介紹幾個基本規則，更多Mock.js內容移步mockjs文檔
-
基礎隨機內容的生成
{ "string|1-10": "=", // 隨機生成1到10個等號 "string2|3": "=", // 隨機生成2個或者三個等號 "number|+1": 0, // 從0開始自增 "number2|1-00.1-3": 1, // 生成一個小數，小數點前面1到10，小數點后1到3位 "boolean": "@boolean( 1, 2, true )", // 生成boolean值 三個參數，1表示第三個參數true出現的概率，2表示false出現的概率 "name": "@cname", // 隨機生成中文姓名 "firstname": "@cfirst", // 隨機生成中文姓 "int": "@integer(1, 10)", // 隨機生成1-10的整數 "float": "@float(1,2,3,4)", // 隨機生成浮點數，四個參數分別為，整數部分的最大最小值和小數部分的最大最小值 "range": "@range(1,100,10)", // 隨機生成整數數組，三個參數為，最大最小值和加的步長 "natural": "@natural(60, 100)", // 隨機生成自然數（大於零的數） "email": "@email", // 郵箱 "ip": "@ip" ,// ip "datatime": "@date('yy-MM-dd hh:mm:ss')" // 隨機生成指定格式的時間 // ...... }
-
列表數據
{ "code": "0000", "data": { "pageNo": "@integer(1, 100)", "totalRecord": "@integer(100, 1000)", "pageSize": 10, "list|10": [{ "id|+1": 1, "name": "@cword(10)", "title": "@cword(20)", "descript": "@csentence(20,50)", "price": "@float(10,100,10,100)" }] }, "desc": "成功" }
-
圖片
mockjs可以生成任意大小，任意顏色塊，且用文字填充內容的圖片，使我們不用到處找圖片資源就能輕松實現圖片的模擬展示
"code": "0000", "data": { "pageNo": "@integer(1, 100)", "totalRecord": "@integer(100, 1000)", "pageSize": 10, "list|10": [{ // 參數從左到右依次為，圖片尺寸，背景色，前景色（及文字顏色）,圖片格式，圖片中間的填充文字內容 "image": "@image('200x100', '#ffcc33', '#FFF', 'png', 'Fast Mock')" }] }, "desc": "成功"
在編輯器中，我們預置了幾乎所有的mockjs函數的代碼提示，在編輯中輸入"mj"會得到編輯器的代碼提示，如下圖 
編輯完成后點擊左邊的提交按鈕即可保存當前的所有編輯，如果你希望編輯器幫你美化一下你的代碼，可以點擊左邊的“美化”按鈕，我們會按照js代碼格式去美化你的代碼。
點擊編輯器最右邊的懸浮按鈕可以設置適合自己習慣的編輯器的主題和代碼風格， 
轉自：https://marvengong.gitee.io/fastmock/#/restful