django入门

最新推荐文章于 2024-06-15 10:55:52 发布

置顶哦豁...

最新推荐文章于 2024-06-15 10:55:52 发布

阅读量39

点赞数

文章标签： django python 后端

本文链接：https://blog.csdn.net/qq_73605325/article/details/131878095

版权

1.下载django包

pip install django

2.创建app

django-admin startapp app01 #创建一个名为app01的应用，要找到manage.py所在的目录才能成功，不然就会出现打不开文件的错误。

2.配置项目

注册app

配置数据库

配置你的static文件夹用于导入css等

下载pymysql，mysqlclient包用于连接数据库，由于某些版本等问题可能导致用不了，可以试试在app目录下的__int__.py文件下写下这几行代码

import pymysql
pymysql.version_info = (1, 4, 13, "final", 0)
pymysql.install_as_MySQLdb()

3.开始项目

设计表结构models.py

from django.db import models


class Admin(models.Model):
""" 管理员 """
username = models.CharField(verbose_name="用户名", max_length=32)
password = models.CharField(verbose_name="密码", max_length=64)

def __str__(self):
return self.username

class Department(models.Model):
""" 部门表 """
title = models.CharField(verbose_name='标题', max_length=32)

def __str__(self):
return self.title


class UserInfo(models.Model):
""" 员工表 """
name = models.CharField(verbose_name="姓名", max_length=16)
gender_choices = (
(1, "男"),
(2, "女"),
)
gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)
age = models.IntegerField(verbose_name="年龄")
phone = models.IntegerField(verbose_name="手机号")
email = models.EmailField(verbose_name="邮箱", max_length=255, unique=True)
create_time = models.DateField(verbose_name="入职时间")
#设置时间格式为2003-03-22这种形式
depart = models.ForeignKey(verbose_name="部门", to="Department", to_field="id", on_delete=models.CASCADE)
# 置空
# depart = models.ForeignKey(to="Department", to_field="id", null=True, blank=True, on_delete=models.SET_NULL)

# 在django中做的约束

设计好之后，进行数据迁移

python manage.py makemigrations
python manage.py migrate

配置路由urls.py

from django.contrib import admin
from django.urls import path
from app002.views import account,register,depart,user_list

urlpatterns = [
path('admin/', admin.site.urls),
#登录
path('login/',account.login),
#注册
path('register/',register.register_new),
#部门管理
# 部门管理
path('depart/', depart.depart_list),
path('depart/add/', depart.depart_add),
path('depart/delete/', depart.depart_delete),
path('depart/<int:nid>/edit/', depart.depart_edit),
path('depart/<str:nid>/user/', depart.view_department, name='view_department'),
# 员工管理
path('user/list/', user_list.user),
path('user/add/', user_list.user_add),
path('user/<int:nid>/edit/', user_list.user_edit),
path('user/<int:nid>/delete/', user_list.user_delete),
]

登录模块（account.py)

class LonginForm(BootStrapForm):
    username=forms.CharField(
        label="用户名",

    )

    password=forms.CharField(
        label="密码",

    )

    def clean_password(self):
        pwd = self.cleaned_data.get("password")
        return md5(pwd)
def login(request):
    """登录"""
    if request.method == "GET":
        form = LonginForm()
        return render(request,'login.html',{'form':form})

    form = LonginForm(data=request.POST)     ##获取页面表单提交的数据
    if form.is_valid():
        admin_object = models.Admin.objects.filter(**form.cleaned_data).first()   ##匹配数据库中的账号数据，判断提交数据是否正确
        if admin_object is None:
            form.add_error("password", "用户名或密码错误")
            return render(request, 'login.html', {'form': form})

        request.session["info"] = {'id': admin_object.id, 'name': admin_object.username}
        # session可以保存7天
        request.session.set_expiry(60 * 60 * 24 * 7)

        return redirect('/depart')

    return render(request, 'login.html', {'form': form})

注册模块(register.py)

from django.shortcuts import render,HttpResponse,redirect
from django import forms
from app002.utils.encrypt import md5
from app002.utils.bootstrap import BootStrapForm
from app002 import models
from app002.utils.form import AdminModelForm




def register_new(request):
    """ 添加管理员 """
    if request.method == "POST":
        form = AdminModelForm(data=request.POST)

        if form.is_valid():
            username = form.cleaned_data.get('username')
            # 查询数据库
            if models.Admin.objects.filter(username=username).first():
                form.add_error("username", "该用户已存在")
                return render(request, 'register.html', {'form': form})
            form.save()
            return redirect('/login/')
    else:
        form = AdminModelForm()

    return render(request, 'register.html', {'form': form})

