詳解vue-cli項(xiàng)目中怎么使用mock數(shù)據(jù)
更新時(shí)間：2018年05月29日 10:05:42 作者：daydreammoon
這篇文章主要介紹了vue-cli項(xiàng)目中怎么使用mock數(shù)據(jù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
前言
注意：網(wǎng)上很多教程說需要在build目錄下的dev-server.js文件中配置，但目前最新的vue-cli是沒有dev-server.js這個(gè)文件的，因?yàn)橐呀?jīng)被合并到webpack.dev.conf.js文件中，所以直接在該文件中配置即可
步驟
1、在根目錄新建一個(gè)mock文件夾用于存在所有用于數(shù)據(jù)測試的.json文件
dir.png
posts.json
{
"code": 200,
"data": [
{
"id": 0,
"title": "復(fù)聯(lián)3大陸定檔5月11日，全球最晚!!"
},
{
"id": 1,
"title": "蟻人2最新預(yù)告發(fā)布，首次展現(xiàn)量子領(lǐng)域!!"
}
]
}
users.json
{
"code": 200,
"data": [
{
"id": 0,
"nickname": "美國隊(duì)長",
"avatar": "url"
},
{
"id": 1,
"nickname": "驚奇隊(duì)長",
"avatar": "url"
}
]
}
2、在build目錄下找到webpack.dev.conf.js文件，編寫以下代碼
// mock code
const express = require('express')
const app = express()
const posts = require('../mock/posts.json') // 文章列表數(shù)據(jù)源
const users = require('../mock/users.json') // 用戶列表數(shù)據(jù)源
const routes = express.Router()
app.use('/api', routes)
// 如果是post請求，那么將get改為post即可
devServer: {
...
before(app){
app.get('/api/posts', (req, res) => {
res.json(posts)
})
app.get('/api/users', (req, res) => {
res.json(users)
})
}
}
測試，瀏覽器輸入http://localhost:8080/api/posts
posts.json
3、使用第三方http請求庫axios進(jìn)行ajax請求
命令行安裝 npm install axios --save-dev，然后在/src/main.js使用axios
import axios from 'axios' Vue.prototype.$http = axios
模擬請求代碼(users同理)
created() {
this.$http.get("http://localhost:8080/api/posts").then(res => {
console.log(res.data)
})
}
mock.png
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
眾所周知,當(dāng)容器高度固定而內(nèi)容部分高度超出容器高度時(shí),瀏覽器會(huì)渲染出一個(gè)可以滾動(dòng)并用于顯示剩余界面的條 -- 滾動(dòng)條,它可以簡單的樣式修改,但是位置是固定的,無法移動(dòng),而我們需要改變位置的時(shí)候,它就不能滿足我們的需求了,這時(shí)我們可以自己手寫一個(gè)2023-10-10
element ui表格實(shí)現(xiàn)下拉篩選功能
這篇文章主要為大家詳細(xì)介紹了element ui表格實(shí)現(xiàn)下拉篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
vue3學(xué)習(xí)指導(dǎo)教程(附帶獲取屏幕可視區(qū)域?qū)捀?
Vue3是Vue的第三個(gè)版本更快,更輕,易維護(hù),更多的原生支持,下面這篇文章主要給大家介紹了關(guān)于vue3學(xué)習(xí)指導(dǎo)教程(附帶獲取屏幕可視區(qū)域?qū)捀?的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
Element框架el-tab點(diǎn)擊標(biāo)簽頁時(shí)再渲染問題的解決
本文主要介紹了Element框架el-tab點(diǎn)擊標(biāo)簽頁時(shí)再渲染問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了基于vue實(shí)現(xiàn)簡易打地鼠游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
Vue實(shí)現(xiàn)登錄保存token并校驗(yàn)實(shí)現(xiàn)保存登錄狀態(tài)的操作代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)登錄保存token并校驗(yàn)實(shí)現(xiàn)保存登錄狀態(tài),本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-02-02
Vue3+Vite實(shí)現(xiàn)一個(gè)Markdown編輯器組件
在現(xiàn)代前端開發(fā)中,Markdown 編輯器廣泛應(yīng)用于博客,文檔,Wiki,代碼注釋等場景,本文將使用 Vue 3 構(gòu)建一個(gè)簡單的 Markdown 編輯器組件,感興趣的小伙伴可以了解下2025-04-04
Vue?3?中動(dòng)態(tài)賦值?ref?的應(yīng)用示例解析
Vue3引入了Composition?API,其中ref是核心概念,允許開發(fā)者聲明響應(yīng)式狀態(tài),本文通過一個(gè)具體示例,探討了在Vue3中如何使用ref進(jìn)行動(dòng)態(tài)賦值,尤其是在處理DOM相關(guān)操作時(shí)的應(yīng)用,通過ref動(dòng)態(tài)賦值,可以有效管理組件內(nèi)的狀態(tài),提高代碼的可維護(hù)性和清晰度2024-09-09
這篇文章主要介紹了Vue如何由本地js中存放的url地址獲取圖片問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
微信的浮窗，大伙應(yīng)該都用過，當(dāng)我們正在閱讀一篇公眾號(hào)文章時(shí)，突然需要處理微信消息，點(diǎn)擊浮窗，在微信上會(huì)有個(gè)浮標(biāo)，點(diǎn)擊浮標(biāo)可以再次回到文章。今天小編抽空給大家介紹vue 實(shí)現(xiàn)微信浮標(biāo)效果，感興趣的朋友一起看看吧2019-09-09