Python Web开发记录 Day9:Django part3 用户管理

名人说:莫道桑榆晚,为霞尚满天。——刘禹锡(刘梦得,诗豪)
创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊)

目录

      • 1、数据库准备
      • 2、用户列表
      • 3、新建用户
      • 4、编辑用户
      • 5、删除用户
      • 6、优化(datetimepicker插件)

在上一篇博客中我们实现了部门管理,本篇内容将主要围绕用户(员工)管理来出发,本篇内容后,后续会继续实现靓号管理、管理员管理、账户登录、以及Ajax等内容。接下来就让我们一起学习一下如何实现用户管理:

1、数据库准备

1.首先在models.py中创建用户表,定义数据表及属性字段。

class UserInfo(models.Model):
    """员工表"""
    name = models.CharField(verbose_name="姓名", max_length=16)
    password = models.CharField(verbose_name="密码", max_length=64)
    age = models.IntegerField(verbose_name="年龄", null=True)
    account = models.DecimalField(verbose_name="账户余额", max_digits=10, decimal_places=2, default=0)
    # creat_time = models.DateTimeField(verbose_name="入职时间",null=True)
    creat_time = models.DateField(verbose_name="入职时间", null=True)
    # 无约束
    # depart_id = models.BigIntegerField(verbose_name="部门ID")

    # 1.有约束
    # - to,与那张表关联
    # - to_field,与表中的哪一列有关联
    # 2.django自动
    # - 写的depart
    # - 生成数据列 depart_id
    # 3.部门表被删除
    # 3.1 级联删除
    depart = models.ForeignKey(verbose_name="部门", to="Department", to_field="id", on_delete=models.CASCADE)
    # 3.2 置空
    # depart = models.ForeignKey(to="Department",to_field="id",null=True,blank=True,on_delete=models.SET_NULL)
    # 在django中做的约束
    gender_choices = (
        (1, "男"),
        (2, "女"),
    )
    gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)

2.之后在当前页面终端运行以下数据库转移命令

python manage.py migrate
python manage.py makemigrations

之后运行本地服务器,启动Django项目,Django根据models中定义的内容就会帮咱们自动生成对应的数据表

python manage.py runserver 

在这里插入图片描述

在用Django之前实现用户管理功能,我们先在mysql中写入几条数据:

insert into api_userinfo(name,password,age,account,creat_time,gender,depart_id) values("张三","123",25,1000.88,"2020-6-8",1,11);

insert into api_userinfo(name,password,age,account,creat_time,gender,depart_id) values("李四","666",23,1890.88,"2021-7-14",2,12);

insert into api_userinfo(name,password,age,account,creat_time,gender,depart_id) values("王五","999",28,1265.88,"2019-9-1",1,11);
+------------+---------------+------+-----+---------+----------------+
| Field      | Type          | Null | Key | Default | Extra          |
+------------+---------------+------+-----+---------+----------------+
| id         | bigint        | NO   | PRI | NULL    | auto_increment |
| name       | varchar(16)   | NO   |     | NULL    |                |
| password   | varchar(64)   | NO   |     | NULL    |                |
| age        | int           | NO   |     | NULL    |                |
| account    | decimal(10,2) | NO   |     | NULL    |                |
| creat_time | datetime(6)   | NO   |     | NULL    |                |
| gender     | smallint      | NO   |     | NULL    |                |
| depart_id  | bigint        | NO   | MUL | NULL    |                |
+------------+---------------+------+-----+---------+----------------+
+----+------+----------+-----+---------+----------------------------+--------+-----------+
| id | name | password | age | account | creat_time                 | gender | depart_id |
+----+------+----------+-----+---------+----------------------------+--------+-----------+
|  1 | 张三 | 123      |  25 | 1000.88 | 2020-06-08 00:00:00.000000 |      1 |        11 |
|  2 | 李四 | 666      |  23 | 1890.88 | 2021-07-14 00:00:00.000000 |      2 |        12 |
|  3 | 王五 | 999      |  28 | 1265.88 | 2019-09-01 00:00:00.000000 |      1 |        11 |
+----+------+----------+-----+---------+----------------------------+--------+-----------+

接下来去实现Django用户管理。

2、用户列表

