Django - BBS - 项目学习 - 注销、密码修改、头像修改的实现

最新推荐文章于 2022-06-21 17:27:52 发布

LSYHhhhh

最新推荐文章于 2022-06-21 17:27:52 发布

阅读量593

点赞数

分类专栏： Django 项目学习

本文链接：https://blog.csdn.net/qq_33961117/article/details/84839269

版权

Django 同时被 2 个专栏收录

63 篇文章 2 订阅

订阅专栏

项目学习

47 篇文章 1 订阅

订阅专栏

一、注销

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)