• 个人中心标签页导航

      1. <ul class="zx">
        <li role="presentation"><a href="#">question</a></li>
        <li role="presentation"><a href="#">comments</a></li>
        <li role="presentation"><a href="#">infomation</a></li>
    </ul>
        新页面user.html,用<ul ><li role="presentation"> 实现标签页导航。
        <ul class="nav nav-tabs">
          <li role="presentation"><a href="#">Home</a></li>
          <li role="presentation"><a href="#">Profile</a></li>
          <li role="presentation"><a href="#">Messages</a></li>
        </ul>

      2. user.html继承base.html。
        重写title,head,main块.
        将上述<ul>放在main块中.
        定义新的块user。 
        <!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'test1.html' %}
    <meta charset="UTF-8">

    {% block title %}
        个人中心
    {% endblock %}
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/user.css') }}" charset="utf-8"/>
    {% endblock %}
</head>
<body>
{% block body %}
    <ul class="zx">
        <li role="presentation"><a href="#">question</a></li>
        <li role="presentation"><a href="#">comments</a></li>
        <li role="presentation"><a href="#">infomation</a></li>
    </ul>
    {% block user %}

    {% endblock %}


{% endblock %}
</body>
</html>


      3. 让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。 
        <!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>
        {% block title %}
            用户中心
        {% endblock %}
    </title>

    {% block head %}

    {% endblock %}
</head>
<body>
{% block user %}
    <div class="container">

        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="page-header">
                    <h3>{{ username }}><br>
                        <small>全部问答
                            <span class="badge"></span></small>
                    </h3>
                    <ul>
                        {% for foo in question %}
                            <li>
                                <a href="#">{{ foo.username }}</a>
                                <span class="badge">{{ foo.creat_time }}</span>
                                <p>{{ foo.detail }}</p>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>

        <h3>{{ username }}><br>
            <small>全部评论
                <span class="badge"></span></small>
        </h3>
        {% for foo in comments %}
            <ul style="padding-left: 0px;margin-bottom: 0px;">
            <li style=" 800px">
                <a href="">{{ foo.author.username }}</a>
                <span class="badge">{{ foo.creat_time }}</span>
                <p>{{ foo.detail }}</p>
            </li>
        {% endfor %}
        </ul>
    </div>
    <div>
        <h3>{{ user }}<br>
            <small>个人信息</small>
        </h3>
        <ul style="padding-left: 0px;margin-bottom: 0px;">
            <li>用户：</li>
            <li>编号：</li>
            <li>昵称：</li>
        </ul>
    </div>

{% endblock %}
</body>
</html>


      4. 制作个人中心的三个子页面，重写user.html中定义的user块。

      5. 思考 如何实现点标签页导航到达不同的个人中心子页面。 
        <!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>
        {% block title %}
            用户中心
        {% endblock %}
    </title>

    {% block head %}

    {% endblock %}
</head>
<body>
{% block user %}
    <div class="container">

        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="page-header">
                    <h3>{{ username }}><br>
                        <small>全部问答
                            <span class="badge"></span></small>
                    </h3>
                    <ul>
                        {% for foo in question %}
                            <li>
                                <a href="#">{{ foo.username }}</a>
                                <span class="badge">{{ foo.creat_time }}</span>
                                <p>{{ foo.detail }}</p>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>

        <h3>{{ username }}><br>
            <small>全部评论
                <span class="badge"></span></small>
        </h3>
        {% for foo in comments %}
            <ul style="padding-left: 0px;margin-bottom: 0px;">
            <li style=" 800px">
                <a href="">{{ foo.author.username }}</a>
                <span class="badge">{{ foo.creat_time }}</span>
                <p>{{ foo.detail }}</p>
            </li>
        {% endfor %}
        </ul>
    </div>
    <div>
        <h3>{{ user }}<br>
            <small>个人信息</small>
        </h3>
        <ul style="padding-left: 0px;margin-bottom: 0px;">
            <li>用户：</li>
            <li>编号：</li>
            <li>昵称：</li>
        </ul>
    </div>

{% endblock %}
</body>
</html>
        <!DOCTYPE html>
<html lang="en">
<head>
    {% extends 'user.html' %}
    <meta charset="UTF-8">
    <title>
        {% block title %}
            用户中心
        {% endblock %}
    </title>

    {% block head %}

    {% endblock %}
</head>
<body>
{% block user %}

    <div>
        <h3>{{ user }}<br>
            <small>个人信息</small>
        </h3>
        <ul style="padding-left: 0px;margin-bottom: 0px;">
            <li>用户：</li>
            <li>编号：</li>
            <li>昵称：</li>
        </ul>
    </div>

{% endblock %}
</body>
</html>
  • 相关阅读:
    idea 新建maven项目时，避免每次都需要指定自己的maven目录
    springboot2.X版本得@Transactional注解事务不回滚不起作用
    SpringBoot事务注解@Transactional
    #{}, ${}取值区别
    Mybaits多个参数的传递
    Mybaits基本的CURD操作
    mappers：将sql映射注册到全局配置中
    Mybaits配置多个数据库操作sql环境
    为java类起别名
    Mybaits成长之路
  • 原文地址：https://www.cnblogs.com/lianghaohui123/p/8039993.html
Copyright © 2020-2023  润新知