js中的mock操作

通常情况下，在软件开发过程中会采取前后端分离的架构。这样做非常好的一点是，无论是前端开发人员，还是后端开发人员，他们都可以更加聚焦自己所处的领域，在自己的那片小天地里深耕，精心打磨自己的工艺。所谓“闻道有先后，术业有专攻”大抵讲的就是这样一则道理吧。但事物总是有两面性的，有好的一面，也必然会存在不好的一面。前后端分离的架构在这一点上也没有表现出一丝的特殊性。那前后端分离的架构的弊端在哪里呢？在软件开发中，往往边界的地方是最容易出问题的。而前后端分离的架构问题也多出现在前后端的交互上，本来各自为战，并行工作，软件开发的工作量会大大减少，但交互的困难反而是工作量并没有减少，有时候甚至会增加开发的工作量。

既然前后端交互如此之难，那有什么办法能解决这个问题吗？我认为解决方式应该包括以下两点：

1. 双方约定的报文格式文档，包括前端传送给后端的请求地址、字段信息及后端回应给前端的数据格式、字段信息。

2. 前端发送给后端的字段信息，后端可以通过Mock来验证，以此证明自己的接口没问题。后端回传给前端的字段信息，前端也需要Mock，以此证明自己的渲染没问题。

目前，后端的Mock已经非常成熟，前端的Mock似乎大家并不了解。事实上，前端也有Mock的方法。

实现步骤：

1、导入js

<script src="http://mockjs.com/dist/mock.js"></script>

2、调用Mock方法

Mock.mock('/api/hello', {"code":200,"message":"hello world!"
});

3、完整的代码如下：

<html><head><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="http://mockjs.com/dist/mock.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script><script src="./jquery-3.1.1.min.js"></script></head><body><div id = "app_body">{{message}}</body><script>new Vue({el: '#app_body',data: {message: '0'},mounted() {Mock.mock('/api/hello', {"code":200,"message":"hello world!"});axios.get('/api/hello').then(response => {//   console.log(response.data);if (response.data.code === 200) {this.message = response.data.message;}}).catch(function (error) {console.log(error);});}})</script>
</html>

事实上，在开发环境中，可以将mock测试文件统一放到一个js里面，这样可以有效避免侵入业务代码。

js中的mock操作相关推荐

JS学习笔记六：js中的DOM操作
1. JS学习笔记六:js中的DOM操作文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...
前端开发：JS中关于去重操作的使用
前言前端开发里面,在JS中关于数据去重操作的使用是非常常用,也是非常重要的点,一般情况下关于对数组去重点操作是最常用的,其次是具体的关于某一数据类型的去重操作,如字符串去重.数字去重等.那么本篇博文 ...
json对象、字符串-数组和数学对象中的相关方法、BOM对象、JS中的DOM操作
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 json对象字符串对象的相关方法获取字符串长度 length 清除两侧的空白 trim [ python的strip ] ...
js中数组的操作 push()，pop()，shift()，unshift() 简介
JS中的数组提供了四个操作,以便让我们实现队列与堆栈! 小理论: 队列:先进先出堆栈:后进先出实现队列的方法: shift:从集合中把第一个元素删除,并返回这个元素的值. unshift: 在集合 ...
egg.js中使用egg-mysql操作mysql数据库
1.在 egg 项目中安装 egg-mysql npm i egg-mysql --save 2.在 {app_root}/config/plugin.js 中启用 egg-mysql 插件: 'us ...
前端笔记—第15篇js中的DOM操作
获取事件源 document.getElementById() document.getElementsByClass() document.getElementsByTagName() docume ...
nestjs配置MySQL数据库,Nest.js 中的数据库操作
安装 Typeorm 为了与 SQL 和 NoSQL 数据库集成,Nest.js 提供了@nestjs/typeorm 软件包.Nest.js 使用 TypeORM,因为它是 TypeScript 最 ...
js中cookie的操作
JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求. cookie是浏览器提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由J ...
js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

js中的mock操作

js中的mock操作相关推荐

最新文章

热门文章