Vue使用mockjs問題(返回?cái)?shù)據(jù)、get、post 請(qǐng)求)
vue使用mockjs(返回?cái)?shù)據(jù)、get、post 請(qǐng)求)
1、安裝 mockjs、axios(一般默認(rèn)自帶,沒有就安裝下)
附: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)也可以通過 ./test.json
這種方式返回模擬數(shù)據(jù),了解即可,根據(jù)情況使用
4、使用 mockjs 模擬的接口與數(shù)據(jù)
1)公共請(qǐng)求文件 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 時(shí), get 請(qǐng)求不能使用 params 進(jìn)行傳參,會(huì)報(bào) 404 // params: parameter // 要么不傳,要么先使用 post 的 data 方式先傳著用 data: parameter }) }
2).vue
頁面中使用案例
<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的類模塊語法,使用Mock.js的時(shí)候也可以使用類模塊,而Vue2只支持ES5的模塊語法,所以使用Mock.js時(shí)不能使用類模塊。
Vue3還支持在模塊文件中使用插件,而Vue2不支持。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue?select?change事件如何傳遞自定義參數(shù)
這篇文章主要介紹了vue?select?change事件如何傳遞自定義參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題
今天小編就為大家分享一篇基于vue.js中關(guān)于下拉框的值默認(rèn)及綁定問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)github在線預(yù)覽功能,本文通過提問兩個(gè)問題帶領(lǐng)大家一起學(xué)習(xí)整個(gè)過程,需要的朋友可以參考下2018-06-06el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)
本文主要介紹了el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03