15.搜索功能的实现与页面倒计时跳转

DobbyKim 发布于2019-07-30 15:29 / 1097人阅读

摘要：我们的导航条有搜索输入框和按钮，现在我们来完善这部分功能。然后设计一个，其样式如下不仅在倒计时结束后跳转回首页，还增加了一个立即跳转的按钮通过实现，其代码如下提示提示信息未找到相关结果，秒后将自动跳转回首页。

我们的导航条有搜索输入框和按钮，现在我们来完善这部分功能。首先搜索的逻辑，我们简单地设定为问题的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 %}

    提示信息
    
        未找到相关结果，
        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;
}

云服务器 GPU云服务器搜索结果页面跳转搜索功能java实现 js实现页面跳转 ajax实现页面跳转

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/41279.html

用Vue搭建一个应用盒子（三）：音乐播放器

摘要：组件结构接着我们就该搭建这个播放器的组件了。总的原理是首先获取音频的持续时间，然后通过一个定时器，不断更新显示时间，播放完成时，计时器停止。这个页面比较简单，播放器标签，绑定了事件，即播放完成后执行。这个播放器的开发历时2个多月，并不是说它有多复杂，相反它的功能还非常不完善，仅具雏形。之所以磨磨蹭蹭这么久，一是因为拖延，二也是实习公司项目太紧。8月底结束实习前写完了样式，之后在家空闲...

appetizerio 2019-08-26 11:33 评论0 收藏0
滴滴一下，小程序专车来了

摘要：功能三滴滴费用计算古人云细节决定成败，一个良好的微信小程序往往就是一些细节打动人心，居然是模仿，虽做不到百分百，至少还是很希望一模一样。最近时常感叹道：时间总是那么的快，转瞬即逝。对于像我这种刚入门的小生来讲，技术每天都在更新，框架也层出不穷，有时候还没弄懂这个知识大牛们又推出了更好的技术。当然学习好的技术也是十分重要的。但是在学习之后怎样才能够得到自己想要的呢，一个好的建议便是静...

SwordFly 2019-08-26 12:00 评论0 收藏0
9.注册和登录功能实现（2）—— 注册与登录的错误提示

摘要：在注册和登录功能实现中，我们已经获取到了页面过来的登录或者注册数据，接下来我们需要与数据库中的数据做验证，验证通过才能登录或者注册。在注册和登录功能实现（1）中，我们已经获取到了页面POST过来的登录或者注册数据，接下来我们需要与数据库中的数据做验证，验证通过才能登录或者注册。我们平时在登录网站时，如果输入的用户名或者密码错误，有的网站是在登录框附近提示错误，也有的是跳转到一个页面提...

duan199226 2019-07-30 15:28 评论0 收藏0
指尖一点歌声来--微信小程序之仿网易云音乐心得

摘要：为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。查文档发现，小程序中图片加载完成后，有一个加载完成事件。前者在微信客户端版本就不开始维护了，后者低版本需做兼容处理。目前还有一些功能暂未实现，会在以后继续完善项目，继续学习。为了提高自己，最近在学习微信小程序，选题是仿网易云音乐。期间踩过了大把的坑，bug出现的难受和解决bug欢喜，一直是伴随我阶段性学习这个项目的心情。初步完成...

KitorinZero 2019-08-22 11:18 评论0 收藏0