我们的导航条有搜索输入框和按钮,现在我们来完善这部分功能。首先搜索的逻辑,我们简单地设定为问题的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
",如下:
此时搜索功能已经基本实现,如搜索GDP
,url
变为'http://127.0.0.1:5000/search?keyword=GDP'
,结果只有一条如下:
我们再优化一下未找到结果的情况,如之前所说,无搜索结果时页面显示提示并通过倒计时返回首页。页面的倒计时跳转,我们可以用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
获取一个id
为timer
的html
元素,将second
秒数写入其内容,秒数如果减1后大于0,则用setTimeout
继续执行timetojump
,此时的second
已经减1了,这样就实现了html
倒计时的效果,当second
等于0时,就执行location.href
跳转到jumpurl
,我们将js
代码存在static/javascript/timer.js
中。然后设计一个warn.html
,其样式如下:
不仅在倒计时结束后跳转回首页,还增加了一个立即跳转的按钮(通过onclick="location=url"
实现),其html
代码如下:
{% extends 'base.html' %}{% block static_files %} {% endblock %}{% block page_name %}提示{% endblock %}{% block body_part %}{% endblock %}提示信息
5秒后将自动跳转回首页。
,
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;}