第8章 智能租房——列表页

news2024/11/17 8:47:04

学习目标

  • 掌握搜索房源列表页展示功能的逻辑，能够实现在列表中展示符合搜索条件的房源数据

  • 掌握最新房源列表页展示功能的逻辑，能够运用分页插件以分页形式展示最新房源数据

  • 掌握热点房源列表页展示功能的逻辑，能够运用分页插件以分页形式展示热点房源数据

为了向用户展示更多的房源信息，智能租房平台允许用户通过首页的智能提示搜索框搜索，或者单击链接文本“更多北京房源”或“更多热点房源”进入列表页，查看更多符合搜索条件、最新或热点的房源信息。列表页模块涉及3个功能，分别是搜索房源列表页展示、最新房源列表页展示、热点房源列表页展示，本章将对这3个功能进行介绍。

8.1 搜索房源列表页展示

8.1.1 搜索房源列表页功能说明

当用户在智能租房首页的智能提示搜索框中输入关键字后，可以在输入框下方看到提示列表。在提示列表中单击某个检索项，会将选中的检索项填写到输入框。 若用户选择地区搜索，则输入框中填入的内容为房源地址；若用户选择户型搜索，则输入框中填入的内容为户型。 此时单击输入框右方的“提交”按钮或按下回车键，会跳转到搜索房源列表页，搜索房源列表页中展示了符合搜索条件的全部房源信息。

每套房源信息还包括房源图片、房源标题、房源价格、建筑面积、房源户型、房源朝向、交通条件和浏览量。

8.1.2 搜索房源列表页的接口设计

搜索房源列表页只需要请求用户搜索的房源信息，所以请求方式为GET请求，请求页面为search_list.html；在index.html文件中定义智能提示搜索框的表单时，通过action属性指定了表单提交的地址为/query，所以搜索房源列表页的请求地址为/query；返回数据则为房源对象。

搜索房源列表页接口设计如表所示。

接口描述说明
请求页面search_list.html
请求方式GET
请求地址/query
返回数据房源对象

8.1.3 搜索房源列表页的后端实现

后端需要查询满足搜索条件的所有房源数据，具体实现逻辑：后端接收前端传递过来的搜索条件，再根据该搜索条件到数据库中查询符合该搜索条件的房源数据，并将查询的房源数据渲染到前端页面中。

搜索房源列表页的后端实现具体步骤如下。

（1）在house项目的根目录下app.py文件，在该文件中定义一个用于处理前端请求的视图函数。

@app.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')
        sql="select * from house_info where address=%s order by publish_time desc"
        cursor.execute(sql,(addr))
        result = cursor.fetchall()
        return render_template('search_list.html', house_list=result)

    # 获取户型字段的查询
    if request.args.get('rooms'):
        rooms_info = request.args.get('rooms')
        sql = "select * from house_info where rooms=%s order by publish_time desc"
        cursor.execute(sql, (rooms_info))
        result = cursor.fetchall()
        return render_template('search_list.html', house_list=result)
    # 重定向到index函数
    return redirect(url_for('index'))

（2）在app.py文件中，定义两个过滤器，分别用于处理过长的房源标题和空选项。

def deal_title_over(word):
    if len(word) > 15:
        return word[:15] + '...'  # 当房源标题长度大于15时，用省略号替换
    else:
        return word


def deal_direction(word):
    if len(word) == 0 or word is None:  # 房源朝向、交通条件为空时显示暂无信息
        return '暂无信息！'
    else:
        return word

（3）在app.py文件中，添加注册过滤器deal_title_over()和deal_direction()的代码。

app.add_template_filter(deal_title_over, 'dealover')
app.add_template_filter(deal_direction, 'dealdirection')

8.1.4 搜索房源列表页的前端实现

前端需要实现两个功能，分别是选中检索项和渲染列表页，其中选中检索项的功能代码无需进行任何修改。

1.选中检索项

选中检索项的逻辑代码位于index.html文件中。

// 单击检索项将其填入搜索框
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()
    });}

2.渲染列表页

在search_list.html文件中查询class属性值为col-lg-10的div标签，在该标签内部保留第一个class属性值为row collection-line的div标签，并删除其余9个类似div标签，在保留的标签外部使用循环结构将固定的数据替换为相应的模板变量。

