layui+django · django + layui + sqlite3 配置（3）

1 前端页面相关知识点

在django前端页面中，有一些模板语言。Django 在把页面返回给浏览器之前，会先把.html里所有{% ... %}和{{ ... }}替换成真正的内容，再生成纯HTML。

语法	作用
`{% extends %}`	继承母版
`{% block %}` / `{% endblock %}`	留坑 / 填坑
`{% for %}...{% empty %}...{% endfor %}`	循环
`{% if %}...{% endif %}`	条件
`{% url %}`	反向解析路由
`{% static %}`	静态文件路径
`{% load %}`	载入自定义标签库
`{{ var }}`	输出变量
`{{ var filter }}`	变量过滤器

1.1 逻辑控制

循环：

{% for art in page_obj %}
    {{ art.title }}
{% empty %}          -- 列表为空时走这里
    暂无文章
{% endfor %}

条件：

{% if category %}
    当前分类：{{ category.name }}
{% elif user.is_authenticated %}
    已登录
{% else %}
    未登录
{% endif %}

1.2 URL解析

<a href="{% url 'resume:article_detail' art.pk %}">查看文章</a>

resume是命名空间，article_detail是 path()里给定的name=。

其中，urls.py文件中如下

app_name = 'resume'  
urlpatterns = [
    path('article/<int:pk>/', views.article_detail, name='article_detail'),
]

1.3 静态文件

{% load static %}
<img src="{% static 'img/logo.png' %}" alt="">

上线后只要改STATIC_URL，模板无需改动。

2 `settings.py`配置相关知识点

BASE_DIR = Path(__file__).resolve().parent.parent   # 整个项目的根目录，所有的相对路径以它为起点

SECRET_KEY = '******'
DEBUG = True         # 是否属于 开发阶段
ALLOWED_HOSTS = []


# 新建的app，接着添加
INSTALLED_APPS = [
    .........,
    'web_resume'
]


# 中间件  默认即可
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    ......
]

ROOT_URLCONF = 'web_blog.urls'

import os
# 前端 html 存放路径
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR), 'templates', ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                .....
                'web_resume.context_processors.base_extra',   #   给所有模板提供变量 的函数 
            ],
        },
    },
]

STATIC_URL = '/static/'                 # 浏览器访问前缀
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),   # 开发时放自定义静态文件
]

MEDIA_URL = '/media/'                   # 用户上传文件前缀
MEDIA_ROOT = BASE_DIR / 'media'         # 上传文件落盘目录

WSGI_APPLICATION = 'web_blog.wsgi.application'

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

# 时区&语言
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_TZ = True

STATIC_URL = 'static/'
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

零视图代码、零额外传参，所有模板自动拥有这些变量。这就是 context_processor 的作用：“全局模板变量注入器”。

2.1 中间件（Middleware）

做一些与业务无关的功能，例如

全局登录校验（比装饰器更省事）
统一给响应加 CORS 头
记录请求耗时 / IP / 日志
拦截爬虫、屏蔽非法头
....

生命周期

浏览器 → 中间件 process_request → URL 路由 → 视图 → 中间件 process_response → 浏览器

3 部署相关的步骤

操作	命令 / 设置
关闭调试	`DEBUG = False`
允许域名	`ALLOWED_HOSTS = ['yourdomain.com']`
密钥外置	`SECRET_KEY = os.getenv('DJANGO_SECRET_KEY')`
收集静态	`python manage.py collectstatic`
数据库	换 PostgreSQL/MySQL 并建库
反向代理	Nginx 配 `/static/` `/media/` 目录

shift+alt+f html 格式化快捷键

3.1 云服务器初始化、创建用户

云服务器初始化

# 1. 换源 & 升级
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
sudo sed -i 's@http://.*.ubuntu.com@http://mirrors.aliyun.com@g' /etc/apt/sources.list
sudo apt update && sudo apt upgrade -y

# 2. 安装基础包
sudo apt install -y python3-pip python3-venv nginx git curl supervisor

创建用户

sudo adduser django
sudo usermod -aG sudo django
su - django

3.2创建虚拟环境、安装包

python3 -m venv blog             # 创建虚拟环境
source blog/bin/activate         # 开启环境
pip install xxx....(各种安装包)   # 安装包

3.3设置`setting.py`

DEBUG = False            # 部署环境
ALLOWED_HOSTS = ['IP地址', 'localhost', '127.0.0.1']

# 输出日志
LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'handlers': {
        'console': {
            'class': 'logging.StreamHandler',
        },
    },
    'root': {
        'handlers': ['console'],
        'level': 'INFO',
    },
}

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')   # 上线时添加

告诉python manage.py collectstatic应该把全项目的静态文件（包括各 app 的 /static/ 以及第三方包）复制到单一目录。运行

python manage.py collectstatic --noinput

用途：收集静态文件

3.4配置gunicorn

安装gunicorn，用来管理django进程

pip install gunicorn

创建文件deploy/gunicorn_start.sh

文件内容为：

#!/bin/bash
# 1. 进入虚拟环境
source ~/blog/web_blog/blog/bin/activate
# 2. 站到项目根
cd ~/blog/web_blog
# 3. 启动 gunicorn
exec gunicorn web_blog.wsgi:application \
      --bind unix:...../blog/web_blog/project.sock \
        --workers 2 \
        --log-file - \
        --name blog

运行命令，设置权限

chmod +x gunicorn_start.sh

验证

~/blog/web_blog/deploy/gunicorn_start.sh

3.5配置nginx

server {
    listen 80;
    server_name IP地址;

    # 静态文件：collectstatic 输出目录 (不经过django)
    location /static/ {
        alias ...../blog/web_blog/staticfiles/;
    }

    # 用户上传文件
    location /media/ {
        alias ...../blog/web_blog/media/;
    }

    # 其余请求转给 gunicorn
    location / {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://unix:/...../blog/web_blog/project.sock;
    }
}

# 1. 保存配置
sudo vim /etc/nginx/sites-available/blog   # 粘贴上面内容

# 2. 启用(自动扫描这个目录)
sudo ln -s /etc/nginx/sites-available/blog /etc/nginx/sites-enabled/

# 3. 语法检查 & 重载
sudo nginx -t
sudo systemctl reload nginx

关系

浏览器 ──HTTP──▶ Nginx:80
                ├─ /static/xxx.jpg ──直接读文件─▶ 返回
                ├─ /media/yyy.png ──直接读文件─▶ 返回
                └─ 其余路径 ──unix socket─▶ Gunicorn ──WSGI─▶ Django

3.6配置`supervisor`守护

设置自启动

[program:web_blog]
command=..../blog/web_blog/deploy/gunicorn_start.sh
user=django
directory=..../blog/web_blog
autostart=true
autorestart=true
redirect_stderr=true
stdout_logfile=..../blog/web_blog/logs/supervisor.log

# 1. 创建日志目录
mkdir -p ..../blog/web_blog/logs

# 2. 写入配置
sudo vim /etc/supervisor/conf.d/web_blog.conf
# 粘贴上面内容，保存

# 3. 更新 supervisor 并启动
sudo supervisorctl reread
sudo supervisorctl update
sudo supervisorctl status web_blog

django + layui + sqlite3 配置（3）