部门的增删改查

from django.shortcuts import render, redirect
from app002 import models
from app002.utils.form import UserModelForm


def depart_list(request):
    """ 部门列表 """

    # 去数据库中获取所有的部门列表
    #  [对象,对象,对象]
    queryset = models.Department.objects.all()

    return render(request, 'depart.html', {'queryset': queryset})

def depart_add(request):
    """ 添加部门 """
    if request.method == "GET":
        return render(request, 'depart_add.html')

    # 获取用户POST提交过来的数据（title输入为空）
    title = request.POST.get("title")

    # 保存到数据库
    models.Department.objects.create(title=title)

    # 重定向回部门列表
    return redirect("/depart/")


def depart_delete(request):
    """ 删除部门 """
    # 获取ID http://127.0.0.1:8000/depart/delete/?nid=1
    nid = request.GET.get('nid')

    # 删除
    models.Department.objects.filter(id=nid).delete()

    # 重定向回部门列表
    return redirect("/depart/")


def depart_edit(request, nid):
    """ 修改部门 """
    if request.method == "GET":
        # 根据nid，获取他的数据 [obj,]
        row_object = models.Department.objects.filter(id=nid).first()
        return render(request, 'depart_edit.html', {"row_object": row_object})

    # 获取用户提交的标题
    title = request.POST.get("title")

    # 根据ID找到数据库中的数据并进行更新
    # models.Department.objects.filter(id=nid).update(title=title,其他=123)
    models.Department.objects.filter(id=nid).update(title=title)

    # 重定向回部门列表
    return redirect("/depart/")

def view_department(request, nid):
    ###查看部门员工###
    department = models.Department.objects.get(id=int(nid))
    employees = models.UserInfo.objects.filter(depart__title=department.title)
    return render(request, 'depart_user.html', {'department': department, 'employees': employees})

员工的增删改查

from django.shortcuts import render, redirect
from app002 import models
from app002.utils.form import UserModelForm


def user(request):
    """ 用户管理 """
    queryset = models.UserInfo.objects.all()
    return render(request, 'user_list.html',{'queryset': queryset})

def user_add(request):
    """ 添加用户（ModelForm）"""
    if request.method == "GET":
        form = UserModelForm()
        return render(request, 'user_add.html', {"form": form})

    # 用户POST提交数据，数据校验。
    form = UserModelForm(data=request.POST)
    if form.is_valid():
        # 如果数据合法，保存到数据库
        # print(form.cleaned_data)
        form.save()
        return redirect('/user/list/')

    # 校验失败（在页面上显示错误信息）
    return render(request, 'user_add.html', {"form": form})

def user_edit(request, nid):
    """ 编辑用户 """
    row_object = models.UserInfo.objects.filter(id=nid).first()

    if request.method == "GET":
        # 根据ID去数据库获取要编辑的那一行数据（对象）
        form = UserModelForm(instance=row_object)
        return render(request, 'user_edit.html', {'form': form})

    form = UserModelForm(data=request.POST, instance=row_object)
    if form.is_valid():
        # 默认保存的是用户输入的所有数据，如果想要再用户输入以外增加一点值
        # form.instance.字段名 = 值
        form.save()
        return redirect('/user/list/')
    return render(request, 'user_edit.html', {"form": form})


def user_delete(request, nid):
    models.UserInfo.objects.filter(id=nid).delete()
    return redirect('/user/list/')

utils文件放一些加密，form等文件

md5加密

from django.conf import settings
import hashlib


def md5(data_string):
    obj = hashlib.md5(settings.SECRET_KEY.encode('utf-8'))
    obj.update(data_string.encode('utf-8'))
    return obj.hexdigest()

bootstrap

from django import forms


class BootStrap:
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # 循环ModelForm中的所有字段，给每个字段的插件设置
        for name, field in self.fields.items():
            # 字段中有属性，保留原来的属性，没有属性，才增加。
            if field.widget.attrs:
                field.widget.attrs["class"] = "form-control"
                field.widget.attrs["placeholder"] = field.label
            else:
                field.widget.attrs = {
                    "class": "form-control",
                    "placeholder": field.label
                }


class BootStrapModelForm(BootStrap, forms.ModelForm):
    pass


class BootStrapForm(BootStrap, forms.Form):
    pass

form

