记录自己成长001-基于django的登录页
前端登录页面代码
<!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 显 https://blog.csdn.net/weixin_30894583/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中使用
