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

环境

  • 前端：html,css,js,jQuery,bootstrap
  • 后端：flask
  • 搜索引擎：elasticsearch
  • 数据源：某某之家

项目展示

项目目录

主要源码

获取数据源并写入es

from lxml import etree
from concurrent.futures import ThreadPoolExecutor
from elasticsearch import Elasticsearch
from elasticsearch import helpers
import requests

headers = {
    'user-agent': 'ua'
}

es = Elasticsearch()
if not es.indices.exists(index='car'):
    es.indices.create(index='car', mappings={
        'properties': {
            'url': {
                'type': 'text'
            },
            'img': {
                'type': 'text'
            },
            'title': {
                'type': 'text'
            },
            'desc': {
                'type': 'text'
            }

        }
    })

def task(url,page):
    res = requests.get(url, headers)
    text = res.text
    tree = etree.HTML(text)
    ul_list = tree.xpath('//ul[@class="article"]')
    actions = []
    for ul in ul_list:
        li_list = ul.xpath('./li')
        for li in li_list:
            url = li.xpath('./a/@href'),
            img = li.xpath('./a/div/img/@src'),
            desc = li.xpath('./a/p/text()'),
            title = li.xpath('./a/h3/text()')
            if title:
                doc = {
                    '_index': 'car',
                    'url': f'https:{url[0][0]}',
                    'img': img[0][0],
                    'desc': desc[0][0],
                    'title': title[0],
                }
                actions.append(doc)
    helpers.bulk(es, actions=actions)
    print(f'第{page}页完成！')

def main():
    with ThreadPoolExecutor() as pool:
        for i in range(1, 11):
            url = f'https://www.autohome.com.cn/all/{i}/'
            pool.submit(task, url=url,page=i)

if __name__ == '__main__':
    main()

视图函数

from flask import Blueprint
from flask import request
from flask import render_template
from flask import jsonify
from web.ext import es
from pprint import pprint

search_bp = Blueprint('search', __name__, url_prefix='/search')

