通常咱们 mock 数据都会装置 mockjs:yarn add mockjs
然而须要配置很多货色,还要拦挡申请等等,对老手不敌对,即便是新手也感觉麻烦。
举荐大家应用 useMock 在线 Mock 助手,我的项目 API 数据模仿,宣称比外部环境更贴心
- 反对团队合作
- 灵便解耦
- 不局域
- 可重复调试
- 主动生成文档
Vue 申请示例:
你须要先在 useMock 平台增加你本人的我的项目和接口,而后就会失去接口文档,复制 API 链接申请就能够获取到在线 mock 设置的数据了。
以二维码解码接口 mock 为例:
在线示例 Vue:https://www.usemock.com/demo/…
示例图:
<script>
//vue 示例代码
const App = {data() {
return {
apiUrl:"https://2weima.usemock.com/api/qrdecode",
info:null
}
},
methods: {onReqApi(){
// 应用 axios 发申请
axios.post(this.apiUrl,{qr_image:"https://img.2weima.com/qr_template/2021/6/26/8857784941a0f2d2a024044f414c69f9.jpg"})
.then(response =>{
this.info = response.data
console.log('因为跨域申请,在 Network 中多一个 Request Method: OPTIONS 申请是失常的。')
console.log('response data:',this.info)
})
}
}
}
Vue.createApp(App).mount('#app')
</script>