vue mock.js实现前端分离

之前我们介绍了mock.js在普通项目中的使用，所以这次我们就介绍一下在vue中使用mock.js来实现前端分离。

安装：

Npm在这里安装mockjs，先写一个小案例介绍一下具体的用法，这个写法不规范，仅供参考。

然后等案例讲完之后，我们再来说说具体的标准用法

那我们来看看这个案例：

脚本从“mock js”导入mock导出默认值{ name :“functions sdb source”，methods : {//interface test init(){//请求后端数据，查询数据源this . axios({ method :“get”，URL : ` $ { this . base URL }/getall `，header s 3360 { account 3360“admin”，password :“8888”})。然后((响应)={控制台})。catch((错误)={ console.log(错误)；});}}，created(){ mock . mock(` $ { this . base URL }/getall `，{ ' users | 5 ' :[{ ' name ' : ' @ cname '，//Chinese name ' age | 1-100 ' : 100。//随机整数'生日' :' @ date ('yyyy-mm-DD ')，//date ' city ' : ' @ city(true)'//China city }])；this . init()；} }/script首先引入mock.js，然后定义一个方法，使用axios请求后台数据，创建后再调用这个方法。然后我使用mock.js在创建后拦截请求，并模拟数据(这里我模拟了一个5位用户数组)。只要mock的url地址与请求的地址相同，它就会自动拦截请求。

我们打印了请求响应的结果：

可以看到，后端返回的数据格式是一样的，但是内容是我们自己模拟的。因此，只要我们提前和后端讨论好数据格式，就可以自己模拟数据，完成界面的渲染。当后端写数据接口时，我们只需要删除模拟部分，这就是我们想要的结果。

但是，每一个请求都是这样写在vue页面中的，不方便后期删除，可维护性低，耦合性高。因此，我们在这里涉及到标准写作。

1.安装：

Npm安装mockjs2。手动创建一个新的mock.js文件(当然，创建一个新的文件夹并将其拉出也是可以的)

内容如下(根据实际需要更改):

从' mockjs' /导入mock js let数据=' users | 5 ' :[{ ' name ' : ' @ cname '，//中文名称' age|1-100': 100，//100内的随机整数'生日' : ' @ date '(' yyyyy-mm-DD ')，//date ' city ' : ' @ city(true)'//Chinese city }]Mock . '/data/index '，' get '

//引入mockrequire('。/mock . js ')；4.在页面中使用：

脚本导入mock从' mock js '导出默认{name :' functionsdbsource '，方法： {//interface test init(){ //请求后端数据，查询数据源是this.axios ({method:' get '，url:' data/index '，})。然后((响应)={console.log(响应)；}) .catch((错误)={ console.log(错误)；});} }，created(){ this . init()；} }/script，我们已经拉完了mock.js，然后只需要在mock的js文件中添加一个请求，然后只需要等待后端接口写好，就可以删除main.js中引入到mock.js中的注释了

还有一种更直接的方法，因为mock只是我们的生产环境所需要的。当我们发布并上线时，我们肯定不需要请求的这一部分，它将被实际的请求地址和数据所取代。因此，我们可以直接将mock.js配置到生产环境中，不需要打包就可以在线部署，就像vue中的代理部分一样，上线时不会打包。

感兴趣的童鞋可以自己研究。

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