0.效果展示
1.后端接口
house.py部分接口：
# GET /api/v1.0/houses?sd=2017-12-01&ed=2017-12-31&aid=10&sk=new&p=1
@api.route("/houses")
def get_house_list():
"""获取房屋的列表信息（搜索页面）"""
start_date = request.args.get("sd", "") # 用户想要的起始时间
end_date = request.args.get("ed", "") # 用户想要的结束时间
area_id = request.args.get("aid", "") # 区域编号
sort_key = request.args.get("sk", "new") # 排序关键字
page = request.args.get("p") # 页数
# 处理时间
try:
if start_date:
start_date = datetime.strptime(start_date, "%Y-%m-%d")
if end_date:
end_date = datetime.strptime(end_date, "%Y-%m-%d")
if start_date and end_date:
assert start_date <= end_date
except Exception as e:
current_app.logger.error(e)
return jsonify(errno=RET.PARAMERR, errmsg="日期参数有误")
# 判断区域id
if area_id:
try:
area = Area.query.get(area_id)
except Exception as e:
current_app.logger.error(e)
return jsonify(errno=RET.PARAMERR, errmsg="区域参数有误")
# 处理页数
try:
page = int(page)
except Exception as e:
current_app.logger.error(e)
page = 1
# 获取缓存数据
redis_key = "house_%s_%s_%s_%s" % (start_date, end_date, area_id, sort_key)
try:
resp_json = redis_store.hget(redis_key, page)
except Exception as e:
current_app.logger.error(e)
else:
if resp_json:
return resp_json, 200, {"Content-Type": "application/json"}
# 过滤条件的参数列表容器
filter_params = []
# 填充过滤参数
# 时间条件
conflict_orders = None
try:
if start_date and end_date:
# 查询冲突的订单
conflict_orders = Order.query.filter(Order.begin_date <= end_date, Order.end_date >= start_date).all()
elif start_date:
conflict_orders = Order.query.filter(Order.end_date >= start_date).all()
elif end_date:
conflict_orders = Order.query.filter(Order.begin_date <= end_date).all()
except Exception as e:
current_app.logger.error(e)
return jsonify(errno=RET.DBERR, errmsg="数据库异常")
if conflict_orders:
# 从订单中获取冲突的房屋id
conflict_house_ids = [order.house_id for order in conflict_orders]
# 如果冲突的房屋id不为空，向查询参数中添加条件
if conflict_house_ids:
filter_params.append(House.id.notin_(conflict_house_ids))
# 区域条件
if area_id:
filter_params.append(House.area_id == area_id)
# 查询数据库
# 补充排序条件
if sort_key == "booking": # 入住做多
house_query = House.query.filter(*filter_params).order_by(House.order_count.desc())
elif sort_key == "price-inc":
house_query = House.query.filter(*filter_params).order_by(House.price.asc())
elif sort_key == "price-des":
house_query = House.query.filter(*filter_params).order_by(House.price.desc())
else: # 新旧
house_query = House.query.filter(*filter_params).order_by(House.create_time.desc())
# 处理分页
try:
# 当前页数 每页数据量 自动的错误输出
page_obj = house_query.paginate(page=page, per_page=constants.HOUSE_LIST_PAGE_CAPACITY, error_out=False)
except Exception as e:
current_app.logger.error(e)
return jsonify(errno=RET.DBERR, errmsg="数据库异常")
# 获取页面数据
house_li = page_obj.items
houses = []
for house in house_li:
houses.append(house.to_basic_dict())
# 获取总页数
total_page = page_obj.pages
resp_dict = dict(errno=RET.OK, errmsg="OK", data={"total_page": total_page, "houses": houses, "current_page": page})
resp_json = json.dumps(resp_dict)
if page <= total_page:
# 设置缓存数据
redis_key = "house_%s_%s_%s_%s" % (start_date, end_date, area_id, sort_key)
# 哈希类型
try:
# redis_store.hset(redis_key, page, resp_json)
# redis_store.expire(redis_key, constants.HOUES_LIST_PAGE_REDIS_CACHE_EXPIRES)
# 创建redis管道对象，可以一次执行多个语句
pipeline = redis_store.pipeline()
# 开启多个语句的记录
pipeline.multi()
pipeline.hset(redis_key, page, resp_json)
pipeline.expire(redis_key, constants.HOUES_LIST_PAGE_REDIS_CACHE_EXPIRES)
# 执行语句
pipeline.execute()
except Exception as e:
current_app.logger.error(e)
return resp_json, 200, {"Content-Type": "application/json"}
2.前端js
search.js
var cur_page = 1; // 当前页
var next_page = 1; // 下一页
var total_page = 1; // 总页数
var house_data_querying = true; // 是否正在向后台获取数据
// 解析url中的查询字符串
function decodeQuery(){
var search = decodeURI(document.location.search);
return search.replace(/(^\?)/, '').split('&').reduce(function(result, item){
values = item.split('=');
result[values[0]] = values[1];
return result;
}, {});
}
// 更新用户点选的筛选条件
function updateFilterDateDisplay() {
var startDate = $("#start-date").val();
var endDate = $("#end-date").val();
var $filterDateTitle = $(".filter-title-bar>.filter-title").eq(0).children("span").eq(0);
if (startDate) {
var text = startDate.substr(5) + "/" + endDate.substr(5);
$filterDateTitle.html(text);
} else {
$filterDateTitle.html("入住日期");
}
}
// 更新房源列表信息
// action表示从后端请求的数据在前端的展示方式
// 默认采用追加方式
// action=renew 代表页面数据清空从新展示
function updateHouseData(action) {
var areaId = $(".filter-area>li.active").attr("area-id");
if (undefined == areaId) areaId = "";
var startDate = $("#start-date").val();
var endDate = $("#end-date").val();
var sortKey = $(".filter-sort>li.active").attr("sort-key");
var params = {
aid:areaId,
sd:startDate,
ed:endDate,
sk:sortKey,
p:next_page
};
$.get("/api/v1.0/houses", params, function(resp){
house_data_querying = false;
if ("0" == resp.errno) {
if (0 == resp.data.total_page) {
$(".house-list").html("暂时没有符合您查询的房屋信息。");
} else {
total_page = resp.data.total_page;
if ("renew" == action) {
cur_page = 1;
$(".house-list").html(template("house-list-tmpl", {houses:resp.data.houses}));
} else {
cur_page = next_page;
$(".house-list").append(template("house-list-tmpl", {houses: resp.data.houses}));
}
}
}
})
}
$(document).ready(function(){
var queryData = decodeQuery();
var startDate = queryData["sd"];
var endDate = queryData["ed"];
$("#start-date").val(startDate);
$("#end-date").val(endDate);
updateFilterDateDisplay();
var areaName = queryData["aname"];
if (!areaName) areaName = "位置区域";
$(".filter-title-bar>.filter-title").eq(1).children("span").eq(0).html(areaName);
// 获取筛选条件中的城市区域信息
$.get("/api/v1.0/areas", function(data){
if ("0" == data.errno) {
// 用户从首页跳转到这个搜索页面时可能选择了城区，所以尝试从url的查询字符串参数中提取用户选择的城区
var areaId = queryData["aid"];
// 如果提取到了城区id的数据
if (areaId) {
// 遍历从后端获取到的城区信息，添加到页面中
for (var i=0; i<data.data.length; i++) {
// 对于从url查询字符串参数中拿到的城区，在页面中做高亮展示
// 后端获取到城区id是整型，从url参数中获取到的是字符串类型，所以将url参数中获取到的转换为整型，再进行对比
areaId = parseInt(areaId);
if (data.data[i].aid == areaId) {
$(".filter-area").append('<li area-id="'+ data.data[i].aid+'" class="active">'+ data.data[i].aname+'</li>');
} else {
$(".filter-area").append('<li area-id="'+ data.data[i].aid+'">'+ data.data[i].aname+'</li>');
}
}
} else {
// 如果url参数中没有城区信息，不需要做额外处理，直接遍历展示到页面中
for (var i=0; i<data.data.length; i++) {
$(".filter-area").append('<li area-id="'+ data.data[i].aid+'">'+ data.data[i].aname+'</li>');
}
}
// 在页面添加好城区选项信息后，更新展示房屋列表信息
updateHouseData("renew");
// 获取页面显示窗口的高度
var windowHeight = $(window).height();
// 为窗口的滚动添加事件函数
window.onscroll=function(){
// var a = document.documentElement.scrollTop==0? document.body.clientHeight : document.documentElement.clientHeight;
var b = document.documentElement.scrollTop==0? document.body.scrollTop : document.documentElement.scrollTop;
var c = document.documentElement.scrollTop==0? document.body.scrollHeight : document.documentElement.scrollHeight;
// 如果滚动到接近窗口底部
if(c-b<windowHeight+50){
// 如果没有正在向后端发送查询房屋列表信息的请求
if (!house_data_querying) {
// 将正在向后端查询房屋列表信息的标志设置为真，
house_data_querying = true;
// 如果当前页面数还没到达总页数
if(cur_page < total_page) {
// 将要查询的页数设置为当前页数加1
next_page = cur_page + 1;
// 向后端发送请求，查询下一页房屋数据
updateHouseData();
} else {
house_data_querying = false;
}
}
}
}
}
});
$(".input-daterange").datepicker({
format: "yyyy-mm-dd",
startDate: "today",
language: "zh-CN",
autoclose: true
});
var $filterItem = $(".filter-item-bar>.filter-item");
$(".filter-title-bar").on("click", ".filter-title", function(e){
var index = $(this).index();
if (!$filterItem.eq(index).hasClass("active")) {
$(this).children("span").children("i").removeClass("fa-angle-down").addClass("fa-angle-up");
$(this).siblings(".filter-title").children("span").children("i").removeClass("fa-angle-up").addClass("fa-angle-down");
$filterItem.eq(index).addClass("active").siblings(".filter-item").removeClass("active");
$(".display-mask").show();
} else {
$(this).children("span").children("i").removeClass("fa-angle-up").addClass("fa-angle-down");
$filterItem.eq(index).removeClass('active');
$(".display-mask").hide();
updateFilterDateDisplay();
}
});
$(".display-mask").on("click", function(e) {
$(this).hide();
$filterItem.removeClass('active');
updateFilterDateDisplay();
cur_page = 1;
next_page = 1;
total_page = 1;
updateHouseData("renew");
});
$(".filter-item-bar>.filter-area").on("click", "li", function(e) {
if (!$(this).hasClass("active")) {
$(this).addClass("active");
$(this).siblings("li").removeClass("active");
$(".filter-title-bar>.filter-title").eq(1).children("span").eq(0).html($(this).html());
} else {
$(this).removeClass("active");
$(".filter-title-bar>.filter-title").eq(1).children("span").eq(0).html("位置区域");
}
});
$(".filter-item-bar>.filter-sort").on("click", "li", function(e) {
if (!$(this).hasClass("active")) {
$(this).addClass("active");
$(this).siblings("li").removeClass("active");
$(".filter-title-bar>.filter-title").eq(2).children("span").eq(0).html($(this).html());
}
})
})
3.前端html
search.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>爱家-房源</title>
<link href="/static/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="/static/css/reset.css" rel="stylesheet">
<link href="/static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">
<link href="/static/css/ihome/main.css" rel="stylesheet">
<link href="/static/css/ihome/search.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="top-bar">
<div class="nav-bar">
<h3 class="page-title">房 源</h3>
<a class="nav-btn fl" href="/"><span><i class="fa fa-angle-left fa-2x"></i></span></a>
</div>
<ul class="filter-title-bar">
<li class="filter-title">
<span>入住日期</span>
<span><i class="fa fa-angle-down"></i></span>
<span class="split-line fr">|</span>
</li>
<li class="filter-title">
<span>位置区域</span>
<span><i class="fa fa-angle-down"></i></span>
<span class="split-line fr">|</span>
</li>
<li class="filter-title">
<span>最新上线</span>
<span><i class="fa fa-angle-down"></i></span>
</li>
</ul>
<div class="filter-item-bar">
<div class="filter-item filter-date">
<div class="input-daterange input-group">
<input type="text" class="input-sm form-control" id="start-date" />
<span class="input-group-addon">至</span>
<input type="text" class="input-sm form-control" id="end-date" />
</div>
</div>
<ul class="filter-item filter-area">
</ul>
<ul class="filter-item filter-sort">
<li class="active" sort-key="new">最新上线</li>
<li sort-key="booking">入住最多</li>
<li sort-key="price-inc">价格 低-高</li>
<li sort-key="price-des">价格 高-低</li>
</ul>
</div>
</div>
<div class="display-mask"></div>
<ul class="house-list">
</ul>
<script id="house-list-tmpl" type="text/html">
{{each houses as house}}
<li class="house-item">
<a href="/detail.html?id={{house.house_id}}"><img src="{{house.img_url}}"></a>
<div class="house-desc">
<div class="landlord-pic"><img src="{{house.user_avatar}}"></div>
<div class="house-price">￥<span>{{(house.price/100.0).toFixed(0)}}</span>/晚</div>
<div class="house-intro">
<span class="house-title">{{house.title}}</span>
<em>出租{{house.room_count}}间 - {{house.order_count}}次入住 - {{house.address}}</em>
</div>
</div>
</li>
{{/each}}
</script>
<div class="footer">
<p><span><i class="fa fa-copyright"></i></span>爱家租房 享受家的温馨</p>
</div>
</div>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="/static/js/template.js"></script>
<script src="/static/js/ihome/search.js"></script>
</body>
</html>
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
