尝试使用Django整理前端部分

2 年 ago
清, 宇
3 minutes

由于我正在使用Python编写的Web应用程序，前端部分似乎也即将开始运转，因此我尝试用Django来搭建一个可见的环境。

办公环境

MacBookAir （M1）

Python版本：3.10.8
Django版本：4.1.7

前提

当然包括Python，前提是还有Django也已安装进来。

确认方法在这里。

// Pythonのバージョン確認
python --version
Python 3.10.8

// Djangoのバージョン確認
python
>>> import django
>>> django.get_version()
'4.1.7'
>>> exit()

如果没有安装Django，则可以通过pip install django来进行安装。

搭建Django的开发环境

我們將準備開發人員的目錄。

django-admin startproject ここに作りたいPJのディレクトリ名

这次我们将以名为hoge的名称创建，所以执行命令django-admin startproject hoge。

应该会创建目录和一些文件。
我们将进入使用cd hoge创建的目录中。

cd hoge
python manage.py runserver

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
March 22, 2023 - 08:03:56
Django version 4.1.7, using settings 'hoge.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

执行python manage.py runserver后，会出现一大串类似上面的内容，当访问http://127.0.0.1:8000/时，可以确认本地环境。

只要存储favicon图标，就能消除终端上出现的诸如”GET /favicon.ico HTTP/1.1″ 404 2110之类的信息。

设定周围

设置.py

将语言设置更改为日本语。

- LANGUAGE_CODE = 'en-us'
+ LANGUAGE_CODE = 'ja'

- TIME_ZONE = 'UTC'
+ TIME_ZONE = 'Asia/Tokyo'

如果使用模板，这边也要进行设置。

– 需要完成的事情 de

    1. 添加一个名为”hoge/template/”的目录来存放作为模板的HTML文件。

 

    1. 添加一个名为”hoge/static/”的目录来存放CSS、JS等资源文件。

 

    在Python中写入以下内容：
from pathlib import Path
+ import os

~~ 省略 ~~

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
+           os.path.join(BASE_DIR, 'frontend/dist'),
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

+ STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, "frontend/static"),
+ ]

在DIRS中，写入基本模板的路径。（用于HTML的显示设置）
在STATICFILES_DIRS中，写入存放外部加载的CSS/JS/图像等文件的目录，与模板文件分开。

由于BASE_DIR是Django执行manage.py的位置（最顶层），最好不要更改。

显示新页面。

因为添加了模板，所以要展示新页面。

准备index.html文件。

创建 hoge/frontend/dist/index.html 文件。

只需要显示h1标签就可以了，所以不需要设置CSS等内容。只需准备head和body标签。

准备env.py

接下来，我们将准备一个编写Python文件的设置，以显示模板。

创建hoge/hoge/env.py。
这次先暂时将其命名为env。

from django.shortcuts import render

def top(request):
    return render(request, 'index.html')

为调用template，使用render函数。
注意，render函数必须使用django.shortcuts才能使用。

将存放在template目录中的index.html文件放置。

在urls.py中将路径指向新页面。

from django.contrib import admin
from django.urls import path
+ from . import env

urlpatterns = [
    path('admin/', admin.site.urls),
+   path('top/', env.top, name='top'),
]

这是一个默认显示为admin/的页面，原始记录中有这个信息。

请读取之前创建的env.py文件，并在env.py中追加调用的html文件的变量。

path('top/', env.top, name='top'),

从左边开始

表示したいURLのディレクトリを記載。
今回はhttp://127.0.0.1:8000/top/にアクセスするとindex.htmlの内容を表示させています。

env.pyのtop（index.htmlを呼び出すために定義した変数）

nameは….特に気にせずわかりやすいものを

在保存之后，再次执行”python manage.py runserver”命令后，我认为当您访问指定路径的URL时，新文件会被加载。

加载css、js和图像

我会继续添加CSS和JS来保持这个状态。

<!DOCTYPE html>
<html lang="jp">
<head>
  <title>Hondana</title>
  <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
  <h1>Top</h1>
  <div class="img">
    <img src="/static/images/test.png" alt="test">
  </div>
  <script src="/static/js/app.js"></script>
</body>
</html>

如果在HTML中使用样式或脚本标签添加内容，它们可能不会被加载…
在Django环境中加载外部文件需要进行以下配置。

<!DOCTYPE html>
+ {% load static %}
<html lang="jp">
<head>
  <title>Hondana</title>
- <link rel="stylesheet" href="/static/css/style.css">
+ <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
  <h1>Top</h1>
  <div class="img">
    <img src="/static/images/test.png" alt="test">
  </div>
- <script src="/static/js/app.js"></script>
+ <script src="{% static 'js/app.js' %}"></script>
</body>
</html>

在HTML标签上添加{% load static %}。
如果在这里添加，可以从外部加载CSS，JS和图片。

在Chinese，只需要一种选项。

使用{% static ‘文件路径’ %}来添加CSS和JS文件的目录。这里的static是根据setting.py中设置的目录。

请注意，路径也是根据设定的目录来进行的。

如果继续执行 python manage.py runserver ，则会显示设置的 CSS、JS、图像等。

這樣使用Django構建應用程式的前端顯示就可以了！

因为我是第一次接触Django，所以边查询边进行开发，但制作出来的时间并没有太长。
对于小型开发项目，我觉得用node.js相比于繁琐的开发，使用Django能更快速地完成并在浏览器上进行确认。?

bannerAds