同样地,我们采用与部门列表同样的思路来实现用户列表。

1.在urls.py中添加用户列表的路径user/list/,并告诉该路径指向的视图view.user_list

urls.py

from django.urls import path
from api.views import depart,user,pretty

urlpatterns = [
    # 部门管理
    path("depart/list/", depart.depart_list),
    path("depart/add/", depart.depart_add),
    path("depart/delete/", depart.depart_delete),
    path("depart/<int:nid>/edit/", depart.depart_edit),

    # 用户管理
    path("user/list/", user.user_list),
]

2.在views.py中写出对应的函数,发出请求,并返回响应user_list.html

views.py

def user_list(request):
    """用户列表"""
    # 获取所有用户列表
    queryset = UserInfo.objects.all()

    page_object = Pagination(request, queryset, page_size=3)

    # 用 python 的语法获取数据
    """
    for obj in user_data:
        # obj.get_gender_display() 表示匹配 男/女,原始字段名为gender,obj.get_字段名称_display()
        # obj.create_time.strftime("%Y-%m-%d") 表示将时间格式转换成固定格式的字符串
        # obj.depart.title 表示获取depart_id对应的部门名称,因为我们在models中定义表时与另外一张表设置了级联关系,有外键
        print(obj.id, obj.name, obj.password, obj.age, obj.account, obj.get_gender_display(), obj.depart.title, obj.create_time.strftime("%Y-%m-%d"))
    """

    page_object.html()

    context = {
        "queryset": page_object.page_queryset,
        "page_string": page_object.page_string,
    }

    return render(request, "user_list.html", context)

3.创建templates目录下模版html文件user_list.html,以此定义部门列表的网页结构和布局。

layout.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
    {% block css %}

    {% endblock %}
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">用户管理系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/depart/list">部门管理</a></li>
                <li><a href="/user/list">用户管理</a></li>
                <li><a href="/pretty/list">靓号管理</a></li>

                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">张三 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人资料</a></li>
                        <li><a href="#">我的信息</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">注销</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>
</nav>

<div>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</div>

<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
{% block js %}

{% endblock %}
</body>
</html>

user_list.html

{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/user/add/">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                新建用户
            </a>

            <a class="btn btn-success" href="/user/model/form/add/">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                新建用户ModelForm
            </a>
        </div>

        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-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.password }}</td>
                        <td>{{ obj.age }}</td>
                        <td>{{ obj.account }}</td>
                        <td>{{ obj.creat_time|date:"Y-m-d" }}</td>
                        <td>{{ obj.get_gender_display }}</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>
        <ul class="pagination">
            {{ page_string }}
        </ul>
    </div>
{% endblock %}

效果:

image-20240314083044890

3、新建用户

  • 原始方法理思路:但不会采用(本质,但实现起来效率低)
- 用户提交数据没有校验。
- 错误,页面上应该有错误提示。
- 页面上,没有一个字段都需要我们重新写一遍。
- 关联的数据,需要手动去获取并循环展示在页面。
  • 考虑使用Django中的Form组件和ModelForm组件来实现

①Form组件和ModelForm组件

在Django框架中,Form和ModelForm是处理网站表单数据的重要组件,它们为数据的验证和处理提供了便捷的方式。

a.Form组件

Form组件主要用于创建表单。它不直接与数据库模型关联,但可以手动设定表单字段,用于收集和验证用户输入的数据。Form的使用主要包括以下几个步骤:

  1. 定义Form类:在forms.py文件中定义一个继承自django.forms.Form的类,并在其中定义各个表单字段。
  2. 实例化并使用Form:在视图(views)中实例化Form类,通过GET或POST方法传递数据,并使用is_valid()方法验证数据。
  3. 模板中渲染Form:将Form实例传递给模板,使用Django模板语言渲染表单HTML。

b.ModelForm组件

