Flask 账号详情展示

2023-12-28 22:27:34

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模板，并将响应数据传递给模板。

文章来源:https://blog.csdn.net/xinzhengLUCK/article/details/135213420
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！