java 模拟登录后调用ajax_基于ajax实现的登录

一、需要知道的新知识点

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

//#给验证码刷新

$(".vialdCode_img").click(function() {

方式一：dom方法#}

$(this)[0].src+="?"#}

方式二：jQuery的attr方法#}

$(this).attr("src",$(this).attr("src")+'?')

})

})

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

$(".register").click(function() {

location.href= '/register/'});

3、超时后消失

setTimeout(foo, 3000)

functionfoo() {

$(".error").html("")

}

4、auth模块的使用

模块的导入：

from django.contrib import auth

几个使用方法：

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

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

user = authenticate(username='someone',password='somepassword')

2 、login(HttpRequest, user)：登录

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

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

from django.contrib.auth import authenticate, login

def my_view(request):

username= request.POST['username']

password= request.POST['password']

user= authenticate(username=username, password=password)ifuser:

login(request, user)

# Redirect to a success page.

...else:

# Return an'invalid login'error message.

...

复制代码

3 、logout(request)  注销用户

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

from django.contrib.auth import logout

def logout_view(request):

logout(request)

# Redirect to a success page.

4 、user对象的 is_authenticated()

要求：

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

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

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

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

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

USer对象的几个方法

2.2 、创建用户:create_user

from django.contrib.auth.models import User

user = User.objects.create_user(username='',password='',email='')

2.3 、check_password(passwd)：密码检查

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

2.4 、修改密码： set_password()

user = User.objects.get(username='')

user.set_password(password='')

user.save

二、具体实现的登录

urls.py