from app002 import models
from django.core.validators import RegexValidator
from django.core.exceptions import ValidationError
from django import forms
from app002.utils.bootstrap import BootStrapModelForm
from app002.utils.encrypt import md5


class AdminModelForm(BootStrapModelForm):
    confirm_password = forms.CharField(
        label="确认密码",
        widget=forms.PasswordInput(render_value=True)
    )

    class Meta:
        model = models.Admin
        fields = ["username", 'password', "confirm_password"]
        widgets = {
            "password": forms.PasswordInput(render_value=True)
        }

    def clean_password(self):
        pwd = self.cleaned_data.get("password")
        return md5(pwd)


    def clean_confirm_password(self):
        pwd = self.cleaned_data.get("password")
        confirm = md5(self.cleaned_data.get("confirm_password"))
        if confirm != pwd:
            raise ValidationError("密码不一致")
        # 返回什么，此字段以后保存到数据库就是什么。
        return confirm



class LonginForm(forms.Form):
    username = forms.CharField(label='用户名', max_length=100)
    password = forms.CharField(label='密码', widget=forms.PasswordInput())

    def clean(self):
        cleaned_data = super().clean()
        username = cleaned_data.get('username')
        password = cleaned_data.get('password')

        # 对用户名和密码进行验证
        if not username:
            raise forms.ValidationError('用户名不能为空')
        if not password:
            raise forms.ValidationError('密码不能为空')

        return cleaned_data

class UserModelForm(BootStrapModelForm):
    name = forms.CharField(
        min_length=3,
        label="用户名",
        widget=forms.TextInput(attrs={"class": "form-control"})
    )

    class Meta:
        model = models.UserInfo
        fields = ["name", "gender", "age", 'phone', "email",'create_time', "depart"]

前端html

