前端请求

获取请求图片信息，通过切片处理得到图片id，进行字符串拼接后作为请求地址的一部分向后台提出请求。得到后台传递的数据后，先遍历图片信息，做一个房屋图片轮播图的效果。在依次加载房屋其它信息，并逐一渲染至页面。最后判断此房屋是否为该用户所有，若是则隐藏预定按钮，若不是则展示预定按钮。

$.get('/house/detail/', function(data){
    var search = document.location.search
    id = search.split('=')[1]
    $.get('/house/detail/' + id + '/', function(data){
        var banner_image = ''
        console.log(data.house)
        for(var i=0; i<data.house.images.length; i++){
            banner_li = '<li class="swiper-slide"><img src="' + data.house.images[i] + '"></li>'
            banner_image += banner_li
        }
        $('.swiper-wrapper').html(banner_image)

        var mySwiper = new Swiper ('.swiper-container', {
            loop: true,
            autoplay: 2000,
            autoplayDisableOnInteraction: false,
            pagination: '.swiper-pagination',
            paginationType: 'fraction'
        })

        $('.house-price').html('￥<span>' + data.house.price + '</span>/晚')

        $('.house-info-address').html(data.house.address)

        $('.house-title').html(data.house.title)

        $('.landlord-name').html('房东： <span>' + data.house.user_name + '</span>')

        $('.landlord-pic').html('<img src="' + data.house.user_avatar + '">')

        $('.house-type-detail').html('<h3>出租' + data.house.room_count + '</h3><p>房屋面积:' + data.house.acreage + '平米</p><p>房屋户型:' + data.house.unit + '</p>')

        $('.house-capacity').html('<h3>宜住' + data.house.capacity + '人</h3>')

        $('.house-bed').html('<h3>卧床配置</h3><p>' + data.house.beds + '</p>')

        var house_info_style = '<li>收取押金<span>' + data.house.deposit + '</span></li>'
        house_info_style += '<li>最少入住天数<span>' + data.house.min_days + '</span></li>'
        house_info_style += '<li>最多入住天数<span>' + data.house.max_days + '</span></li>'
        $('.house-info-style').html(house_info_style)

        var house_facility_list = ''
        for(var i=0; i<data.facility_list.length; i++){
            house_facility_list += '<li><span class="' + data.facility_list[i].css + '"></span>' + data.facility_list[i].name + '</li>'
        }
        $('.house-facility-list').html(house_facility_list)

        $('.book-house').attr('href', '/house/booking/?id=' + data.house.id)

        //判断是否显示预订按钮
        if(data.booking==1){
            $(".book-house").show();
        }else{
            $(".book-house").hide();
        }
    });
});

后台处理

收到来自前端的请求后，根据传回来的图片id查询数据库中该id的房屋信息，并判断该房屋是否为该用户所有，并将结果返回给前端。

@house_blueprint.route('/detail/')
def detail():
    return render_template('detail.html')


@house_blueprint.route('/detail/<int:id>/')
def house_detail(id):
    # 查询房屋信息
    house = House.query.get(id)
    # 查询设施信息
    facility_list = house.facilities
    facility_dict_list = [facility.to_dict() for facility in facility_list]
    # 判断当前房屋信息是否为当前登录的用户发布，如果是则不显示预订按钮
    booking = 1
    if 'user_id' in session:
        if house.user_id == session['user_id']:
            booking = 0

    return jsonify(house=house.to_full_dict(), facility_list=facility_dict_list, booking=booking)