运维开发网

详细介绍了vue本地仿真服务器请求方法

运维开发网 https://www.qedev.com 2022-06-14 17:03 出处:网络
这篇文章主要给大家介绍了关于vue本地模拟服务器请求mock数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

这篇文章主要给大家介绍了关于vue本地模拟服务器请求mock数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下


原因1、mockjs本地开发的时候用还好,mock数据需要生产时候用就不大行了2、mock的数据通过module.exports、export实现的时候,npm run build 生产打包的时候,这些假数据会打包进app.js文件里面,导致文件大、首屏渲染慢;而且,在js文件里面mock的数据量超过webpack限制的时候,打包会失败3、远程mock数据的就不需要了。像 YApi、网易NEI


场景1、做演示项目的时候,数据需要完全本地化实现2、做演示项目的时候,要求数据可供业务人员修改3、mock数据量1w+的时候(因为项目用到的数据有6w+,十几M的文件,需要用到此方法了)4、做的项目,需要前端人员先定义接口数据,后台人员配合传。这时候定义好的数据格式直接扔给后台人员就行了,特别是一些ldquo;查rdquo;,没有ldquo;增删改rdquo;的项目,前端写好后,基本不需要怎么修改了,挺方便的。5、基于vue2 cli3项目


方法

对于E CLI 3的项目,生产包生产时,public文件夹中的文件直接复制到publicPath设置的目录下,不需要webpack编译。开发中用到的json数据、图片等资源文件可以放到公共目录中。


mock资源

如下,准备一张图片和一个json文件。

cat.png,table.json

|-- src|-- public |-- data |-- table.json |-- images |-- cat.png


配置

涉及的文件如下(具体参考代码):

|-- src |-- .env.development // 开发环境配置,主要是配置服务器地址 |-- .env.production // 生产环境配置,主要是配置服务器地址 |-- settings.js // 一些全局配置,把publicPath的值设置在这里 |-- utils |-- mock-request.js // axios请求封装 |-- api |-- table.js // 获取table.json数据的请求封装 |-- views |-- mockDataTest // 用来显示请求结果 |-- index.vue |-- index.scss |-- index.js|-- public |-- data |-- table.json |-- images |-- cat.png|-- vue.config.js


vue.config.js + settings.js

首先配置访问公共路径。例如,如果您想在访问期间将dist path添加到地址中,可以在vue.config.js中进行如下配置

module.exports = { publicPath: process.env.NODE_ENV === 'production' '/' : '/dist',}

为了调用方便,记得和settings.js中的publicPath同步修改


.env.development + .env.production

这里主要是配置下部署的服务器的地址。比如开发时,本地访问地址是http://localhost:8081。定义一个参数,以任何名称存储该地址。

VUE_APP_MOCK_URL = 'http://localhost:8081/'


mock-request.js

这里是axios配置的baseURL,直接读取. env.developer.env.production中配置的服务器地址即可,例如,

baseURL: process.env.VUE_APP_MOCK_URL

这里会根据命令自动读取不同环境下配置的服务器地址。


table.js

这里是服务器请求相关的,如何请求数据的。json文件,如下所示。

import mrequest from '@/utils/mock-request'import defaultSettings from '@/settings'const { publicPath } = defaultSettingsexport const tableData = () =gt; { return mrequest({ url: publicPath + `/data/table.json`, method: 'get' })}


mockDataTest

这里是示范效果。

1、调用接口,在界面上显示table.json的数据2、显示放的图片(也可以是其他资源,例如音乐、视频)

这取决于代码。

效果如下



代码

代码,参考


总结

不依赖后台接口简单实现模拟数据请求。所有数据都存储在。json文件。这些放在public文件夹中的文件是不编译的,修改替换起来很方便。打包后,可以直接放入静态服务器运行。

以上,因为一个演示平台需要,数据、图片、视频可能会被频繁修改和替换,所以是这样实现的。

这就是关于vue本地模拟服务器请求的模拟数据的这篇文章。关于vue本地仿真服务器请求的mock数据的更多信息

0

精彩评论

暂无评论...
验证码 换一张
取 消