溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何在vue-cli項目中使用mock數(shù)據(jù)

發(fā)布時間：2021-05-22 16:05:37 來源：億速云 閱讀：130 作者：Leah 欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)如何在vue-cli項目中使用mock數(shù)據(jù)，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

項目是基于vue-cli的，首先必須搭建好vue項目環(huán)境。如果有同學不知道如何搭建vue項目，可以參考我的另外一篇文章。因為mock數(shù)據(jù)需要借助node.js中express框架，所以必須先在項目中安裝npm install express --save。

搭建完基礎后，我們在src文件下創(chuàng)建一個mock文件，用來存放我們模擬數(shù)據(jù)。因為現(xiàn)在大多后臺返回數(shù)據(jù)類型為json格式，所以我們在mock文件下創(chuàng)建一個user.json文件。

如何在vue-cli項目中使用mock數(shù)據(jù)

接下來在build文件夾下webpack.dev.conf.js文件中添加以下代碼：

const express = require('express')
const app = express()
const users = require('../src/mock/user.json')
const routes = express.Router()
app.use('/api', routes)

如何在vue-cli項目中使用mock數(shù)據(jù)

然后在devServer添加：

 before (app) {
   app.get('/api', (req, res) => {
    res.json(users)
   })
  }

如何在vue-cli項目中使用mock數(shù)據(jù)

完成以上兩步之后，我們就可以在網(wǎng)頁中看到我們mock的api文件了。 在地址欄輸入：http://localhost:8080/api

如何在vue-cli項目中使用mock數(shù)據(jù)

最后我們只需要發(fā)送Ajax請求來獲取數(shù)據(jù)就可以了

npm install axios -S

在App.vue文件中發(fā)送Ajax請求獲取數(shù)據(jù)

如何在vue-cli項目中使用mock數(shù)據(jù)

最后重啟項目npm run dev， 可以看到請求的數(shù)據(jù)已經(jīng)顯示在頁面中

如何在vue-cli項目中使用mock數(shù)據(jù)

關(guān)于如何在vue-cli項目中使用mock數(shù)據(jù)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手