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.pswp.cn/news/452558.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/452558.shtml
英文地址，請注明出處：http://en.pswp.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