前端（HTML）+预设（Django）+数据库（MySQL）：用户注册及登录演示改良版
记得在app01下的models中搞定模型类
建立迁移文件：python manage.py makemigrations
根据迁移文件在指定数据库中生成表：python manage.py migrate
create database book character set utf8;创建数据库设置字符集编码
在settings里面设置mysql
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'books', #你的数据库名称
'USER': 'root', #你的数据库用户名
'PASSWORD': '', #你的数据库密码
'HOST': '', #你的数据库主机，留空默认为localhost
'PORT': '3306', #你的数据库端口
}
init连接mysql
import pymysql
pymysql.install_as_MySQLdb()
1.在templates中创建一个html文件用于简单的注册网页
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>注册</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 }
11
12 body {
13 background-color: rgb(235, 235, 235);
14 }
15
16 form {
17 width: 400px;
18 height: 320px;
19 background-color: white;
20 padding: 20px;
21 box-sizing: border-box;
22 position: absolute;
23 left: 50%;
24 top: 50%;
25 transform: translate(-50%, -50%);
26 /* 相对于现在所处位置的位移变化，x便偏移自己宽度的50%，y偏移自己高度的50% */
27 }
28
29 h2 {
30 margin-bottom: 20px;
31 text-align: center;
32 }
33
34 form input {
35 width: 100%;
36 height: 30px;
37 display: block;
38 margin-bottom: 20px;
39 padding-left: 10px;
40 box-sizing: border-box;
41 }
42
43 .mya {
44 width: 100%;
45 height: 30px;
46 margin-bottom: 20px;
47 }
48
49 .mya a:nth-child(1) {
50 float: left;
51 }
52
53 .mya a:nth-child(2) {
54 float: right;
55 }
56
57 button {
58 width: 100%;
59 height: 40px;
60 background-color: rgb(235, 235, 235);
61 border: none;
62 }
63
64 button:active {
65 box-shadow: 0 0 3px rgb(173, 172, 172);
66 /* x偏移 y偏移 模糊值 颜色 */
67 }
68 </style>
69 </head>
70 <body>
71 <form method="post">
72 <h2>注册界面</h2>
73 <input id="username" type="text" placeholder="请输入账号" name="usernamekey">
74 <input id="password" type="password" placeholder="请输入密码" name="passwordkey">
75 <div class="mya">
76 <a href="http://127.0.0.1:8000/sign">已有帐号</a>
77 </div>
78 <button id="login-btn" type="submit">登录</button>
79 </form>
80
81 <script>
82 // let 定义一个变量
83 let username = document.getElementById('username')
84 let password = document.getElementById('password')
85 let loginBtn = document.getElementById('login-btn')
86 // js里面不允许出现 -
87
88 //一般的交互事件
89 // onclick 点击事件
90 // onmousemove 鼠标移入事件
91 // onmouseout 鼠标移出事件
92 // ondblclick 双击事件
93 // onfocus input框获取焦点事件
94 // onblur 失焦事件
95
96
97 loginBtn.onclick = function() {
98 let usernamevalue = username.value
99 let passwordvalue = password.value
100 // console.log(usernamevalue, passwordvalue)
101 // 便于检查的时候判断是否成功
102 if (!usernamevalue) {
103 return alert('请输入正确的用户名')
104 //return 跳出当前函数，并且返回后面的值
105 }
106 console.log(usernamevalue, passwordvalue)
107
108 }
109 </script>
110 </body>
111 </html>
2.在templates中创建再一个html文件用于简单的登录网页
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>登录</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 }
11
12 body {
13 background-color: rgb(235, 235, 235);
14 }
15
16 form {
17 width: 400px;
18 height: 320px;
19 background-color: white;
20 padding: 20px;
21 box-sizing: border-box;
22 position: absolute;
23 left: 50%;
24 top: 50%;
25 transform: translate(-50%, -50%);
26 /* 相对于现在所处位置的位移变化，x便偏移自己宽度的50%，y偏移自己高度的50% */
27 }
28
29 h2 {
30 margin-bottom: 20px;
31 text-align: center;
32 }
33
34 form input {
35 width: 100%;
36 height: 30px;
37 display: block;
38 margin-bottom: 20px;
39 padding-left: 10px;
40 box-sizing: border-box;
41 }
42
43 .mya {
44 width: 100%;
45 height: 30px;
46 margin-bottom: 20px;
47 }
48
49 .mya a:nth-child(1) {
50 float: left;
51 }
52
53 .mya a:nth-child(2) {
54 float: right;
55 }
56
57 button {
58 width: 100%;
59 height: 40px;
60 background-color: rgb(235, 235, 235);
61 border: none;
62 }
63
64 button:active {
65 box-shadow: 0 0 3px rgb(173, 172, 172);
66 /* x偏移 y偏移 模糊值 颜色 */
67 }
68 </style>
69 </head>
70 <body>
71 <form method="post">
72 <h2>登录界面</h2>
73 <input id="username" type="text" placeholder="请输入账号" name="usernamekey">
74 <input id="password" type="password" placeholder="请输入密码" name="passwordkey">
75 <div class="mya">
76 <a href="">忘记密码（正在开发中）</a>
77 <a href="http://127.0.0.1:8000/register">注册</a>
78 </div>
79 <button id="login-btn" type="submit">登录</button>
80 </form>
81
82 <script>
83 // let 定义一个变量
84 let username = document.getElementById('username')
85 let password = document.getElementById('password')
86 let loginBtn = document.getElementById('login-btn')
87 // js里面不允许出现 -
88
89 //一般的交互事件
90 // onclick 点击事件
91 // onmousemove 鼠标移入事件
92 // onmouseout 鼠标移出事件
93 // ondblclick 双击事件
94 // onfocus input框获取焦点事件
95 // onblur 失焦事件
96
97
98 loginBtn.onclick = function() {
99 let usernamevalue = username.value
100 let passwordvalue = password.value
101 // console.log(usernamevalue, passwordvalue)
102 // 便于检查的时候判断是否成功
103 if (!usernamevalue) {
104 return alert('请输入正确的用户名')
105 //return 跳出当前函数，并且返回后面的值
106 }
107 console.log(usernamevalue, passwordvalue)
108
109 }
110 </script>
111 </body>
112 </html>
3.在templates中创建一个html文件用于登陆后的网页
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <h1>{{ uname }}你好，恭喜你开启了新世纪！！！</h1>
9 </body>
10 </html>
4.在app01下的views.py中引入
from django.shortcuts import render, HttpResponse, redirect
from app01.models import User
1 def register(request):
"""
用户注册
本视图需要对get和post请求做分别的处理
post请求
1. 从POST请求中获取数据（username，pwd)
2. 对数据进行判空
3. 判断数据库有没有重复的用户名
4. 写入数据库
5. 写入cookie
6. 跳转个人中心
get请求
返回注册页面
:param request:
:return:
"""
9 if request.method == "POST":
10 uname = request.POST.get('usernamekey')
11 pwd = request.POST.get('passwordkey')
12 print(uname, pwd)
13 if not all([uname, pwd]):
14 return HttpResponse("缺少用户名或密码")
15 User.objects.create(username=uname, password=pwd)
16 res = redirect("/page")
17 request.session["username"] = uname
18 return res
19 return render(request, "register.html")
20
21
22 def sign(request):
23 """
24 登录
25 1.获取网页数据（用户名，密码）
26 2.进行用户名和密码的校验
27 :param request:
28 :return:
29 """
30 if request.method == "POST":
31 uname = request.POST.get('usernamekey') # 获取网页
32 pwd = request.POST.get('passwordkey')
33 if User.objects.filter(username=uname, password=pwd):
34 return redirect("/page")
35 else:
36 return HttpResponse("登录失败账号或密码错误")
37 return render(request, "sign.html")
38
39
40 def page(request):
41 """
42 页面
43 1.获取session进行判断
44 2.存在正常进入，不存在返回注册界面
45 :param request:
46 :return:
47 """
48 uname = request.session.get("username")
49 print(uname)
50 if not uname:
51 return redirect("/register")
52 return render(request, "page.html", {"uname": uname})
改良版的注册
1 def register(request): 2 """ 3 用户注册 4 本视图需要对get和post请求做分别的处理 5 post请求 6 1. 从POST请求中获取数据（username，pwd) 7 2. 对数据进行判空 8 3. 判断数据库有没有重复的用户名 9 4. 写入数据库 10 5. 写入cookie 11 6. 跳转个人中心 12 get请求 13 返回注册页面 14 :param request: 15 :return: 16 """ 17 if request.method == "POST": 18 uname = request.POST.get('usernamekey') # 获取post数据 19 pwd = request.POST.get('passwordkey') 20 print(uname, pwd) 21 if not all([uname, pwd]): # 判空 22 return HttpResponse("缺少用户名或密码") 23 # User.objects.create(username=uname, password=pwd) # 创建 24 # res = redirect("/page") 25 # request.session["username"] = uname 26 # return res 27 try: 28 users = User.objects.filter(username=uname) 29 except Exception as e: 30 return HttpResponse("数据库查询失败") 31 if users: 32 return HttpResponse("用户名重复") 33 try: 34 User.objects.create(username=uname, password=pwd) 35 except Exception as e: 36 return HttpResponse("数据库写入失败") 37 res = redirect("/page") 38 res.set_cookie("name", uname) 39 request.session["username"] = uname 40 return res 41 return render(request, "register.html")
改良版的登录
1 def get_user(request):
2 if request.method == "POST": # 先验证用户名是否存在再判断密码是否存在
3 usernamess = request.POST.get('usernamekey') # 获取post数据
4 passwordss = request.POST.get('passwordkey')
5 if not all([usernamess, passwordss]): # 判空
6 return HttpResponse("缺少用户名或密码")
7 # 密码
8 try:
9 users = User.objects.filter(username=usernamess)
10 except Exception as e:
11 return HttpResponse("数据库连接失败")
12 # 查看 User 表有没有 username
13 if users.count():
14 # .count 也可以写为 .exists,直接判断是否存在
15 # 有就是 1 , 没有就是 0
16 # user 用户存在
17 user = users.first()
18 # 取数据 last() 也可以
19 print(type(user.password))
20 print(type(passwordss))
21 if passwordss == user.password:
22 res = redirect("/page")
23 res.set_cookie("name", usernamess)
24 request.session["username"] = usernamess
25 return res
26 else:
27 print("密码错误")
28 else:
29 print("用户名不存在")
30 # return HttpResponse("获取成功")
31 uname = request.session.get("username", None)
32 uuname = request.COOKIES.get("name", None)
33 print(uname)
34 if uname:
35 return redirect("/page")
36 elif uuname:
37 return redirect("/page")
38 return render(request, "get_user.html")
浙公网安备 33010602011771号