Flask愛家租房--發布新房源(保存房屋基本信息)

0.頁面展示效果

在這里插入圖片描述在這里插入圖片描述在這里插入圖片描述

1.后端代碼

@api.route("/houses/info", methods=["POST"])
@login_required
def save_house_info():"""保存房屋的基本信息前端發送過來的json數據{"title":"","price":"","area_id":"1","address":"","room_count":"","acreage":"","unit":"","capacity":"","beds":"","deposit":"","min_days":"","max_days":"","facility":["7","8"]}"""# 獲取數據user_id = g.user_idhouse_data = request.get_json()title = house_data.get("title")  # 房屋名稱標題price = house_data.get("price")  # 房屋單價area_id = house_data.get("area_id")  # 房屋所屬城區的編號address = house_data.get("address")  # 房屋地址room_count = house_data.get("room_count")  # 房屋包含的房間數目acreage = house_data.get("acreage")  # 房屋面積unit = house_data.get("unit")  # 房屋布局(幾室幾廳)capacity = house_data.get("capacity")  # 房屋容納人數beds = house_data.get("beds")  # 房屋臥床數目deposit = house_data.get("deposit")  # 押金min_days = house_data.get("min_days")  # 最小入住天數max_days = house_data.get("max_days")  # 最大入住天數# 校驗參數if not all([title, price, area_id, address, room_count, acreage, unit, capacity, beds, deposit, min_days, max_days]):return jsonify(errno=RET.PARAMERR, errmsg="參數不完整")# 判斷金額是否正確try:price = int(float(price) * 100)deposit = int(float(deposit) * 100)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.PARAMERR, errmsg="參數錯誤")# 判斷城區id是否存在try:area = Area.query.get(area_id)except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg="數據庫異常")if area is None:return jsonify(errno=RET.NODATA, errmsg="城區信息有誤")# 保存房屋信息house = House(user_id=user_id,area_id=area_id,title=title,price=price,address=address,room_count=room_count,acreage=acreage,unit=unit,capacity=capacity,beds=beds,deposit=deposit,min_days=min_days,max_days=max_days)# 處理房屋的設施信息facility_ids = house_data.get("facility")# 如果用戶勾選了設施信息,再保存數據庫if facility_ids:# ["7","8"]try:# select  * from ih_facility_info where id in []facilities = Facility.query.filter(Facility.id.in_(facility_ids)).all()except Exception as e:current_app.logger.error(e)return jsonify(errno=RET.DBERR, errmsg="數據庫異常")if facilities:# 表示有合法的設施數據# 保存設施數據house.facilities = facilitiestry:db.session.add(house)db.session.commit()except Exception as e:current_app.logger.error(e)db.session.rollback()return jsonify(errno=RET.DBERR, errmsg="保存數據失敗")# 保存數據成功return jsonify(errno=RET.OK, errmsg="OK", data={"house_id": house.id})

