Py开发基础及教程 3

第7章智能租房——首页《PythonWeb开发项目教程（Flask版）（第2版）》学习目标/Target掌握房源总数展示功能，能够实现将统计的房源总数在首页中展示掌握最新房源数据展示功能，能够实现将查询的最新房源数据在首页中展示掌握热点房源数据展示功能，能够实现将查询的热点房源数据在首页中展示学习目标/Target了解智能提示搜索框的功能，能够表述智能提示搜索框的功能逻辑熟悉智能提示搜索框的前端逻辑，能够归纳用户输入和选择的数据如何传递到后端掌握智能提示搜索框的后端逻辑，能够实现根据输入的数据返回相应房源信息的功能章节概述/Summary在智能租房网站中，首页作为用户接触平台的第一入口，用于展示核心信息与智能提示搜索框等，既集中呈现最新上线和用户关注度高的优质房源，也为用户提供便捷的搜索通道，助力其快速定位心仪房源。具体而言，首页涉及四大核心功能，分别是房源总数展示、最新房源数据展示、热点房源数据展示和智能搜索功能。本章将按照功能模块，逐步讲解并实现首页的这些核心功能。目录/Contents010203房源总数展示最新房源数据展示热点房源数据展示04智能搜索房源总数展示7.1

先定一个小目标！掌握房源总数展示功能，能够实现将统计的房源总数在首页中展示7.1房源总数展示在智能租房网站的首页，智能提示搜索框下方展示了当前城市的房源总数，如图所示。7.1房源总数展示从图中可以看出，北京市的房源总数为113318。房源总数展示功能分功能说明、接口设计、后端实现和渲染模板4个部分实现房源总数展示的功能。房源总数展示1.功能说明2.接口设计3.后端实现4.渲染模板7.1房源总数展示

功能说明首页展示的房源总数直接关联着房源数据表中的记录，该表中每一条记录对应一套房源，因此房源数据表中有多少条记录就相当于总共有多少套房源。房源总数展示功能的逻辑的比较简单，首先从数据库中查询房源数据表的总记录数，然后将查询到的统计结果返回至后端，后端再将统计结果嵌入首页对应模板文件的指定位置，最终完成在页面上的展示。房源总数展示功能的实现流程如图所示。7.1房源总数展示

接口设计在接口设计时，通常需要明确请求页面、请求方式、请求地址以及返回数据四个核心要素。其中请求页面指浏览器发送请求时需要加载的目标页面；请求方式指览器向服务器发送请求或者提交资源时所采用的方式；请求地址对应用户在浏览器中输入URL的规则部分；返回数据指服务器接收并处理请求后，反馈给浏览器的响应结果。7.1房源总数展示

接口设计由于该接口仅用于首页加载房源总数，因此请求页面为index.html；考虑到仅需获取数据而无须提交内容，请求方式采用GET；首页的请求地址直接指定为根路径；返回数据为房源的总数量。房源总数接口如表所示。7.1房源总数展示接口选项说明请求页面index.html请求方式GET请求地址/返回数据数字，表示查询的房源总数量，如33980

后端实现为提升项目后期的可维护性，这里将首页模块的所有视图函数统一整合到一个蓝图中管理，具体操作为：在house项目的根目录下新建index_page.py文件，在该文件中创建专属蓝图，并结合房源总数的接口定义，编写对应的视图函数，具体代码如下所示。7.1房源总数展示fromflaskimportBlueprint,render_templatefrommodelsimportHouse#创建蓝图，蓝图的名称为包的名称index_pageindex_page=Blueprint('index_page',__name__)@index_page.route('/')defindex():house_total_num=House.query.count()#获取房源总数量

returnrender_template('index.html',num=house_total_num)

后端实现蓝图定义完之后还需要注册到程序实例中。在house项目的app.py文件中，将刚刚创建的蓝图index_page注册到app中。7.1房源总数展示fromindex_pageimportindex_pageapp.register_blueprint(index_page,url_prefix='/')#注册蓝图index_page

渲染模板为了让首页能够动态显示房源总数，且确保该数值会随着房源数据表中记录数量的增减自动更新，需要将后端视图函数传递的房源总数嵌入模板文件的指定位置。在index.html文件中，定位到class属性值为area-info的<div>标签，在该标签内部找到房源总数对应的<span>标签，并将<span>标签原有的静态内容替换为模板变量{num}}，具体代码如下所示。7.1房源总数展示<divclass="area-info"><spanstyle="color:#2980b9">当前城市:</span><spanstyle="color:#e74c3c">北京</span> <spanstyle="color:#2980b9">房源总数:</span><spanstyle="color:#e74c3c">{{num}}</span></div>最新房源数据展示7.2

先定一个小目标！掌握最新房源数据展示功能，能够实现将查询的最新房源数据在首页中展示7.2最新房源数据展示在智能租房项目中，首页房源总数下方会为用户展示最新房源数据，实时更新近期新增的优质房源信息。7.2最新房源数据展示从图中可以看出，首页总共展示了6套最新发布的房源，每套房源包括房源图片、房源所在小区、房源户型、房源面积和房源价格等信息。接下来、从功能说明、接口设计、后端实现和渲染模板4个方面来介绍实现最新房源数据展示的功能。7.2最新房源数据展示

