11.1 配置路由
（1）修改 base.html 中“免费注册”的超链接
<div class="register"><a href="/user/register/">免费注册</a></div>
（2）配置路由
- 根路由
urlpatterns = \[
path('admin/', admin.site.urls),
path("", include("goods.urls")),
# 引入 goods 应用的映射路由
urls.py path("user/", include("userapp.urls"))
# 引入 userapp 应用的路由 urls.py ]
- userapp 应用的路由（要先创建userapp应用的 urls.py 文件）
from django.urls import path from userapp import views urlpatterns = [ path('register/', views.RegisterView.as_view()), path('checkUname/', views.CheckUnameView.as_view()), ]
11.2 创建视图(view.py)
from django.http import HttpResponse, JsonResponse
from django.shortcuts import render
from django.views import View
from userapp.models import UserInfo
# Create your views here. class RegisterView(View):
def get(self, request): return render(request, "register.html")
def post(self, request): # 获取请求参数 uname = request.POST.get('uname') pwd = request.POST.get('pwd')
# 插入数据库 user = UserInfo.objects.create(uname=uname, pwd=pwd)
# 判断是否注册成功 if user: return HttpResponse('True') # 注册成功 return HttpResponse('False') # 注册失败
class CheckUnameView(View): def get(self, request): # 获取请求参数 uname = request.GET.get('uname', '') # 根据用户名去数据库中查询 user\_list = UserInfo.objects.filter(uname=uname)
flag = False # 判断用户名是否存在 if user\_list: flag = True # 如果存在就返回 True return JsonResponse({'flag': flag})
11.3 创建页面 register.html
- 创建 userapp/templates/register.html
{% extends 'base.html' %} {% block title %} <title>用户注册</title> {% endblock %}
{% block headerjs %}
<script type="text/javascript" src="/static/md5-min.js"></script>
{% endblock %}
{% block main %}
<div class="login-body">
<div class="login-card">
<div class="login-top"> <h3>新用户注册</h3> <h5>尊敬的用户，欢迎您回来！</h5> </div> <div class="login-bottom">
<form method="post" action="/user/register/" onsubmit="return register()">
<div class="login-input-box">
{% csrf\_token %}
<input type="text" id="uname" name="uname" value="" class="login-admin active" placeholder="邮箱注册">
<span style="color:red;" id="aSpan">
</span> <input type="password" id="pwd" name="pwd" value="" class="login-password" style="border: 1px solid red">
<span style="color:red;" id="pSpan"></span>
<button class="login-btn" style="color: white;text-decoration: none;cursor: pointer">注册</button> </div> </form>
<div class="login-img">
<img src="/static/login_05.png" alt="转存失败，建议直接上传图片文件"> </div> </div> </div> </div>
{% endblock %}
{% block footer %}
<script> function isEmail(str)
{ var reg = /^\[a-zA-Z0-9\_-]{6,}@\[a-zA-Z0-9\_-]+(.\[a-zA-Z0-9\_-]+)+$/; return reg.test(str); }
{#用户名唯一性校验#} function checkUname(username)
{ var flag = false; $.ajax({ url:'/user/checkUname/', type:'GET', async:false, data:{"uname":username}, success:function (result)
{ var flag2 = result.flag;
if( flag2 ){ flag = true; $('#aSpan').html('用户名已存在！'); } } }); return flag; } function register()
{ //获取输入框的值 var uname = $('#uname').val(); var pwd = $('#pwd').val(); //简单校验 if(uname.length<6){ $('#aSpan').text('邮箱长度不能小于六位'); return false; } if(!isEmail(uname)){ $('#aSpan').text('邮箱格式不正确'); return false; } if (checkUname(uname)){ $('#aSpan').text('用户已存在');
return false }
if(pwd.length<6){ $('#pSpan').text('密码长度不能小于六位');
return false; } hex_pwd = hex_md5(pwd);
$('#pwd').val(hex\_pwd); return true } </script> {% endblock %}
12.1 配置路由
（1）修改 base.html 中“免费注册”的超链接
<div class="register"><a href="/user/register/">注册</a></div>
（2）配置路由
- 根路由
urlpatterns = \[ path('admin/', admin.site.urls),
path("", include("goods.urls")), # 引入 goods 应用的映射路由
urls.py path("user/", include("userapp.urls")) # 引入 userapp 应用的路由 urls.py ]
- userapp 应用的路由（要先创建userapp应用的 urls.py 文件）
from django.urls import path from userapp import views
urlpatterns = \[ path('register/', views.RegisterView\.as\_view()), path('checkUname/',
views.CheckUnameView\.as\_view()), ]
12.2 创建视图
from django.http import HttpResponse, JsonResponse from django.shortcuts import render from django.views import View
from userapp.models import UserInfo
# Create your views here. class RegisterView(View): def get(self, request): return render(request, "register.html")
def post(self, request): # 获取请求参数 uname = request.POST.get('uname', '') pwd = request.POST.get('pwd', '')
# 插入数据库 user = UserInfo.objects.create(uname=uname, pwd=pwd)
# 判断是否注册成功 if user: return HttpResponse('True')
# 注册成功 return HttpResponse('False')
# 注册失败
class CheckUnameView(View):
def get(self, request):
# 获取请求参数 uname = request.GET.get('uname', '')
# 根据用户名去数据库中查询 user\_list = UserInfo.objects.filter(uname=uname)
flag = False # 判断用户名是否存在 if user\_list: flag = True # 如果存在就返回 True return JsonResponse({'flag': flag})
12.3 创建页面 register.html
- 创建 userapp/templates/register.html
{% extends 'base.html' %} {% block title %} <title>用户注册</title> {% endblock %} {% block headerjs %} <script type="text/javascript" src="/static/md5-min.js"></script> {% endblock %} {% block main %} <div class="login-body"> <div class="login-card"> <div class="login-top"> <h3>新用户注册</h3> <h5>尊敬的用户，欢迎您回来！</h5> </div> <div class="login-bottom"> <form method="post" action="/user/register/" onsubmit="return register()"> <div class="login-input-box"> {% csrf\_token %} <input type="text" id="uname" name="uname" value="" class="login-admin active" placeholder="邮箱注册"> <span style="color:red;" id="aSpan"></span> <input type="password" id="pwd" name="pwd" value="" class="login-password" style="border: 1px solid red"> <span style="color:red;" id="pSpan"></span> <button class="login-btn" style="color: white;text-decoration: none;cursor: pointer">注册</button> </div> </form> <div class="login-img"> <img src="/static/login_05.png" alt="转存失败，建议直接上传图片文件"> </div> </div> </div> </div> {% endblock %} {% block footer %} <script> function isEmail(str){ var reg = /^\[a-zA-Z0-9\_-]{6,}@\[a-zA-Z0-9\_-]+(.\[a-zA-Z0-9\_-]+)+$/; return reg.test(str); } {#用户名唯一性校验#} function checkUname(username){ var flag = false; $.ajax({ url:'/user/checkUname/', type:'GET', async:false, data:{"uname":username}, success:function (result) { var flag2 = result.flag; if( flag2 ){ flag = true; $('#aSpan').html('用户名已存在！'); } } }); return flag; } function register(){ //获取输入框的值 var uname = $('#uname').val(); var pwd = $('#pwd').val(); //简单校验 if(uname.length<6){ $('#aSpan').text('邮箱长度不能小于六位'); return false; } if(!isEmail(uname)){ $('#aSpan').text('邮箱格式不正确'); return false; } if (checkUname(uname)){ $('#aSpan').text('用户已存在'); return false } if(pwd.length<6){ $('#pSpan').text('密码长度不能小于六位'); return false; } hex_pwd = hex_md5(pwd); $('#pwd').val(hex\_pwd); return true } </script> {% endblock %}