2.前端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/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet"><link href="/static/css/ihome/main.css" rel="stylesheet"><link href="/static/css/ihome/newhouse.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="/myhouse.html"><span><i class="fa fa-angle-left fa-2x"></i></span></a></div></div><div class="houses-con"><ul class="houses-list"><form id="form-house-info"><li><div class="house-title"><h3>基本信息</h3></div><div class="house-content"><div class="form-group"><label for="house-title">房屋標題</label><input type="text" class="form-control" name="title" id="house-title" required></div><div class="form-group"><label for="house-price">每晚價格</label><input type="number" class="form-control" name="price" id="house-price" required></div><div class="form-group"><label for="area-id">所在城區</label><select class="form-control" id="area-id" name="area_id"></select><script type="text/html" id="areas-tmpl">{{ each areas as area}}<option value="{{ area.aid }}">{{ area.aname }}</option>{{ /each }}</script></div><div class="form-group"><label for="house-address">詳細地址</label><textarea class="form-control" name="address" id="house-address" required></textarea></div> </div></li><li><div class="house-title"><h3>詳細信息</h3></div><div class="house-content"><div class="form-group"><label for="house-room-count">出租房間數目</label><input type="number" class="form-control" name="room_count" id="house-room-count" required></div><div class="form-group"><label for="house-acreage">房屋面積</label><input type="number" class="form-control" name="acreage" id="house-acreage" required></div><div class="form-group"><label for="house-unit">戶型描述</label><input type="text" class="form-control" name="unit" id="house-unit" placeholder="如:三室兩廳兩衛" required></div><div class="form-group"><label for="house-capacity">宜住人數</label><input type="number" class="form-control" name="capacity" id="house-capacity" required></div><div class="form-group"><label for="house-beds">臥床配置</label><input type="text" class="form-control" name="beds" id="house-beds" placeholder="如:雙人床:2x1.8x1張 1.5x2x2張" required></div> <div class="form-group"><label for="house-deposit">押金數額</label><input type="number" class="form-control" name="deposit" id="house-deposit" required></div><div class="form-group"><label for="house-min-days">最少入住天數</label><input type="number" class="form-control" name="min_days" id="house-min-days" required></div><div class="form-group"><label for="house-max-days">最多入住天數</label><input type="number" class="form-control" name="max_days" id="house-max-days" placeholder="0表示無限制" required></div></div></li><li><div class="house-title"><h3>配套設施</h3></div><div class="house-content"><ul class="house-facility-list clearfix"><li><div class="checkbox"><label><input type="checkbox" name="facility" value="1">無線網絡</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="2">熱水淋浴</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="3">空調</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="4">暖氣</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="5">允許吸煙</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="6">飲水設備</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="7">牙具</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="8">香皂</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="9">拖鞋</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="10">手紙</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="11">毛巾</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="12">沐浴露、洗發露</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="13">冰箱</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="14">洗衣機</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="15">電梯</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="16">允許做飯</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="17">允許帶寵物</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="18">允許聚會</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="19">門禁系統</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="20">停車位</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="21">有線網絡</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="22">電視</label></div></li><li><div class="checkbox"><label><input type="checkbox" name="facility" value="23">浴缸</label></div></li></ul></div></li><input type="submit" class="btn btn-success btn-commit" value="發布房源信息"><div class="error-msg text-center"><i class="fa fa-exclamation-circle"></i>請將全部信息填寫完整后再提交</div></form><form id="form-house-image" action="/api/house/image" method="post" enctype="multipart/form-data"><input type="hidden" name="house_id" id="house-id" value=""><li><div class="house-title"><h3>添加圖片</h3></div><div class="house-content"><div class="house-image-cons"></div><div class="form-group"><label for="house-image">選擇圖片</label><input type="file" accept="image/*" name="house_image" id="house-image"></div><input type="submit" class="btn btn-success" value="上傳"></div></li></form></ul></div><div class="popup_con"><div class="popup"><p><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></p></div><div class="mask"></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/js/jquery.form.min.js"></script><script src="/static/js/template.js"></script><script src="/static/plugins/bootstrap/js/bootstrap.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/ihome/newhouse.js"></script>
</body>
</html>

3.前端js代碼

