1. 创建视图函数,get返回页面
# 登陆视图
class LoginView(View):
# 打开登录页面
def get(self, request):
return render(request, 'users/login.html')
2. 创建路由
# 登陆
re_path(r'login/$', LoginView.as_view(), name="login"),
# 退出登录
re_path(r'logout/$', LogoutView.as_view(), name="logout"),
3. 创建html(users.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>喵喵商城-登录</title>
<link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}">
<link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}">
<script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
<script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>
</head>
<body>
<div class="login_top clearfix">
<a href="{{ url('shouye:index') }}" class="login_logo"><img src="{{ static('images/logo02.png') }}"></a>
</div>
<div class="login_form_bg" id="app">
<div class="login_form_wrap clearfix">
<div class="login_banner fl"></div>
<div class="slogan fl">欢迎光临 · 喵喵商城</div>
<div class="login_form fr">
<div class="login_title clearfix">
<a href="javascript:;" class="cur">账户登录</a>
</div>
<div class="form_con">
<div class="form_input cur">
<form method="post" class="login-form" @submit="denglu" v-cloak>
{{ csrf_input }}
<input type="text" name="username" class="name_input" placeholder="请输入用户名或手机号"
v-model="username" @blur="check_name">
<div class="user_error" v-show="err_name_flag">{[ err_name_msg ]}</div>
<input type="password" name="password" class="pass_input" placeholder="请输入密码"
v-model="password" @blur="check_pwd">
<div class="pwd_error" v-show="err_pwd_flag">{[ err_pwd_msg ]}</div>
<div class="more_input clearfix">
<input type="checkbox" name="remembered" v-model="remembered">
<label>记住登录</label>
</div>
{% if login_err_msg %}
<div class="pwd_error">{{ login_err_msg }}</div>
{% endif %}
<input type="submit" value="登 录" class="input_submit">
</form>
</div>
</div>
<div class="third_party">
<a href="{{ url('users:zhuce') }}" class="register_btn">立即注册</a>
</div>
</div>
</div>
</div>
<div class="footer no-mp">
<div class="foot_link">
<a href="#">关于我们</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p>CopyRight © 2018 北京*******有限公司 All Rights Reserved</p>
<p>电话：010-******* 京ICP备********号</p>
</div>
</body>
<script type="text/javascript" src="{{ static('js/login.js') }}"></script>
</html>
4. 创建longin,js
var v = new Vue({
el: "#app",
delimiters: ["{[", "]}"],
data: {
username: "",
err_name_msg: "请输入5-18位的用户名",
password: "",
err_pwd_msg: "请输入6-16位的密码",
remembered: "",
//标记
err_name_flag: false,
err_pwd_flag: false,
},
methods: {
//校验用户名
check_name() {
//用户名效验正则
let re = /^[a-zA-Z0-9_-]{5,18}$/;
if (re.test(this.username)) {
this.err_name_flag = false;
} else {
this.err_name_flag = true;
}
},
//校验密码
check_pwd() {
let re = /^[0-9A-Za-z]{6,16}$/;
if (re.test(this.password)) {
this.err_pwd_flag = false;
} else {
this.err_pwd_flag = true;
}
},
//登陆提交数据
denglu() {
this.check_name();
this.check_pwd();
if (this.err_name_flag == true || this.err_pwd_flag == true) {
//不提交事件
window.event.returnValue = false
}
}
}
})
5. 视图函数处理用户提交的post请求
# 登陆视图
class LoginView(View):
# 打开登录页面
def get(self, request):
return render(request, 'users/login.html')
# 登陆接口
def post(self, request):
# 1. 获取请求参数
username = request.POST.get("username")
password = request.POST.get("password")
remembered = request.POST.get("remembered")
# 2. 效验参数
if not all([username, password]):
return HttpResponseForbidden("缺少必填参数")
if not re.match(r'^[a-zA-Z0-9_-]{5,18}$', username):
return HttpResponseForbidden("请输入5-18位用户名")
if not re.match(r'^[0-9A-Za-z]{6,16}$', password):
return HttpResponseForbidden("请输入6-16位的密码")
# 3. 登陆
# 用户认证(用户登录)的方法user = authenticate(username=username, password=password, **kwargs)
yonghu = authenticate(username=username, password=password)
if yonghu is None: # 没有用户,表示用户名或密码错误
return render(request, "users/login.html", context={"login_err_msg": "用户名或密码错误"})
# 4. 认证通过,登陆成功,状态保持
login(request, yonghu)
# 5. 通过是否勾选记住登陆 确定session有效期
if remembered != "on":
# 会话结束则过期,默认两周,0:会话结束就过期
request.session.set_expiry(0)
else:
# 记住 设置成None,两周后过期
request.session.set_expiry(None)
# 6. 成功之后,重定向到首页
# resp = redirect(reverse("shouye:index"))
'''
登陆view成功后,不一定去首页
next中记录登陆之前的那个路径,所以需要在登陆成功之后通过这个路径进入该页面
如果没有next进入首页
'''
next = request.GET.get("next")
if next:
resp = redirect(next)
else:
resp = redirect(reverse("shouye:index"))
# 7. 设置cookie
resp.set_cookie("username", yonghu.username, max_age=7 * 24 * 3600)
return resp
# 退出登录
class LogoutView(View):
def get(self, request):
# 退出登陆,清理session
# Django用户认证系统提供了logout()
# 方法, 封装了清理session的操作，帮助我们快速实现登出一个用户, 当然我们也需要将cookie中用户名清除
logout(request)
# 响应 重定向首页,清除cookie信息
response = redirect(reverse("shouye:index"))
response.delete_cookie("username")
return response
浙公网安备 33010602011771号