快捷導(dǎo)航

vue-cli實(shí)現(xiàn)異步請(qǐng)求返回mock模擬數(shù)據(jù)

更新時(shí)間：2022年03月18日 10:45:33 作者：飛天狼

網(wǎng)上有不少使用mockjs模擬數(shù)據(jù)的文章，但基本都是本地?cái)r截請(qǐng)求返回?cái)?shù)據(jù)，本文主要介紹了vue-cli實(shí)現(xiàn)異步請(qǐng)求返回mock模擬數(shù)據(jù)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

　　在前后端分離開發(fā)的過程中，前端開發(fā)過程中，頁面的數(shù)據(jù)顯示一般都是寫死的靜態(tài)數(shù)據(jù)，也就是沒有經(jīng)過接口，直接寫死在代碼中的，在后端給出接口后，再替換為接口數(shù)據(jù)，為了減少對(duì)接成本，mock就出現(xiàn)了。通過預(yù)先跟服務(wù)器端約定好的接口，模擬請(qǐng)求數(shù)據(jù)甚至邏輯，能夠讓前端開發(fā)更加獨(dú)立自主，不會(huì)被服務(wù)端的開發(fā)所阻塞。

　　網(wǎng)上有不少使用mockjs模擬數(shù)據(jù)的文章，但基本都是本地?cái)r截請(qǐng)求返回?cái)?shù)據(jù)，在network中沒有發(fā)出任何的請(qǐng)求，本地調(diào)試起來很不好，只能通過console.log來調(diào)試。為了實(shí)現(xiàn)真正的異步請(qǐng)求，那么就需要真正的服務(wù)器接口，而在開發(fā)vue-cli項(xiàng)目時(shí)，本地開發(fā)運(yùn)行啟動(dòng)命令后，實(shí)際就是啟動(dòng)了一個(gè)本地服務(wù)器，那么只要把接口地址都在本地服務(wù)器中配置并使用mock返回?cái)?shù)據(jù)就可以實(shí)現(xiàn)真正的異步請(qǐng)求了，這樣調(diào)試就和真正的請(qǐng)求一模一樣了。

開始實(shí)現(xiàn)

　　因?yàn)槭莢ue-cli項(xiàng)目，請(qǐng)先安裝node和npm。

　　1、首先，需要全局安裝vue-cli：

> npm install -g @vue-cli

　　2、創(chuàng)建vue-cli項(xiàng)目：

> vue create vue-mock

　　創(chuàng)建成功后進(jìn)入項(xiàng)目根目錄，運(yùn)行npm run serve啟動(dòng)，應(yīng)該可以成功訪問vue示例頁面　　

　　本示例使用的版本是vue-cli 4.5.13、vue3、webpack4，如果發(fā)現(xiàn)某個(gè)配置不生效，請(qǐng)留意是否已經(jīng)被廢棄。

　　3、安裝axios

> npm install axios -S

　　4、main.js添加aixos，修改如下

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const vueApp = createApp(App)
vueApp.config.globalProperties.$axios = axios // vue3與vue2的區(qū)別，不再是通過prototype
vueApp.mount('#app')

　　5、安裝mockjs

> npm install mockjs -D

　　6、在根目錄新建mock文件夾，在mock文件夾下新建index.js文件，并在main.js中引入index.js，代碼如下：

// mock/index.js
import Mock from 'mockjs'
Mock.mock('/url', 'get', (req, res) => {
  return Mock.mock({
    status: 200,
    req,
    res,
    data: '請(qǐng)求成功'
  })
})

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import '../mock/index' // 引入mock路由攔截
const vueApp = createApp(App)
vueApp.config.globalProperties.$axios = axios
vueApp.mount('#app')

　　7、修改helloWorld.vue文件如下：

// helloWorld.vue
<template>
  <div>
    <button @click="getMockData">獲取mock數(shù)據(jù)</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    getMockData() {
      this.$axios.get('/url').then(res => {
        console.log(res)
      })
    }
  }
}
</script>
<style scoped>

</style>

這時(shí)候頁面效果如下：

　　到了這一步可以說是成功實(shí)現(xiàn)mock數(shù)據(jù)返回了，細(xì)心的朋友可能已經(jīng)發(fā)現(xiàn)，network里面并沒有出現(xiàn)請(qǐng)求，我們只能通過console查看返回結(jié)果，當(dāng)請(qǐng)求數(shù)量多時(shí)就不太好調(diào)試了，那有沒有什么辦法可以讓請(qǐng)求出現(xiàn)在network中呢？

　　前面已經(jīng)說到運(yùn)行項(xiàng)目時(shí)，就是啟動(dòng)了一個(gè)本地服務(wù)器，只要想辦法把接口路由配置進(jìn)去就可以了，接著往下看

