1. ホーム
  2. Web プログラミング
  3. ジャバスクリプト
  4. javascriptのクラスライブラリ

vueのプロジェクトでモックを使用する方法を知っていますか?

2022-01-13 22:35:32

Mock.js は、フロントエンドのタッパーがバックエンドから独立して開発し、ユニットテストを書きやすくするために設計されたモックデータジェネレータです。以下のモック関数が提供されています。

  • データテンプレートに基づきモックデータを生成する
  • Ajaxリクエストをシミュレートし、モックデータを生成して返す。
  • HTMLテンプレートに基づいたモックデータの生成

最初のステップ

npm install mockjs // install mockjs

npm install axios

第2ステップでは、関連する設定をrequest.jsで行い、request.jsのコードは次のようになります。

import axios from 'axios'
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-urlencoded'
const http = axios.create()
 http.defaults.timeout = 3000
 http.interceptors.request.use(config => { // request interceptor configuration // may not be configured
    // do sth
    return config
}, error => {
    console.log(error)
    return Promise.reject(error)
})
 http.interceptors.response.use(response => { // response interceptor configuration // may not be configured
    // do something
    return response
}, error => {
    console.log(error)
    return Promise.reject(error)
})
 export function fetch(url, params) { // Encapsulate the post request for axios
    return new Promise((resolve, reject) => { // promise usage, check it out
        axios.post(url, params).then(response => {
            resolve(response.data) // promise related
        }).catch(error => {
            reject(error) // promise related
        })
    })
}
 export default { // Expose the htto_mock method, which is used later in the page
    http_mock(url, params) {
        return fetch(url, params)
    }
}

第3ステップでは、関連する設定をmock.jsで行っており、mock.jsのコードは以下の通りです。

import Mock from 'mockjs'
 const Random = Mock.
 var listData = function() {
    let _data = {
        status: 200,
        message: 'success',
        data: {
            total: 100,
            'rows|10': [{
            id: '@guid',
            name: '@cname',
            'age|20-30': 23,
            'jobs|1': ['front-end engineer', 'back-end engineer', 'UI engineer', 'requirements engineer']
            }]
        }
    }
    return { _data }
}
// url is the request address to be intercepted request method request data (rule) (here the api will be intercepted by mockjs)
Mock.mock('http://route.showapi.com/60-27', 'post', listData())
 

4番目のステップでは、main.jsの中にmock.jsを導入する必要があります。

import mock from '@/http/mock'

5番目のステップでは

import request from '@/http/request'
 export default {
    name: "FirstPage",
    created() {
        this.getData()
    },
    methods: {
        getData() {
             // Pretend to send a request using http_mock (mock automatically intercepts the request and generates the data)
         // The first argument here needs to be the same as the first argument in Mock.mock()
            console.log('Request started')
            request.http_mock('http://route.showapi.com/60-27','api_id=63114&api_sign=3847b0').then(response => {
            console.log(response._data)
            })
       },
    }
}

その効果は次のとおりです。

概要

この記事があなたのお役に立ち、Script Houseの他のコンテンツにもっと注目していただけることを願っています。