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

  • 注册功能调试