vue關於mock的簡單使用

来源:https://www.cnblogs.com/l-y-h/archive/2019/10/17/11691110.html
-Advertisement-
Play Games

一、mock 1、簡介 mock是一個模擬數據生成器，旨在幫助前端獨立於後端進行開發，幫助編寫單元測試。其可模擬 Ajax 並返回模擬數據，使前端不用去調用後端的介面，方便測試。 2、vue直接使用mock step1：安裝mock step2：直接引入mock.js，並編寫mock介面（Mock. ...


一、mock

1、簡介

　　mock是一個模擬數據生成器，旨在幫助前端獨立於後端進行開發，幫助編寫單元測試。其可模擬 Ajax 並返回模擬數據，使前端不用去調用後端的介面，方便測試。
　

2、vue直接使用mock

step1：安裝mock

npm install mockjs

 

step2：直接引入mock.js，並編寫mock介面（Mock.mock）。

【mock.js】
//引入mock模塊
import Mock from 'mockjs';

Mock.mock('/login', { //輸出數據
    'name': '@name', //隨機生成姓名
    //還可以自定義其他數據
});
Mock.mock('/list', { //輸出數據
    'name': '@name', //隨機生成姓名
    'age|10-20': 10
    //還可以自定義其他數據
});

 

step3：在需要的地方引入編寫後的介面js即可。

【App.vue】
<template>
    <div>
        <button @click="login">login</button>
        <button @click="list">list</button>
    </div>
    <!--App -->
</template>

<script>
    import mock from './mock.js'
    import axios from 'axios'
    export default {
        methods: {
            login() {
                axios.post("/login").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name)
                    }
                })
            },
            
            list() {
                axios.post("/list").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name + ',' + response.data.age)
                    }
                })
            }
        }
    }
</script>

<style>

</style>

 

step4：代碼與截圖
　　目錄結構。使用vue-cli創建項目（詳見https://www.cnblogs.com/l-y-h/p/11241503.html）。

 

 

完整代碼

【main.js】
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')


【mock.js】
//引入mock模塊
import Mock from 'mockjs';

Mock.mock('/login', { //輸出數據
    'name': '@name', //隨機生成姓名
    //還可以自定義其他數據
});
Mock.mock('/list', { //輸出數據
    'name': '@name', //隨機生成姓名
    'age|10-20': 10
    //還可以自定義其他數據
});



【App.vue】
<template>
    <div>
        <button @click="login">login</button>
        <button @click="list">list</button>
    </div>
    <!--App -->
</template>

<script>
    import mock from './mock.js'
    import axios from 'axios'
    export default {
        methods: {
            login() {
                axios.post("/login").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name)
                    }
                })
            },
            
            list() {
                axios.post("/list").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.name + ',' + response.data.age)
                    }
                })
            }
        }
    }
</script>

<style>

</style>

 

運行截圖：
初始畫面

 

 

點擊login 按鈕（隨機產生一個人名）

 

 

點擊list按鈕（隨機產生一個人名和年齡）

 

 

3、Vue項目中使用webpack-api-mocker進行mock

step1：安裝webpack-api-mocker

npm i webpack-api-mocker --save-dev

 

step2：編寫 /mocker/index.js，用於定義mock介面

【/mocker/index.js】
// 使用 require 引入json文件，可以直接訪問數據
const appData = require('../data.json')

const proxy = {
    'GET /api/login': {
        success: appData.login.success,
        message: appData.login.message
    },
    'GET /api/list': [{
            id: 1,
            username: 'kenny',
            sex: 6
        },
        {
            id: 2,
            username: 'kenny',
            sex: 6
        }
    ],
    'POST /api/post': (req, res) => {
        res.send({
            status: 'error',
            code: 403
        });
    },
    'DELETE /api/remove': (req, res) => {
        res.send({
            status: 'ok',
            message: '刪除成功！'
        });
    }
}
module.exports = proxy

 

step3：修改 vue.config.js 配置文件（若不存在，在項目下新建即可）

【vue.config.js】
const path = require('path')
const apiMocker = require('webpack-api-mocker')

module.exports = {
  devServer: {
    before(app) {
　　　　// 註意，此處引用的是自定義的介面文件
      apiMocker(app, path.resolve('./mocker/index.js'), {
        proxy: {
          '/repos/*': 'https://api.github.com/',
        },
        changeHost: true,
      })
    }
  }
}

 

step4：隨便定義一組 json 數據（用於測試）。

{
    "login": {
      "success": "true",
      "message": "登陸成功"
    },
    "fileList": {
      "success":"true",
      "list":[
      {"fileId":"1","fileName":"a1.c","content":"content-test1"
      },
      {"fileId":"2","fileName":"a2.c","content":"content-test2"
      },
      {"fileId":"3","fileName":"a3.c","content":"content-test2"
      },
      {"fileId":"4","fileName":"a4.c","content":"content-test2"
      },
      {"fileId":"5","fileName":"a5.c","content":"content-test2"
      },
      {"fileId":"6","fileName":"a8.c","content":"content-test2"
      },
      {"fileId":"7","fileName":"a9.c","content":"content-test2"
      }]
    }
}

 

step5：完整代碼、截圖
文件目錄結構：

 

 

完整代碼

【main.js】
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')


【App.vue】
<template>
    <div>
        <button @click="login">login</button>
        <button @click="list">list</button>
        <button @click="post">post</button>
        <button @click="remove">remove</button>
    </div>
    <!--App -->
</template>

