0.效果展示

在这里插入图片描述

1.重点总结

1）当用户访问首页时，开始加载页面信息，此时index.js文件首先调用后端接口check_login()，判断用户是否登录，未登录则在右上角关联注册和登录相关接口；
在这里插入图片描述

登录则显示用户名相关信息；

2）接下来，想要获取数据，需要根据index.js文件，调用获取主页幻灯片展示的房屋基本信息的接口get_house_index()；

并将json格式的数据返回给index.js文件；
3）index.js文件将数据推送给前端类名为swiper-wrapper部分；
在这里插入图片描述
前端得到数据后，想要将数据转换成幻灯片形式进行放映，需要swiper.jquery.min.js文件；
后端index.js文件创建此容器，并对容器相关设置进行规定；容器接受数据，将房屋信息展示出来。

2.后端代码

house.py部分接口：

@api.route("/houses/index", methods=["GET"])
def get_house_index():"""获取主页幻灯片展示的房屋基本信息"""# 从缓存中尝试获取数据try:ret = redis_store.get("home_page_data")except Exception as e:current_app.logger.error(e)ret = Noneif ret:current_app.logger.info("hit house index info redis")# 因为redis中保存的是json字符串，所以直接进行字符串拼接返回return '{"errno":0, "errmsg":"OK", "data":%s}' % ret, 200, {"Content-Type": "application/json"}else:try:# 查询数据库，返回房屋订单数目最多的5条数据houses = House.query.order_by(House.order_count.desc()).limit(constants.HOME_PAGE_MAX_HOUSES)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg="查询数据失败")if not houses:return jsonify(errno=RET.NODATA, errmsg="查询无数据")houses_list = []for house in houses:# 如果房屋未设置主图片，则跳过if not house.index_image_url:continuehouses_list.append(house.to_basic_dict())# 将数据转换为json，并保存到redis缓存json_houses = json.dumps(houses_list)  # "[{},{},{}]"try:redis_store.setex("home_page_data", constants.HOME_PAGE_DATA_REDIS_EXPIRES, json_houses)except Exception as e:current_app.logger.error(e)return '{"errno":0, "errmsg":"OK", "data":%s}' % json_houses, 200, {"Content-Type": "application/json"}

3.前端js

index.js

 //模态框居中的控制
