搜索页成功拿到数据

5 years ago · 320bf02209
5 changed files with 135 additions and 1 deletions
--- a/controllers/UPageController.go
+++ b/controllers/UPageController.go
@ -0,0 +1,11 @@
+package controllers
+
+import "github.com/astaxie/beego"
+
+type UPageController struct {
+	beego.Controller
+}
+
+func (this *UPageController) SearchPage() {
+	this.TplName = "search.html"
+}
--- a/routers/UPageRouter.go
+++ b/routers/UPageRouter.go
@ -0,0 +1,10 @@
+package routers
+
+import (
+	"beeblog/controllers"
+	"github.com/astaxie/beego"
+)
+
+func init() {
+	beego.Router("/search", &controllers.UPageController{}, "get:SearchPage")
+}
--- a/static/css/common.css
+++ b/static/css/common.css
@ -613,4 +613,49 @@ img {
 .blog-detaile p code{
    color: red;
    padding: 2px 5px;
+}
+
+.search-root{
+    margin-top: 50px;
+}
+
+.search-root  .input-class{
+    display: table;
+    border-collapse: separate;
+}
+.search-root .input-class{
+    width: 50%;
+    height: 32px;
+    margin: 18px auto;
+    display: flex;
+}
+.search-root .input-class input{
+    flex: 1;
+    height: 36px !important;
+    padding: 2px 14px;
+    font-size: 12px;
+    line-height: 1.5;
+    border-radius: 3px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    display: table-cell;
+    border: 1px solid #3385ff;
+}
+.search-root .input-class .input-group-addon{
+    color: #555;
+    height: 36px;
+    line-height: 36px !important;
+    font-size: 17px !important;
+    font-size: 12px;
+    padding: 2px 14px;
+    line-height: 36px;
+    border-radius: 3px;
+    display: table-cell;
+    background-color: #3385ff;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    color: #fff;
+    border: 1px solid #3385ff;
+    border-left: none;
+    cursor: pointer;
 }
--- a/views/T.header.tpl
+++ b/views/T.header.tpl
@ -13,5 +13,6 @@
    <script type="text/javascript" src="/static/js/layer.js"></script>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script type="text/javascript" src="/static/layui/layui.js"></script>
-    <link type="text/css" rel="styleSheet" href="/static/css/common.min.css"/>
+<!--    <link type="text/css" rel="styleSheet" href="/static/css/common.min.css"/>-->
+    <link type="text/css" rel="styleSheet" href="/static/css/common.css"/>
 {{end}}
--- a/views/search.html
+++ b/views/search.html
@ -0,0 +1,67 @@
+{{template "header" .}}
+<meta name="keywords" content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,aiprose">
+<title>搜索 - 码农随笔</title>
+</head>
+<body>
+<div class="root-container">
+    {{template "nav" .}}
+    <div class="search-root">
+        <div>
+            <div>
+                <div class="input-group input-class">
+                    <input type="text" class="form-control" placeholder="请输入关键字" aria-describedby="sizing-addon1"
+                           id="searchVal">
+                    <span class="input-group-addon" id="searchBtn">搜索</span>
+                </div>
+            </div>
+        </div>
+        <div>
+
+        </div>
+    </div>
+</div>
+</body>
+<script>
+    var searchParms = {
+        from: 0,
+        size: 20,
+        query: {
+            multi_match: {
+                query: "linux",
+                // type: "best_fields",
+                fields: ["Title", "BlogHtml"]
+            }
+        }
+    }
+    $(function () {
+        $("#searchBtn").click(function () {
+            var searchVal = $("#searchVal").val()
+            if (!searchVal || searchVal.trim().length == 0) {
+                layer.msg("请输入查询内容")
+            }
+            var stringify = JSON.stringify(searchParms);
+            $.ajax({
+                url: "http://47.98.109.5:8209/beeblog/beeblog/_search",    //请求的url地址
+                headers:{'Content-Type':'application/json;charset=utf8'},
+                dataType: "json",   //返回格式为json
+                async: true,//请求是否异步，默认为异步，这也是ajax重要特性
+                data: stringify,    //参数值
+                type: "POST",   //请求方式
+                beforeSend: function () {
+                    //请求前的处理
+                },
+                success: function (resp) {
+                    debugger
+                    //请求成功时处理
+                },
+                complete: function () {
+                    //请求完成的处理
+                },
+                error: function () {
+                    //请求出错处理
+                }
+            })
+        })
+    })
+</script>
+</html>