世界那么大，我想去看看。Django仿制微信朋友圈九宫格相册(1)

前面文章里的Python和Django知识点很重要，但过于零散。我们学习最终的目的还是应用。我们今天就来看下如何利用Django仿制微信朋友圈的九宫格相册。本教程比较长，会分成2部分发布，欢迎持续关注。我们会分享所有代码，并详细解读。读者需要对Python，Django, HTML, CSS和Javascript有一定的了解，否则读起来会比较吃力。

项目总体思路

对于此项目，我们总体开发思路是这样子的。

用户在后台先创建相册，再上传图片。一个相册可以包含多张图片。
对于单个相册，用户通过后台可以逐一上传单张图片或一次性上传压缩过的ZIP格式的图片包。
用户上传的图片先调整成指定大小和格式再存储，同时生成缩略图存储。
前端两个页面：一个展示相册列表，一个展示相册详情（包含所有图片)。
前端缩略图通过九宫格显示给用户。当用户点击缩略图时，可以查看大图和放大。
用户点击大图可以左右滑动查看上一张和下一张图片（触屏滑动效果）。
图片是responsive的，大小随着浏览器尺寸变化而变化。

项目预期效果

展示相册列表

展示相册详情（微信朋友圈九宫格)

点击缩略图，显示大图，左右滑动。

项目开发所需安装包

除了Django 2.0, 你还需要通过pip安装pillow和django-imagekit两个库。pillow是python的图片库。django-imagekit可以对图片进行尺寸调整，生成缩略图或加水印。因为本项目主要是对图像进行操作，所以安装这两个库是必需的。

下面我们将正式开始本项目的教程。

第一步：创建gallery的应用，并修改配置文件。

利用Django创建一个叫gallery的应用，并把它加到settings.py中INSTALLED_APP里去。同时你应该把imagekit也加到INSTALLED_APP里去。代码如下所示:

INSTALLED_APPS = [    'django.contrib.admin',    'django.contrib.auth',    'django.contrib.contenttypes',    'django.contrib.sessions',    'django.contrib.messages',    'django.contrib.staticfiles',    'gallery',    'imagekit',]

因为我们要使用到静态文件和媒体文件，所以请在settings.py里设置STATIC_ROOT和MEDIA_ROOT.

STATIC_URL = '/static/'STATIC_ROOT = BASE_DIR + '/static/'

# 设置媒体文件夹, 对于图片和文件上传很重要MEDIA_ROOT = os.path.join(BASE_DIR, 'media')MEDIA_URL = '/media/'

最后请把gallery应用的urls也加到项目的urls里去，代码如下所示。

from django.contrib import adminfrom django.urls import path, include

# 对于显示静态文件非常重要from django.conf import settingsfrom django.conf.urls.static import static

