Hello, Flask!
首发于Hello, Flask!

用Flask实现豆瓣相册(一):相册与图片

相册

数据库模型

相册和照片在数据库里是一对多关系,使用Flask-SQLAlchemy创建数据库模型:

class Album(db.Model):
    __tablename__ = 'albums'
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(64))  # 相册标题
    about = db.Column(db.Text)  # 相册信息
    cover = db.Column(db.String(64))  # 相册封面图片url
    timestamp = db.Column(db.DateTime, index=True, default=datetime.utcnow)
    author_id = db.Column(db.Integer, db.ForeignKey('users.id'))
    photos = db.relationship('Photo', backref='album', lazy='dynamic')

相册边框

豆瓣相册使用一个边框图片(放在相册封面的下面)作为相册样式:

也就是这样一张图片(img3.doubanio.com/f/shi):



我们可以使用CSS来实现类似的效果:

<div class="album-frame">
    <img class="img-responsive" src="{{ album.cover }}">
</div>

样式表:

.album-frame,
.album-frame:before {
    background: transprent;
    width: 265px;
    height: 215px;
    margin: 5px;
    border: 3px solid #FFF;
    box-shadow: 0 0 0 1px #999;
    position: relative;
}

.album-frame:before {
    margin: 0;
    content: "";
    position: absolute;
    top: -7px;
    left: -7px;
    background: white;
    z-index: -1;
}

这会生成两个偏移的边框:



图片

数据库模型

class Photo(db.Model):
    __tablename__ = 'photos'
    id = db.Column(db.Integer, primary_key=True)
    url = db.Column(db.String(64))  # 原图url
    url_s = db.Column(db.String(64))  # 展示图url
    url_t = db.Column(db.String(64))  # 缩略图url
    about = db.Column(db.Text)  # 图片介绍
    timestamp = db.Column(db.DateTime, index=True, default=datetime.utcnow)
    author_id = db.Column(db.Integer, db.ForeignKey('users.id'))
    album_id = db.Column(db.Integer, db.ForeignKey('albums.id'))
    comments = db.relationship('Comment', backref='photo', lazy='dynamic')

图片加载

为了优化页面加载,图片存储三种尺寸,按需加载:

  1. 原图
  2. 展示图(定宽800)
  3. 缩略图(定宽300)

图片的压缩和裁剪见后续图片处理部分。



相关链接



- - - - -

更多关于Flask和Web开发的原创内容,欢迎关注知乎专栏 - Hello, Flask!

编辑于 2017-02-12

文章被以下专栏收录

    大家好,我是李辉,一个Python程序员。在这个专栏,你会看到我学习和使用Flask的经验和总结,你还会看到我所有的发明创造,以及它们的实现方法。欢迎加入这场Flask之旅,拿好你的小键盘,上车吧!helloflask.com