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

資訊專欄INFORMATION COLUMN

VueCli3.0中集成MockApi

劉玉平 / 3181人閱讀

摘要：缺點(diǎn)需要增加本地的代碼量，以及需要配置實(shí)現(xiàn)攔截優(yōu)點(diǎn)數(shù)據(jù)通過會更豐富。缺點(diǎn)修改內(nèi)容溝通成本高，跟后端扯皮利用去模擬優(yōu)點(diǎn)可控內(nèi)容以及實(shí)現(xiàn)動態(tài)。三本地周邊知識本地的思想就是利用完成。注意接口的和自己的接口不要沖突。

VueCli3.0中集成MockApi 一：使用場景

哎喲，好煩啊，這個需求還么結(jié)束就來下一個需求，程序員不要排期的嗎？

沒辦法啊，資本主義的XX嘴臉啊

來吧，技術(shù)評審我倆把接口格式對一把，你先開發(fā)，我這邊結(jié)束了我跟上，再聯(lián)調(diào)

MMP，那又增加了我的工作量啊，每次我都要自己先把數(shù)據(jù)放在一個配置文件中，引入使用，然后對接的
時候還得刪除無用代碼，好氣

你自己Mock接口啊，就向我們后端經(jīng)常用PostMan一樣模擬請求啊

Mock？？我去查查看

二：Mock的概念

1：Mock的描述

Mock接口其實(shí)就是模擬真實(shí)接口提供一個在開發(fā)環(huán)境的假數(shù)據(jù)，甚至是真實(shí)數(shù)據(jù)，在開發(fā)時，經(jīng)常出現(xiàn)
接口內(nèi)容不能夠及時的跟進(jìn)，導(dǎo)致開發(fā)過程中添加一些額外的工作量。接下來的例子全部圍繞著Vue為主體介紹
前后端提前確定好通信的JSON格式之后，我們在不依賴后端進(jìn)度的同時，能提供一套好的開發(fā)體驗(yàn)。

2：Mock能解決的問題

減少額外工作，在沒有Mock接口的時候我們模擬數(shù)據(jù)的方式很煩躁，比如list列表，需要在data中聲明list，去調(diào)試內(nèi)容，或者引入一個mock文件，這樣做導(dǎo)致在聯(lián)調(diào)調(diào)用接口的部分代碼沒有寫，聯(lián)調(diào)成功的時候要刪除很多無用代碼 ---> 通過Mock只需在聯(lián)調(diào)的時候把Mock接口的地址換成真實(shí)地址即可

import { mockList2 } from "mock/list.js";

export default {
  data () {
    return {
      mockList: [
        {
          "name": "tx",
          "age": 12
        }
      ],
      mockList2
    }
  }
}

如果采用上述的方式去模擬數(shù)據(jù)，缺少真正缺口所具備的狀態(tài)，比如刪除接口，有成功和失敗的區(qū)分，這個模擬就很惡心了 ----> 通過Mock，可以直接通過實(shí)在的query或者其他的操作來達(dá)到同樣的目的

3：Mock的幾種方式以及對應(yīng)的優(yōu)缺點(diǎn)

Mock的方式 優(yōu)缺點(diǎn)
本地Mock接口 優(yōu)點(diǎn)：可以更加細(xì)粒度的控制mock的內(nèi)容。缺點(diǎn)：需要增加本地的代碼量，以及需要配置webapck
Mock.js實(shí)現(xiàn)ajax攔截 優(yōu)點(diǎn)：數(shù)據(jù)通過mock.js會更豐富。缺點(diǎn)：增加一些本地配置，攔截ajax
后端Controller的靜態(tài)JSON 優(yōu)點(diǎn)：接口聯(lián)調(diào)不需要修改任何東西。缺點(diǎn)：修改Mock內(nèi)容溝通成本高，跟后端扯皮
利用FastMock去模擬Mock 優(yōu)點(diǎn)：可控內(nèi)容以及實(shí)現(xiàn)動態(tài)Restful api。缺點(diǎn)：如果項(xiàng)目包裝axios等請求庫之后需要針對接口轉(zhuǎn)發(fā)做不同處理

4：本地Mock接口

該篇文章針對本地Mock接口進(jìn)行操作，其他的方式會簡要介紹并給出對應(yīng)的鏈接，如果有需要，自行去查閱。

三：本地Mock周邊知識

本地Mock的思想就是利用Node + express完成Restful Api。結(jié)合webpack配置項(xiàng)devServer同時利用Vue-cli3.0的暴露的配置利用本地express完成mock接口的添加

