mockoon 模拟API 获取假数据并显示

1. Mockoon 被官方称为：一款在本地运行模拟API最简单、最快的解决方案。
2. https://mockoon.com/#download
3. 选择相应的版本进行下载
   
   我选择的是windows版本 （第一个的installer）
   4.设置请求头
   5.环境设置
   
   6.修改请求的状态
   
   7.点击运行，并且打开相应的网页，找到网络接口，就可以放到代码里面使用，在body里面可以写入数据进行请求。
   
   8.具体使用
   
   第一个部分是你创建的不同端口号的api，所以如果要求不同的端口号，你可以创建多个api
   第二个部分是同一个端口号下的子路径不同
   第三个部分是状态码，你可以在响应头返回不同的状态码
   第四个部分就是响应体，也就是我们要写入假数据的地方，以便于我们的前端可以获得相应的数据并显示出来
   第五个部分是相应的网址

还有一个点是如果因为协议，端口号什么的不匹配报错，搜索错误信息知道是这个原因，修改头部协议规则

代码部分逻辑
1）在页面写相应的逻辑，调用api里面函数，获取相应假数据

 getCondition(){
      getCrawlerConditions('').
      then ((response)=>{
        console.log(response.data)
        this.crawler_conditions = response.data
      }).catch((err)=>{
        console.log(err)
      })
    },

2）封装api，设置请求方式

export function getCrawlerConditions(data: object) {
    return request({
        url: '/CrawlerParamsManage/getConds',
        // url:'/sso/getUser',
        method: 'post',
        data
    })
}

在request里面封装axios，把baseUrl设置成mockoon模拟的api

import axios , { AxiosError, AxiosRequestConfig, AxiosResponse, AxiosInstance } from 'axios'
import store from '@/store'
import { ElMessage } from 'element-plus'
// const baseURL = 'http://192.168.74.184:8081'
   const baseURL = 'https://localhost:3000'
const service: AxiosInstance = axios.create({
  baseURL:baseURL,
  timeout: 30000
})

// 请求前的统一处理
// 添加请求拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
      console.log(config)
    // JWT鉴权处理
    if (store.getters['user/satoken']) {
        config.headers['satoken'] = store.state.user.satoken
    }
    return config
  },
  (error: AxiosError) => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  (response: AxiosResponse) => {
      console.log(response)

      const res = response.data
      if (res.code === 200) {
          return res
    }
      else if (response.status === 200){
          if(response.data.errorCode === 0){
              // 进行强制退出
              ElMessage({message:response.data.msg,type:'error'})
              window.location.href = baseURL + '/sso/logout?satoken=' + localStorage.satoken +'&back=' + encodeURIComponent(location.href);
              store.dispatch('user/loginOut')
          }
          return response
      }
      else {
      showError(res)
      return Promise.reject(res)
    }
  },
  (error: AxiosError)=> {
    console.log(error) // for debug
    const badMessage: any = error.message || error
    const code = parseInt(badMessage.toString().replace('Error: Request failed with status code ', ''))
    showError({ code, message: badMessage })
    return Promise.reject(error)
  }
)

// 错误处理
function showError(error: any) {
  // token过期，清除本地数据，并跳转至登录页面
  if (error.code === 403) {
    // to re-login
    store.dispatch('user/loginOut')
  } else {
    ElMessage({
      message: error.msg || error.message || '服务异常',
      type: 'error',
      duration: 3 * 1000
    })
  }

}

export default service

最后结果显示
1）从下图可以看出我们设置的状态码，还有相应的假数据等
在页面显示