1.前言

mock其实我在工作中用到的场景真不多,可能我们后端比较给力吧,
通常都是设计界面一出,我先开始推演布局,数据结构自己先写死,因为其实工作时间长了,有些字段的名字大家都知道,服务器人员数据库设计好之后,我直接连数据库查看字段,修改不一样的字段,这期间请求什么的结构也都是完善的,就等服务器人员接口完成,开测,进行微调.

---

1. what mock

官方定义

mock是在测试过程中，对于一些不容易构造/获取的对象，创建一个mock对象来模拟对象的行为

开发无侵入 不需要修改既有代码,就可以拦截 Ajax请求,返回模拟的响应数据。 用法简单

我的理解

就是开发阶段,前端攻城狮可以自己造假数据,模拟各种场景,各个界面通过ajax的形式发请求 返回数据,形成一套完整的闭环
另外就是方便测试,因为有些数据是不能在生产随意修改的

---

2. mock简单配置 vue.config.js

这个请求是node的代码,这块不清楚的可以自学,或者看看我关于node的相关文章
当然你不甚在意的话照着写也行,不纠结

  devServer: {
    //  app是 express实例 node的代码
    before(app){
      app.get("/mock/getData",(req,res)=>{
        res.json([{name:"祺祺",age:5},{name:"少少",age:3}])
      })
    }
}

注意

每次修改这个 vue.config.js文件都需要重新 run
这就像你手机或者电脑更新了系统文件需要重启才能生效一样

---

3. 测试接口通否

重启后 可以直接在端口后面跟地址测试
因为本质上你界面的URL相对路径的解析 都是在当前地址栏的地址拼接的请求,详细的不展开说了

1.png

---

4. 代码使用

写的非常简介

axios.get("/mock/getData").then(res=>res.data).catch(error=>{
      console.log("Error:",error)
    })

1.png

---

5. 封装API写法

mock.js

import axios from "axios"
export const getData =()=>{
   return axios.get("/mock/getData").then(res=>res.data)
}

---

组件使用

当然得先引用

import {getData} from "@/api/mock.js"

组件内使用

   getData().then(res=>{
      console.log(":res",res)
    }).catch(error=>{
      console.log("Error:",error)
    })

---

6.代理配置可以共存

因为会从上往下匹配,上边mock匹配不到,自然往下继续匹配

 devServer: {
    //  app是 express实例 node的代码
    before(app){
      app.get("/mock/getData",(req,res)=>{
        res.json([{name:"祺祺",age:5},{name:"少少",age:3}])
      })
    },
    // run 后浏览器自动打开
    open: true,
    // 代理配置
   proxy: {
      "/api": {
        target: "https://yzs.person.com",// 代理服务器地址
        ws: false,
        ChangeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      },
  '/mockApi': {
          target:     'https://mock.yzs.me/mock/5baf3052f756789004a5116/antd-pro',   //mock API接口系统
         ws: false,
         changeOrigin: true,
         pathRewrite: {
          '/jeecg-boot': ''  //默认所有请求都加了jeecg-boot前缀，需要去掉
        }
      }, 
}

---

7. 代理不生效

1. 检查所有的配置都没问题,但是不生效
2. 最终定位到问题是 '/mockApi': {},小写没问题,如果是驼峰的写法 有些电脑会出问题

---

参考资料

devServe配置

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