本文只涉及搭建的教程湿弦，不涉及VPS欺税、服務器等分唾。轉(zhuǎn)發(fā)請注明來源。
-0- 使用到的資源：
- 前端: Blueimp Gallery
- 后端: Django
- 縮略圖: easy_thumbnails
- 部署: nginx + gunicorn + supervisor
- 開發(fā)環(huán)境是Centos 7.2 + Python 2.7.5
上個圖先:
界面
效果預覽
-1- 創(chuàng)建項目
假設(shè)當前用戶是ljgabc擒抛，當前目錄是/home/ljgabc推汽。
virtualenv django
source django/bin/activate
pip install django pillow easy_thumbnails gunicorn
django-admin startproject websites
cd websites
python manage.py startapp gallery
-2- 修改配置
首先修改websites/settings.py中的INSTALLED_APPS，添加應用歧沪，
INSTALLED_APPS = [
...,
'gallery.apps.GalleryConfig',
'easy_thumbnails',
]
其它配置如下：
- 圖片文件上傳位置:
gallery/uploads - 圖片訪問地址:
<siteurl>/uploads/xxxx.jpg - 縮略圖大小為
75x75 - 最終靜態(tài)文件存放地址為
static/
因此修改websites/settings.py歹撒，添加以下內(nèi)容，
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_ROOT = os.path.join(BASE_DIR, 'gallery')
MEDIA_URL = '/'
IMAGE_PREFIX = 'uploads'
THUMBNAIL_ALIASES = {
'': {
'75x75' : {'size': (75,75), 'crop':True},
},
}
-3- 配置URL
由于我們的網(wǎng)站只有一頁诊胞，所以需要配置的URL只有/暖夭、/admin和/uploads，修改websites/urls.py，配置如下：
import os
from django.conf.urls import url, include
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$', include('gallery.urls')),
]
urlpatterns += static(settings.IMAGE_PREFIX, document_root=os.path.join(settings.MEDIA_ROOT, settings.IMAGE_PREFIX))
添加gallery/urls.py,
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.gallery, name='gallery'),
]
-4- 添加模型
編輯gallery/models.py迈着，添加Image模型竭望，
from django.db import models
from django.conf import settings
from django.utils.encoding import python_2_unicode_compatible
# Create your models here.
@python_2_unicode_compatible
class Image(models.Model):
'''
模型包含Title、文件裕菠、創(chuàng)建時間等
'''
title = models.CharField(max_length=250, blank=True)
original = models.ImageField(upload_to=settings.IMAGE_PREFIX, default='/tmp/none.jpg')
created = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.title
-5- 添加視圖
編輯gallery/views.py市框，配置視圖，
from django.shortcuts import render
from .models import Image
# Create your views here.
def gallery(request):
image_list = Image.objects.all()
return render(request, 'gallery/index.html', {
'image_list': image_list
})
-6- 添加靜態(tài)文件
從網(wǎng)上下載Blueimp Gallery文件糕韧，將其中的css、img和js文件夾放入gallery/static/gallery/文件夾下喻圃。
-7- 添加首頁模板
創(chuàng)建gallery/templates/gallery/index.html萤彩，內(nèi)容如下：
{% load static %}
{% load thumbnail %}
<!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">
<title>Photo Gallery</title>
<link rel="stylesheet" href="{% static '/gallery/css/blueimp-gallery.min.css' %}">
<link rel="stylesheet" href="{% static '/gallery/style.css' %}">
</head>
<body>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">?</a>
<a class="next">?</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div id="links" class="image-gallery">
{% if image_list %}
{% for image in image_list %}
<a href="{{ image.original.url }}" title="{{ image.title }}">
<img src="{{ image.original | thumbnail_url:'200x200' }}" alt="{{ image.title }}">
</a>
{% endfor %}
{% endif %}
</div>
<script src="{% static '/gallery/js/blueimp-gallery.min.js' %}"></script>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
</body>
</html>
-8- 初始化
python manage.py makemigrations gallery
python manage.py migrate
python manage.py createsuperuser
-9- 預覽
python manage.py runserver 0.0.0.0:8000
-10- 配置supervisor
yum install supervisor
創(chuàng)建/etc/supervisor.d/gallery.ini, 添加以下內(nèi)容：
[program:gallery]
command=/home/ljgabc/django/bin/gunicorn websites.wsgi:application
directory=/home/ljgabc/websites
user=ljgabc
autostart=true
autorestart=true
啟動supervisor，
systemctl start supervisor
# supervisorctl start gallery
此時訪問127.0.0.1:8000應該可以看到應用已經(jīng)啟動斧拍。
-11- 配置nginx
首先將所有用到的靜態(tài)文件收集到STATIC_ROOT目錄下雀扶，
python manage.py collectstatic
創(chuàng)建/etc/nginx/conf.d/gallery.conf,
server {
listen 80;
server_name www.your-domain-name.com;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:8000;
}
location /static/ {
root /home/ljgabc/websites;
}
}
啟動nginx
systemctl start nginx
全文丸。
