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

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

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

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

转载于:https://www.cnblogs.com/shikaishikai/p/9699076.html

二基于Django 简单后台管理页面相关推荐

Django admin后台管理页面的常用设置
Django admin后台管理页面的常用设置选择列表选项choices # filename: models.pyfrom django.db import models# 例1 int类型:ST ...
使用SpringBoot一小时快速搭建一个简单后台管理（增删改查）（超详细教程）
最近也是临近期末了,各种的期末大作业,后台管理也是很多地方需要用到的,为了方便大家能快速上手,快速搭建一个简单的后台管理,我花了两天时间整理了一下我会从0开始介绍,从数据库的设计到前端页面的引入最后 ...
后台管理页面基本布局方式
经典页面布局简易后台管理页面布局 1 左边菜单栏固定 2 header固定高度(宽度自适应) 3 主体统计列表(宽度自适应) 代码如下 html <div class="main&q ...
bootstrap搭建后台管理页面
bootstrap搭建后台管理页面管理页面主体包括4部分,顶部导航栏,左侧导航栏,中间正文页和底部的页脚.其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件,主体页面为了演示方便,使用了i ...
登录、注册、后台管理页面（动态）
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面二.博客地址:https://www.cnblogs.com/catepython/p/93 ...
老男孩Day16作业：登录、注册、后台管理页面（动态）
一.作业需求:1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮)2.老男孩登录.注册页面二.博客地址:https://www.cnblogs.com/catepython/p/93063 ...
微信后台管理页面html
wx_manage(git仓库见文末) 原文:https://i847.cn/article/63834.html 介绍微信后台管理页面,由其他项目二次开发而来. 注意自己写接口,接口名字和参数详 ...
后台管理页面布局（左侧导航长度根据右侧内容无限延伸）
2019独角兽企业重金招聘Python工程师标准>>> 如图为标准后台管理页面布局,左侧导航布局一般是设置高度100%来适应所有尺寸的显示器打开的浏览器高度. 但是这种布局会 ...
基于layui的后台管理模板
介绍: 基于layui的后台管理模板网盘下载地址: http://kekewangLuo.cc/U6mcEZKHXpb 图片:

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

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

二基于Django 简单后台管理页面相关推荐

最新文章

热门文章