beeblog/views/search.html

{{template "header" .}}
<meta name="keywords" content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,aiprose">
<title>搜索 - 码农随笔</title>
<script src="https://unpkg.com/dayjs@1.8.15/dayjs.min.js"></script>
</head>
<body>
<div class="root-container">
    {{template "nav" .}}
    <div class="search-root">
        <div>
            <div>
                <div class="input-group input-class">
                    <i-input id="searchVal" search enter-button @on-search="searchHandler" placeholder="请输入关键字"/>
                </div>
            </div>
        </div>
        <div class="search-result">
            <div class="search-item" v-for="el in list">
                <div class="search-title">
                    <a style="color: #28a3ef" :href="'https://www.aiprose.com/blog/' + el._source.Id " target="_blank">${el._source.Title}</a>
                    <span> ${mtime(el._source.Ctime)}</span>
                </div>
                <p class="search-content">${el._source.BlogDesc }</p>
            </div>
            <p v-if="list.length == 0">没有搜索到相关文章</p>
        </div>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el: ".root-container",
        delimiters: ['${', '}'],
        data: {
            list: [],
            pageNo: 1,
            pageSize: 30,
            searchParms: {
                from: 0,
                size: 20,
                query: {
                    multi_match: {
                        query: "",
                        // type: "best_fields",
                        fields: ["Title", "BlogHtml"]
                    }
                }
            }
        },
        methods: {
            mtime (time){
                return dayjs(time).format("YYYY-MM-DD")
            },
            searchHandler (searchVal){
                var _this = this;
                if (!searchVal || searchVal.trim().length == 0) {
                    this.$Message.warning('请输入查询内容');
                    return
                }
                this.searchParms.query.multi_match.query = searchVal;
                var stringify = JSON.stringify(this.searchParms);
                $.ajax({
                    url: "https://www.aiprose.com/es/search",    //请求的url地址
                    headers: {'Content-Type': 'application/json;charset=utf8'},
                    dataType: "json",   //返回格式为json
                    async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                    data: stringify,    //参数值
                    type: "POST",   //请求方式
                    beforeSend: function () {
                        //请求前的处理
                    },
                    success: function (resp) {
                        _this.list = []
                        if (resp.hits.total != 0) {
                            _this.list = resp.hits.hits;
                        }
                        //请求成功时处理
                    },
                    complete: function () {
                        //请求完成的处理
                    },
                    error: function () {
                        //请求出错处理
                    }
                })
            }
        }
    })


    $(function () {

        function search() {

            searchParms.query.multi_match.query = searchVal;
            var stringify = JSON.stringify(searchParms);

        }
    })
</script>
</html>
搜索页成功拿到数据 6 lat temu			`{{template "header" .}}`
			`<meta name="keywords" content="码农随笔,个人随笔,博客,个人博客,个人笔记,技术博客,免费云笔记,云笔记,随笔,IT博客,谷歌地图,码农笔录,aiprose">`
			`<title>搜索 - 码农随笔</title>`
es搜索 5 lat temu			`<script src="https://unpkg.com/dayjs@1.8.15/dayjs.min.js"></script>`
搜索页成功拿到数据 6 lat temu			`</head>`
			`<body>`
			`<div class="root-container">`
			`{{template "nav" .}}`
			`<div class="search-root">`
			`<div>`
			`<div>`
			`<div class="input-group input-class">`
vue iviewui引入成功 5 lat temu			`<i-input id="searchVal" search enter-button @on-search="searchHandler" placeholder="请输入关键字"/>`
搜索页成功拿到数据 6 lat temu			`</div>`
			`</div>`
			`</div>`
es搜索 5 lat temu			`<div class="search-result">`
vue iviewui引入成功 5 lat temu			`<div class="search-item" v-for="el in list">`
			`<div class="search-title">`
			`<a style="color: #28a3ef" :href="'https://www.aiprose.com/blog/' + el._source.Id " target="_blank">${el._source.Title}</a>`
			`<span> ${mtime(el._source.Ctime)}</span>`
			`</div>`
			`<p class="search-content">${el._source.BlogDesc }</p>`
			`</div>`
			`<p v-if="list.length == 0">没有搜索到相关文章</p>`
搜索页成功拿到数据 6 lat temu			`</div>`
			`</div>`
			`</div>`
			`</body>`
			`<script>`
vue iviewui引入成功 5 lat temu			`var app = new Vue({`
			`el: ".root-container",`
			`delimiters: ['${', '}'],`
			`data: {`
			`list: [],`
			`pageNo: 1,`
			`pageSize: 30,`
			`searchParms: {`
			`from: 0,`
			`size: 20,`
			`query: {`
			`multi_match: {`
			`query: "",`
			`// type: "best_fields",`
			`fields: ["Title", "BlogHtml"]`
			`}`
			`}`
			`}`
			`},`
			`methods: {`
			`mtime (time){`
			`return dayjs(time).format("YYYY-MM-DD")`
			`},`
			`searchHandler (searchVal){`
			`var _this = this;`
			`if (!searchVal \|\| searchVal.trim().length == 0) {`
			`this.$Message.warning('请输入查询内容');`
			`return`
			`}`
			`this.searchParms.query.multi_match.query = searchVal;`
			`var stringify = JSON.stringify(this.searchParms);`
			`$.ajax({`
			`url: "https://www.aiprose.com/es/search", //请求的url地址`
			`headers: {'Content-Type': 'application/json;charset=utf8'},`
			`dataType: "json", //返回格式为json`
			`async: true,//请求是否异步，默认为异步，这也是ajax重要特性`
			`data: stringify, //参数值`
			`type: "POST", //请求方式`
			`beforeSend: function () {`
			`//请求前的处理`
			`},`
			`success: function (resp) {`
			`_this.list = []`
			`if (resp.hits.total != 0) {`
			`_this.list = resp.hits.hits;`
			`}`
			`//请求成功时处理`
			`},`
			`complete: function () {`
			`//请求完成的处理`
			`},`
			`error: function () {`
			`//请求出错处理`
			`}`
			`})`
搜索页成功拿到数据 6 lat temu			`}`
			`}`
vue iviewui引入成功 5 lat temu			`})`
es搜索 5 lat temu

搜索页成功拿到数据 6 lat temu			`$(function () {`
细节优化 5 lat temu
			`function search() {`
vue iviewui引入成功 5 lat temu
es搜索 5 lat temu			`searchParms.query.multi_match.query = searchVal;`
搜索页成功拿到数据 6 lat temu			`var stringify = JSON.stringify(searchParms);`
vue iviewui引入成功 5 lat temu
细节优化 5 lat temu			`}`
搜索页成功拿到数据 6 lat temu			`})`
			`</script>`
			`</html>`