<二>基於Django 簡單后台管理頁面

本文轉載自查看原文 2018-09-25 13:39 1209 python 項目

<1> 整個后台頁面布局項目基於python的Django框架進行開發

①實現用戶登錄

②實現用戶對自己數據的增刪改查

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

models.py

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 代碼編寫：

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

login頁：

<!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 全部用戶頁

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

View Code

效果展示：

mysql數據庫有登錄信息：uesername：shikai password：123

注：登錄信息錯誤會提示紅的字體

登錄成功后點擊用戶信息即可查看全部用戶

點擊右面即可實現用戶的增刪查改

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 django實現簡單的后台管理頁面和部分數據展示 django：xadmin后台管理頁面上傳文件 Django---Django管理后台 django admin后台管理 Django之后台管理一 Django 默認管理后台-admin Django自帶后台管理配置后台管理頁面布局、web頁面布局 django的管理后台-xadmin官方文檔可插拔式后台管理系統（Django）