Django 编写注册页面

渲染用户信息

views.py:

@login_required
def show_user(request):
    user = WeChatUser.objects.get(user = request.user)
    return render(request,"user.html",{"user":user})

templates/user.html:

    <div class="container">
        <div class="row">
            <div class="col-md-2">
                <img src="/static/image/{{ user.pic }}" class="img-responsive img-thumbnail">
            </div>
            <div class="col-md-10">
                <h1 style="font-size:70px">{{ user.user }}</h1>
                <p style="font-size:50px">Email: {{ user.user.email }}</p>
            </div>
        </div>
        <div class="row" style="margin-top:62px">
            <div class="col-md-4">
                <p style="font-size:50px">Region</p>
            </div>
            <div class="col-md-8">
                <p style="font-size:50px;color:gray">{{ user.region }}</p>
            </div>
        </div>

注册用户功能

命令行尝试

[root@localhost wechat]# python3 manage.py shell

Python 3.7.5 (default, Apr 16 2020, 22:32:00)
[GCC 4.8.5 20150623 (Red Hat 4.8.5-39)] on linux
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
>>> from moments.models import WeChatUser,User
>>> user = User(username="buzz",email="buz@disney.com")
>>> user.set_password("buzz")
>>> user.save()
#第二种创建数据的方法
>>> WeChatUser.objects.create(user=user)
<WeChatUser: buzz>

admin后台验证

编写注册页面

编写view方法

momments/views.py:

from django.http import HttpResponse,JsonResponse

from .models import WeChatUser,Status,User

。。。

def register(request):
    username = request.POST.get('username')
    password = request.POST.get('password')
    email = request.POST.get('email')

    try:
        user = User(username=username,email = email)
        user.set_password(password)
        user.save()

        WeChatUser.objects.create(user=user)
    except Exception as err:
        result = False
        message = str(err)
    else:
        result = True
        message = "Register success"

    return JsonResponse({"result":result,"message":message})

配置url

wechat/urls.py:

from django.contrib import admin
from django.urls import path
from moments.views import home
from moments.views import show_user,show_status,submit_post
from moments.views import register
from django.contrib.auth.views import LoginView,LogoutView
urlpatterns = [
    path('admin/', admin.site.urls),
    path('',LoginView.as_view(template_name="homepage.html")),
    path('', home),
    path('user',show_user),
    path('status',show_status),
    path('post',submit_post),
    path('exit',LogoutView.as_view(next_page="/")),
    path('register',register),
]

浏览器输入：http://10.0.0.30:8000/register 验证

{"result": false, "message": "auth_user.username may not be NULL"}

说明地址正确。

前端页面编写

我们先用一个接口测试，然后用实际的ajax编写。

测试POST请求

Windows中编写如下代码，test_post.py

import requests


data ={"username":"nemo2",
       "password":"nemo2",
       "email": "nemo2@disney.com",
       "csrfmiddlewaretoken": "5BN2BQ1XMXbEGbduWQ69iIjQjoERU6Y18PF0HKmneVwwkG4zZIKl4AOlrSCij85m"}
cookies = {
    "csrftoken": "2BxkgM7dB4qhfXDYcKghlohPeps0kLHE5PpimGsD32L9Tsu3fCUt7gMkmTqrJNOZ"
}
r= requests.post("http://10.0.0.30:8000/register",data=data,cookies=cookies)
print(r.text)

运行 test_post.py

{"result": true, "message": "Register success"}

r如果出现 reuslt :false 说明有错

csrfmiidelwaretoken 值 可从这里找：

csrftoken值可从这里找.

admin后台验证：

确认接口可创建用户：

接下来用Ajax 发送：

引用用到的前端库

在 base.html 中将 body 中的两个 script 标签移到 head 中

给表单元素添加id

在 homepage.html 的注册<form>中将<button>标签改为<a>标签，并向移掉其 type=”submit”属性。并给它和 <input> 标签添加 id:

<form style="background-color:white; margin-top:2vh; padding:2vh 2vh 8vh 2vh">
                    <p style="font-size:16px"><strong>New to WeChat?</strong> Sign up</p>
                    <div class="form-group">                    
                        <input type="text" class="form-control" id="register_username" placeholder="Full name">
                    </div>
                    <div class="form-group">                    
                        <input type="email" class="form-control" id="register_email" placeholder="Email">
                    </div>
                    <div class="form-group">                    
                        <input type="password" class="form-control" id="register_password" placeholder="Password">
                    </div>
                    <a style="float:right" id="register_submit"  class="btn btn-warning">Sign up for WeChat</a>
                </form>

编写ajax代码

在 homepage.html 中添加<script>标签，并添加如下代码：

    <script>
              function register() {
                      $.ajax({
                            url: "/register",
                            type: "post",
                            data: {
                                  "username" : $("#register_username").val(),

                                  "password" : $("#register_password").val(),

                                  "email" : $("#register_email").val(),

                                  "csrfmiddlewaretoken": $("input[name='csrfmiddlewaretoken']").val()
                            },
                            success: function(res){
                                   alert(res["message"]),
                                   location.reload()
                            }
                        })
              }

             $("#register_submit").click(function(){
                console.log ("控制台输出");
                register()
             })

    </script>

测试验证

在注册页面，填写新用户信息，点击提交，

如果成功，会显示如图所示：

admin后台查看：

果然新添了一个用户po。