快捷導(dǎo)航

Vue利用mockjs編寫假數(shù)據(jù)并應(yīng)用的問(wèn)題記錄

更新時(shí)間：2022年12月02日 11:04:07 作者：JN-Lin

這篇文章主要介紹了Vue利用mockjs編寫假數(shù)據(jù)并應(yīng)用,本文通過(guò)實(shí)例代碼給大家詳細(xì)講解，對(duì)Vue?mockjs數(shù)據(jù)相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧

當(dāng)后端并未編寫后臺(tái)json數(shù)據(jù)，但是前端又要使用數(shù)據(jù)進(jìn)行頁(yè)面的編寫，這是便可用mockjs編寫一個(gè)假的數(shù)據(jù)源，發(fā)送ajax請(qǐng)求并獲取數(shù)據(jù)

1.使用命令行下載mockjs

npm install mockjs --save-dev

2.在src文件目錄下新建一個(gè)mock文件夾

3.在新增的mock文件夾下新建一個(gè)json文件，例：list.json 和一個(gè)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文件夾中新建一個(gè)mockAjax.js文件

// 對(duì)于axios進(jìn)行二次封裝
import axios from 'axios';
 
// 1.利用axios對(duì)象的方法create，去創(chuàng)建一個(gè)axios實(shí)例
// 2.request就是axios，只不過(guò)稍微配置一下
const request = axios.create({
    // 配置對(duì)象
    // 基礎(chǔ)路徑：發(fā)請(qǐng)求的時(shí)候，路徑中會(huì)出現(xiàn)mock
    baseURL:"/mock",
    // 代表請(qǐng)求超時(shí)的時(shí)間
    timeout:5000
})
 
//請(qǐng)求攔截器----在項(xiàng)目中發(fā)請(qǐng)求（請(qǐng)求沒(méi)有發(fā)出去）可以做一些事情
request.interceptors.request.use((config) => {
    return config;
  });
  
  //響應(yīng)攔截器----當(dāng)服務(wù)器手動(dòng)請(qǐng)求之后，做出響應(yīng)（相應(yīng)成功）會(huì)執(zhí)行的
  request.interceptors.response.use((res) => {
      //相應(yīng)成功做的事情
      return res.data;
    },
    (err) => {
      alert("服務(wù)器響應(yīng)數(shù)據(jù)失敗");
    }
  );
// 對(duì)外暴露
export default request;

7.在src目錄下的api文件夾中新建一個(gè)index.js文件

import mockRequest from './mockAjax'
 
export const reqGetList = () => mockRequest({url:'/list',methods:'get'})

8.在相應(yīng)要發(fā)送請(qǐng)求的頁(yè)面編寫請(qǐng)求代碼

import {reqGetList} from '@/api/index.js
 
mouted(){
    reqGetList().then(res=>{
        console.log(res)
    })
}

經(jīng)過(guò)以上步驟，便可在頁(yè)面中請(qǐng)求到相對(duì)應(yīng)的假數(shù)據(jù)

也可將api文件在入口文件統(tǒng)一管理

在main.js中

// 任意組件可以使用API相關(guān)的接口
import * as API from '@/api'
Vue.prototype.api = API;

然后在相應(yīng)請(qǐng)求的頁(yè)面中發(fā)送請(qǐng)求的代碼為

this.api.reqGetList().then(res=>{
	this.dataList = res.data;
})

到此這篇關(guān)于Vue利用mockjs編寫假數(shù)據(jù)并應(yīng)用的文章就介紹到這了,更多相關(guān)Vue mockjs假數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: