蓝图
使⽤蓝图可以分为三个步骤
创建⼀个蓝图对象
admin=Blueprint('admin',__name__)
在这个蓝图对象上进⾏操作,注册路由,指定静态⽂件夹,注册模版过滤器
@admin.route('/')
def admin_home():
return 'admin_home'
在应⽤对象上注册这个蓝图对象
app.register_blueprint(admin,url_prefix='/admin')
当这个应⽤启动后,通过/admin/可以访问到蓝图中定义的视图函数
搜索列表页
1. 后端接口设计
接⼝描述 接⼝参数
请求⻚⾯ 搜索功能列表⻚
请求⽅式 GET
请求地址 /query
返回数据 房源对象
每⼀组的房源数据所需字段如下:
参数 类型 说明
id int 房源id
addr str 房源地址
rooms str 户型
area str ⾯积
price str 价格
seen int 浏览量
direction str 朝向
trattic str 交通情况,如果没有显示暂⽆数据!
title str 标题
2. 后端逻辑
在 list_page.py ⽂件中完成此功能。
"""
实现搜索列表页的功能
1. 定义一个路由为 /query的视图函数
2. 使用request 获取到请求字段 具体的查询信息
3. 使用sqlalchemy 在字段中 查询具体的信息 获取满足这个条件的房源
4. 使用publish_time字段,进行降序排序
5. 使用render_template进行渲染
"""
@list_page.route('/query') # http://127.0.0.1:5000/query?addr=朝阳-三里屯-三里屯SOHO
def search_txt_info():
# 获取地区字段的查询
if request.args.get('addr'):
addr = request.args.get('addr')
result = House.query.filter(House.address == addr).order_by(House.publish_time.desc()).all()
print(result)
return render_template('sousuo_list.html', house_list=result)
# 获取户型字段的查询
if request.args.get('rooms'):
rooms_info = request.args.get('rooms')
result = House.query.filter(House.rooms == rooms_info).order_by(House.publish_time.desc()).all()
return render_template('sousuo_list.html', house_list=result)
3. 前端逻辑
3.1 完成点击结果的逻辑
正确返回的结果,执⾏js代码将其添加在到 id=list 的ul标签中。这⾥需要注意的是,我们需要给此处添加⼀个选择搜索结果的点击事件 info_to_txt 函数。info_to_txt 函数会将选择的搜索结果,放到 input 输⼊框中,并清空刚才返回的搜索列表。
// 点击检索项 将其 填入 搜索框
function info_to_txt() {
$('.li_style').on('click', function () {
// 实现了 重复点击的初始化
if ($(this).hasClass('active')) {
$(this).removeClass('active');
}
$(this).addClass('active');
t_name = $(this).attr('title');
$('#txt').val('');
$('#txt').val(t_name);
$('#list').empty()
});
}
3.2 HTML代码
<!-- 模块1信息展示 -->
<div class="collection col-lg-10">
{% for house in house_list %}
<div class="row collection-line">
<div class="col-lg-5 col-md-5 mx-auto">
<div><a href="/house/{
{ house.id }}"><img class='img-fluid img-box' src="/static/img/house-bg1.jpg"
alt=""></a></div>
</div>
<div class="col-lg-5 col-md-5 mx-auto">
<div class="collection-line-info"