<二>基于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>

View Code

效果展现：

mysql数据库有登陆信息：uesername：shikai password：123

注：登陆信息错误会提示红的字体

登陆成功后点击用户信息便可查看所有用户

点击右面便可实现用户的增删查改