记得在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): 2 """ 3 注册 4 1.获取网页数据（用户名，密码） 5 2.将用户名和密码写入数据库 6 :param request: 7 :return: 8 """ 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})