45 - 个人博客项目-16 - 我的相册

1. templstes / user / myphoto.html 新建我的相册页面

        (1). 继承公共模板

{% extends 'base.html' %}
{% block title %}
    相册列表
{% endblock %}

        (2). 编写样式

{% block styles %}
    {{ super() }}
    <style>
        #container {
            padding-top: 30px;
            width: 1000px;
            height: 500px;
            margin: 20px auto;
        }
 
        img {
            width: 50%;
            height: 50%;
        }
 
        #photo {
            text-align: center;
            margin-top: 30px;
        }
    </style>
{% endblock %}

        (3). 编写内容

{% block newcontent %}
    <div id="container">
        {% for photo in photos.items %}
            <div id="photo">
<!--                访问骑牛云上的图片,需要七牛云生成的链接-->
                <img src="http://rveq0tjn6.hn-bkt.clouddn.com/{{ photo.photo_name }}">
            </div>
        {% endfor %}
        <nav aria-label="...">
            <ul class="pager">
                <li class="previous {% if not photos.has_prev %}disabled{% endif %}"><a
                        href="{{ url_for('user.myphoto') }}?page={{ photos.prev_num }}"><span
                        aria-hidden="true">&larr;</span> 上一页</a></li>
 
                <li class="next {% if not photos.has_next %}disabled{% endif %}"><a
                        href="{{ url_for('user.myphoto') }}?page={{ photos.next_num }}">下一页 <span
                        aria-hidden="true">&rarr;</span></a></li>
            </ul>
        </nav>
    </div>
 
 
{% endblock %}

2. apps / user / views.py 编写我的相册函数

# 我的相册
@user_bp.route("/myphoto")
def myphoto():
    # 如果不转成整形,默认是str类型
    page = int(request.args.get('page', 1))
    # 分页操作
    # photos是一个pagination类型
    photos = Photo.query.paginate(page=page, per_page=3)
 
    user_id = session.get("uid", None)
    user = None
    if user_id:
        user = User.query.get(user_id)
    return render_template("user/myphoto.html", photos=photos, user=user)
 

3. .base.html配置我的相册页面路径

<li><a href="{{ url_for('user.myphoto') }}">我的相册</a></li>