Vue mockjs編寫假數(shù)據并請求獲取實現(xiàn)流程
當后端并未編寫后臺json數(shù)據,但是前端又要使用數(shù)據進行頁面的編寫,這是便可用mockjs編寫一個假的數(shù)據源,發(fā)送ajax請求并獲取數(shù)據
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ù)據返回 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ù)據失敗"); } ); // 對外暴露 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) }) }
經過以上步驟,便可在頁面中請求到相對應的假數(shù)據
也可將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ù)據并請求獲取實現(xiàn)流程的文章就介紹到這了,更多相關Vue mockjs編寫數(shù)據內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue watch監(jiān)聽取不到this指向的數(shù)問題
這篇文章主要介紹了vue watch監(jiān)聽取不到this指向的數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09Vue3發(fā)送post請求出現(xiàn)400?Bad?Request報錯的解決辦法
這篇文章主要給大家介紹了關于Vue3發(fā)送post請求出現(xiàn)400?Bad?Request報錯的解決辦法,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-02-02在vue中獲取微信支付code及code被占用問題的解決方法
這篇文章主要介紹了在vue中獲取微信支付code及code被占用問題的解決方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04Vue3?vue-devtools?調試工具下載安裝使用教程
vue-devtools是一款基于chrome游覽器的插件,用于調試vue應用,這可以極大地提高我們的調試效率,尤其是對于初學vue的朋友來說可謂是一大利器,這篇文章主要介紹了Vue3?vue-devtools?調試工具下載安裝,需要的朋友可以參考下2022-08-08