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.args
uid = 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'] = info
resp_data['access_list'] = access_list
return 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模板，并将响应数据传递给模板。
1444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
