es+flask搜索小项目实现分页+高亮的示例代码

下面我将详细讲解“es+flask搜索小项目实现分页+高亮的示例代码”完整攻略,包含两条示例说明。

示例一:使用Python Flask框架和Elasticsearch检索引擎实现搜索功能

步骤一:准备工作

  1. 安装Python Flask框架以及它的依赖包。
  2. 安装Elasticsearch检索引擎驱动程序的Python客户端库:elasticsearch-py。

步骤二:构建Flask应用程序框架

from flask import Flask, request, render_template, jsonify
from elasticsearch import Elasticsearch

app = Flask(__name__)
es_host = "localhost"
es_port = "9200"
index_name = "my_index"

es = Elasticsearch([{'host': es_host, 'port': es_port}])

@app.route("/")
def home():
    return render_template("search.html")


@app.route("/search", methods=['POST'])
def search():
    keywords = request.form['keywords']

    # 搜索请求:
    search_results = es.search(index=index_name, body={
        "query": {
            "multi_match": {
                "query": keywords,
                "fields": ["title^3", "content", "author^2"]
            }
        },
        "highlight": {
            "pre_tags": ["<b>"],
            "post_tags": ["</b>"],
            "fields": {
                "title": {},
                "content": {},
                "author": {}
            }
        }
    })

    # 处理搜索结果:
    hits = search_results['hits']['hits']
    results = []
    for hit in hits:
        result = hit['_source']
        result['id'] = hit['_id']
        result['score'] = hit['_score']
        result['highlight'] = hit['highlight']
        results.append(result)

    return jsonify({"results": results})

步骤三:使用Jinja2模板引擎创建搜索页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <form id="search_form" action="/search" method="POST">
        <input type="text" name="keywords" placeholder="搜索关键字">
        <input type="submit" value="搜索">
    </form>
    <table>
        <thead>
        <tr>
            <th>标题</th>
            <th>作者</th>
            <th>正文</th>
            <th>关键词</th>
            <th>得分</th>
        </tr>
        </thead>
        <tbody id="search_results">
        </tbody>
    </table>
    <script>
        $("#search_form").submit(function (event) {
            event.preventDefault();      // 防止提交
            var keywords = $("input[name='keywords']").val();
            $.ajax({
                type: "POST",
                url: "/search",
                data: {"keywords": keywords},
                dataType: "json",
                success: function (response) {
                    var results = response['results'];
                    $("#search_results").html("");
                    for (var i = 0; i < results.length; i++) {
                        var result = results[i];
                        var title = result['highlight']['title'][0];
                        var content = result['highlight']['content'][0];
                        var author = result['highlight']['author'][0];
                        var keywords = result['keywords'];
                        var score = result['score'];
                        var tr = '<tr><td>' + title + '</td>' +
                            '<td>' + author + '</td>' +
                            '<td>' + content + '</td>' +
                            '<td>' + keywords + '</td>' +
                            '<td>' + score + '</td></tr>';
                        $("#search_results").append(tr);
                    }
                },
                error: function (response) {
                    console.log(response);
                }
            })
        });
    </script>
</body>
</html>

以上就是使用Python Flask框架和Elasticsearch检索引擎实现搜索功能的完整攻略。

示例二:Flask+Elasticsearch实现分页+高亮搜索

步骤一:在mapping上启用highlight属性

修改创建index的mapping,将需要高亮的fields加上highlight属性,例如:

{
    "mappings": {
        "properties": {
            "title": {"type": "text", "analyzer": "ik_max_word", "search_analyzer": "ik_max_word", "fields": {"raw": {"type": "keyword"}} ,"index": True ,"highlight": {"type": "unified", "pre_tags": "<i>", "post_tags": "</i>", "number_of_fragments": 3}},
            "content": {"type": "text", "analyzer": "ik_smart", "search_analyzer": "ik_smart", "fields": {"raw": {"type": "keyword"}} ,"index": True ,"highlight": {"type": "unified", "pre_tags": "<i>", "post_tags": "</i>", "number_of_fragments": 3}}
        }
    }
}

