爱家（租房系统）---- 首页（调整部分代码结构）

调整部分代码结构

将注册、登录和退出、个人中心的接口在首页右上角显示。通过访问后台得到反馈后决定展示注册、登录或者是退出、个人中心（连接：展示内容为用户昵称）。修改个人中心中的退出按钮为返回首页按钮，且修改登录成功之后的调转页面为首页，而非个人中心。毕竟登录的按钮在首页上，登录成功之后给出提示继续回到首页，接下来的操作由用户自己选择。我觉得这样调整用户体验会好一些。

首页内容

依轮播的形式展示最新录入的五所房屋信息，右上角根据登录状态动态改变显示内容。轮播图下面是搜索条件对应下拉框及搜索按钮，若接收不到信息则默认在搜索页面展示所有房屋信息。所有房屋信息提供具体信息，用户选择预定功能的时候根据登录状态发出不一样的提醒。

业务逻辑

跳转至首页，返回数据库中最新的五个房屋信息。并判断当前session中是否有值，以此判断当前用户是否登录。若无登录，只返回数据库中最新的五个房屋信息；若已登录，则返回表示用户已登录的状态码和用户名即可。

'''
首页展示
'''
@house_blueprint.route('/index/')
def house():
    return render_template('index.html')


'''
查询数据库中当前用户数据
'''
@house_blueprint.route('/hindex/', methods=['GET'])
def index():
    # 返回最新的5个房屋信息
    hlist = House.query.order_by(House.id.desc()).all()[:5]
    hlist2 = [house.to_dict() for house in hlist]
    # 查找地区信息
    area_list = Area.query.all()
    area_dict_list = [area.to_dict() for area in area_list]
    if 'user_id' in session:
        user = User.query.filter_by(id=session['user_id']).first()
        user_name = user.name
        code = status_code.OK
        return jsonify(code=code, name=user_name, hlist=hlist2, alist=area_dict_list)
    return jsonify(hlist=hlist2, alist=area_dict_list)

页面预加载之前发出的请求

根据后台的反馈展示其反馈过来的数据。

$(document).ready(function(){
    $('.modal').on('show.bs.modal', centerModals);      //当模态框出现的时候
    $(window).on('resize', centerModals);               //当窗口大小变化的时候
    $("#start-date").datepicker({
        language: "zh-CN",
        keyboardNavigation: false,
        startDate: "today",
        format: "yyyy-mm-dd"
    });
    $("#start-date").on("changeDate", function() {
        var date = $(this).datepicker("getFormattedDate");
        $("#start-date-input").val(date);
    });

//  首页获取区域信息
    $.get('/house/hindex/', function(data){

        if(data.code == '200'){
             $('.register-login').hide()
             $('.user-info').show().find('.user-name').text(data.name)
        }else{
            $('.user-info').hide()
            $('.register-login').show()
        }

        var area_html = template('home-area-list', {areas:data.alist})
        $('.area-list').html(area_html)

        $(".area-list a").click(function(e){
            $("#area-btn").html($(this).html());
            $(".search-btn").attr("area-id", $(this).attr("area-id"));
            $(".search-btn").attr("area-name", $(this).html());
            $("#area-modal").modal("hide");
        });

        var swiper_html = template('house_list', {hlist:data.hlist})
        $('.swiper-wrapper').html(swiper_html)

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

退出功能

首页退出之后不做页面跳转，访问路由清空session值，隐藏用户名和退出的按钮，展示登录注册的按钮。

function logout(){
    $.ajax({
        url: '/user/logout/',
        type: 'DELETE',
        success: function (data) {
            if (data.code == '200') {
                $(".user-info").hide();
                $(".register-login").show();
            }
        }
    });
}