<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>
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>
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; 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>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>
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>
效果展示：
mysql数据库有登录信息：uesername：shikai password：123
注：登录信息错误会提示红的字体
登录成功后点击用户信息即可查看全部用户
点击右面即可实现用户的增删查改