Vue使用mockjs問(wèn)題(返回?cái)?shù)據(jù)、get、post 請(qǐng)求)
更新時(shí)間：2023年05月18日 09:33:58 作者：卡爾特斯
這篇文章主要介紹了Vue使用mockjs問(wèn)題(返回?cái)?shù)據(jù)、get、post 請(qǐng)求)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。
vue使用mockjs(返回?cái)?shù)據(jù)、get、post 請(qǐng)求)
1、安裝 mockjs、axios（一般默認(rèn)自帶，沒(méi)有就安裝下）
附：mockjs 官網(wǎng)、mockjs-github
$ npm install mockjs # axios 一般默認(rèn)自帶 $ npm install axios
2、啟動(dòng)項(xiàng)目
# 根據(jù)項(xiàng)目環(huán)境運(yùn)行對(duì)應(yīng)的啟動(dòng)命令 $ npm run dev $ npm run serve
3、創(chuàng)建 mockjs 文件
1）在 src 目錄下手動(dòng)創(chuàng)建 /src/mock/index.js 文件夾與文件
2）在 main.js 文件中引入創(chuàng)建的 mock 文件
// 導(dǎo)入 mock 數(shù)據(jù)
import '../mock/index.js'
// 或者這樣導(dǎo)入（二選一即可）
require('../mock/index.js')3）/mock/index.js 文件中模擬常用請(qǐng)求方式，并返回?cái)?shù)據(jù)
// 導(dǎo)入 mockjs ($ npm install mockjs)
import Mock from 'mockjs'
// 不限制請(qǐng)求方式
Mock.mock('/api/login', (req) => {
// 輸出請(qǐng)求參數(shù)
console.log(req)
// 返回?cái)?shù)據(jù)
return {
// 輸出數(shù)據(jù)(隨機(jī)生成姓名)
'name': '@name',
// 還可以自定義其他數(shù)據(jù)
}
})
// 限制 post
Mock.mock('/api/post', 'post', (req) => {
// 輸出請(qǐng)求參數(shù)
console.log(req)
// 返回?cái)?shù)據(jù)
return {
// 輸出數(shù)據(jù)(隨機(jī)生成姓名)
'name': '@name',
// 還可以自定義其他數(shù)據(jù)
}
})
// 限制 get
Mock.mock('/api/get', 'get', (req) => {
// 輸出請(qǐng)求參數(shù)
console.log(req)
// 返回?cái)?shù)據(jù)
return {
// 輸出數(shù)據(jù)
'age|10-20': 10
// 還可以自定義其他數(shù)據(jù)
}
})
// 返回?cái)?shù)據(jù)方式，所有請(qǐng)求方式都支持
Mock.mock('/api/login2', {
"code": 200,
"data": {},
"msg": "請(qǐng)求成功"
})
Mock.mock('/api/login1', require('./test.json'))
Mock.mock('/api/login3', (req) => {
return require('./test.json')
})4）也可以通過(guò) ./test.json 這種方式返回模擬數(shù)據(jù)，了解即可，根據(jù)情況使用
4、使用 mockjs 模擬的接口與數(shù)據(jù)
1）公共請(qǐng)求文件 request.js 封裝案例，封裝起來(lái)方便后續(xù)換線(xiàn)上接口
// 經(jīng)過(guò)自定義處理后的 axios
// import { axios } from '@/api/axios'
// 直接使用 axios
import axios from 'axios'
// post
export function login_post (parameter) {
return axios.post('/api/login', parameter)
}
// get
export function login_get (parameter) {
return axios.get('/api/login', parameter)
}
// post
export function login_post_1 (parameter) {
return axios({
url: '/api/login1',
method: 'post',
data: parameter
})
}
// get
export function login_get_1 (parameter) {
return axios({
url: '/api/login',
method: 'get',
// 在使用 mockjs 時(shí)， get 請(qǐng)求不能使用 params 進(jìn)行傳參，會(huì)報(bào) 404
// params: parameter
// 要么不傳，要么先使用 post 的 data 方式先傳著用
data: parameter
})
}2）.vue 頁(yè)面中使用案例
<script>
// 從封裝的 request.js 文件中導(dǎo)出使用
import {
login_post,
login_post_1,
login_get,
login_get_1
} from '@/api/request'
// 直接使用 axios
import axios from 'axios'
export default {
mounted () {
// 參數(shù)
const params = {
id: 110
}
// post
login_post(params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// post
login_post_1(params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// get
login_get(params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// get
login_get_1(params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// 直接使用
axios.post('/api/post', params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// 直接使用
axios.get('/api/get', params).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
}
</script>到這里 mockjs 基本也算會(huì)用了?。。?！
vue3使用mockjs與vue2使用mockjs的方法有哪些區(qū)別？
Vue3與Vue2使用Mock.js的方法有一些不同。
Vue3支持ES6的類(lèi)模塊語(yǔ)法，使用Mock.js的時(shí)候也可以使用類(lèi)模塊，而Vue2只支持ES5的模塊語(yǔ)法，所以使用Mock.js時(shí)不能使用類(lèi)模塊。
Vue3還支持在模塊文件中使用插件，而Vue2不支持。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue3中的非父子組件傳值，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
Vue刷新后頁(yè)面數(shù)據(jù)丟失問(wèn)題的解決過(guò)程
在做vue項(xiàng)目的過(guò)程中有時(shí)候會(huì)遇到一個(gè)問(wèn)題,就是進(jìn)行F5頁(yè)面刷新的時(shí)候,頁(yè)面的數(shù)據(jù)會(huì)丟失,這篇文章主要給大家介紹了關(guān)于Vue刷新后頁(yè)面數(shù)據(jù)丟失問(wèn)題的解決過(guò)程,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了如何理解Vue的v-model指令的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了vue接入ts基本方法，關(guān)于ts，也出了很久，下面我們就來(lái)簡(jiǎn)單學(xué)習(xí)了下ts并且在原有項(xiàng)目上接入基本ts語(yǔ)法，也算是一個(gè)初級(jí)嘗試，簡(jiǎn)單梳理下基礎(chǔ)的接入配置和已經(jīng)遇到的問(wèn)題，供需要的小伙伴們參考2022-01-01
這篇文章主要介紹了Vue配置文件vue.config.js配置前端代理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
vue?select?change事件如何傳遞自定義參數(shù)
這篇文章主要介紹了vue?select?change事件如何傳遞自定義參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
petite-vue 是為漸進(jìn)增強(qiáng)而優(yōu)化的另一種 Vue 發(fā)行版,它提供與標(biāo)準(zhǔn) Vue 相同的模板語(yǔ)法和反應(yīng)性心智模型,這篇文章主要介紹了petite vue 基本使用指南,需要的朋友可以參考下2024-07-07
基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問(wèn)題
今天小編就為大家分享一篇基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue項(xiàng)目實(shí)現(xiàn)github在線(xiàn)預(yù)覽功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)github在線(xiàn)預(yù)覽功能，本文通過(guò)提問(wèn)兩個(gè)問(wèn)題帶領(lǐng)大家一起學(xué)習(xí)整個(gè)過(guò)程,需要的朋友可以參考下2018-06-06
el-tree樹(shù)組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)
本文主要介紹了el-tree樹(shù)組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03