vue本地模拟服务器请求mock数据的方法详解

目录
  • 原因
  • 场景
  • 方法
    • mock资源
    • 配置
    • vue.config.js + settings.js
    • .env.development + .env.production
    • mock-request.js
    • table.js
    • mockDataTest
  • 代码
  • 总结

原因

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

场景

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

方法

vue cli3 的项目,打生产包的时候,public文件夹里面的文件,是不经webpack编译,直接复制到 publicPath设置的目录下的,开发时用到的json数据、图片等资源文件,可以放到 public目录里面。

mock资源

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

table.jsoncat.png

|-- 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路径,可以在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.development or .env.production里面配置的服务器地址就行,例如,

baseURL: process.env.VUE_APP_MOCK_URL

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

table.js

这里是服务器请求相关的,.json文件的数据怎么请求获取,如下所示

import mrequest from '@/utils/mock-request'
import defaultSettings from '@/settings'
const { publicPath } = defaultSettings

export const tableData = () => {
  return mrequest({
    url: publicPath + `/data/table.json`,
    method: 'get'
  })
}

mockDataTest

这里主要是演示效果

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

具体看代码了

效果如下

代码

代码,参考

总结

简单的实现了不用依赖后台接口的mock数据请求。数据都存放在.json文件里面。这些放在public文件夹的文件,都不参与编译,方便修改和替换。打包生产后,可以直接放静态服务器运行。

以上,因为一个演示平台需要,数据、图片、视频都有频繁修改替换的可能,所以采用如此方式实现。

到此这篇关于vue本地模拟服务器请求mock数据的文章就介绍到这了,更多相关vue本地模拟服务器请求mock内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解在vue-cli项目中使用mockjs(请求数据删除数据)

    在我们的生产实际中,后端的接口往往是较晚才会出来,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作,在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实的ajax,仅此而已. 搭建一个vue项目 # 全局安装 vue-cli $ npm install --global vue-

  • vue本地模拟服务器请求mock数据的方法详解

    目录 原因 场景 方法 mock资源 配置 vue.config.js + settings.js .env.development + .env.production mock-request.js table.js mockDataTest 代码 总结 原因 1.mockjs本地开发的时候用还好,mock数据需要生产时候用就不大行了 2.mock的数据通过module.exports.export实现的时候,npm run build 生产打包的时候,这些假数据会打包进app.js文件里面,

  • Vue项目的网络请求代理到封装步骤详解

    目录 1.创建vue项目 2.安装axios 3.进行config.js配置 4.main.js里引入 5.src目录下新建Utils文件夹,在内封装request.js 6.以login路由为示例 src文件下新建api文件,在api内新建login.js 7.在页面内引入方法,并使用 1.创建vue项目 vue create demo demo是项目名称 2.安装axios 进入demo里面打开终端(黑窗口),执行 npm install axios 3.进行config.js配置 devS

  • vue组件中使用props传递数据的实例详解

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa

  • vue组件之间的数据传递方法详解

    (1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o

  • Android通过json向MySQL中读写数据的方法详解【读取篇】

    本文实例讲述了Android通过json向MySQL中读取数据的方法.分享给大家供大家参考,具体如下: 首先 要定义几个解析json的方法parseJsonMulti,代码如下: private void parseJsonMulti(String strResult) { try { Log.v("strResult11","strResult11="+strResult); int index=strResult.indexOf("[");

  • Vue利用openlayers实现点击弹窗的方法详解

    目录 解释 编写弹窗 引入 openlayer使用弹窗组件 点击事件 这个写的稍微简单一点就行了,其实呢,这个不是很难,主要是知道原理就可以了. 我想实现的内容是什么意思呢?就是说页面上有很多坐标点,点击坐标点的时候在相应的位置弹出一个框,然后框里显示出这个坐标点的相关数据. 解释 这个内容的其实就是添加一个弹窗图层,然后在点击的时候让他显示出来罢了. 编写弹窗 首先一点,我们这个弹窗需要自己写一下,具体的样式,展示的内容之类的,所以说写一个弹窗组件,然后在openlayer文件中引用加载. 比

  • AJAX实现JSON与XML数据交换方法详解

    目录 1.JS中如何创建和访问JSON对象 2.基于JSON的数据交换 3.基于XML的数据交换 1.JS中如何创建和访问JSON对象 (1)在javascript语言中怎么创建一个json对象,语法是什么? "属性名" : 属性值,"属性名" : 属性值.........的格式! 注意:属性值的数据类型随意:可能是数字,可能是布尔类型,可能是字符串,可能是数组,也可能是一个json对象..... <!DOCTYPE html> <html lan

  • Mongodb中MapReduce实现数据聚合方法详解

    Mongodb是针对大数据量环境下诞生的用于保存大数据量的非关系型数据库,针对大量的数据,如何进行统计操作至关重要,那么如何从Mongodb中统计一些数据呢? 在Mongodb中,给我们提供了三种用于数据聚合的方式: (1)简单的用户聚合函数: (2)使用aggregate进行统计: (3)使用mapReduce进行统计: 今天我们首先来讲讲mapReduce是如何统计,在后续的文章中,将另起文章进行相关说明. MapReduce是啥呢?以我的理解,其实就是对集合中的各个满足条件的文档进行预处理

  • vuejs动态组件给子组件传递数据的方法详解

    通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定 <div class="app" id="deviceready"> <component :is="currentView" :user_name.s

  • PHP中filter函数校验数据的方法详解

    介绍PHP中filter函数校验数据的方法详解,PHP过滤器包含两种类型:Validation用来验证验证项是否合法 .Sanitization用来格式化被验证的项目,因此它可能会修改验证项的值,将不合法的字符删除. input_filters_list() 用来列出当前系统所支持的所有过滤器. 复制代码 代码如下: <?php foreach(filter_list() as $id => $filter) {     echo $filter.' '.filter_id($filter).

随机推荐