有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue 使用Mock模拟数据(实现方式)使用教程

vue 炮渣日记 3周前 (11-08) 30次浏览 已收录 0个评论 扫描二维码

本地加载请求静态json文件的形式

  • 在 Public 文件夹下新建一个 mock 文件夹,新建一个json文件,如login.json

login.json

{
    "status": 0,
    "data": {
      "id": 22,
      "username": "yian",
      "email": "48522243521@162.com",
      "phone": null,
      "role": 0,
      "createTime": 7456454542454,
      "updateTime": 7456454542454
    }
  }
  • 若安装 vue-axios,使用时可直接this.axios.get();若不安装,需在在哪里使用,在哪里引入axios,即import axios from ‘axios’
  • 使用this.axios.get()

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name:"App",
  data(){
    return {
      res:{}
    }
  },
  mounted(){
    this.axios.get('/mock/user/login.json').then((res)=>{
      this.res=res;
    });
  }
}
</script>
Vue 使用Mock模拟数据(实现方式)使用教程

main.js(因之前写过接口环境变量配置,见
https://editor.csdn.net/md/?articleId=107534608,因此需要修改main.js,即去掉 axios.defaults.baseURL)

import Vue from 'vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import App from './App.vue'

axios.defaults.timeout=8000;
axios.interceptors.response.use(function(response){
  let res=response.data;
  if(res.status==0){
    return res.data;
  }else if(res.status==10){  
    window.location.href='/#/login'
  }else{
    alert(res.msg);
  }
});

Vue.use(VueAxios,axios);
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
Vue 使用Mock模拟数据(实现方式)使用教程

缺点

需要更改代码;

请求的地址并不是接口真实的地址

通过easy-mock平台实现数据,mock

集成Mock API

原理:拦截ajax请求

1.安装mockjs

cnpm install mockjs –save

2.配置请求的模拟数据

在src中新建mock文件夹,在该文件夹中新建一个mock.js文件,在该文件中配置请求的模拟数据

方式一:

import Mock from 'mockjs'
Mock.mock('/api/user/login', {
    "status": 0,
    "data": {
        "id|1001-1100": 0,
        "username": "@cname",
        "email": "@email",
        "phone|1-9": 0,
        "role": 0,
        "createTime": 1524545121218,
        "updateTime": 1524545121218
    }
});

方式二:

import Mock from 'mockjs';
Mock.mock("/user","post",{
    data:[
        {
            name:"张三",
            sex:"男"
        },
        {
            name:"李四",
            sex:"女"
        }
    ]
});
Mock.mock("/list","post",()=>{
    return[
        {
            name:"张三",
            sex:"男"
        },
        {
            name:"李四",
            sex:"女"
        } 
    ]
});

main.js(引入mockjs ):require(‘./mock/mock’); 还可加入一个mock开关

import Vue from 'vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import App from './App.vue'

// 定义一个开关
const mock=true;
if(mock){
  require('./mock/mock');
}
  
axios.defaults.baseURL='/api';
axios.defaults.timeout=8000;
axios.interceptors.response.use(function(response){
  let res=response.data;
  if(res.status==0){
    return res.data;
  }else if(res.status==10){
    window.location.href='/#/login'
  }else{
    // 报错
    alert(res.msg);
  }
});

Vue.use(VueAxios,axios);
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

App.vue(获取数据)

// 这里使用方式一的模拟数据
this.axios.get('/user/login.json').then((res)=>{
  this.res=res;
});

目录

Vue 使用Mock模拟数据(实现方式)使用教程
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址