[PYTHON] CSS-Umgebung in 10 Minuten mit Django erstellt
Prolog
Erstellen Sie mit Django eine CSS-Lernumgebung.
Wenn Django bereits installiert ist, werden 10 Minuten erwartet.
Ich denke, dass es den Inhalt nicht beeinflusst, aber es ist die Ausführungsumgebung OS : Windows10 python : Python 3.7.6 django : 3.1
Verfahren
Ordnererstellung, Projekterstellung, Anwendungserstellung
C:\work\02_Implementierung>mkdir 20200919_htmlcss
C:\work\02_Implementierung>cd 20200919_htmlcss
C:\work\02_Implementierung\20200919_htmlcss>django-admin startproject htmlcss
C:\work\02_Implementierung\20200919_htmlcss>cd htmlcss
C:\work\02_Implementierung\20200919_htmlcss\htmlcss>python manage.py startapp test_app
C:\work\02_Implementierung\20200919_htmlcss\htmlcss>dir
Laufwerk C hat keine Datenträgerbezeichnung.
Die Seriennummer des Volumes lautet D48D-C505
C:\work\02_Implementierung\20200919_htmlcss\htmlcss-Verzeichnis
2020/09/19 19:38 <DIR> .
2020/09/19 19:38 <DIR> ..
2020/09/19 19:38 <DIR> htmlcss
2020/09/19 19:38 685 manage.py
2020/09/19 19:38 <DIR> test_app
1 Datei 685 Bytes
4 Verzeichnisse 8,932,749,312 Bytes freier Speicherplatz
App-Erkennung (fügen Sie den in Apps definierten App-Namen zu settings.py hinzu)
C:\work\02_Implementierung\20200919_htmlcss\htmlcss>cd htmlcss
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>type ..\test_app\apps.py
from django.apps import AppConfig
class TestAppConfig(AppConfig):
name = 'test_app'
htmlcss/setting.py
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'test_app.apps.TestAppConfig',
]
Zugriff auf Zieleinstellungen (festgelegt in Projekt-URLs.py und App-URLs.py)
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>notepad urls.py
htmlcss/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('test_app.urls')),
]
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>copy urls.py ..\test_app\
Ich habe eine Datei kopiert.
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\urls.py
test_app/urls.py
from django.urls import path, include
from . import views
urlpatterns = [
path('', views.index),
]
Geben Sie HTML des Zugriffsziels an und erstellen Sie es
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\views.py
test_app/views.py
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'index.html')
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\templates
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html
index.html
<html>
<head>
</head>
<body>
<p>hello, world</p>
</body>
</html>
Schließlich CSS (CSS-Erkennung und -Erstellung, Aufruf von HTML)
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py
htmlcss/setting.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\static\css
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\static\css\style.css
style.css
.T1 {
background-color: #99cc00
}
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html
index.html
{%load static%}
<html>
<head>
<link href="{% static 'css/style.css'%}" rel="stylesheet">
</head>
<body>
<div class='T1'>
<p>hello, world</p>
</div>
</body>
</html>
Starten Sie den Webserver und überprüfen Sie dies mit dem Browser
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>start
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>python ..\manage.py runserver
C:\work\02_Implementierung\20200919_htmlcss\htmlcss\htmlcss>start http://localhost:8000
Komplett! !! !!
Epilog
Jetzt können Sie CSS nach Belieben ausprobieren
Recommended Posts