后端接口设计：
请求方式 ： 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:>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>美多商城-用户中心</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="css/main.css" target="_blank" rel="external nofollow" >
<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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >用户中心</a>
<span>|</span>
<a href="cart.html" target="_blank" rel="external nofollow" >我的购物车</a>
<span>|</span>
<a href="user_center_order.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >我的订单</a>
</div>
</div>
</div>
</div>
<div class="search_bar clearfix">
<a href="index.html" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >· 个人信息</a></li>
<li><a href="user_center_order.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >· 全部订单</a></li>
<li><a href="user_center_site.html" target="_blank" rel="external nofollow" >· 收货地址</a></li>
<li><a href="user_center_pass.html" target="_blank" rel="external nofollow" 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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >关于我们</a>
<span>|</span>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >联系我们</a>
<span>|</span>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >招聘人才</a>
<span>|</span>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >友情链接</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;
})
}
},
}
});
![第七章 构建在线商店7 构建在线商店[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)