python flask智能租房项目——详情页

基本信息展示

1. 后端接⼝设计

接⼝描述 接⼝参数
请求⻚⾯ 详情⻚
请求⽅式 GET
请求地址 /house/int:hid
返回数据 房源对象，包括：id、address、rooms、area、price、liulanliang等信息
房源数据所需字段如下：
参数 类型 说明
id int 房源id
title str 标题
rooms str 户型
area str ⾯积
price str 价格
addr str 房源地址
traffic str 交通情况
region str 地区
direction str 朝向
type str 浏览量
time int 发布时间，格式是时间戳
liangdian str 房屋亮点
sheshi str 房屋⾃带的电器、家具等设施
tel str 房东电话

2. 后端逻辑

# 实现房源的基本信息展示
"""
1. 创建⼀个视图函数 动态路由 /house/<int:hid> method=get
2. 使⽤房源编号 通过sqlalchemy获取编号对应的房源对象 就可以获取对象中的信息了
3. 使⽤render_template进⾏模板的渲染
"""
@detail_page.route('/house/<int:hid>')
def detail(hid):
# 使⽤房源编号 通过sqlalchemy获取编号对应的房源对象
house = House.query.get(hid)
# 处理配套设施的数据，变换成列表
sheshi_str = house.sheshi # 床-宽带-洗⾐机-空调-热⽔器-暖⽓
sheshi_list = sheshi_str.split('-')
return render_template('detail_page.html', house=house, sheshi=sheshi_list)

配套设施
之前我们存放在数据库中的配套设施信息是这样的
空调-热⽔器-暖⽓-可做饭-卫⽣间
所以我们在使⽤的时候，需要对其进⾏处理，转换成 [‘空调’, ‘热⽔器’,‘暖⽓’,‘可做饭’,‘卫⽣间’]

3. 前端逻辑

<!--大标题-->
                    <div class="col-lg-12 col-md-12 detail-header">
                        <h3>{
  { house.address }}&nbsp{
  { house.rooms }}</h3>
                        <div class="describe">
                            <span>为您精准定位，当前城市房源信息</span>
                        </div>
                    </div>
                    <!--左详情-->
                    <div class="col-lg-8 col-md-8">
                        <div class="course">

                            <!--图-->
                            <div><a href="#"><img class='img-fluid img-box' src="/static/img/house-bg1.jpg" alt=""></a>
                            </div>
                            <!--价格-->
                            <div class="house-info">
                                <span class="price">￥&nbsp{
  { house.price }}/月</span>
                                <span class="collection" id="btn-collection"><a><i class="fa fa-heart"
                                                                                   aria-hidden="true"> 收藏</i></a></span>
                            </div>

                            <!--基本信息标题-->
                            <div class="attribute-header">
                                <h4>基本信息</h4>
                            </div>
                            <!--属性1-->
                            <div class="row attribute-info">
                                <div class="col-lg-2 col-md-2">
                                    <span class="attribute-text">基本属性</span>
                                </div>
                                <div class="col-lg-4 col-md-4">
                                    <div>
                                        <span class="attribute-text">房屋户型：</span>
                                        <span class="info-text">{
  { house.rooms }}</span>
                                    </div>
                                    <div>
                                        <span class="attribute-text">建筑面积：</span>
                                        <span class="info-text">{
  { house.area }}平米</span>
                                    </div>
                                    <div>
                                        <span class="attribute-text">房屋朝向：</span>
                                        <span class="info-text">{
  { house.direction }}</span>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6">
                                    <div>
                                        <span class="attribute-text">所在区域：</span>
                                        <span class="info-text">{
  { house.address }}</span>
                                    </div>
                                    <div>
                                        <span class="attribute-text">租住类型：</span>
                                        <span class="info-text">{
  { house.rent_type }}</span>
                                    </div>
                                    <div>
                                        <span class="attribute-text">房东电话：</span>
                                        <span class="info-text">{
  { house.phone_num }}</span>
                                    </div>
                                </div>
                            </div>
                            <!--属性2-->
                            <div class="row attribute-info">
                                <div class="col-lg-2 col-md-2">
                                    <span class="attribute-text">房屋卖点</span>
                                </div>
                                <div class="col-lg-8 col-md-8">
                                    <div>
                                        <span class="attribute-text">交通条件：</span>
                                        <span class="info-text">{
  { house.traffic | dealNone }}</span>
                                    </div>
                                    <div>
                                        <span class="attribute-text">优势条件：</span>
                                        <span class="info-text">{
  { house.title }}</span>
                                    </div>
                                </div>

                            </div>

                            <!--房源配套设施-->
                            <div class="attribute-header">
                                <h4>房源配套设施</h4>
                            </div>
                            <!--设施列表-->
                            <div class="row attribute-info">
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-1"></span>

                                    {% if '冰箱' in sheshi %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">冰箱</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>冰箱</s></span>
                                    {% endif %}
                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-2"></span>
                                    {% if '洗衣机' in sheshi %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">洗衣机</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>洗衣机</s></span>
                                    {% endif %}

                                </div>
                                <div class="col-lg-2 col-md-2">
                                    <span class="icon-3"></span>

                                    {% if '电视' in sheshi %}
                                    <span class="attribute-text-sm" style="color: #f1c40f">电视</span>
                                    {% else %}
                                    <span class="attribute-text-sm"><s>电视</s></span>
                                    {% endif %}
                                </div