Node+Express的相關(guān)知識點(diǎn)，用node+express寫過Restful Api的就應(yīng)該知道接下來Mock怎么處理了，這里我先簡要介紹一下我們需要用到的技術(shù)吧（Express的路由以及node的fs模塊）

Express路由相關(guān)，具體的見文檔，這里不區(qū)分請求方法，直接app.use

const express = require("express");
const app = express();

// 這樣一個簡單的路由就完成了，請求到/ajax-get-info的請求就能拿到對應(yīng)的JSON數(shù)據(jù)
app.use("/ajax-get-info", (req, res) => {
  res.send({
    "success": true,
    "code": 0,
    "data": {}
  })  
});

針對不同的請求生成動態(tài)的內(nèi)容，我們可以通過req.query和req.params等來生成動態(tài)內(nèi)容，在express中，我們傳入的body內(nèi)容，在req.body中并獲取不到，需要添加中間件body-parser，需要注意的是這個中間件不能在app全局路由使用，不然會影響到代碼到測服的接口，利用http-proxy-middleware轉(zhuǎn)發(fā)的接口，所以我們需要多帶帶的設(shè)置一個Mock路由，針對路由級別的使用中間件，代碼如下

const bodyParser = require("body-parser");
const express = require("express");

const mockRouter = express.Router();
// express middleware bodyParser for mock server
// for parsing application/json
mockRouter.use(bodyParser.json());
// for parsing application/x-www-form-urlencoded
mockRouter.use(bodyParser.urlencoded({ extended: true }));
// Api prefix named /mock
app.use("/mock", mockRouter);

// now you can set mock api use mockRouter
mockRouter.use("/ajax-get-info", (req, res) => {
  // use req.body to get request body info
  console.log(req.body);
  
  res.send({
    "success": true,
    "code": 0,
    "data": {
      // return dynamic JSON
      name: req.body.name  
    }
  })
});

現(xiàn)在Mock級別的路由已經(jīng)有了，接下來我們就要準(zhǔn)備對應(yīng)的路由和響應(yīng)的callback了，添加一個mock文件夾，專門放置一些mock接口的文件，利用node的fs模塊引入所有需要mock的接口即可

const path = require("path");
const mockDir = path.resolve(__dirname, "../mock");

fs.readdirSync(mockDir).forEach(file => {
    const mock = require(path.resolve(mockDir, file));
    // mockRouter就是上面Mock路由即可
    mockRouter.use(mock.api, mock.response);
});

Vue-cli3.x的基本知識，相對比于Vue-cli2.x的版本，把webpack的配置封裝出來，拋出一些外在接口去修改webpack配置，我們需要了解的是針對開發(fā)模式express的使用（內(nèi)部使用webpack-dev-serve），Vue-cli3.0需要的是在適當(dāng)?shù)臅r機(jī)處理開發(fā)模式的express實(shí)例，來達(dá)到Mock的目的

module.exports = {
  dev: {
    before: (app) => {
      // app就是底層的express實(shí)例，上面針對express實(shí)例的操作，全部換成app即可  
    }  
  } 
}

至于mock的文件下面的js文件就是我們需要掛載到express的mock接口的信息，下面給出一個實(shí)例，其他仿照即可，一個js文件代表一個mock接口

// 注意，由于是針對子路由級別的，前端調(diào)用的url為/mock/get-info
module.exports = {
  api: "/get-info",
  response: (req, res) => {
    // 由于添加了body-parser中間件，所以可以解析傳入的body，這里就可以用來動態(tài)的生成JSON
    const flag = req.body.flag;

    console.log(req.body);

    res.send(
      {
        success: flag,
        code: 0,
        data: [],
        message: "獲取信息成功",
      },
    );
  },
};

四：結(jié)合上面的幾點(diǎn)整合處理

五：其他幾種方式的Mock接口

mock.js去，給出官網(wǎng)，它會修改原生的XMLHttpRequest來攔截ajax請求，同時提供強(qiáng)大的根據(jù)模板生成數(shù)據(jù)

fastmock，類似本地Mock，數(shù)據(jù)放在了外網(wǎng)，團(tuán)隊(duì)配合可以選擇，具體使用見鏈接

后端Controller生成靜態(tài)JSON，不推薦，后端不會吊我們的，搞不好會干架，哈哈

六：總結(jié)