1 urlpatterns =[2 url(r'^admin/', admin.site.urls),3 url(r'^login/$', views.login),4 url(r'^index/$', views.index),5 url(r'^get_vaildCode_img/$', views.get_vaildCode_img),6 url(r'^log_out/$', views.log_out),7

url.py

view.py

1 deflogin(request):2 if request.method=="GET":3 return render(request, "login.html")4 else:5 username = request.POST.get("username")6 password = request.POST.get("password")7 vialdCode = request.POST.get("vialdCode")8 ret = {"flag":False,"error_msg":None}9 if vialdCode.upper() == request.session.get("keep_valid_code").upper():10 user = auth.authenticate(username=username, password=password)11 ifuser:12 #如果验证成功就让登录

13 auth.login(request,user)14 ret["flag"] =True15 else:16 ret["error_msg"] = "用户名和密码错误"

17 else:18 ret["error_msg"] = "验证码错误"

19 returnHttpResponse(json.dumps(ret))20

21 defindex(request):22 #验证是不是当前进来的那个用户，如果用户已经登录了就可以看到页面

23 #如果没有登录就不让看见主页面，就直接返回登录页面

24 if notrequest.user.is_authenticated():25 return redirect("/login/")26 else:27 return render(request, "index.html")28

29 deflog_out(request):30 auth.logout(request)31 return redirect("/login/")32 defget_vaildCode_img(request):33 #方式一：这样的方式吧路径写死了，只能是那一张图片

34 #import os

35 #path = os.path.join(settings.BASE_DIR,"static","image","3.jpg")

36 #with open(path,"rb") as f:

37 #data = f.read()

38 #return HttpResponse(data)

39 #方式二：每次都显示不同的图片，利用pillow模块，安装一个pillow模块

40 #from PIL import Image

41 #img = Image.new(mode="RGB",size=(120,40),color="green") #首先自己创建一个图片,参数size=(120,40) 代表长和高

42 #f = open("validcode.png","wb")#然后把图片放在一个指定的位置

43 #img.save(f,"png") #保存图片

44 #f.close()

45 #with open("validcode.png","rb") as f:

46 #data = f.read()

47 #return HttpResponse(data)

48 #方式三：

49 #方式二也不怎么好，因为每次都要创建一个保存图片的文件，我们可以不让吧图片保存到硬盘上，

50 #在内存中保存，完了自动清除，那么就引入了方式三：利用BytesIO模块

51 #from io import BytesIO

52 #from PIL import Image

53 #img = Image.new(mode="RGB",size=(120,40),color="blue")

54 #f = BytesIO() #内存文件句柄

55 #img.save(f,"png") #保存文件

56 #data = f.getvalue()#打开文件(相当于python中的f.read())

57 #return HttpResponse(data)

58

59 #方式四：1、添加画笔，也就是在图片上写上一些文字

60 #2、并且字体随机，背景颜色随机

61 from io importBytesIO62 from PIL importImage,ImageDraw,ImageFont63 importrandom64 #随机创建图片

65 img = Image.new(mode="RGB",size=(120,40),color=(random.randint(0,255),random.randint(0,255),random.randint(0,255)))66 draw = ImageDraw.Draw(img,"RGB")67 #画干扰线

68 for i in range(5):69 x1 = random.randint(0, 120)70 y1 = random.randint(0, 40)71 x2 = random.randint(0, 120)72 y2 = random.randint(0, 40)73

74 draw.line((x1, y1, x2, y2), fill=(random.randint(0,255),random.randint(0,255),random.randint(0,255)))75

76 font = ImageFont.truetype("static/font/kumo.ttf",20) #20表示20像素

77

78 str_list = [] #吧每次生成的验证码保存起来

79 #随机生成五个字符

80 for i in range(5):81 random_num = str(random.randint(0, 9)) #随机数字

82 random_lower = chr(random.randint(65, 90)) #随机小写字母

83 random_upper = chr(random.randint(97, 122)) #随机大写字母

84 random_char =random.choice([random_num, random_lower, random_upper])85 print(random_char,"random_char")86 str_list.append(random_char)87 #(5 + i * 24, 10)表示坐标，字体的位置

88 draw.text((5+i*24,10),random_char,(random.randint(0,255),random.randint(0,255),random.randint(0,255)),font=font)89 print(str_list,"str_list")90 f = BytesIO()#内存文件句柄

91 img.save(f,"png") #img是一个对象

92 data = f.getvalue() #读取数据并返回至HTML

93 valid_str = "".join(str_list)94 print(valid_str,"valid_str")95 request.session["keep_valid_code"] = valid_str #吧保存到列表的东西存放至session中

96 return HttpResponse(data)

view.py

template

1

2

3

4

5

6

7

Title

8

9

10

11

12

13

14

15

16 {% csrf_token %}17

18 用户名

19

20

21

22

23

24 密码

25

26

27

28

29

30

31

32 {# 文字部分#}33 验证码

34

35

36

37 {# 图片部分#}38

39

40 {# #}

41

42

43

44

45

46

47

48

49

50 下次自动登录51

52

53

54

55

56

57

58 登录

59

60

61 注册

62

63

64

65

66

67

68

69

70

71

72

73

74 $(function() {75 //给登录按钮增加事件

76 $(".login").click(function() {77 functionfoo() {78 $(".error").html("")79 }80

81 //用post的话就可以不用ajax了，ajax里面都包括了

82 $.post({83 url: '/login/',84 headers: {"X-CSRFToken": $.cookie('csrftoken')},85 data: $("#form_data").serialize(),86 {# contentType:'application/json',#}87 success: function(data) {88 var data =JSON.parse(data);89 console.log(typeofdata);90 if (data["flag"]) {91 window.location.href = '/index/'

92 }93 else{94 $(".error").html(data["error_msg"]);95 setTimeout(foo, 3000)96 }97 }98 })99 });100

101 //给注册按钮增加事件

102 $(".register").click(function() {103 window.location.href = '/register/'

104 });105

106 //#给验证码刷新

107 $(".vialdCode_img").click(function() {108 {# 方式一：dom方法#}109 {# $(this)[0].src+="?"#}110 {# 方式二：jQuery的attr方法#}111 $(this).attr("src",$(this).attr("src")+'?')112 })113 })114

115

116

117

login.html

1

2

3

4

5

6

7

Title

8

9

10

hello{{ request.user.username }}

11 注销

12

13

index.html

1 .container {2 margin-top: 100px;3 margin-left: 330px;4 }5

6 .error {7 color: red;8 }9

10 .btn {11 width: 200px;12 }13 .vialdCode_img{14 width: 200px;15 height: 40px;16 }

login.css