vue項目中如何使用mock你知道嗎

更新時間：2021年11月21日 16:26:44 作者：唐小亭

這篇文章主要為大家介紹了vue項目如何使用mock，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

第一步：

npm install mockjs // 安裝mockjs

npm install axios

第二步，在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 => { // 請求攔截器配置 // 可不配置
    // do sth
    return config
}, error => {
    console.log(error)
    return Promise.reject(error)
})
 http.interceptors.response.use(response => { // 響應攔截器配置 // 可不配置
    // do something
    return response
}, error => {
    console.log(error)
    return Promise.reject(error)
})
 export function fetch(url, params) { // 封裝axios的post請求
    return new Promise((resolve, reject) => { // promise 用法,自行查閱
        axios.post(url, params).then(response => {
            resolve(response.data) // promise相關
        }).catch(error => {
            reject(error) // promise相關
        })
    })
}
 export default { // 暴露htto_mock方法，即后面頁面中用到的方法
    http_mock(url, params) {
        return fetch(url, params)
    }
}

第三步，在mock.js中進行相關配置，mock.js代碼如下：

import Mock from 'mockjs'
 const Random = Mock.Random
 var listData = function() {
    let _data = {
        status: 200,
        message: 'success',
        data: {
            total: 100,
            'rows|10': [{
            id: '@guid',
            name: '@cname',
            'age|20-30': 23,
            'job|1': ['前端工程師', '后端工程師', 'UI工程師', '需求工程師']
            }]
        }
    }
    return { _data }
}
// url為要攔截的請求地址  請求方式  請求數(shù)據（規(guī)則） （此處api會被mockjs攔截）
Mock.mock('http://route.showapi.com/60-27', 'post', listData())

第四步，在main.js中需引入mock.js即可

import mock from '@/http/mock'

第五步，在頁面中使用

import request from '@/http/request'
 export default {
    name: "FirstPage",
    created() {
        this.getData()
    },
    methods: {
        getData() {
             // 假裝要使用http_mock發(fā)送請求（mock自動攔截請求并生成數(shù)據）
　　　      // 此處第一個參數(shù)需要和Mock.mock()中的第一個參數(shù)一致
            console.log('請求開始')
            request.http_mock('http://route.showapi.com/60-27','api_id=63114&api_sign=3847b0').then(response => {
            console.log(response._data)
            })
       },
    }
}

效果如下：

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!

您可能感興趣的文章:

Vue openLayers實現(xiàn)圖層數(shù)據切換與加載流程詳解
OpenLayers是一個用于開發(fā)WebGIS客戶端的JavaScript包，最初基于BSD許可發(fā)行。OpenLayers是一個開源的項目，其設計之意是為互聯(lián)網客戶端提供強大的地圖展示功能，包括地圖數(shù)據顯示與相關操作，并具有靈活的擴展機制
2022-09-09
vue.js全局API之nextTick全面解析
本篇文章主要介紹了vue.js全局API之nextTick全面解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
Vue el-table 默認展開某一行的實例
這篇文章主要介紹了Vue el-table 默認展開某一行的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Element-UI踩坑之Pagination組件的使用
這篇文章主要介紹了Element-UI踩坑之Pagination組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
vue如何在vue.config.js文件中導入模塊
這篇文章主要介紹了vue如何在vue.config.js文件中導入模塊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
使用vue打包時vendor文件過大或者是app.js文件很大的問題
這篇文章主要介紹了使用vue打包時vendor文件過大或者是app.js文件很大問題的解決方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-06-06
vue項目完成后如何實現(xiàn)項目優(yōu)化的示例
本文主要介紹了vue項目完成后如何實現(xiàn)項目優(yōu)化的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-12-12
vue實現(xiàn)旋轉木馬動畫
這篇文章主要為大家詳細介紹了vue實現(xiàn)旋轉木馬動畫，圖片數(shù)量無限制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-07-07
解決使用Vue.js顯示數(shù)據的時,頁面閃現(xiàn)原始代碼的問題
下面小編就為大家分享一篇解決使用Vue.js顯示數(shù)據的時,頁面閃現(xiàn)原始代碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue.js實現(xiàn)簡單輪播圖效果
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)簡單輪播圖效果的相關代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10