Django 02 简单注册页面的创建2

最新推荐文章于 2023-12-19 09:11:09 发布

原创最新推荐文章于 2023-12-19 09:11:09 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Django

Python 同时被 2 个专栏收录

33 篇文章

订阅专栏

Django

11 篇文章

订阅专栏

本文介绍如何利用AJAX技术优化网页应用中的用户注册流程，实现在用户输入时即时反馈用户名是否存在，提升用户体验。同时，文章还介绍了基本的登录功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、AJAX(异步请求)

有的时候我们必须点击提交页面才告诉我们用户名重复,这样很影响用户体验,所以我们应当在输入密码的时候就要告诉我们用户名已存在

我们需要使用ajax(ajax:jquery 是一种静态资源),不需要我们提交当我们输入密码的时候就可以告诉我们用户名存在

1.什么是AJAX?

AJAX=异步JavaScript 和XML

AJAX是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交接,AJAX可以使用网页实现异步更新,这意味着可以在重新加载整个网页的情况下,对网页的某部分进行更新

传统网页(不适用AJAX)如果需要更新内容,必须重新加载整个网页

有很多使用AJAX的应用程序案例:新浪微博,Google地图,开心网等等

2.我们需要jquery文件,可以去官网下载,我是用的是jquery-3.3.1,我们在exercise里面创建一个static的文件夹,接着又在里面创建以js的文件夹把我们的jquery-3.3.1放进去

3.接着我们需要在setting.py里面添加我们的ststic文件进行配置

4.接着我们运行项目在浏览器地址栏输入

http://127.0.0.1:8000/static/js/jquery-3.3.1.min.js结果为

说明我们可以使用jquery文件了

5.我们在register.html中加上javascript

JSON基础结构：

JSON结构有两种结构：

json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。

对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为对象.key 获取属性值，这个属性值的类型可以是数字、字符串、数组、对象几种。

数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是数字、字符串、数组、对象几种。

<!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 () {
                //通过弹框来验证代码是否成功 alert(username) 丢失光标浏览器弹框
                var username=$("this").val();
                //通过弹框验证alert(token) 丢失光标弹框 name的key从浏览器代码工作区中查找
                var token=$("input[name='csrfmiddlewaretoken']").val();
                //django 中每一个表单请求都需要一个key
                //接下来将请求发送到后台
                //格式  (1.请求路径 2.参数 3.回调函数(返回后执行函数))
                //json格式
                data={"uername":username,"csrfmiddlewaretoken":token};
                $.post('hasName',data,function(bdata){
                    //标签中添加文字
                    $("#msg").html(bdata);

                })

            });

        })
    </script>
</head>
<body>
<form method="post" action="/user/register">
    {% csrf_token %}
    <p>
        {{ error }}
    </p>
    <p>
        用户名:<input value="{{blog.userName}}" type="text" name="username"><span id="msg"></span>
    </p>
    <p>
        密码:<input type="password" name="upw">
    </p>
    <p>
        <input type="submit" value="注册">
    </p>
</form>
</body>
</html>

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

7.然后我们在blog_user\urls.py配置一下路径

 
#usr/bin/python
#-*-coding:utf-8-*-

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

最后进入浏览器输入已有的姓名不点击提交显示

可以再审核代码network区域查看运行

输入没有的姓名不点击提交显示

二、登录功能

如果用户已经注册过账号,那么就需要一个超链接转到登录页面进行登录,用户名密码正确进入欢迎界面,如果用户名密码错误,报出错误重新登录

1.我们先在templates文件下的user中创建登录页面的html

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

2.接着在views.py中创建登录的函数login()

 
#登录
def login(request):
    #接收到get请求进入登录页面
    if request.method == 'GET':
        return render(request, 'user/login.html', {})
    #点击登陆后接收到post请求
    elif request.method == 'POST':
        unname=request.POST.get('uname')
        upwd=request.POST.get('upwd')
        bloguser = BlogUser.objects.filter(userName=unname,passWord=upwd)
        #过滤数据库名字得到结果集 如果结果集长度用户名密码正确进入欢迎页面返回用户名id获取用户名
        if len(bloguser) == 1:
            return redirect(reverse('user:welcome',args=[bloguser[0].id]))
        #过滤数据库如果没有结果再一次进入登录界面 并显示用户名或密码错误
        else:
            return render(request,'user/login.html',{"error":"用户名或密码错误"})

3.接着在在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),
    path('login',views.login),
]

4.进入浏览器页面