@search_bp.route('/', methods=['get', 'post'])
def search():
    if request.method == 'GET':
        return render_template('search.html')
    elif request.method == 'POST':
        content = request.values.get('content')
        size = 10
        current = int(request.values.get('current', '0'))
        if content:
            res = es.search(index='car', query={
                'match': {
                    "title": content
                }
            }, highlight={
                "pre_tags": "<span style='color: red'>"
                ,
                "post_tags": "</span>"
                ,
                "fields": {
                    "title": {}
                }
            }, size=1000)
        else:
            res = es.search(index='car', query={
                'match_all': {}
            }, size=1000)
        new_res = res['hits']['hits']
        total = int(res['hits']['total']['value'])
        need_page = (total // size) + 1
        data = {
            'res': new_res[current * size:current * size + size],
            'need_page': need_page,
            'total': total
        }
        return jsonify(data)

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>General Search</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">
    <script src="{{ url_for('static',filename='js/jQuery.js') }}"></script>
    <script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
    <style>
        .title{
            font-size: 25px;
            font-weight: 10;
        }
        .result{
            color: red;
        }
    </style>
</head>
<body>
<div>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#" style="margin-left: 100px">General Search</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
          </ul>
          <div class="navbar-form navbar-left">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="" id="content" style="width: 800px;margin-left: 200px">
            </div>
          </div>
            <button class="btn btn-primary pull-right" id="submit" style="margin-top: 8px;width: 100px;">搜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;索</button>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
</nav>
</div>
<div class="container">
    General为您找到相关结果约<span id='count' class="result">0</span>个
    <hr>
</div>
<div class="container" id="tags">
</div>
<div class="text-center">
    <nav aria-label="Page navigation">
      <ul class="pagination" id="page">
      </ul>
    </nav>
</div>
<script>

    function getData(current)
    {
        let content=$('#content').val()
        let tags=$('#tags')
        $('#count').text()
        tags.empty()
        $.ajax({
            url:"",
            type:'post',
            data:{
                'content':content,
                'current':current
            },
            dataType:'JSON',
            success:function (res){
                let length=res.total
                let need_page=res.need_page
                $('#count').text(length)
                $.each(res.res,function (index,value){
                    let source=value._source
                    let title=source.title
                    let highlight=value.highlight
                    if (highlight)
                    {
                        title=highlight.title
                    }
                    let div=`
                    <div>
                        <p><a href="${source.url}" target="_blank">
                        <span class="title">${title}</span>
                        <br>
                        <img src="${source.img}" alt="">
                        </a></p>
                        <p>${source.desc}</p>
                        <hr>
                    </div>
                    `
                    tags.append(div)
                })
                $('#page').empty()
                for(let i=0;i<need_page;i++)
                {
                    let tmp=i+1
                    if (current==i)
                    {
                        $('#page').append('<li class="active"><span class="changePage">'+tmp+'</span></li>')
                    }
                    else {
                        $('#page').append('<li><span class="changePage">'+tmp+'</span></li>')
                    }

                }
            }
        })
    }
    $('#submit').click(function (){
        getData(0)
    })

    $('#page').on('click','li',function (){
        getData($(this).text()-1)
    })

</script>
</body>
</html>

app配置

from flask import Flask
from flask_session import Session
from web.ext import db
from .search.search import search_bp
from flask_script import Manager
from flask_migrate import Migrate, MigrateCommand

def create_app():
    app = Flask(__name__)
    app.config.from_object('settings.DevelopmentConfig')
    app.register_blueprint(search_bp)
    Session(app)
    db.init_app(app)
    app = Manager(app)
    Migrate(app, db)
    app.add_command('db', MigrateCommand)

    return app

总结

对比django,flask最后选用自由度较大的flask。

集合flask-script,flask_sqlalchemy,flask-migrate加快开发。

写一个小demo深化了对es接口的理解。

到此这篇关于es+flask搜索小项目实现分页+高亮的示例代码的文章就介绍到这了,更多相关es flask分页+高亮内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • python flask实现分页的示例代码

    结合mysql数据库查询,实现分页效果 @user.route("/user_list",methods=['POST','GET']) def user_list(): p = g.args.get("p", '') #页数 show_shouye_status = 0 #显示首页状态 if p =='': p=1 else: p=int(p) if p > 1: show_shouye_status = 1 mdb = db_session() limit

  • python flask实现分页效果

    python flask实现分页效果

    在我们学习的过程中会遇到这么样的问题,就是在我们学习的过程中会发现需要分页处理,这里呢,给大家介绍书上说的分页. @app.route('/',methods=['GET']) @app.route('/<int:page>') def home(page=1): pagination=Post.query.order_by(Post.publish_date.desc()).paginate(page, per_page=10,error_out=False) posts = paginat

  • Python利用flask sqlalchemy实现分页效果

    Python利用flask sqlalchemy实现分页效果

    Flask-sqlalchemy是关于flask一个针对数据库管理的.文中我们采用一个关于员工显示例子. 首先,我们创建SQLALCHEMY对像db. from flask import Flask, render_template,request from flask_sqlalchemy import SQLAlchemy app = Flask(__name__,static_url_path='') app.debug = True app.secret_key = "faefasdfa

  • Python的Flask框架中实现分页功能的教程

    Blog Posts的提交 让我们从简单的开始.首页上必须有一张用户提交新的post的表单. 首先我们定义一个单域表单对象(fileapp/forms.py): class PostForm(Form): post = TextField('post', validators = [Required()]) 下面,我们把这个表单添加到template中(fileapp/templates/index.html): <!-- extend base layout --> {% extends &

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

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

    环境 前端:html,css,js,jQuery,bootstrap 后端:flask 搜索引擎:elasticsearch 数据源:某某之家 项目展示 项目目录 主要源码 获取数据源并写入es from lxml import etree from concurrent.futures import ThreadPoolExecutor from elasticsearch import Elasticsearch from elasticsearch import helpers impor

  • 微信小程序实现搜索关键词高亮的示例代码

    微信小程序实现搜索关键词高亮的示例代码

    1,前言 项目中碰到一个需求,搜索数据并且关键词要高亮显示,接到需求,马上开干.先上效果图.源码已经做成了小程序代码片段,放入了GitHub了,文章底部有源码链接. 2,思路 博主第一时间想到的就是使用split,根据搜索的关键词,处理后台返回的数据,然后indexOf找到关键字,给每个字添加deep字段,deep为true,则高亮,为false,则正常.由于是小程序,所以楼主直接做成了一个高亮组件,代码很简单,实现步骤如下. 3,代码逻辑 模拟数据如下 list:[ '武汉大学', '华中科技

  • 基于原生JS实现分页效果的示例代码

    基于原生JS实现分页效果的示例代码

    这个只是一个分页的demo,主要是思路整理(很久之前项目用的东西) 分页实现的效果 主要是 左侧上一页 右侧是下一页 中间显示主要是超过5个显示 省略号 然后是可配置选项 实现之后的效果 首先需要初始化该对象的一些基本属性,显示总页码数,中间显示的页面数, 添加一个回调函数,在页面变化激活回调函数并返回当前页面和一些需要的其他参数 init为对象初始化的方法(里面的参数都是可以写成活的,我这里偷懒了所以写成死的了) 这个里的 z_page 可以接是接口返回的总页数 function Page(o

  • vue Element-ui input 远程搜索与修改建议显示模版的示例代码

    html: <template> <el-autocomplete popper-class="my-autocomplete" custom-item="my-remote" v-model="state" :fetch-suggestions="querySearch" placeholder="默认空" icon="close" :on-icon-click=&q

  • mpvue网易云短信接口实现小程序短信登录的示例代码

    上一篇简单介绍了mpvue实现快递单号查询,慢慢发现mpvue真的和vue很像,但它有几乎十分的吻合小程序的语法规范,刚开始用起来会觉得特点的爽,但涉及到细节却是有很多采坑的地方.今天利用网上的网易云接口,再结合mpvue简单写一写小程序短信验证登录. 简单封装的一个网络请求文件,网易云接口网上大佬们GitHub上还是比较的多而且开源 const baseURL = "https://*****:1717"; //基路径 exports.http = function({url,met

  • Mybatis Plus 自定义方法实现分页功能的示例代码

    一般物理分页,即通过sql语句分页,都是在sql语句后面添加limit分页语句,在xml文件里传入分页的参数,再多配置一条sql,用于查询总数: <select id="queryStudentsBySql" parameterType="map" resultMap="studentmapper"> select * from student limit #{currIndex} , #{pageSize} </select&

  • 基于Mybatis Plus实现多表分页查询的示例代码

    注意:Mybatis Plus 3.0.7 版本才开始用[自定义sql]+[QueryWrapper],低版本不能使用,还是老实写SQL进行条件拼接 1.源码分析 在Wrapper<T>接口中就有如下方法 /** * 获取自定义SQL 简化自定义XML复杂情况 * 使用方法:自定义sql + ${ew.customSqlSegment} * 1.逻辑删除需要自己拼接条件 (之前自定义也同样) * 2.不支持wrapper中附带实体的情况 (wrapper自带实体会更麻烦) * 3.用法 ${e

  • springboot整合mybatis-plus实现多表分页查询的示例代码

    springboot整合mybatis-plus实现多表分页查询的示例代码

    1.新建一个springboot工程 2.需要导入mybatis和mybatis-plus的依赖文件 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.1.1</version> </dependency> <dependency> &l

  • python中Tkinter实现分页标签的示例代码

    python中Tkinter实现分页标签的示例代码

    Tkinter实现UI分页标签显示: Input页,红色部分为当前Frame的位置,下半部分为第一页的子标签:三页标签的显示内容各不相同.实现分页显示的核心组件为Radiobutton,Radiobutton只有一个选项能够生效,使用参数indicatoron=0能够将Radiobutton显示为Button的形状,通过选定的Radiobutton将原有的Frame forget掉,同时,将预定的Frame pack,实现分页的效果.使用时要将更换的组件放入一个Frame中,定义一个函数进行选定

  • 微信小程序 获取手机号 JavaScript解密示例代码详解

    微信小程序 获取手机号 JavaScript解密示例代码详解

    当我们在开发微信小程序中,有一个常用的功能,就是获取用户的手机号,然后一键登入小程序,那么手机号如何获取呢?请认真看完本文,保证可以获取到用户的手机号. 刚开始开发微信小程序的时候,想着实现手机验证码登入,后来查阅资料得知,发给用户的短信是要自己付费的.后来想想,微信获取用户的手机号一样可以保证手机号码的真实性,因为手机号既然可以绑定微信,那么肯定是被严格核验过的,然后就开始了获取手机号之旅,网上教程有很多,但不知什么原因,都是会少一些内容,有的只有前端代码,没有后端:有的后端代码是PHP,不是

随机推荐