前端工程化的出現(xiàn)能夠讓前端做的事情很多很多，技術(shù)的廣度能夠支持你做一些有意思的事情。首先這個可以做一些優(yōu)化，比如本地的Mock可以使用mock.js純處理一些數(shù)據(jù)的生成工作。注意mock接口的url和自己proxy的接口不要沖突。使用Vue-cli3.0，它不僅是封裝了webpack的配置，同時提供了自己一套插件機(jī)制，接下來寫一個簡單的cli插件自動化完成這些操作，
敬請期待。歡迎評論交流。

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

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

相關(guān)文章

  • 【Vue】VueCli3 + Vue + typescript 挖坑記

    摘要：挖坑記生成的項(xiàng)目組件，中間遇到了一些讓我直接放棄結(jié)合的坑，還是等的發(fā)布吧，到那個時候肯定結(jié)合得會更好。想了解的話，請戳上的這個，下面給了一種臨時性的解決方案真的挺丑的，真正的解決還是得等的正式發(fā)布。 Vue + typescript 挖坑記 VueCli3.0生成Vue+ts的項(xiàng)目組件，中間遇到了一些讓我直接放棄結(jié)合ts的坑，還是等Vue3.0的發(fā)布吧，到那個時候肯定結(jié)合得會更好。 1...

    endiat 評論0 收藏0

  • vuecli3 vant rem 移動端框架方案

    摘要：描述基于適配方案封裝，構(gòu)建手機(jī)端模板腳手架幫你做好的配置有多環(huán)境開發(fā)封裝適配方案生產(chǎn)環(huán)境優(yōu)化首屏加速低版本瀏覽器兼容環(huán)境發(fā)布腳本可以上手直接寫代碼多環(huán)境開發(fā)之前寫過一個多環(huán)境的方案，是基于的多環(huán)境配置方案傳送門最近新的項(xiàng)目采用了開始了 描述 基于vue-cli3.0+webpack 4+vant ui + sass+ rem適配方案+axios封裝，構(gòu)建手機(jī)端模板腳手架 幫你做好的配置...

    since1986 評論0 收藏0

  • MOCK API 的定義及實(shí)踐（使用eolinker實(shí)現(xiàn)）

    摘要：即便是提供測試環(huán)境的外部系統(tǒng)，一般也僅在開發(fā)聯(lián)調(diào)階段配合提供聯(lián)調(diào)測試對接服務(wù)，一旦聯(lián)調(diào)測試結(jié)束，也不再繼續(xù)提供測試服務(wù)。 MOCK API 的定義 根據(jù)百度百科的定義，mock測試就是在測試過程中，對于某些不容易構(gòu)造或者不容易獲取的對象，用一個虛擬的對象來創(chuàng)建以便測試的測試方法。這個虛擬的對象就是mock對象，mock對象就是真實(shí)對象在調(diào)試期間的代替品。 在瀑布流開發(fā)模式中，如果前端開...

    gghyoo 評論0 收藏0

  • 使用gulp+bower構(gòu)建Angular.js項(xiàng)目

    摘要：本文重點(diǎn)是詳細(xì)介紹項(xiàng)目的構(gòu)建。是優(yōu)秀的自動化項(xiàng)目構(gòu)建工具，我們將用它完成等文件的的測試檢查合并壓縮格式化瀏覽器自動刷新部署文件生成，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟熱重載。是項(xiàng)目依賴管理工具。環(huán)境需求運(yùn)行在環(huán)境，首先安裝。 本文重點(diǎn)是詳細(xì)介紹Angular.js項(xiàng)目的構(gòu)建。gulp是優(yōu)秀的自動化項(xiàng)目構(gòu)建工具，我們將用它完成 javascript/less/css/html/imag...

    roland_reed 評論0 收藏0

  • 使用Retrofit和Mockito進(jìn)行可靠的Android API測試

    摘要：解決這些問題并且練習(xí)這些調(diào)用的一個絕妙方法是，使用一個很好的一個測試雙庫通用程序。當(dāng)服務(wù)器做出響應(yīng)時，會使用響應(yīng)數(shù)據(jù)執(zhí)行回調(diào)方法。目前為止，的威力真的很贊。 測試與API交互的HTTP調(diào)用是一件令人生厭的復(fù)雜事情。測試一個真實(shí)的Web服務(wù)器時，一大堆問題隨之產(chǎn)生：脆性測試（brittle test，因?yàn)榫W(wǎng)絡(luò)或API本身的問題而導(dǎo)致的測試失?。?、速度減慢測試（slow test，每一次H...

    frank_fun 評論0 收藏0

發(fā)表評論

0條評論

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