<二>基於Django 簡單後臺管理頁面

時間 2019-11-19

原文原文鏈接

<1> 整個後臺頁面佈局項目基於python的Django框架進行開發

①實現用戶登陸css

②實現用戶對本身數據的增刪改查html

(1)在app cmdb的models.py下建立用戶數據表：用戶表Userinfo ，職位表：UserGrouppython

models.pymysql

from django.db import models

# Create your models here.

# 在mysql數據庫中建立cmdb_userinfo的表
class Userinfo(models.Model):
    username=models.CharField(max_length=32)
    password=models.CharField(max_length=64)
    user_group=models.ForeignKey("UserGroup",to_field="uid",on_delete=models.CASCADE,null=True)    #設置外鍵  把UserGroup的id做爲外鍵  on_delete=models.CASCADE 外鍵刪除也自動刪除


class UserGroup(models.Model):
    uid=models.AutoField(primary_key=True)   #設置爲主鍵
    position=models.CharField(max_length=32)
    date=models.DateTimeField(auto_now_add=True,null=True)

　視圖函數views.py 代碼編寫：sql

from django.shortcuts import render
from django.shortcuts import HttpResponse
from django.shortcuts import redirect
import os
from django.core.files.uploadedfile import InMemoryUploadedFile
# Create your views here.


#FBV模式
def login(request):
    # request裏包含了用戶提交的全部信息

    error_mag=""
    # 獲取用戶提交的方法
    if request.method=='POST':
    # 獲取登錄界面用戶輸入的值
        username=request.POST.get('user',None)
        password=request.POST.get('pwd',None)
        print(username,password)
        if username=='shikai' and password=='123':
            # 若是用戶名密碼正確 從新跳轉到新網址
            return render(request,'index.html')
        else:
            error_mag="用戶名或密碼錯誤"
    # render 打開和讀取login.html文件內容
    return render(request,'login.html',{"error_mag":error_mag})   #讀取login.HTML裏的內容   把error_mag添加到login.html中相應位置

def detail(request):     #查看用戶名信息
    if request.method == "GET":
        #從數據庫取出信息發送用戶
        obj=models.Userinfo.objects.all()
        grou_list=models.UserGroup.objects.all()
        return render(request,'detail.html',{"obj":obj,"grou_list":grou_list})   #把obj值傳到detail模板頁面
    # 新增用戶  並把數據添加到數據庫  返回給用戶
    elif request.method == "POST":
        u = request.POST.get("username")
        p = request.POST.get("password")
        models.Userinfo.objects.create(username=u,password=p)     #添加到用戶到數據庫
        return redirect("/cmdb/detail/")       #添加到頁面


def user_detail(request,nid):     ##查看用戶具體信息
    if request.method=="GET":
        #從數據庫取出信息發送用戶
        obj=models.Userinfo.objects.filter(id=nid).first()
        return render(request, 'user_detail.html', {"obj":obj})   #把obj值傳到detail模板頁面
def user_del(request,nid):  #刪除用戶
    models.Userinfo.objects.filter(id=nid).delete()
    return redirect("/cmdb/detail/")

def user_edit(request,nid):  #修改用戶
    if request.method=="GET":
        obj=models.Userinfo.objects.filter(id=nid).first()
        return render(request, 'user_edit.html', {"obj": obj})
    elif request.method=="POST":
        u=request.POST.get("username")      #拿到提交的數據
        p=request.POST.get("password")
        models.Userinfo.objects.filter(id=nid).update(username=u,password=p)
        return redirect("/cmdb/detail/")

視圖函數編寫

url配置數據庫

urlpatterns = [
    path('login/', views.login),      #    #在地址後面加上admin/ 便可實現admin.site.url的功能
    path('dict/', views.dict),      #
    #path('login/', views.login.as_view()),    #CBV 模式
    path('addfile/', views.addfile),
    path('orm/', views.orm),
    path('detail/', views.detail),
    re_path(r'^user_detail-(?P<nid>\d+)/', views.user_detail),
    re_path(r'^user_del-(?P<nid>\d+)/', views.user_del),
    re_path(r'^user_edit-(?P<nid>\d+)/', views.user_edit),
]

HTML模板django

login頁：app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/common.css">
    <style>
        label{
            width: 80px;
            text-align: right;
            display: inline-block;
        }
    </style>

