临漳+网站建设学校培训
Flask 账号详情展示
这段代码是一个基于Flask框架的Python应用程序。
它包含了两部分代码：Python代码和HTML代码。
web/templates/common/tab_account.html
<div class="row border-bottom"><div class="col-lg-12"><div class="tab_title"><ul class="nav nav-pills"><li class="current"><a href="{{ buildUrl('/account/index') }}">账户列表</a></li></ul></div></div>
</div> <ul class="nav nav-pills">：
组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 胶囊式标签页
这就是几个类名用以css定义样式。
wtb/static/css/style.css
.tab_title .nav > li > a{color: #666;font-weight: 600;padding: 14px 20px 14px 25px;
}.tab_title .nav li.current{border-bottom: 4px solid #1ab394;
}.tab_title .nav>li>a:focus, .tab_title .nav>li>a:hover{text-decoration: none;background-color: #fff;
}JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网 Togglable tabs
web/templates/account/info.html
{% extends "common/layout_main.html" %}
{% block content %}
{% include "common/tab_account.html" %}
<div class="row m-t"><div class="col-lg-12"><div class="row"><div class="col-lg-12"><div class="m-b-md"><a class="btn btn-outline btn-primary pull-right" href="{{ buildUrl('/account/set') }}?id={{ info.uid }}"><i class="fa fa-pencil"></i>编辑</a><h2>账户信息</h2></div></div></div><div class="row"><div class="col-lg-2 text-center"><img class="img-circle circle-border" src="{{ buildStaticUrl('/images/common/avatar.png') }}" width="100px" height="100px"></div><div class="col-lg-10"><p class="m-t">姓名：{{ info.nickname }}</p><p>手机：{{ info.mobile }}</p><p>邮箱：{{ info.email }}</p></div></div><div class="row m-t"><div class="col-lg-12"><div class="panel blank-panel"><div class="panel-heading"><div class="panel-options"><ul class="nav nav-tabs"><li class="active"><a href="javascript:void(0);" data-toggle="tab" aria-expanded="false">访问记录</a></li></ul></div></div><div class="panel-body"><div class="tab-content"><div class="tab-pane active"><table class="table table-bordered"><thead><tr><th>访问时间</th><th>访问Url</th></tr></thead><tbody>{% if access_list %}{% for item in access_list %}<tr><td>{{ item.created_time }}</td><td>{{ item.target_url }}</td><td></td></tr>{% endfor %}{% else %}<tr><td colspan="2">暂无数据~~</td></tr>{% endif %}</tbody></table></div></div></div></div></div></div></div>
</div>
{% endblock %}<div class="m-b-md"><a class="btn btn-outline btn-primary pull-right" href="{{ buildUrl('/account/set') }}"><i class="fa fa-pencil"></i>编辑</a><h2>账户信息</h2></div></div></div><div class="row"><div class="col-lg-2 text-center"><img class="img-circle circle-border" src="{{ buildStaticUrl('/images/common/avatar.png') }}" width="100px" height="100px"></div><div class="col-lg-10"><p class="m-t">{{ info.nickname }}</p><p>手机：{{ info.mobile }}</p><p>邮箱：{{ info.mobile }}</p></div></div><div class="row m-t"><div class="col-lg-12"><div class="panel blank-panel"><div class="panel-heading"><div class="panel-options"><ul class="nav nav-tabs"><li class="active"><a href="javascript:void(0);" data-toggle="tab" aria-expanded="false">访问记录</a></li></ul></div></div><div class="panel-body"><div class="tab-content"><div class="tab-pane active"><table class="table table-bordered"><thead><tr><th>访问时间</th><th>访问Url</th></tr></thead><tbody><tr><td colspan="2">暂无数据</td></tr></tbody></table></div></div></div></div></div></div></div>
</div>
{% endblock %}
HTML代码部分：
{% extends "common/layout_main.html" %}：继承common/layout_main.html模板。<a href="{{ buildUrl('/account/index') }}">：创建一个链接，指向/account/index路径。
<div class="row m-t">：创建一个带有上边距的行。<div class="row">：创建一个行。<div class="row border-bottom">：创建一个带有边框的行。
<div class="col-lg-12">：创建一个占据12列的列。<div class="col-lg-2 text-center">：创建一个占据2列的列，并居中对齐。
<div class="m-b-md">：创建一个带有底边距的块。<a class="btn btn-outline btn-primary pull-right" href="{{ buildUrl('/account/set') }}">：创建一个带有编辑图标的按钮，链接到/account/set路径。
<img class="img-circle circle-border" src="{{ buildStaticUrl('/images/common/avatar.png') }}" width="100px" height="100px">：创建一个圆形边框的图片。
<div class="panel blank-panel">：创建一个空面板。<div class="panel-heading">：创建一个面板标题。<div class="panel-options">：创建一个面板选项。<div class="panel-body">：创建一个面板主体。
组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 面板
- JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网JavaScript 插件 ·
JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网 Togglable tabs
问题： 如何设置一个选项卡？
<ul class="nav nav-tabs"><li class="active"><a href="javascript:void(0);" data-toggle="tab" aria-expanded="false">访问记录</a></li>
</ul>展示了一个带有选项卡的导航栏：这段代码使用了Bootstrap的nav和nav-tabs类来创建一个导航栏，并使用active类来指定默认选项卡。选项卡的内容可以在<a>标签内添加。
问题：aria-expanded="false"是什么？
<div class="tab-pane active"><table class="table table-bordered"><thead><tr><th>访问时间</th><th>访问Url</th></tr></thead><tbody><tr><td colspan="2">暂无数据</td></tr></tbody></table>
</div>tab作用是创建一个选项卡（tab）布局，用于在多个内容之间进行切换。在给定的代码中，tab作用是创建一个包含表格的选项卡布局，其中包含两个选项卡（tab-pane），一个是活动状态（active），另一个是非活动状态。用户可以通过点击选项卡来切换显示的内容
aria-expanded="false"是一个HTML属性，用于指示元素的展开状态。
当aria-expanded的值为"false"时，表示元素是收起状态；
当aria-expanded的值为"true"时，表示元素是展开状态。
在给定的HTML代码中，aria-expanded=“false"用于指示访问记录选项卡的展开状态。
当访问记录选项卡未展开时，aria-expanded的值为"false”。
当用户点击选项卡时，aria-expanded的值可能会更改为"true"，以指示选项卡已展开。
<table class="table table-bordered">：创建一个带边框的表格。
<thead>：表格头部。 </thead> 表格头部结束<tr>：表格行。
<th>访问时间</th>：表格头部单元格，显示访问时间。<th>访问Url</th>：表格头部单元格，显示访问URL。
<tbody>：表格主体。</tbody>：表格主体结束。<tr><td colspan="2">暂无数据</td></tr>：表格行，显示暂无数据。
web/controllers/account/Account.py
@route_account.route( "/info" )
def info():resp_data = {}req = request.argsuid = int( req.get('id',0 ))reback_url = UrlManager.buildUrl("/account/index")if uid < 1:return redirect( reback_url )info = User.query.filter_by( uid = uid ).first()if not info:return redirect( reback_url )access_list = AppAccessLog.query.filter_by( uid = uid).order_by(AppAccessLog.id.desc() ).limit(10).all()resp_data['info'] = inforesp_data['access_list'] = access_listreturn ops_render( "account/info.html",resp_data )Python代码部分：
@route_account.route( "/info" )：这是一个路由装饰器，用于指定URL路径为/info的请求将会调用下面的函数。def info():：这是一个Python函数，用于处理/info路径的请求。resp_data = {}：创建一个空字典，用于存储响应数据。req = request.args：获取请求参数。uid = int( req.get('id',0 ))：从请求参数中获取id参数，并将其转换为整数类型。reback_url = UrlManager.buildUrl("/account/index")：构建一个返回链接的URL。if uid < 1:：如果uid小于1，则重定向到返回链接。info = User.query.filter_by( uid = uid ).first()：根据uid查询数据库中的用户信息。if not info:：如果没有查询到用户信息，则重定向到返回链接。access_list = AppAccessLog.query.filter_by( uid = uid).order_by(AppAccessLog.id.desc() ).limit(10).all()：根据uid查询数据库中的最近10条访问记录。resp_data['info'] = info：将用户信息存储到响应数据字典中。resp_data['access_list'] = access_list：将访问记录存储到响应数据字典中。return ops_render( "account/info.html",resp_data )：渲染account/info.html模板，并将响应数据传递给模板。