Flask爱家租房--房屋管理（获取房屋详情）

文章目录

    • 0.效果展示
    • 1.思路总结
    • 2.后端接口
    • 3.前端js
    • 4.前端html

0.效果展示

在这里插入图片描述

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(errno=RET.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(errno=RET.DBERR, errmsg="查询数据失败")if not house:return jsonify(errno=RET.NODATA, errmsg="房屋不存在")# 将房屋对象数据转换为字典try:house_data = house.to_full_dict()except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.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 resp

3.前端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?hid="+resp.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 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/detail.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="#" onclick="hrefBack();"><span><i class="fa fa-angle-left fa-2x"></i></span></a></div></div><div class="swiper-container"></div><script id="house-image-tmpl" type="text/html"><ul class="swiper-wrapper">{{each img_urls as img_url}}<li class="swiper-slide"><img src="{{img_url}}"></li>{{/each}}</ul><div class="swiper-pagination"></div><div class="house-price">￥<span>{{(price/100.0).toFixed(0)}}</span>/晚</div></script><div class="detail-con"></div><script id="house-detail-tmpl" type="text/html"><div class="detail-header layout-style"><h2 class="house-title">{{house.title}}</h2><div class="landlord-pic"><img src="{{house.user_avatar}}"></div><h2 class="landlord-name">房东： <span>{{house.user_name}}</span></h2></div><div class="house-info layout-style"><h3>房屋地址</h3><ul class="house-info-list text-center"><li>{{house.address}}</li></ul></div><ul class="house-type layout-style"><li><span class="icon-house"></span><div class="icon-text"><h3>出租{{house.room_count}}间</h3><p>房屋面积:{{house.acreage}}平米</p><p>房屋户型:{{house.unit}}</p></div></li><li><span class="icon-user"></span><div class="icon-text"><h3>宜住{{house.capacity}}人</h3></div></li><li><span class="icon-bed"></span><div class="icon-text"><h3>卧床配置</h3><p>{{house.beds}}</p></div></li></ul><div class="house-info layout-style"><h3>房间详情</h3><ul class="house-info-list"><li>收取押金<span>{{(house.deposit/100.0).toFixed(0)}}</span></li><li>最少入住天数<span>{{house.min_days}}</span></li><li>最多入住天数<span>{{if house.max_days==0}}无限制{{else}}{{house.max_days}}{{/if}}</span></li></ul></div><div class="house-facility layout-style"><h3>配套设施</h3><ul class="house-facility-list clearfix"><li><span class="{{if house.facilities.indexOf(1)>=0}}wirelessnetwork-ico{{else}}jinzhi-ico{{/if}}"></span>无线网络</li><li><span class="{{if house.facilities.indexOf(2)>=0}}shower-ico{{else}}jinzhi-ico{{/if}}"></span>热水淋浴</li><li><span class="{{if house.facilities.indexOf(3)>=0}}aircondition-ico{{else}}jinzhi-ico{{/if}}"></span>空调</li><li><span class="{{if house.facilities.indexOf(4)>=0}}heater-ico{{else}}jinzhi-ico{{/if}}"></span>暖气</li><li><span class="{{if house.facilities.indexOf(5)>=0}}smoke-ico{{else}}jinzhi-ico{{/if}}"></span>允许吸烟</li><li><span class="{{if house.facilities.indexOf(6)>=0}}drinking-ico{{else}}jinzhi-ico{{/if}}"></span>饮水设备</li><li><span class="{{if house.facilities.indexOf(7)>=0}}brush-ico{{else}}jinzhi-ico{{/if}}"></span>牙具</li><li><span class="{{if house.facilities.indexOf(8)>=0}}soap-ico{{else}}jinzhi-ico{{/if}}"></span>香皂</li><li><span class="{{if house.facilities.indexOf(9)>=0}}slippers-ico{{else}}jinzhi-ico{{/if}}"></span>拖鞋</li><li><span class="{{if house.facilities.indexOf(10)>=0}}toiletpaper-ico{{else}}jinzhi-ico{{/if}}"></span>手纸</li><li><span class="{{if house.facilities.indexOf(11)>=0}}towel-ico{{else}}jinzhi-ico{{/if}}"></span>毛巾</li><li><span class="{{if house.facilities.indexOf(12)>=0}}toiletries-ico{{else}}jinzhi-ico{{/if}}"></span>沐浴露、洗发露</li><li><span class="{{if house.facilities.indexOf(13)>=0}}icebox-ico{{else}}jinzhi-ico{{/if}}"></span>冰箱</li><li><span class="{{if house.facilities.indexOf(14)>=0}}washer-ico{{else}}jinzhi-ico{{/if}}"></span>洗衣机</li><li><span class="{{if house.facilities.indexOf(15)>=0}}elevator-ico{{else}}jinzhi-ico{{/if}}"></span>电梯</li><li><span class="{{if house.facilities.indexOf(16)>=0}}iscook-ico{{else}}jinzhi-ico{{/if}}"></span>允许做饭</li><li><span class="{{if house.facilities.indexOf(17)>=0}}pet-ico{{else}}jinzhi-ico{{/if}}"></span>允许带宠物</li><li><span class="{{if house.facilities.indexOf(18)>=0}}meet-ico{{else}}jinzhi-ico{{/if}}"></span>允许聚会</li><li><span class="{{if house.facilities.indexOf(19)>=0}}accesssys-ico{{else}}jinzhi-ico{{/if}}"></span>门禁系统</li><li><span class="{{if house.facilities.indexOf(20)>=0}}parkingspace-ico{{else}}jinzhi-ico{{/if}}"></span>停车位</li><li><span class="{{if house.facilities.indexOf(21)>=0}}wirednetwork-ico{{else}}jinzhi-ico{{/if}}"></span>有线网络</li><li><span class="{{if house.facilities.indexOf(22)>=0}}tv-ico{{else}}jinzhi-ico{{/if}}"></span>电视</li><li><span class="{{if house.facilities.indexOf(23)>=0}}hotbathtub-ico{{else}}jinzhi-ico{{/if}}"></span>浴缸</li></ul></div>{{if house.comments }}<div class="house-info layout-style"><h3>评价信息</h3><ul class="house-comment-list">{{ each house.comments as comment}}<li><p>{{comment.user_name}}<span class="fr">{{comment.ctime}}</span></p><p>{{comment.comment}}</p></li>{{/each}}</ul></div>{{/if}}</script><a class="book-house" href="">即刻预定</a><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/detail.js"></script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/452558.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MAC 安装 pygraphviz 找不到头文件

MAC 安装 pygraphviz 找不到头文件

networkx的有向图只能通过箭头来区别两点之间的两条边&#xff0c;但是我在复现snake论文的时候&#xff0c;需要绘制两个交叉口之间的两条不同方向的路段&#xff0c;最后选择了pygraphviz 直接通过anaconda打开对应终端&#xff0c;pip install pygraphviz&#xff0c;一直报…
阅读更多...
linux ntp连接失败,linux ntp服务器连接异常

linux ntp连接失败,linux ntp服务器连接异常

弹性云服务器 ECS弹性云服务器(Elastic Cloud Server)是一种可随时自助获取、可弹性伸缩的云服务器&#xff0c;帮助用户打造可靠、安全、灵活、高效的应用环境&#xff0c;确保服务持久稳定运行&#xff0c;提升运维效率三年低至5折&#xff0c;多种配置可选了解详情认证鉴权|…
阅读更多...
如此如此，怎能师夷长技以制夷！

如此如此，怎能师夷长技以制夷！

以一个爱国的软件设计者的角度来看这样一个weibo,大概的内容就是&#xff1a;北京南站的4SQ上有个老外留言吐槽&#xff1a;“没有中国身份证根本就没法在自动售票机上买票&#xff0c;那他妈的他们弄个英文界面干屁啊&#xff01;” 出于行业的敏感性&#xff0c;我感到很有意…
阅读更多...
基于supermap webgl三维楼层显隐控制思路

基于supermap webgl三维楼层显隐控制思路

supermap 9D 产品中&#xff0c;可以先获取到模型的simd值&#xff0c;再调用setOnlyObjsVisible方法控制模型中单个物体的显示和隐藏。 var smid "94"; //楼层的smid值&#xff0c;多个楼层&#xff0c;则用数组的方式 var ids []; var layers viewer.scene.la…
阅读更多...
#python计算结果百位500向下取整，（0-499取000，500-999取500)

#python计算结果百位500向下取整，（0-499取000，500-999取500)

!/usr/bin/env python coding:utf-8 计算结果百位500向下取整&#xff0c;&#xff08;0-499取000&#xff0c;500-999取500) import math calc_Amount float(input("输入所有可需金额&#xff1a;")) act_Amount calc_Amount if calc_Amount > 0: value2 calc…
阅读更多...
什么是Z语言

什么是Z语言

Z语言是一种用“数学文字”或“数学符号”来描述计算机系统的规范化语言&#xff0c;它不但能应用于计算机硬件系统&#xff0c;而且也特别适用于计算机软件系统&#xff0c;Z语言描述“做什么”而不涉及“怎么做”&#xff0c;只对目标软件系统进行功能描述。实际上&#xff0…
阅读更多...
Flask爱家租房--房屋管理（搜索房屋列表）

Flask爱家租房--房屋管理（搜索房屋列表）

文章目录0.效果展示1.后端接口2.前端js3.前端html0.效果展示 1.后端接口 house.py部分接口&#xff1a; # GET /api/v1.0/houses?sd2017-12-01&ed2017-12-31&aid10&sknew&p1 api.route("/houses") def get_house_list():"""获取房…
阅读更多...
c语言用if语句判断字符类型,C语言if语句的使用

c语言用if语句判断字符类型,C语言if语句的使用

C语言if语句的使用【例3】#includeint main(void){char c;printf("input a character: ");cgetchar();if(c<32)printf("This is a control character\n");else if(c>0&&c<9)printf("This is a digit\n");else if(c>A&&a…
阅读更多...
SQL的特点

SQL的特点

1.综合统一集数据定义语言&#xff08;DDL&#xff09;&#xff0c;数据操纵语言&#xff08;DML&#xff09;&#xff0c;数据控制语言&#xff08;DCL&#xff09;功能于一体。可以独立完成数据库生命周期中的全部活动&#xff1a;定义和修改、删除关系模式&#xff0c;定义和…
阅读更多...
编程语言API性能大比拼

编程语言API性能大比拼

Ciaran是Skimlinks项目团队中的一名领导者&#xff0c;热爱开发&#xff0c;在业余时间喜欢研究一门新语言。作者和他的团队在开发Skimlinks项目时遇到了一些困难&#xff0c;于是做了这份测试&#xff0c;文中将Node.js、Scala、Go、Python、PHP进行对比&#xff0c;最终Pytho…
阅读更多...
ubuntu 安装ssh服务

ubuntu 安装ssh服务

1&#xff1a;安装 $ sudo apt-get install openssh-server 2&#xff1a;检查ssh服务开启状态 $ ps -s | grep ssh 3&#xff1a;启动ssh服务 $ service ssh start 4&#xff1a;本地登录 $ ssh localhost转载于:https://www.cnblogs.com/andy1327/p/9089930.html
阅读更多...
手把手0基础项目实战（一）——教你搭建一套可自动化构建的微服务框架(SpringBoot+Dubbo+Docker+Jenkins)...

手把手0基础项目实战（一）——教你搭建一套可自动化构建的微服务框架(SpringBoot+Dubbo+Docker+Jenkins)...

本文你将学到什么&#xff1f; 本文将以原理实战的方式&#xff0c;首先对“微服务”相关的概念进行知识点扫盲&#xff0c;然后开始手把手教你搭建这一整套的微服务系统。 项目完整源码下载 https://github.com/bz51/SpringBoot-Dubbo-Docker-Jenkins 这套微服务框架能干啥&am…
阅读更多...
C语言中临时变量写在哪里,C语言中不允许创建临时变量，交换两个数的内容

C语言中临时变量写在哪里,C语言中不允许创建临时变量，交换两个数的内容

在C语言中可以通过建立临时变量来实现两个变量的交换&#xff0c;当不允许建立临时变量时&#xff0c;应该怎样实现两变量的交换呢&#xff1f;假设有两个变量num1和num2&#xff1b;下面通过两种方法进行分析。方法一&#xff1a;利用加减法。具体算法分析如下&#xff1a;由于…
阅读更多...
Python面试题总结（8）--操作类

Python面试题总结（8）--操作类

1. 请写一个 Python 逻辑&#xff0c;计算一个文件中的大写字母数量 答&#xff1a;读取‘A.txt’中的大写字母数量 with open(A.txt) as f:"""计算一个文件中的大写字母数量"""count 0for i in f.read():if i.isupper():count 1 print(cou…
阅读更多...
联合主键

联合主键

一个数据库表只能有一个主键&#xff0c;不允许两个主键。但是允许两个字段联合起来设置为主键&#xff0c;这叫联合主键。
阅读更多...
node之post提交上传

node之post提交上传

post文件上传 multer 中间件 在node中 express为了性能考虑采用按需加载的方式&#xff0c;引入各种中间件来完成需求&#xff0c; 平时解析post上传数据时候&#xff0c;是用body-parse。但这个中间件有缺点&#xff0c;只能解析post的文本内容&#xff0c;&#xff08;applic…
阅读更多...
要有自己的核心竞争力，应对时代变迁

要有自己的核心竞争力，应对时代变迁

在之前的PC时代和互联网时代&#xff0c;人们都有一些顾虑&#xff0c;觉得智能化新技术的到来和采用将会导致就业人数急剧减少。 但实际上&#xff0c;无论是PC还是互联网这样新技术的到来&#xff0c;其实都对就业有极大的促进作用&#xff0c;其中最明显的例子&#xff0c;…
阅读更多...
ul、li列表简单实用代码实例

ul、li列表简单实用代码实例

利用ul和li可以实现列表效果&#xff0c;下面就是一个简单的演示。 代码如下: 010203040506070809101112131415161718192021222324252627282930313233<!DOCTYPE html><html> <head> <meta charset" utf-8"> <meta name"author"…
阅读更多...
Flask--读取配置参数的方式

Flask--读取配置参数的方式

文章目录方法1. 使用配置文件方法2. 使用对象配置参数方法3. 直接操作config的字典对象项目实例方法1. 使用配置文件 首先将配置参数写在文件中&#xff0c;例如&#xff1a;config.cfg 然后导入: app Flask("__name__") app.config.from_pyfile("config.cf…
阅读更多...
g开头的C语言编程软件,C语言函数大全(g开头)

g开头的C语言编程软件,C语言函数大全(g开头)

函数名: gcvt功 能: 把浮点数转换成字符串用 法: char *gcvt(double value, int ndigit, char *buf);程序例:#include#includeint main(void){char str[25];double num;int sig 5; /* significant digits *//* a regular number */num 9.876;gcvt(num, sig, str);printf(&quo…
阅读更多...
最新文章

Copyright @ 2022~2023