- Mockoon 被官方称为:一款在本地运行模拟API最简单、最快的解决方案。
- https://mockoon.com/#download
- 选择相应的版本进行下载
我选择的是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)从下图可以看出我们设置的状态码,还有相应的假数据等
在页面显示