全文检索示例:前端页面编写(10)

最新推荐文章于 2022-05-23 22:59:15 发布

faith.huan

最新推荐文章于 2022-05-23 22:59:15 发布

阅读量1.6k

点赞数

分类专栏： # 全文检索示例文章标签：全文检索示例 element分页 elasticsearch thymeleaf

本文链接：https://blog.csdn.net/huanqingdong/article/details/102692429

版权

全文检索示例专栏收录该内容

11 篇文章 1 订阅

订阅专栏

简介

本文在上一章节springboot集成es基础上完成全文检索接口编写
完整代码github地址

添加maven依赖

前端页面使用thymeleaf模板，为了修改页面不重启服务添加devtool依赖

<dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 <dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-devtools</artifactId>
 </dependency>

禁用thymeleaf缓存

application.yml中添加如下配置

spring:
  thymeleaf:
    cache: false

试图跳转Controller

编写ViewController，用于跳转视图，当访问地址http://localhost:8080/search/index时跳转到resources/templates/search/index.html视图

package app.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @author faith.huan 2019-10-22 21:25
 */
@Controller
public class ViewController {

    @RequestMapping("search/index")
    public String searchIndex(){
        return "search/index";
    }

}

页面编写

完整代码如下

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="">

<head>
    <title>Elastic search 文档</title>

    <meta charset="UTF-8">
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 先引入 Vue -->
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <style>
        /* 查询类型选择框宽度和背景色设置 */
        .el-select .el-input {
            width: 150px;
        }

        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }

        /*标题和内容的字体等设置*/
        .title {
            font-size: 24px;
            cursor: pointer;
        }

        .content {
            margin-bottom: 4px;
            color: #8a8a8a;
            font-size: 14px;
            line-height: 24px;
        }

    </style>
</head>

<body>
<div id="app">

    <!-- 查询框部分 -->
    <el-row>
        <el-col :span="12" :offset="6">
            <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select" @keyup.enter.native="search">
                <el-select v-model="type" slot="prepend" placeholder="请选择" @change="typeChange">
                    <el-option label="单词检索" value="term"></el-option>
                    <el-option label="短语检索" value="phrase"></el-option>
                </el-select>
                <el-button slot="append" type="primary" @click.native.prevent="search"
                           icon="el-icon-search">搜索
                </el-button>
            </el-input>
        </el-col>
    </el-row>

    <!-- 内容显示部分 -->
    <el-row>
        <el-col :span="16" :offset="4" v-for="(content, index) in contents" :key="content.oid">
            <el-card :body-style="{ padding: '0px' }">
                <div class="clearfix" style="padding: 14px;">
                    <div>
                        <span class="title" v-html="content.title" @click="view(content.url)"></span>
                        <span style="float: right">评分：{{content.score}}</span>
                    </div>
                    <span class="content" v-html="content.content"></span>
                    <div class="bottom clearfix">
                        <i style="float: right" class="el-icon-time">{{ content.toEsDate }}</i>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>

    <!-- 分页插件部分 -->
    <el-row>
        <el-col :span="16" :offset="4">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
    </el-row>


</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            currentPage: 1, // 初始页码
            pageSize: 10,   // 每页的数据
            total: 0,       // 总记录数
            keyword: '权威指南', // 关键词
            type: 'term',       //查询方式
            contents: []        //查询结果
        },
        created: function () {
            this.search()
        },
        methods: {
            // 每页大小变更处理函数
            handleSizeChange: function (size) {
                this.pageSize = size;
                console.log("每页大小:" + this.pageSize);  //每页下拉显示数据
                this.search();
            },
            // 页码变更处理函数
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
                console.log("当前页码:" + this.currentPage);  //点击第几页
                this.search();
            },
            search: function () {
                // 模糊弹层
                var loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                // 查询参数
                var data = {
                    keyword: this.keyword,
                    type: this.type,
                    page: this.currentPage - 1,
                    pageSize: this.pageSize
                };
                // post请求
                $.post("/search/fullTextSearch", data)
                    .then(function (response) {
                        console.log("response", response);
                        if (response && response.totalElements && response.content) {
                            console.log("总条数:" + response.totalElements);
                            vm.total = response.totalElements;
                            vm.contents = response.content;
                        } else {
                            vm.total = 0;
                            vm.contents = [];
                        }
                        loading.close();
                    });
            },
            // 点击title时，跳转官方地址
            view: function (url) {
                console.log(url);
                window.open(url, "_blank");
            },
            // 查询类型变更时，当前页码改为1
            typeChange: function () {
                this.currentPage = 1;
            }
        }
    })
</script>

</html>

测试截图

term查询

短语查询能查询到三个文档，与上一章节接口测试一致
在这里插入图片描述

phrase查询

短语查询能查询到一个文档，与上一章节接口测试一致

在这里插入图片描述

faith.huan

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
全文检索示例:前端页面编写(10)

简介本文在上一章节springboot集成es基础上完成全文检索接口编写完整代码github地址添加maven依赖前端页面使用thymeleaf模板，为了修改页面不重启服务添加devtool依赖<dependency> <groupId>org.springframework.boot</groupId> <artifactI...
复制链接

扫一扫