Browse Source

添加web测试页面

zuoxiupeng 1 year ago
parent
commit
c7b07ac5d2
2 changed files with 90 additions and 2 deletions
  1. 5 2
      main.go
  2. 85 0
      view/index.html

+ 5 - 2
main.go

@@ -8,7 +8,7 @@ import (
 	"os"
 	"path/filepath"
 
-	"53it.net/zql"
+	"53it.net/zql" // http://git.53it.net/zuoxiupeng/zql or https://github.com/shiguanghuxian/zql
 	"gopkg.in/mgo.v2"
 )
 
@@ -20,6 +20,9 @@ type Data struct {
 }
 
 func main() {
+	// 系统日志显示文件和行号
+	log.SetFlags(log.Lshortfile | log.LstdFlags)
+
 	rootDir := flag.String("d", "./", "The root directory of the website")
 	port := flag.String("p", "80", "Web port")
 	ipAddress := flag.String("a", "0.0.0.0", "Site IP address")
@@ -56,7 +59,7 @@ func StartHTTP(ipAddr, port, staticPath string) {
 	// 静态文件服务器
 	http.Handle("/", http.FileServer(http.Dir(staticPath)))
 	// ajax请求数据表数据
-	http.HandleFunc("/convert/", AjaxConvert)
+	http.HandleFunc("/convert", AjaxConvert)
 	// 启动http服务
 	log.Println("正在启动http服务:", listenAddress)
 	err := http.ListenAndServe(listenAddress, nil)

+ 85 - 0
view/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
+    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
+    <style>
+        .main {
+            width: 600px;
+            margin: 0 auto;
+        }
+
+        .main .from-item {
+            margin-bottom: 10px;
+        }
+
+        .main .from-item .zql {
+            width: 500px;
+        }
+
+        .btn {
+            margin: 0 auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="main" id="app">
+        <div class="from">
+            <div class="from-item">
+                <label for="zql">数据库类型:</label>
+                <select name="type" id="dbType" v-model="dbType">
+                    <option value="influxdb">influxdb</option>
+                    <option value="mongodb">mongodb</option>
+                    <option value="elasticsearch">elasticsearch</option>
+                </select>
+            </div>
+
+            <div class="from-item">
+                <label for="zql">ZQL:</label>
+                <textarea name="zql" class="zql" id="" cols="30" rows="10" v-model="zql"></textarea>
+            </div>
+
+            <div class="from-item">
+                <button class="btn" v-on:click="convert">转换</button>
+            </div>
+
+            <div class="from-item">
+                <label for="out">ZQL:</label>
+                <textarea name="out" class="zql" id="" cols="30" rows="10" v-model="out"></textarea>
+            </div>
+
+        </div>
+    </div>
+    <script>
+        var app = new Vue({
+            el: '#app',
+            data: {
+                out: '',
+                dbType: 'influxdb',
+                zql: "select id as aid appname zu_hehe from zu_hehe where (id=1 or name='123')  group by time(1m) order by id desc limit 10, 10"
+            },
+            methods: {
+                convert: function () {
+                    this.$http({
+                        method: 'GET',
+                        url: '/convert?type=' + this.dbType + '&prefix=&zql=' + this.zql
+                    }).then(function (response) {
+                        console.log(response);
+                        this.out = response.data.data;
+                    }, function (error) {
+                        console.log(error);
+                        alert(error.statusText);
+                    })
+                }
+            }
+        })
+    </script>
+</body>
+
+</html>