Web框架开发-基于Ajax实现的登录

---恢复内容开始---

一、需要知道的新知识点

1、刷新验证码，给src属性加一个？号。加个？会重新去请求

# 给验证码刷新
$(".vialdCode_img").click(function () {
方式一：dom方法
    $(this)[0].src+="?"#}
方式二：jQuery的attr方法
    $(this).attr("src",$(this).attr("src")+'?')
    })
})

2、当登录成功跳转，或者注册成功跳转

$(".register").click(function () {
        loction.href = '/register/'
});

3、超时后消失

setTimeout(foo, 3000)


function foo() {
    $(".error").html("")
}

4、auth模块的使用

模块的导入：

from django.contrib import auth

几个使用方法：

1 、authenticate() ：验证用户输入的用户名和密码是否相同

提供了用户认证，即验证用户名以及密码是否正确,一般需要username password两个关键字参数

user = auth.authenticate(username=username, password=password)

2 、login(HttpRequest, user)：登录　　

该函数接受一个HttpRequest对象，以及一个认证了的User对象

此函数使用django的session框架给某个已认证的用户附加上session id等信息。

def login(request):
    if request.method == "POST":
        username = request.POST.get("username")
        password = request.POST.get("password")
        print(username, password)
        user = auth.authenticate(username=username, password=password)  # 验证用户名和密码
        if user is not None and user.is_active:
            #  如果认证成功，就让登录
            auth.login(request, user)
            request.session['user'] = username  # 将session信息记录到浏览器
            response = HttpResponseRedirect("/books/")
            return response
        elif user is None:
            return render(request, "index.html", {"s1": "用户名不存在!"})
        else:
            s = "用户名或密码错误"
            return render(request, "index.html", {"s": s})

    return render(request, "index.html")

3 、logout(request) 注销用户　

该函数接受一个HttpRequest对象，无返回值。当调用该函数时，当前请求的session信息会全部清除。该用户即使没有登录，使用该函数也不会报错。

def logout(request):
    auth.logout(request)
    return redirect("/index")

4 、user对象的 is_authenticated()

要求：

　　1、用户登录后才能访问某些页面

　　2、如果用户没有登录就访问该页面的话直接跳转登录页面

　　3、用户在跳转的登录界面中完成登录后，自动访问跳转到之前访问的地址

def my_view(request):
  if not request.user.is_authenticated():
    return redirect('%s?next=%s' % (settings.LOGIN_URL, request.path))

在后台用request.user.is_authenticated()判断用户是否已经登录，如果true则可以向前台展示request.user.name　　

User对象的几个方法

1、创建用户：create_user

User.objects.create_user(username=username, password=password)

2、check_password(passwd):密码检查

用户需要修改密码的时候，首先要让他输入原来的密码，如果给定的字符串通过了密码检查，返回 True

3 、修改密码： set_password()

二、具体实现的登录

　　urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^reg/$', views.reg),
    url(r'^login/$', views.login),
    url(r'^index/$', views.index),
    url(r'^get_vaildCode_img/$', views.get_vaildCode_img),
    url(r'^log_out/$', views.log_out)
]

　　views.py

 1 def get_vaildCode_img(request):
 2     # 方式一：这样的方式把路径写死了，只能是那一张图片
 3     # path = os.path.join(settings.BASE_DIR, "static", "image", "3.jpg")
 4     # with open(path, "rb") as f:
 5     #     data = f.read()
 6     # return HttpResponse(data)
 7 
 8     # 方式二： 每次都显示不同的图片，利用pillow模块，安装一个pillow模块
 9     # img = Image.new(mode="RGB", size=(120, 40), color="green")  # 首先自己创建一个图片，参数szie(120, 40)代表长和高
