本文实例为大家分享了mock.js模拟前后台交互的具体代码，供大家参考，具体内容如下

使用背景：vue项目爱可信

使用详情：

1、首先安装

# 在项目中安装新公共管理安装mockjs2、在项目中使用

在项目中科学研究委员会文件夹下新建模拟的文件夹新建mock.js和index.js文件这里面用来生成基础的接口项目结构截图：

数据mock.js文件

//- mock.js - //引入mockjs从“模拟js”//导入模拟的创建模拟数据具体的数据生成方法请查看文档http://mockjs.com/examples.htmlfunction creatPostMock(){ const list=[]const mock数据={ id : ' @ increment '，//数据定义@增量'对象|1': { '310000': '上海市', '320000': '江苏省', '330000': '浙江省', '340000': '安徽省}，name: '@pick(['a '，' e '，' I '，' o '，' u ')'，m1: '@integer(60，100)'，m2: '@integer(60，100)'，m : ' @ integer(60，100)'，m4: '@integer(60，100)'，m5: '@integer(60，100)'，m 63:模拟数据列表。push(a)} const data={ data : { }，size: 1，page size : 10 } data。数据=列表返回数据}//创建模拟数据函数creatGetMock(){ const getMock=mock。mock({ ' list | 1-10 ' :[{ ' id | 1 ' : 1 }]})返回getMock}//将模拟好的数据输出出去；导出{creatPostMock，creatGetMock }索引。射流研究…文件

//- index.js - //引入mockjs从“模拟js”//导入模拟的引入生成的模拟数据从""导入{creatPostMock，creatGetMock} ./mock'//设置请求延时时间Mock.setup({ //timeout: 2000方式一直接设置值timeout: '2000 - 5000' //方式二设置区间注意这个是一个字符串形式})//设置拦截的接口格式请看文档https://github。com/nuy soft/Mock/wiki/Mock。Mock()//注意： 这里拦截的地址最好使用正则匹配如果直接使用字符串接口就有可能拦截不到带参数的请求报错404Mock.mock(//api/mock(|？S*)$/，' post '，creatPostMock)//mock。mock('/API/mock '，' get '，creatGetMock) //方式一Mock.mock(//api/mock(|？S*)$/，' get '，creatGetMock) //方式二然后在main.js文件里面引入我们写好的mock/index.js文件用于拦截请求

//- main.js - //要用“导入”命令加载的某视频剪辑软件构建版本//(仅运行时或独立)已在webpack.base.conf中用别名设置。从“Vue”导入Vue "从应用导入"。/App "从导入路由器"。/router '从axios “/导入axios/引入axiosimport(' ./mock/index') //引入设置好基础的嘲弄，用于拦截请求//设置为错误的以阻止某视频剪辑软件在启动时生成生产提示vue。配置。Production TiP=false//在某视频剪辑软件项目中爱可信中无法直接使用vue.use()所以将爱可信直接添加到某视频剪辑软件的原型上Vue。原型。axios=axios/* eslint-禁用无新*/新Vue({ El : ' # App '，路由器，组件： { App }，模板： 'App/'})接下来我们就可以定义美国石油学会(美国石油协会)了在美国石油学会(美国石油协会)文件下新建一个自定义接口文件如questMock.js里面是我们需要请求数据的模拟接口；

//- questMock.js - //引入爱可信从“axios”//导入爱可信使用this.axios=axios//封装的post函数postMockList(data){返回这个。axios。post('/API/mock '，{ data })}//封装的getfunction getMockList(数据){退回这个。axios。get('/API/mock '，{ data })}//输出导出{ postMockList，getMockList }最后在组件中使用

//-hello world-template div class=' hello ' div class=' mask ' : class=' { box none : ismask } '/div div p这是获取模拟的数据/p按钮@click='getMockData'get模拟数据/button button @ click=' postMockData '帖子模拟数据/button/div/div/templatescript从导入{ postMockList，getMockList }./API/questmock。js ' export default { name : ' hello world '，data () { return { msg: '模拟前后台交互，getMock: getMockList，postMock: postMockList，isMask: true } }，方法： { getmock data(){ this。ismask=false this。getmock({ params 3360 { name : }隔壁老王' } }).然后(RES={ this。Ismask=真正的控制台。日志(' GET模拟数据，res) }).catch(e={ console.log('错误，e) }) }，postMockData(){ this。ismask=false this。邮差({姓名： '小明'，年龄： '5' }).然后(RES={ this。Ismask=真正的控制台。日志('开机自检模拟数据，res) }).catch(e={ console.log('错误，e) }) } }}/script！-添加"作用域"属性以将半铸钢钢性铸铁(Cast Semi-Steel)限制为此组件-样式H2 scoped h1 { font-weight : normal；} ul { list-style-type : no；padd : 0；}li {显示：内联块；margin : 0 10px } a { color : # 42b 983 }。掩模{位置：固定；top : 0；左： 0；宽度： 100%;高度： 100%;z指数： 1000；背景-颜色：绿色；opacity: 0.5 }。面具。BoxNone { display : none}/样式遇到的问题

1、在设置模拟接口时使用得到请求发现报错404 后来查资料发现是因为直接使用字符串接口会导致mockjs拦截不到地址解决办法就是使用正则去匹配请求接口2、如何设置请求延时由于mockjs是在本地模拟数据所以并未发起真正的请求，无法看到请求的加载效果，解决办法就是使用Mock.setup({timeout:加载时间}) 来设置每次的模拟请求时间也可参考以下：

服务器端数据模拟，支持请求转发、返回数据静态数据、返回射流研究…可变数据。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。