具体实现
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: { // 携带csrftoken csrfmiddlewaretoken: $("[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.POST username = 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: { // 携带csrftoken csrfmiddlewaretoken: $("[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.POST username = 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 -
注册功能调试
-