Django之簡易使用者系統(3)

目錄

• 1. 總體設計思路
• 2. 搭建簡易使用者系統
  • 2.1 配置模型Model
  • 2. 2 寫入資料庫：
  • 2.3 資料庫驗證表：
  • 2.4 路由URL配置：
  • 2.5 使用者增加
    • 後臺執行指令碼配置：
    • 檢視模板配置：
    • 前端展示效果如下：
    • 使用者提交，後臺資料庫驗證：
  • 2.6 使用者查詢
    • 後臺執行指令碼配置：
    • 檢視模板配置：
    • 前端展示效果如下：
    • 查詢使用者，展示如下：
  • 2.7 使用者修改
    • 後臺執行指令碼配置:
    • 檢視模板配置
    • 前端展示效果如下：
    • 修改使用者，展示如下：
  • 2.8 使用者刪除
    • 後臺執行指令碼配置
    • 檢視模板配置
    • 刪除使用者，展示如下：
  • 如果覺得這篇文章不錯，請點贊或分享到朋友圈吧!

1. 總體設計思路

一套簡單的使用者管理系統，包含但不限如下功能：

• 使用者增加：用於新建使用者；
• 使用者查詢：用於查詢使用者資訊；
• 使用者修改：用於修改使用者資訊；
• 使用者刪除：用於刪除使用者資訊；

最基本的功能就包括增、刪、改、查了。

想要搭建好一套系統，前期肯定是要設計一套思路，大家按照上圖對號入座即可。

下面，咋就開始實戰了...

劃重點了，一定要動手、一定要動手、一定要動手 ...

2. 搭建簡易使用者系統

如果哪位同學還沒學習過上兩篇文章的，請速速去研究下，再來看這篇文章。

2.1 配置模型Model

hello\models.py

建立一個類(class)物件，這就相當於資料中的一張表(table)。

# 建立資料庫User表
class User(models.Model):
    # 性別, 元組用於下拉框
    sex = ((0, '男'), (1, '女'))
    # 使用者名稱
    username = models.CharField(max_length=20, help_text='使用者名稱')
    # 使用者密碼
    password = models.CharField(max_length=16, help_text='使用者密碼')
    # sex中的0,1是存放在資料庫，中文男和女是在web前端展示
    sex = models.IntegerField(choices=sex, null=True, blank=True)
    # 手機號碼
    phone = models.CharField(max_length=11, help_text='手機號碼')

    # 物件獲取返回值為使用者名稱
    def __str__(self):
        return self.username

2. 2 寫入資料庫：

後臺會轉換成sql語句寫入資料庫，看起來是不是很方便，也不用太懂sql了，這也是ORM 的強大之處。

(py369) [root@localhost devops]# python manage.py makemigrations hello
Migrations for 'hello':
  hello/migrations/0005_auto_20201105_2336.py
    - Create model User
    - Alter field id on devices
(py369) [root@localhost devops]# python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, hello, sessions
Running migrations:
  Applying hello.0005_auto_20201105_2336... OK

2.3 資料庫驗證表：

我是通過Navicat Premium工具連線資料庫，進行視覺化檢視，你用哪個工具都可以。

2.4 路由URL配置：

hello\urls.py

name='xxxx'，這是名稱空間的用法，常在模板使用此方式：hello:adduser,等同於hello/adduser.html, 好處就是不用擔心你的path隨意改變。

from django.urls import path
from django.urls import re_path
from hello import view

app_name = 'hello'
urlpatterns = [
    # FBV，通過函式方式，實現增刪改查
    # 增加
    path('adduser/', view.adduser, name="adduser"),
    # 查詢
    path('showuser/', view.showuser, name="showuser"),
    # 修改
    re_path('edituser/(?P<pk>[0-9]+)?/', view.edituser, name="edituser"),
    # 刪除
    re_path('deluser/(?P<pk>[0-9]+)?/', view.deluser, name="deluser"),
]

2.5 使用者增加

後臺執行指令碼配置：

hello\view.py

from django.shortcuts import render
from django.http import HttpResponse, QueryDict
from django.shortcuts import get_object_or_404
from django.http import Http404
from hello.models import User
import traceback

# 使用者增加函式
def adduser(request):
    msg = {}
    if request.method == 'POST':
        try:
            print(request.POST)
            # 將資料轉為字典格式
            data = request.POST.dict()
            # 將資料一次性寫入資料庫
            User.objects.create(**data)
            msg = {'code':0, 'result':'已成功新增使用者.'}
        except:
            msg = {'code':1, 'result':'新增使用者失敗:'.format(traceback.format_exc())}
    return render(request, "hello/adduser.html", {'msg':msg})