<!-- 模块1信息展示 -->
<div class="collection col-lg-10">
    <div id="fill-data" class="1">

        {% 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[0] }}"><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">
                    <div class="collection-line-info">
                        <div class="title">
                            <span><a href="/house/{{ house[0] }}">{{ house[1] | dealover }}</a></span>
                        </div>
                        <div>
                            <span class="attribute-text">房源地址：</span>
                            &nbsp
                            <span class="info-text">{{ house[9] }} </span>
                        </div>
                        <div>
                            <span class="attribute-text">建筑面积：</span>
                            &nbsp
                            <span class="info-text">{{ house[3] }}平方米</span>
                        </div>
                        <div>
                            <span class="attribute-text">房源户型：</span>
                            &nbsp
                            <span class="info-text">{{ house[2] }}</span>
                        </div>
                        <div>
                            <span class="attribute-text">房源朝向：</span>
                            &nbsp
                            <span class="info-text">{{ house[5] | dealdirection }}</span>
                        </div>
                        <div>
                            <span class="attribute-text">交通条件：</span>
                            &nbsp
                            <span class="info-text">{{ house[10] | dealdirection }}</span>
                        </div>
                        <div>
                <span class="attribute-text"><i class="fa fa-heart" aria-hidden="true"
                                                style="color: #e74c3c"></i> {{ house[16] }}人浏览过</span>
                            &nbsp
                            <span class="info-text"></span>
                        </div>
                    </div>

                </div>
                <div class="col-lg-2 col-md-2 mx-auto">
                    <div class="info-more">
                        <span class="info-text" style="color: #e74c3c">￥&nbsp{{ house[4] }}</span>
                        <span><a href="/house/{{ house.id }}"><i class="fa fa-arrow-right"
                                                                 aria-hidden="true"></i></a></span>
                    </div>
                </div>

            </div>
        {% endfor %}
    </div>


    <div class="row my-page-line">
        <div class="col-lg-12 col-md-12 mx-auto">
            <div class="zxf_pagediv">
            </div>
        </div>
    </div>
</div>

8.2 最新房源列表页展示

8.2.1 最新房源列表页功能说明

智能租房网站中，单击首页的链接文本“更多北京房源”后，页面会跳转到最新房源列表页，该页面按照房源的发布时间（由晚到早）展示了当前城市的全部房源信息。

最新房源列表页以分页形式展示了全部房源数据，每页至多展示10套房源信息，当前页面是第1页，对应的链接地址为http://127.0.0.1:5000/list/pattern/1。

8.2.2 最新房源列表页的接口设计

最新房源列表页展示功能只涉及数据获取，不涉及数据提交，请求方式为GET，请求页面为list.html，返回数据为房源对象列表。

接口描述说明
请求页面list.html
请求方式GET
请求地址/list/pattern/int:page
返回数据房源对象列表

8.2.3 最新房源列表页的后端实现

最新房源列表页展示功能的后端逻辑：首先需要从数据库中查询所有的房源数据，将这些房源数据按照发布时间的先后顺序排列，发布时间晚的排在前面，发布时间早的排在后面，然后借用分页插件将排序后的数据进行分页展示。

在app.py文件编写代码，实现查询所有房源数据的功能，具体代码如下所示。

# 最新房源列表页展示的功能
@app.route('/list/pattern/<int:page>')
def return_new_list(page):
    # 获取房源总数量
    house_num = totalNums
    # 计算总的页码数，向上取整
    total_num = math.ceil(house_num / 10)
    sql="select * from house_info order by publish_time desc limit %s,%s"
    cursor.execute(sql,(page,10))
    result = cursor.fetchall()
    return render_template('list.html', house_list=result, page_num=page, total_num=total_num)

8.2.4 最新房源列表页的前端实现

前端需要实现两个功能，分别是分页显示和渲染列表页，这些功能代码均位于list.html文件中。

1.分页显示

前端借助分页插件实现分页显示的功能，分页插件位于项目的static目录下，包括zxf_page.css、jquery.min.js和zxf_page.js。在list.html文件中使用分页插件需要先引入分页插件，再根据分页插件的接口要求编写符合自己需求的回调函数。

