zoukankan      html  css  js  c++  java
  • 个人中心标签页导航

    1.新页面user.html,用<ul ><li role="presentation"> 实现标签页导航。

    2.user.html继承base.html。
    重写title,head,main块.
    将上述<ul>放在main块中.
    定义新的块user。

    {% extends"lx3.html" %}
    {% block logintitle %}个人中心{% endblock %}
    {% block loginhead %}
        <style>
        .nav_ul li{
            list-style: none;
            float: left;
            margin: 10px;
        }
        </style>
    
    {% endblock %}
    {% block body %}
    <ul class="nav_ul">
    <li role="presentation"><a href="{{ url_for('all_question',user_id = username_id) }}">全部问答</a></li>
    <li role="presentation"> <a href="{{ url_for('all_comment',user_id = username_id) }}">全部评论</a></li>
    <li role="presentation"><a href="{{ url_for('usercenter',user_id = username_id) }}">个人信息</a></li>
    </ul>
    {% block user %}{% endblock %}
    
    {% endblock %}

    3.让上次作业完成的个人中心页面,继承user.html,原个人中心就自动有了标签页导航。
    4.制作个人中心的三个子页面,重写user.html中定义的user块。

    {% extends 'user.html' %}
    {% block user %}
    
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-2 column">
                </div>
                <div class="col-md-8 column" id="rgba1">
                    <p class="text-center">
                        <small>{{ username }}</small>
                    </p>
                    <hr>
                    <h3 align="center">
                        <small>全部问答</small>
                    </h3>
                    <ul class="list-unstyled">
                        {% for foo in questions %}
                            <li class="list-group-item">
                                <span class="glyphicon glyphicon-user"></span><a>{{ foo.author.username }}</a>
                                <p>标题:{{ foo.title }}</p>
                                <span class="badge pull-right">{{ foo.create_time }}</span>
                                <p>问答内容:{{ foo.detail }}</p>
                                <br>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="col-md-2 column">
                </div>
            </div>
        </div>
    {% endblock %}
    {% extends 'user.html' %}
    {% block user %}
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-2 column">
            </div>
            <div class="col-md-8 column"  id="rgba1">
    
        <p class="text-center"><small>{{ username }}</small></p>
            <hr>
            <h3 align="center">
                <small>全部评论</small>
            </h3>
            <ul class="list-unstyled">
                {% for foo in comments %}
                    <li class="list-group-item">
    
                        <span class="badge pull-right">{{ foo.create_time }}</span>
                        <p>文章标题:{{ foo.question.title }}</p>
                        <p>评论内容:{{ foo.detail }}</p>
                        <span class="glyphicon glyphicon-user"></span><small ><a>{{ foo.author.username }}</a></small>
                        <br>
                    </li>
                {% endfor %}
            </ul>
            </div>
            <div class="col-md-2 column">
            </div>
        </div>
    </div>
    {% endblock %}
    {% extends 'user.html' %}
    {% block user %}
    
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-2 column">
                </div>
                <div class="col-md-8 column" id="rgba1">
                    <p class="text-center">
                        <small>{{ username }}</small>
                    </p>
                    <hr>
                    <h3 align="center">
                        <small>全部问答</small>
                    </h3>
                    <ul class="list-unstyled">
                        {% for foo in questions %}
                            <li class="list-group-item">
                                <span class="glyphicon glyphicon-user"></span><a>{{ foo.author.username }}</a>
                                <p>标题:{{ foo.title }}</p>
                                <span class="badge pull-right">{{ foo.create_time }}</span>
                                <p>问答内容:{{ foo.detail }}</p>
                                <br>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="col-md-2 column">
                </div>
            </div>
        </div>
    {% endblock %}

    py文件:

    @app.route('/all_comment/<user_id>')
    def all_comment(user_id):
        user = User.query.filter(User.id == user_id).first()
        context = {
            'username_id': user.id,
            'username': user.username,
            'questions': user.question,  # 用反向定义的question
            'comments': user.comment
        }
    
        return render_template('all_comment.html',**context)
    
    
    @app.route('/all_question/<user_id>')
    def all_question(user_id):
        user = User.query.filter(User.id == user_id).first()
        context = {
            'username_id': user.id,
            'username': user.username,
            'questions': user.question,  # 用反向定义的question
            'comments': user.comment
        }
        return render_template('all_question.html',**context)

  • 相关阅读:
    6月15日学习日志
    6月14日学习日志
    6月13日学习日志
    6月12日学习日志
    给建民哥的意见
    6月10日学习日志
    6月9日学习日志
    6月8日学习日志
    梦断代码读书笔记3
    第二次冲刺(六)
  • 原文地址:https://www.cnblogs.com/zheng01/p/8037284.html
Copyright © 2011-2022 走看看