ModelForm组件是基于Django模型(Models)的表单,它自动根据模型字段生成表单字段,极大简化了表单的创建过程。当表单数据验证通过后,可以直接保存到数据库。ModelForm的使用流程如下:

  1. 定义ModelForm类:在forms.py文件中定义一个继承django.forms.ModelForm的类,通过Meta子类指定关联的模型和需要渲染成表单字段的模型字段。
  2. 实例化并使用ModelForm:在视图中实例化ModelForm类,传递模型实例(更新数据)或不传递(创建数据),处理POST请求数据,并通过is_valid()验证数据。
  3. 保存到数据库:数据验证通过后,可以调用save()方法直接保存数据到数据库。
  4. 模板中渲染ModelForm:与Form组件相同,将ModelForm实例传递给模板,用于渲染。

c.Form与ModelForm的区别

  • 关联性:Form不直接与模型关联,适用于不需要直接保存数据到数据库的场景;而ModelForm基于模型,适用于需要直接操作数据库的场景。
  • 简化程度ModelForm可以自动根据模型生成表单字段,简化了表单的创建;Form则需要手动定义每个字段。
  • 使用场景:当你的表单与数据库模型紧密关联时,使用ModelForm会更方便;如果表单数据不需要直接保存到数据库,或者表单结构与数据库模型不完全对应时,使用Form会更灵活。

总结来说,Form和ModelForm都是Django中处理表单的强大工具,它们各有优势和适用场景。选择哪一个主要取决于你的具体需求,比如是否需要与Django模型直接交互。

d.Form组件和ModelForm组件举例(此处仅为举例,后面有完整的新建用户实现代码)

1️⃣Form组件

1.view.py

class myForm(Form):
 user = forms.Charfield(widget=forms.Input)
 pwd = forms.Charfield(widget=forms.Input)
 email = forms.Charfield(widget=forms.Input)
 
def user_add(request):
 """添加用户(原始方式)"""
 if request.method == "GET":
     form = MyForm()
     return render(request, 'user_add.html', {"form":form}) 

2.user_add.html

<form method="post">
    {% for field in form%}
    	{{ field }}
   	{% endfor %}
</form>
<form method="post">
    {{form.user}}
    {{form.pwd}}
    {{form.email}}
</form>
<!-- <input type="text" placeholder="姓名" name="name"> -->

2️⃣ModelForm(推荐)

0.models.py

class UserInfo(models.Model):
    """员工表"""
    name = models.CharField(verbose_name="姓名", max_length=16)
    password = models.CharField(verbose_name="密码", max_length=64)
    age = models.IntegerField(verbose_name="年龄")
    account = models.DecimalField(verbose_name="账户余额", max_digits=10, decimal_places=2, default=0)
    creat_time = models.DateTimeField(verbose_name="入职时间")
    depart = models.ForeignKey(to="Department", to_field="id", on_delete=models.CASCADE)
    # 3.2 置空
    # depart = models.ForeignKey(to="Department",to_field="id",null=True,blank=True,on_delete=models.SET_NULL)
    # 在django中做的约束
    gender_choices = (
        (1, "男"),
        (2, "女"),
    )
    gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)

1.view.py

class myForm(ModelForm):
	xxx = form.CharField* ("...")
    class Meta:
        model = UserInfo
        fields = ['name','password','age','xxx']
    
def user_add(request):
    """添加用户(原始方式)"""
    if request.method == "GET":
        form = MyForm()
        return render(request, 'user_add.html', {"form":form}) 

2.user_add.html

<form method="post">
    {% for field in form %}
    	{{ field }}
   	{% endfor %}
 <!-- <input type="text" placeholder="姓名" name="name"> -->
</form>
<form method="post">
	{{ form.user }}
    {{ form.pwd }}
    {{ form.email }}
 <!-- <input type="text" placeholder="姓名" name="name"> -->
</form>

②新建用户的实现

我们学习了form和modelform之后,进行新建用户开发时,明显省事许多。

1.在urls.py中添加用户列表的路径user/add/,并告诉该路径指向的视图view.user_add

urls.py

 from django.urls import path
 from api.views import depart,user,pretty
 
 urlpatterns = [
     # 部门管理
     path("depart/list/", depart.depart_list),
     path("depart/add/", depart.depart_add),
     path("depart/delete/", depart.depart_delete),
     path("depart/<int:nid>/edit/", depart.depart_edit),
 
     # 用户管理
     path("user/list/", user.user_list),
     path("user/add/", user.user_add),
 ]
 

2.在views.py中写出对应的函数,发出请求,并返回响应user_add.html