<link href="/static/css/zxf_page.css" rel="stylesheet">
<script src="/static/vendor/jquery/jquery.min.js"></script>
<script src="/static/js/zxf_page.js"></script>
<script>
    $(document).ready(function () {
        $(".zxf_pagediv").createPage({
            pageNum: {{total_num}},  // 总的页码数
            {#pageNum: 10,  // 总的页码数#}
            current: Number($('#fill-data').attr('class')),  // 当前的页码
            backfun: function (e) {  // 回调函数
                console.log(e['current']);  // e['current] 是单击更多房源链接文本时候的页码
                var n_current = e['current'];
                // 获取当前页的地址
                var part_path = window.location.pathname;
                var path_list = part_path.split('/');
                // 将单击下一页的页码替换原来的页码
                path_list[3] = n_current;
                // 获取重新拼接的新URL地址
                var n_url = path_list.join('/');
                console.log(n_url);
                // 重新加载
                window.location.replace(n_url);
            }
        });
    });
</script>

2.渲染列表页

为了能够动态显示列表页的房源信息，在list.html文件中查询id属性值为fill-data的div标签，在该标签内部保留第一个class属性值为row collection-line的div标签，并删除其余9个类似div标签，在保留的标签外部使用循环结构将固定的数据替换为相应的模板变量。

<!-- 模块1信息展示 -->
<div class="collection col-lg-12 col-md-12">
    <div id="fill-data" class="{{ page_num }}">

        {% 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[0] }}"><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">
                    <div class="collection-line-info">
                        <div class="title">
                            <span><a href="/house/{{ house[0] }}">{{ house[1] | dealover }}</a></span>
                        </div>
                        <div>
                            <span class="attribute-text">房源地址：</span>
                            &nbsp
                            <span class="info-text">{{ house[9] }} </span>
                        </div>
                        <div>
                            <span class="attribute-text">建筑面积：</span>
                            &nbsp
                            <span class="info-text">{{ house[3] }}平方米</span>
                        </div>
                        <div>
                            <span class="attribute-text">房源户型：</span>
                            &nbsp
                            <span class="info-text">{{ house[2] }}</span>
                        </div>
                        <div>
                            <span class="attribute-text">房源朝向：</span>
                            &nbsp
                            <span class="info-text">{{ house[5] }}</span>
                        </div>
                        <div>
                            <span class="attribute-text">交通条件：</span>
                            &nbsp
                            <span class="info-text">{{ house[10] | dealdirection }}</span>
                        </div>

                        <div>
                        <span class="attribute-text"><i class="fa fa-heart" aria-hidden="true"
                                                        style="color: #e74c3c"></i> {{ house[16] }}人浏览过</span>
                            &nbsp
                            <span class="info-text"></span>
                        </div>

                    </div>
                </div>
                <div class="col-lg-2 col-md-2 mx-auto">
                    <div class="info-more">
                        <span class="info-text" style="color: #e74c3c">￥&nbsp{{ house[4] }}</span>
                        <span><a href="/house/{{ house.id }}"><i class="fa fa-arrow-right"
                                                                 aria-hidden="true"></i></a></span>
                    </div>
                </div>

            </div>
        {% endfor %}
    </div>

8.3 热点房源列表页展示

8.3.1 热点房源列表页功能说明

在智能租房网站中，单击首页的链接文本“更多热点房源”后，页面会跳转到热点房源列表页，该页面按照房源的浏览量（由大到小）展示了当前城市的全部房源信息。 热点房源列表页展示功能可以划分为3个功能，分别是查询所有的房源数据、分页显示和渲染列表页，其中查询所有的房源数据由后端实现，分页显示和渲染列表页由前端实现。

8.3.2 热点房源列表页的接口设计

热点房源列表页用于按浏览量由大至小的顺序展示全部的房源数据，所以请求方式为GET请求，请求页面为list.html，返回数据为包含多个房源对象的列表。

接口描述说明
请求页面list.html
请求方式GET
请求地址/list/hot_house/int:page
返回数据房源对象列表

8.3.3 热点房源列表页的后端实现

后端实现热点房源列表页具体的实现逻辑：首先需要从数据库中查询所有的房源数据，将这些房源数据按照浏览量排列，浏览量大的房源数据排在前面，浏览量小的房源数据排在后面，然后借用分页插件将排序后的数据进行分页展示。

在app.py文件编写代码，实现查询所有房源数据的功能。

# 最热房源列表页展示的功能
@app.route('/list/hot_house/<int:page>')
def return_hot_list(page):
    # 获取房源总数量
    house_num = totalNums
    # 计算总的页码数，向上取整
    total_num = math.ceil(house_num / 10)
    sql = "select * from house_info order by page_views desc limit %s,%s"
    cursor.execute(sql, (page, 10))
    result = cursor.fetchall()
    return render_template('list.html', house_list=result, page_num=page, total_num=total_num)

8.4 本章小结

本章围绕智能租房项目列表页模块的功能进行了介绍，包括搜索房源列表页展示、最新房源列表页展示和热点房源列表页展示。通过学习本章的内容，读者能够熟练地运用flask_sqlalchemy查询和操作数据表，使用分页插件实现分页效果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1443670.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

《CSS 简易速速上手小册》第7章：CSS 预处理器与框架（2024 最新版）

