Flask爱家租房--发布新房源（保存房屋基本信息）

最新推荐文章于 2019-11-27 22:54:51 发布

阿Q咚咚咚

最新推荐文章于 2019-11-27 22:54:51 发布

阅读量221

点赞数

分类专栏： Flask--爱家租房

本文链接：https://blog.csdn.net/fanxindong0620/article/details/103148685

版权

Flask--爱家租房专栏收录该内容

22 篇文章 2 订阅

订阅专栏

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_id
    house_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 = facilities

    try:
        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})

２.前端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>

３.前端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);
                }
            }
        })

    });

阿Q咚咚咚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Flask爱家租房--发布新房源（保存房屋基本信息）

0.页面展示效果1.后端代码@api.route("/houses/info", methods=["POST"])@login_requireddef save_house_info(): """保存房屋的基本信息前端发送过来的json数据 { "title":"", "price":"", "area_id":...
复制链接

扫一扫

专栏目录