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