views.py

def user_add(request):
    """添加用户(原始方式)"""
    if request.method == "GET":
        context = {
            'gender_choices': models.UserInfo.gender_choices,
            'depart_list': models.Department.objects.all(),
        }
        return render(request, 'user_add.html', context)
    # 获取用户提交的数据
    user = request.POST.get('name')
    pwd = request.POST.get('pwd')
    age = request.POST.get('age')
    account = request.POST.get('ac')
    ctime = request.POST.get('ctime')
    gender = request.POST.get('gd')
    depart_id = request.POST.get('dp')

    # 添加到数据库中
    models.UserInfo.objects.create(name=user, password=pwd, age=age, account=account, creat_time=ctime, gender=gender,
                                   depart_id=depart_id)

    # 返回到用户列表页面
    return redirect("/user/list/")
    
class UserModelForm(BootStrapModelForm):
    name = forms.CharField(
        min_length=3,
        label="用户名",
        widget=forms.TextInput(attrs={"class": "form-control"})
    )

    class Meta:
        model = models.UserInfo
        fields = ["name", "password", "age", 'account', 'create_time', "gender", "depart"]
        
# ModelForm实现
def user_model_form_add(request):
    """添加用户(ModelForm版本)"""
    if request.method == "GET":
        form = UserModelForm()
        return render(request, "user_model_form_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_model_form_add.html", {"form": form})

3.创建templates目录下模版html文件user_add.html,以此实现用户信息的新增。

user_add.html

 {% extends 'layout.html' %}
{% load static %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css' %}">
{% endblock %}


{% block content %}
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title" style="font-weight: bold">新建用户</h3>
            </div>
            <div class="panel-body">
                <form method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="title">姓名</label>
                        <input type="text" class="form-control" id="title" placeholder="姓名" name="name">
                    </div>
                    <div class="form-group">
                        <label for="title">密码</label>
                        <input type="text" class="form-control" id="title" placeholder="密码" name="pwd">
                    </div>
                    <div class="form-group">
                        <label for="title">年龄</label>
                        <input type="text" class="form-control" id="title" placeholder="年龄" name="age">
                    </div>
                    <div class="form-group">
                        <label for="title">余额</label>
                        <input type="text" class="form-control" id="title" placeholder="余额" name="ac">
                    </div>
                    <div class="form-group">
                        <label>入职时间</label>
                        <input id="test-datetimepicker" type="text" class="form-control"  placeholder="入职时间" name="ctime"/>
                    </div>
                    <div class="form-group">
                        <label for="title">性别</label>
                        <label>
                            <select class="form-control" name="gd">
                                {% for item in gender_choices %}
                                    <option value="{{ item.0 }}">{{ item.1 }}</option>
                                {% endfor %}
                            </select>
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="title">部门</label>
                        <label>
                            <select class="form-control" name="dp">
                                {% for item in depart_list %}
                                    <option value="{{ item.id }}">{{ item.title }}</option>
                                {% endfor %}
                            </select>
                        </label>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">提 交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script rel="stylesheet" href="{% static 'js/jquery.min.js' %}"></script>
    <script rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
    <script rel="stylesheet" href="{% static 'plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js' %}"></script>
    <script rel="stylesheet" href="{% static 'plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            $('#test-datetimepicker').datetimepicker({
                format: 'yyyy-mm-dd',
                language: "zh-CN",
                autoclose: true
            });
        });
    </script>
{% endblock %}

效果:

image-20240314083922130

4、编辑用户

与上述步骤相仿,我们采用ModelForm来实现编辑用户。

1.在urls.py中添加用户列表的路径user/<int:nid>/edit/,并告诉该路径指向的视图view.user_edit

urls.py

 from django.urls import path
 from api.views import depart,user,pretty
 
 urlpatterns = [
     # 部门管理
     path("depart/list/", depart.depart_list),
     path("depart/add/", depart.depart_add),
     path("depart/delete/", depart.depart_delete),
     path("depart/<int:nid>/edit/", depart.depart_edit),
 
     # 用户管理
     path("user/list/", user.user_list),
     path("user/add/", user.user_add),
     path("user/model/form/add/", user.user_model_form_add),
     path('user/<int:nid>/edit/', user.user_edit),
 ]
 

