Django web 開發(fā)(四) - Django項(xiàng)目實(shí)踐(四)-用戶管理

這篇具有很好參考價(jià)值的文章主要介紹了Django web 開發(fā)(四) - Django項(xiàng)目實(shí)踐(四)-用戶管理。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

用戶管理

mysql> desc employee_management_userinfo;
+-------------+---------------+------+-----+---------+----------------+
| Field       | Type          | Null | Key | Default | Extra          |
+-------------+---------------+------+-----+---------+----------------+
| id          | bigint(20)    | NO   | PRI | NULL    | auto_increment |
| name        | varchar(16)   | NO   |     | NULL    |                |
| password    | varchar(64)   | NO   |     | NULL    |                |
| age         | int(11)       | NO   |     | NULL    |                |
| account     | decimal(10,2) | NO   |     | NULL    |                |
| create_time | datetime(6)   | NO   |     | NULL    |                |
| gender      | smallint(6)   | NO   |     | NULL    |                |
| depart_id   | bigint(20)    | NO   | MUL | NULL    |                |
+-------------+---------------+------+-----+---------+----------------+

向用戶數(shù)據(jù)表中插入幾行數(shù)據(jù)方便后面進(jìn)行測(cè)試

insert into employee_management_userinfo(name,password,age,account,create_time,gender,depart_id) values("李云龍","123456",45,50000,"2020-03-24",1,2);
insert into employee_management_userinfo(name,password,age,account,create_time,gender,depart_id) values("張三豐","123456",45,60000,"2021-03-24",1,3);
insert into employee_management_userinfo(name,password,age,account,create_time,gender,depart_id) values("周杰倫","123456",45,70000,"2022-03-24",1,4);

用戶列表

修改myproject/myproject/urls.py

from django.contrib import admin
from django.urls import path
from employee_management import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('depart/list/', views.depart_list),
    path('depart/add/', views.depart_add),
    path('depart/delete/', views.depart_delete),
    path('depart/<int:nid>/edit/', views.depart_edit),
    path('user/list/', views.user_list),
]

修改myproject/employee_management/views.py

def user_list(request):

    # 獲取所有用戶列表
    user_data = UserInfo.objects.all()

    # 用 python 的語法獲取數(shù)據(jù)
    """
    for obj in user_data:
        # obj.get_gender_display() 表示匹配 男/女,原始字段名為gender,obj.get_字段名稱_display()
        # obj.create_time.strftime("%Y-%m-%d") 表示將時(shí)間格式轉(zhuǎn)換成固定格式的字符串
        # obj.depart.title 表示獲取depart_id對(duì)應(yīng)的部門名稱,因?yàn)槲覀冊(cè)趍odels中定義表時(shí)與另外一張表設(shè)置了級(jí)聯(lián)關(guān)系,有外鍵
        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"))
    """
    
    return render(request, "user_list.html", {"user_data": user_data})

新建myproject/employee_management/templates/user_list.html

注意: HTML 中獲取數(shù)據(jù)的方式與 Python 中有些不同
例如:
1.HTML中引入函數(shù)不能帶括號(hào), obj.get_gender_display()
2.日期類型轉(zhuǎn)字符串有Django自己的格式, obj.create_time|date:“Y-m-d”

{% extends 'layout.html' %}

{% block content %}
<div class="container">
    <div style="margin-bottom: 10px">
        <a class="btn btn-primary" href="/depart/add/" target="_blank">新建用戶</a>
    </div>
    <div>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true" style="margin-right: 5px;"></span>
                <span>用戶列表</span>
            </div>

            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>密碼</th>
                        <th>年齡</th>
                        <th>性別</th>
                        <th>賬戶余額</th>
                        <th>入職時(shí)間</th>
                        <th>部門</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for obj in user_data %}
                    <tr>
                        <th>{{ obj.id }}</th>
                        <td>{{ obj.name }}</td>
                        <td>{{ obj.password }}</td>
                        <td>{{ obj.age }}</td>
                        <td>{{ obj.get_gender_display }}</td>
                        <td>{{ obj.account }}</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/delete/?nid={{ obj.id }}">刪除</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

{% endblock %}

瀏覽器進(jìn)行訪問測(cè)試
Django web 開發(fā)(四) - Django項(xiàng)目實(shí)踐(四)-用戶管理

用戶添加

這里不演示最無腦原始的方式,漏洞百出,因?yàn)?

數(shù)據(jù)校驗(yàn)較麻煩

頁(yè)面沒有錯(cuò)誤提示

頁(yè)面上每一個(gè)字段都需要重新寫一遍

關(guān)聯(lián)的數(shù)據(jù),需要手動(dòng)獲取并循環(huán)展示在頁(yè)面

Django組件:

Form組件(簡(jiǎn)便)
ModelForm組件(最簡(jiǎn)便)

初識(shí)Form

views.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})

user_add.html

{{ form.xxx }} 可以自動(dòng)生成前端代碼

<form method="post">
	{{ form.user }}
	{{ form.pwd }}
	{{ form.email }}
