<二>基于Django 简单后台管理页面

<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\d+)/', views.user_detail),
    re_path(r'^user_del-(?P\d+)/', views.user_del),
    re_path(r'^user_edit-(?P\d+)/', views.user_edit),
]

HTML模板

login页：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

index.html 导航页

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

detail.html 全部用户页

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

user_detail.html 个人用户页

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

user_edit:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>

效果展示：

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

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

登录成功后点击用户信息即可查看全部用户

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

python项目

<二>基于Django 简单后台管理页面

<1> 整个后台页面布局项目基于python的Django框架进行开发

相关

标签