文章目錄
- 0.效果展示
- 1.重點總結
- 2.后端代碼
- 3.前端js
- 4.前端html
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">×</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">×</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">×</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>愛家租房 享受家的溫馨</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>
