在express+mockjs中如何實現後台資料發送

這篇文章主要介紹了express mockjs實作模擬後台資料傳送功能,需要的朋友可以參考下

前言：

大多數時候，前端會和後端同時進行開發，也就是在我們開發完頁面的時候，很可能還不能立刻進入聯調階段，這個時候，為了確保我們介面的有效性和程式碼的功能完整，我們可能需要模擬數據。

模擬資料方法

1.透過js變數模擬後台資料

　　優點：不需要伺服器

　　缺點：需要造很多變量，同時還要將變數在我們的有效程式碼中使用，最後還要刪除

2.透過ajax請求json檔案

　　優點：只需要配置路徑，就可以訪問，進入聯調階段不用修改大量的js代碼

　　缺點：ajax存在跨域問題，通常無法請求本地文件，即使火狐也存在不能訪問不同文件目錄下的json文件，通常需要透過ide或自己手動啟動服務

3.用nodejs自己寫一個專門用來發送請求的服務，不包含業務邏輯

　　優點：前端的程式碼進入聯調階段只需要修改一個basePath，所有的介面名字都可以和約定好的路徑保持一致，可以測試post請求，模擬網路環境

　　缺點：自己要寫一個後台

1、2兩種模擬資料的方式適合用來做demo，但是如果做得是上線項目，我們還是推薦使用自己搭建一個node後台

1.準備node環境、npm/cnpm

2 .安裝express、mockjs

3.建立服務端檔案server.js，引入相關模組

let express = require('express'); //引入express模块
let Mock = require('mockjs');  //引入mock模块
let app = express();    //实例化express

4.設定介面路由，設定監聽埠

/**
 * 配置test.action路由
 * @param {[type]} req [客户端发过来的请求所带数据]
 * @param {[type]} res [服务端的相应对象，可使用res.send返回数据，res.json返回json数据，res.down返回下载文件]
 */
app.all('/test.action', function(req, res) {
 res.send('hello world');
});
/**
 * 监听8090端口
 */
app.listen('8090');

　　此時我們直接訪問http://localhost:8090/test.action，就可以直接在介面看到'hello world'文字

5.使用mockjs返回格式化json數據

app.all('/test.action', function(req, res) {
 /**
  * mockjs中属性名‘|'符号后面的属性为随机属性，数组对象后面的随机属性为随机数组数量，正则表达式表示随机规则，+1代表自增
  */
 res.json(Mock.mock({
  "status": 200,
  "data|1-9": [{
   "name|5-8": /[a-zA-Z]/,
   "id|+1": 1,
   "value|0-500": 20
  }]
 }));
});

　　此時我們再訪問頁面數據，我們就可以得到一份隨機的json數據

6.創建模擬數據文件夾testData，創建模擬數據json文件（注意：json文件中不能使用正規，且物件屬性必須為雙引號字串）

7.遍歷模擬資料文件，產生對應路由

/*readdir读取目录下所有文件*/
fs.readdir('./testData', function(err, files) {
 if(err) {
  console.log(err);
 } else {
  /*成功读取文件，取得文件名，拼接生成对应action，监听对应接口并返回对应文件数据*/
  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伺服器已經搭建成功，使用node server.js運行伺服器，我們就可以直接在前端訪問接口，但是如果只是單純的生成後台，前端頁面不通過後台進行訪問的話，存在跨域問題，如果需要解決，可以在後台添加跨域請求

/*为app添加中间件处理跨域请求*/
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需要使用正規則，請單獨設定路由處理，express和mockjs更多指令，請查閱官網api

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在Javascript中如何將路徑轉換為base64編碼

詳細解讀VUE中有關ie9相容性

使用parcel如何設定vue鷹架（詳細教學）

#

以上是在express+mockjs中如何實現後台資料發送的詳細內容。更多資訊請關注PHP中文網其他相關文章！