学校资源网站建设方案,网站建设项目书,有经验的郑州网站建设,wordpress flatsome文章目录0.效果展示1.思路总结2.后端接口3.前端js4.前端html0.效果展示 1.思路总结
1#xff09;房屋详情页面开始加载时#xff0c;detail.js首先通过定义的函数#xff08;重点#xff1a;document.location.search#xff09;#xff0c;截取需要向后端取得详情页面的…
文章目录0.效果展示1.思路总结2.后端接口3.前端js4.前端html0.效果展示 1.思路总结
1房屋详情页面开始加载时detail.js首先通过定义的函数重点document.location.search截取需要向后端取得详情页面的house_id 2后端经过逻辑处理首先向redis中获取相应房屋的具体信息若redis中不存在则向数据库查询返回给前端detail.js 接下来detail.js分两部分对前端页面进行渲染 效果如下
3同时判断当前用户是否为房东如果不为房东则想用户展示“即刻预订”按钮。 2.后端接口
houses.py相关接口
api.route(/houses/int:house_id, methods[GET])
def get_house_detail(house_id):获取房屋详情# 前端在房屋详情页面展示时如果浏览页面的用户不是该房屋的房东则展示预定按钮否则不展示# 所以需要后端返回登录用户的user_id# 尝试获取用户登录的信息若登录则返回给前端登录用户的user_id否则返回user_id-1user_id session.get(user_id, -1)# 校验参数if not house_id:return jsonify(errnoRET.PARAMERR, errmsg参数缺失)# 先从redis缓存中获取信息try:ret redis_store.get(house_info_%s % house_id)except Exception as e:current_app.logger.error(e)ret Noneif ret:current_app.logger.info(hit house info redis)return {errno:0, errmsg:OK, data:{user_id:%s, house:%s}} % (user_id, ret), \200, {Content-Type: application/json}# 查询数据库try:house House.query.get(house_id)except Exception as e:current_app.logger.error(e)return jsonify(errnoRET.DBERR, errmsg查询数据失败)if not house:return jsonify(errnoRET.NODATA, errmsg房屋不存在)# 将房屋对象数据转换为字典try:house_data house.to_full_dict()except Exception as e:current_app.logger.error(e)return jsonify(errnoRET.DATAERR, errmsg数据出错)# 存入到redis中json_house json.dumps(house_data)try:redis_store.setex(house_info_%s % house_id, constants.HOUSE_DETAIL_REDIS_EXPIRE_SECOND, json_house)except Exception as e:current_app.logger.error(e)resp {errno:0, errmsg:OK, data:{user_id:%s, house:%s}} % (user_id, json_house), \200, {Content-Type: application/json}return resp3.前端js
detail.js
function hrefBack() {history.go(-1);
}// 解析提取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;}, {});
}$(document).ready(function(){// 获取详情页面要展示的房屋编号var queryData decodeQuery();var houseId queryData[id];// 获取该房屋的详细信息$.get(/api/v1.0/houses/ houseId, function(resp){if (0 resp.errno) {$(.swiper-container).html(template(house-image-tmpl, {img_urls:resp.data.house.img_urls, price:resp.data.house.price}));$(.detail-con).html(template(house-detail-tmpl, {house:resp.data.house}));// resp.user_id为访问页面用户,resp.data.user_id为房东if (resp.data.user_id ! resp.data.house.user_id) {$(.book-house).attr(href, /booking.html?hidresp.data.house.hid);$(.book-house).show();}var mySwiper new Swiper (.swiper-container, {loop: true,autoplay: 2000,autoplayDisableOnInteraction: false,pagination: .swiper-pagination,paginationType: fraction});}})
})4.前端html
detail.html
!DOCTYPE html
html
head meta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1, user-scalablenotitle爱家-房间信息/titlelink href/static/plugins/bootstrap/css/bootstrap.min.css relstylesheetlink href/static/plugins/font-awesome/css/font-awesome.min.css relstylesheetlink href/static/css/reset.css relstylesheetlink href/static/plugins/swiper/css/swiper.min.css relstylesheetlink href/static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css relstylesheetlink href/static/css/ihome/main.css relstylesheetlink href/static/css/ihome/detail.css relstylesheet
/head
bodydiv classcontainerdiv classtop-bardiv classnav-barh3 classpage-title房间信息/h3a classnav-btn fl href# onclickhrefBack();spani classfa fa-angle-left fa-2x/i/span/a/div/divdiv classswiper-container/divscript idhouse-image-tmpl typetext/htmlul classswiper-wrapper{{each img_urls as img_url}}li classswiper-slideimg src{{img_url}}/li{{/each}}/uldiv classswiper-pagination/divdiv classhouse-pricespan{{(price/100.0).toFixed(0)}}/span/晚/div/scriptdiv classdetail-con/divscript idhouse-detail-tmpl typetext/htmldiv classdetail-header layout-styleh2 classhouse-title{{house.title}}/h2div classlandlord-picimg src{{house.user_avatar}}/divh2 classlandlord-name房东 span{{house.user_name}}/span/h2/divdiv classhouse-info layout-styleh3房屋地址/h3ul classhouse-info-list text-centerli{{house.address}}/li/ul/divul classhouse-type layout-stylelispan classicon-house/spandiv classicon-texth3出租{{house.room_count}}间/h3p房屋面积:{{house.acreage}}平米/pp房屋户型:{{house.unit}}/p/div/lilispan classicon-user/spandiv classicon-texth3宜住{{house.capacity}}人/h3/div/lilispan classicon-bed/spandiv classicon-texth3卧床配置/h3p{{house.beds}}/p/div/li/uldiv classhouse-info layout-styleh3房间详情/h3ul classhouse-info-listli收取押金span{{(house.deposit/100.0).toFixed(0)}}/span/lili最少入住天数span{{house.min_days}}/span/lili最多入住天数span{{if house.max_days0}}无限制{{else}}{{house.max_days}}{{/if}}/span/li/ul/divdiv classhouse-facility layout-styleh3配套设施/h3ul classhouse-facility-list clearfixlispan class{{if house.facilities.indexOf(1)0}}wirelessnetwork-ico{{else}}jinzhi-ico{{/if}}/span无线网络/lilispan class{{if house.facilities.indexOf(2)0}}shower-ico{{else}}jinzhi-ico{{/if}}/span热水淋浴/lilispan class{{if house.facilities.indexOf(3)0}}aircondition-ico{{else}}jinzhi-ico{{/if}}/span空调/lilispan class{{if house.facilities.indexOf(4)0}}heater-ico{{else}}jinzhi-ico{{/if}}/span暖气/lilispan class{{if house.facilities.indexOf(5)0}}smoke-ico{{else}}jinzhi-ico{{/if}}/span允许吸烟/lilispan class{{if house.facilities.indexOf(6)0}}drinking-ico{{else}}jinzhi-ico{{/if}}/span饮水设备/lilispan class{{if house.facilities.indexOf(7)0}}brush-ico{{else}}jinzhi-ico{{/if}}/span牙具/lilispan class{{if house.facilities.indexOf(8)0}}soap-ico{{else}}jinzhi-ico{{/if}}/span香皂/lilispan class{{if house.facilities.indexOf(9)0}}slippers-ico{{else}}jinzhi-ico{{/if}}/span拖鞋/lilispan class{{if house.facilities.indexOf(10)0}}toiletpaper-ico{{else}}jinzhi-ico{{/if}}/span手纸/lilispan class{{if house.facilities.indexOf(11)0}}towel-ico{{else}}jinzhi-ico{{/if}}/span毛巾/lilispan class{{if house.facilities.indexOf(12)0}}toiletries-ico{{else}}jinzhi-ico{{/if}}/span沐浴露、洗发露/lilispan class{{if house.facilities.indexOf(13)0}}icebox-ico{{else}}jinzhi-ico{{/if}}/span冰箱/lilispan class{{if house.facilities.indexOf(14)0}}washer-ico{{else}}jinzhi-ico{{/if}}/span洗衣机/lilispan class{{if house.facilities.indexOf(15)0}}elevator-ico{{else}}jinzhi-ico{{/if}}/span电梯/lilispan class{{if house.facilities.indexOf(16)0}}iscook-ico{{else}}jinzhi-ico{{/if}}/span允许做饭/lilispan class{{if house.facilities.indexOf(17)0}}pet-ico{{else}}jinzhi-ico{{/if}}/span允许带宠物/lilispan class{{if house.facilities.indexOf(18)0}}meet-ico{{else}}jinzhi-ico{{/if}}/span允许聚会/lilispan class{{if house.facilities.indexOf(19)0}}accesssys-ico{{else}}jinzhi-ico{{/if}}/span门禁系统/lilispan class{{if house.facilities.indexOf(20)0}}parkingspace-ico{{else}}jinzhi-ico{{/if}}/span停车位/lilispan class{{if house.facilities.indexOf(21)0}}wirednetwork-ico{{else}}jinzhi-ico{{/if}}/span有线网络/lilispan class{{if house.facilities.indexOf(22)0}}tv-ico{{else}}jinzhi-ico{{/if}}/span电视/lilispan class{{if house.facilities.indexOf(23)0}}hotbathtub-ico{{else}}jinzhi-ico{{/if}}/span浴缸/li/ul/div{{if house.comments }}div classhouse-info layout-styleh3评价信息/h3ul classhouse-comment-list{{ each house.comments as comment}}lip{{comment.user_name}}span classfr{{comment.ctime}}/span/pp{{comment.comment}}/p/li{{/each}}/ul/div{{/if}}/scripta classbook-house href即刻预定/adiv classfooterpspani classfa fa-copyright/i/span爱家租房nbsp;nbsp;享受家的温馨/p/div/divscript src/static/js/jquery.min.js/scriptscript src/static/plugins/bootstrap/js/bootstrap.min.js/scriptscript src/static/plugins/swiper/js/swiper.jquery.min.js/scriptscript src/static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js/scriptscript src/static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js/scriptscript src/static/js/template.js/scriptscript src/static/js/ihome/detail.js/script
/body
/html
