flask爱家租房项目开发（八）

本文代码下载地址：https://download.csdn.net/download/geek_xiong/11558496

目录

发布房源信息

后端代码编写

前端代码编写

发布房屋功能测试

---

发布房源信息

此租房网站现阶段只要用户注册并登陆即可完成房屋的发布，关于认证后才能发布，后续完善。

url：127.0.0.1:5000/newhouse.html

请求方式：GET

后端代码编写

前端填写发布信息，向后端发起请求；后端接收前端的请求，将数据保存到数据库中，并返回结果

大致流程：

• 获取用户id（即要求必须登录）
• 获取房屋信息（json格式）
• 验证参数的完整性（必填的参数，其中设施非必填）
• 对参数作出验证（如价格、押金是否是数字等）
• 验证区域是否在数据库中备案（防止前端传的区域数据是假的）
• 处理设施问题
• 保存数据到数据库
• 返回结果

# houses.py

@api.route('/houses/info', methods=['POST'])
@login_required
def save_house_info():
    """保存房屋的基本信息：发布
    前端发送过来的json数据
    {
        "title": "",
        "price": "",
        "area_id": "",
        "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')  # 最大入住天数

    # 校验必填参数，facility非必填
    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,
        room_count=room_count,
        address=address,
        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:
            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='保存数据成功', data={"house_id": house.id})

在前端，填写房屋的基本信息点击“发布房源信息”，后端返回正确的话会进入上传图片的界面，图片依然保存到七牛服务器中，

大致流程：

• 获取发布的房屋id
• 判断房屋是否存在
• 获取图片信息
• 判断参数的完整性
• 将图片保存到七牛
• 将七牛图片地址更新到数据库
• 返回结果

# houses.py

@api.route('/houses/image',methods=['POST'])
@login_required
def save_house_image():
    """保存房屋图片
    参数：图片，房屋的id
    """
    image_file = request.files.get("house_image")
    house_id = request.form.get('house_id')

    #验证参数的完整性
    if not all([image_file, house_id]):
        return jsonify(errno=RET.PARAMERR, errmsg='参数不完整')

    # 判断房屋是否存在
    try:
        house = House.query.get(house_id)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg='数据库异常')

    if house is None:
        return jsonify(errno=RET.NODATA, errmsg='房屋不存在')

    # 保存图片到七牛
    image_data = image_file.read()
    try:
        file_name = storage(image_data)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.THIRDERR, errmsg='上传图片失败')

    # 保存图片到数据库
    house_image = HouseImage(house_id=house_id,url=file_name)
    db.session.add(house_image)

    # 处理房屋的主图片
    if not house.index_image_url:
        house.index_image_url = file_name
        db.session.add(house)

    try:
        db.session.commit()
    except Exception as e:
        current_app.logger.error(e)
        db.session.rollback()
        return jsonify(errno=RET.DBERR, errmsg='保存图片异常')

    # 返回结果
    image_url = constants.QINIU_URL_DOMAIN + file_name
    return jsonify(errno=RET.OK, errmsg='OK', data={"image_url": image_url})

前端代码编写

前端向后端发起请求，首先要获取数据

// 发布房屋的基本信息
    $('#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);
                }
            }
        });

    });

其中获取数据用到了jq的serializeArray方法和each方法，快速的获取表单数据，而不是一个一个的自己定义...

获取输入框的内容：

获取复选框的内容：

// 发布房屋图片的表单
    $('#form-house-image').submit(function (e) {
        // 阻止表单的默认行为
        e.preventDefault();

        $(this).ajaxSubmit({
            url: '/api/v1.0/houses/image',
            type: 'post',
            dataType: 'json',
            headers: {
                'X-CSRFToken': getCookie('csrf_token')
            },
            success: function (resp) {
                if (resp.errno == '4101'){
                    location.href = '/login.html';
                }else if (resp.errno == '0'){
                    $('.house-image-cons').append('<img src="'+ resp.data.image_url +'"/>');
                }else{
                    alert(resp.errmsg)
                }
            }
        });
    });

发布房屋功能测试