美多商城之用户中心(收货地址3)
2024-04-09 15:31:20
三、收货地址
3.4 修改地址前后端逻辑
1. 修改地址接口设计和定义
1.请求方式
| 选项 | 方案 |
|---|---|
| 请求方法 | PUT |
| 请求地址 | /addresses/(?P<address_id>\d+)/ |
# 修改和删除地址url(r'^addresses/(?P<address_id>\d+)/$', views.UpdateDestroyAddressView.as_view()),
2.请求参数：路径参数 和 JSON
| 参数名 | 类型 | 是否必传 | 说明 |
|---|---|---|---|
| address_id | string | 是 | 要修改的地址ID（路径参数） |
| receiver | string | 是 | 收货人 |
| province_id | string | 是 | 省份ID |
| city_id | string | 是 | 城市ID |
| district_id | string | 是 | 区县ID |
| place | string | 是 | 收货地址 |
| mobile | string | 是 | 手机号 |
| tel | string | 否 | 固定电话 |
| string | 否 | 邮箱 |
3.响应结果：JSON
| 字段 | 说明 |
|---|---|
| code | 状态码 |
| errmsg | 错误信息 |
| id | 地址ID |
| receiver | 收货人 |
| province | 省份名称 |
| city | 城市名称 |
| district | 区县名称 |
| place | 收货地址 |
| mobile | 手机号 |
| tel | 固定电话 |
| 邮箱 |
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})3. 修改地址前端逻辑实现
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();
},
<div class="down_btn"><a v-if="address.id!=default_address_id">设为默认</a><a href="javascript:;" class="edit_icon">编辑</a>
</div>
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);})
}3.5 删除地址前后端逻辑
1. 删除地址接口设计和定义
1.请求方式
| 选项 | 方案 |
|---|---|
| 请求方法 | DELETE |
| 请求地址 | /addresses/(?P<address_id>\d+)/ |
2.请求参数：路径参数
| 参数名 | 类型 | 是否必传 | 说明 |
|---|---|---|---|
| address_id | string | 是 | 要修改的地址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)# 将地址逻辑删除设置为Trueaddress.is_deleted = Trueaddress.save()except Exception as e:logger.error(e)return http.JsonResponse({'code': RETCODE.DBERR, 'errmsg': '删除地址失败'})# 响应删除地址结果return http.JsonResponse({'code': RETCODE.OK, 'errmsg': '删除地址成功'})
3. 删除地址前端逻辑实现
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);})
},
<div class="site_title"><h3>[[ address.title ]]</h3><a href="javascript:;" class="edit_icon"></a><em v-if="address.id===default_address_id">默认地址</em><span @click="delete_address(index)" class="del_site">×</span>
</div>3.6 设置默认地址
1. 设置默认地址接口设计和定义
1.请求方式
| 选项 | 方案 |
|---|---|
| 请求方法 | PUT |
| 请求地址 | /addresses/(?P<address_id>\d+)/default/ |
# 设置默认地址url(r'^addresses/(?P<address_id>\d+)/default/$', views.DefaultAddressView.as_view()),2.请求参数：路径参数
| 参数名 | 类型 | 是否必传 | 说明 |
|---|---|---|---|
| address_id | string | 是 | 要修改的地址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 = addressrequest.user.save()except Exception as e:logger.error(e)return http.JsonResponse({'code': RETCODE.DBERR, 'errmsg': '设置默认地址失败'})# 响应设置默认地址结果return http.JsonResponse({'code': RETCODE.OK, 'errmsg': '设置默认地址成功'})
3. 设置默认地址前端逻辑实现
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);})
},
<div class="down_btn"><a v-if="address.id!=default_address_id" @click="set_default(index)">设为默认</a><a @click="show_edit_site(index)" class="edit_icon">编辑</a>
</div>3.7 修改地址标题
1. 修改地址标题接口设计和定义
1.请求方式
| 选项 | 方案 |
|---|---|
| 请求方法 | PUT |
| 请求地址 | /addresses/(?P<address_id>\d+)/title/ |
# 设置地址标题url(r'^addresses/(?P<address_id>\d+)/title/$', views.UpdateTitleAddressView.as_view()),2.请求参数：路径参数
| 参数名 | 类型 | 是否必传 | 说明 |
|---|---|---|---|
| address_id | string | 是 | 要修改的地址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 = titleaddress.save()except Exception as e:logger.error(e)return http.JsonResponse({'code': RETCODE.DBERR, 'errmsg': '设置地址标题失败'})# 4.响应删除地址结果return http.JsonResponse({'code': RETCODE.OK, 'errmsg': '设置地址标题成功'})
3. 修改地址标题前端逻辑实现
<div class="site_title"><div v-if="edit_title_index===index"><input v-model="new_title" type="text" name=""><input @click="save_title(index)" type="button" name="" value="保 存"><input @click="cancel_title(index)" type="reset" name="" value="取 消"></div><div><h3>[[ address.title ]]</h3><a @click="show_edit_title(index)" class="edit_title"></a></div><em v-if="address.id===default_address_id">默认地址</em><span @click="delete_address(index)">×</span>
</div>
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') {// 更新地址titlethis.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);})}
},美多商城之用户中心(收货地址3)相关推荐
- 美多商城之用户中心(收货地址2)
三.收货地址 3.2 新增地址前后端逻辑 1. 定义用户地址模型类 1.用户地址模型类 from meiduo_mall.utils.models import BaseModelclass Addr ...
- 美多商城之用户中心(收货地址1)
三.收货地址 用户地址的主要业务逻辑有: 展示省市区数据 用户地址的增删改查处理 设置默认地址 设置地址标题 3.1 省市区三级联动 1. 展示收货地址界面 提示: 省市区数据是在收货地址界面展示的, ...
- Python_美多商城（用户中心）_5
用户基本信息 用户基本信息逻辑分析 1. 用户基本信息逻辑分析 以下是要实现的后端逻辑 用户模型补充email_active字段 查询并渲染用户基本信息 添加邮箱 发送邮箱验证邮件 验证邮箱 提示: ...
- dj鲜生-32-用户中心-收货地址
用户中心,收货地址 本页主要有两方面需要处理 >收货地址的显示,get请求 >表单的提交,可用post请求 表单的模板页处理 >先让模板页的界面变继承一下 参考 user_cente ...
- 微信小程序开发之——个人中心-收货地址(9)
一 概述 个人详情页对应的页面为:pages/address/address 页面搭建 页面逻辑 二 页面搭建 2.1 布局文件(address.wml) <view class="l ...
- 微信公众号获取微信用户共享收货地址
wx.openAddress({ success: function (res) { var userName = res.userName; // 收货人姓名 var postalCode = re ...
- 美多商城之用户中心(添加和验证邮箱)
二.添加和验证邮箱 2.1 添加邮箱后端逻辑 1. 添加邮箱接口设计和定义 1.请求方式 选项 方案 请求方法 PUT 请求地址 /emails/ # 添加邮箱url(r'^emails/$', vi ...
- 美多商城之用户中心(用户基本信息)
一.用户基本信息 1.1用户基本信息逻辑分析 1. 用户基本信息逻辑分析 以下是要实现的后端逻辑 用户模型补充email_active字段 查询并渲染用户基本信息 添加邮箱 发送邮箱验证邮件 验证邮箱 ...
- 美多商城之用户中心(修改密码)
修改密码 1. 修改密码后端逻辑 提示: 修改密码前需要校验原始密码是否正确,以校验修改密码的用户身份. 如果原始密码正确,再将新的密码赋值给用户. class ChangePasswordView( ...
最新文章
- java中io流实现哪个接口_第55节:Java当中的IO流-时间api(下)-上
- MapReduce实现倒排索引（类似协同过滤）
- Spring Autowire自动装配
- less加管道tail_linux中cat、more、less、tail、head命令的区别
- Netty--ByteBuf
- Visual Studio 2017 15.5.0 正式发布 正式版下载
- phpcms注入漏洞之文件poster.php
- android webview js交互 第一节 （java和js交互）
- ROS 教程之 vision: 摄像头标定camera calibration
- Codewar python训练题全记录——持续更新
- linux环境变量中无cc,Linux环境变量
- IDEA解决Tomcat乱码问题
- 关于一张 5 亿数据表之我与 DBA 的 battle
- 2022-2028全球阿兹夫定片行业市场现状及未来发展趋势
- Unity 三消游戏学习
- 最牛叉的街机游戏合集 模拟器
- 安达智能通过注册：拟募资11.7亿 刘飞与何玉姣夫妇为大专学历
- Java编程题-买苹果
- FFmpeg多媒体文件处理(ffmpeg打印音视频Meta信息)
- c语言怎么返回数组,c++从函数返回数组的方法代码