《CSS 简易速速上手小册》第7章：CSS 预处理器与框架（2024 最新版）

文章目录 7.1 Sass&#xff1a;更高效的 CSS 编写7.1.1 基础知识7.1.2 重点案例&#xff1a;主题颜色和字体管理7.1.3 拓展案例 1&#xff1a;响应式辅助类7.1.4 拓展案例 2&#xff1a;深色模式支持 7.2 Bootstrap&#xff1a;快速原型设计和开发7.2.1 基础知识7.2.2 重点案例…
阅读更多...
visual studio和cmake如何编译dlib库

visual studio和cmake如何编译dlib库

官网 dlib C Library 对应的是最新版本&#xff0c;只能用到vs2015版本及以后 如果使用vs2013&#xff0c;所以需要下载vs2013可用的版本。 就是说dlib版本与vs版本有对应关系 所有版本 dlib C Library - Browse /dlib at SourceForge.net Releases davisking/dlib GitHu…
阅读更多...
Trie 字典树的两种实现方式

Trie 字典树的两种实现方式

Trie&#xff0c;又称字典树、单词查找树或键树&#xff0c;是一种树形结构&#xff0c;是一种哈希树的变种。典型应用是用于统计&#xff0c;排序和保存大量的字符串&#xff08;但不仅限于字符串&#xff09;&#xff0c;所以经常被搜索引擎系统用于文本词频统计。它的优点是…
阅读更多...
Leetcode2560. 打家劫舍 IV

Leetcode2560. 打家劫舍 IV

Every day a Leetcode 题目来源&#xff1a;2560. 打家劫舍 IV 解法1&#xff1a;二分答案 动态规划 给定数组 nums&#xff0c;从中选择一个长度至少为 k 的子序列 A&#xff0c;要求 A 中没有任何元素在 nums 中是相邻的。 最小化 max⁡(A)。 看到「最大化最小值」或者…
阅读更多...
【Python 千题 —— 基础篇】查找年龄

【Python 千题 —— 基础篇】查找年龄

Python 千题持续更新中 …… 脑图地址 👉：⭐https://twilight-fanyi.gitee.io/mind-map/Python千题.html⭐ 题目描述 题目描述 班级中有 Tom、Alan、Bob、Candy、Sandy 五个人，他们组成字典 {Tom: 23, Alan: 24, Bob: 21, Candy: 22, Sandy: 21}，字典的键是姓名，字典的…
阅读更多...
实现自定义标记

实现自定义标记

实现自定义标记 问题陈述 New Tech Book的高级管理层决定在其用JSP设计的应用程序的所有页面上显示版权信息。它们还要去如何向应用程序中添加JSP页面，可以重用显示版本信息的代码。公司的软件开发人员Jerry Smith决定用自定义标记来创建应用程序的这一部分。 解决方案 要解…
阅读更多...
上位机图像处理和嵌入式模块部署（利用python开发软件）

上位机图像处理和嵌入式模块部署（利用python开发软件）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 开发windows和linux软件的时候&#xff0c;大家一般都是习惯于用c/c语言进行开发&#xff0c;但是目前来说很多的开发板都是支持python语言开发的。…
阅读更多...
Open CASCADE学习|扫掠

Open CASCADE学习|扫掠

目录 1、BRepPrimAPI_MakePrism Draw Test Harness&#xff1a; C&#xff1a; 2、BRepPrimAPI_MakeRevol Draw Test Harness&#xff1a; C&#xff1a; 3、BRepOffsetAPI_MakePipeShell Draw Test Harness&#xff1a; C&#xff1a; Draw Test Harness&#xff1a;…
阅读更多...
QXlsx Qt操作excel(2)

QXlsx Qt操作excel(2)

QXlsx 是一个用于处理Excel文件的开源C库。它允许你在你的C应用程序中读取和写入Microsoft Excel文件&#xff08;.xlsx格式&#xff09;。该库支持多种操作&#xff0c;包括创建新的工作簿、读取和写入单元格数据、格式化单元格、以及其他与Excel文件相关的功能。 关于QXlsx的…
阅读更多...
Attention 和 Self-Attention 总结

Attention 和 Self-Attention 总结

一、Attention Attention 的核心逻辑是“从关注全部到关注重点”&#xff0c;将有限的注意力集中在重点信息上&#xff0c;从而节省资源&#xff0c;快速获得最有效的信息。 Attention 机制可以更加好的解决序列长距离依赖问题&#xff0c;并且具有并行计算能力。 Attention…
阅读更多...
【计算几何】给定一组点的多边形面积