2.在views.py中写出对应的函数,发出请求,并返回响应user_edit.html

views.py

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

    # GET请求
    if request.method == "GET":
        form = UserModelForm(instance=row_obj)
        return render(request, "user_edit.html", {"form": form})

    # POST请求
    form = UserModelForm(data=request.POST, instance=row_obj)
    if form.is_valid():
        form.save()
        return redirect("/user/list/")

    return render(request, "user_edit.html", {"form": form})

3.创建templates目录下模版html文件user_edit.html,以此实现用户信息的新增。

user_edit.html

{% extends 'layout.html' %}

{% block content %}

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">编辑用户</h3>
        </div>
        <div class="panel-body">
            <form method="post" novalidate>
                {% 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 %}

                <button type="submit" class="btn btn-primary">保存</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

效果:

image-20240314085230568

5、删除用户

与上述步骤相仿,我们采用ModelForm来实现删除用户,删除用户的基础是建立在用户列表的实现和新增用户的功能之上的。

1.在urls.py中添加用户列表的路径user/<int:nid>/delete/,并告诉该路径指向的视图view.user_delete

urls.py

 from django.urls import path
 from api.views import depart,user,pretty
 
 urlpatterns = [
     # 部门管理
     path("depart/list/", depart.depart_list),
     path("depart/add/", depart.depart_add),
     path("depart/delete/", depart.depart_delete),
     path("depart/<int:nid>/edit/", depart.depart_edit),
 
     # 用户管理
     path("user/list/", user.user_list),
     path("user/add/", user.user_add),
     path("user/model/form/add/", user.user_model_form_add),
     path('user/<int:nid>/edit/', user.user_edit),
     path("user/<int:nid>/delete/", user.user_delete),
 ]
 

2.在views.py中写出对应的函数,发出请求,并返回响应user_list.html

views.py

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

3.操作templates目录下模版html文件user_list.html,以此实现用户信息的删除。

user_list.html

{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px">
            <a class="btn btn-success" href="/user/add/">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                新建用户
            </a>

            <a class="btn btn-success" href="/user/model/form/add/">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                新建用户ModelForm
            </a>
        </div>

        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-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.password }}</td>
                        <td>{{ obj.age }}</td>
                        <td>{{ obj.account }}</td>
                        <td>{{ obj.creat_time|date:"Y-m-d" }}</td>
                        <td>{{ obj.get_gender_display }}</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>
        <ul class="pagination">
            {{ page_string }}
        </ul>
    </div>
{% endblock %}

效果:

118

整体效果:

116

6、优化(datetimepicker插件)

由上面可以看到,我们的入职时间并没法选择,只能手动输入,这样效率就大大降低了,但是datetimepicker插件可以帮我们解决这个问题,因此我们可以在网上搜索这个插件,并把它放到图中plugins目录下:

image-20240314090402774

在layout.html文件中引入datetimepicker:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--Bootstrap框架-->
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">

    <!--datetimepicker插件-->
    <link rel="stylesheet" type="text/css"
          href="{% static 'plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css' %}">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
    {% block css %}

    {% endblock %}
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">用户管理系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="/depart/list">部门管理</a></li>
                <li><a href="/user/list">用户管理</a></li>
                <li><a href="/pretty/list">靓号管理</a></li>

                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">张三 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">个人资料</a></li>
                        <li><a href="#">我的信息</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">注销</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>
</nav>

<div>
    <div class="container">
        {% block content %}{% endblock %}
    </div>
</div>

{% block js %}
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <!-- 加载 Bootstrap DateTimePicker JS -->
    <script src="{% static 'plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script>
    <script type="text/javascript">
    $(function () {
        //当容器加载完成,对容器调用工具函数
        $("#dt").datetimepicker({
            language: 'zh-CN', //语言
            format: 'yyyy-mm-dd',//日期的格式
            minView: 'month', //可以选择的最小视图
            initialDate: new Date(),//初始化显示的日期
            autoclose: true,//设置选择完日期或者时间之后,日否自动关闭日历
            todayBtn: true,//设置自动显示为今天
            clearBtn: false//设置是否清空按钮,默认为false
        });
    });
    </script>
{% endblock %}

