Vue使用mockjs問題(返回數(shù)據(jù)、get、post 請求)
更新時間：2023年05月18日 09:33:58 作者：卡爾特斯
這篇文章主要介紹了Vue使用mockjs問題(返回數(shù)據(jù)、get、post 請求)，具有很好的參考價值，希望對大家有所幫助。
vue使用mockjs(返回數(shù)據(jù)、get、post 請求)
1、安裝 mockjs、axios（一般默認自帶，沒有就安裝下）
附：mockjs 官網(wǎng)、mockjs-github
$ npm install mockjs # axios 一般默認自帶 $ npm install axios
2、啟動項目
# 根據(jù)項目環(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ù)據(jù)
import '../mock/index.js'
// 或者這樣導入（二選一即可）
require('../mock/index.js')3）/mock/index.js 文件中模擬常用請求方式，并返回數(shù)據(jù)
// 導入 mockjs ($ npm install mockjs)
import Mock from 'mockjs'
// 不限制請求方式
Mock.mock('/api/login', (req) => {
// 輸出請求參數(shù)
console.log(req)
// 返回數(shù)據(jù)
return {
// 輸出數(shù)據(jù)(隨機生成姓名)
'name': '@name',
// 還可以自定義其他數(shù)據(jù)
}
})
// 限制 post
Mock.mock('/api/post', 'post', (req) => {
// 輸出請求參數(shù)
console.log(req)
// 返回數(shù)據(jù)
return {
// 輸出數(shù)據(jù)(隨機生成姓名)
'name': '@name',
// 還可以自定義其他數(shù)據(jù)
}
})
// 限制 get
Mock.mock('/api/get', 'get', (req) => {
// 輸出請求參數(shù)
console.log(req)
// 返回數(shù)據(jù)
return {
// 輸出數(shù)據(jù)
'age|10-20': 10
// 還可以自定義其他數(shù)據(jù)
}
})
// 返回數(shù)據(jù)方式，所有請求方式都支持
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ù)據(jù)，了解即可，根據(jù)情況使用
4、使用 mockjs 模擬的接口與數(shù)據(jù)
1）公共請求文件 request.js 封裝案例，封裝起來方便后續(xù)換線上接口
// 經(jīng)過自定義處理后的 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不支持。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue攔截器Vue.http.interceptors.push使用詳解
這篇文章主要為大家詳細介紹了vue攔截器Vue.http.interceptors.push的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要給大家介紹了關于vue中input獲取光標位置并追加內(nèi)容的相關資料,vue通過當前的光標來進行插值,從而需要去獲取光標所在的位置,需要的朋友可以參考下2023-07-07
Vue-router的使用和出現(xiàn)空白頁,路由對象屬性詳解
今天小編就為大家分享一篇Vue-router的使用和出現(xiàn)空白頁,路由對象屬性詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue用this.$set改變數(shù)組里的某個值,文中通過示例代碼介紹了vue中this.$set()的用法----更新數(shù)組和對象的值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue中實現(xiàn)左右聯(lián)動的效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
這篇文章主要為大家介紹了一文詳解websocket在vue2中的封裝使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
vue3新擬態(tài)組件庫開發(fā)流程之table組件源碼分析
這篇文章主要介紹了vue3新擬態(tài)組件庫開發(fā)流程——table組件源碼,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vue使用ArcGis?API?for?js創(chuàng)建地圖實現(xiàn)示例
這篇文章主要為大家介紹了vue使用ArcGis?API?for?js創(chuàng)建地圖實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了vue如何循環(huán)請求一個接口問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue ElementUi同時校驗多個表單(巧用new promise)
這篇文章主要介紹了巧用new promise實現(xiàn)Vue ElementUi同時校驗多個表單功能，實現(xiàn)的方法有很多種，本文給大家?guī)淼氖且环N比較完美的方案,需要的朋友可以參考下2018-06-06