游戏陪玩网站源码开发，搜索功能的实现与页面倒计时跳转

在游戏陪玩网站源码开发时，首页会有一个搜索输入框和按钮区域，我们要做的就是来完善这部分功能。首先游戏陪玩网站源码搜索的逻辑，我们简单地设定为问题的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”，如下：

<form class="navbar-form navbar-left" action="{{ url_for('search') }}" method="GET">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Key Words" name="keyword">
    </div>
    <button type="submit" class="btn btn-default" >搜索</button>
  </form>

此时搜索功能已经基本实现。

我们再优化一下未找到结果的情况，如之前所说，无搜索结果时游戏陪玩网站源码页面显示提示并通过倒计时返回首页。页面的倒计时跳转，我们可以用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，其样式如下：

不仅在倒计时结束后跳转回游戏陪玩网站源码首页，还增加了一个立即跳转的按钮(通过οnclick="location=url"实现)，其html代码如下：

{% extends 'base.html' %}

{% block static_files %}
<link rel="stylesheet" href="{{ url_for('static',filename='css/warn.css') }}" />
<script src="{{ url_for('static',filename='javascript/timer.js') }}"></script>
{% endblock %}

{% block page_name %}提示{% endblock %}

{% block body_part %}
<div class="informs">
    <h4>提示信息</h4>
    <p>
        <span class="key-message">未找到相关结果</span>，
        <span id="timer">5</span>秒后将自动跳转回首页。
    </p>
    <div class="jump-button">
        <button type="submit" class="btn btn-default pull-right" onclick="location='{{ url_for('home') }}'">立即跳转</button>
    </div>
</div>
<script type="text/javascript">timetojump(5,"{{ url_for('home') }}");</script>
{% 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;
}

以上就是“游戏陪玩网站源码开发，搜索功能的实现与页面倒计时跳转”的全部内容了，希望在大家进行游戏陪玩网站源码搜索框设计开发时能有帮助。