Vue mockjs編寫假數(shù)據(jù)并請求獲取實現(xiàn)流程
更新時間：2022年12月01日 14:00:51 作者：JN-Lin
這篇文章主要介紹了Vue mockjs編寫假數(shù)據(jù)并請求獲取實現(xiàn)流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
當后端并未編寫后臺json數(shù)據(jù)，但是前端又要使用數(shù)據(jù)進行頁面的編寫，這是便可用mockjs編寫一個假的數(shù)據(jù)源，發(fā)送ajax請求并獲取數(shù)據(jù)
1.使用命令行下載mockjs
npm install mockjs --save-dev
2.在src文件目錄下新建一個mock文件夾
3.在新增的mock文件夾下新建一個json文件，例：list.json 和一個mockServe.js文件
list.json文件如下
[
{
"date": '2016-05-02',
"name": '王小虎',
"address": '上海市普陀區(qū)金沙江路 1518 弄'
},
{
"date": '2016-05-02',
"name": '王小虎',
"address": '上海市普陀區(qū)金沙江路 1518 弄'
},
{
"date": '2016-05-02',
"name": '王小虎',
"address": '上海市普陀區(qū)金沙江路 1518 弄'
},
{
"date": '2016-05-02',
"name": '王小虎',
"address": '上海市普陀區(qū)金沙江路 1518 弄'
},
]4.mockServe.js如下
// 先引入mockjs模塊
import Mock from 'mockjs';
// 引入你編寫json所在文件的路徑
import list from './list.json';
// 模擬數(shù)據(jù)返回
Mock.mock("/mock/list", {
code: 200,
data: list
});5.把mockServe.js文件引入到src文件夾下的main.js入口文件鐘
import '@/mock/mockServe'
6.在src目錄下的api文件夾中新建一個mockAjax.js文件
// 對于axios進行二次封裝
import axios from 'axios';
// 1.利用axios對象的方法create，去創(chuàng)建一個axios實例
// 2.request就是axios，只不過稍微配置一下
const request = axios.create({
// 配置對象
// 基礎路徑：發(fā)請求的時候，路徑中會出現(xiàn)mock
baseURL:"/mock",
// 代表請求超時的時間
timeout:5000
})
//請求攔截器----在項目中發(fā)請求（請求沒有發(fā)出去）可以做一些事情
request.interceptors.request.use((config) => {
return config;
});
//響應攔截器----當服務器手動請求之后，做出響應（相應成功）會執(zhí)行的
request.interceptors.response.use((res) => {
//相應成功做的事情
return res.data;
},
(err) => {
alert("服務器響應數(shù)據(jù)失敗");
}
);
// 對外暴露
export default request;7.在src目錄下的api文件夾中新建一個index.js文件
import mockRequest from './mockAjax'
export const reqGetList = () => mockRequest({url:'/list',methods:'get'})8.在相應要發(fā)送請求的頁面編寫請求代碼
import {reqGetList} from '@/api/index.js
mouted(){
reqGetList().then(res=>{
console.log(res)
})
}經(jīng)過以上步驟，便可在頁面中請求到相對應的假數(shù)據(jù)
也可將api文件在入口文件統(tǒng)一管理
在main.js中
// 任意組件可以使用API相關的接口 import * as API from '@/api' Vue.prototype.api = API;
然后在相應請求的頁面中發(fā)送請求的代碼為
this.api.reqGetList().then(res=>{
this.dataList = res.data;
})
到此這篇關于Vue mockjs編寫假數(shù)據(jù)并請求獲取實現(xiàn)流程的文章就介紹到這了,更多相關Vue mockjs編寫數(shù)據(jù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue3實現(xiàn)canvas畫布組件自定義畫板實例代碼
Vue?Canvas是一個基于Vue.js的輕量級畫板組件,旨在提供一個簡易的畫布功能,用戶可以在網(wǎng)頁上進行自由繪圖,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
css文件可以直接引入到main.js中,scss文件如果沒有scss特殊語法也可以直接引入index.js,只有scss文件中的特殊語法全局引入的時候無法顯示,所以需要特殊處理,下面這篇文章主要給大家介紹了關于vue全局引入scss樣式文件的相關資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue中的總線機制(EventBus)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
使用vue-cli+webpack搭建vue開發(fā)環(huán)境的方法
這篇文章主要介紹了使用vue-cli+webpack搭建vue開發(fā)環(huán)境的方法,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了使用vue實現(xiàn)通過變量動態(tài)拼接url，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了vue中axios的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了vue中的過濾器及其時間格式化,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
Vue3集成json-editor-vue3的代碼實現(xiàn)
這篇文章主要介紹了Vue3集成json-editor-vue3的代碼實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了Vue使用mixin分發(fā)組件的可復用功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了vue移動端實現(xiàn)紅包雨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07