Django_2_进阶

本文将介绍一些 Django 的进阶用法

1 用户管理

下面介绍最简单的用户管理方法：用 admin 管理员创建普通用户；仅实现 login.html 界面，使用 django 内部逻辑完成用户登录。

1.1 建库

1.1.1 建库

1 2	$ python manage.py migrate $ python manage.py createsuperuser # 创建管理员

1.1.2 修改配置文件

1	$ vi mytools/settings.py

加入

1
2
3

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
]

1.2 添加新用户

访问 admin 界面，用刚才创建的 superuser 登录

http://localhost:8001/admin/

按提示创建几个 user 用户

1.3 在界面中调用登录界面

1.3.1 在接口前加装饰器

1	$ vi mytools/myapp/views.py

加入

from django.contrib.auth.decorators import login_required

@login_required
# 具体接口

1.3.2 添加登录界面

1	$ vi mytools/myapp/urls.py

加入

from django.contrib.auth import views as auth_views

urlpatterns = [
	path('accounts/login/', admin.site.urls),
]

1.3.3 实现登录界面

添加 login.html 界面

1 2	$ mkdir templates/registration/ $ vi templates/registration/login.html

添加以下内容，界面比较丑：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    <form method="post">
        {% csrf_token %}
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required><br>
        <button type="submit">Login</button>
    </form>
</body>
</html>

2 使用网页模板

实现简单的前后端界面

2.1 设置模板目录

修改配置文件：

1	$ vi mytools/settings.py

修改模板目录，形如：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'),],

2.2 创建模板

1 2	$ mkdir templates/myapp -p $ vi templates/myapp/translate.html

加入网页内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>英文翻译中文</title>
</head>
<body>
    <h1>英文翻译中文</h1>
    <form method="post">
        {% csrf_token %}
        <label for="english_text">请输入英文：</label>
        <input type="text" id="english_text" name="english_text" required>
        <button type="submit">翻译</button>
    </form>
    
    {% if chinese_translation %}
    <p>中文翻译结果：{{ chinese_translation }}</p>
    {% endif %}
</body>
</html>

2.3 使用模板

1	$ vi mytools/apps/views.py

加入

def translate(request):
    if request.method == 'POST':
        english_text = request.POST.get('english_text', '')
        chinese_translation = english_text.upper()
        return render(request, 'myapp/translate.html', {'chinese_translation': chinese_translation})    
    return render(request, 'myapp/translate.html')

3 使用 css 样式

3.1 创建静态文件目录

1 2	$ mkdir myapp/static $ vi myapp/static/styles.css

内容大致如下：

/* 设置全局字体和字号 */
body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* 设置链接样式 */
a {
    text-decoration: none;
    color: #007bff;
}

/* 设置标题样式 */
h1, h2, h3 {
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    color: #333;
}

/* 设置背景颜色 */
body {
    background-color: #f0f0f0;
}

3.2 修改配置文件

1	$ vi mytools/settings.py

加入静态数据相关设置

STATIC_URL = '/static/' # 指定在模板中引用静态文件时的基本 URL
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') # 用于收集静态文件的目标目录，主要用于构建生产环境
STATICFILES_DIRS = [ # 列表包含静态文件目录
    os.path.join(BASE_DIR, 'myapp/static'),
]

生成

1	$ python manage.py collectstatic # 主要用于构建生产环境

设置之后请重启 django 服务以确保生效

3.3 设置 html 的格式

{% load static %}
<html>
<head>
    <link rel="stylesheet" type="text/css" href="{% static 'styles.css' 
...

注意：第一行和第四行都需要添加，否则不能生效

4 使用 bootstrap 主题

4.1 安装库

1	pip install django-bootstrap5

在 settings 中加

#django-bootstrap3的设置
BOOTSTRAP3={
    'include_jquery':True,
    }
    
INSTALLED_APPS = [
    'django_bootstrap5'
    ...
```    

### 4.2 安装主题

以 FLAT-UI 为例，安装主题：

https://github.com/designmodo/Flat-UI

直接下载它的 release 版本

``` shell
sudo cp /home/xieyan/下载/software/Flat-UI-2.3.0/dist/ ui/mytools/myapp/static/flat-ui -a

在 html 文件头中加：

1 2	<link rel="stylesheet" href="{% static 'flat-ui/css/flat-ui.min.css' %}"> <script src="{% static 'flat-ui/js/flat-ui.min.js' %}"></script>

4.3 其它模板下载

https://bootswatch.com/

5 参考

使用django-bootstrap3创建网站