vue使用来提供后端接口模拟数据,vue使用mock教程

　　本文主要介绍了vue中的模拟数据，模拟后台界面的例子，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　一、模拟文件二。第三方界面连接器。在前端开发过程中，需要有后台配合。但是如果我们自己测试开发，或者后台太忙没时间，那就需要自己提供或者修改接口了。

　　下面提供两种方式，第二种更简单，个人推荐第二种。

一、mock文件

　　1.安装和开发环境

　　国家预防机制一

　　2.在src目录下创建一个新的模拟目录，结构如下：

　　3.index.js的内容如下：

　　const Mock=require( Mock js )；

　　//格式：Mock.mock( url，post/get，返回数据)；

　　Mock.mock(/user/userInfo ， get ，require(。/JSON/userInfo ))；

　　Mock.mock(/home/banner ， get ，require(。/JSON/home banner ))；

　　4.json文件的内容如下。以userInfo.json为例：

　　{

　　结果:成功，

　　数据:{

　　用户编号: 3785521 ，

　　用户名:不要问太多，

　　年龄:25，

　　 imgUrl : https://avatar . csdn . net/8/5/D/3 _ bo congbo . jpg

　　},

　　邮件“:”

　　}

　　5.将模拟数据引入main.js导入文件，并在不需要时将其注释掉。

　　从“Vue”导入Vue；

　　从导入应用程序。/App ；

　　从导入路由器。/router ；

　　要求(。/mock’)；//引入模拟数据，并在关闭时注释该行。

　　vue . config . production tip=false；

　　新Vue({

　　埃尔： #app ，

　　路由器，

　　组件：{ App }，

　　模板：“应用程序/”

　　});

　　6.在vue模板中访问

　　axios.get(/user/userInfo )。然后(函数(res){

　　console . log(RES)；

　　})。catch(函数(错误){

　　console . log(err)；

　　});

二、第三方接口eolinker

　　1.官网界面地址：https://www.eolinker.com/#/home/project/api/

　　需要登录，没有注册的小伙伴，注册一个账号。

　　2.注册后，有一个默认界面。当然，我们要做自己的项目。

　　3.新项目

　　4.添加接口

　　5.自定义界面

　　6.使用界面

　　7.在前端项目中，后台url地址有多个版本，如开发版、测试版、生产版等。建议你统一管理。访问的时候做url拼接。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。