一：全局安裝json-server
npm install json-server -g
二：在自己項目跟目錄下存放mock/data.json，json內容如下：
1 { 2 "roles": [ 3 { 4 "id": 0, 5 "name": "SuperUser" 6 }, 7 { 8 "id": 1, 9 "name": "User" 10 }, 11 { 12 "id": 2, 13 "name": "Project Manager" 14 } 15 ], 16 "users": [ 17 { 18 "password": "wp123456", 19 "name": "王芃", 20 "avatar": "avatars:svg-1", 21 "email": "wpcfan@163.com", 22 "id": "37489e0c-df34-c261-71c4-ce75357e3035", 23 "projectIds": [ 24 "Sk2HaTagb", 25 "Hya1moGb-" 26 ], 27 "roleIds": [ 28 0, 29 1, 30 2 31 ] 32 }, 33 { 34 "password": "Ls123456", 35 "name": "李四", 36 "avatar": "avatars:svg-2", 37 "email": "lisi@163.com", 38 "id": "BkkDvwee-", 39 "projectIds": [ 40 "Sk2HaTagb" 41 ], 42 "roleIds": [ 43 1 44 ] 45 } 46 ], 47 "projects": [ 48 { 49 "id": "Sk2HaTagb", 50 "name": "問題跟蹤系統", 51 "desc": "用於 Bug 的內部跟蹤和管理", 52 "coverImg": "/assets/img/covers/1.jpg", 53 "members": [ 54 "37489e0c-df34-c261-71c4-ce75357e3035", 55 "BkkDvwee-" 56 ] 57 }, 58 { 59 "name": "某某公司 ERP 系統", 60 "desc": "為某某公司開發的定制化 ERP 系統", 61 "coverImg": "/assets/img/covers/20.jpg", 62 "members": [ 63 "37489e0c-df34-c261-71c4-ce75357e3035" 64 ], 65 "id": "Hya1moGb-", 66 "taskLists": [ 67 "BylTyXiM-b", 68 "BkWpk7jGZb", 69 "H1fTyXjMWW" 70 ] 71 }, 72 { 73 "name": "新的項目二", 74 "desc": "大法師", 75 "coverImg": "/assets/img/covers/5.jpg", 76 "id": "O2kpMpP" 77 } 78 ], 79 "taskLists": [ 80 { 81 "name": "待辦", 82 "projectId": "Sk2HaTagb", 83 "order": 1, 84 "id": "BkenST66lb" 85 }, 86 { 87 "name": "已完成", 88 "projectId": "Sk2HaTagb", 89 "order": 3, 90 "id": "SkG3Ba6Tgb" 91 }, 92 { 93 "name": "待辦", 94 "projectId": "Hya1moGb-", 95 "order": 1, 96 "id": "BylTyXiM-b" 97 }, 98 { 99 "name": "進行中", 100 "projectId": "Hya1moGb-", 101 "order": 2, 102 "id": "BkWpk7jGZb" 103 }, 104 { 105 "name": "已完成", 106 "projectId": "Hya1moGb-", 107 "order": 3, 108 "id": "H1fTyXjMWW" 109 } 110 ], 111 "tasks": [ 112 { 113 "desc": "吃晚餐", 114 "taskListId": "BkenST66lb", 115 "ownerId": "37489e0c-df34-c261-71c4-ce75357e3035", 116 "completed": true, 117 "participantIds": [ 118 "BkkDvwee-", 119 "37489e0c-df34-c261-71c4-ce75357e3035" 120 ], 121 "dueDate": null, 122 "reminder": null, 123 "createDate": "2017-05-17T14:10:01.159Z", 124 "priority": 3, 125 "order": 1, 126 "remark": "", 127 "id": 1 128 }, 129 { 130 "id": 2, 131 "desc": "趕快出發去萬達", 132 "taskListId": "SkG3Ba6Tgb", 133 "ownerId": "37489e0c-df34-c261-71c4-ce75357e3035", 134 "completed": false, 135 "participantIds": [ 136 "37489e0c-df34-c261-71c4-ce75357e3035" 137 ], 138 "dueDate": "2017-06-12T16:00:00.000Z", 139 "reminder": "2017-07-18T16:00:00.000Z", 140 "createDate": "2017-05-19T10:03:58.794Z", 141 "priority": 2, 142 "order": 2, 143 "remark": "something" 144 }, 145 { 146 "id": 3, 147 "desc": "什么情況啊", 148 "taskListId": "BkenST66lb", 149 "ownerId": "BkkDvwee-", 150 "completed": false, 151 "participantIds": [], 152 "dueDate": "2017-06-15T16:00:00.000Z", 153 "reminder": "2017-06-21T16:00:00.000Z", 154 "createDate": "2017-05-23T08:21:04.445Z", 155 "priority": 1, 156 "remark": "" 157 }, 158 { 159 "taskListId": "BylTyXiM-b", 160 "desc": "登錄鑒權過程中需攜帶 token 訪問 API", 161 "completed": false, 162 "ownerId": "BkkDvwee-", 163 "participantIds": [], 164 "dueDate": "2017-07-03T16:00:00.000Z", 165 "priority": 2, 166 "remark": "", 167 "reminder": "2017-06-27T16:00:00.000Z", 168 "createDate": "2017-05-24T06:11:05.625Z", 169 "id": 4 170 }, 171 { 172 "taskListId": "BkWpk7jGZb", 173 "desc": "增加統計報表功能", 174 "completed": false, 175 "ownerId": "37489e0c-df34-c261-71c4-ce75357e3035", 176 "participantIds": [], 177 "dueDate": "2017-07-25T16:00:00.000Z", 178 "priority": 1, 179 "remark": "", 180 "reminder": "2017-07-17T16:00:00.000Z", 181 "createDate": "2017-05-24T06:11:48.513Z", 182 "id": 5 183 }, 184 { 185 "taskListId": "BylTyXiM-b", 186 "desc": "首頁 banner 增加 2px 的 margin", 187 "completed": false, 188 "ownerId": "37489e0c-df34-c261-71c4-ce75357e3035", 189 "participantIds": [ 190 "BkkDvwee-" 191 ], 192 "dueDate": "2017-06-29T16:00:00.000Z", 193 "priority": 3, 194 "remark": "", 195 "reminder": null, 196 "createDate": "2017-05-24T06:12:59.718Z", 197 "id": 6 198 }, 199 { 200 "taskListId": "BkWpk7jGZb", 201 "desc": "庫存管理 -- 出庫操作 API", 202 "completed": false, 203 "ownerId": "BkkDvwee-", 204 "participantIds": [ 205 "37489e0c-df34-c261-71c4-ce75357e3035" 206 ], 207 "dueDate": "2017-07-24T16:00:00.000Z", 208 "priority": 2, 209 "remark": "", 210 "reminder": "2017-07-17T16:00:00.000Z", 211 "createDate": "2017-05-24T06:14:47.575Z", 212 "id": 7 213 }, 214 { 215 "taskListId": "H1fTyXjMWW", 216 "desc": "用戶可以簽入簽出設備", 217 "completed": true, 218 "ownerId": "37489e0c-df34-c261-71c4-ce75357e3035", 219 "participantIds": [], 220 "dueDate": "2017-05-20T16:00:00.000Z", 221 "priority": 1, 222 "remark": "", 223 "reminder": "2017-05-20T16:00:00.000Z", 224 "createDate": "2017-05-24T06:16:24.575Z", 225 "id": 8 226 }, 227 { 228 "taskListId": "BkWpk7jGZb", 229 "desc": "什么情況啊？", 230 "completed": false, 231 "ownerId": "37489e0c-df34-c261-71c4-ce75357e3035", 232 "participantIds": [], 233 "dueDate": null, 234 "priority": 3, 235 "remark": "", 236 "reminder": null, 237 "createDate": "2017-06-15T12:03:36.290Z", 238 "id": 9 239 } 240 ], 241 "quotes": [ 242 { 243 "id": "0", 244 "cn": "我突然就覺得自己像個華麗的木偶,演盡了所有的悲歡離合,可是背上總是有無數閃亮的銀色絲線,操縱我哪怕一舉手一投足。", 245 "en": "I suddenly feel myself like a doll,acting all kinds of joys and sorrows.There are lots of shining silvery thread on my back,controlling all my action.", 246 "pic": "/assets/img/quotes/0.jpg" 247 }, 248 { 249 "id": "1", 250 "cn": "被擊垮通常只是暫時的，但如果你放棄的話，就會使它成為永恆。（Marilyn vos Savant）", 251 "en": "Being defeated is often a temporary condition. Giving up is what makes it permanent.", 252 "pic": "/assets/img/quotes/1.jpg" 253 }, 254 { 255 "id": "2", 256 "cn": "不要只因一次挫敗，就放棄你原來決心想達到的夢想。（莎士比亞）", 257 "en": "Do not, for one repulse, forgo the purpose that you resolved to effect.", 258 "pic": "/assets/img/quotes/2.jpg" 259 }, 260 { 261 "id": "3", 262 "cn": "想有發現就要實驗，這項實驗需要時間。—《神盾局特工》", 263 "en": "Discovery requires experimentation, and this experiment will take time.", 264 "pic": "/assets/img/quotes/3.jpg" 265 }, 266 { 267 "id": "4", 268 "cn": "這世界並不會在意你的自尊，這世界希望你在自我感覺良好之前先要有所成就。", 269 "en": "The world won't care about your self-esteem. The world will expect you to accomplish something before you feel good about yourself.", 270 "pic": "/assets/img/quotes/4.jpg" 271 }, 272 { 273 "id": "5", 274 "cn": "當你最終放開了過去，更好的事就會到來。", 275 "en": "When you finally let go of the past, something better comes along.", 276 "pic": "/assets/img/quotes/5.jpg" 277 }, 278 { 279 "id": "6", 280 "cn": "我們學着放開過去傷害我們的人和事，學着只向前看。因為生活本來就是一往直前的。", 281 "en": "We learn to let go of things and people that hurt us in the past and just move on. For life is all about moving on.", 282 "pic": "/assets/img/quotes/6.jpg" 283 }, 284 { 285 "id": "7", 286 "cn": "絕不要因為怕辛苦而拒絕一個想法、夢想或是目標，成功的路上難免伴隨辛苦。（Bob Proctor）", 287 "en": "Never reject an idea, dream or goal because it will be hard work. Success rarely comes without it.", 288 "pic": "/assets/img/quotes/7.jpg" 289 }, 290 { 291 "id": "8", 292 "cn": "我們在人生中會作出許多選擇，帶着這些選擇繼續生活，才是人生中最難的一課。《妙筆生花》", 293 "en": "We all make our choices in life. The hard thing to do is live with them.", 294 "pic": "/assets/img/quotes/8.jpg" 295 }, 296 { 297 "id": "9", 298 "cn": "我總是對新的一天充滿喜悅，這是一次新的嘗試、一個新的開始，翹首以待，黎明之后或是驚喜。（約翰·博因頓·普里斯特利）", 299 "en": "I have always been delighted at the prospect of a new day, a fresh try, one more start, with perhaps a bit of magic waiting somewhere behind the morning.", 300 "pic": "/assets/img/quotes/9.jpg" 301 } 302 ] 303 }
三：執行 “json-server mock/data.json” 顯示如下效果
訪問http://localhost:3000/此地址，就會訪問到每個接口返回的數據
四：json-server支持GET，POST，PUT，PATCH，DELETE等REST命令