前言：

　　大多數(shù)時(shí)候，前端會(huì)和后端同時(shí)進(jìn)行開發(fā)，即在我們開發(fā)完頁(yè)面的時(shí)候，很可能還不能立馬進(jìn)入聯(lián)調(diào)階段，這個(gè)時(shí)候，為了保證我們接口的有效性和代碼的功能完整，我們可能需要模擬數(shù)據(jù)。

模擬數(shù)據(jù)方法

1.通過(guò)js變量模擬后臺(tái)數(shù)據(jù)

　　優(yōu)點(diǎn)：不需要服務(wù)器

　　缺點(diǎn)：需要造很多變量，同時(shí)還要將變量在我們的有效代碼中使用，最后還得刪除

2.通過(guò)ajax請(qǐng)求json文件

　　優(yōu)點(diǎn)：只需要配置路徑，就可以訪問(wèn)，進(jìn)入聯(lián)調(diào)階段不用修改大量的js代碼

　　缺點(diǎn)：ajax存在跨域問(wèn)題，通常無(wú)法請(qǐng)求本地文件，即使火狐也存在不能訪問(wèn)不同文件目錄下的json文件，通常需要通過(guò)ide或者自己手動(dòng)啟動(dòng)服務(wù)

3.用nodejs自己寫一個(gè)專門用來(lái)發(fā)送請(qǐng)求的服務(wù)，不包含業(yè)務(wù)邏輯

　　優(yōu)點(diǎn)：前端的代碼進(jìn)入聯(lián)調(diào)階段只需要修改一個(gè)basePath，所有的接口名字都可以和約定好的路徑保持一致，可以測(cè)試post請(qǐng)求，模擬網(wǎng)絡(luò)環(huán)境

　　缺點(diǎn)：自己要寫一個(gè)后臺(tái)

1、2兩種模擬數(shù)據(jù)的方式適合用來(lái)做demo，但是如果做得是上線項(xiàng)目，我們還是推薦使用自己搭建一個(gè)node后臺(tái)

1.準(zhǔn)備node環(huán)境、npm/cnpm

2.安裝express、mockjs

3.創(chuàng)建服務(wù)端文件server.js，引入相關(guān)模塊

let express = require('express'); //引入express模塊
let Mock = require('mockjs');  //引入mock模塊
let app = express();    //實(shí)例化express

4.配置接口路由，設(shè)置監(jiān)聽端口

/**
 * 配置test.action路由
 * @param {[type]} req [客戶端發(fā)過(guò)來(lái)的請(qǐng)求所帶數(shù)據(jù)]
 * @param {[type]} res [服務(wù)端的相應(yīng)對(duì)象，可使用res.send返回?cái)?shù)據(jù)，res.json返回json數(shù)據(jù)，res.down返回下載文件]
 */
app.all('/test.action', function(req, res) {
 res.send('hello world');
});
/**
 * 監(jiān)聽8090端口
 */
app.listen('8090');

　　此時(shí)我們直接訪問(wèn)http://localhost:8090/test.action，就可以直接在界面看到'hello world'文字

5.使用mockjs返回格式化json數(shù)據(jù)

app.all('/test.action', function(req, res) {
 /**
  * mockjs中屬性名‘|'符號(hào)后面的屬性為隨機(jī)屬性，數(shù)組對(duì)象后面的隨機(jī)屬性為隨機(jī)數(shù)組數(shù)量，正則表達(dá)式表示隨機(jī)規(guī)則，+1代表自增
  */
 res.json(Mock.mock({
  "status": 200,
  "data|1-9": [{
   "name|5-8": /[a-zA-Z]/,
   "id|+1": 1,
   "value|0-500": 20
  }]
 }));
});

　　此時(shí)我們?cè)僭L問(wèn)頁(yè)面數(shù)據(jù)，我們就可以得到一份隨機(jī)的json數(shù)據(jù)

6.創(chuàng)建模擬數(shù)據(jù)文件夾testData，創(chuàng)建模擬數(shù)據(jù)json文件（注意：json文件中不能使用正則，且對(duì)象屬性必須為雙引號(hào)字符串）

7.遍歷模擬數(shù)據(jù)文件，生成對(duì)應(yīng)路由

/*readdir讀取目錄下所有文件*/
fs.readdir('./testData', function(err, files) {
 if(err) {
  console.log(err);
 } else {
  /*成功讀取文件，取得文件名，拼接生成對(duì)應(yīng)action，監(jiān)聽對(duì)應(yīng)接口并返回對(duì)應(yīng)文件數(shù)據(jù)*/
  files.forEach(function(v, i) {
   app.all(`/${v.replace(/json/, 'action')}`, function(req, res) {
    fs.readFile(`./testData/${v}`, 'utf-8', function(err, data) {
     if(err) {
      console.log(err);
     } else {
      res.json(Mock.mock(JSON.parse(data)));
     }
    })
   })
  })
 }
})

至此，我們的node服務(wù)器已經(jīng)搭建成功，使用node server.js運(yùn)行服務(wù)器，我們就可以直接在前端訪問(wèn)接口，但是如果只是單純的生成后臺(tái)，前端頁(yè)面不通過(guò)后臺(tái)進(jìn)行訪問(wèn)的話，存在跨域問(wèn)題，如果需要解決，可以在后臺(tái)添加跨域請(qǐng)求

/*為app添加中間件處理跨域請(qǐng)求*/
app.use(function(req, res, next) {
 res.header("Access-Control-Allow-Origin", "*");
 res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 res.header('Access-Control-Allow-Headers', 'Content-Type');
 next();
});

ps:如果mock需要使用正則，請(qǐng)單獨(dú)配置路由進(jìn)行處理，express和mockjs更多指令，請(qǐng)查閱官網(wǎng)api

總結(jié)

以上是小編給大家介紹的express+mockjs實(shí)現(xiàn)模擬后臺(tái)數(shù)據(jù)發(fā)送功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

最新評(píng)論