上传图片和收藏图片浏览功能的实现(二十)

一、具体实现步骤如下

1、编写相关处理请求的ProfileHandler类(在main.py中进行实现)

class ProfileHandler(BaseHandler):
    """
    查看个人和各个用户的上传图片和收藏的图片
    """
    @tornado.web.authenticated
    def get(self):
        username = self.get_argument('username', '')
        user = self.orm.get_user(username)
        username_current = self.current_user
        user_id = self.db_session.query(User.id).filter_by(username=username).first()[0]
        post_ids = self.db_session.query(LikePost.post_id).filter_by(user_id=user_id).all()
        list_post = []
        if post_ids:
            for post_id in post_ids:
                   every_post = self.db_session.query(Post).filter_by(id=post_id[0]).first()
                   list_post.append(every_post)
        else:
            list_post = []
        self.render('profile.html', user=user, like_post=list_post, username_current=username_current)

2、编写前端代码profile.html页面

<!DOCTYPE html>
<html lang="zh-CN" >
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../static/upload/hu.ico">
    <title>个人上传和收藏图片界面</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/signin.css" rel="stylesheet">
  </head>
  <body style="background-color: darkslategrey">
  <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
               {% if username_current!= None %}
          <a class="navbar-brand" href="#">当前在线用户:<font style="color: yellow;font-size:20px">{{ username_current }}</font></a>
             {% end %}
            <a class="navbar-brand" href="#" style="margin-left: 250px"><font color="yellow">{{ user.username }}</font>共上传<font style="color: yellow;font-size:20px">{{ len(user.posts) }}</font>张图片</a>
             <a class="navbar-brand" href="#" style="margin-left: 30px">共喜欢<font style="color: yellow;font-size:20px">{{ len(like_post) }}</font>张图片</a>/
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
               <li style="margin-right:40px "><a href="/logout"><font style="color: yellow;font-size:20px">退出</font></a></li>

          </ul>
        </div>
      </div>
    </nav>


    <div class="container"  style="margin-top: 15px;color: black;margin-left: 130px">
        <h4><font color="yellow">{{ user.username }}</font>上传图片如下(用户编号为{{ user.id }}):</h4>
        {% for post in user.posts %}
        <a href="/one_picture/{{ post.id }}"><img src="{{ static_url(post.image_url) }}" width="170" height="170"></a>
        {% end %}<br>
        <h4><font color="yellow">{{ user.username }}</font>收藏的图片如下:</h4>
        {% for post in like_post %}
        <a href="/one_picture/{{ post.id }}"><img src="{{ static_url(post.thumb_url) }}" width="170" height="170"></a>
        {% end %}
    </div>
  </body>
</html>

3、配置相关的路由

 (r'/profile', main.ProfileHandler),
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,124评论 0 3
  • 最近看了Flask Web开发:基于Python的Web应用开发实战,书中详细介绍了Web程序的开发、测试、部署过...
    SheHuan阅读 12,818评论 2 33
  • 2018-10-03 姓名 :李宏清(单位)扬州市方圆建筑工程有限公司 哈尔滨363期反省二组 【日精进打卡第 ...
    李宏清阅读 877评论 0 0
  • 望着江面摇曳的光影,听着波涛一浪又一浪的起伏,她扬起的嘴角上舔到了一滴滴咸咸的味道,努努嘴,泪控制不住的哗啦啦的往...
    心形叶灌木阅读 1,937评论 0 0
  • 2018年3月19日 周一 雨 大家好,我是日记星球18号星宝宝雪云,正在参加第十五期蜕变之旅,这是我的第33...
    陈雪云2021阅读 2,463评论 0 1