<script>
    import axios from 'axios'
    export default {
        methods: {
            login() {
                axios.get("/api/login").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.success + ',' + response.data.message)
                    }
                })
            },
            
            list() {
                axios.get("/api/list").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        let list1 = response.data[0].id + ',' + response.data[0].sex + ',' + response.data[0].username
                        let list2 = response.data[1].id + ',' + response.data[1].sex + ',' + response.data[1].username
                        alert(list1 + '\n' + list2)
                    }
                })
            },
            
            post() {
                axios.post("/api/post").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.status + ',' + response.data.code)
                    }
                })
            },
            
            remove() {
                axios.delete("/api/remove").then(response => {
                    if (response.data) {
                        console.log(response.data)
                        alert(response.data.status + ',' + response.data.message)
                    }
                })
            }
        }
    }
</script>

<style>

</style>



【data.json】
{
    "login": {
      "success": "true",
      "message": "登錄成功"
    },
    "fileList": {
      "success":"true",
      "list":[
      {"fileId":"1","fileName":"a1.c","content":"content-test1"
      },
      {"fileId":"2","fileName":"a2.c","content":"content-test2"
      },
      {"fileId":"3","fileName":"a3.c","content":"content-test2"
      },
      {"fileId":"4","fileName":"a4.c","content":"content-test2"
      },
      {"fileId":"5","fileName":"a5.c","content":"content-test2"
      },
      {"fileId":"6","fileName":"a8.c","content":"content-test2"
      },
      {"fileId":"7","fileName":"a9.c","content":"content-test2"
      }]
    }
}
  
  
  
【vue.config.js】
const path = require('path')
const apiMocker = require('webpack-api-mocker')

module.exports = {
  devServer: {
    before(app) {
        // path.resolve 引入mock
      apiMocker(app, path.resolve('./mocker/index.js'), {
        proxy: {
          '/repos/*': 'https://api.github.com/',
        },
        changeHost: true
      })
    }
  }
}



【/mocker/index.js】
// 使用 require 引入json文件，可以直接訪問數據
const appData = require('../data.json')

const proxy = {
    'GET /api/login': {
        success: appData.login.success,
        message: appData.login.message
    },
    'GET /api/list': [{
            id: 1,
            username: 'kenny',
            sex: 6
        },
        {
            id: 2,
            username: 'kenny',
            sex: 6
        }
    ],
    'POST /api/post': (req, res) => {
        res.send({
            status: 'error',
            code: 403
        });
    },
    'DELETE /api/remove': (req, res) => {
        res.send({
            status: 'ok',
            message: '刪除成功！'
        });
    }
}
module.exports = proxy

 

運行截圖：
點擊 login 按鈕

 

 

點擊 list 按鈕

 

 

點擊 post 按鈕

 

 

點擊remove按鈕

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • QuickJS 快速入門 (QuickJS QuickStart)
    1. QuickJS 快速入門 (QuickJS QuickStart) "1. QuickJS 快速入門 (QuickJS QuickStart)" "1.1. 簡介" "1.2. 安裝" "1.3. 簡單使用" "1.3.1. 控制台執行" "1.3.2. js腳本執行" "1.3.3. 直接編 ...
  • JavaScript：如何獲取某一天所在的星期
    我們會遇到的需求的是，獲取今天或者某一天所在星期的開始和結束日期。 我們這裡來獲取今天所在星期的始末日期，我們可以通過 來獲取今天是星期幾，然後再通過這個減去或者加上一定的天數，就是這個星期的開始日期和結束日期。 是不是很完美？但，這裡有一個很大的 bug！ 註意：如果今天是周日，那麼 就會是 0， ...
  • 前端面試題套路--終極版（Vue、JavaScript）
    前言 面試題是永遠都準備不完的！！！！！ 前端常見的一些問題 1.前端性能優化手段？ 1. 儘可能使用雪碧圖 2. 使用字體圖標代替圖片 3. 對HTML，css，js 文件進行壓縮 4. 模塊按需載入 5. 資源懶載入與資源預載入 6. 避免使用層級較深的選擇器及減少DOM深度 2.單頁面應用和多 ...
  • js通過方法返回對象的註意點
    問題：js通過方法返回一個字面量對象和返回一個提前已經定義好的字面量對象有區別嗎？ 答案：有 我們先來看看第一種情況，fun1方法返回一個提前沒定義的字面量對象，然後通過調用方法返回三個對象，分別是obj1, obj2, obj3,然後我修改obj2對象的age方法，列印obj1, obj2, ob ...
  • pc vue 項目中的菜單許可權控制
    在pc 管理系統這種類型的產品，通常會涉及到賬號許可權的控制，不同的賬號許可權能瀏覽的功能模塊是不同的，對應側邊欄菜單模塊的顯示也會不同。 ...
  • 關於Vue-elementUI中，給input手動賦值之後無法修改的問題解決
    方案一：在data中給input的值賦一個初始值 方案二：在給input賦值時，使用this.$set ...
  • 強烈推薦一款圖片無損壓縮工具
    Tinypng： 地址：https://tinypng.com/ 這款工具最大限度的做到對畫質無損的進行壓縮。 這個工具同時支持對Jpg和Png的壓縮。 Tinypng也支持Wordpress和magento的使用。 > 本文來自[木莊網路博客]> 強烈推薦一款圖片無損壓縮工具 ...
  • 使用koa-mysql-session時報錯
    描述在本地測試代碼沒問題，但是部署到伺服器上時就報錯。錯誤> cross-env WEBPACK_TARGET=node NODE_ENV=production node ./server/app.jstruethe server is start at port 3333/usr/share/ng... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類