之后,可以发现,在新建用户和编辑用户时时,日期已经可以选择了。

效果:

120

关于用户管理的实现就到这里,后续会继续实现靓号管理、管理员管理、账户登录、以及Ajax等内容,敬请期待。

很感谢你能看到这里,如有相关疑问,还请下方评论留言。
Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊)
希望本篇内容能对大家有所帮助,如果大家喜欢的话,请动动手点个赞和关注吧,非常感谢你们的支持!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/457769.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于YOLOv8深度学习的脑肿瘤智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测、智慧医疗

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

发布一个npm包到 Nexus私有仓库

前文&#xff1a;使用nexus3搭建npm私有仓库 1、前置条件 git、 nvm、nrm、monorepo 的概念&#xff0c;以及 lerna 的使用、 yarn 的使用 基于 lerna yarn 的 monorepo 仓库 lerna npm i -g lernamac : zsh: command not found: lerna brew install lerna2、添加nexus权…

IDEA中配置Tomcat

文章目录 一、创建Web项目二、配置tomcat三、启动Tomcat 一、创建Web项目 1.首先我们要用IDEA创建一个普通的java项目。 2.我创建的项目名称为myTomcat&#xff0c;想要开发web程序&#xff0c;我们还要做一下操作。 首先我们先给项目添加框架支持...&#xff0c;我的 idea 版…

ASP.NET

Web控件 Web控件-内部控件 ASP.NET引入一组称为”内部控件”的新控件&#xff0c;它们专门用于ASP.NET 内部控件的使用方法与HTML控件相同&#xff0c;它们映射到HTML元素并通过使用 runat”server”属性在服务器上执行 Web控件-列表控件 这些控件用于在Web页中创建数据列表…

uniapp移动端 IOS系统下无法与webview通信

不知道有没有人遇到过这个问题 我的页面嵌套了一个webview&#xff08;文件位于项目的hybrif/html&#xff09;目录下 使用evalJS与webview进行通信 代码如下 在安卓里运行是没问题的&#xff0c;但在苹果手机上一直无法通信 连接真机&#xff0c;打印evalJS是个方法&#xf…

【matlab】如何将.mat文件与.nii文件互转

【matlab】如何将.mat文件与.nii文件互转 .mat转为.nii文件 有时候代码需要读取的是.nii文件&#xff0c;但是如何现有的数据是.mat格式&#xff0c;需要将.mata转化为.nii文件 1、先加载.mat文件 % 加载.mat文件 load(your_mat_file.mat); % 请将your_mat_file.mat替换为实…

中创ET4410台式电桥固件升级工具(修复了列表扫描的BUG)

中创ET4410台式LCR数字电桥固件升级工具和最新版固件&#xff08;修复了列表扫描的BUG&#xff09; 中创ET4410 台式LCR数字电桥 简单开箱测评&#xff1a;https://blog.zeruns.tech/archives/763.html 之前买的中创ET4410台式LCR数字电桥固件有BUG&#xff08;胜利的VC4090C…

鸿蒙 Harmony 初体验

前言 看现在网上传得沸沸扬扬的鸿蒙&#xff0c;打算弄个 hello world 玩一下, 不然就跟不上时代的发展了 环境安装 我的环境 Windows 11 家庭中文版HarmonyOS SDK (API 9)DevEco Studio (3.1.1 Release)Node.js (16.19.1) 开发IDE下载 官方下载链接 配置 nodejs 这里帮…

command failed: npm install --loglevel error --legacy-peer-deps

在使用vue create xxx创建vue3项目的时候报错。 解决方法&#xff0c;之前使用的https://registry.npm.taobao.org 证书过期更换镜像地址即可 操作如下&#xff1a; 1.cd &#xff5e;2.执行rm .npmrc3. sudo npm install -g cnpm --registryhttp://registry.npmmirror.com…

排查数据库插入慢的问题

文章目录 项目背景问题排查思路排查网络问题检查两台服务器之间的网络是否通畅检查两台服务器之间的网速iperf3 下载地址iperf3 使用方法 排查数据库锁表检查数据库性能 项目背景 我负责的模块是这个应用的一部分&#xff08;在服务器A&#xff09;&#xff0c;但数据库&#…