10     # f = open("validcode.png", "wb")     # 然后把图片放在一个指定的位置
11     # img.save(f, "png")      # 保存图片
12     # f.close()
13     # with open("validcode.png", "rb") as f:
14     #     data = f.read()
15     # return HttpResponse(data)
16 
17     # 方式三：
18     # 方式二也不怎么好，因为每次都要创建一个保存图片的文件，我们可以不让图片保存到硬盘上，
19     # 在内存中保存，完了自动清除，那么就引入了方式三：利用BytesIO模块
20     # img = Image.new(mode="RGB", size=(120, 40), color="blue")
21     # f = BytesIO()   # 内存文件句柄
22     # img.save(f, "png")
23     # data = f.getvalue()     # 打开文件（相当于Python中的f.read())
24     # return HttpResponse(data)
25 
26     # 方式四：1、添加画笔，也就是在图片上写上一些文字
27             # 2、并且字体随机，背景颜色随机
28     # 随机创建图片
29     img = Image.new(mode="RGB", size=(150, 40), color=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
30     draw = ImageDraw.Draw(img, "RGB")
31     # 画干扰线
32     for i in range(5):
33         x1 = random.randint(0, 120)
34         y1 = random.randint(0, 40)
35         x2 = random.randint(0, 120)
36         y2 = random.randint(0, 40)
37 
38         draw.line((x1, y1, x2, y2), fill = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
39 
40     font = ImageFont.truetype("KumoFont.ttf", 20)   # 20 表示20像素
41 
42     str_list = []   # 把每次生成的验证码保存起来
43 
44     # 随机生成五个字符
45     for i in range(5):
46         random_num = str(random.randint(0, 9))    # 随机数字
47         random_lower = chr(random.randint(65, 90))  # 随机小写字母
48         random_upper = chr(random.randint(97, 122)) # 随机大写字母
49         random_char = random.choice([random_num, random_lower, random_upper])
50 
51         print(random_char, "random_char")
52         str_list.append(random_char)
53         # (5+i*24, 10) 表示坐标，字体的位置
54         draw.text((5+i*24, 10), random_char,(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)),
55                   font=font)
56 
57         print(str_list, "str_list")
58         f = BytesIO()   # 内存文件句柄
59         img.save(f, "png")  # img是一个对象
60         data = f.getvalue() # 读取数据并返回至HTML
61     vaild_str = "".join(str_list)
62     print(vaild_str, "vaild_str")
63     request.session["keep_valid_code"] = vaild_str  # 把保存到列表的东西存放至session中
64     return HttpResponse(data)

View Code

  1 <!--<!DOCTYPE html>-->
  2 <!--<html lang="en">-->
  3 <!--<head>-->
  4     <!--<meta charset="UTF-8">-->
  5     <!--<title>Title</title>-->
  6 <!--</head>-->
  7 <!--<body>-->
  8 <!--<a href="/get_ok/">点击</a><span class="error"></span>-->
  9 <!--<hr>-->
 10 <!--<p>姓名<input type="text" id="user"></p>-->
 11 <!--<p>密码<input type="password" id="pwd"> </p>-->
 12 <!--<p><button class="login_btn">login_btn</button><span class="login_error"></span> </p>-->
 13 
 14 <!--<script src="../static/jquery-3.3.1.js"></script>-->
 15 
 16 <!--// 登录验证-->
 17 <!--<script>-->
 18     <!--$(".login_btn").click(function () {-->
 19 
 20         <!--$.ajax({-->
 21             <!--url:"/login/",-->
 22             <!--type:"post",-->
 23             <!--data:{-->
 24                 <!--"user":$("#user").val(),-->
 25                 <!--"pwd":$("#pwd").val(),-->
 26             <!--},-->
 27             <!--success:function (data) {-->
 28                 <!--console.log(data);  // json字符串-->
 29                 <!--console.log(typeof data);-->
 30 
 31                 <!--var data=JSON.parse(data);   // 反序列化 object{}-->
 32                 <!--console.log(data);      // object-->
 33                 <!--console.log(typeof data);-->
 34 
 35                 <!--if (data.user){-->
 36                     <!--// location.href="www.baidu.com"-->
 37                 <!--}-->
 38                 <!--else {-->
 39                     <!--$(".login_error").html(data.msg).css({"color":"red","margin-left":"10px"})-->
 40                 <!--}-->
 41 
 42             <!--}-->
 43         <!--})-->
 44 
 45     <!--})-->
 46 
 47 <!--</script>-->
 48 
 49 <!--</body>-->
 50 <!--</html>-->
 51 
 52 <!DOCTYPE html>
 53 <html lang="en">
 54 <head>
 55     <meta charset="UTF-8">
 56      <meta name="viewport" content="width=device-width">
 57     <title>Title</title>
 58     <link rel="stylesheet" href="../static/bootstrap-3.3.7/css/bootstrap.min.css">
 59     <link rel="stylesheet" href="../static/css/login.css">
 60 </head>
 61 <body>
 62 <div class="container">
 63     <div class="row">
 64         <div class="col-md-1=10">
 65             <form class="form-horizontal" id="form_data" action="/login/" method="post">
 66                 {% csrf_token %}
 67                 <div class="form-group">
 68                     <label for="username" class="col-sm-2 control-label">用户名</label>
 69                     <div class="col-sm-5">
 70                         <input type="text" class="form-control" id="username" placeholder="用户名" name="username">
 71                     </div>
 72                 </div>
 73                 <div class="form-group">
 74                     <label for="password" class="col-sm-2 control-label">密码</label>
 75                     <div class="col-sm-5">
 76                         <input type="password" class="form-control" id="password" placeholder="密码" name="password">
 77                     </div>
 78                 </div>
 79                 <div class="form-group">
 80                     <div class="row">
 81                         <div class="col-md-6 col-md-offset-1">
 82                             {# 文字部分#}
 83                             <label for="vialdCode" class="col-md-2 control-label">验证码</label>
 84                             <div class="col-sm-5">
 85                                 <input type="text" class="form-control vialCode_text" id="vialdCode" placeholder="验证码" name="vi
 86 ">
 87                             </div>
 88                             {# 图片部分 #}
 89                             <div class="col-md-5">
 90                                 <img class="vialdCode_img" src="/get_vaildCode_img/" alt="" width="200px" height="100px">
 91 
 92                             </div>
 93                         </div>
 94                     </div>
 95                 </div>
 96                 <div class="form-group">
 97                     <div class="col-sm-offset-2 col-sm-10">
 98                         <p>
 99                             <button type="button" class="btn btn-success login">登录</button>
100                             <span class="error has-error"></span>
101                         </p>
102                         <p>
103                             <button type="button" class="btn btn-primary register">注册</button>
104                         </p>
105                     </div>
106                 </div>
107             </form>
108         </div>
109     </div>
110 </div>
111 <script src="../static/jquery-3.3.1.js"></script>
112 <script src="../static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
113 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
114 
115 <script>
116     $(function () {
117         // 给登录按钮添加事件
118         $(".login").click(function () {
119             function foo() {
120                 $(".error").html("")
121 
122             }
123             //用post
124             $.post({
125                 url:'/login/',
126                 headers: {"X-CSRFToken": $.cookie('csrftoken')},
127                 data: $("#form_data").serialize(),
128                 success:function (data) {
129                     var data = JSON.parse(data);
130                     console.log(typeof data);
131                     if (data['flag']){
132                         window.href= '/index/'
133                     }
134                     else {
135                         $(".error").html(data["error_img"]);
136                         setTimeout(foo, 3000)
137                     }
138 
139                 }
140             })
141 
142 
143         });
144 
145         // 给注册按钮添加事件
146         $(".register").click(function () {
147             window.location.href = '/register/'
148 
149         });
150 
151         // 给验证码刷新
152         $(".vialdCode_img").click(function () {
153             $(this).attr("src", $(this).attr("src")+'?')
154 
155         })
156 
157     })
158 </script>
159 </body>
160 </html>

View Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello{{ request.user.username }}</h1>
<button><a href="/log_out">注销</a> </button>
</body>
</html>

.container {
    margin-top: 100px;
    margin-left: 330px;
}

.error{
    color: red;
}

.btn {
     200px;
}

.vialdCode_img {
     200px;
    height: 40px;
}

相关阅读:
Modernizr.js:为HTML5和CSS3而生！
liunx 安装 phpstudy
php 实现无限极分类
 网站邮箱端口
 android studio svn 创建分支
 卡在构建 gradle 项目信息
 android 地图
 IllegalArgumentException: Unmatched braces in the pattern.
软件设置开机启动
 输入网络凭据
原文地址：https://www.cnblogs.com/mike-liu/p/9687154.html