学习网络应用程序开发 #3
1. 這篇文章的內容 (zhè de
在Web应用开发学习的第二部分中，我们记录了服务端的启动过程。在本文中，我们将记录引入Bootstrap作为前端实现的过程。
Bootstrap的安装方法有几种，如下所示的示例：
-
- コンパイル済みのCSS/JSをインストールする
-
- ソースコードを運用環境でコンパイルしてインストールする
jsDelivrから配信されるインストール済みのコードを使用する
パッケージマネージャを用いてインストールする
本次，将下载编译好的CSS/JS，以便在本地环境也能运行应用程序。本文将详细说明如何下载Bootstrap官方提供的仪表盘示例，并完成运行的步骤。
2. 引入Bootstrap的步骤
使用Django-Bootstrap5构建应用程序。
在虚拟环境中安装并导入PyPi上发布的django-bootstrap5，生成应用程序的基础代码。然后，将其与要实现的HTML进行连接。
$ cd <path/to/project>
$ source venv/bin/activate
(venv)$ pip3 install django_bootstrap5 psycopg2-binary
(venv)$ cd django_project/
(venv)$ export ALLOWED_HOSTS="localhost 127.0.0.1 [::1]"
(venv)$ python3 manage.py startapp app
(venv)$ cd ..
(venv)$ deactivate
$ vim django_project/requirements.txt
$ vim django_project/project/settings.py
$ vim django_project/project/urls.py
$ vim django_project/app/views.py
$ touch django_project/app/urls.py
$ mkdir django_project/html
$ touch django_project/html/index.html
Django
psycopg2-binary
gunicorn
+django-bootstrap5
@@ -40,6 +40,8 @@ INSTALLED_APPS = [
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
+ ‘django_bootstrap5’,
+ ‘app’,
]
MIDDLEWARE = [
@@ -57,7 +59,7 @@ ROOT_URLCONF = ‘project.urls’
TEMPLATES = [
{
‘BACKEND’: ‘django.template.backends.django.DjangoTemplates’,
– ‘DIRS’: [],
+ ‘DIRS’: [BASE_DIR, ‘html’],
‘APP_DIRS’: True,
‘OPTIONS’: {
‘context_processors’: [
“`
2. 添加一个URL到urlpatterns: path(‘blog/’, include(‘blog.urls’))
“””
from django.contrib import admin
-from django.urls import path
+from django.urls import path, include
urlpatterns = [
path(‘admin/’, admin.site.urls),
+ path(”, include(‘app.urls’)),
]
django_project/app/views.py文件的修改内容@@-1,3 +1,9 @@
从django.shortcuts中导入render函数
# 在这里创建你的视图
+
+””” 函数：index
+ * 显示首页
+”””
+def index(request):
+ return render(request, ‘index.html’)
+
“””
from django.urls import path
from . import views
urlpatterns = [
path(”, views.index),
]
你好，世界
通过这个步骤，启动服务器并访问http://localhost:1317，在index.html中编写的下图将会显示出来。
在下一节中，我们将会将index.html的内容更新为Bootstrap官方提供的仪表盘示例页面。
$ docker-compose build
$ docker-compose up -d
嵌入样本仪表盘。
您可以从Bootstrap的官方网站下载页面或GitHub的发布页面获取。为了下载示例代码，本次将说明从GitHub下载的步骤。
另外，本篇文章所进行的操作确认针对的是 v5.1.1 版本。
$ cd <path/to/project>
$ mkdir django_project/static
$ cd django_project/static
$ wget https://github.com/twbs/bootstrap/releases/download/v5.1.1/bootstrap-5.1.1-dist.zip
$ unzip bootstrap-5.1.1-dist.zip
$ mv bootstrap-5.1.1-dist/* .
$ wget https://github.com/twbs/bootstrap/releases/download/v5.1.1/bootstrap-5.1.1-examples.zip
$ unzip bootstrap-5.1.1-examples.zip
$ cp bootstrap-5.1.1-examples/dashboard/dashboard.css ./css
$ cp bootstrap-5.1.1-examples/dashboard/dashboard.rtl.css ./css
$ cp bootstrap-5.1.1-examples/dashboard/dashboard.js ./js
$ cp bootstrap-5.1.1-examples/dashboard/index.html ../html/index.html
$ rm -rf bootstrap-5.1.1-dist.zip bootstrap-5.1.1-dist bootstrap-5.1.1-examples.zip bootstrap-5.1.1-examples
$ cd ../..
$ vim django_project/html/index.html
+{% load static %}
<!doctype html>
@@ -13,7 +14,7 @@
– +
