具体实现
-
1> 引入 《登录注册》 的模版文件
-
将提供的素材文件夹 "登录注册 " 中的
CSS、img、JS文件夹复制到项目根目录的static_files文件夹；将html文件复制到项目根目录的模板文件夹templates -
修改引入路径并测试
-
login.html{# 在head标签中引入css文件 #} <link rel="stylesheet" href="/static/css/reset.css"/> <link rel="stylesheet" href="/static/css/login_register.css"/> {# 修改跳转链接 #} <div class="form_reg_btn"><span>还没有帐号？</span><a href="/register">马上注册</a> </div> {# 在body 中引入js文件 #} <script type="text/javascript" src="/static/js/jquery.min.js"></script> <script type="text/javascript" src="/static/js/login_register.js"></script> register.html{# 标签中引入css文件 #} <link rel="stylesheet" href="/static/ss/reset.css"/> <link rel="stylesheet" href="/static/css/login_register.css"/> {# 修改跳转链接 #} <div class="form_reg_btn"><span>已有帐号？</span><a href="/login">马上登录</a> </div> {# 在body 中引入js文件 #} <script type="text/javascript" src="/static/js/jquery.min.js"></script> <script type="text/javascript" src="/static/js/login_register.js"></script> static_files/CSS/login_register.css 修改图片路径.login_wrap{background: url("/static/img/bg2.jpg") no-repeat center;background-size: 100%; } .logo{width: 500px;height: 150px;margin: 0px auto;background: url("/static/img/logo.png") no-repeat center; } - 编辑
users应用的路由和视图测试模板渲染情况-
users 应用路由
urlpatterns = [# 用户登录re_path(r'^login$', views.login),# 用户注册re_path(r'^register$', views.register) ] users 应用视图函数from django.shortcuts import render from django.http import HttpResponse # 登录的视图函数 def login(request):return render(request, "login.html") # 注册的视图函数 def register(request):return render(request, "register.html") -
API测试登录API: http://127.0.0.1:8080/login
注册API: http://127.0.0.1:8080/register
登陆与注册的跳转
-
-
-
-
2> 编辑路由、视图函数与模板文件完成具体业务逻辑
-
登录实现
-
编辑
login.html模版文件, 修改数据提交方式<form action="#" method="post"> {# 给表单添加一个隐藏的标签用来 保存csrf_token #} {% csrf_token %} ... <div class="form_btn">{# 给登录按钮添加 id属性; 并在JS中为按钮添加点击事件的处理逻辑 #}<button id="login" type="button">登录</button> </div> </form> <script type="text/javascript" src="/static/js/jquery.min.js"></script> <script type="text/javascript" src="/static/js/login_register.js"></script> <script>// 添加登录按钮的点击事件$("#login").click(function(event){// 取消默认事件event.preventDefault();$.ajax({url:'/login',type: 'post',data: {// 携带csrftokencsrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),username: $("input[name='username']").val(),password: $("input[name='password']").val()},success: function(response){if(response.status === 200){alert(response.msg);// 登录成功之后跳转到指定页面location.href = "#";}else{alert(response.msg);// 将表单数据复位$("form")[0].reset();}},error:function(error){console.log(error.responseText);}})}) </script> 编辑 users 应用的 views.py 视图文件from django.shortcuts import render from django.http import HttpResponse, HttpResponseNotAllowed, JsonResponse from .models import User # 登录的视图函数 def login(request):if request.method == "GET":return render(request, "login.html")elif request.method == "POST":# 读取数据data = request.POSTusername = data.get("username")password = data.get("password")# 数据校验,不要相信前端if len(username) > 20 or len(username) < 6:return JsonResponse({"status": 400, "msg": "请输入长度为6-20的用户名！"}) if not User.objects.filter(username__exact=username, password__exact=password):return JsonResponse({"status": 400, "msg": "账号或密码错误！"}) return JsonResponse({"status": 200, "msg": "登录成功！"})else:return HttpResponseNotAllowed - 手动在
tb_user数据表 中添加一个用户进行登录功能调试
-
-
注册实现
-
编辑
register.html模版文件, 修改数据提交方式<div class="login_form"> {% csrf_token %} ... <div class="form_btn"><button id="register" type="button">注册</button> </div> </form> <script type="text/javascript" src="/static/js/jquery.min.js"></script> <script type="text/javascript" src="/static/js/login_register.js"></script> <script>$("#register").click(function (event) {// 取消默认事件event.preventDefault();if ($("input[name='password']").val() === $("input[name='repassword']").val()) {$.ajax({url: '/register',type: 'post',data: {// 携带csrftokencsrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),username: $("input[name='username']").val(),password: $("input[name='password']").val(),code: $("input[name='code']").val()},success: function (response) {if (response.status === 200) {alert(response.msg);// 注册成功之后跳转到登录页面location.href = "/login";} else {alert(response.msg);// 将表单数据复位$("form")[0].reset();}},error: function (error) {console.log(error.responseText);}})}else{alert("两次输入密码不一致！")} }) </script> -
编辑 users 应用的
views.py视图文件# 注册的视图函数 def register(request):if request.method == "GET":return render(request, "register.html")elif request.method == "POST":# 读取数据data = request.POSTusername = data.get("username")password = data.get("password")code = data.get("code")# 数据校验if len(username) > 20 or len(username) < 6 or len(password) > 20 or len(password) < 6:return JsonResponse({"status": 400, "msg": "用户名和密码应该为6-20位长度！"})if User.objects.filter(username__exact=username):return JsonResponse({"status": 400, "msg": "用户已存在！"})if code != "888888":return JsonResponse({"status": 400, "msg": "验证码错误！"})User.objects.create(username=username,password=password,)return JsonResponse({"status": 200, "msg": "用户注册成功！"})else:return HttpResponseNotAllowed -
注册功能调试
-
-