</form>

也可以不指定,自動(dòng)生成全部

<form method="post">
	{% for field in form %}
		{{ field }}
	{% endfor %}
</form>

ModelForm

models.py

from django.db import models

# Create your models here.
class Department(models.Model):
    """部門表"""
    title = models.CharField(max_length=32, verbose_name='標(biāo)題')


class UserInfo(models.Model):
    """員工表"""
    name = models.CharField(max_length=16, verbose_name="姓名")
    password = models.CharField(max_length=64, verbose_name="密碼")
    age = models.IntegerField(verbose_name="年齡")
    account = models.DecimalField(verbose_name="賬戶余額", max_digits=10, decimal_places=2, default=0)
    create_time = models.DateTimeField(verbose_name="入職時(shí)間")
    depart = models.ForeignKey(to="Department", to_field="id", on_delete=models.CASCADE, verbose_name="部門")
    
    gender_choices = (
        (1, "男"),
        (2, "女"),
    )
    gender = models.SmallIntegerField(choices=gender_choices,verbose_name="性別")

views.py

class MyForm(ModelForm):
	class Meta:
		field = ["name", "password", "age"]
 
def user_add(request):
	if request.method == "GET":
	form = MyForm()
		return render(request, "user_add.html", {"form": form})

user_add.html

{{ form.xxx }} 可以自動(dòng)生成前端代碼

<form method="post">
	{{ form.user }}
	{{ form.pwd }}
	{{ form.email }}
</form>

也可以不指定,自動(dòng)生成全部

<form method="post">
	{% for field in form %}
		{{ field }}
	{% endfor %}
</form>

用戶添加(ModelForm)

修改myproject/employee_management/views.py

########################## ModelForm 演示 #############################

from django import forms

class UserModelForm(forms.ModelForm):

    ### 自定義數(shù)據(jù)校驗(yàn)
    # 例如: 用戶名最小三個(gè)字符
    #name = forms.CharField(min_length=3, label="用戶名")

    class Meta:
        model = UserInfo
        fields = ["name", "password", "age", "account", "create_time", "gender", "depart"]
        # 逐一控制標(biāo)簽的樣式
        # widgets = {
        #     "name": forms.TextInput(attrs={"class": "form-control"}),
        #     "password": forms.PasswordInput(attrs={"class": "form-control"}),
        # }
        
        # 這里讓日期可以手動(dòng)點(diǎn)擊鼠標(biāo)選擇,所以單獨(dú)拎出來,加上日期插件
        widgets = {
            "create_time": forms.DateTimeInput(attrs={'class': 'form-control', 'id': 'myDate'}),
        }

    # 循環(huán)找到所有的插件,添加 "class": "form-control"
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        for name, field in self.fields.items():
            # 可以排除指定的字段
            if name == "create_time":
                continue
            print(name, field)
            field.widget.attrs = {"class": "form-control"}


def user_model_form_add(request):
    """添加用戶(ModelForm版本)"""
    if request.method == "GET": 
        form = UserModelForm()
        return render(request, "user_model_form_add.html", {"form": form})
    
    # 用戶POST請(qǐng)求提交數(shù)據(jù),需要進(jìn)行數(shù)據(jù)校驗(yàn)
    form = UserModelForm(data=request.POST)
    if form.is_valid():
        print(form.cleaned_data)
        # 直接保存至數(shù)據(jù)庫(kù)
        form.save()
        return redirect("/user/list/")
    
    # 校驗(yàn)失敗(在頁(yè)面上顯示錯(cuò)誤信息)
    return render(request, "user_model_form_add.html", {"form": form})

修改myproject/myproject/urls.py

from django.contrib import admin
from django.urls import path
from employee_management import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('depart/list/', views.depart_list),
    path('depart/add/', views.depart_add),
    path('depart/delete/', views.depart_delete),
    path('depart/<int:nid>/edit/', views.depart_edit),
    path('user/list/', views.user_list),
    path('user/model/form/add/', views.user_model_form_add),
]

新建myproject/employee_management/templates/user_model_form_add.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 action="/user/model/form/add/" method="post" novalidate>
                {% csrf_token %}
                
                {% for field in form %}
                    <div class="form-group">
                        <label>{{ field.label }}: </label>
                        {{ field }}
                        <!-- 數(shù)據(jù)校驗(yàn),顯示錯(cuò)誤信息 -->
                        <span style="color: red;">{{ field.errors.0 }}</span>
                    </div>
                {% endfor %}

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

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

修改myproject/employee_management/models.py

目的是讓自動(dòng)生成的部門字段不顯示"對(duì)象"本身,顯示對(duì)象對(duì)應(yīng)的"title"

class Department(models.Model):
    """部門表"""
    title = models.CharField(max_length=32, verbose_name='標(biāo)題')

    def __str__(self):
        return self.title

Django web 開發(fā)(四) - Django項(xiàng)目實(shí)踐(四)-用戶管理
修改后再次刷新

日期設(shè)置

