RubyGems - doraemon - Versions diffs - 1.0.8 → 1.0.13 - Mend

doraemon 1.0.8 → 1.0.13

Files changed (1760) hide show

data/lib/doraemon/dashboard/css/global.css ADDED

@@ -0,0 +1,37 @@
+html, body {
+  height: 100%;
+  margin: 0px auto;
+  padding: 0px auto;
+}
+.container {
+  margin: 0 auto;
+  padding: 0 auto;
+}
+#nav {
+  background-color: #fff;
+  height: 50px;
+}
+.content {
+  width: 100%;
+  height: 100%;
+  top: 50px;
+  bottom: 0px;
+  left: 0px;
+}
+#user_info {
+  float: right;
+  margin-right: 10px;
+  line-height: 25px;
+}
+#user_info_name {
+  font-size: 13px;
+}
+#user_info_port {
+  font-size: 13px;
+}

data/lib/doraemon/dashboard/css/login.css ADDED

@@ -0,0 +1,82 @@
+html,body {
+	height: 100%;
+}
+body.my-login-page {
+	background-color: #f7f9fb;
+	font-size: 14px;
+}
+.my-login-page .brand {
+	width: 90px;
+	height: 90px;
+	overflow: hidden;
+	border-radius: 50%;
+	margin: 40px auto;
+	box-shadow: 0 4px 8px rgba(0,0,0,.05);
+	position: relative;
+	z-index: 1;
+}
+.my-login-page .brand img {
+	width: 100%;
+}
+.my-login-page .card-wrapper {
+	width: 400px;
+	margin-top: 10%;
+}
+.my-login-page .card {
+	border-color: transparent;
+	box-shadow: 0 4px 8px rgba(0,0,0,.05);
+}
+.my-login-page .card.fat {
+	padding: 10px;
+}
+.my-login-page .card .card-title {
+	margin-bottom: 30px;
+	text-align: center;
+}
+.my-login-page .form-control {
+	border-width: 2.3px;
+}
+.my-login-page .form-group label {
+	width: 100%;
+}
+.my-login-page .btn.btn-block {
+	padding: 12px 10px;
+}
+.reg_btn {
+	margin-top: 15px;
+	float: right;
+}
+.cert_btn {
+	margin-top: 15px;
+	float: left;
+}
+@media screen and (max-width: 425px) {
+	.my-login-page .card-wrapper {
+		width: 90%;
+    margin: 0 auto;
+    margin-top: 10%;
+	}
+}
+@media screen and (max-width: 320px) {
+	.my-login-page .card.fat {
+		padding: 0;
+	}
+	.my-login-page .card.fat .card-body {
+		padding: 15px;
+	}
+}

data/lib/doraemon/dashboard/css/scenes.css ADDED

@@ -0,0 +1,34 @@
+#scene_btn {
+  width: 150;
+}
+#add_scene_btn {
+  width: 100px;
+  float: left;
+  margin-left: 10px;
+  margin-top:5px;
+}
+a.card-control {
+  text-decoration: none;
+}
+.close {
+  font-size: 20px;
+  text-shadow: none;
+  color: #007bff;
+  opacity: 1;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+}
+h5 {
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}
+.scene-card {
+  margin-top: 20px;
+}

data/lib/doraemon/dashboard/echo.html ADDED

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Doraemon Echo</title>
+  <script src="script/doraemon.js"></script>
+  <link rel="icon" href="data:;base64,=" />
+</head>
+<body>
+  <div style="margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 350px; text-align: center;">
+    <h1 id="title"></h1>
+  </div>
+</body>
+<script>
+  let text = getUrlParameter('text') || "This is a test page";
+  if (text != undefined) {
+    $('#title').text(decodeURI(text));
+  }
+</script>
+</html>

