django之BBS-登录与注册功能-72

最新推荐文章于 2024-10-20 17:52:22 发布

weixin_34088838

最新推荐文章于 2024-10-20 17:52:22 发布

阅读量87

点赞数

文章标签： python 前端 javascript ViewUI

原文链接：http://www.cnblogs.com/jokezl/articles/10187629.html

版权

django之BBS-登录与注册功能-72

登录功能

视图函数

def my_login(request): if request.method == 'GET': return render(request, 'login.html') else: name = request.POST.get('name') password = request.POST.get('password') code_text = request.POST.get('text') text = request.session.get('code_text') text = text.lower() user = authenticate(request, username=name, password=password) if user: if not text: return HttpResponse('验证码不能为空') if code_text == text: login(request, user) return HttpResponse('登录成功') else: return HttpResponse('验证码错误') else: return HttpResponse('用户名或密码错误')

前端页面:

<form>
                {% csrf_token %}
                <h2>登录界面</h2> <hr> <div class="form-group"> <label for="name">用户名</label> <input type="text" name="name" id="name" class="form-control" placeholder="用户名" required> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" name="password" id="password" class="form-control" placeholder="密码" required> </div> <div class="form-group"> <label for="valid_code">验证码</label> <div class="row"> <div class="col-md-6"> <input type="text" name="valid_code" id="valid_code" class="form-control" required> </div> <img src="/get_code/" alt="" width="50%" height="35" id="img_code" draggable="false"> </div> </div> </form> <a href="/register/" class="btn btn-primary pull-left">注册</a> <button type="button" class="btn btn-primary pull-right" id="btn">登录</button> <a href="#" id="change" draggable="false" class="change pull-right">看不清,换一张</a> <script> $('#btn').click(function () { $.ajax({ url: '/login/', type: 'post', data: { 'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(), 'name': $('#name').val(), 'password': $('#password').val(), 'text': $('#valid_code').val() }, success: function (data) { alert(data) } }) }); $('#change').click(function () { $('#img_code')[0].src += '?' }) </script>

注册功能

froms组件

class MyForms(forms.Form): username = forms.CharField(max_length=18, min_length=2, label='用户名', error_messages={'max_length': '最长不超过18位', 'min_length': '最短为2个字符', 'required': '不能为空'}, widget=widgets.TextInput(attrs={'class': 'form-control', 'placeholder': '用户名'})) password = forms.CharField(max_length=18, min_length=2, label='密码', error_messages={'max_length': '最长不超过18位', 'min_length': '最短为2个字符', 'required': '不能为空'}, widget=widgets.PasswordInput(attrs={'class': 'form-control', 'placeholder': '密码'})) re_password = forms.CharField(max_length=18, min_length=2, label='确认密码', error_messages={'max_length': '最长不超过18位', 'min_length': '最短为2个字符', 'required': '不能为空'}, widget=widgets.PasswordInput(attrs={'class': 'form-control', 'placeholder': '确认密码'})) email = forms.EmailField(label='邮箱', error_messages={'invalid': '不符合邮箱格式', 'required': '不能为空'}, widget=widgets.EmailInput(attrs={'class': 'form-control', 'placeholder': '邮箱'})) def clean_username(self): name = self.cleaned_data.get('username') user = models.UserInfo.objects.filter(username=name).first() if user: raise ValidationError('用户名已存在') else: return name def clean(self): pwd = self.cleaned_data.get('password') re_pwd = self.cleaned_data.get('re_password') if pwd and re_pwd: if pwd == re_pwd: return self.cleaned_data else: raise ValidationError('两次密码不一致')

视图函数

def my_register(request): if request.method == 'GET': myforms = MyForms() return render(request, 'register.html', locals()) if request.is_ajax(): response = {'status': 100, 'msg': None} myforms = MyForms(request.POST) if myforms.is_valid(): data = myforms.cleaned_data data.pop('re_password') my_file = request.FILES.get('myfile') if my_file: data['avatar'] = my_file user = models.UserInfo.objects.create_user(**data) else: response['status'] = 101 response['msg'] = myforms.errors return JsonResponse(response)

前端页面

<body>
<div class="container-fluid"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <form id="form"> <h2>注册界面</h2> <hr> {% csrf_token %} {% for foo in myforms %} <div class="form-group"> <label for="{{ foo.auto_id }}">{{ foo.label }}</label> {{ foo }} </div> {% endfor %} <div class="form-group"> <label for="myfile">头像<img src="/static/img/default.png" id="img_file" alt="" width="40" height="40"></label> <input type="file" id="myfile"> </div> </form> <button type="button" class="btn btn-primary pull-right" id="btn">提交</button> </div> </div> </div> </body> <script> // change为控件值发生变化时触发的事件 $('#myfile').change(function () { // 取出文件 var file_obj = $('#myfile')[0].files[0]; // 生成文件阅读器对象,把获取的图片放到img try{ var filereader = new FileReader(); // 把图片对象读入阅读器对象 filereader.readAsDataURL(file_obj); // 等加载完毕后,渲染到img标签中 filereader.onload = function () { // filereader.result获取阅读器对象中的值 $("#img_file").attr('src', filereader.result) } }catch (e) { } }); $('#btn').click(function () { // 上传文件使用formdata对象 var formdata = new FormData(); var formarr = $('#form').serializeArray(); console.log(formarr); // jquery循环 循环往formdata对象中添加数据 $.each(formarr, function (key, obj) { formdata.append(obj.name, obj.value) }); // 添加文件对象数据 formdata.append('myfile', $('#myfile')[0].files[0]); $.ajax({ url: '/register/', type: 'post', processData: false, contentType: false, data: formdata, success: function (data) { if (data.status == '100'){ location.href = '/login/' }else { var msg = data.msg; $('span').remove(); for (i in msg){ console.log(i,msg[i]); if (i == '__all__'){ $('#id_re_password').after('<span class="pull-right">'+ msg[i] + '</span>') } $('#id_'+i).after('<span class="pull-right">'+ msg[i] + '</span>') } } } }) }) </script>