ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

2021-05-23

2021-05-23 17:01:26  阅读:252  来源: 互联网

标签:mock 05 res 23 2021 mockjs get 123445 Mock


mock的使用方法

在前端日常开发过程中,我们会遇到后端接口尚未提供的时候,此时要想前端开发能够正常进行就可以用mock来模拟后端接口返回的数据,大家一起来学习一下mock的用法吧

1. 依赖安装

执行命令npm install mockjs 来安装依赖

2. 编辑mock.js文件

然后建一个mock的文件夹里面存放index文件,在index文件里我们引入mock

//引入mock
import Mock from 'mockjs'
//伪造数据
const data = {
    'id': '123445',
    'name': 'get',
    'age|1-10': 1,
    'email': '@email'
}
//拦截ajax请求,传参第一个是url地址,第二个是传参方式,第三个是返回的数据
Mock.mock('123445','get', res=>{
    return data
})
export default Mock

3. mock在组件中使用

我们可以将mockjs引入main.js,这样就不用每个用到的组件都引入

import Mock from '@/mock'
new Vue({
  router,
  store,
   Mock,
  render: h => h(App)
}).$mount('#app')

这样我们正常发送ajax请求就好了

    getinfoByPost() {
      axios.get("123445").then((res) => {
        console.log(res.data);
      });
    },

这样我们就能拿到我们返回的数据了

标签:mock,05,res,23,2021,mockjs,get,123445,Mock
来源: https://blog.csdn.net/marryMe_MrsYu/article/details/117196948

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有