Dieses Tutorial zeigt Ihnen, wie Sie das Modul ** django **. Contrib.staticfiles effektiv verwenden können, um die Webbenutzererfahrung mit dem ** Django ** -Framework zu verbessern.
Die Ziele der folgenden Tutorials sind:
Befolgen Sie zum Einrichten der Entwicklungsumgebung das hier vorgestellte Verfahren.
1, Installation der erforderlichen Bibliotheken
$ 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 von Projektabhängigkeiten
(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
** Hinweis **: Ein venv-Suffix wurde hinzugefügt, um das Ruunning in einer isolierten virtuellen Umgebung mit dem Namen venv anzuzeigen.
(venv)$ django-admin startptoject photogallery
2, erstellen Sie eine Django-Anwendung ** Galerie **
(venv)$ cd photogallery/
(venv)$ django-admin startapp gallery
Dazu müssen Sie die Galerie-App zur Datei settings.py Ihres Fotogalerieprojekts hinzufügen.
INSTALLED_APPS = [
...
'photogallery.gallery'
...
]
4, speichern Sie die Migrationsdaten in der Datenbank
(venv)$ pyhton manage.py migrate
5, erstellen Sie einen Superuser für die Django Admin Dashboard-Anwendung
(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, stellen Sie sicher, dass alles gut funktioniert.
(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, konfigurieren Sie das Projekt für die Bereitstellung statischer Dateien.
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
** Hinweis **: Dieser Befehl muss jedes Mal ausgeführt werden, wenn Sie eine Anwendung bereitstellen, wobei neue statische Dateien berücksichtigt werden, die vom Benutzer hinzugefügt wurden.
Um Bild- oder statische Dateien auf einer Webseite zu verwenden, müssen Sie das statische Modul auf dieser Seite vorab laden. Fügen Sie dazu den folgenden Code zu ** base.html ** auf der Stammseite hinzu.
{% load static %}
Dann können Sie Ihr Bild auf diese Weise auf die Homepage setzen.
<img src={% static 'gallery/images/background.jpg' alt='Background Image' %}>
Durch Einfügen dieser Tags können Sie Ihrer Webseite statische Elemente hinzufügen.
{% static 'gallery/css/bootstrap.css'%}
{% static 'gallery/js/bootstrap.js'%}
{% static 'gallery/js/jquery.js'%}
Erstellen Sie nur ein Datenmodell, um vom Benutzer hochgeladene Bilder zu verwalten.
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, speichern Sie das Modell in der Datenbank
(venv)$ python manage.py make migrations # This command will create migrations files
(venv)$ python manage.py migrate # Here the migrations created are executed
Ansichten definieren, wie Benutzer mit der Anwendung interagieren.
Ansichten werden in der Datei erstellt: ** 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')
Um auf die hier erstellte Ansicht zugreifen zu können, müssen Sie den URL-Stamm festlegen. Diese Wurzeln befinden sich in der Datei ** gallery / urls.py **. Wenn dieser Ordner also nicht im Ordner Ihrer App vorhanden ist, erstellen Sie ihn, bevor Sie fortfahren.
Der Inhalt der Datei ** gallery / urls.py ** lautet wie folgt.
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'),
]
Fügen Sie dann die Datei ** gallery / urls.py ** zur URL-Datei ** photogallery / urls.py ** Ihres Projekts hinzu.
Unten ist der Inhalt der Datei ** 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')),
]
Um eine HTML-Vorlage zu erstellen, müssen Sie einen Vorlagenordner erstellen, in dem Django die in der Datei ** views.py ** angegebene HTML-Vorlage findet.
(venv)$ mkdir gallery/templates templates/gallery
Erstellen Sie die folgende HTML-Datei in der Galerie-Vorlagendatei.
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>
Um das Admin-Dashboard für die Galerie-App einzurichten, müssen Sie die Datei ** gallery / admin.py ** ändern, um diesen Code intern hinzuzufügen.
from django.contrib import admin
from .models import Image
@admin.register(Image)
class ImageAdmin(admin.ModelAdmin):
model = Image
Um zu testen, ob alles funktioniert, müssen Sie den Entwicklungsserver mit einem Befehl starten.
(venv)$ python manage.py runserver
Am Ende dieses Lernprogramms finden Sie Beispiele, Integrationen, Verwendungen und Dienste für die Verwendung statischer Ressourcen in Django. Wir haben die Einstellungen gesehen, die bei der Entwicklung von Anwendungen zur Verwaltung von Images und bei der Gewährleistung einer sicheren Bereitstellung all dieser Dateien zu berücksichtigen sind.
Unten finden Sie einen Link zum Quellcode einer online veröffentlichten Anwendung.
https://github.com/binel01/photogallery.git
Recommended Posts