【计算几何】给定一组点的多边形面积

目录 一、说明二、有序顶点集三、无序顶点集3.1 凸多边形3.2 非凸多边形 四、结论 ​ 一、说明 计算多边形面积的方法有很多种。众所周知的多边形&#xff08;如三角形、矩形、正方形、梯形等&#xff09;的面积可以使用简单的数学公式计算。在这篇文章中&#xff0c;我将讨论…
阅读更多...
ChatGPT高效提问—prompt常见用法（续篇八）

ChatGPT高效提问—prompt常见用法（续篇八）

ChatGPT高效提问—prompt常见用法（续篇八） 1.1 对抗 ​ 对抗是一个重要主题，深入探讨了大型语言模型（LLM）的安全风险。它不仅反映了人们对LLM可能出现的风险和安全问题的理解，而且能够帮助我们识别这些潜在的风险，并通过切实可行的技术手段来规避。 ​ 截至目前，网络…
阅读更多...
python web 框架Django学习笔记

python web 框架Django学习笔记

2018年5月 python web 框架Django学习笔记 Django 架站的16堂课 MVC架构设计师大部分框架或大型程序项目中一种软件工程的架构模式&#xff0c;把程序或者项目分为三个主要组成部分&#xff0c;Model数据模型、View视图、Controller控制器。 命令及设置相关 创建数据库及中间…
阅读更多...
【EAI 014】Gato: A Generalist Agent

【EAI 014】Gato: A Generalist Agent

论文标题&#xff1a;A Generalist Agent 论文作者&#xff1a;Scott Reed, Konrad Zolna, Emilio Parisotto, Sergio Gomez Colmenarejo, Alexander Novikov, Gabriel Barth-Maron, Mai Gimenez, Yury Sulsky, Jackie Kay, Jost Tobias Springenberg, Tom Eccles, Jake Bruce,…
阅读更多...
车载自动化项目：Python

车载自动化项目：Python

1. 自动化测试用的什么框架&#xff1f; 第一种&#xff1a;PythonSeleniumuittest框架 首先是拿到需求文档&#xff0c;基于这个需求去进行搭建。 用pytestrequestallure 这些第三方库进行编写自动化脚本。 举个例子一般的话整个的一个自动化的搭建是分为6层嘛&#xff1a…
阅读更多...
GPIO结构

GPIO结构

GPIO简介 GPIO(General Purpose Input Output)通用输入输出口 可配置为8种输入输出模式 引脚电平&#xff1a;0V~3.3V,部分引脚可容忍5V 输出模式下可控制端口输出高低电平,用以驱动LED、控制蜂鸣器、模拟通信协议输出时序等 输入模式下可读取端口的高低电平或电压&#x…
阅读更多...
算法学习——LeetCode力扣字符串篇

算法学习——LeetCode力扣字符串篇

算法学习——LeetCode力扣字符串篇 344. 反转字符串 344. 反转字符串 - 力扣&#xff08;LeetCode&#xff09; 描述 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地…
阅读更多...
STM32CubeMX，定时器之定时功能，入门学习，如何设置prescaler，以及timer计算PWM输入捕获方法（重要）

STM32CubeMX，定时器之定时功能，入门学习，如何设置prescaler，以及timer计算PWM输入捕获方法（重要）

频率变小&#xff0c;周期变长 1&#xff0c;参考链接&#xff08;重要&#xff09; STM32CubeMX——定时器之定时功能&#xff08;学习使用timer定时器的设置&#xff09; STM32测量PWM信息&#xff08;学习使用设置pwm输入捕获&#xff09; 通用定时器中两个重要参数的设置心…
阅读更多...
[C# WPF] DataGrid选中行或选中单元格的背景和字体颜色修改

[C# WPF] DataGrid选中行或选中单元格的背景和字体颜色修改

问题描述 WPF中DataGrid的选中行或选中者单元格&#xff0c;在焦点失去后&#xff0c;颜色会很淡&#xff0c;很不明显&#xff0c;不容易区分。 解决方法 在失去焦点的情况下&#xff0c;如何设置行或单元格与选中的时候颜色一样&#xff1f; <DataGrid.Resources>&…
阅读更多...
【Linux】构建模块

【Linux】构建模块

&#x1f525;博客主页&#xff1a;PannLZ &#x1f38b;系列专栏&#xff1a;《Linux系统之路》 &#x1f94a;不要让自己再留有遗憾&#xff0c;加油吧&#xff01; 文章目录 构建第一个模块1模块的makefile2内核树内构建3内核树外构建 构建第一个模块 可以在两个地方构建模…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023