python 学习36

最新推荐文章于 2024-07-12 14:00:11 发布

gy_334

最新推荐文章于 2024-07-12 14:00:11 发布

阅读量141

点赞数

分类专栏：日记

本文链接：https://blog.csdn.net/gy_334/article/details/80922996

版权

日记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

django 04

在上一节我们设置了创建重复用户名时会报错，但是必须提交之后才会报错，如果注册内容偏多，则会使用户造成不方便。我们想在输入密码时就查询用户名是否重复，重复了会报错。

这时我们需要了解一下web中的同步和异步：

（1）同步请求：顺序处理，即当我们向服务器发出一个请求时，在服务器没返回结果给客户端之前，我们要一直处于等待状态直至服务器将结果返回到客户端，我们才能执行下一步操作。例如普通的B/S模式就是同步请求（注：B/S模式也即服务器与浏览器通信主要采用HTTP协议；通信方式为“请求——响应”，浏览器发出请求；服务器做出响应。）

（2）异步请求：并行处理，当我们向服务器发出一个请求时，在服务器没返回结果之前，我们还是可以执行其他操作。例如AJAX技术就是异步请求。

我们可以了解到，之前我们做的网页都是同步请求，但是我们现在需要使用ajax（jQuery的一种静态资源）来帮助我们在输入密码时就替我们在数据库中查询输入的用户名是否重复。

首先安装jQuery，下载好jQuery(这里使用的是jQuery-3.3.1)后，在django项目下创建一个文件夹static，然后在这个文件夹下新建一个文件夹js,然后将我们下载好的jQuery文档放进去。

接着我们需要在seeting.py里面添加我们的static文件：

STATIC_URL = '/static/'

STATICFILES_DIRS=[
    os.path.join(BASE_DIR,  'static')
]

然后我们启动服务，输入网址http://localhost:8000/static/js/jquery-3.3.1.min.js 就可以看到我们的jQuery文件。

在register.html中加入JavaScript：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('input[name="username"]').blur(function () {
                var username=$(this).val();
                //django每一个表单请求都需要一个key
                var token=$('input[name="csrfmiddlewaretoken"]').val();
                data={'username':username,'csrfmiddlewaretoken':token};
                //请求路径  参数  回调函数
                $.post('hasName',data,function (request) {
                    $('#msg').html(request);
                });
            });
        });
    </script>
</head>
<body>

<form method="post" action="/user/register">
    {% csrf_token %}
    <p>{{ error }}</p>
    <p>
        用户名: <input type="text" name="username" value="{{ bloguser.userName }}">
            <span id="msg">{{ error }}</span>
    </p>
    <p>
        密码: <input type="password" name="upwd">
    </p>
    <hr>
    <p>
        <input type="submit" value="注册">
        <a href="login"> 已有账户，直接登录>>> </a>
    </p>
</form>

</body>
</html>

JavaScript中写的是，当name为username的input失去焦点时，创建了两个参数，username为当前输入的用户名，token为当前key(可在浏览器使用检查查看)为'cs.....'的input，接着设置参数data，为key：value模式的json格式，将上述两个参数依次放入。接着我们写一个post请求，第一个参数为请求路径，第二个为参数data，第三个参数为回调函数(为请求成功后的处理方式)，并在body中的用户名之后添加一个span标签，id设为msg。如果请求成功，则在这个span标签中显示一些内容。

在这写完之前我们需要在views.py定义一个 hasname(),同时需要导入HttpResponse模块，用来判断用户名有没有重复，同时在页面中显示提示信息。

from django.shortcuts import render,reverse,redirect,HttpResponse

# Create your views here.
from blog_user.models import BlogUser

#检查用户名是否存在的ajax后台
def hasName(request):
    #做一个查询 条件是用户的名字
    uname=request.POST.get('username')
    #filter 返回值是一个结果集
    bloguser = BlogUser.objects.filter(userName=uname)
    if len(bloguser)==0:
        return HttpResponse('用户名可以使用')
    else:
        return HttpResponse('用户名已存在，不能使用')

这个hasname的方法中用来检查是否存在ajax后台，并做一个查询，返回一些网页信息，这些信息将在register.html中的id为msg的span中显示。

然后我们需要在blog_user的urls.py中添加路径

#usr/bin/python
#-*-coding:utf-8-*-
from django.urls import path
from blog_user import views

app_name='user'
urlpatterns = [
    path('register',views.register ),
    path('welcome/<int:id>/',views.welcome,name='welcome'),
    path('hasName',views.hasName),
]

然后我们可以运行一下项目，打开网页测试一下

若输入一个重复用户名：

接下来我们建一个登陆页面，在templates的user中创建一个login.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/user/login" method="post">
    {% csrf_token %}
    用户名：<input type="text" name="uname">
    密  码：<input type="password" name="upwd">
    <input type="submit" value="登 录">
    <hr>
    <p>{{ error }}</p>

</form>
</body>
</html>

然后我们在register.html中加入一个超链接，使其链接到login中

接着我们在views.py中写一个login方法，使其判断请求为get还是post，如果是get，跳转到login页面，让其登陆，如果是post，则在数据库中查询是否存在其用户名与密码。

def login(request):
    if request.method == 'GET':
        return render(request,'user/login.html',{})

    elif request.method =='POST':

        uname= request.POST.get('uname')
        upwd=request.POST.get('upwd')
        bloguser=BlogUser.objects.filter(userName=uname,passWord=upwd)
        if len(bloguser) == 1:
            return redirect(reverse('user:welcome',args=[bloguser[0].id]))
        else:
            return render(request,'user/login.html',{'error':'用户名或密码错误'})

上述方法中，如果得到是post命令，则会获取一下uname 和upwd，然后查询一下这两个值并保存到bloguser中，接着判断数据库中是否存在输入的账号和密码，如果有则返回到welcome页面，传入的参数为bloguser的第一项(因为查询的结果是一个集合，所以我们需要返回这个集合的下标为0的第一项)，如果没有，则返回到login页面中，并传入一个错误，并做login页面显示。

最后我们在blog_user的urls中添加路径：

path('login',views.login),

运行程序，尝试一下吧