data/lib/doraemon/dashboard/help.html ADDED

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Mock 服务使用帮助</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
+        <style>
+.task-list-item { list-style-type: none; } .task-list-item-checkbox { margin-left: -20px; vertical-align: middle; }
+</style>
+        <style>
+            body {
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif;
+                font-size: 14px;
+                line-height: 1.6;
+            }
+        </style>
+    </head>
+    <body class="vscode-light">
+        <h1 id="mock-%e6%9c%8d%e5%8a%a1%e4%bd%bf%e7%94%a8%e5%b8%ae%e5%8a%a9">Mock 服务使用帮助</h1>
+<h2 id="%e5%86%85%e7%bd%ae%e6%96%b9%e6%b3%95">内置方法</h2>
+<h3 id="nowdelta--0">_now(delta = 0)</h3>
+<p>获取当前时间戳（毫秒），参数 delta 是偏移量，单位秒</p>
+<pre><code><code><div>_now          # 当前时间戳
+_now(-60)     # 一分钟之前
+_now(3600)    # 一小时之后
+</div></code></code></pre>
+<p>同时还有两个便捷方法：_yesterday / _tomorrow 表示昨天和明天的当前时刻，使用方法同上</p>
+<h3 id="webechotext--nil">_web_echo(text = nil)</h3>
+<p>生成一个 url，打开后 text 会显示在页面内</p>
+<pre><code><code><div>_web_echo('hello')    # 返回一个 url，打开后页面中间会显示“hello”
+</div></code></code></pre>
+<hr>
+<h2 id="%e4%bd%bf%e7%94%a8%e6%b5%81%e7%a8%8b">使用流程</h2>
+<ol>
+<li>安装 SSL 证书</li>
+<li>用户注册</li>
+<li>用户登录，服务器会返回一个端口号</li>
+<li>设置手机的代理服务器地址和端口</li>
+<li>创建一个场景，进入场景</li>
+<li>创建需要 Mock 的 API 接口地址</li>
+<li>编辑 Mock 代码</li>
+<li>保存代码，激活场景</li>
+</ol>
+<hr>
+<h2 id="mock-%e6%95%b0%e6%8d%ae">Mock 数据</h2>
+<blockquote>
+<p>本质上编辑器内的 Mock 数据是一段 Ruby 代码</p>
+</blockquote>
+<h3 id="1-%e7%9b%b4%e6%8e%a5%e4%bd%bf%e7%94%a8%e6%a0%87%e5%87%86-json">1. 直接使用标准 JSON</h3>
+<pre><code><code><div>{
+  &quot;code&quot;: 0,
+  &quot;msg&quot;: &quot;请求已成功处理&quot;,
+  &quot;res&quot;: {
+    &quot;id&quot;: 1234,
+    &quot;foo&quot;: &quot;bar&quot;
+  }
+}
+</div></code></code></pre>
+<h3 id="2-%e4%bd%bf%e7%94%a8--%e7%ac%a6%e5%8f%b7%e5%8f%af%e4%bb%a5%e5%81%9a%e8%a1%8c%e5%86%85%e6%b3%a8%e9%87%8a">2. 使用 # 符号可以做行内注释</h3>
+<pre><code><code><div>{
+#  &quot;code&quot;: 0,
+#  &quot;msg&quot;: &quot;请求已成功处理&quot;
+  &quot;code&quot;: -1234,
+  &quot;msg&quot;: &quot;请求格式错误&quot;
+}
+</div></code></code></pre>
+<h3 id="3-%e4%bd%bf%e7%94%a8-params-%e5%af%b9%e8%b1%a1%e8%ae%bf%e9%97%ae%e8%af%b7%e6%b1%82%e7%9a%84%e5%86%85%e5%ae%b9">3. 使用 _params 对象访问请求的内容</h3>
+<pre><code><code><div># 对优惠券兑换接口 v4/activity/coupon/code/exchange 进行数据 Mock
+# 效果是客户端输入 'abc123' 可以返回“兑换成功”，其他情况都会提示”兑换码无效“
+correct = _params['exchageCode'] == 'abc123'
+{
+  'code': correct ? 0 : -1,
+  'msg': correct ? '兑换成功' : '兑换码无效'
+}
+</div></code></code></pre>
+<h3 id="4-%e4%bd%bf%e7%94%a8-result-%e5%af%b9%e8%b1%a1%e8%ae%bf%e9%97%ae%e5%90%8e%e7%ab%af%e8%bf%94%e5%9b%9e%e7%9a%84%e7%9c%9f%e5%ae%9e%e6%95%b0%e6%8d%ae">4. 使用 _result 对象访问后端返回的真实数据</h3>
+<pre><code><code><div># 修改订单列表 v4/order/list 中第一个订单的第一个订单项标题为超长字符串
+_result['res'][0]['orderItems'][0]['title'] = '这是一个很长很长很长很长很长很长很长很长很长很长很长很长的商品标题'
+_result  # 最后一行（严格讲是最后一个表达式）表示返回值，这是 Ruby 语言的设定
+</div></code></code></pre>
+<hr>
+<h2 id="%e5%8e%9f%e7%90%86%e4%bb%8b%e7%bb%8d">原理介绍</h2>
+<p>通过 HTTP 代理转发数据，在 API 服务器的结果返回给客户端中间加了一层过滤</p>
+<p><img src="http://192.168.2.81:4001/img/flow.png" alt="流程图"></p>
+    </body>
+    </html>

data/lib/doraemon/dashboard/help.md ADDED