分治算法和树

一&#xff1a;分治算法 「 divide and conquer」&#xff0c;全称分而治之&#xff0c;是一种非常重要且常见的算法策略。 分治通常基于递归实现&#xff0c;包括“分”和“治”两个步骤。 分&#xff08;划分阶段&#xff09;&#xff1a;递归地将原问题分解为两个或多个子…

Ansible自动化运维Inventory与Ad-Hoc

前言 自动化运维是指利用自动化工具和技术来简化、自动化和优化IT基础设施的管理和运维过程&#xff0c;从而提高效率、降低成本&#xff0c;并减少人为错误。在当今复杂的IT环境中&#xff0c;自动化运维已经成为许多组织和企业提高生产力和保证系统稳定性的重要手段。Ansibl…

<JavaEE> 了解网络层协议 -- IP协议

目录 初识IP协议 什么是IP协议&#xff1f; IP协议中的基础概念 IP协议格式 图示 4bit版本号&#xff08;version&#xff09; 4bit头部长度&#xff08;headerlength&#xff09; 8bit服务类型&#xff08;TypeOfService&#xff09; 16bit总长度&#xff08;total l…

Chrome的V8引擎 和操作系统交互介绍

Chrome的V8引擎是一个用C编写的开源JavaScript和WebAssembly引擎&#xff0c;它被用于Chrome浏览器中&#xff0c;以解释和执行JavaScript代码。V8引擎将JavaScript代码转换为机器代码&#xff0c;这使得JavaScript能够以接近本地代码的速度运行。 V8引擎与操作系统的交互主要体…

开源免费CasaOS:轻松打造高效便捷的家庭云生活新体验

一、引言 随着科技的不断发展&#xff0c;家庭云系统逐渐成为现代家庭生活中的重要组成部分。CasaOS作为一款简单易用的开源家庭云系统&#xff0c;受到了广大用户的青睐。其简洁明了的界面设计&#xff0c;使得即使没有任何技术背景的用户也能轻松上手。本文将详细介绍CasaOS…

C# WPF编程-概述

C# WPF编程-基础知识 概述WPF高级API硬件加速与WPF分辨率无关性WPF体系结构WPF的主要类WPF工具包Visual Studio IDE 概述 WPF(Windows Presentation Foundation)是用于Windows的现代图形显示系统。引入了“内置硬件加速”和“分辨率无关”等创新功能。 WPF高级API 类似Web的…

【Docker】-- 使用docker部署Springboot+vue项目到虚拟机

虚拟机系统&#xff1a;CentOS 7 连接虚拟机工具&#xff1a;MobaXterm 以下在安装好虚拟机和docker基础上操作。 安装docker&#xff1a;【Docker】-- 如何安装docker-CSDN博客 一、部署Mysql 1、安装mysql docker中执行&#xff1a; docker run -d \--name mysql \-p 3…

Python + Jmeter 实现自动化性能压测

Step01: Python脚本开发 文件路径&#xff1a;D://wl//testproject//Fone-grpc//project1//test_client.py Python 脚本作用&#xff1a; 通过 grpc 调用底层 c 的接口&#xff0c;做数据库的数据插入与查询操作&#xff0c;然后将返回的结果进行拼接与输出。 2.代码里面将…

基于SpringBoot+MYSQL+Vue的校园管理系统

目录 1、前言介绍 2、主要技术 3、系统流程分析 3.1、操作流程 3.2、添加信息流程 3.3、删除信息流程 4、系统设计 4.1 系统体系结构 4.2开发流程设计 4.3 数据库设计原则 4.4 数据表 5、运行截图(部分) 5.1管理员功能模块 5.2用户功能模块 5.3院校管理员功能模块…

使用耳机壳UV树脂制作私模定制耳塞的价格如何呢?

耳机壳UV树脂制作私模定制耳塞的价格因多个因素而异&#xff0c;如材料、工艺、设计、定制复杂度等。 根据我目前所了解到的信息&#xff0c;使用UV树脂制作私模定制耳塞的价格可能在数百元至数千元不等。具体价格还需根据用户的需求和预算进行综合考虑。 如需获取更准确的报…