　　9、修改vue.config.js中的devServer的配置，如果沒有該文件則新建

// vue.config.js
const Mock = require('mockjs')
module.exports = {
  //...
  devServer: {
    port: 8082,
    before: function(app, server) { // webpack4使用before，webpack使用setupMiddlewares
      app.get('/url', function(req, res) {
        res.json(Mock.mock({
          status: 200,
          data: '請(qǐng)求成功啦~'
        }));
      });
    }
  }
};

　　注釋main.js中引入的mock配置

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
// import '../mock/index' // 引入mock路由攔截
const vueApp = createApp(App)
vueApp.config.globalProperties.$axios = axios
vueApp.mount('#app')

　　重啟服務(wù)，重新點(diǎn)擊按鈕，成功請(qǐng)求，并且在network也出現(xiàn)了該請(qǐng)求，如下圖

　　這樣似乎已經(jīng)實(shí)現(xiàn)了我們的目的了，既使用了mock模擬數(shù)據(jù)，也方便了調(diào)試，但是，在我們修改了返回的數(shù)據(jù)內(nèi)容時(shí)，請(qǐng)求接口，發(fā)現(xiàn)還是原來的數(shù)據(jù)，因?yàn)槭切薷呐渲梦募悦看涡薷亩夹枰貑⒎?wù)，這也太麻煩了吧，我們想每次修改before里的內(nèi)容時(shí)，服務(wù)器都能夠自動(dòng)熱更新，就像修改其他文件一樣，瀏覽器自動(dòng)更新，繼續(xù)往下走。

　　10、安裝chokidar插件，監(jiān)聽mock文件夾，實(shí)現(xiàn)接口路由熱更新，想了解更多chokidar的內(nèi)容請(qǐng)自行搜索

> npm install chokidar -D

　　11、在mock文件夾下新建mock-server.js，內(nèi)容如下，就不具體細(xì)說了，大家可以自行調(diào)試

// mock/mock-server.js
const chokidar = require('chokidar')
const path = require('path')

const mockDir = path.join(process.cwd(), 'mock')

// 刪除對(duì)應(yīng)的接口路由緩存
function removeRegisterRoutes() {
  Object.keys(require.cache).forEach(i => {
    if (i.includes(mockDir)) {
      console.log(i)
      delete require.cache[require.resolve(i)]
    }
  })
}
// 注冊(cè)接口路由，每增加一個(gè)路由，app._router.stack就增加一個(gè)堆棧
function registerRoutes(app){
  const mocks = require('./index') // 這里必須在函數(shù)內(nèi)引用，否則無法實(shí)現(xiàn)熱更新
  let count = 0
  for (const mock of mocks) {
    app[mock.method](mock.url, mock.response);
    count++
  }
  return {
    start: app._router.stack.length - count,
    count
  }
}

module.exports = (app) => {
  let { start, count } = registerRoutes(app)
  chokidar.watch(mockDir, {}).on('all', (event, path) => {
    if (event === 'change' || event === 'add') {
      app._router.stack.splice(start, count) // 先刪除舊的api路由，再重新注冊(cè)新的路由
      removeRegisterRoutes()
      const stack = registerRoutes(app)
      start = stack.start
      count = stack.count
    }
  })
}

　　注意，修改mock-server.js文件內(nèi)容不會(huì)觸發(fā)自動(dòng)更新，具體原因這里就不說了，可以自己想一想哦~

　　12、修改mock中的index.js文件

// mock/index.jsconst Mock = require('mockjs')

const routers = [
  {
    url: '/url',
    method: 'get',
    response: (req, res) => {
      res.json(Mock.mock({
        status: 200,
        data: '請(qǐng)求成功~'
      }))
    }
  },
  {
    url: '/url/path',
    method: 'get',
    response: (req, res) => {
      res.json(Mock.mock({
        status: 200,
        data: '請(qǐng)求接口/url/path'
      }))
    }
  }
]
module.exports = routers

　　13、修改vue.config.js的beforte

// vue.config.js// const Mock = require('mockjs')
module.exports = {
  //...
  devServer: {
    port: 8082,
    before: require('./mock/mock-server')
  }
};

　　重新啟動(dòng)，點(diǎn)擊按鈕，請(qǐng)求成功，修改mock中的index里面的返回?cái)?shù)據(jù)，回到頁面點(diǎn)擊按鈕，發(fā)現(xiàn)返回?cái)?shù)據(jù)已改變，到此，已實(shí)現(xiàn)接口請(qǐng)求返回mock數(shù)據(jù)。

到此這篇關(guān)于vue-cli實(shí)現(xiàn)異步請(qǐng)求返回mock模擬數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue-cli異步請(qǐng)求返回mock內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: