Django - BBS - 项目学习 - 注销、密码修改、头像修改的实现
目录
一、注销
from django.shortcuts import render, HttpResponse, redirect from django.contrib import auth def logout(request): auth.logout(request) return redirect('/index/')
二、 密码的修改
2-1 前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="/static/jquery-3.3.1.js"></script> <title>修改密码</title> </head> <style> .has-error { color: red; } </style> <body> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>修改密码</h1> <form> {% csrf_token %} <div class="form-group"> <label for="name">用户名</label> <input type="text" id="name" class="form-control" value="{{ request.user }}"> </div> <div class="form-group"> <label for="opwd">旧密码</label> <input type="password" id="opwd" class="form-control"> </div> <div class="form-group"> <label for="npwd">新密码</label> <input type="password" id="npwd" class="form-control"> </div> <div class="form-group"> <label for="re_pwd">确认密码</label> <input type="password" id="re_pwd" class="form-control"> </div> <span class="has-error"></span> <input type="button" id='btn' value="确认修改" class="btn btn-primary pull-right"> </form> </div> </div> </body> <script> $('#btn').click(function () { $.ajax({ url: '/change_pwd/', type: 'post', data: { 'name': $('#name').val(), 'npwd': $('#npwd').val(), 'opwd': $('#opwd').val(), 're_pwd': $('#re_pwd').val(), 'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(), }, success: function (data) { if (data.status == 200) { location.href = '/index/' } else { $('.has-error').html(data.msg) } } }) }) </script> </html>
2-2 视图函数
from django.shortcuts import render, HttpResponse, redirect from django.contrib import auth from django.http import JsonResponse # -------------修改密码---------------- def change_pwd(request): if request.method == 'GET': return render(request, 'change_pwd.html') elif request.is_ajax(): res = {'status': None, 'msg': None} name = request.POST.get('name') npwd = request.POST.get('npwd') opwd = request.POST.get('opwd') repwd = request.POST.get('re_pwd') user = auth.authenticate(request, username=name, password=opwd) if user: if npwd == repwd: auth.logout(request) user.set_password(npwd) user.save() res['status'] = 200 res['msg'] = '密码修改成功' else: res['msg'] = '两次密码输入不一致' else: res['msg'] = '用户名不存在或原密码错误' return JsonResponse(res)
三、 头像修改
3-1 前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="/static/jquery-3.3.1.js"></script> <title>修改头像</title> </head> <style> #img_file { width: 80px; height: 80px; margin-left: 10px; } </style> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>修改头像</h1> <form id="form"> {% csrf_token %} <div> <label for="my_file">{{ request.user }}用户头像 <img src="{{ MEDIA_URL }}{{ userinfo.avatar }}" id="img_file"> </label> <input type="file" id="my_file" style="display: none"> </div> <input type="button" id='btn' value="确认修改" class="btn btn-primary pull-right"> </form> </div> </div> </div> </body> <script> $('#my_file').change(function () { var file_obj = $('#my_file')[0].files[0]; var filereader = new FileReader(); filereader.readAsDataURL(file_obj); filereader.onload = function () { $('#img_file').attr('src', filereader.result) } }) $('#btn').click(function () { var formdata = new FormData(); formdata.append('my_file', $('#my_file')[0].files[0]); formdata.append('csrfmiddlewaretoken','{{ csrf_token }}'); $.ajax({ url: '/change_avatar/', type: 'post', data: formdata, processData: false, contentType: false, success: function (data) { if (data['status']) { location.href = '/index/' } else { alert(data['msg']) } } }) }); </script> </html>
3-2 视图函数
from bbs import models from django.http import JsonResponse # -------------修改头像---------------- def change_avatar(request): if request.method == 'GET': userinfo = models.UserInfo.objects.filter(username=request.user).first() return render(request, 'change_avatar.html', locals()) elif request.is_ajax(): res = {'status': 200, 'mag': None} file = request.FILES.get('my_file') if file: user = request.user user.avatar = file user.save() # path = 'media/avatar/%s' % file.name # with open(path, 'wb') as f: # for line in file: # f.write(line) # file = 'avatar/' + str(file) # # 更新方式不会自动带avatar路径，需要自行配置 # user = models.UserInfo.objects.filter(username=request.user).update(avatar=file) else: res['status'] = None res['msg'] = '未知错误' return JsonResponse(res)