步骤二:在查询中指定高亮部分

修改查询部分代码,使用Query DSL指定高亮部分。

from flask import Flask, request, render_template, jsonify
from elasticsearch import Elasticsearch

app = Flask(__name__)
es_host = "localhost"
es_port = "9200"
index_name = "my_index"

es = Elasticsearch([{'host': es_host, 'port': es_port}])

@app.route('/')
def index():
    return render_template('index.html')


@app.route('/search')
def search():
    keywords = request.args.get('keywords', '')
    page = int(request.args.get('page', 1))
    page_size = int(request.args.get('page_size', 10))
    start = (page - 1) * page_size

    search_body = {
        'from': start,
        'size': page_size,
        'query': {
            'multi_match': {
                'query': keywords,
                'fields': ['title', 'content']
            }
        },
        'highlight': {
            'pre_tags': ['<span style="color:red">'],
            'post_tags': ['</span>'],
            'fields': {
                'title': {},
                'content': {}
            }
        }
    }

    results = es.search(index=index_name, body=search_body)

    total = results['hits']['total']['value']
    hits = results['hits']['hits']

    search_results = []
    for hit in hits:
        result = hit['_source']
        result['_id'] = hit['_id']
        result['_score'] = hit['_score']
        if 'highlight' in hit:
            highlight = hit['highlight']
            if 'title' in highlight:
                result['title'] = ''.join(highlight['title'])
            if 'content' in highlight:
                result['content'] = ''.join(highlight['content'])
        search_results.append(result)

    total_page = (total + page_size - 1) // page_size
    previous_page = page - 1 if page > 1 else None
    next_page = page + 1 if page < total_page else None

    return jsonify({
        'total': total,
        'total_page': total_page,
        'current_page': page,
        'previous_page': previous_page,
        'next_page': next_page,
        'results': search_results
    })

步骤三:使用Jinja2模板引擎创建搜索页面

<!DOCTYPE html>
<html>
<head>
    <title>搜索</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="search">
    <input type="text" name="keywords" id="keywords">
    <button id="search_btn">搜索</button>
    <div id="search_results"></div>
    <div id="page_info"></div>
    <button id="prev_btn" disabled>上一页</button>
    <button id="next_btn" disabled>下一页</button>
</div>
<script>
    var page = 1;
    var page_size = 10;

    function search() {
        var keywords = $('#keywords').val();
        $.getJSON('/search', {
            'keywords': keywords,
            'page': page,
            'page_size': page_size
        }, function (data) {
            var total = data['total'];
            var total_page = data['total_page'];
            var current_page = data['current_page'];
            var previous_page = data['previous_page'];
            var next_page = data['next_page'];
            var results = data['results'];

            var search_html = '';
            for (var i = 0; i < results.length; i++) {
                var result = results[i];
                var id = result['_id'];
                var title = result['title'];
                var content = result['content'];
                var score = result['_score'];
                search_html += '<div class="result">';
                search_html += '<h3><a href="/detail/' + id + '">' + title + '</a></h3>';
                search_html += '<div class="score">得分:' + score + '</div>';
                search_html += '<div class="content">' + content + '</div>';
                search_html += '</div>';
            }

            var page_info_html = '共' + total + '个搜索结果,当前第' + current_page + '/' + total_page + '页';
            if (previous_page) {
                $('#prev_btn').removeAttr('disabled');
            } else {
                $('#prev_btn').attr('disabled', 'disabled');
            }
            if (next_page) {
                $('#next_btn').removeAttr('disabled');
            } else {
                $('#next_btn').attr('disabled', 'disabled');
            }

            $('#search_results').html(search_html);
            $('#page_info').html(page_info_html);
        });
    }

    $('#search_btn').click(function () {
        page = 1;
        search();
    });

    $('#prev_btn').click(function () {
        page -= 1;
        search();
    });

    $('#next_btn').click(function () {
        page += 1;
        search();
    });
