-
Notifications
You must be signed in to change notification settings - Fork 3
/
js-11-Eeasy Mock.html
219 lines (211 loc) · 9.32 KB
/
js-11-Eeasy Mock.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="../css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="../css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="../lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<style>
.reveal pre code {
background-color: #120;
}
</style>
</head>
<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
<div class="slides">
<section>
<p style="font-size: 50px">如何使用Easy Mock？</p>
<h4>小课堂【web-B组】</h4>
<p>分享人：王姣妍</p>
</section>
<section>
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
<p> Mock 对象能够模拟其它协同模块的行为，被测试模块通过与 Mock 对象协作，可以获得一个孤立的测试环境。
手动的构造 Mock 对象会给开发人员带来额外的编码量，EasyMock 是一套用于通过简单的方法对于给定的接口生成 Mock 对象的类库
以项目管理的方式组织 Mock List，能帮助我们更好的管理 Mock 数据，不怕丢失。</p>
</section>
<section style="text-align: left">
<p>
解决的问题：<br>
开发时，后端还没完成数据输出，前端只好写静态模拟数据。<br>
数据太长了，将数据写在js文件里，完成后挨个改url。<br>
某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。<br>
想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。<br>
特殊的格式，例如IP,随机数，图片，地址，需要去收集。
</p>
</section>
</section>
<section>
<section>
<h3>2.知识剖析</h3>
</section>
<section>
<p>常见的Mock 方式</p>
</section>
<section style="text-align: left">
<p> 1、将 Mock 数据直接写在代码里<br>
2、利用 JS 拦截请求<br>
3、利用 Charles、 Fiddler 等代理工具拦截请求<br>
4、Mock 平台。如 Easy Mock、 RAP 等
</p>
</section>
<section style="text-align: left">
<p>使用的优势</p>
</section>
<section style="text-align: left">
<p>1、前后端分离:让前端工程师独立于后端进行开发。<br>
2、增加单元测试的真实性:
通过随机数据，模拟各种场景。<br>
3、开发无侵入:
不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。<br>
4、用法简单:
符合直觉的接口。<br>
5、数据类型丰富:
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。<br>
6、方便扩展: 支持支持扩展更多数据类型，支持自定义函数和正则。<br>
7、在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。
</p>
</section>
</section>
<section>
<section>
<h3>3.常见问题</h3>
</section>
<section>
<p>如何使用Easy Mock</p>
</section>
</section>
<section>
<section>
<h3>4.解决方案</h3>
</section>
<section>
<p>1、登录Easy Mock官网</p>
<a href="https://www.easy-mock.com/login">Easy Mock</a>
</section>
<section style="text-align: left">
<p>2、创建个人项目或者团队项目</p>
<p>3、新增接口</p>
<p>4、在项目中使用接口</p>
</section>
</section>
<section>
<section>
<h3>5.编码实战</h3>
</section>
<section>
<a href="../demo/js-11-How to use easy mock/demo.html">Demo</a>
</section>
</section>
<section>
<section>
<h3>6.扩展思考</h3>
</section>
<section>
<p>Mock语法该如何使用</p>
</section>
<section>
<a href="http://mockjs.com/examples.html#String">参见Mock.js官网</a>
</section>
<section>
<p>大家可能觉得直接填写接口url地址过长，到时候nginx配置好之后，更改接口地址比较麻烦</p>
</section>
<section>
<p>但是我们可以利用nginx配置跨域请求，将接口url公共的部分放在nginx里面，项目中只需要后面的部分即可。当接口可以使用的时候，将url地址换成对应的IP和端口即可。这样，项目代码里面无需做任何改动即可正常运行</p>
</section>
</section>
<section>
<section>
<h3>7.参考文献</h3>
</section>
<section>
<p>参考一：<a href="https://easy-mock.com/" target="_blank">Easy Mock官网</a></p>
<p>参考二：<a href="http://mockjs.com/" target="_blank">Mock.js官网</a></p>
</section>
</section>
<section>
<section>
<h3>8.更多讨论</h3>
</section>
<section>
<p>除了Easy Mock，大家还用过哪些类似的插件或者方法来拦截Ajax请求并返回模拟数据</p>
</section>
</section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p>
<small>BY : 朱芳山|王姣妍</small>
</p>
</section>
</div>
</div>
<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{src: '../plugin/markdown/marked.js'},
{src: '../plugin/markdown/markdown.js'},
{src: '../plugin/notes/notes.js', async: true},
{
src: '../plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
</script>
</body>
</html>