Webpack最簡單的方式Mock API

TalkingData 發布于2019-08-26 11:41 / 2699人閱讀

摘要：是一個為創建的中間件。當您嘗試在沒有實際的服務器的情況下，測試您的應用程序時，這將會很有幫助。可以是或者函數。模擬代理變得簡單。讓我們添加一個腳本來輕松運行開發服務器修改運行下面命令，跑起來，通過工具測試一下你模擬的是否能返回結果。

webpack-api-mocker 是一個為 REST API 創建 mock 的 webpack-dev-server 中間件。當您嘗試在沒有實際的 REST API 服務器的情況下，測試您的應用程序時，這將會很有幫助。

安裝

npm install webpack-api-mocker --save-dev

使用

定義API，假設我們講API放到一個獨立文件 mocker/index.js 中, 下面我們定義四個 API，每個 API 都放到 json 的 key 和 value 中，如下：

const proxy = {
  "GET /api/user": {id: 1, username: "kenny", sex: 6 },
  "GET /api/user/list": [
    {id: 1, username: "kenny", sex: 6 },
    {id: 2, username: "kenny", sex: 6 }
  ],
  "POST /api/login/account": (req, res) => {
    const { password, username } = req.body;
    if (password === "888888" && username === "admin") {
      return res.send({
        status: "ok",
        code: 0,
        token: "sdfsdfsdfdsf",
        data: {id: 1, username: "kenny", sex: 6 }
      });
    } else {
      return res.send({status: "error", code: 403 });
    }
  },
  "DELETE /api/user/:id": (req, res) => {
    console.log("---->", req.body)
    console.log("---->", req.params.id)
    res.send({ status: "ok", message: "刪除成功！" });
  }
}
module.exports = proxy;

上面的 key 比較特殊，由 methd 和 path 組合，中間一個空格間隔，如：GET /api/user。value 可以是 json 或者函數。

在 Webpack 中使用

要在你的 Webpack 項目中使用 api mocker，只需將設置選項，添加到你的 webpack-dev-server 選項中即可：

改變你的配置文件，告訴dev服務器在哪里查找文件：webpack.config.js。

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
+ const apiMocker = require("webpack-api-mocker");

module.exports = {
  entry: {
    app: "./src/index.js",
    print: "./src/print.js"
  },
  devtool: "inline-source-map",
+ devServer: {
+   ...
+   before(app){
+     apiMocker(app, path.resolve("./mocker/index.js"), {
+       proxy: {
+         "/repos/*": "https://api.github.com/",
+       },
+       changeHost: true,
+     })
+   }
+ },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Development"
    })
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  }
};

模擬API代理變得簡單。

{
  before(app){
+   apiMocker(app, path.resolve("./mocker/index.js"), {
+     proxy: {
+       "/repos/*": "https://api.github.com/",
+     },
+     changeHost: true,
+   })
  }
}

讓我們添加一個腳本來輕松運行開發服務器：

修改 package.json

{
  "name": "development",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "watch": "webpack --progress --watch",
+   "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "csv-loader": "^2.1.1",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.29.0",
    "style-loader": "^0.18.2",
    "webpack": "^3.0.0",
    "xml-loader": "^1.2.1"
  }
}

運行下面命令，跑起來，通過工具測試一下你模擬的API是否能返回結果。

npm run start

Express 中使用

const path = require("path");
const express = require("express");
+ const apiMocker = require("webpack-api-mocker");

const app = express();

+ apiMocker(app, path.resolve("./mocker/index.js"))
app.listen(8080);

云服務器 GPU云服務器最簡單的算法最簡單的爬蟲最簡單的webrtc 最簡單的rxjava

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107356.html

前端開發如何做好本地接口模擬

摘要：前端開發如何做好本地接口模擬之前有寫過一篇本地化接口模擬前后端并行開發，講到過本地接口模擬，但不太細致。有哪些途徑本地接口模擬一般分為工具層面和代碼層面。因為本地接口模擬功能主要是針對的返回值為格式的異步請求，所以這種方式主要用文件。前端開發如何做好本地接口模擬之前有寫過一篇本地化接口模擬、前后端并行開發，講到過本地接口模擬，但不太細致。這次細細的說說本地接口模擬。 1. 有什么...

ACb0y 2019-08-23 14:31 評論0 收藏0
Webpack 愛與恨

摘要：關于標題，為什么是愛與恨因為在剛出來的時候，我并不是堅定的支持者，有很多地方用起來不方便，設計不合理。用戶只有首次訪問需要下載全部靜態資源，以后的訪問都直接使用緩存資源。首先，在中添加字段，當為時，則開啟服務。例如請求的是則返回中的數據。關于標題，為什么是愛與恨？因為在 webpack 剛出來的時候，我并不是堅定的支持者，有很多地方用起來不方便，api 設計不合理。隨著 webpa...

HmyBmny 2019-08-20 16:47 評論0 收藏0
webpack4+vue2+axios+vue-router的多頁+單頁混合應用框架

摘要：適用于主要入口頁面生成多頁，子頁面和次要頁面使用單頁形式的項目。文件用來存放固定的數據，而文件可更加自由的處理并返回數據。 VUE2的單頁應用框架有人分享了，多頁應用框架也有人分享了，這里分享一個單頁+多頁的混合應用框架吧，node.js寫了一個簡單的mock服務也集成在里面，整體初現雛形，還有很多需要優化和改善的地方。。。項目結構 │ ├─build ...

whatsns 2019-08-23 11:44 評論0 收藏0
手摸手，帶你用vue擼后臺系列五(v4.0新版本)

摘要：同時增加了單元測試，使用了，增加了可視化配置權限，增加了自定義布局等等，優化了原先的權限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的，但正好滿足了我們的需求。它會重寫瀏覽器的對象，從而才能攔截所有請求，代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來，維護至今已經有兩年多的時間了了，發布了四十多個版本，...

MonoLog 2019-08-26 13:43 評論0 收藏0
手摸手，帶你用vue擼后臺系列五(v4.0新版本)

摘要：同時增加了單元測試，使用了，增加了可視化配置權限，增加了自定義布局等等，優化了原先的權限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的，但正好滿足了我們的需求。它會重寫瀏覽器的對象，從而才能攔截所有請求，代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來，維護至今已經有兩年多的時間了了，發布了四十多個版本，收獲了三...

graf 2019-05-21 19:33 評論0 收藏0