Django、DRF、Django REST framework框架用户修改密码逻辑前后端实现

最新推荐文章于 2025-04-03 18:32:36 发布

1024小神

最新推荐文章于 2025-04-03 18:32:36 发布

阅读量3.8k

点赞数 1

分类专栏： Python人生文章标签： Django DRF 修改密码前后端

本文链接：https://blog.csdn.net/weixin_44786530/article/details/95898986

版权

Python人生专栏收录该内容

320 篇文章

订阅专栏

后端接口设计：

请求方式 ： PUT /password/

请求参数： JSON 或表单

参数	类型	是否必须	说明
user_id	int	是	用户id
ipassword	str	是	原始密码
password	str	是	新密码1
password2	str	是	确认密码2

返回数据： Response(status=status.HTTP_202_ACCEPTED)

后端实现：

class PassWord(APIView):
    """
    修改用户密码视图，请求接收：POST，ipassword，password，password2，
    效验原始密码ipassword正确否，
    正确的话效验新密码的正确性，返回ok，不正确返回error，
    """

    def put(self, request):
        # 获取参数
        ipassword = request.data["ipassword"]
        password = request.data["password"]
        password2 = request.data["password2"]
        user_id = request.data["user_id"]
        # 获得请求用户
        user = User.objects.get(id=user_id)
        # 效验新密码是否符合要求
        if password != password2:
            raise Exception("两次密码输入不一致！")
        if len(password) > 20 or len(password) < 8:
            raise Exception("密码长度需要8到20位")
        # 检查原始密码是否正确
        user.check_password(ipassword)

        # 修改密码为新密码
        user.set_password(password)
        user.save()

        # 返回数据
        return Response(status=status.HTTP_202_ACCEPTED)

前端代码：

user_center_pass.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="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script type="text/javascript" src="js/host.js"></script>
    <script type="text/javascript" src="js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>
<body>
	<div id="app" v-cloak>
	<div class="header_con">
        <div class="header" id="app1">
            <div class="welcome fl">欢迎来到美多商城!</div>
            <div class="fr">
                <div class="login_btn fl">
                    欢迎您：<em>{{ username }}</em>
                    <span>|</span>
                    <a @click="logout">退出</a>
                </div>
                <div class="user_link fl">
                    <span>|</span>
                    <a href="user_center_info.html">用户中心</a>
                    <span>|</span>
                    <a href="cart.html">我的购物车</a>
                    <span>|</span>
                    <a href="user_center_order.html">我的订单</a>
                </div>
            </div>
        </div>
    </div>

	<div class="search_bar clearfix">
		<a href="index.html" class="logo fl"><img src="images/logo.png"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
		<div class="search_con fr mt40">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>		
	</div>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="user_center_info.html">· 个人信息</a></li>
				<li><a href="user_center_order.html">· 全部订单</a></li>
                <li><a href="user_center_site.html">· 收货地址</a></li>
                <li><a href="user_center_pass.html" class="active">· 修改密码</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
				<div class="info_con clearfix">
				<h3 class="common_title2">修改密码</h3>
				<div class="site_con pass_change_con">
                    <form id="pass-form" @submit.prevent="on_submit">
                        <div class="form_group">
                            <label>当前密码：</label>
                            <input type="password" v-model="ipassword" name="ipwd" id="ipwd">
                        	<span v-show="error_ipassword" class="error_tip">原密码不正确，请重新输入</span>
                        </div>
                        <div class="form_group">
                            <label>新密码：</label>
                            <input type="password" v-model="password" @blur="check_pwd" name="pwd" id="pwd">
                        	<span v-show="error_password" class="error_tip">密码最少8位，最长20位</span>
                        </div>
                        <div class="form_group">
                            <label>确认新密码：</label>
                            <input type="password" v-model="password2" @blur="check_cpwd" name="cpwd" id="cpwd">
                        	<span v-show="error_check_password" class="error_tip">两次输入的密码不一致</span>
                        </div>
                        <input type="submit" name="" value="确 定" class="info_submit">
                    </form>
            </div>
				</div>
		
		</div>
		</div>
	</div>



	<div class="footer">
		<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 © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
<script type="text/javascript" src="js/user_center_pass.js"></script>
</body>
</html>

user_center_pass.js代码实现：

var vm = new Vue({
    el: '#app',
    data: {
        host,
        error_ipassword: false,
        error_password: false,
        error_check_password: false,
        user_id: sessionStorage.user_id || localStorage.user_id,
        token: sessionStorage.token || localStorage.token,
        username: '',
        ipassword:'',
        password:'',
        password2:'',
    },
    mounted: function(){
        // 判断用户的登录状态
        if (this.user_id && this.token) {
            axios.get(this.host + '/user/', {
                    // 向后端传递JWT token的方法
                    headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                })
                .then(response => {
                    // 加载用户数据
                    this.user_id = response.data.id;
                    this.username = response.data.username;
                })
                .catch(error => {
                    if (error.response.status==401 || error.response.status==403) {
                        location.href = '/login.html?next=/user_center_info.html';
                    }
                });
        } else {
            location.href = '/login.html?next=/user_center_info.html';
        }
    },
    methods: {
        // 退出
        logout: function(){
            sessionStorage.clear();
            localStorage.clear();
            location.href = '/login.html';
        },
        check_pwd: function (){
            var len = this.password.length;
            if(len<8||len>20){
                this.error_password = true;
            } else {
                this.error_password = false;
            }
        },
        check_cpwd: function (){
            if(this.password!=this.password2) {
                this.error_check_password = true;
            } else {
                this.error_check_password = false;
            }
        },
        // 表单提交,修改密码方法
        on_submit: function(){
            // this.check_username();
            // this.check_ipwd();
            this.check_pwd();
            this.check_cpwd();
            if (this.error_password == false && this.error_check_password == false) {
                axios.put(this.host+'/password/',
                    // { user_id: this.user_id },
                    {
                        // 向后端传递JWT token的方法
                        headers: {
                            'Authorization': 'JWT ' + this.token
                        },
                        ipassword: this.ipassword,
                        password: this.password,
                        password2: this.password2,
                        user_id:this.user_id,
                    }, {
                        responseType: 'json',
                        withCredentials: true
                    })
                    .then(response => {
                        // 弹出修改成功，跳转到登录页面
                        alert("修改成功!");
                        return_url = '/login.html';
                        location.href = return_url;
                    })
                    .catch(error => {
                        if (error.response.status == 400) {
                            this.error_pwd_message = '原始密码错误';
                        } else {
                            this.error_pwd_message = '服务器错误';
                        }
                        this.error_pwd = true;
                    })
            }
        },

    }
});