{% load static %}
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>登陆界面</title>
    <style>
        html {
            background-color: #B5DEF2;
        }

        .wrapper {
            margin: 140px 0 140px auto;
            width: 884px;
        }

        .loginBox {
            background-color: #F0F4F6;
            /*上divcolor*/
            border: 1px solid #BfD6E1;
            border-radius: 5px;
            color: #444;
            font: 14px 'Microsoft YaHei', '微软雅黑';
            margin: 0 auto;
            width: 388px
        }

        .loginBox .loginBoxCenter {
            border-bottom: 1px solid #DDE0E8;
            padding: 24px;
        }

        .loginBox .loginBoxCenter p {
            margin-bottom: 10px
        }

        .loginBox .loginBoxButtons {
            /*background-color: #F0F4F6;*/
            /*下divcolor*/
            border-top: 0px solid #FFF;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            line-height: 28px;
            overflow: hidden;
            padding: 20px 24px;
            vertical-align: center;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
        }

        .loginBox .loginInput {
            border: 1px solid #D2D9dC;
            border-radius: 2px;
            color: #444;
            font: 12px 'Microsoft YaHei', '微软雅黑';
            padding: 8px 14px;
            margin-bottom: 8px;
            width: 310px;
        }

        .loginBox .loginInput:FOCUS {
            border: 1px solid #B7D4EA;
            box-shadow: 0 0 8px #B7D4EA;
        }

        .loginBox .loginBtn {
            background-image: -moz-linear-gradient(to bottom, blue, #85CFEE);
            border: 1px solid #98CCE7;
            border-radius: 20px;
            box-shadow: inset rgba(255, 255, 255, 0.6) 0 1px 1px, rgba(0, 0, 0, 0.1) 0 1px 1px;
            color: #444;
            /*登录*/
            cursor: pointer;
            float: right;
            font: bold 13px Arial;
            padding: 10px 50px;
        }

        .loginBox .loginBtn:HOVER {
            background-image: -moz-linear-gradient(to top, blue, #85CFEE);
        }

        .loginBox a.forgetLink {
            color: #ABABAB;
            cursor: pointer;
            float: right;
            font: 11px/20px Arial;
            text-decoration: none;
            vertical-align: middle;
            /*忘记密码*/
        }

        .loginBox a.forgetLink:HOVER {
            color: #000000;
            text-decoration: none;
            /*忘记密码*/
        }

        .loginBox input#remember {
            vertical-align: middle;
        }

        .loginBox label[for="remember"] {
            font: 11px Arial;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <form  method="post">
            {% csrf_token %}
            <div class="loginBox">
                <div class="loginBoxCenter">
                    <p><label for="username">用户名</label></p>
                                            {{ form.username }}
                     <span style="color: red;">{{ form.username.errors.0 }}</span>
                    <!--autofocus 规定当页面加载时按钮应当自动地获得焦点。 -->
                    <!-- placeholder提供可描述输入字段预期值的提示信息-->
                    <!--<p><input type="text" id="text" name="text" class="loginInput" autofocus="autofocus"  autocomplete="off" placeholder="请输入邮箱/手机号" value="" /></p>-->
                    <!-- required 规定必需在提交之前填写输入字段-->
                    <p><label for="password">密码：</label></p>
                                            {{ form.password }}
                     <span style="color: red;">{{ form.password.errors.0 }}</span>
                    <!--<p><input type="password" id="password" name="password" class="loginInput"  placeholder="请输入密码" value="" /></p>-->
                    <p><a class="forgetLink" href="#">忘记密码?</a></p>
                    <input id="remember" type="checkbox" name="remember" />
                    <label for="remember">记住登录状态</label>
                </div>
                <div class="loginBoxButtons">

                    <button class="loginBtn">登录</button>
                   <input type="button"value="注册"onclick="location.href='/register'"target="_blank"/>
                </div>
            </div>
      </form>
    </div>
</body>

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load static %}
      <!-- 导入jQuery库 -->
    <script src="D:\python\Project\one\static\js\jquery-3.6.0.min.js"></script>
    <!-- 导入Bootstrap库 -->
    <link rel="stylesheet" src="D:\python\Project\one\static\plugins\bootstrap-5.3.0\css\bootstrap.min.css">
    <script src="D:\python\Project\one\static\plugins\bootstrap-5.3.0\js\bootstrap.min.js"></script>
    <!-- 导入自定义的JavaScript文件 -->
    <script src="{% static 'js/main.js' %}"></script>
    <title>Title</title>
      <style>
        /*******************
        SELECTION STYLING
        *******************/

        ::selection {
        	color: #fff;
        	background: #f676b2; /* Safari */
        }
        ::-moz-selection {
        	color: #fff;
        	background: #f676b2; /* Firefox */
        }

        /*******************
        BODY STYLING
        *******************/

        * {
        	margin: 0;
        	padding: 0;
        	border: none;
        	outline: none;
        }

        body {
        	background: url('http://www.demo.amitjakhu.com/login-form/images/bg.png');
        	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        	font-weight:300;
        	text-align: left;
        	text-decoration: none;
        	height: 500px;
        }

        #wrapper {
        	/* Center wrapper perfectly */
        	width: 300px;
        	height: 400px;
        	margin: 70px auto;
        }

        /* Download Button (Demo Only) */
        .download {
        	display: block;
        	position: absolute;
        	float: right;
        	right: 25px;
        	bottom: 25px;
        	padding: 5px;

        	font-weight: bold;
        	font-size: 11px;
        	text-align: right;
        	text-decoration: none;
        	color: rgba(0,0,0,0.5);
        	text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
        }

        .download:hover {
        	color: rgba(0,0,0,0.75);
        	text-shadow: 1px 1px 0 rgba(256,256,256,0.5);
        }

        .download:focus {
        	bottom: 24px;
        }

        /*
        .gradient {
        	width: 600px;
        	height: 600px;
        	position: fixed;
        	left: 50%;
        	top: 50%;
        	margin-left: -300px;
        	margin-top: -300px;

        	background: url(http://www.demo.amitjakhu.com/login-form/images/gradient.png) no-repeat;
        }
        */

        .gradient {
        	/* Center Positioning */
        	width: 600px;
        	height: 600px;
        	position: fixed;
        	left: 50%;
        	top: 50%;
        	margin-left: -300px;
        	margin-top: -300px;
        	z-index: -2;

        	/* Fallback */
        	background-image: url(http://www.demo.amitjakhu.com/login-form/images/gradient.png);
        	background-repeat: no-repeat;

        	/* CSS3 Gradient */
        	background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));
        	background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));
        	background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
        	background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
        	background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));
        }

        /*******************
        LOGIN FORM
        *******************/

        .login-form {
        	width: 300px;
        	margin: 0 auto;
        	position: relative;

        	background: #f3f3f3;
        	border: 1px solid #fff;
        	border-radius: 5px;

        	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }

        /*******************
        HEADER
        *******************/

        .login-form .header {
        	padding: 40px 30px 30px 30px;
        }

        .login-form .header h1 {
        	font-family: 'Bree Serif', serif;
        	font-weight: 300;
        	font-size: 28px;
        	line-height:34px;
        	color: #414848;
        	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
        	margin-bottom: 10px;
        }

        .login-form .header span {
        	font-size: 11px;
        	line-height: 16px;
        	color: #678889;
        	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
        }

        /*******************
        CONTENT
        *******************/

        .login-form .content {
        	padding: 0 30px 25px 30px;
        }

        /* Input field */
        .login-form .content .input {
        	width: 188px;
        	padding: 15px 25px;

        	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        	font-weight: 400;
        	font-size: 14px;
        	color: #9d9e9e;
        	text-shadow: 1px 1px 0 rgba(256,256,256,1.0);

        	background: #fff;
        	border: 1px solid #fff;
        	border-radius: 5px;

        	box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
        	-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
        	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
        }

        /* Second input field */
        .login-form .content .password, .login-form .content .pass-icon {
        	margin-top: 25px;
        }

        .login-form .content .input:hover {
        	background: #dfe9ec;
        	color: #414848;
        }

        .login-form .content .input:focus {
        	background: #dfe9ec;
        	color: #414848;

        	box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
        	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
        	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
        }

        .user-icon, .pass-icon {
        	width: 46px;
        	height: 47px;
        	display: block;
        	position: absolute;
        	left: 0px;
        	padding-right: 2px;
        	z-index: -1;

        	-moz-border-radius-topleft: 5px;
        	-moz-border-radius-bottomleft: 5px;
        	-webkit-border-top-left-radius: 5px;
        	-webkit-border-bottom-left-radius: 5px;
        }

        .user-icon {
        	top:153px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */
        	background: rgba(65,72,72,0.75) url(http://www.demo.amitjakhu.com/login-form/images/user-icon.png) no-repeat center;
        }

        .pass-icon {
        	top:201px;
        	background: rgba(65,72,72,0.75) url(http://www.demo.amitjakhu.com/login-form/images/pass-icon.png) no-repeat center;
        }

        .content input:focus + div{
        	left: -46px;
        }

        /* Animation */
        .input, .user-icon, .pass-icon, .button, .register {
        	transition: all 0.5s ease;
        	-moz-transition: all 0.5s ease;
        	-webkit-transition: all 0.5s ease;
        	-o-transition: all 0.5s ease;
        	-ms-transition: all 0.5s ease;
        }

        /*******************
        FOOTER
        *******************/

        .login-form .footer {
        	padding: 25px 30px 40px 30px;
        	overflow: auto;

        	background: #d4dedf;
        	border-top: 1px solid #fff;

        	box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
        	-moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
        	-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);
        }

        /* Login button */
        .login-form .footer .button {
        	float:right;
        	padding: 11px 25px;

        	font-family: 'Bree Serif', serif;
        	font-weight: 300;
        	font-size: 18px;
        	color: #fff;
        	text-shadow: 0px 1px 0 rgba(0,0,0,0.25);

        	background: #56c2e1;
        	border: 1px solid #46b3d3;
        	border-radius: 5px;
        	cursor: pointer;

        	box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
        	-moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
        	-webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);
        }

        .login-form .footer .button:hover {
        	background: #3f9db8;
        	border: 1px solid rgba(256,256,256,0.75);

        	box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
        	-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
        	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
        }

        .login-form .footer .button:focus {
        	position: relative;
        	bottom: -1px;

        	background: #56c2e1;

        	box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
        	-moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
        	-webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);
        }

        /* Register button */
        .login-form .footer .register {
        	display: block;
        	float: right;
        	padding: 10px;
        	margin-right: 20px;

        	background: none;
        	border: none;
        	cursor: pointer;

        	font-family: 'Bree Serif', serif;
        	font-weight: 300;
        	font-size: 18px;
        	color: #414848;
        	text-shadow: 0px 1px 0 rgba(256,256,256,0.5);
        }

        .login-form .footer .register:hover {
        	color: #3f9db8;
        }

        .login-form .footer .register:focus {
        	position: relative;
        	bottom: -1px;
        }
    </style>
