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= "参数错误" ) 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: try : 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) ; } } } ) } ) ;