vue-08 vue使用easyMock模拟数据设置

最新推荐文章于 2022-09-15 18:11:01 发布

原创最新推荐文章于 2022-09-15 18:11:01 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

mock

3 篇文章

订阅专栏

本文介绍如何使用EasyMock平台和Mock.js进行数据模拟，包括搭建EasyMock环境、集成Mock.js及切换模拟状态的方法。

1.概述

2.easy-mock平台

2.1概述

2.2使用docker搭建easymock

4.2通过定义开关来实现使用mock和不使用mock

4.2.1src下创建mock目录然后创建api.js

4.2.2刷新页面查看效果

5.通过加载本地json

1.概述

开发阶段，为提高效率们需要提前Mock
减少代码冗余、灵活插拔
减少沟通、减少接口联调时间

2.easy-mock平台

2.1概述

Easy Mock 是一个可视化的能快速生成模拟数据的持久化服务。在实际开发中常见的Mock方式一般是将模拟数据直接写在代码里，利用JavaScript拦截请求或者利用 Charles、Fiddler等代理工具拦截请求，这样的开发效率比较低，并且产生的数据是写死的，不能去按照一定的规则去变化，并且浪费了非常多的时间，因此有了这个产品的出现，我们可以容易的访问数据，而且这些数据还是动态变化的，特别适合我们进行测试，学习成本非常低，可以说了解前后端请求的无论是参数式还是restful的，都可以进行生成和使用，可以说极大程度而减少了我们管理这些数据的复杂度，并且Easy Mock的官网非常简洁，查找和使用非常的方便，可以说是开发的必备工具吧。

2.2使用docker搭建easymock

https://blog.youkuaiyun.com/adminBfl/article/details/109615329

3.通过easymock模拟数据

3.1mock平台创建接口

3.1.1mock相关

{
  "status": 0,
  "data": {
    "id": 12,
    "username": "admin",
    "email": "18036364545@163.com",
    "phone": 18036364545,
    "role": 0,
    "createTime": 147904832500,
    "updateTime": 147904832500
  }
}

3.1.2vue.config

module.exports = {
    devServer:{
        host:"localhost",
        port:8081,
        proxy:{
            '/api':{
                target:"http://ip:7300/mock/5fab942cea77640016d0a289/",
                changeOrigin:false,
                pathRewrite:{
                    "api":""
                }
            }
        }
    }
}

3.1.3main.js

import Vue from 'vue'
import router from "./router";
import axios from "axios";
import VueAxios from "vue-axios";
import App from './App.vue'
//设置axios 基础值
//根据前端跨域做调整，使用代理可以把api给替换为空
axios.defaults.baseURL ='/api';
//推荐是8秒
axios.defaults.timeout =8000;
Vue.use(VueAxios, axios);
//生产环境的提示
Vue.config.productionTip = true;
//接口规范如下
/*{
  status:0,
  data:[],
  msg:""
}*/
//接口错误拦截
axios.interceptors.response.use(function (response) {
    //取到返回的值
    let res = response.data;
    if (res.status == 0) {
      //成功
        res.data;
    }else if(res.status == 10){
      //未登录状态码，跳转登陆页面
      window.location.href='/#/login';
    }else{
      alert(res.msg);
    }
});
new Vue({
    router: router,
    render: h => h(App),
}).$mount('#app');

3.1.4App.vue

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        name: 'app',
        components: {},
        data(){
            return{
                res:{}
            }
        },
      mounted() {
        this.axios.get("/user/login").then((res)=>{
                this.res= res;
        }).catch((res)=>{
            console.log(res);
        });
      }
    }
</script>

<style>
</style>

3.1.4 浏览器截图

4.通过本地集成mock.js模拟数据

4.1安装依赖

将mock插件添加到package.json中去

cnpm i mockjs --save-dev

"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "element-ui": "^2.14.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "jsonp": "^0.2.1",
    "mockjs": "^1.1.0",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.0.5",
    "vue-awesome-swiper": "^4.1.1",
    "vue-axios": "^3.1.3",
    "vue-cookie": "^1.1.4",
    "vue-lazyload": "^1.3.3",
    "vue-template-compiler": "^2.6.11"
  },

4.2通过定义开关来实现使用mock和不使用mock

4.2.1src下创建mock目录然后创建api.js

api.js

import Mock from 'mockjs'
Mock.mock('/api/user/login',{
    "status": 0,
    "data": {
        "id|10001-11000": 0,
        "username": "@cname",
        "email": "admin@51purse.com",
        "phone": null,
        "role": 0,
        "createTime": 1479048325000,
        "updateTime": 1479048325000
    }
});

使用require来添加mock依赖，import是预编译加载，编译的时候就会写道内存中，require 是在从上到下执行的时候才会加载，如果使用import的话就永远发请求都被拦截了

main.js添加mock开关

//mock开关
const mock =true;
if(mock){
    require('./mock/api');
}

4.2.2刷新页面查看效果

可以看到network没有请求，他是被mock拦截了没有发起请求

模拟的数据也是🆗

5.通过加载本地json

https://blog.youkuaiyun.com/lu6545311/article/details/109074037