</head>
<body>
    <div id="wrapper">

        <form name="login-form" class="login-form" action="" method="post">

            <div class="header">
                <h1>欢迎新管理</h1>
            </div>
              {% csrf_token %}
                    {% for field in form %}
                        <div class="form-group">
                            <label>{{ field.label }}</label>
                            {{ field }}
                            <span style="color: red;">{{ field.errors.0 }}</span>
                        </div>
                    {% endfor %}
            <div class="footer">
                <input type="submit" name="submit" value="注册" class="register" target="_blank">
            </div>

        </form>
<script>
    // 设置一个定时器，让错误提示在3秒后自动消失
    setTimeout(function() {
        var errorMessage = document.getElementById('error-message');
        if (errorMessage) {
            errorMessage.style.display = 'none';
        }
    }, 3000);
</script>
    <script>
        $(function () {
            $('#id_create_time').datepicker({
                format: 'yyyy-mm-dd',
                startDate: '0',
                language: "zh-CN",
                autoclose: true
            });

        })
    </script>
    </div>
    <div class="gradient"></div>

</body>

</html>

部门界面

{% load static %}
<html>
<head>
    <meta charset="utf-8">

    <style>
        ul{
          list-style-type:none;
          padding:0;
          overflow: hidden;
          background-color:#DCDCDC
        }
        li a {
            display: block;
            color: #778899;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li {
            float: left;
        }
        .active{
          background-color:#90EE90;
        }
        li a:hover{background-color:#FFF0F5;}

        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {background-color: #f1f1f1}

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
        input[type=text], select, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-top: 6px;
            margin-bottom: 16px;
            resize: vertical;
        }

        input[type=submit] {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        input[type=submit]:hover {
            background-color: #45a049;
        }

        .container {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
        }
    </style>
 <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.0/css/bootstrap.min.css' %}">
</head>
<body>
    <ul>
        <li><a class="active" href="#home">诚信企业</a></li>
        <li><a href="/depart/">部门管理</a></li>
        <li><a href="/user/list/">员工管理</a></li>
    </ul>
         <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/depart/add/">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建部门
            </a>
        </div>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                部门列表
            </div>
        </div>
            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                    <tr>
                        <th>{{ obj.id }}</th>
                        <td>{{ obj.title }}</td>
                        <td>
                            <a class="btn btn-primary btn-xs" href="/depart/{{ obj.id }}/edit/">编辑</a>
                            <a class="btn btn-danger btn-xs" href="/depart/delete/?nid={{ obj.id }}">删除</a>
                            <a class="btn btn-primary btn-xs" href="/depart/{{ obj.id }}/user/">查看</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
<script src="{% static 'js/jquery-3.7.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-5.3.0/js/bootstrap.min.js' %}"></script>
</body>
</html>

员工界面

{% load static %}
<html>
<head>
    <meta charset="utf-8">

    <style>
        ul{
          list-style-type:none;
          padding:0;
          overflow: hidden;
          background-color:#DCDCDC
        }
        li a {
            display: block;
            color: #778899;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li {
            float: left;
        }
        .active{
          background-color:#90EE90;
        }
        li a:hover{background-color:#FFF0F5;}

        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {background-color: #f1f1f1}

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
        input[type=text], select, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-top: 6px;
            margin-bottom: 16px;
            resize: vertical;
        }

        input[type=submit] {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        input[type=submit]:hover {
            background-color: #45a049;
        }

        .container {
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 20px;
        }
    </style>
 <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.0/css/bootstrap.min.css' %}">
</head>
<body>
    <ul>
        <li><a class="active" href="#home">诚信企业</a></li>
        <li><a href="/depart/">部门管理</a></li>
        <li><a href="/user/list/">员工管理</a></li>
    </ul>
 <div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/user/add/">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新建用户
            </a>
        </div>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                员工列表
            </div>

            <!-- Table -->
            <table class="table table-bordered">
                <thead>
              <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>手机号</th>
                    <th>邮箱</th>
                    <th>入职时间</th>
                    <th>所属部门</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                    <tr>
                        <th>{{ obj.id }}</th>
                        <td>{{ obj.name }}</td>
                        <td>{{ obj.get_gender_display }}</td>
                        <td>{{ obj.age}}</td>
                        <td>{{ obj.phone }}</td>
                        <td>{{ obj.email }}</td>
                        <td>{{ obj.create_time|date:"Y-m-d" }}</td>
                        <td>{{ obj.depart.title }}</td>
                        <td>
                            <a class="btn btn-primary btn-xs" href="/user/{{ obj.id }}/edit/">编辑</a>
                            <a class="btn btn-danger btn-xs" href="/user/{{ obj.id }}/delete/">删除</a>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>
   </div>
    </div>
</div>
<script src="{% static 'js/jquery-3.7.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-5.3.0/js/bootstrap.min.js' %}"></script>
</body>
</html>

新手不怎会写文章，html有点多，就不全展示了，项目放资源里了。