三、收货地址
3.4 修改地址前后端逻辑
1. 修改地址接口设计和定义
1.请求方式
选项方案请求方法PUT请求地址/addresses/(?P\d+)/ # 修改和删除地址
url(r'^addresses/(?P\d+)/$', views.UpdateDestroyAddressView.as_view()),
2.请求参数：路径参数 和 JSON
参数名类型是否必传说明address_idstring是要修改的地址ID（路径参数）receiverstring是收货人province_idstring是省份IDcity_idstring是城市IDdistrict_idstring是区县IDplacestring是收货地址mobilestring是手机号telstring否固定电话emailstring否邮箱3.响应结果：JSON
字段说明code状态码errmsg错误信息id地址IDreceiver收货人province省份名称city城市名称district区县名称place收货地址mobile手机号tel固定电话email邮箱 2. 修改地址后端逻辑实现提示
- 删除地址后端逻辑和新增地址后端逻辑非常的相似。
- 都是更新用户地址模型类，需要保存用户地址信息。
class UpdateDestroyAddressView(LoginRequiredMixin, View):
"""修改和删除地址"""
def put(self, request, address_id):
"""修改地址"""
# 接收参数
json_dict = json.loads(request.body.decode())
receiver = json_dict.get('receiver')
province_id = json_dict.get('province_id')
city_id = json_dict.get('city_id')
district_id = json_dict.get('district_id')
place = json_dict.get('place')
mobile = json_dict.get('mobile')
tel = json_dict.get('tel')
email = json_dict.get('email')
# 校验参数
if not all([receiver, province_id, city_id, district_id, place, mobile]):
return http.HttpResponseForbidden('缺少必传参数')
if not re.match(r'^1[3-9]\d{9}$', mobile):
return http.HttpResponseForbidden('参数mobile有误')
if tel:
if not re.match(r'^(0[0-9]{2,3}-)?([2-9][0-9]{6,7})+(-[0-9]{1,4})?$', tel):
return http.HttpResponseForbidden('参数tel有误')
if email:
if not re.match(r'^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$', email):
return http.HttpResponseForbidden('参数email有误')
# 判断地址是否存在,并更新地址信息
try:
Address.objects.filter(id=address_id).update(
user = request.user,
title = receiver,
receiver = receiver,
province_id = province_id,
city_id = city_id,
district_id = district_id,
place = place,
mobile = mobile,
tel = tel,
email = email
)
except Exception as e:
logger.error(e)
return http.JsonResponse({'code': RETCODE.DBERR, 'errmsg': '更新地址失败'})
# 构造响应数据
address = Address.objects.get(id=address_id)
address_dict = {
"id": address.id,
"title": address.title,
"receiver": address.receiver,
"province": address.province.name,
"city": address.city.name,
"district": address.district.name,
"place": address.place,
"mobile": address.mobile,
"tel": address.tel,
"email": address.email
}
# 响应更新地址结果
return http.JsonResponse({'code': RETCODE.OK, 'errmsg': '更新地址成功', 'address': address_dict})1.添加修改地址的标记
- 新增地址和修改地址的交互不同。
- 为了区分用户是新增地址还是修改地址，我们可以选择添加一个变量，作为标记。
- 为了方便得到正在修改的地址信息，我们可以选择展示地址时对应的序号作为标记。
data: {
editing_address_index: '',
},
2.实现编辑按钮对应的事件
show_edit_site(index){
this.is_show_edit = true;
this.clear_all_errors();
this.editing_address_index = index.toString();
},
设为默认
编辑
3.展示要重新编辑的数据
show_edit_site(index){
this.is_show_edit = true;
this.clear_all_errors();
this.editing_address_index = index.toString();
// 只获取要编辑的数据
this.form_address = JSON.parse(JSON.stringify(this.addresses[index]));
},
4.发送修改地址请求
- 重要提示：
0 == ''返回true0 === ''返回false- 为了避免第0个索引出错，我们选择
this.editing_address_index === ''的方式进行判断
if (this.editing_address_index === '') {
// 新增地址
......
} else {
// 修改地址
let url = '/addresses/' + this.addresses[this.editing_address_index].id + '/';
axios.put(url, this.form_address, {
headers: {
'X-CSRFToken':getCookie('csrftoken')
},
responseType: 'json'
})
.then(response => {
if (response.data.code == '0') {
this.addresses[this.editing_address_index] = response.data.address;
this.is_show_edit = false;
} else if (response.data.code == '4101') {
location.href = '/login/?next=/addresses/';
} else {
alert(response.data.errmsg);
}
})
.catch(error => {
alert(error.response);
})
}1.请求方式
选项方案请求方法DELETE请求地址/addresses/(?P\d+)/2.请求参数：路径参数
参数名类型是否必传说明address_idstring是要修改的地址ID（路径参数）3.响应结果：JSON
字段说明code状态码errmsg错误信息 2. 删除地址后端逻辑实现提示：
- 删除地址不是物理删除，是逻辑删除。
class UpdateDestroyAddressView(LoginRequiredMixin, View):
"""修改和删除地址"""
def put(self, request, address_id):
"""修改地址"""
......
def delete(self, request, address_id):
"""删除地址"""
try:
# 查询要删除的地址
address = Address.objects.get(id=address_id)
# 将地址逻辑删除设置为True
address.is_deleted = True
address.save()
except Exception as e:
logger.error(e)
return http.JsonResponse({'code': RETCODE.DBERR, 'errmsg': '删除地址失败'})
# 响应删除地址结果
return http.JsonResponse({'code': RETCODE.OK, 'errmsg': '删除地址成功'})
delete_address(index){
let url = '/addresses/' + this.addresses[index].id + '/';
axios.delete(url, {
headers: {
'X-CSRFToken':getCookie('csrftoken')
},
responseType: 'json'
})
.then(response => {
if (response.data.code == '0') {
// 删除对应的标签
this.addresses.splice(index, 1);
} else if (response.data.code == '4101') {
location.href = '/login/?next=/addresses/';
}else {
alert(response.data.errmsg);
}
})
.catch(error => {
console.log(error.response);
})
},
[[ address.title ]]
默认地址
×
1.请求方式
选项方案请求方法PUT请求地址/addresses/(?P\d+)/default/# 设置默认地址
url(r'^addresses/(?P\d+)/default/$', views.DefaultAddressView.as_view()),2.请求参数：路径参数
参数名类型是否必传说明address_idstring是要修改的地址ID（路径参数）3.响应结果：JSON
字段说明code状态码errmsg错误信息 2. 设置默认地址后端逻辑实现class DefaultAddressView(LoginRequiredMixin, View):
"""设置默认地址"""
def put(self, request, address_id):
"""设置默认地址"""
try:
# 接收参数,查询地址
address = Address.objects.get(id=address_id)
# 设置地址为默认地址
request.user.default_address = address
request.user.save()
except Exception as e:
logger.error(e)
return http.JsonResponse({'code': RETCODE.DBERR, 'errmsg': '设置默认地址失败'})
# 响应设置默认地址结果
return http.JsonResponse({'code': RETCODE.OK, 'errmsg': '设置默认地址成功'})
set_default(index){
let url = '/addresses/' + this.addresses[index].id + '/default/';
axios.put(url, {}, {
headers: {
'X-CSRFToken':getCookie('csrftoken')
},
responseType: 'json'
})
.then(response => {
if (response.data.code == '0') {
// 设置默认地址标签
this.default_address_id = this.addresses[index].id;
} else if (response.data.code == '4101') {
location.href = '/login/?next=/addresses/';
} else {
alert(response.data.errmsg);
}
})
.catch(error => {
console.log(error.response);
})
},
设为默认
编辑
1.请求方式
选项方案请求方法PUT请求地址/addresses/(?P\d+)/title/# 设置地址标题
url(r'^addresses/(?P\d+)/title/$', views.UpdateTitleAddressView.as_view()),2.请求参数：路径参数
参数名类型是否必传说明address_idstring是要修改的地址ID（路径参数）3.响应结果：JSON
字段说明code状态码errmsg错误信息 2. 修改地址标题后端逻辑实现class UpdateTitleAddressView(LoginRequiredMixin, View):
"""设置地址标题"""
def put(self, request, address_id):
"""设置地址标题"""
# 接收参数：地址标题
json_dict = json.loads(request.body.decode())
title = json_dict.get('title')
# 校验参数
if not title:
return http.HttpResponseForbidden('缺少title')
try:
# 查询地址
address = Address.objects.get(id=address_id)
# 设置新的地址标题
address.title = title
address.save()
except Exception as e:
logger.error(e)
return http.JsonResponse({'code': RETCODE.DBERR, 'errmsg': '设置地址标题失败'})
# 4.响应删除地址结果
return http.JsonResponse({'code': RETCODE.OK, 'errmsg': '设置地址标题成功'})
[[ address.title ]]
默认地址
×
data: {
edit_title_index: '',
new_title: '',
},
// 展示地址title编辑框
show_edit_title(index){
this.edit_title_index = index;
},
// 取消保存地址title
cancel_title(){
this.edit_title_index = '';
this.new_title = '';
},
// 修改地址title
save_title(index){
if (!this.new_title) {
alert("请填写标题后再保存！");
} else {
let url = '/addresses/' + this.addresses[index].id + '/title/';
axios.put(url, {
title: this.new_title
}, {
headers: {
'X-CSRFToken':getCookie('csrftoken')
},
responseType: 'json'
})
.then(response => {
if (response.data.code == '0') {
// 更新地址title
this.addresses[index].title = this.new_title;
this.cancel_title();
} else if (response.data.code == '4101') {
location.href = '/login/?next=/addresses/';
} else {
alert(response.data.errmsg);
}
})
.catch(error => {
console.log(error.response);
})
}
},