</script>
</body>
</html>

以上就是Flask+Elasticsearch实现分页+高亮搜索的完整攻略。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:es+flask搜索小项目实现分页+高亮的示例代码 - Python技术站

(0)
上一篇 2023年5月16日
下一篇 2023年5月16日

相关文章

  • Python利用Flask-Mail实现发送邮件详解

    下面是Python利用Flask-Mail实现发送邮件的完整攻略: 一、Flask-Mail简介 Flask-Mail是Flask框架的一个扩展模块,可以使发送电子邮件更方便。它提供了SMTP认证、HTML邮件等功能,使用起来十分简单。 二、安装Flask-Mail 在使用Flask-Mail之前,需要先安装Flask-Mail扩展。使用pip安装即可: p…

    Flask 2023年5月16日
    00
  • 用Python的Flask框架结合MySQL写一个内存监控程序

    要用Python的Flask框架结合MySQL写一个内存监控程序,需要完成以下步骤: 安装Flask和MySQL模块 在命令行中输入以下命令: pip install Flask pip install mysql-connector-python 创建MySQL数据库 在MySQL中创建一个名为“memory_monitor”的数据库,并在其中创建一个名为…

    Flask 2023年5月16日
    00
  • 前端实现滑动按钮AJAX与后端交互的示例代码

    下面我将为你详细讲解“前端实现滑动按钮AJAX与后端交互的示例代码”的完整攻略,其中包括两条示例说明。 示例如下 示例一:实现滑动按钮的基本功能 1. HTML代码 首先,在html文件中添加如下代码: <div class="switch-box"> <input type="checkbox" i…

    Flask 2023年5月16日
    00
  • vue结合el-upload实现腾讯云视频上传功能

    下面我会详细讲解如何结合 Vue 和 el-upload 来实现腾讯云视频上传功能,以及两个示例的具体实现过程。 1. 安装依赖 首先确保已安装 Vue 及 el-upload 组件: # 安装 vue npm install vue # 安装 el-upload npm install element-ui el-upload 2. 引入依赖 在项目的入口…

    Flask 2023年5月16日
    00
  • Python的Flask框架中@app.route的用法教程

    下面是Python Flask框架中@app.route的用法教程攻略及示例说明。 什么是@app.route @app.route是一个装饰器,它用来注册一个网页的URL路径,每次当用户发送请求到该URL时,相应的函数就会被执行。这个装饰器通常用于Flask中的视图函数。 @app.route所装饰的函数将会作为视图函数,当访问被装饰的URL路径时,将触发…

    Flask 2023年5月15日
    00
  • 详谈在flask中使用jsonify和json.dumps的区别

    下面是详细的攻略: 标题 标题应该明确说明本文的主题,并突出重点内容。 简介 首先,需要对 jsonify 和 json.dumps 进行简单的介绍: jsonify 是 Flask 内置的一个函数,它可以将 Python 对象转化为 JSON 字符串,并将 JSON 字符串包装成一个 Flask Response 对象,以方便的返回给客户端。 json.d…

    Flask 2023年5月16日
    00
  • flask设置cookie

    Flask中设置cookie可以通过make_response函数来实现。下面是具体的步骤: 步骤一:导入Flask和make_response from flask import Flask, make_response 步骤二:创建Flask app并定义路由 这里我们创建了一个hello函数,并将其绑定在URL路径为/的路由中。 app = Flask…

    Flask 2023年5月15日
    00
  • Flask模板引擎Jinja2使用实例

    下面是关于“Flask模板引擎Jinja2使用实例”的详细攻略,包含两条示例说明。 简介 Jinja2是Flask框架使用的默认模板引擎,它是一个现代化的,基于模板的多功能工具,可以生成静态文本,XML或其他格式的动态内容。在Flask应用程序中使用Jinja2可以使得我们可以在HTML页面中使用Python语言,显著增强了Web应用的灵活性和可扩展性。 安…

    Flask 2023年5月15日
    00
合作推广
合作推广
分享本页
返回顶部