不知道大家還記不記得mockjs的特性，現(xiàn)在讓我?guī)Т蠹乙黄鸹仡櫼幌掳桑气筋。。?/h5>
特性
前后端分離
增加但愿測試的真實性
開發(fā)無入侵
用法簡單
數(shù)據(jù)類型豐富
方便擴展
不知道大家注意到了沒慈俯，mockjs支持支持生成隨機的文本、數(shù)字拥峦、布爾值贴膘、日期、郵箱略号、鏈接步鉴、圖片、顏色等璃哟。接下來我?guī)Т蠹夷M數(shù)據(jù)氛琢。
一、創(chuàng)建項目
全局安裝 ????webpack
$ npm/cnpm install webpack -g
在安裝 ????vue-cli
創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack webpack-simple (一路回車哦)
安裝依賴
npm/cnpm install
這時候運行npm run dev 讓它跑起來随闪，瀏覽器界面就會有Vue的logo阳似，以及一些內(nèi)容
二、Json-Server
項目搭建好了铐伴，需要本地模擬數(shù)據(jù)來測試接口效果撮奏。
這里使用Json-Server這個工具來構(gòu)建本地Server
安裝 json-server
npm/cnpm install -g json-server
安裝完成后，在項目中創(chuàng)建json文件模擬返回的數(shù)據(jù)內(nèi)容当宴，這里我的json文件名為db.json
目錄結(jié)構(gòu)
{
"user": {
"name" : "Rose",
"age" : 22,
"sex" : "boy"
}
}
然后執(zhí)行 json-server db.json
注意：
執(zhí)行成功后會提示已經(jīng)啟動了一個端口為3000的服務(wù)畜吊，在瀏覽器中輸入localhost:3000/user 能看到如下的頁面：
到這里，本地的server已經(jīng)搭建完畢户矢，但是玲献，本地的server數(shù)據(jù)是死的，這時候就用到了mock梯浪。
三捌年、使用Mock.js
Mock Server中 db.json 中的數(shù)據(jù)是是死的，我們可以借助 Mock.js 生成動態(tài)數(shù)據(jù)挂洛，增加測試的真實性礼预。
安裝mock.js
npm install mockjs --save-dev
項目中創(chuàng)建db.js 文件，和db.json是同級目錄哦虏劲，內(nèi)容如下：
執(zhí)行 json-server db.js 再次查看 localhost:3000/user 已經(jīng)能看到數(shù)據(jù)效果了
好啦托酸，今天就到這里結(jié)束啦，明天各位說一下怎么把數(shù)據(jù)鋪到頁面上柒巫，大家也可以嘗試励堡，小小的透露一下，將數(shù)據(jù)鋪到頁面上需要運行兩條命令吻育，也就是說念秧，要打開兩個命令窗口，是不是覺得很麻煩呢布疼？
所以明天我們就想辦法將兩條命令合并為一條摊趾，拭目以待吧１液荨！砾层！
如果大家喜歡這篇文章漩绵，記得點喜歡哦！８嘏凇止吐！
