用户查看个人上传图片和所有图片功能的实现（十七）
2020-04-15 本文已影响0人
梦捷者
一、用户查看个人上传图片功能的实现
1、编写相关出处理get方法的个人图片上传相关类（在main.py模块中进行）
class PostHandler(BaseHandler):
"""
单个图片详情页面 /post/id PostHandler
"""
@tornado.web.authenticated
def get(self, post_id):
session = Session()
user = session.query(User).filter_by(username=self.current_user).first()
if post_id == str(user.id):
posts = session.query(Post).filter_by(user_id=post_id).all()
self.render('post.html', post_id=post_id, posts=posts, username=self.current_user)
else:
self.redirect('/upload')
session.close()
2、增加相关路由
handlers = [(r'/post/(?P<post_id>[0-9]+)', main.PostHandler),]
3、post.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!= None %}
<a class="navbar-brand" href="#">当前在线用户：<font style="color: yellow;font-size:20px">{{ username }}</font></a>
{% end %}
<a class="navbar-brand" href="#" style="margin-left: 350px">共上传<font style="color: yellow;font-size:20px">{{ len(posts) }}</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>个人上传图片如下（用户编号为{{ post_id }}）：</h4>
{% for post in posts %}
<img src="{{ static_url(post.image_url) }}" width="200" height="200">
{% end %}<br>
<h4>形成的缩略图片如下：</h4>
{% for post in posts %}
<img src="{{ static_url(post.thumb_url) }}" width="150" height="150">
{% end %}
</div>
</body>
</html>
一、用户查看所有上传图片功能的实现
1、编写相关出处理get/post方法的所有图片上传相关类（在main.py模块中进行）
class ExploreHandler(BaseHandler):
"""
发现或最近上传的图片页面 /explore ExploreHandler
"""
@tornado.web.authenticated
def get(self):
posts = get_all_posts()
self.render('explore.html', posts=posts, username=self.current_user)
def post(self):
pass
2、编写get_all_posts方法来进行获取所有的图片
def get_all_posts():
"""
获取所有图片
"""
session = Session()
data_all = session.query(Post).all()
session.close()
return data_all
3、前端代码的实现(explore.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!= None %}
<a class="navbar-brand" href="#">当前在线用户：<font style="color: yellow;font-size:20px">{{ username }}</font></a>
{% end %}
<a class="navbar-brand" href="#" style="margin-left: 350px">共<font style="color: yellow;font-size:20px">{{ len(posts) }}</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: 20px;color: black;margin-left: 130px">
{% for post in posts %}
<a href="/one_picture/{{ post.id }}"><img src="{{ static_url(post.thumb_url) }}" width="150" height="150"></a>
{% end %}
</div>
</body>
</html>
