博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
15.搜索功能的实现与页面倒计时跳转
阅读量:6082 次
发布时间:2019-06-20

本文共 2456 字,大约阅读时间需要 8 分钟。

我们的导航条有搜索输入框和按钮,现在我们来完善这部分功能。首先搜索的逻辑,我们简单地设定为问题的title或者content包含搜索的关键字即可。假设搜索的关键字存在变量keyword里,那么获取所有符合搜索逻辑的question的代码如下:

result = Questions.query.filter(or_(Questions.title.contains(keyword),                                    Questions.content.contains(keyword))).order_by(                                    Questions.create_time.desc()).all()

虽然看着眼花缭乱,但是很容易理解,使用Model.Column.Contains(keyword)filter结合来筛选指定的Column字段包含keyword的内容,由于我们的逻辑是或的关系,所以使用了一个从sqlalchemy中导出的or_函数。当然我们也完全可以自己写一个函数去实现同样的搜索功能,毕竟这部分逻辑很简单。


搜索功能一般都是用GET方法来传递参数的,对应成url'/search?keyword=XXX',我们需要处理的是'/search',编写一个与之对应的视图函数,检索结果我们可以完全使用首页模板home.html去展示,只是内容不一样而已:

@app.route('/search')def search():    # 获取GET数据,注意和获取POST数据的区别    keyword = request.args.get('keyword')    result = Questions.query.filter(or_(Questions.title.contains(keyword),                                    Questions.content.contains(keyword))).order_by(                                    Questions.create_time.desc()).all()    if result:        return render_template('home.html', questions=result)    else:        return 'Not Found'

base.html中,我们为搜索框添加name="keyword"属性,对应form表单添加action="{

{ url_for('search') }}method="GET",如下:

此时搜索功能已经基本实现,如搜索GDPurl变为'http://127.0.0.1:5000/search?keyword=GDP',结果只有一条如下:

clipboard.png

我们再优化一下未找到结果的情况,如之前所说,无搜索结果时页面显示提示并通过倒计时返回首页。页面的倒计时跳转,我们可以用js来实现,代码如下:

function timetojump(second,jumpurl){    var timer= document.getElementById('timer');    timer.innerHTML=second;    if(--second>0){        setTimeout("timetojump("+second+",'"+jumpurl+"')",1000);        }    else{        location.href=jumpurl;        }    }

函数timetojump获取一个idtimerhtml元素,将second秒数写入其内容,秒数如果减1后大于0,则用setTimeout继续执行timetojump,此时的second已经减1了,这样就实现了html倒计时的效果,当second等于0时,就执行location.href跳转到jumpurl,我们将js代码存在static/javascript/timer.js中。然后设计一个warn.html,其样式如下:

clipboard.png

不仅在倒计时结束后跳转回首页,还增加了一个立即跳转的按钮(通过onclick="location=url"实现),其html代码如下:

{% extends 'base.html' %}{% block static_files %}
{% endblock %}{% block page_name %}提示{% endblock %}{% block body_part %}

提示信息

未找到相关结果5秒后将自动跳转回首页。

{% endblock %}

search视图函数结尾的else部分修改为

else:    return render_template('warn.html')

css代码如下:

.body-container{    overflow: hidden;}.informs{    width: 560px;    margin: 20px;    padding: 5px;    border: 1px solid cornflowerblue;    border-radius: 5px;    overflow: hidden;}span.key-message{    color: #225599;}

转载地址:http://aqkwa.baihongyu.com/

你可能感兴趣的文章
【框架整合】Maven-SpringMVC3.X+Spring3.X+MyBatis3-日志、JSON解析、表关联查询等均已配置好...
查看>>
要想成为高级Java程序员需要具备哪些知识呢?
查看>>
带着问题去学习--Nginx配置解析(一)
查看>>
onix-文件系统
查看>>
java.io.Serializable浅析
查看>>
我的友情链接
查看>>
多线程之线程池任务管理通用模板
查看>>
CSS3让长单词与URL地址自动换行——word-wrap属性
查看>>
CodeForces 580B Kefa and Company
查看>>
开发规范浅谈
查看>>
Spark Streaming揭秘 Day29 深入理解Spark2.x中的Structured Streaming
查看>>
鼠标增强软件StrokeIt使用方法
查看>>
本地连接linux虚拟机的方法
查看>>
某公司面试java试题之【二】,看看吧,说不定就是你将要做的题
查看>>
BABOK - 企业分析(Enterprise Analysis)概要
查看>>
Linux 配置vnc,开启linux远程桌面
查看>>
Hadoop安装测试简单记录
查看>>
CentOS6.4关闭触控板
查看>>
React Native 极光推送填坑(ios)
查看>>
Terratest:一个用于自动化基础设施测试的开源Go库
查看>>