node-express框架本地模擬介面資料

aishuishui2066發表於2019-02-16
Express框架

GitHub專案地址：git@github.com:zhangying2345/simuLocDataVue.git

背景知識

簡單的express路由

路由是指如何定義應用的端點（URIs）以及如何響應客戶端的請求。

// 匹配根路徑的請求
app.get(`/`, function (req, res) {
  res.send(`root`);
});

// 匹配 /about 路徑的請求
app.get(`/about`, function (req, res) {
  res.send(`about`);
});

// 匹配 /random.text 路徑的請求
app.get(`/random.text`, function (req, res) {
  res.send(`random.text`);
});

從本質上來說，一個 Express 應用就是在呼叫各種中介軟體。
中介軟體（Middleware） 是一個函式，它可以訪問請求物件（request object (req)）, 響應物件（response object (res)）, 和 web 應用中處於請求-響應迴圈流程中的中介軟體，一般被命名為 next 的變數。

var app = express();

// 沒有掛載路徑的中介軟體，應用的每個請求都會執行該中介軟體
app.use(function (req, res, next) {
  console.log(`Time:`, Date.now());
  next();
});

// 掛載至 /user/:id 的中介軟體，任何指向 /user/:id 的請求都會執行它
app.use(`/user/:id`, function (req, res, next) {
  console.log(`Request Type:`, req.method);
  next();
});

// 路由和控制程式碼函式(中介軟體系統)，處理指向 /user/:id 的 GET 請求
app.get(`/user/:id`, function (req, res, next) {
  res.send(`USER`);
});

express.Router

可使用 express.Router 類建立模組化、可掛載的路由控制程式碼。Router 例項是一個完整的中介軟體和路由系統，因此常稱其為一個 “mini-app”。

下面的例項程式建立了一個路由模組，並載入了一箇中介軟體，定義了一些路由，並且將它們掛載至應用的路徑上。

var express = require(`express`);
var router = express.Router();

// 該路由使用的中介軟體
router.use(function timeLog(req, res, next) {
  console.log(`Time: `, Date.now());
  next();
});
// 定義網站主頁的路由
router.get(`/`, function(req, res) {
  res.send(`Birds home page`);
});
// 定義 about 頁面的路由
router.get(`/about`, function(req, res) {
  res.send(`About birds`);
});

module.exports = router;

然後在應用中載入路由模組：

var birds = require(`./birds`);
...
app.use(`/birds`, birds);

應用即可處理髮自 /birds 和 /birds/about 的請求，並且呼叫為該路由指定的 timeLog 中介軟體。

webpack-dev-server

webpack-dev-server 為你提供了一個簡單的 web 伺服器，並且能夠實時重新載入(live reloading)。

const path = require(`path`);
  const HtmlWebpackPlugin = require(`html-webpack-plugin`);
  const CleanWebpackPlugin = require(`clean-webpack-plugin`);

  module.exports = {
    entry: {
      app: `./src/index.js`,
      print: `./src/print.js`
    },
    devtool: `inline-source-map`,
 +   devServer: {
 +     contentBase: `./dist`
 +   },
    plugins: [
      new CleanWebpackPlugin([`dist`]),
      new HtmlWebpackPlugin({
        title: `Development`
      })
    ],
    output: {
      filename: `[name].bundle.js`,
      path: path.resolve(__dirname, `dist`)
    }
  };

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服務，將 dist 目錄下的檔案，作為可訪問檔案。類似於通過 Express 內建的 express.static 託管靜態檔案，例如圖片、CSS、JavaScript 檔案等，通過檔案路徑就可以訪問檔案了。

  • devServer.before

提供在伺服器內部的所有其他中介軟體之前執行定製中介軟體的功能。 這可以用來定義自定義處理程式，例如：

  app.get(`/some/path`, function(req, res) {
    res.json({ custom: `response` });
  });
}

webpack-dev-middleware

webpack-dev-middleware 是一個容器(wrapper)，它可以把 webpack 處理後的檔案傳遞給一個伺服器(server)。 webpack-dev-server 在內部使用了它。

模擬資料基本原理

  1. 讀取本地所有json檔案的相對路徑
  2. require這些相對路徑讀取檔案內容
  3. 把讀取到的內容全部放到一個json檔案中
  4. 對每個本檔案中的url路徑設定express的路由監聽
  5. 監聽到的每個路徑採用res.send返回結果，結果是通過url對應的key去往步驟3的json檔案中去取對應的物件
var glob = require(`glob`);
const express = require(`express`)
const app = express()
var apiRoutes = express.Router()
var appData = require(`../data/config`)
var getApi= appData[`get`];//所有的get請求
console.log(`-----`,getApi);
var postApi= appData[`post`];//所有的post請求

//查詢所有的json檔案
var entryJS = {};
/*https://www.mgenware.com/blog/?p=2716---使用特殊的**來遞迴返回所有子目錄內的檔案，因為預設node-glob只會返回一級子目錄下得內容。*/
let jsonFilesList = glob.sync(`./data/**/*.json`);
console.log(`jsonFilesList-----`,jsonFilesList);
/*獲取所有json檔案的相對路徑（相對於本檔案)））*/
entryJS = jsonFilesList.reduce(function (prev, curr) {
  console.log(`curr------`,curr);
  console.log(`curr.slice(7)------`,curr.slice(7));
  console.log(`prev[curr.slice(7)---------`,prev[curr.slice(7)]);
  prev[curr.slice(7)] = `.`+curr;
  console.log(`prev---`,prev);
  return prev;
}, {});

//合併所有的json檔案到一個json中
let jsonData={};
for (var i in entryJS){
  console.log(`entryJS-----`,entryJS);
  let data = require(entryJS[i]);
  jsonData = Object.assign(jsonData, data);
  console.log(`jsonData----->`,jsonData);
}
console.log(`jsonData--All--->`,jsonData);
app.use(`/`, apiRoutes)

然後在devServer中新增

before (app) {
      //get//
      for(var i = 0;i < getApi.length; i++){
        console.log(`getApi------->`,getApi);
        var getData = jsonData[getApi[i].key];
        console.log(`getData----->`,getData);
        app.get(getApi[i].url, function (req, res) {
          res.json(getData);
        });
      }
      //post
      /*for(var i = 0;i < postApi.length; i++){
        var postData = jsonData[postApi[i].key];
        app.post(postApi[i].url,function (req, res) {
          res.json(postData);
        });
      }*/
    }
    ////////////////////////////

config.js中

let data={
  "get":[
    {
      `url`:`/api/goods`,
      `key`:`goods`
    },
    {
      `url`:`/api/sells`,
      `key`:`sells`
    }
  ],
  "post":[{
    `url`:`api/sell`,
    `key`:`sells`
  }]
}
module.exports = data;

就可以模擬本地資料了。

相關文章