图文可以做网站设计吗,最新微网站建设价格,东莞网站建设营销服务平台,怎么免费网做百度收录的网站学习目标 掌握房源总数展示功能#xff0c;能够实现将统计的房源总数在首页中展示 掌握最新房源数据展示功能#xff0c;能够实现将查询的最新房源数据在首页中展示 掌握热点房源数据展示功能#xff0c;能够实现将查询的热点房源数据在首页中展示 了解智能提示搜索框的功…学习目标 掌握房源总数展示功能能够实现将统计的房源总数在首页中展示 掌握最新房源数据展示功能能够实现将查询的最新房源数据在首页中展示 掌握热点房源数据展示功能能够实现将查询的热点房源数据在首页中展示 了解智能提示搜索框的功能说明能够说出智能提示搜索框的功能逻辑 熟悉智能提示搜索框的前端逻辑能够归纳用户输入和选择的数据如何传递到后端 掌握智能提示搜索框的后端逻辑能够实现根据输入的数据返回相应房源信息的功能
为方便用户能够快速、便捷地查找到心仪的房源智能租房项目的首页提供了房源总数展示、最新房源展示、热点房源展示和智能搜索这几个功能其中智能搜索功能可以帮助用户按地区和户型筛选出符合条件的房源。本章将对房源总数展示、最新房源数据展示、热点房源数据展示和智能搜索进行介绍。
7.1 房源总数展示
在智能租房项目中首页的智能提示搜索框下方展示了当前城市的房源总数。 从图中可以看出南昌市的房源总数为113318。
房源总数展示功能分功能分析、接口设计、后端实现和渲染模板4个部分实现。 1.功能分析
房源总数展示功能的逻辑比较简单只需要从数据库中查询房源数据表的总数量然后将查询结果返回至后端再由后端渲染到模板文件中即可。房源总数展示功能的实现流程如图所示。 2.接口设计
在设计房源总数接口时需要明确请求页面、请求方式、请求地址以及返回数据。 请求页面指浏览器发送请求要加载的页面。 请求方式指浏览器向智能租房服务器发送请求或者提交资源时使用的方法。 请求地址指用户在浏览器输入的URL。 返回数据指智能租房服务器接收请求后返回的响应结果。
接口描述说明请求页面index.html请求方式GET请求地址/返回数据数字表示查询的房源总数量如33980
3.后端实现
在项目的根目录下新建文件app.py在该文件中创建蓝图并结合房源总数接口定义视图函数。
from flask import Flask, render_template
from setting import Config
import pymysql as ps
appFlask(__name__)
app.config.from_object(Config)app.route(/)
def test():# 获得数据库连接con ps.connect(host127.0.0.1, port3306,userroot, passwordadmin,dbhouse, charsetutf8)# 获得游标cursor con.cursor()# 执行查询操作cursor.execute(select count(*) from house_info )rows cursor.fetchall()numsrows[0]return render_template(index.html,numnums[0])if __name__ __main__:app.run(debugTrue)
4.渲染模板
在index.html文件中查询class属性值为area-info的div标签在该标签下找到房源总数对应的span标签并将span标签的内容替换为{{ num }}。
!-- Main Content --
div classcontainer!--定位数量--div classrowdiv classcol-lg-12div classarea-infospan stylecolor:#2980b9当前城市:/spanspan stylecolor:#e74c3c南昌/spannbspspan stylecolor:#2980b9房源总数:/spanspan stylecolor:#e74c3c{{ num }}/span/div/div/div!--当前城市--div classrow info-line!-- 模块1标题 --div classcol-lg-12 tj-headerh3为您为家/h3div classdescribespan为您精准定位当前城市房源信息/spanspan classfloat-righta href/list/pattern/1stylecolor: #3498db; padding-right: 5px更多南昌房源/a/span/div/div
7.2 最新房源数据展示
在智能租房项目中首页房源总数下方会为用户展示最新房源数据。
从图中可以看出首页总共展示了6套最新的房源数据每套房源信息包括房源图片、房源地址、房源户型、房源面积和房源价格。分功能分析、接口设计、后端实现和渲染模板4个部分实现最新房源数据展示的功能。 1.功能分析
最新房源数据为最近新添加的房源数据若希望在首页中展示最新的房源数据需要从数据库中查询发布时间较晚的6条房源数据之后将查询结果返回至后端由后端渲染到模板文件中即可。
2.接口设计
最新房源数据接口设计如表所示。
接口描述说明请求页面index.html请求方式GET请求地址/返回数据房源对象列表
因为项目中的房源图片均使用同一张图片所以返回的数据中无需包含图片名称。
3.后端实现
因为最新房源数据仍然显示在首页上所以会将最新房源数据展示功能的逻辑代码写到视图函数index()中。在index()函数中增加最新房源数据展示的逻辑代码具体如下所示。
app.route(/)
def index():# 查询总房源数量cursor.execute(select count(*) from house_info )rows cursor.fetchall()# 总房源数量numsrows[0]# 查询所有房源中时间最新的6条记录cursor.execute(select * from house_info order by publish_time desc limit 0,6)housescursor.fetchall()return render_template(index.html,numnums[0],house_new_listhouses)
4.渲染模板
为了能够将最新房源数据渲染到首页这里我们需要将模板变量house_new_list插入到模板文件的指定位置。在index.html文件中查询class属性值为col-lg-4的所有div标签保留第一个div标签并删除其他div标签在保留的div标签外部使用循环结构遍历house_new_list取出每套房源数据依次将指定标签的内容替换为相应的模板变量。
!-- 模块1信息展示 --
{% for house in house_new_list %}
div classcol-lg-4div classcoursediva href/house/{{ house[0] }}img classimg-fluid img-box src/static/img/house-bg1.jpgalt/a/divdiv classcourse-infospan{{ house[9] }}/span/divdiv classcourse-info1span{{ house[2] }} - {{ house[3] }}平方米/spanspan classprice float-rightnbsp{{ house[4] }}/span/div/div
/div
{% endfor %}
7.3 热点房源数据展示
智能租房项目中首页最新房源下方会为用户展示热点房源数据。 首页总共展示了4套热点房源数据每套房源数据包括房源图片、房源地址、房源户型、房源面积、房源热度和房源价格。
热点房源数据展示功能分功能分析、接口设计、后端实现和渲染模板4个部分实现。 1.功能分析
热点房源数据为浏览量较高的部分数据。热点房源数据展示功能与最新房源数据展示功能类似不同的是热点房源数据展示功能用到的房源数据是根据房源的浏览量筛选出来的而最新房源数据展示功能用到的房源数据是根据房源的发布时间筛选出来的。 若希望在首页中展示热点房源数据需要从数据库中查询浏览量较高的前4条房源数据之后将查询结果返回至后端由后端渲染到模板文件中即可。
2.接口设计
热点房源数据同样在智能租房的首页进行展示因此请求页面仍然为index.html请求地址为“/”由于热点房源数据展示功能的后端逻辑只涉及获取房源数据所以请求方式为GET返回的数据为房源对象列表每套房源包括房源id、房源地址、房源户型、房源面积、房源价格和房源热度。
接口描述说明请求页面index.html请求方式GET请求地址/返回数据房源对象列表
3.后端实现
热点房源数据展示的后端逻辑首先从数据库中查询所有的房源数据并按照浏览量进行降序排列然后取出位于前4行的房源数据渲染到模板文件中。因为热点房源数据仍然显示在首页上所以会将热点房源数据展示功能的逻辑代码写到视图函数index()中。
from flask import Flask, render_template
from setting import Config
import pymysql as ps
appFlask(__name__)
app.config.from_object(Config)
# 获得数据库连接
con ps.connect(host127.0.0.1, port3306,userroot, passwordadmin,dbhouse, charsetutf8)
# 获得游标
cursor con.cursor()app.route(/)
def index():# 查询总房源数量cursor.execute(select count(*) from house_info )rows cursor.fetchall()# 总房源数量numsrows[0]# 查询所有房源中时间最新的6条记录cursor.execute(select * from house_info order by publish_time desc limit 0,6)housescursor.fetchall()# 查询所欲房源中热点房源最高的4条记录cursor.execute(select * from house_info order by page_views desc limit 0,4)pagescursor.fetchall()return render_template(index.html,numnums[0],house_new_listhouses,house_hot_listpages)if __name__ __main__:app.run(debugTrue)
4.渲染模板
后端代码已经获取了热点房源数据接下来就需要将热点房源数据渲染到模板文件index.html中。在index.html文件中查询class属性值为col-lg-3的div标签保留第一个标签并删除其他标签在保留的标签外部使用循环结构遍历house_hot_list取出每套房源数据依次将指定标签的内容替换为指定的模板变量。
!-- 模块2内容 --
{% for house in house_hot_list %}
div classcol-lg-3div classcoursediva href/house/{{ house[0] }}img classimg-fluid img-box src/static/img/house-bg1.jpgalt/a/divdiv classcourse-infospan{{ house[9] }}/span/divdiv classcourse-info1span{{ house[2] }} - {{ house[3] }}平方米/spanspan stylecolor: #3498dbnbspnbspi classfa fa-heartaria-hiddentruenbsp热度{{ house[16] }}/i/spanspan classprice float-right{{ house[4] }}/span/div/div
/div
{% endfor %}
7.4 智能搜索
7.4.1 智能搜索功能说明
智能租房中首页上方展示了一个智能提示搜索框。 1.地区搜索
地区搜索是根据房源所在小区进行搜索用户在输入框中输入的查询信息可以是地区或小区名称。例如在智能搜索框中输入“昌平”此时输入框下方显示了包含“昌平”字眼的提示列表。 当用户输入的查询信息在智能租房中查询不到时首页顶部会以弹框形式告知用户未找到相关房源。 2.户型搜索
户型搜索是根据房源的户型进行搜索用户输入的查询信息可以是“x室”、“x厅”或“x室x厅”。例如将智能提示搜索框中的搜索选项切换成户型搜索之后在输入框中输入“1室”此时输入框下方显示了包含“1室”字眼的提示列表。 提示列表罗列了与查询信息“1室”相关的3条房源信息每条房源信息包括房源户型和该户型包含房源的总套数。值得一提的是智能提示搜索框除了支持中文搜索之外也支持英文搜索。
7.4.2 前端逻辑说明
智能租房已经实现了智能搜索的前端逻辑为了让大家能够快速理解智能搜索的业务逻辑我们也需要对智能搜索功能的前端逻辑有所了解。智能搜索的前端逻辑代码均位于index.html文件中。
1.定义智能提示搜索框
智能提示搜索框由搜索选项、输入框和提交按钮组成其中搜索选项由ul标签定义输入框和提交按钮由form标签定义。
ul classnav nav-tabs my-nav-tab stylemargin:15px 0 0 0li classchanle1 activespan地区搜索/span/lili classchanle2span户型搜索/span/li
/ul
输入框和提交按钮的代码如下所示。
form classform-inline roleform idmy-form action/querydiv classform-grouplabel classsr-only fortxt名称/labelinput typetext classform-control idtxt nameaddr placeholder请输入区域、商圈或小区名开始找房/divbutton typesubmit classmy-btn btn btn-info idbtn提交/buttonul idlist classlist-group/ul
/form
2.选择搜索选项
当用户选择地区搜索或户型搜索选项后在前端页面中可以看到对应的背景颜色由灰色变为蓝色输入框的提示信息也跟着发生了变化。 选择搜索选项是通过监听用户点击事件完成的当触发点击事件后会执行3个操作分别是给选中选项的标签添加一个类名active、给input标签添加name属性、修改input标签的placholder属性值。
// 由户型搜索切换至地区搜索或者重复点击地区搜索
$(.chanle1).on(click, function () {// 用于地区搜索重复点击的初始化if ($(.chanle1).hasClass(active)) {$(.chanle1).removeClass(active);$(#txt).attr(name, );$(#txt).attr(placeholder, )}// 移除户型搜索的样式$(.chanle2).removeClass(active);// 重新设置选中字段和input标签的属性$(.chanle1).addClass(active);$(#txt).attr(name, addr);$(#txt).attr(placeholder, 请输入区域、商圈或小区名开始找房);
});// 由地区搜索切换至户型搜索或者重复点击户型搜索
$(.chanle2).on(click, function () {// 用于户型搜索重复点击的初始化if ($(.chanle2).hasClass(active)) {$(.chanle2).removeClass(active);$(#txt).attr(name, );$(#txt).attr(placeholder, )}// 移除地区搜索的样式$(.chanle1).removeClass(active);// 重新设置选中字段和input标签的属性$(.chanle2).addClass(active);$(#txt).attr(name, rooms);$(#txt).attr(placeholder, 请输入户型开始找房例如:1室1厅);
});
3.监听输入框状态 当输入框状态为中文输入法时需要使用compositionstart事件和compositionend事件同步监听其中compositionstart事件会在中文输入法状态开始输入时触发compositionend事件会在中文输入法输入完成时触发当输入框状态为英文输入法时使用input事件同步监听。
// 输入框的书写逻辑
var oTxt document.getElementById(txt); // 输入框
var oBtn document.getElementById(btn); // 提交按钮
var oList document.getElementById(list);// 提示列表// 设置锁true表示锁住输入框false表示解锁输入框
var cpLock false;// 中文搜索监听compositionstart事件如果触发该事件就锁住输入框
$(#txt).on(compositionstart, function () {cpLock true;
});// 中文搜索监听compositionend事件如果触发该事件就解锁输入框
$(#txt).on(compositionend, function () {cpLock false;var keyWord oTxt.value;var resultList searchByIndexOf(keyWord);
});// 英文搜索监听input事件用于处理字母搜索
$(#txt).on(input, function () {if (!cpLock) {var keyWord oTxt.value;var resultList searchByIndexOf(keyWord);}
});
4.查询关键字
前端获取了关键字后需要向后端发送请求用于从数据库中查询匹配关键字的内容并获取查询后的结果。 // 搜索关键字
function searchByIndexOf(keyWord) {$(.my-nav-tab li).each(function (index, element) {if ($(this).hasClass(active)) {var info $(this).text();data {kw: keyWord, info: info};$.ajax({url: /search/keyword/,type: post,dataType: json,data: data,success: function (data) { // {code0, info[]}if (data[code] 0) {warning_str 未找到关于 keyWord 的房屋信息;alert(warning_str)}if (data[code] 1) { // {code1, info[{t_name字段的名字 例如东城-xxx-xxxx num108},{},{}]}list data[info];console.log(search, list);oList.innerHTML ;var item null;for (var i 0; i 9; i) {item document.createElement(li);item.setAttribute(class, list-group-item li_style);item.setAttribute(title, list[i][t_name]);li_text list[i][t_name] span classbadge float-right大约有 list[i][num] 套房/span;console.log(li_text);item.innerHTML li_text;oList.appendChild(item);info_to_txt();}return list;}}});}});
}
7.4.3 后端逻辑实现
智能提示搜索框的前端代码实现了将用户选择的搜索选项和搜索关键字发送到后端当后端接收到前端发送的请求后便会根据搜索关键字到数据库中查询相关的房源数据。智能搜索接口设计如下。
接口描述说明请求方式GET请求地址/请求参数{kw:xxx,info:地区搜索}或者{kw:xxx,info:户型搜索}返回数据房源对象列表
智能搜索接口返回的数据是JSON数据。
{code: 1, info: [{t_name: 朝阳-朝阳公园-观湖国际, num: 100},……]
}code表示查询成功标志位支持两种取值0和1其中0代表查询失败1代表查询成功info表示查询到的房源数据info数组中包含零个或若干个JSON对象每个JSON对象包含两个键值对其中键t_name表示查询到的房源所在小区其类型为字符串键num表示房源总套数其类型为整数。
在app.py文件中定义视图函数search_kw()用于获取用户输入的关键字和用户选择的搜索选项根据获取的查询条件向数据查询房源数据并将查询的数据进行返回。
# 关键字搜索
# 完成查询关键字的功能
# 1. 获取前端传递过来的查询参数 {kw: keyWord, info: info} kw查询关键字 info查询字段 使用request提取参数信息
# 2. 根据查询参数 过滤房源信息 address 包含三里屯的房源
# 3. 使用group_by 对address字段进行分组
# 4. 使用count来统计 相同地址下的房源数量
# 5. 使用order_by 根据房源的数量进行排序 并把它换成降序排序
# 6. 使用limit 获取数据的前9行
# 7. 组装数据 完成前后端的交互
from flask import request,jsonify
app.route(/search/keyword/,methods[POST])
def search_kw():kw request.form[kw] # 获取搜索关键字info request.form[info] # 获取用户选择的搜索选项if info 地区搜索:# 根据关键字进行模糊查询将查询出来的记录按地址进行分组按数量进行降序排序取前9条记录sqlSELECT address,COUNT(*) FROM house_info WHERE address LIKE %s GROUP BY address ORDER BY COUNT(*) DESC LIMIT 0,9;cursor.execute(sql,(%kw%))result cursor.fetchall()if len(result): # 有查询结果data []for i in result:# 将查询的房源数据添加到data列表中data.append({t_name: i[0], num: i[1]})return jsonify({code: 1, info: data})else: # 没有查询结果return jsonify({code: 0, info: []})if info 户型搜索:# 根据关键字进行模糊查询将查询出来的记录按地址进行分组按数量进行降序排序取前9条记录sql SELECT rooms,COUNT(*) FROM house_info WHERE rooms LIKE %s GROUP BY rooms ORDER BY COUNT(*) DESC LIMIT 0,9;cursor.execute(sql, (%kw%))result cursor.fetchall()if len(result):data []for i in result:data.append({t_name: i[0], num: i[1]})return jsonify({code: 1, info: data})else:return jsonify({code: 0, info: []})
本章小结
本章围绕智能租房项目首页模块的功能进行了介绍包括房源总数展示、最新房源数据展示、热点房源数据展示和智能搜索。通过学习本章的内容希望读者能够体会到前端与后端的交互过程熟练地应用蓝图和视图函数。
