前端登录页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SRM平台系统</title>
<link rel="stylesheet" href="../static/css/login.css"/>
</head>
<body>
<script src="/static/js/jquery-3.6.0/jquery-3.6.0.min.js"></script>
<script src="/static/js/jquery-3.6.0/jquery-3.6.0.js"></script>
{# <p><b>Python_Web_使用Django搭建Web服务器</b></p>#}
<form action="/" method="post">
{# 设置登录页背景图片#}
<div class="demo">
{# 登录框样式设置#}
<div id="login-box">
<div>
<div>
<h1 id="loginTitle">输入用户名称</h1>
{# <p>输入用户名称</p>#}
</div>
<div>
<label>
<input id="loginName-box" type="text" placeholder="请输入您的用户名" name="user" />
{# input 报错显示： Missing associated label ==>缺少关联标签#}
{# label 标签解决input 显/article/details/96561284#}
</label>
</div>
{# <input type="text" placeholder="13324681397" name="user" />#}
<div>
<label>
<input id="loginPassword-box" type="password" placeholder="请输入您的密码" name="pwd" />
</label>
</div>
{# <input type="password" placeholder="666666" name="pwd" />#}
<div>
<input class="button" type="submit" value="提交" name="loginSubmit" />
</div>
</div>
</div>
<div>
<P>用户已输入的数据展示</p>
<table border="2">
{#Deprecated HTML attribute: 不推荐的HTML属性 =>border#}
<thead>
{#Element th is not allowed here : 此处不允许使用元素th #}
<th>编号</th>
<th>手机号</th>
<th>密码</th>
<th>用户名</th>
<th>用户类型</th>
</thead>
<tbody>
{#注释: jinja2的语法,下面表示一个for循环,data是views的indexHtml函数传递过来的key值 ,在jinja2中，存在三种语法： 控制结构 {% %},变量取值 {{ }},注释 {# #}
{% for line in data %}
<tr>
<td>{{ line.id }}</td>
<td>{{ line.user }}</td>
<td>{{ line.pwd }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</form>
</body>
</html>
登录页面样式
/*登录页面设置属性*/
.demo{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
min-width:1000px;
z-index:-10;
zoom:1;
background-color:#fff;
background:url("/static/imgs/1.png"); /*背景图片路径*/
background-repeat:no-repeat;
background-size: auto;
-webkit-background-size:cover;
-o-background-size:cover;
background-position:center;
}
/*登录标题设置*/
#loginTitle{
font: icon;
font-size: 25px;
color: white;
background: transparent;
}
/*设置登录框区域属性*/
#login-box {
border: 1px solid #00e1ff; /*边框*/
width: 350px; /*边框宽度*/
height: 244px; /*边框高度*/
text-align: center; /*盒子中的样式 所在位置 center==》居中 left 左边 right右边*/
margin:16%; /**/
margin-left:70%; /*框体距离左边的距离*/
margin-top:15%; /*框内实体距离上一级，边框的顶部距离*/
/*background-image: url("/static/imgs/jsonstsan.png");*/ /*使用图片作为背景图*/
/*background:lightsteelblue; !*使用颜色做边框的背景图*!*/
background:transparent; /*使用透明色色做边框的背景图*/
padding: 5% 1%; /*框内实体的位置 第一个参数是 距离下面边距 第二个参数是距离右面边距*/
}
/*先放着*/
#loginNumber-box {
color: white;
}
/*设置用户名登录框属性*/
#loginName-box{
background: transparent; /*transparent 设置背景色为透明 rgba(0, 0, 0, 0.8)也是设置为透明*/
margin-top: 3%; /*框内实体距离上一级，边框的顶部距离*/
padding: 1% 1%; /*框内实体的位置 第一个参数是 距离下面边距 第二个参数是距离右面边距*/
}
/*设置登录密码框属性*/
#loginPassword-box{
background: rgba(0, 0, 0, 0); /*transparent 设置背景色为透明 rgba(0, 0, 0, 0.8)也是设置为透明*/
margin-top: 3%; /*框内实体距离上一级，边框的顶部距离*/
padding: 1% 1%; /*框内实体的位置 第一个参数是 距离下面边距 第二个参数是距离右面边距*/
}
/*设置提交按钮样式*/
#loginButton-box{
background: #a73417; /*transparent 设置背景色为透明 rgba(0, 0, 0, 0.8)也是设置为透明*/
margin-top: 3px; /*框内实体距离上一级，边框的顶部距离*/
padding: 1% 1%; /*框内实体的位置 第一个参数是 距离下面边距 第二个参数是距离右面边距*/
}
/*重置按钮属性*/
.button {
background-color: transparent; /*!* Green *!*/
/*background-color: aqua;*/
/*background-image: url("/static/imgs/jsonstsan.png");*/
border: 3px solid #4cff00; /*边框*/
color: #a73417; /*字体颜色*/
padding: 5px 10px; /*按钮宽高*/
margin-top: 5px; /*上边距*/
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 22px;
}
/*设置input输入框的背景色*/
/*CSS修改input的placeholder颜色*/
input::-webkit-input-placeholder {
color: #e83c11;
font:caption;
}
views.py
from django.shortcuts import render
from cmdb import models
"""
# Create your views here.
# from django.shortcuts import HttpResponse # 导入HTTP响应类
# def helloDjango(request): # request参数必须有,类似self的默认规则,名字可以修改.他封装了用户请求的所有内容
# return HttpResponse("Hello Django world ~~~~~ ") # 在django的响应中不能直接返回字符串,需由HttpResponse封装
"""
# 创建一个用户列表,预先存储两个数据
user_list = [
{"user": "tom", "pwd": "123456"},
{"user": "bob", "pwd": "147258"},
]
"""
# def indexHtml(request):
# 返回一个HTML文件,当想渲染一个html文件时,需要使用render方法进行打包
# if request.method == "POST":
# name = request.POST.get("userName", None)
# pwd = request.POST.get("userPwd", None)
# print("name={0},pwd={1}".format(name, pwd))
# return render(request, "index.html") # 参数1固定,参数2:指定返回的html文件
# def indexHtml(request):
# 返回一个HTML文件,当想渲染一个html文件时,需要使用render方法进行打包
# if request.method == "POST":
# name = request.POST.get("userName", None)
# pwd = request.POST.get("userPwd", None)
# print("name={0},pwd={1}".format(name, pwd))
# tem = {"user": name, "pwd": pwd}
# user_list.append(tem)
# return render(request, "index.html",{"data": user_list})
# 参数1固定,参数2:指定返回的html文件,参数3是后台返回给浏览器的数据是一个字典,
# "data"键名为一个指针会被对应到html中使用
"""
def index_html(request): # Function name should be lowercase
"""
返回一个HTML文件,当想渲染一个html文件时,需要使用render方法进行打包
"""
# user_list_fist = []
# print(10010, "判断密码是不是正确")
if request.method == "POST":
print(10000, "index", "从页面拿输入的手机号码和密码")
username = request.POST.get("user", None)
password = request.POST.get("pwd", None)
print(10011, "index", "登录用户==>", "name={0},pwd={1}".format(username, password))
istrue = 0
users = models.UserInfo.objects.all() # 从数据库中读取所有行
# print(90100, users)
# 若UserInfo中的字段名和html中使用的字段名对应可省略下面的转换操作
user_list1 = []
print(10018, "index", "系统表中的用户==>", "^^^^^^^==显==示==在==下==方==^^^^^^^^")
for user in users: # 遍历从数据库中取出的数据转换为待展示的字典格式
tem = {"id": user.id, "user": user.username, "pwd": user.password}
user_list1.append(tem)
if user.username == username and user.password == password:
istrue = 1
# print(000000)
break
else:
istrue = 0
# print(11111)
# print(10016, user_list1)
import MySQLdb
# 打开数据库连接
db = MySQLdb.connect("127.0.0.1", "root", "root", "huwenlong", charset='utf8')
# 使用cursor()方法获取操作游标
cursor = db.cursor()
# SQL 查询语句
# sql = "SELECT * FROM cmdb_userinfo WHERE INCOME > %s" % (1000)
sql = "SELECT * FROM huwenlong.cmdb_userinfo;"
# print(10012, sql)+
try:
# 执行SQL语句
cursor.execute(sql)
# 获取所有记录列表
results = cursor.fetchall()
login_system = []
login = login_system.append(results)
# 拿到数据库的列表
# print(9008, "拿到cmdb_userinfo表中的数据", login)
for row in results:
id = row[0]
username = row[1]
password = row[2]
user_area = row[3]
user_name = row[4]
print(10013, "index", "打印cmdb_userinfo表中的数据==>", "编号=%s,用户名称=%s,登录密码=%s,用户姓名=%s,用户类型=%s" %
(id, username, password, user_area, user_name)) # 打印结果
# login_system.append(results)
# print(9007, "拿到cmdb_userinfo表中的数据", login_system)
# print(9009, "拿到cmdb_userinfo表中的数据", login_system)
except:
# 出错
print(10014, "index", "Error: unable to fetch data")
# 关闭数据库连接
db.close()
if istrue == 1: # 判断用户名及密码是否正确
# 返回的数据和数据表中的数据进行对比
# 渠道值，比对正确后跳转
# return HttpResponse("Hello Django world ~~~~~ ")
# 如果正确，（这里调用另一个函数，实现登陆成功页面独立，使用HttpResponseRedirect()方法实现
# 跳转页面
return render(request, 'system.html', {'info': 'Welcome to login,sir...'})
else:
# 用户密码错误，跳转这页面
return render(request, '404.html', {'error': 'username or password eror'})
# 不正确，通过render(request,"index.html")方法在error标签处显示错误提示
models.UserInfo.objects.create(username=name, password=pwd) # 添加数据到数据库
users = models.UserInfo.objects.all() # 从数据库中读取所有行
print(10045, "index", "打印从用户表中拿到了什么！", users.values())
# 若UserInfo中的字段名和html中使用的字段名对应可省略下面的转换操作
user_list = []
for user in users: # 遍历从数据库中取出的数据转换为待展示的字典格式
tem = {"user": user.username, "pwd": user.password}
user_list.append(tem)
# print(10015, user_list)
return render(request, "login.html", {"data": user_list}) # 参数1固定,参数2:指定返回的html文件,参数3是后台返回给浏览器的数据是一个字典,
# "data"键名为一个指针会被对应到html中使用
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
