Ce tutoriel vous montrera comment utiliser efficacement le module ** django **. Contrib.staticfiles pour améliorer l'expérience utilisateur Web avec le framework ** Django **.
Les objectifs des didacticiels suivants sont:
Pour configurer l'environnement de développement, suivez la procédure présentée ici.
1, installation des bibliothèques requises
$ sudo apt install python3 # Install Python3 interpreter
$ sudo apt install python3-pip # To manage python packages
$ sudo apt install python3-virtualenv # To manage virtual python environments
$ sudo apt install apache2 # To serve images and static assets
$ virtualenv --python=python3 venv # This create the virtual environment venv
$ source venv/bin/activate # This is to activate the virtual environment
3, installation des dépendances du projet
(venv)$ pip install Django==2.1 # Install Django v2.1
(venv)$ pip install Pillow # To manage images through Python code
(venv)$ pip install easy_thumbnails # To easyly manage image thumbnails
** Remarque **: Un suffixe venv a été ajouté pour indiquer la ruunning dans un environnement virtuel isolé nommé venv.
(venv)$ django-admin startptoject photogallery
2, créez une application django ** galerie **
(venv)$ cd photogallery/
(venv)$ django-admin startapp gallery
Pour ce faire, vous devez ajouter l'application de galerie au fichier settings.py de votre projet de galerie de photos.
INSTALLED_APPS = [
...
'photogallery.gallery'
...
]
4, enregistrez les données de migration dans la base de données
(venv)$ pyhton manage.py migrate
5, créez un super utilisateur pour l'application de tableau de bord d'administration Django
(venv)$ python manage.py createsuperuser --username admin
(venv)$ Email address: [email protected]
(venv)$ Password:
(venv)$ Password (again):
.
├── db.sqlite3
├── gallery
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── manage.py
└── socialgallery
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
7, assurez-vous que tout fonctionne correctement.
(venv)$ python manage.py runserver
...
Starting development server at http://127.0.0.1:8000/
...
INSTALLED_APPS = [
...
'django.contrib.staticfiles'
...
]
# Create static folders on the webserver
(venv)$ sudo mkdir /var/www/static
(venv)$ sudo mkdir /var/www/media
# Make static folders editable from the web browser
(venv)$ sudo chown -R www-data:www-data /var/www/static
(venv)$ sudo chown -R www-data:www-data /var/www/media
# Allow the group to write to the directory with appropriate permissions
(venv)$ sudo chmod -R 777 /var/www/static
(venv)$ sudo chmod -R 777 /var/www/media
# Add myself to the www-data group
(venv)$ sudo usermod -a -G www-data $(whoami)
3, configurez le projet pour servir les fichiers statiques.
STATIC_URL = '/static/' # Used to include static resources in web pages
STATIC_ROOT = '/var/www/static/' # Used to get static resources from web server
MEDIA_URL = '/media/' # Used to include media items in web pages
MEDIA_ROOT = '/var/www/media/' # Used to get media items from web server
# This command will copy everything from the STATIC_URL to the STATIC_ROOT
(venv)$ python manage.py collectstatic
** Remarque **: Cette commande doit être exécutée à chaque fois que vous déployez une application en tenant compte des nouveaux fichiers statiques ajoutés par l'utilisateur.
Pour utiliser des fichiers image ou statiques sur une page Web, vous devez précharger le module statique sur cette page. Pour ce faire, ajoutez le code suivant à ** base.html ** sur la page racine.
{% load static %}
Ensuite, vous pouvez mettre votre image sur la page d'accueil de cette manière.
<img src={% static 'gallery/images/background.jpg' alt='Background Image' %}>
Et en incluant ces balises, vous pouvez ajouter des éléments statiques à votre page Web.
{% static 'gallery/css/bootstrap.css'%}
{% static 'gallery/js/bootstrap.js'%}
{% static 'gallery/js/jquery.js'%}
Restez au courant du sujet, créez un seul modèle de données pour gérer les images téléchargées par l'utilisateur.
1, ce qui suit est le contenu du fichier ** gallery / models.py **.
from django.db import models
from django.contrib.auth.models import User
class Image(models.Model):
name = models.TextField(max_length='100')
path = models.ImageField()
number_views = models.IntegerField(default=0)
def __str__(self):
return self.name
2, enregistrez le modèle dans la base de données
(venv)$ python manage.py make migrations # This command will create migrations files
(venv)$ python manage.py migrate # Here the migrations created are executed
Les vues définissent la manière dont les utilisateurs interagissent avec l'application.
Les vues sont créées dans le fichier: ** socialgallery / gallery / views.py **.
from django.shortcuts import render
from django.urls import reverse_lazy
from django.views.generic import ListView, CreateView, DetailView, \
UpdateView, DeleteView
from .models import Image
class ImageListView(ListView):
model = Image
template_name = 'gallery/image_list.html'
class ImageDetailView(DetailView):
model = Image
template_name = 'gallery/image_detail.html'
class ImageCreateView(CreateView):
model = Image
template_name = 'gallery/image_create.html'
fields = '__all__'
class ImageUpdateView(UpdateView):
model = Image
template_name = 'gallery/image_update.html'
fields = '__all__'
class ImageDeleteView(DeleteView):
model = Image
template_name = 'gallery/image_delete.html'
success_url = reverse_lazy('image-list')
Pour accéder à la vue créée ici, vous devez définir la racine de l'URL. Ces racines sont définies dans le fichier ** gallery / urls.py **, donc si ce dossier n'existe pas dans le dossier de votre application, créez-le avant de continuer.
Le contenu du fichier ** gallery / urls.py ** est le suivant.
from django.urls import path
from .views import ImageListView, ImageDetailView, ImageCreateView, \
ImageUpdateView, ImageDeleteView
urlpatterns = [
path('', ImageListView.as_view(), name='image-list'), # Will serve as homepage
path('<int:pk>', ImageDetailView.as_view(), name='image-detail'),
path('create', ImageCreateView.as_view(), name='image-create'),
path('update/<int:pk>', ImageUpdateView.as_view(), name='image-update'),
path('delete/<int:pk>', ImageDeleteView.as_view(), name='image-delete'),
]
Ajoutez ensuite le fichier ** gallery / urls.py ** au fichier d'urls de votre projet ** photogallery / urls.py **.
Voici le contenu du fichier ** socialgallery / urls.py **.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('images/', include('gallery.urls')),
]
Pour créer un modèle HTML, vous devez créer un dossier de modèles dans lequel Django trouvera le modèle HTML spécifié dans le fichier ** views.py **.
(venv)$ mkdir gallery/templates templates/gallery
Créez le fichier html suivant dans le fichier de modèle de galerie.
1、templates/gallery/image_list.html
{% block content %}
<h2>Images</h2>
<ul>
{% for image in object_list %}
<li>{{ image.name }} - {{ image.path }} </li>
{% endfor %}
</ul>
{% endblock %}
2、templates/gallery/image_detail.html
<p>Image</p>
<p>name: {{ object.name }}</p>
<p>Path: {{ object.path }}</p>
<p>Views: {{ object.number_views }}</p>
3、templates/gallery/image_create.html
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Save Image">
</form>
4、templates/gallery/image_update.html
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Update User">
</form>
5、templates/gallery/image_delete.html
<form method="post">
{% csrf_token %}
<p>Are you sure you want to delete the image "{{ object.name }}"?</p>
<input type="submit" value="Confirm">
</form>
Pour configurer le tableau de bord d'administration de l'application de galerie, vous devez modifier le fichier ** gallery / admin.py ** pour ajouter ce code en interne.
from django.contrib import admin
from .models import Image
@admin.register(Image)
class ImageAdmin(admin.ModelAdmin):
model = Image
Pour tester que tout fonctionne, vous devez démarrer le serveur de développement avec une commande.
(venv)$ python manage.py runserver
Vous êtes arrivé à la fin de ce didacticiel pour voir des exemples, des intégrations, des utilisations et des services d'utilisation de ressources statiques dans Django. Nous avons vu les paramètres à prendre en compte lors du développement d'applications qui gèrent les images et comment assurer un déploiement sécurisé de tous ces fichiers.
Vous trouverez ci-dessous un lien vers le code source d'une application publiée en ligne.
https://github.com/binel01/photogallery.git
--Packages utilisés pour gérer les images: django-easythumbnails, Django Packages.
Recommended Posts