功能说明最新房源数据展示功能旨在为用户及时呈现网站上新发布的房源信息，这部分房源信息对应数据表中最近新增的记录,，也就是发布时间较晚的数据。若要在首页展示最新的房源数据，需要从房源数据表中查询发布时间较晚的6条记录，之后将查询结果返回至后端，由后端将查询结果传递到模板文件中，最终通过模板渲染呈现到页面上。7.2最新房源数据展示

接口设计从前文可知，最新房源数据同样在首页进行展示，因此请求页面和请求地址保持不变；鉴于该功能的后端逻辑仅涉及数据获取，无须进行数据提交，因此请求方式采用GET；返回的数据为房源对象列表。最新房源数据接口如表所示。值得一提的是，因为智能租房网站中的房源图片均使用同一张图片，所以最新房源数据接口的返回数据中无须包含图片名称。接口选项说明请求页面index.html请求方式GET请求地址/返回数据房源对象列表7.2最新房源数据展示

后端实现在index()函数中增加获取最新房源数据的代码，先从房源数据表中查询最新房源数据，再将这些数据传递到模板文件中，具体代码如下所示。@index_page.route('/')defindex():house_total_num=House.query.count()#获取房源总数量

#获取最新房源TOP6house_new_list=House.query.order_by(House.publish_time.desc()).limit(6).all()returnrender_template('index.html',num=house_total_num,house_new_list=house_new_list)7.2最新房源数据展示

渲染模板为了在首页能够动态显示最新房源数据，且确保这部分会跟随房源数据表中新增记录自动更新，需要将后端视图函数传递的最新房源数据嵌入模板文件的定位置。在index.html文件中，定位到所有class属性值为col-lg-的<div>标签，保留其中一个<div>标签作为基础模板，在保留的<div>标签外部使用Jinja2的循环结构遍历后端传递的列表，依次取出每个房源对象，之后在<div>标签内部将指定标签的静态内容替换为对应的变量。[单击查看源码]热点房源数据展示7.3

先定一个小目标！掌握热点房源数据展示功能，能够实现将查询的热点房源数据在首页中展示7.3热点房源数据展示在智能租房网站的首页中，最新房源数据展示区域下方设有专门的热点房源展示区域，为用户集中呈现网站上热度较高、受关注度较高的优质房源，如图所示。7.3热点房源数据展示从图中可以看出，首页总共展示了4套热点房源，每套房源包括房源图片、房源所在小区、房源户型、房源面积、房源热度和房源价格等信息。热点房源数据展示功能分功能说明、接口设计、后端实现和渲染模板4个部分实现热点房源数据展示的功能。房源总数展示1.功能说明2.接口设计3.后端实现4.渲染模板7.3热点房源数据展示

功能说明热点房源数据是指网站上用户浏览量较高的房源信息。与最新房源展示不同，热点房源数据按照房源的浏览量进行筛选。热点房源数据展示的功能逻辑是，首先需要从房源数据表中查询出浏览量较高的前4条记录，然后将查询结果返回至后端，由后端将查询结果传递到模板文件中，最终通过模板渲染呈现到页面上。7.3热点房源数据展示

接口设计从前文的功能说明可知，热点房源数据同样在首页进行展示，因此请求页面和请求地址保持不变；鉴于该功能的后端逻辑仅涉及数据获取，无须进行数据提交，因此请求方式采用GET；返回的数据为房源对象列表。热点房源数据接口如表所示。7.3热点房源数据展示接口选项说明请求页面index.html请求方式GET请求地址/返回数据房源对象列表

后端实现热点房源数据展示功能的后端逻辑：先从房源数据表中查询热点房源数据，再将这些数据传递到模板文件中。7.3热点房源数据展示@index_page.route('/')defindex():house_total_num=House.query.count()#获取房源总数量#获取最新房源TOP6house_new_list=House.query.order_by( House.publish_time.desc()).limit(6).all()#获取最热房源TOP4house_hot_list=House.query.order_by( House.page_views.desc()).limit(4).all()returnrender_template('index.html',num=house_total_num,house_new_list=house_new_list,house_hot_list=house_hot_list)

渲染模板在index.html文件中，定位到class属性值为collg-3的<div>标签，保留第一个标签并删除其他标签，在保留的标签外部使用循环结构遍历后端传递的列表，依次取出每个房源对象，将展示房源信息对应标签的内容替换为变量。7.3热点房源数据展示[单击查看源码]智能搜索7.4

先定一个小目标！了解智能提示搜索框的功能说明，能够说出智能提示搜索框的功能逻辑7.4.1智能搜索功能说明智能租房中，首页上方展示了一个智能提示搜索框。7.4.1智能搜索功能说明搜索选项输入框提交按钮

