python flask智能租房项目——列表页_智能租房flask 黑马程序员

蓝图

使⽤蓝图可以分为三个步骤
创建⼀个蓝图对象

admin=Blueprint('admin',__name__)
1

在这个蓝图对象上进⾏操作,注册路由,指定静态⽂件夹,注册模版过滤器

@admin.route('/')
def admin_home():
return 'admin_home'
1
2
3

在应⽤对象上注册这个蓝图对象

app.register_blueprint(admin,url_prefix='/admin')
1

当这个应⽤启动后,通过/admin/可以访问到蓝图中定义的视图函数

搜索列表页

1. 后端接口设计

接⼝描述 接⼝参数
请求⻚⾯ 搜索功能列表⻚
请求⽅式 GET
请求地址 /query
返回数据 房源对象
每⼀组的房源数据所需字段如下：
参数 类型 说明
id int 房源id
addr str 房源地址
rooms str 户型
area str ⾯积
price str 价格
seen int 浏览量
direction str 朝向
trattic str 交通情况，如果没有显示暂⽆数据！
title str 标题

2. 后端逻辑

在 list_page.py ⽂件中完成此功能。

"""
实现搜索列表页的功能
1. 定义一个路由为 /query的视图函数
2. 使用request 获取到请求字段 具体的查询信息
3. 使用sqlalchemy 在字段中 查询具体的信息 获取满足这个条件的房源
4. 使用publish_time字段，进行降序排序
5. 使用render_template进行渲染
"""
@list_page.route('/query')  # http://127.0.0.1:5000/query?addr=朝阳-三里屯-三里屯SOHO
def search_txt_info():
    # 获取地区字段的查询
    if request.args.get('addr'):
        addr = request.args.get('addr')
        result = House.query.filter(House.address == addr).order_by(House.publish_time.desc()).all()
        print(result)
        return render_template('sousuo_list.html', house_list=result)

    # 获取户型字段的查询
    if request.args.get('rooms'):
        rooms_info = request.args.get('rooms')
        result = House.query.filter(House.rooms == rooms_info).order_by(House.publish_time.desc()).all()
        return render_template('sousuo_list.html', house_list=result)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3. 前端逻辑

3.1 完成点击结果的逻辑

正确返回的结果，执⾏js代码将其添加在到 id=list 的ul标签中。这⾥需要注意的是，我们需要给此处添加⼀个选择搜索结果的点击事件 info_to_txt 函数。info_to_txt 函数会将选择的搜索结果，放到 input 输⼊框中，并清空刚才返回的搜索列表。

 // 点击检索项 将其 填入 搜索框
    function info_to_txt() {
   
        $('.li_style').on('click', function () {
   
            // 实现了 重复点击的初始化
            if ($(this).hasClass('active')) {
   
                $(this).removeClass('active');
            }
            $(this).addClass('active');
            t_name = $(this).attr('title');
            $('#txt').val('');
            $('#txt').val(t_name);
            $('#list').empty()
        });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.2 HTML代码

 <!-- 模块1信息展示 -->
        <div class="collection col-lg-10">
            {% for house in house_list %}
            <div class="row collection-line">

                <div class="col-lg-5 col-md-5 mx-auto">
                    <div><a href="/house/{
    { house.id }}"><img class='img-fluid img-box' src="/static/img/house-bg1.jpg"
                                                              alt=""></a></div>
                </div>
                <div class="col-lg-5 col-md-5 mx-auto">
                    <
1
2
3
4
5
6
7
8
9
10
11