Flask 账号详情展示

发布时间:2023年12月28日

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的navnav-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.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代码部分:

  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模板,并将响应数据传递给模板。
文章来源:https://blog.csdn.net/xinzhengLUCK/article/details/135213420
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。