地区搜索地区搜索指的是根据房源所在区域、商圈或小区进行搜索。用户在输入框中输入关键词时，网站会自动匹配包含关键词的地理信息。例如,当用户在输入框中输入"昌平”，输入框下方会实时弹出包含“昌平”字眼的提示列表，列表中可能呈现“昌平”相关的地区信息，如图所示。7.4.1智能搜索功能说明

地区搜索当用户在输入框中输入的查询信息未能在数据库的房源数据中查到时，首页顶部会以弹窗形式告知用户未找到相关信息。7.4.1智能搜索功能说明

户型搜索户型搜索指的是根据房源的户型进行搜索。用户在输入框输人“x室”“x厅”或“x室x厅”等关键词时,网站会自动匹配包含关键词的户型信息。例如,将搜索选项切换成户型搜索，之后在输入框中输入“1室”,输入框下方会实时弹出包含“1室”字眼的提示列表，列表中可能呈现"1室"相关的户型信息,如图所示。7.4.1智能搜索功能说明提示列表展示了与“1室”相关的3条房源信息，每条房源信息包括房源户型和该户型包含房源的总套数。值得一提的是，智能提示搜索框除了支持中文搜索之外，也支持英文搜索。

先定一个小目标！熟悉智能提示搜索框的前端逻辑，能够归纳用户输入和选择的数据如何传递到后端7.4.2前端逻辑说明在智能租房项目中，智能搜索功能的前端逻辑已完成开发，相关代码均整合在index.html文件中。为帮助大家全面理解这一功能的完整业务流程，接下来，从定义智能提示搜索框、选择搜索选项、监听输入框状态和查询关键字这4个方面对智能搜索功能的前端逻辑进行介绍。7.4.2前端逻辑说明

定义智能提示搜索框智能提示搜索框由搜索选项、输入框和提交按钮组成。其中搜索选项由<ul>标签定义；输入框和提交按钮由<form>标签定义。<ulclass="navnav-tabsmy-nav-tab"style="margin:15px000"><liclass="chanle1active"><span>地区搜索</span></li><liclass="chanle2"><span>户型搜索</span></li></ul>7.4.2前端逻辑说明

定义智能提示搜索框输入框和提交按钮的代码如下所示。<formclass="form-inline"role="form"id="my-form"action="/query"><divclass="form-group"><labelclass="sr-only"for="txt">名称</label> <inputtype="text"class="form-control"id="txt"name='addr'placeholder="请输入区域、商圈或小区名开始找房"></div><buttontype="submit"class="my-btnbtnbtn-info"id="btn">提交</button><ulid="list"class="list-group"></ul></form>7.4.2前端逻辑说明

选择搜索选项当用户在“地区搜索”与“户型搜索”选项间进行切换时，智能提示搜索框会呈现相应的视觉反馈，选中的搜索选项背景颜色将从灰色切换为蓝色，同时输入框的提示文字也会随之改变，这个操作是通过监听用户的单击事件完成的。当用户选择某个搜索选项触发单击事件后，程序会自动执行以下3项操作。(1)为当前选中的搜索选项标签添加active类名，以触发背景颜色的变化。(2)为<input>标签设置对应的name属性，用于区分地区搜索或户型搜索。(3)修改<input>标签的placeholder属性值，用于更新输入框的提示文字。[单击查看源码]7.4.2前端逻辑说明

监听输入框状态监听输入框状态用于判断用户输入的内容类型是中文还是英文，并据此触发不同的搜索逻辑。当用户在输入框中输入汉语拼音时，则程序会暂时住输入框不进行实时搜索，直到汉语拼音转换成汉字后才会获取输入的中文内容并启动搜索；当用户在输入框中输入英文字母时，程序会直接获取输入的内容并启动搜索。监听输入框状态的逻输如图所示。7.4.2前端逻辑说明

监听输入框状态针对输入框的不同输入法状态，程序采用了差异化的事件监听机制。当输入框处于中文输入法状态时，需要同时监听compositionstart事件和composiionend事件，其中compositionstart事件会在中文输入法状态下开始输入时触发，compositionend事件会在中文输入法状态下完成输入时触发；当输入框处于英文输入法状态时，仅仅使用input事件进行实时监听，该事件会在用户输入英文字母的过程中即时触发。[单击查看源码]7.4.2前端逻辑说明

查询关键字前端获取用户输入的关键字后，需要向后端发送请求，用于从数据库中查询与该关键字匹配的内容，并获取查询结果。查询关键字的逻辑如图所示。7.4.2前端逻辑说明

查询关键字查询关键字的完整流程为：前端取用户输入的关键字后，首先需要获取搜索选项对应字段的active属性，确定当前选中的搜索类型。若active属性的值为addr，则搜索类型为地区搜索。若active属性的值为rooms，则搜索类型为户型搜索。然后向后端发送AJAX请求，将关键字和active属性值作为请求参数一同传递，后端接收请求后，会在关联的视图函数中根据请求参数到数据库中进行针对性的查询。[单击查看源码]7.4.2前端逻辑说明

先定一个小目标！掌握智能提示搜索框的后端逻辑，能够实现根据输入的数据返回相应房源信息的功能7.4.3后端逻辑实现智能搜索功能的前端代码已实现核心交互逻