在這里插入圖片描述

    $("#form-house-info").submit(function (e) {e.preventDefault();// 處理表單數據var data = {};$("#form-house-info").serializeArray().map(function(x) { data[x.name]=x.value });// 收集設置id信息var facility = [];$(":checked[name=facility]").each(function(index, x){facility[index] = $(x).val()});data.facility = facility;// 向后端發送請求$.ajax({url: "/api/v1.0/houses/info",type: "post",contentType: "application/json",data: JSON.stringify(data),dataType: "json",headers: {"X-CSRFToken": getCookie("csrf_token")},success: function (resp) {if (resp.errno == "4101") {// 用戶未登錄location.href = "/login.html";} else if (resp.errno == "0") {// 隱藏基本信息表單$("#form-house-info").hide();// 顯示圖片表單$("#form-house-image").show();// 設置圖片表單中的house_id$("#house-id").val(resp.data.house_id);} else {alert(resp.errmsg);}}})});

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/452634.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/452634.shtml
英文地址,請注明出處:http://en.pswp.cn/news/452634.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

今后最有前途的媒體格式 MXF

MXF格式已經被推出幾年了&#xff0c;從當初一個陌生的不為人們重視的格式逐漸獲得了業內人士的認知和認可&#xff0c;現如今正被廣泛應用于廣播電視與后期制作領域&#xff0c;且有不斷擴大之勢&#xff0c;松下公司推出的基于PII卡的無磁帶式標清攝像機&#xff0c;它所采用…

【c#】RabbitMQ學習文檔(一)Hello World

一、簡介 RabbitMQ是一個消息的代理器&#xff0c;用于接收和發送消息&#xff0c;你可以這樣想&#xff0c;他就是一個郵局&#xff0c;當您把需要寄送的郵件投遞到郵筒之時&#xff0c;你可以確定的是郵遞員先生肯定會把郵件發送到需要接收郵件的人的手里&#xff0c;不…

什么是狀態轉換圖

通過描繪系統的狀態及引起系統狀態轉換的事件&#xff0c;來表示系統的行為。此外狀態轉換圖還指明了作為特定事件的結果系統將做哪些動作&#xff08;例如&#xff0c;處理數據&#xff09;。因此狀態轉換圖提供了行為建模機制。

Python學習筆記三

參考教程&#xff1a;廖雪峰官網https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000 一、函數的定義 Python中定義一個函數需要使用def語句&#xff0c;依次確定函數名、參數及函數體內容&#xff1a; #一個求絕對值的函數 def my_abs(x):i…

oracle中如何分頁,Oracle中操作分頁

mysql中分頁的寫法&#xff1a;select t.* from tbl_user t order by t.id limit $offset , $perpage$currentPage 1;//當前頁碼其中后面$sql&#xff1a;with partdata as (select rownum rowno,t.* from tablename t where column1090order by column) select * from partda…

Flask愛家租房--發布新房源(保存房屋圖片)

0.頁面展示效果 1&#xff09;首先房東填寫房屋信息&#xff1b; 2&#xff09;當房東填寫發布的房源信息之后&#xff0c;隱藏&#xff08;hide&#xff09;剛才填寫信息的界面&#xff0c;同時顯示(show)上傳房屋圖片的界面。 1.后端代碼 api.route("/houses/image&q…

數字的處理 :小數點四舍五入

js取float型小數點后兩位數的方法 轉載 發布時間&#xff1a;2014年01月18日 17:03:32 投稿&#xff1a;shangke 我要評論 js中取小數點后兩位方法最常用的就是四舍五入函數了&#xff0c;前面我介紹過js中四舍五入一此常用函數&#xff0c;這里正好用上&#xff0c;下面…

如何成為一名優秀的C程序員

問題的提出 每過一段時間我總會收到一些程序員發來的電子郵件&#xff0c;他們會問我是用什么編程語言來編寫自己的游戲的&#xff0c;以及我是如何學習這種編程語言的。因此&#xff0c;我認為在這篇博文里列出一些有關C語言的最佳讀物應該能幫到不少人。如果你知道其它的優秀…

CFS調度器

一、前言 隨著內核版本的演進&#xff0c;其源代碼的膨脹速度也在遞增&#xff0c;這讓Linux的學習曲線變得越來越陡峭了。這對初識內核的同學而言當然不是什么好事情&#xff0c;滿腔熱情很容易被當頭澆滅。我有一個循序漸進的方法&#xff0c;那就是先不要看最新的內核&#…

oracle索引分類與區分,深入理解Oracle表(6):堆組織表(HOT)和索引組織表(IOT)的區別...

摘要&#xff1a;堆表&#xff1a;又稱堆組織表&#xff0c;常用的表類型&#xff0c;以堆的方式管理&#xff0c;當增加數據時&#xff0c;將使用段中第一個適合數據大小的空閑空間。當刪除數據時&#xff0c;留下的空間允許以后的DML操作重用。 堆組織表(heap table)應用中99…

Flask愛家租房--發布新房源(總結)

重點總結 學習過程中&#xff0c;發現house_id貫穿兩個接口內容&#xff0c;現對后端邏輯部分做以下總結&#xff1a; 1&#xff09;房東首先在前端填寫房屋的基本信息&#xff0c;此時通過newhouse.js文件$("#form-house-info").submit(function (e) {…}進行處理&…

關系的三類完整性約束

規則2.1實體完整性規則&#xff08;Entity Integrity&#xff09;若屬性A是基本關系R的主屬性&#xff0c;則屬性A不能取空值空值就是“不知道”或“不存在”或“無意義”的值例&#xff1a; 選修&#xff08;學號&#xff0c;課程號&#xff0c;成績&#xff09; “學號、課…

[QNAP crontab 定時執行程式

注意要自動執行的 sh 檔不要放在 /root 裡, 不然韌體更新後檔案會不見, 要放在個人帳號的資料夾&#xff0c;例如 /share/homes/帳號/ QNAP 的 crontab 放在 /etc/config/crontabvi /etc/config/crontab 例如要每日5:00執行 backup.sh 的話&#xff0c;加上這行 00 5 * * * /s…

調整標志位方法oracle,面試題(二)(示例代碼)

1.查找/us/oc al/nginx/ogs下更改時間在7天前以log 后極的文件井移動到sr/oca/nginx/log/backup下(至少兩種方法)2. Centos 查看某個進程的環境安量3.簡述DNS迭代查詢和遞歸直詢的區別4.簡述TCP三次握手過程以及涉及到的狀態(可畫草圖) ?5.統計TCP連接狀態(至少兩種方法)6.發現…

國際最具潛力IT專業認證

正如很多的爭論一樣&#xff0c;IT認證也是現在爭論的熱點&#xff0c;在IT專業人士的世界里&#xff0c;IT認證對于其職業規劃有著很大的影響。在時下究竟哪個認證才具有最大意義呢&#xff1f;本文羅列了十個最具潛力的技術認證&#xff0c;一起來看看都有哪些吧&#xff01;…

關系代數

關系代數是一種抽象的查詢語言&#xff0c;它用對關系的運算來表達查詢關系代數運算對象是關系運算結果亦為關系關系代數的運算符有兩類&#xff1a;集合運算符和專門的關系運算符

設計模式的六大原則

設計模式是一套被反復使用、多數人知曉的、經過分類編目的、代碼設計經驗的總結。使用設計模式是為了可重用代碼、讓代碼更加容易被他人理解、保證代碼可靠性。設計模式是代碼編制真正工程化&#xff08;工程化即系統化、模塊化、規范化的一個過程。指將具有一定規模數量的單個…

作業7

stuNum 201709090072 print(年級是&#xff1a;stuNum[0:4]) print(專業編號是: stuNum[4:9]) print(序號是: stuNum[-3:]) stuNum 440982201812111876 print(所在省市&#xff1a;stuNum[0:2]) print(所在地區&#xff1a;stuNum[2:4]) print(所在縣區&#xff1a;stuNum[4:…

linux進程退出沒有log,Linux下應用進程消失原因分析-Go語言中文社區

應用部署在Linux環境下&#xff0c;如果出現未知原因導致應用進程被殺(應用日志中沒有任何異常現象&#xff0c;日志出現中斷現象)&#xff0c;如果對于進程消失原因沒有特別明確的方向&#xff0c;可以考慮從系統日志(/var/log/messages)方面查找原因。 命令參考egrep -i kill…