</head>
<body>
{#action="/login"  中/login爲url#}
    <form action="/cmdb/login/" method="post">
        <p>
            <label for="username" >用戶名:</label>
            <input type="text" id="username" name="user">
        </p>
        <p>
{#            name屬性裏值提交到後臺#}
            <label for="password" >密碼:</label>
            <input type="password" id="password" name="pwd">
            <input type="submit" value="提交">
            <span style="color: #FF4200">{{ error_mag}}</span>
        </p>
    </form>


</body>
</html>

View Code

index.html 導航頁框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .header{
            height: 48px;background-color: cornflowerblue;color: white;
        }
        .item{
            position: absolute;
            background-color: wheat;
            left: 0;
            top: 48px;
            bottom: 0;
            width: 300px;

        }
        .content{
            background-color: gainsboro;
            position: absolute;
            left: 300px;
            top: 48px;
            bottom: 0;
            right: 0;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="header">後臺管理頁面</div>
    <div class="item">
        <p><a href="/cmdb/detail/">用戶信息</a></p>
        <p><a href="/cmdb/detail/">用戶組</a></p>
    </div>
    <div class="content"></div>
</body>
</html>

View Code

detail.html 所有用戶頁ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .header{
            height: 48px;background-color: cornflowerblue;color: white;
        }
        .item{
            position: absolute;
            background-color: wheat;
            left: 0;
            top: 48px;
            bottom: 0;
            width: 300px;

        }
        .content{
            background-color: gainsboro;
            position: absolute;
            left: 300px;
            top: 48px;
            bottom: 0;
            right: 0;
            overflow: auto;
        }
        .content .content_item{
            {#padding: 5px 20px 5px 20px;#}
            display: inline-block;
            width: 55px;
        }
    </style>
</head>
<body>
    <div class="header">後臺管理頁面</div>
    <div class="item">
        <p><a href="/cmdb/detail/">用戶信息</a></p>
        <p><a >用戶組</a></p>
    </div>
    <div class="content">
        <h1 style="height: 100px">用戶名列表</h1>

        <form method="post" action="/cmdb/detail/">
            <h4>新增用戶</h4>
            <input type="text" name="username" >
            <input type="password" name="password">
            <select>
                {% for item in grou_list %}
                    <option value="{{ item.uid}}">{{ item.position}}</option>
                {% endfor %}
            </select>
            <input type="submit" value="提交">
        </form>
        <ul>
            {% for item in obj %}
                <li >
                    <a class="content_item" href="/cmdb/user_detail-{{ item.id }}/">{{ item.username }}</a>
                    :<span class="content_item">{{ item.user_group.position }}</span>
                    <a class="content_item" href="/cmdb/user_edit-{{ item.id }}/">編輯</a>
                    <a class="content_item" href="/cmdb/user_del-{{ item.id }}/">刪除</a>
                </li>
            {% endfor %}
        </ul>
    </div>
</body>
</html>

View Code

user_detail.html 我的用戶頁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .header{
            height: 48px;background-color: cornflowerblue;color: white;
        }
        .item{
            position: absolute;
            background-color: wheat;
            left: 0;
            top: 48px;
            bottom: 0;
            width: 300px;

        }
        .content{
            background-color: gainsboro;
            position: absolute;
            left: 300px;
            top: 48px;
            bottom: 0;
            right: 0;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="header">後臺管理頁面</div>
    <div class="item">
        <p><a href="/cmdb/detail/">用戶信息</a></p>
        <p><a >用戶組</a></p>
    </div>
    <div class="content">
        <h1>用戶詳細信息</h1>
        <ul>
                <li><a >{{ obj.id }}</a></li>
                <li><a >{{ obj.username }}</a></li>
                <li><a >{{ obj.password }}</a></li>
        </ul>
    </div>
</body>
</html>

View Code

user_edit:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .header{
            height: 48px;background-color: cornflowerblue;color: white;
        }
        .item{
            position: absolute;
            background-color: wheat;
            left: 0;
            top: 48px;
            bottom: 0;
            width: 300px;

        }
        .content{
            background-color: gainsboro;
            position: absolute;
            left: 300px;
            top: 48px;
            bottom: 0;
            right: 0;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="header">後臺管理頁面</div>
    <div class="item">
        <p><a href="/cmdb/detail/">用戶信息</a></p>
        <p><a >用戶組</a></p>
    </div>
    <div class="content">
        <h1 style="height: 100px">編輯用戶</h1>

        <form method="post" action="/cmdb/user_edit-{{ obj.id }}/">
            <input type="text" name="username" value='{{ obj.username}}' >
            <input type="password" name="password" value='{{ obj.password}}'>
            <input type="submit" value="提交">
        </form>

    </div>
</body>
</html>