檢視模板配置：

templates\hello\adduser.html

<!--繼承母版-->
{% extends "base.html" %}
<!--重寫title的內容-->
{% block title %} 使用者新增 {% endblock %}
<!--重寫body的內容-->
{% block body %}

<!--顯示成功或失敗的資訊-->
{% if msg.code == 0 %}
    <p style="color: green"> {{ msg.result }}</p>
{% else %}
    <p style="color: red"> {{ msg.result }}</p>
{% endif%}

<div class="container">
    <h2 style="color: #666666">新增使用者資訊</h2><br>
<!--    表單-->
    <form method="post" action="">
        使用者：
        <input type="text" name="username">
        <br><br>
        密碼：
        <input type="password" name="password">
        <br><br>
        手機號：
        <input type="text" minlength="11" maxlength="11" name="phone">
        <br><br>
        性別：
        <input type="radio" name="sex" value="0" checked>男
        <input type="radio" name="sex" value="1" checked>女
        <br><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </form>
</div>
{% endblock%}

前端展示效果如下：

開啟瀏覽器，輸入如下連結格式：http://ip/hello/adduser

使用者提交，後臺資料庫驗證：

認真填寫好資訊後，點選提交，成功的話就會顯示已成功新增使用者，另外可以到後臺DB去驗證下。

我一口氣建立了6個使用者，我任性。

備註：各位先忽略資料庫表中密碼是明文，後續實戰中會是密文的，不用擔心密碼洩漏。

2.6 使用者查詢

後臺執行指令碼配置：

hello\view.py

# 新增程式碼塊
# 使用者檢視函式
def showuser(request):
    # http://192.168.8.130:8888/hello/showuser/?keyword=test001
    # 獲取關鍵位置引數，get獲取唯一值，''表示預設引數，防止報錯
    keyword = request.GET.get('keyword', '')
    # 獲取所有資料
    users = User.objects.all()
    # 如果關鍵位置引數不為空
    if keyword:
        # 使用者名稱不區分大小寫過濾
        users = users.filter(username__icontains=keyword)
    # return 返回兩個引數'users'和'keyword'傳到前端
    return render(request, 'hello/showuser.html', {'users':users, 'keyword':keyword})

檢視模板配置：

templates\hello\showuser.html

<!--繼承母版-->
{% extends "base.html" %}
<!--重寫title的內容-->
{% block title %} 使用者查詢 {% endblock %}
<!--重寫body的內容-->
{% block body %}
<div class="container">
    <h2 style="color: #666666">查詢使用者資訊</h2><br>
<!--搜尋框-->
<!--    action重定向到http://ip/hello/showuser,showuser是名稱空間name-->
<!--    'hello:showuser' 等同於 http://ip/hello/showuser/  -->
<!--    name='keyword' 表示 http://ip/hello/showuser/?keyword='test001'中的keyword引數-->
<!--    value 表示在文字框中顯示-->
    <form action="{% url 'hello:showuser' %}">
        <input type="text" name="keyword" value="{{ keyword }}" placeholder="請輸入想要查詢的資訊">
    <button type="submit"> 搜尋 </button>
    </form>

<!--表格-->
    <table border="1">
        <thead>
            <tr>
                <th> ID </th>
                <th> 使用者名稱 </th>
                <th> 密碼 </th>
                <th> 手機號碼 </th>
                <th> 性別 </th>
                <th> 操作 </th>
            </tr>
        </thead>
        <br>
        <tbody>
            {% for user in users %}
            <tr>
                <td> {{ user.id }} </td>
                <td> {{ user.username }} </td>
                <td> {{ user.password }} </td>
                <td> {{ user.phone }} </td>
                <td> {% if user.sex == 0 %}男 {% elif user.sex == 1 %}女 {% else %}none {% endif %} </td>
                <td>
                    <a href="{% url 'hello:edituser' user.id %}"> 更新 </a>
                    <a href="{% url 'hello:deluser' user.id %}"> 刪除 </a>
<!--                    等同於如下，但不推薦此方式：-->
<!--                    <a href="/hello/edituser/{{user.id}}/"> 更新 </a>-->
<!--                    <a href="/hello/deluser/{{user.id}}/"> 刪除 </a>-->
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock%}

前端展示效果如下：

查詢使用者，展示如下：

此時後臺是通過username來過濾，後期我們會通過Q方法來過濾多個欄位。

2.7 使用者修改

後臺執行指令碼配置:

