vue中使用mockjs配置和使用方式


Posted in Vue.js onApril 06, 2022

mockjs配置和使用方式

需求

在前后端分离的开发中,需要前后端同时开发,但是在后端完成前,暂时是没有数据返回给前端使用的,如果先写静态后面再改,就有重复工作的内耗存在。

所以我们需要一种简单快速的模拟数据的模块,本文选的是mockjs。

步骤

1.安装mockjs

npm install mockjs

2.在项目的src文件夹下建mock文件夹,在mock文件夹下建index.js(存放所有的http模拟返回的接口数据);以下我写了两个接口:

import Mock from 'mockjs';
const vehicle = Mock.mock(
  '/api/car', 'post', (req, res) => {
    return {
      code: 200,
      data: [{
        id: 1,
        name: 'BYD',
      }, {
        id: 1,
        name: 'baojun',
      }],
      message: '查询成功'
    }
  })
const user = Mock.mock(
  '/api/user', 'get', (req, res) => {
    return {
      code: 200,
      data: {
        id: 1,
        sex: 1,
        age: 25,
        createTime: '2017-04-01'
      },
      message: '查询成功'
    }
  })
export default {
  vehicle,
  user
}

3.为了方便在所有组件中使用mock模拟数据在项目 的main.js中导入刚编辑的接口数据

import mockdata from "./mock"; //这样的话组件里就可以随意调用接口了

4.在组件中调用虚拟接口

在生命周期钩子函数中调用接口即可:我使用axios ,前提是项目已经安装了axios(先npm install axios,再npm install --save axios vue-axios),一个按钮执行点击事件,下面方法调接口

<button @click="search()">点击查询</button>
methods: {
    search() {
      this.$http.get("/api/user").then(res => {
        console.log(res);
      });
      this.$http.post("/api/car").then(res => {
        console.log(res);
      });
    }
  },

vue中使用mockjs配置和使用方式

5.注在项目接口调试完成后需要删除main.js中对于mock的引用以及mock/index.js这些模拟的资源,从而组件中不用做任何修改,最大减少反复工作量

mock使用及mock无侵入的解决

什么是mock?

vue中使用mockjs配置和使用方式

vue中使用mockjs配置和使用方式

看了官网的介绍,对前端来说“前后端分离”这点,大大提高了前端开发的效率

前端开发在商讨完需求、接口及数据格式后,就可以直接利用mock模拟后台返回的数据来进行代码开发

为什么要用到mock?

下面我在画个流程图,帮助大家理解mock在项目中的处理逻辑

vue中使用mockjs配置和使用方式

由此可以看出,前端可以利用mock服务来模拟请求后台数据,只要接口文档出来,就可以按照接口文档的api和数据格式来自己用mock模拟假数据

如何使用mock?

此处以vue-cli2.x脚手架搭起的项目来介绍其使用

1.安装mockjs npm install --save-dev mockjs或 npm install -D mockjs

2.根目录src中添加mock文件夹,如下图结构,并创建

vue中使用mockjs配置和使用方式

其中index.js内容为:

import Mock from 'mockjs'
 import { Service } from './data/service'
 Mock.mock(/\/Service\/ServiceList/, 'get', Service )
console.log('%c前端 mock 环境启动成功', 'color: #38f;font-weight: bold')
export default Mock

data文件夹中的service.js 为mock模拟返回的数据,其内容为:

import Mock from 'mockjs';
const Service = [];
for (let i = 0; i < 5; i++) {
Service.push(Mock.mock({
 id: Mock.Random.guid(),
 serviceName: `${Mock.Random.protocol()} --${Mock.Random.id()}`,
 'port|8000-9000': 1,
 ip: Mock.Random.ip(),
 status: Mock.Random.pick(['passing', 'Critical', 'critical','null']),
 'node|0-2': 1 
}));
}
export default Service;

3.在main.js中引入定义的mock文件夹

import Mock from './mock'

此时打开终端控制面板,运行 npm run dev 后,打开开发者调试工具的console,即可看见

vue中使用mockjs配置和使用方式

4.接下来,发送的所有http请求均会被mock拦截,如果匹配到与mock中设置的url路径一致 /Service/ServiceList 就会将service.js的模拟出的数据返回,如下(.vue的文件中)

<script>
import axios from "axios";
export default {
  data() {
    return {
    };
  },
  methods: {
    getServer() {
      axios
        .get('/Service/ServiceList')
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
     }
  },
};
</script>

vue中使用mockjs配置和使用方式

​ 如上截图,可以看出已经将发送给该url的请求匹配拦截并返回了一个对象,可以定义一个空数组将res.data的数据保存起来,到页面进行渲染

5.如果发送http请求的url与mock中定义的不匹配或不存在的话,就会弹出报错

vue中使用mockjs配置和使用方式

注意:还记得前面说过的mock会拦截所有http请求,包括你要请求的真实API,也会拦截,提示404报错;此时将main.js中的引入的 import Mock from './mock' 注释掉就好了

但是,”懒“这个动力,让我们思考,如何将mock这个东西很听话的被我们”蹂躏“呢?

mock无侵入式配置

接着上面留出的问题,我们就要思考,如何将mock在项目代码中分离,既能保证前后端分离开发,又能在不改代码的情况下任意切换环境;

​ 大家应该都清楚用vue-cli搭建好的项目框架中,会有直接配置好的 npm run dev 和 npm run build 环境;

​ 想到这一步,大家应该也就有了思路,那就是再配置一套dev环境,重命名为mock,后期直接通过 npm run mock 和 npm run dev 一条指令随意切换代码运行环境

​ 如何实现呢?且听我细细道来(此处以vue@2.5.2版本为例)

1.用vue-cli搭建好的项目框架,打开 package.json 文件,添加运行脚本

"mock": "webpack-dev-server --inline --progress --config build/webpack.mock.conf.js"

如下:

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "mock": "webpack-dev-server --inline --progress --config build/webpack.mock.conf.js",   //---此条脚本就是需要配置的参数,注意json文件中不能写注释,切勿复制此句话
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  },

2.在根目录下的build文件夹中创建 webpack.mock.conf.js 文件,并将 webpack.dev.conf.js 的文件内容全部复制过来

3.在 webpack.mock.conf.js 中添加配置,如下

let entry = baseWebpackConfig.entry
Object.keys(entry).forEach(function (name) {
 entry[name] = ['./src/mock'].concat(entry[name]) //---在运行npm run mock时将mock这个文件在entry中打包编译进来
})

vue中使用mockjs配置和使用方式

保存好后,打开终端运行 npm run mock

vue中使用mockjs配置和使用方式

后期如果需要与后台调试接口了,直接运行 npm run dev 即可切换过来,保证了mock在业务代码中抽离出

注意 :在 webpack.mock.config.js 中配置了entry后,是不需要在main.js中再引入Mock的。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 #Vue.js
教你部署vue项目到docker
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 #Vue.js
vue中div禁止点击事件的实现
Apr 02 #Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 #Vue.js
Vue+TypeScript中处理computed方式
Apr 02 #Vue.js
Vue+Flask实现图片传输功能
Apr 01 #Vue.js
You might like
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
简单的JS多重继承示例
2008/03/13 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
微信小程序实现留言板
2018/10/31 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
如何使用Python 打印各种三角形
2019/06/28 Python
python属于软件吗
2020/06/18 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
python 实现汉诺塔游戏
2020/11/28 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
数控技术专业推荐信
2013/11/01 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL