詳解vue-cli項目中怎么使用mock數(shù)據(jù)
前言
注意:網(wǎng)上很多教程說需要在build目錄下的dev-server.js文件中配置,但目前最新的vue-cli是沒有dev-server.js這個文件的,因為已經(jīng)被合并到webpack.dev.conf.js文件中,所以直接在該文件中配置即可
步驟
1、在根目錄新建一個mock文件夾用于存在所有用于數(shù)據(jù)測試的.json文件
dir.png
posts.json
{ "code": 200, "data": [ { "id": 0, "title": "復聯(lián)3大陸定檔5月11日,全球最晚!!" }, { "id": 1, "title": "蟻人2最新預告發(fā)布,首次展現(xiàn)量子領(lǐng)域!!" } ] }
users.json
{ "code": 200, "data": [ { "id": 0, "nickname": "美國隊長", "avatar": "url" }, { "id": 1, "nickname": "驚奇隊長", "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進行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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報錯的問題
這篇文章主要介紹了vue 解決uglifyjs-webpack-plugin打包出現(xiàn)報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細介紹了Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03Element 默認勾選表格 toggleRowSelection的實現(xiàn)
這篇文章主要介紹了Element 默認勾選表格 toggleRowSelection的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問題(顯示變量)
這篇文章主要介紹了vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問題(顯示變量) ,需要的朋友可以參考下2018-04-04vue仿網(wǎng)易云音樂播放器界面的簡單實現(xiàn)過程
興趣乃學習的動力,想自己動手寫個音樂播放器,查了網(wǎng)上一些博客寫了一個,這篇文章主要給大家介紹了關(guān)于vue仿網(wǎng)易云音樂播放器界面的簡單實現(xiàn)過程,需要的朋友可以參考下2021-11-11vuex存儲數(shù)組(新建,增,刪,更新)并存入localstorage定時刪除功能實現(xiàn)
這篇文章主要介紹了vuex存儲數(shù)組(新建,增,刪,更新),并存入localstorage定時刪除,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04