亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Webpack最簡(jiǎn)單的方式Mock API

TalkingData / 2761人閱讀

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

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

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

定義API，假設(shè)我們講API放到一個(gè)獨(dú)立文件 mocker/index.js 中, 下面我們定義四個(gè) API，每個(gè) 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 組合，中間一個(gè)空格間隔，如：GET /api/user。value 可以是 json 或者 函數(shù)。

在 Webpack 中使用

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

改變你的配置文件，告訴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代理變得簡(jiǎn)單。

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

讓我們添加一個(gè)腳本來(lái)輕松運(yùn)行開(kāi)發(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)行下面命令，跑起來(lái)，通過(guò)工具測(cè)試一下你模擬的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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/107356.html

相關(guān)文章

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

    摘要：前端開(kāi)發(fā)如何做好本地接口模擬之前有寫(xiě)過(guò)一篇本地化接口模擬前后端并行開(kāi)發(fā)，講到過(guò)本地接口模擬，但不太細(xì)致。有哪些途徑本地接口模擬一般分為工具層面和代碼層面。因?yàn)楸镜亟涌谀M功能主要是針對(duì)的返回值為格式的異步請(qǐng)求，所以這種方式主要用文件。 前端開(kāi)發(fā)如何做好本地接口模擬 之前有寫(xiě)過(guò)一篇 本地化接口模擬、前后端并行開(kāi)發(fā)，講到過(guò)本地接口模擬，但不太細(xì)致。這次細(xì)細(xì)的說(shuō)說(shuō)本地接口模擬。 1. 有什么...

    ACb0y 評(píng)論0 收藏0

  • Webpack 愛(ài)與恨

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

    HmyBmny 評(píng)論0 收藏0

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

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

    whatsns 評(píng)論0 收藏0

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

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

    MonoLog 評(píng)論0 收藏0

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

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

    graf 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<