区块链技术博客
www.b2bchain.cn

vue-08 mock设置

这篇文章主要介绍了vue-08 mock设置的讲解,通过具体代码实例进行18001 讲解,并且分析了vue-08 mock设置的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=18001

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

目录

1.概述

2.easy-mock平台

2.1概述

2.2使用docker搭建easymock

3.通过easymock模拟数据

3.1mock平台创建接口

3.1.1mock相关

3.1.2vue.config

3.1.3main.js

3.1.4App.vue

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

5.通过加载本地json


1.概述

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

2.easy-mock平台

2.1概述

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

2.2使用docker搭建easymock

https://blog.csdn.net/adminBfl/article/details/109615329

3.通过easymock模拟数据

3.1mock平台创建接口

3.1.1mock相关

{   "status": 0,   "data": {     "id": 12,     "username": "admin",     "email": "[email protected]",     "phone": 18036364545,     "role": 0,     "createTime": 147904832500,     "updateTime": 147904832500   } }

 

vue-08 mock设置vue-08 mock设置

3.1.2vue.config

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

vue-08 mock设置

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{             }         },       mounted() {         this.axios.get("user/login").then((res)=>{                 console.log(res);         }).catch((res)=>{             console.log(res);         });       }     } </script>  <style> </style> 

3.1.4 浏览器截图

vue-08 mock设置

vue-08 mock设置

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

https://blog.csdn.net/Adollar/article/details/109551847

5.通过加载本地json

https://blog.csdn.net/lu6545311/article/details/109074037

 

本文转自互联网,侵权联系删除vue-08 mock设置

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » vue-08 mock设置
分享到: 更多 (0)

评论 抢沙发

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

b2b链

联系我们联系我们