Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能

第一部分:增加用户喜欢的图片显示页

1.基本步骤先走起来——视图+接口+前端模板

(1)编写视图ProfileHandler:(handlers/main.py文件中加入以下类)

class ProfileHandler(AuthBaseHandler):
    """
    记录用户喜欢的图片
    """
    @tornado.web.authenticated
    def get(self,*args,**kwargs):
        self.render('profile.html')

(2)编写接口:(app.py文件中加入以下接口)

并在父模板中添加跳转此接口的超链接:

Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第1张图片

(3)编写前端模板:(templates文件夹中创建名为profile.html的文件如下)
{% extends 'base.html' %}
{% block title %}profile page{% end %}
{% block content %}

I am profile page <br>

{% end %}

2.用户喜欢的图片显示功能的实现

(1)新增模型类——记录哪个用户喜欢哪些图片:(modles/account.py文件中加入以下类)

class Like(Base):
    """
    记录用户喜欢的图片信息——此表相当于Mysql里的中间表!
    """
    __tablename__='likes'
    user_id = Column(Integer,ForeignKey('users.id'),nullable=False,primary_key=True)
    post_id = Column(Integer,ForeignKey('posts.id'),nullable=False,primary_key=True)
    def __repr__(self):
        return ''.format(self.post_id)

(2)数据库的迁移——项目目录下两句shell命令完成:

alembic revision --autogenerate -m "add likes table"

Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第2张图片

alembic upgrade head

在这里插入图片描述
小知识点提示:
如果迁移的时候报错,有个最好的解决方法如下:(一般情况下的99%的报错都能解决!)

前面我们第一次进行数据库迁移的时候知道了,每次执行第一条迁移命令的时候都会在我们指定的数据库中生成一个名为alembic_version的表,此表是记录迁移记录的,而且始终只有一条数据!如果迁移多次后面的生成的记录会覆盖上一次的记录。这样就避免了我们同一张表迁移多次,因为我们如果多次迁移同一张表的时候,这个迁移记录这条数据是不变的,那么就会报错提醒我们!!!
所以解决报错我们只需要将此表这个值删除,再重新两条命令进行迁移即可!

Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第3张图片


(3)查询当前登录用户喜欢的所有图片并展示在前端页面:

准备工作:
1.创建两到三个用户,每个用户上传六七张图片;
2.手动在likes表中添加几条数据(图片id和用户id对应即可)!

Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第4张图片
Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第5张图片
第一步:编写查询方法get_like_posts_for——查询当前登录用户喜欢的所有图片(utils/account.py文件中加入以下方法)

def get_like_posts_for(username):
    """
    查询当前登录用户喜欢的图片
    :param username:
    :return:
    """
    user = session.query(User).filter_by(name=username).first()
    posts = session.query(Post).filter(Like.user_id==user.id,Like.post_id==Post.id).all()

    return posts

第二步:视图中调用此方法获取到当前登录用户喜欢的所有图片数据并传给前端模板:(handlers/main.py文件中ProfileHandler类修改成如下!)

Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第6张图片
第三步:前端中展示当前登录用户喜欢的图片(templates/profile.html中做如下修改!)

Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第7张图片

测试——完全OK!
登录一个刚刚在likes表中添加了喜欢图片的用户,访问/profile接口:
Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第8张图片

3.增加功能:展示用户喜欢的图片的同时展示用户上传的图片

(1)视图中增加调用get_all_post()方法获取当前登录用户上传的所有图片数据并传给前端模板:(handlers/main.py文件中ProfileHandler类修改成如下!)

Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第9张图片

(2)前端中展示当前登录用户喜欢的图片的同时增加显示其上传的所有图片(templates/profile.html中做如下修改!)

{% extends 'base.html' %}
{% block title %}post page{% end %}
{% block content %}

I am profile page <br>



<div class="card">
    <div class="card-header">
        <h3>{
    { current_user }}用户喜欢的图片h3>
    div>
    <div class="row">
        {% for p in like_posts %}

        <img src="{
      { static_url(p.image_url) }}" width="200"/>
        {
    { p.id }}
        {% end %}
    div>
div>

<div class="card">
    <div class="card-header">
        <h3>{
    { current_user }}用户上传的图片h3>
    div>
    <div class="row">
        {% for p in upload_postss %}
        <img src="{
      { static_url(p.image_url) }}" width="200"/>
        {
    { p.id }}
        {% end %}
    div>
div>

{% end %}

测试——非常完美!

Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第10张图片

第二部分:展示图片有多少用户喜欢

之前在handlers/main.py文件中编写过一个PostHandler视图类用于实现——点击缩略图中任一图片显示图片详情页。但是,之前的图片详情页只是展示图片的原始图,所以,我们此处增加展示图片有多少用户喜欢功能就可以添加到此类中!

(1)编写查询方法get_count_like_for——查询当前图片的喜欢用户数(utils/account.py文件中加入以下方法)

def get_count_like_for(post_id):
    """
    查询指定图片post_id的图片的用户喜欢数
    :param post_id: 
    :return: 
    """
    count = session.query(Like).filter_by(post_id=post_id).count()
    return count

(2)视图中调用此方法获取到指定图片的用户喜欢数并传给前端模板:(handlers/main.py文件中PostHandler类修改成如下!)Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第11张图片

(3)前端中展示图片用户喜欢数(templates/post.html中做如下修改!)Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第12张图片

测试——完美实现:

Eleven——tornado操作之增加用户喜欢的图片展示页+同时展示用户上传的所有图片;增加展示图片有多少用户喜欢功能_第13张图片

你可能感兴趣的:(tornado,mysql,tornado,数据库,python)