目前日期只能手動(dòng)輸入,如果想要鼠標(biāo)點(diǎn)擊選擇,需要調(diào)用datetimepicker插件

插件下載地址：
鏈接：https://pan.baidu.com/s/1yN-L7bhwdSXwfYfh2MUj2A
提取碼：yyds

下載完成后,我將插件放在了/root/python/myproject/static/下

Django web 開發(fā)(四) - Django項(xiàng)目實(shí)踐(四)-用戶管理
修改myproject/employee_management/templates/layout.html引入datetimepicker插件

調(diào)用方法: 在對(duì)應(yīng)的標(biāo)簽中加入"id=myDate"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <link rel="stylesheet" href="/static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">


    <!--JQUERY-->
    <script type="text/javascript" src="/static/jquery/jquery-1.11.1-min.js"></script>
    <!--BOOTSTRAP框架-->
    <link rel="stylesheet" type="text/css" href="/static/jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="/static/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <!--BOOTSTRAP_DATETIMEPICKER插件-->
    <link rel="stylesheet" type="text/css" href="/static/jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
</head>
<body>

	<!-- 此處省略一部分代碼 -->

    <script type="text/javascript">
        $(function () {
            //當(dāng)容器加載完成，對(duì)容器調(diào)用工具函數(shù)
            $("#myDate").datetimepicker({
                language: 'zh-CN', //語言
                format: 'yyyy-mm-dd',//日期的格式
                minView: 'month', //可以選擇的最小視圖
                initialDate: new Date(),//初始化顯示的日期
                autoclose: true,//設(shè)置選擇完日期或者時(shí)間之后，日否自動(dòng)關(guān)閉日歷
                todayBtn: true,//設(shè)置自動(dòng)顯示為今天
                clearBtn: false//設(shè)置是否清空按鈕，默認(rèn)為false
            });
        });
    </script>
</body>
</html>

如何使用呢
其實(shí)在上面的代碼中我已經(jīng)提前寫上了
下圖是Django中ModelForm修改標(biāo)簽屬性的方式,在widgets字典中定義
attrs={'class': 'form-control', 'id': 'myDate'}
Django web 開發(fā)(四) - Django項(xiàng)目實(shí)踐(四)-用戶管理
最終效果

數(shù)據(jù)校驗(yàn)錯(cuò)誤提示

修改myproject/myproject/settings.py

改為中文,目的是為了讓頁(yè)面提示錯(cuò)誤信息時(shí)顯示中文,否則會(huì)顯示英文

#LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'zh-hans'

如果我們沒有寫入任何內(nèi)容直接點(diǎn)擊"保存",那么頁(yè)面會(huì)提示錯(cuò)誤
Django web 開發(fā)(四) - Django項(xiàng)目實(shí)踐(四)-用戶管理
因?yàn)槲覀冊(cè)?code>/root/python/myproject/employee_management/templates/user_model_form_add.html中加入了{{ field.errors.0 }}字段

編輯用戶

修改myproject/employee_management/views.py

def user_edit(request, nid):
    """編輯用戶"""
    
    row_obj = UserInfo.objects.filter(id=nid).first()
    
    # GET請(qǐng)求
    if request.method == "GET":
        form = UserModelForm(instance=row_obj)
        return render(request, "user_edit.html", {"form": form})
    
    # POST請(qǐng)求
    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})

修改/root/python/myproject/myproject/urls.py

path('user/<int:nid>/edit/', views.user_edit),

增加/root/python/myproject/employee_management/templates/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 }}
                        <!-- 數(shù)據(jù)校驗(yàn),顯示錯(cuò)誤信息 -->
                        <span style="color: red;">{{ field.errors.0 }}</span>
                    </div>
                {% endfor %}

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

瀏覽器訪問測(cè)試,點(diǎn)擊"編輯"
Django web 開發(fā)(四) - Django項(xiàng)目實(shí)踐(四)-用戶管理
但是發(fā)現(xiàn)上面的時(shí)間有些問題,應(yīng)該只顯示年月日就可以了,不應(yīng)該顯示時(shí)分秒
需要修改數(shù)據(jù)庫(kù)models

更新數(shù)據(jù)庫(kù)表結(jié)構(gòu)

python3 manage.py makemigrations
python3 manage.py migrate

Django web 開發(fā)(四) - Django項(xiàng)目實(shí)踐(四)-用戶管理
此時(shí)還需要更改一個(gè)地方

瀏覽器刷新

刪除用戶

修改myproject/employee_management/views.py

def user_delete(request, nid):
    """用戶刪除"""
    UserInfo.objects.filter(id=nid).delete()
    return redirect("/user/list/")

修改myproject/myproject/urls.py

path('user/<int:nid>/delete/', views.user_delete),

修改myproject/employee_management/templates/user_list.html

<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>

瀏覽器測(cè)試文章來源地址http://www.zghlxwxcb.cn/news/detail-421237.html

到了這里，關(guān)于Django web 開發(fā)(四) - Django項(xiàng)目實(shí)踐(四)-用戶管理的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！