Vue 项目中 使用mock 模拟数据

一些时候后端还未完成接口，而我们已经完成了静态页面，需要模拟数据来进行测试时可以使用mock。
 
首先下载mock
 
//文档官网 https://github.com/nuysoft/Mock/wiki/Getting-Started
 
# 安装
npm install mockjs

mockServe.js

//先引入mockjs模块
import Mock from 'mockjs';
//把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入]
//webpack默认对外暴露的：图片、JSON数据格式
import banner from './banner.json';
import floor from './floor.json';
 
//mock数据:第一个参数请求地址   第二个参数：请求数据 
Mock.mock("/mock/banner",{code:200,data:banner});//模拟首页大的轮播图的数据
Mock.mock("/mock/floor",{code:200,data:floor});

引入提前编写好的JSON格式文件

webpack默认暴露图片和JSON 所以我们不需要去将JSON文件暴露

为了打包项目后不影响mock索引图片 需要将JSON中 图片的依赖文件放到public目录下

banner.json

[  {    "id": "1",    "imgUrl": "/images/banner1.jpg"  },  {    "id": "2",    "imgUrl": "/images/banner2.jpg"  },  {    "id": "3",    "imgUrl": "/images/banner3.jpg"  },  {    "id": "4",    "imgUrl": "/images/banner4.jpg"  }]

最后在main.js中引入该JS文件 让它执行一次。

import axios from 'axios'
//执行mock，不管有没有封装axios都要加上这一行，否则mock不会起作用 
import '@/mock/mockServe'

axios.post('/api/user/banner', {
    username: 'admin',
    password: '111111'
    })
    .then((res) => {
     console.log('mock模拟数据:', res)
})

封装了axios之后再来做请求测试

1、在src目录下创建utils/request.ts

2、request.ts

//进行axios二次封装：使用请求拦截器和响应拦截器
import axios from "axios";

import { ElMessage } from "element-plus";

//第一步：利用axios对象的create方法去创建axios实例(其他配置：超时时间、基础路径)
let request = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API, //基础路径上会携带/api
  timeout: 5000, //超时时间设置
})

//第二步：request实例添加请求与响应拦截器

//请求拦截器
request.interceptors.request.use(config => {
  //config配置对象中的headers属性请求头，经常给服务器端携带公共参数
  //返回配置对象
  return config;
});

//响应拦截器
request.interceptors.response.use((response) => {
  //成功回调
  //简化数据
  return response.data;
}, (error) => {
  //失败回调，处理http网络错误
  let msg = '';
  let status = error.response.status;
  switch (status) {
    case 401:
      msg = "token过期";
      break;
    case 403:
      msg = '无权访问';
      break;
    case 404:
      msg = "请求地址错误";
      break;
    case 500:
      msg = "服务器出现问题";
      break;
    default:
      msg = "无网络";
  }
  ElMessage({
    type: 'error',
    message: msg
  })
  return Promise.reject(error);
});

export default request

3、在App.vue中再次测试

App.vue

<template>

  <div>
   <h1>请求拦截器和响应拦截器的使用</h1>
  </div>
  
</template>

<script setup lang="ts">
//@ts-ignore
  import request from '@/utils/request'
  import {onMounted} from 'vue'

  //组件挂载完毕后测试发一个网络请求
  onMounted(() => {
    request({
        url:"/user/banner",
        method: "post",
        data:{
          username: 'admin',
          password: '111111'
        }
    }).then(res => {
      console.log('request模拟数据',res);
    })
  })

  // console.log('获取环境变量', import.meta.env);

</script>

<style scoped lang="scss">
div{
  h1{
    color: $color;
  }
}
</style>