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

我会带着你远行 2021-12-09 18:31 342阅读 0赞

后端接口设计：

**请求方式** ： PUT /password/

**请求参数**： JSON 或 表单

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>是否必须</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>user_id</td> 
   <td>int</td> 
   <td>是</td> 
   <td>用户id</td> 
  </tr> 
  <tr> 
   <td>ipassword</td> 
   <td>str</td> 
   <td>是</td> 
   <td>原始密码</td> 
  </tr> 
  <tr> 
   <td>password</td> 
   <td>str</td> 
   <td>是</td> 
   <td>新密码1</td> 
  </tr> 
  <tr> 
   <td>password2</td> 
   <td>str</td> 
   <td>是</td> 
   <td>确认密码2</td> 
  </tr> 
 </tbody> 
</table>

**返回数据**： 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">|    用户中心</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代码实现：