function centerModals(){$('.modal').each(function(i){   //遍历每一个模态框var $clone = $(this).clone().css('display', 'block').appendTo('body');    var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);top = top > 0 ? top : 0;$clone.remove();$(this).find('.modal-content').css("margin-top", top-30);  //修正原先已经有的30个像素});
}function setStartDate() {var startDate = $("#start-date-input").val();if (startDate) {$(".search-btn").attr("start-date", startDate);$("#start-date-btn").html(startDate);$("#end-date").datepicker("destroy");$("#end-date-btn").html("离开日期");$("#end-date-input").val("");$(".search-btn").attr("end-date", "");$("#end-date").datepicker({language: "zh-CN",keyboardNavigation: false,startDate: startDate,format: "yyyy-mm-dd"});$("#end-date").on("changeDate", function() {$("#end-date-input").val($(this).datepicker("getFormattedDate"));});$(".end-date").show();}$("#start-date-modal").modal("hide");
}function setEndDate() {var endDate = $("#end-date-input").val();if (endDate) {$(".search-btn").attr("end-date", endDate);$("#end-date-btn").html(endDate);}$("#end-date-modal").modal("hide");
}function goToSearchPage(th) {var url = "/search.html?";url += ("aid=" + $(th).attr("area-id"));url += "&";var areaName = $(th).attr("area-name");if (undefined == areaName) areaName="";url += ("aname=" + areaName);url += "&";url += ("sd=" + $(th).attr("start-date"));url += "&";url += ("ed=" + $(th).attr("end-date"));location.href = url;
}$(document).ready(function(){// 检查用户的登录状态$.get("/api/v1.0/session", function(resp) {if ("0" == resp.errno) {$(".top-bar>.user-info>.user-name").html(resp.data.name);$(".top-bar>.user-info").show();} else {$(".top-bar>.register-login").show();}}, "json");// 获取幻灯片要展示的房屋基本信息$.get("/api/v1.0/houses/index", function(resp){if ("0" == resp.errno) {$(".swiper-wrapper").html(template("swiper-houses-tmpl", {houses:resp.data}));// 设置幻灯片对象，开启幻灯片滚动var mySwiper = new Swiper ('.swiper-container', {loop: true,autoplay: 2000,autoplayDisableOnInteraction: false,pagination: '.swiper-pagination',paginationClickable: true});}});// 获取城区信息$.get("/api/v1.0/areas", function(resp){if ("0" == resp.errno) {$(".area-list").html(template("area-list-tmpl", {areas:resp.data}));$(".area-list a").click(function(e){$("#area-btn").html($(this).html());$(".search-btn").attr("area-id", $(this).attr("area-id"));$(".search-btn").attr("area-name", $(this).html());$("#area-modal").modal("hide");});}});$('.modal').on('show.bs.modal', centerModals);      //当模态框出现的时候$(window).on('resize', centerModals);               //当窗口大小变化的时候$("#start-date").datepicker({language: "zh-CN",keyboardNavigation: false,startDate: "today",format: "yyyy-mm-dd"});$("#start-date").on("changeDate", function() {var date = $(this).datepicker("getFormattedDate");$("#start-date-input").val(date);});
})

4.前端html

index.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/swiper/css/swiper.min.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/index.css" rel="stylesheet">
</head>
<body><div class="container"><div class="top-bar"><img class="logo fl" src="/static/images/logo@128x59.png"><div class="register-login fr"><a class="btn top-btn btn-theme" href="/register.html">注册</a><a class="btn top-btn btn-theme" href="/login.html">登录</a></div><div class="user-info fr"><span><i class="fa fa-user fa-lg"></i></span> <a class="user-name" href="/my.html"></a></div></div><div class="swiper-container"><div class="swiper-wrapper"></div><script id="swiper-houses-tmpl" type="text/html">{{each houses as house}}<div class="swiper-slide"><a href="/detail.html?id={{house.house_id}}"><img src="{{house.img_url}}"></a><div class="slide-title">{{house.title}}</div></div>{{/each}}</script><div class="swiper-pagination"></div></div><div class="search-bar"><button class="filter-btn" type="button" data-toggle="modal" data-target="#area-modal"><span class="fl" id="area-btn">选择城区</span><span class="fr"><i class="fa fa-map-marker fa-lg fa-fw"></i></span></button><button class="filter-btn" type="button" data-toggle="modal" data-target="#start-date-modal"><span class="fl" id="start-date-btn">入住日期</span><span class="fr"><i class="fa fa-calendar fa-lg fa-fw"></i></span></button><button class="filter-btn end-date" type="button" data-toggle="modal" data-target="#end-date-modal"><span class="fl" id="end-date-btn">离开日期</span><span class="fr"><i class="fa fa-calendar fa-lg fa-fw"></i></span></button><a class="btn search-btn btn-theme" href="#" onclick="goToSearchPage(this);" area-id="" start-date="" end-date="">搜索</a><div class="modal fade" id="area-modal" tabindex="-1" role="dialog" aria-labelledby="area-label"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="area-label">选择城区</h4></div><div class="modal-body"><div class="area-list"></div><script id="area-list-tmpl" type="text/html">{{each areas as area}}<a href="#" area-id="{{area.aid}}">{{area.aname}}</a>{{/each}}</script></div></div></div></div><div class="modal fade" id="start-date-modal" tabindex="-1" role="dialog" aria-labelledby="start-date-label"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="start-date-label">入住日期</h4></div><div class="modal-body"><div class="date-select" id="start-date"></div><input type="hidden" id="start-date-input"></div><div class="modal-footer"><button type="button" class="btn btn-theme" onclick="setStartDate();">确定</button></div></div></div></div><div class="modal fade" id="end-date-modal" tabindex="-1" role="dialog" aria-labelledby="end-date-label"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="end-date-label">离开日期</h4></div><div class="modal-body"><div class="date-select" id="end-date"></div><input type="hidden" id="end-date-input"></div><div class="modal-footer"><button type="button" class="btn btn-theme" onclick="setEndDate();">确定</button></div></div></div></div></div><div class="footer"><p><span><i class="fa fa-copyright"></i></span>爱家租房&nbsp;&nbsp;享受家的温馨</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/swiper/js/swiper.jquery.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/index.js"></script>
</body>
</html>