urlpatterns = [    path('admin/', admin.site.urls),    path('gallery/', include('gallery.urls')),

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

第二步：创建模型models.py

我们需要创建两个模型，一个相册Album，一个图片AlbumImage。其中相册与图片之间是单对多的关系(ForeignKey)。我们通过upload_to指定了图片上传目的文件夹(/albums/)和缩略图目的文件夹((/albums/thumb/)。由于我们同时指定了媒体文件根目录MEDIA_ROOT(/media/), 所以最后图片都会上传到/media/albums/文件夹里。

代码如下所示。

#!/usr/bin/env python# -*- coding: utf-8 -*-from django.db import modelsfrom imagekit.models import ProcessedImageFieldfrom imagekit.processors import ResizeToFitfrom django.urls import reverse

class Album(models.Model):    title = models.TextField(max_length=1024)    thumb = ProcessedImageField(upload_to='albums', processors=[ResizeToFit(300)], format='JPEG',                                options={'quality': 90})    is_visible = models.BooleanField(default=True)    create_date = models.DateTimeField(auto_now_add=True)    mod_date = models.DateTimeField(auto_now=True)    slug = models.SlugField(max_length=50, blank=True)

    def get_absolute_url(self):        return reverse('gallery:album_detail', kwargs={'pk': self.pk, 'slug': self.slug})

    def __str__(self):        return self.title

class AlbumImage(models.Model):    image = ProcessedImageField(upload_to='albums', processors=[ResizeToFit(1280)], format='JPEG',                                options={'quality': 70})    thumb = ProcessedImageField(upload_to='albums/thumbs/', processors=[ResizeToFit(300)], format='JPEG',                           options={'quality': 80}, blank=True, null=True)    album = models.ForeignKey('album', on_delete=models.PROTECT)    alt = models.CharField(max_length=255, default='', blank=True)    create_date = models.DateTimeField(auto_now_add=True)

    def __str__(self):        return self.alt

你或许注意到我们使用了imagekit的ProcessedImageField，而不是django自带的ImageField。这里ProcessedImageField与ImageField类似，只不过你可以指定存储图片的大小，格式和质量。你上传的图片会先经由imagekit处理，再进行存储。缩略图thumb默认为空，因为你不需要上传，而直接由上传的image压缩生成。我们在后台会进行处理。

由于数据库里存储的是图片的链接，而不是图片本身。在模板里显示原图和缩略图，我们可以按如下代码操作。注：一个item是一个AlbumImage对象。

<img src="{{ item.image.url }}" alt="{{ item.alt }}" />

<img src="{{ item.thumb.url }}"  />

第三步：编写urls.py

在gallery文件下新建urls.py, 加入如下代码。我们只需要两个URLs，一个展示相册列表，一个展示相册详情。

from django.urls import path, re_pathfrom . import views

# namespaceapp_name = 'gallery'

urlpatterns = [

    re_path(r'^album/$', views.AlbumListView.as_view(), name='album_list'),    re_path(r'^album/(?P<pk>\d+)/(?P<slug1>[-\w]+)/$', views.AlbumDetail.as_view(), name='album_detail'),

]

第四步: 编写视图文件views.py

我们使用了Django自带的通用视图DetailView和ListView。如果你不懂什么是通用视图，请阅读Django视图详解。

from django.views.generic import DetailView, ListViewfrom .models import Album, AlbumImageclass AlbumListView(ListView):

    queryset = Album.objects.filter(is_visible=True).order_by("-create_date")    paginate_by = 1

class AlbumDetail(DetailView):

    model = Album

    def get_context_data(self, **kwargs):        # Call the base implementation first to get a context        context = super().get_context_data(**kwargs)        # Add in a QuerySet of all the images        context['images'] = AlbumImage.objects.filter(album=self.object.id)        return context

在AlbumDetail里我们通过重写get_context_data向模板里传递了额外的参数images。这样我们在album_detail模板里就不仅能展示相册相关信息，也能展示属于该相册的所有图片了。

未完待续。下一部分我们着重讲解admin处理单个和多个图片上传，以及前端JS和CSS部分。

世界那么大，我想去看看。Django仿制微信朋友圈九宫格相册(1)相关推荐

Android 实现仿微信朋友圈九宫格图片+NineGridView+ImageWatcher(图片查看:1.预览，2.拖动，3.放大，4.左右滑动，5.长按保存到手机)的功能
一.测试实现: 二.添加依赖包: implementation 'androidx.appcompat:appcompat:1.1.0'implementation 'androidx.recycl ...
一百行代码实现微信朋友圈九宫格图片显示
前言很多时候我们都在刷微博或者微信朋友圈的时候都会看到很多图片,而这些图片的显示跟我们平时很多控件的显示方式都不一样,而且,当我们仔细去观察后就会发现,他加载的图片都是根据图片数量动态加载的 ...
Android(安卓)高仿微信朋友圈九宫格列表
目前基本复现微信的朋友圈的浏览效果直接上效果图吧! 感觉不错的话多多支持吧由于代码比较多,目前只将核心的适配器代码放出来,如果需要全部的话,下载源码吧,源码地址在最后适配器代码: private ...
html手机9张图片显示,微信朋友圈九宫格新玩法，显示一张完成的图片，点击有惊喜...
经常会在朋友圈看到一组照片,九张能组成一张完整的照片,点开后显示不同的内容,这种方法非常实用,今天我整理了一下方法.先给大家看一张效果图吧. 其实这样的玩法1号店店庆时已经玩过,不过他们店庆的时候的图 ...
php朋友圈九宫格怎么做,微信朋友圈九宫格视频怎么做图片背景加九宫格视频随机播放的效果制作|微信九宫格视频...
在如下图所示的新建项目窗口中,可以点击步骤一处的"浏览"按钮修改项目的存放位置,如果只是要输出为视频文件,这里的项目存放位置的设置用处也不大,最后输出视频文件后不保存项目即可:在步 ...
小程序编写类似微信朋友圈九宫格布局
效果图(目前数据都是自己写死的数据到时是根据api返回显示的) 总共分为 1张图 2张图 4张图 9张图然后进行对应的样式布局代码: 根据返回的数组长度进行判断显示对应布局例如 arr.le ...
微信运营，做好微信朋友圈营销的6个技巧和3点注意事项
如今客户越来越难跟进,借助微信建立客户联系已然成为一种非常有效的方法!特别是利用朋友圈营销打造的"信息流广告",在无形之中就能完成产品的销售.那么如何做好微信朋友圈的营销呢?以下一 ...
python爬虫24 | 搞事情了，用 Appium 爬取你的微信朋友圈。
昨天小帅b看到一些事情不顺眼有人偷换概念忍不住就写了一篇反讽 996 的看不下去了,我支持996,年轻人就该996! 没想到有些人看不懂这就算了还来骂我早些时候关注我的小伙伴应该知道我第一 ...
python获取登录按钮_python爬虫24 | 搞事情了，用 Appium 爬取你的微信朋友圈
昨天小帅b看到一些事情不顺眼有人偷换概念忍不住就写了一篇反讽 996 的看不下去了,我支持996,年轻人就该996! 没想到有些人看不懂这就算了还来骂我早些时候关注我的小伙伴应该知道我第 ...

世界那么大，我想去看看。Django仿制微信朋友圈九宫格相册(1)

世界那么大，我想去看看。Django仿制微信朋友圈九宫格相册(1)相关推荐

最新文章

热门文章