Flask 账号详情展示

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代码部分：

1. {% extends "common/layout_main.html" %}：继承common/layout_main.html模板。
2. <a href="{{ buildUrl('/account/index') }}">：创建一个链接，指向/account/index路径。
    
3. <div class="row m-t">：创建一个带有上边距的行。
4. <div class="row">：创建一个行。
5. <div class="row border-bottom">：创建一个带有边框的行。
    
6. <div class="col-lg-12">：创建一个占据12列的列。
   <div class="col-lg-2 text-center">：创建一个占据2列的列，并居中对齐。
    
7. <div class="m-b-md">：创建一个带有底边距的块。
8. <a class="btn btn-outline btn-primary pull-right" href="{{ buildUrl('/account/set') }}">：创建一个带有编辑图标的按钮，链接到/account/set路径。
   
    
9. <img class="img-circle circle-border" src="{{ buildStaticUrl('/images/common/avatar.png') }}" width="100px" height="100px">：创建一个圆形边框的图片。
    
10. <div class="panel blank-panel">：创建一个空面板。
11. <div class="panel-heading">：创建一个面板标题。
12. <div class="panel-options">：创建一个面板选项。
13. <div class="panel-body">：创建一个面板主体。
    组件 · Bootstrap v3 中文文档 | Bootstrap 中文网   面板
    
     
14. 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"，以指示选项卡已展开。

---

1. <table class="table table-bordered">：创建一个带边框的表格。
    
2. <thead>：表格头部。 </thead> 表格头部结束 
3. <tr>：表格行。
    
4. <th>访问时间</th>：表格头部单元格，显示访问时间。
5. <th>访问Url</th>：表格头部单元格，显示访问URL。
    
6. <tbody>：表格主体。</tbody>：表格主体结束。
7. <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代码部分：

1. @route_account.route( "/info" )：这是一个路由装饰器，用于指定URL路径为/info的请求将会调用下面的函数。
2. def info():：这是一个Python函数，用于处理/info路径的请求。
3. resp_data = {}：创建一个空字典，用于存储响应数据。
4. req = request.args：获取请求参数。
5. uid = int( req.get('id',0 ))：从请求参数中获取id参数，并将其转换为整数类型。
6. reback_url = UrlManager.buildUrl("/account/index")：构建一个返回链接的URL。
7. if uid < 1:：如果uid小于1，则重定向到返回链接。
8. info = User.query.filter_by( uid = uid ).first()：根据uid查询数据库中的用户信息。
9. if not info:：如果没有查询到用户信息，则重定向到返回链接。
10. access_list = AppAccessLog.query.filter_by( uid = uid).order_by(AppAccessLog.id.desc() ).limit(10).all()：根据uid查询数据库中的最近10条访问记录。
11. resp_data['info'] = info：将用户信息存储到响应数据字典中。
12. resp_data['access_list'] = access_list：将访问记录存储到响应数据字典中。
13. return ops_render( "account/info.html",resp_data )：渲染account/info.html模板，并将响应数据传递给模板。