@@ -0,0 +1,99 @@
+# Mock 服务使用帮助
+## 内置方法
+### _now(delta = 0)
+获取当前时间戳（毫秒），参数 delta 是偏移量，单位秒
+```
+_now          # 当前时间戳
+_now(-60)     # 一分钟之前
+_now(3600)    # 一小时之后
+```
+同时还有两个便捷方法：_yesterday / _tomorrow 表示昨天和明天的当前时刻，使用方法同上
+### _web_echo(text = nil)
+生成一个 url，打开后 text 会显示在页面内
+```
+_web_echo('hello')    # 返回一个 url，打开后页面中间会显示“hello”
+```
+***
+## 使用流程
+1. 安装 SSL 证书，并在系统内信任该证书
+2. 用户注册
+3. 用户登录，服务器会返回一个端口号
+4. 设置手机的代理服务器地址和端口
+5. 创建一个场景，进入场景
+6. 创建需要 Mock 的 API 接口地址
+7. 编辑 Mock 代码
+8. 保存代码，激活场景
+***
+## Mock 数据
+> 本质上编辑器内的 Mock 数据是一段 Ruby 代码
+### 1. 直接使用标准 JSON
+```
+{
+  "code": 0,
+  "msg": "请求已成功处理",
+  "res": {
+    "id": 1234,
+    "foo": "bar"
+  }
+}
+```
+### 2. 使用 # 符号可以做行内注释
+```
+{
+#  "code": 0,
+#  "msg": "请求已成功处理"
+  "code": -1234,
+  "msg": "请求格式错误"
+}
+```
+### 3. 使用 _params 对象访问请求的内容
+```
+# 对优惠券兑换接口 v4/activity/coupon/code/exchange 进行数据 Mock
+# 效果是客户端输入 'abc123' 可以返回“兑换成功”，其他情况都会提示”兑换码无效“
+correct = _params['exchageCode'] == 'abc123'
+{
+  'code': correct ? 0 : -1,
+  'msg': correct ? '兑换成功' : '兑换码无效'
+}
+```
+### 4. 使用 _result 对象访问后端返回的真实数据
+```
+# 修改订单列表 v4/order/list 中第一个订单的第一个订单项标题为超长字符串
+_result['res'][0]['orderItems'][0]['title'] = '这是一个很长很长很长很长很长很长很长很长很长很长很长很长的商品标题'
+_result  # 最后一行（严格讲是最后一个表达式）表示返回值，这是 Ruby 语言的设定
+```
+***
+## 原理介绍
+通过 HTTP 代理转发数据，在 API 服务器的结果返回给客户端中间加了一层过滤
+![流程图](http://192.168.2.81:4001/img/flow.png)

data/lib/doraemon/dashboard/img/flow.png ADDED

Binary file

data/lib/doraemon/dashboard/index.html ADDED

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Doraemon Dashboard</title>
+  <script src="script/doraemon.js"></script>
+  <script src="script/login.js"></script>
+  <link rel="stylesheet" href="css/login.css" />
+  <link rel="icon" href="data:;base64,=" />
+</head>
+<body class="my-login-page">
+  <section class="h-100">
+    <div class="container h-100">
+      <div class="row justify-content-md-center h-100">
+        <div class="card-wrapper">
+          <div class="card fat">
+            <div class="card-body">
+              <h4 class="card-title">登录</h4>
+              <form method="POST" class="my-login-validation" novalidate="novalidate" onsubmit="return loginBtnClicked();">
+                <div class="form-group">
+                  <label for="username">用户名</label>
+                  <input id="username-field" type="text" class="form-control" name="username" value="" required
+                    autofocus />
+                </div>
+                <!--
+                <div class="form-group">
+                  <div class="custom-checkbox custom-control">
+                    <input type="checkbox" name="remember" id="remember" class="custom-control-input" />
+                    <label for="remember" class="custom-control-label">记住我</label>
+                  </div>
+                </div>
+                -->
+                <div class="form-group m-0">
+                  <button id="btn-login" type="button" class="btn btn-primary btn-block" onclick="loginBtnClicked();">
+                    登录
+                  </button>
+                </div>
+              </form>
+              <div class="reg_btn">
+                <a href="javascript:void(0);" onclick="registerBtnClicked()">注册</a>
+              </div>
+              <div class="cert_btn">
+                <a href="./cert">安装证书</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</body>
+</html>

data/lib/doraemon/dashboard/scenes.html ADDED

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Doraemon Dashboard</title>
+  <script src="script/doraemon.js"></script>
+  <script src="script/scenes.js"></script>
+  <link rel="stylesheet" href="css/scenes.css" />
+  <link rel="icon" href="data:;base64,=" />
+</head>
+<body>
+  <div class="container-lg">
+    <div id="nav">
+      <div id="div_save_btn">
+        <button type="button" class="btn btn-primary" id="add_scene_btn" onclick="addSceneBtnClicked()">
+          添加场景
+        </button>
+        <div id="user_info">
+          <div id="user_info_name"></div>
+          <div id="user_info_port"></div>
+        </div>
+      </div>
+    </div>
+    <div class="row" id="scenes">
+    </div>
+  </div>
+</body>
+<script type="text/javascript">
+  fetchAllScenes();
+</script>
+</html>