使用Django和JavaScript创建异步通信的应用程序
我会使用Python和Django来创建一个简单的Web应用程序。
同时，我将尝试满足以下要求，作为对异步通信的练习。
准备横幅和文本，当点击横幅时，简单的程序会替换文本和图像，而不需要重新加载屏幕。
想象一般的小说游戏就很容易理解。
最终的文件夹结构如下所示。
ajax_practice
├── myapp
│ ├── ...
├── db.sqlite3
├── manage.py
├── myproject
│ ├── ...
├── ajax
│ └── ...
├── static
│ └── css
│ └── style.css
│ └── images
│ ├── default_image.jpg
│ └── new_image.jpg
│ └── js
│ └── script.js
├── templates
│ └── index.html
└── requirements.txt
此外，由于这个简单的网络应用程序不使用数据库，我们不需要创建模型。
操作系统：苹果电脑的MacOS
在主目录下创建一个新的练习目录。
（没关系，可以用根目录）
% mkdir ajax_practice
% cd ajax_practice
创建虚拟环境
% python -m venv ajax
ajax 在这里是一个虚拟环境的名称，你可以自由指定任何名称。
激活虚拟环境
% source ajax/bin/activate
我已成功启动了虚拟环境。
（Ajax）只要变成 $，就可以了。
安装Django
在继续之前，请确保通过以下命令安装了最新版本的 pip。
pip是用于安装Django的软件。
% python -m pip install --upgrade pip
使用 requirements 文件安装软件包
requirements 文件是一个记录使用 pip install 命令安装依赖关系的列表的文件。
我要在 ajax_practice/ 文件夹中创建一个名为 requirements.txt 的文件。
% touch requirements.txt
以下是目录。
ajax_practice
├── ajax
│ └── ...
└───requirements.txt
请将以下文本添加到requirements.txt文件中：
Django~=3.2.10
然后，执行以下命令以安装Django。
$ pip install -r requirements.txt
创建 Django 项目
$ django-admin startproject myproject .
我的项目是一个项目的名称，可以指定任何名称。
在命令的末尾输入一个句号”。”，这个句号表示将Django安装到当前工作目录中。
django-admin.py是一个用于创建所需目录和文件的脚本。
设定
我将对myproject/settings.py进行一些更改。
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
需要添加静态文件的路径。
在STATIC_URL下面添加STATIC_ROOT。
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
创建新的应用程序
% python manage.py startapp myapp
上述命令是用于在Django项目中创建一个新应用程序的命令。
当你创建了一个应用程序后，你需要告诉Django使用它，这可以在mysite/settings.py中进行设置。
找到“INSTALLED_APPS”，然后将其添加如下。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp', # 新しいアプリケーションを追加
]
Django项目的设置:
首先，您需要编辑Django项目中的settings.py文件，以设置模板目录。请将TEMPLATES部分中的DIRS部分按照以下方式进行编辑。
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
...
},
]
创建模板
在项目的根目录下创建一个名为templates的文件夹。在里面创建一个名为index.html的文件。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="text">かつて、遥か彼方の宇宙に、ひとつの美しい星がありました。</p>
<img id="image" src="/static/images/default_image.jpg">
<div class="banner" id="banner"></div>
<script src="/static/js/script.js"></script>
</body>
</html>
我們同時也準備了 CSS 檔案。
/* style.css */
.banner {
position: fixed;
bottom: 0;
width: 100%;
height: 20%; /* 画面の下半分を占めるように設定 */
background-color: rgba(0,0,0,0.8); /* 背景色をより濃い黒色に設定 */
cursor: pointer; /* カーソルを指アイコンにする */
}
#text {
position: fixed;
bottom: 0; /* バナーと同じ位置に配置 */
color: white; /* テキストの色を白に設定 */
z-index: 2; /* テキストを前面に表示 */
}
创建视图
在myapp/views.py文件中创建以下代码来创建视图。
※ 故事聽 ChatGPT 寫好。
from django.http import JsonResponse
from django.shortcuts import render
def change_text(request):
if request.is_ajax():
story = [
"かつて、遥か彼方の宇宙に、ひとつの美しい星がありました。",
"そこには、様々な生命が共存し、平和な時代が続いていました。",
"しかし、ある日、暗黒の力が星を覆い始めました。",
"暗黒の力は、星の生命たちを次々と闇へと変えていきました。",
"星の生命たちが絶望する中、一筋の光が現れました。",
"それは、星の守護神が遣わしたとされる、勇者の光でした。",
"勇者は、星を救うため、一人で暗黒の力に立ち向かう決意をしました。",
"長い戦いが続き、勇者は何度も傷つきながらも、決して諦めませんでした。",
"そしてついに、勇者は暗黒の力を封じ、星に平和を取り戻しました。",
"それ以降、星の生命たちは勇者を祝福し、平和な時代が再び訪れました。"
]
new_image_url = "/static/images/new_image.jpg" if index == 5 else "/static/images/default_image.jpg"
return JsonResponse({'story': story, 'new_image_url': new_image_url})
def index(request):
return render(request, 'index.html')
设置URL：
我要在myproject/urls.py文件中添加URL设置。
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('myapp.urls')),
]
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('change_text/', views.change_text, name='change_text'),
]
创建静态目录和放置静态文件。
将静态文件（例如图像文件）放置在项目的根目录下的static文件夹中。
首先，在 Django 项目的根目录下创建一个名为 static 的文件夹。
请将 default_image.jpg 文件（默认图像）和 new_image.jpg 文件（目标图像）放置在该目录中。
% mkdir static
% mkdir static/images
% touch static/images/default_image.jpg
% touch static/images/new_image.jpg
然后，每个图像文件都准备好了，可以是任何图像。
创建JavaScript文件
另外，在 static 目录下创建一个名为 js 的目录，并在其中创建一个 script.js 文件。
% mkdir static/js
% touch static/js/script.js
为了实现异步显示文本，将使用Ajax。
$(document).ready(function() {
let index = 0;
let intervalId = null;
let typingSpeed = 40;
let isTyping = false;
let story = [
{text: "かつて、遥か彼方の宇宙に、ひとつの美しい星がありました。", image: "/static/images/default_image.jpg"},
{text: "そこには、様々な生命が共存し、平和な時代が続いていました。", image: "/static/images/default_image.jpg"},
{text: "しかし、ある日、暗黒の力が星を覆い始めました。", image: "/static/images/dark_image.jpg"},
{text: "暗黒の力は、星の生命たちを次々と闇へと変えていきました。", image: "/static/images/dark_image.jpg"},
{text: "星の生命たちが絶望する中、一筋の光が現れました。", image: "/static/images/light_image.jpg"},
{text: "それは、星の守護神が遣わしたとされる、勇者の光でした。", image: "/static/images/light_image.jpg"},
{text: "勇者は、星を救うため、一人で暗黒の力に立ち向かう決意をしました。", image: "/static/images/hero_image.jpg"},
{text: "長い戦いが続き、勇者は何度も傷つきながらも、決して諦めませんでした。", image: "/static/images/hero_image.jpg"},
{text: "そしてついに、勇者は暗黒の力を封じ、星に平和を取り戻しました。", image: "/static/images/peace_image.jpg"},
{text: "それ以降、星の生命たちは勇者を祝福し、平和な時代が再び訪れました。", image: "/static/images/peace_image.jpg"}
];
function typeWriter(text, callback) {
let i = 0;
isTyping = true;
intervalId = setInterval(function() {
$("#text").append(text.charAt(i));
i++;
if (i === text.length) {
clearInterval(intervalId);
isTyping = false;
typingSpeed = 40;
callback();
}
}, typingSpeed);
}
function loadStory() {
if (index === story.length) {
return;
}
clearInterval(intervalId);
$("#text").empty();
typeWriter(story[index].text, function() {});
$("#image").attr('src', story[index].image);
index++;
}
$("#banner").click(function() {
console.log("Banner clicked!");
if (isTyping) {
console.log("Typing... speeding up.");
clearInterval(intervalId);
typingSpeed /= 4;
typeWriter(story[index - 1].text.slice($("#text").text().length), function() {});
} else {
console.log("Loading next story...");
loadStory();
}
});
loadStory();
});
如果保持这样的话会出现错误，因此在settings.py的开头添加以下内容。
import os # 追加
from pathlib import Path
启动Web服务器
% python manage.py runserver
在浏览器中打开http://127.0.0.1:8000/。
通过使用Python和Django，我们成功完成了一个Web应用程序，当点击横幅时，可以异步更改文本和图像。