hello/view.py

重點說明： 不管是使用者查詢還是刪除，重點以ID (資料庫中的主鍵)進行操作，不要使用其他欄位。

# 新增程式碼，使用者修改函式
def edituser(request, **kwargs):
    msg = {}
    pk = kwargs.get('pk', '')
    # 先檢查pk是否存在，不存在則報404錯誤
    user = get_object_or_404(User, pk=pk)
    if request.method == 'POST':
        try:
            data = request.POST.dict()
            User.objects.filter(pk=pk).update(**data)
            msg = {'code':0, 'result':'已成功更新使用者'}
        except:
            msg = {'code':1, 'result':'使用者更新失敗: '.format(traceback.format_exc())}
      
    return render(request, 'hello/edituser.html', {'user':user, 'msg':msg})

檢視模板配置

templates\hello\edituser.html

<!--繼承母版-->
{% extends "base.html" %}
<!--重寫title的內容-->
{% block title %} 更新使用者 {% endblock %}
<!--重寫body的內容-->
{% block body %}

<!--顯示成功或失敗的資訊-->
{% if msg.code == 0 %}
    <p style="color: green"> {{ msg.result }}</p>
{% else %}
    <p style="color: red"> {{ msg.result }}</p>
{% endif %}

<div class="container">
    <h2 style="color: #666666">更新使用者資訊</h2><br>

    <form method="post" action="">
        使用者名稱:
        <input type="text" name="username" value="{{ user.username }}">
        <br>
        <br>
        密碼:
        <input type="password" name="password" value="{{ user.password }}">
        <br>
        <br>
        手機號碼:
        <input type="text" name="phone" value="{{ user.phone }}">
        <br>
        <br>
        性別:
        {% if user.sex == 0 %}
            <input type="radio" name="sex" value="0" checked>男
            <input type="radio" name="sex" value="1">女
        {% else %}
            <input type="radio" name="sex" value="0" >男
            <input type="radio" name="sex" value="0" checked>女
        {% endif %}
        <br>
        <br>
        <button type="submit"> 提交 </button>
        <button> <a href="{% url 'hello:showuser' %}"> 取消 </a></button>
    </form>
</div>
{% endblock%}

前端展示效果如下：

在使用者列表的操作項，點選更新，跳轉該頁面：

修改使用者，展示如下：

將使用者名稱test006的性別修改為男，結果如下：

當pk不存在的時候，測試效果如下：

後臺資料庫查表驗證下：

2.8 使用者刪除

後臺執行指令碼配置

hello\view.py

# 新增程式碼, 使用者刪除函式
def deluser(request, **kwargs):
    msg = {}
    pk = kwargs.get('pk', '')
    try:
        # 獲取單個使用者資訊
        user = User.objects.get(pk=pk)
    except User.DoesNotExist:
        # 如果使用者不存在，則返回404錯誤
        raise Http404
    if request.method == 'POST':
        try:
            User.objects.get(pk=pk).delete()
            msg = {'code':0, 'result':'已成功刪除使用者'}
        except:
            msg = {'code': 1, 'result': '使用者刪除失敗: '.format(traceback.format_exc())}
    return render(request, 'hello/deluser.html', {'user':user, 'msg':msg})

檢視模板配置

templates\hello\deluser.html

<!--繼承母版-->
{% extends "base.html" %}
<!--重寫title的內容-->
{% block title %} 刪除使用者資訊 {% endblock %}
<!--重寫body的內容-->
{% block body %}

<!--顯示成功或失敗的資訊-->
{% if msg.code == 0 %}
    <p style="color: green"> {{ msg.result }} {{ user.username }} </p>
{% else %}
    <p style="color: red"> {{ msg.result }}</p>
{% endif %}

<div class="container">
    <h2 style="color: #666666">刪除使用者資訊</h2>

    <h1 style="color: red"> Are you sure to delete {{ user.username }}? </h1>

    <form method="post" action="">
        <button type="submit"> 確定 </button>
        <button> <a href="{% url 'hello:showuser' %}"> 取消 </a></button>
    </form>

</div>
{% endblock%}

刪除使用者，展示如下：

在使用者列表的操作項，點選刪除，點選確定，已成功返回`：

刪除失敗效果如下：

至此，一套簡易的使用者系統已經完成啦，看起來是不是很簡單，大家跟著練習一把，有問題，請隨時討論，謝謝。

如果覺得這篇文章不錯，請點贊或分享到朋友圈吧!

如果喜歡的我的文章，歡迎關注我的公眾號：點滴技術，掃碼關注，不定期分享