django登录功能接口设计和代码实现,ajax,闭包,cookie,session,装饰器
用户登录
(1) 显示登录页面
url |
视图函数名 |
模板文件 |
父模板文件 |
/user/login/ |
login |
login.html |
base.html |
(2) 用户登录的前端js校验。
用户名和密码不可为空。
$(function(){ var error_name = false; var error_password = false; var error_check_password = false; $('#user_name').blur(function() { check_user_name(); }); $('#pwd').blur(function() { check_pwd(); }); $('#cpwd').blur(function() { check_cpwd(); }); function check_user_name(){ var len = $('#user_name').val().length; if(len<5||len>20) { $('#user_name').next().html('请输入5-20个字符的用户名') $('#user_name').next().show(); error_name = true; } else { $('#user_name').next().hide(); error_name = false; } } function check_pwd(){ var len = $('#pwd').val().length; if(len<8||len>20) { $('#pwd').next().html('密码最少8位,最长20位') $('#pwd').next().show(); error_password = true; } else { $('#pwd').next().hide(); error_password = false; } } function check_cpwd(){ var pass = $('#pwd').val(); var cpass = $('#cpwd').val(); if(pass!=cpass) { $('#cpwd').next().html('两次输入的密码不一致') $('#cpwd').next().show(); error_check_password = true; } else { $('#cpwd').next().hide(); error_check_password = false; } } $('#reg_form2').submit(function() { check_user_name(); check_pwd(); check_cpwd(); if(error_name == false && error_password == false && error_check_password == false) { return true; } else { return false; } }); })
(3) 输入用户名和密码,点击登录进行登录操作。Ajax
url |
视图函数名 |
模板文件 |
父模板文件 |
/user/login_check/ |
login_check |
无 |
无 |
$(function () { $('#btnlogin').click(function () { // 获取用户名和密码,csrf_tocon username = $('#username').val() password = $('#pwd').val() csrf = $('input[name="csrfmiddlewaretoken"]').val() // 传递给服务器的csrf名称为前端浏览器宣传后所生成的名称 // 记住用户名 结果为true 或 false remember= $('input[name="remember"]').is(':checked') temp = {'username':username, 'password':password, 'csrfmiddlewaretoken':csrf, 'remember':remember} // ajax 发送请求到服务器,存在返回 res为1 否则为0 $.post('/user/login_check/', temp, function (data) { if(data.res == 0) { // 用户名不存在, 默认隐藏的元素展示出来先试用show() $('.user_error').show().text('用户或密码错误!') } else { // 登录成功跳转页面 // location.href = '/' // 根据登录前浏览记录跳转 location.href = data.next } }) }) })
接口设计
login视图函数接口:
接口名称 |
login |
|
接口功能 |
显示登录页面 |
|
接口参数 |
request |
|
url |
/user/login/ |
|
访问方式 |
任意 |
|
返回值 |
返回HttpResponse |
|
# /user/login/ def login(request): # 实现记住用户名就能真正显示用户名的后台逻辑 # 获取cookie 看user是否在其中 if 'username' in request.COOKIES: username = request.COOKIES['username'] else: username = '' return render(request, 'df_user/login.html', {'username': username})
login_check视图函数接口:
接口名称 |
login_check |
|
接口功能 |
进行用户登录,校验用户名和密码。 |
|
接口参数 |
request |
|
url |
/user/login_check / |
|
访问方式 |
POST |
|
返回值 |
返回json: 登录成功: {'res':1} 登录失败: {'res':0} |
|
# /user/login_check/ def login_check(request): # 接收用户名和密码 username = request.POST.get('username') password = request.POST.get('password') # 查找用户名和密码是否存, 使用命名参数容错能力更强 passport = Passport.objects.get_one_passport(username=username, password=password) if passport: # 判断登录之前的地址是否需要记录, 只有登录成功才会有session记录,之外的session被flush了,所有必须下载登录成功的判断里 if request.session.has_key('pre_url_path'): next = request.session['pre_url_path'] else: # 首页地址 next = '/' # 用户名密码正确 jres = JsonResponse({'res': 1, 'next': next}) # 获取是否需要记住用户名 返回结果为字符串类型的 true / false remember = request.POST.get('remember') if remember == 'true': jres.set_cookie('username', username, max_age=14 * 24 * 3600) # 记录登录状态 request.session['islogin'] = True request.session['username'] = username # 登录账户的id request.session['passport_id'] = passport.id return jres else: return JsonResponse({'res': 0})
LESS IS MORE !