成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Webpack最簡單的方式Mock API

TalkingData / 2709人閱讀

摘要：是一個為創(chuàng)建的中間件。當(dāng)您嘗試在沒有實際的服務(wù)器的情況下，測試您的應(yīng)用程序時，這將會很有幫助?？梢允腔蛘吆瘮?shù)。模擬代理變得簡單。讓我們添加一個腳本來輕松運(yùn)行開發(fā)服務(wù)器修改運(yùn)行下面命令，跑起來，通過工具測試一下你模擬的是否能返回結(jié)果。

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

安裝 
npm install webpack-api-mocker --save-dev
使用

定義API，假設(shè)我們講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 或者 函數(shù)。

在 Webpack 中使用

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

改變你的配置文件，告訴dev服務(wù)器在哪里查找文件：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,
+   })
  }
}

讓我們添加一個腳本來輕松運(yùn)行開發(fā)服務(wù)器：

修改 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"
  }
}

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

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);

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107356.html

相關(guān)文章

  • 前端開發(fā)如何做好本地接口模擬

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

    ACb0y 評論0 收藏0

  • Webpack 愛與恨

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

    HmyBmny 評論0 收藏0

  • webpack4+vue2+axios+vue-router的多頁+單頁混合應(yīng)用框架

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

    whatsns 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列五(v4.0新版本)

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

    MonoLog 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列五(v4.0新版本)

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

    graf 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<