用户地址管理代码
后端
在users/views.py中添加视图
class AddressViewSet(mixins.CreateModelMixin, mixins.UpdateModelMixin, GenericViewSet):
""" 用户地址新增与修改 """ serializer_class = serializers.UserAddressSerializer permissions = [IsAuthenticated] def get_queryset(self): return self.request.user.addresses.filter(is_deleted=False) # GET /addresses/ def list(self, request, *args, **kwargs): """ 用户地址列表数据 """ queryset = self.get_queryset() serializer = self.get_serializer(queryset, many=True) user = self.request.user return Response({ 'user_id': user.id, 'default_address_id': user.default_address_id, 'limit': constants.USER_ADDRESS_COUNTS_LIMIT, 'addresses': serializer.data, }) # POST /addresses/ def create(self, request, *args, **kwargs): """ 保存用户地址数据 """ # 检查用户地址数据数目不能超过上限 count = request.user.addresses.count() if count >= constants.USER_ADDRESS_COUNTS_LIMIT: return Response({'message': '保存地址数据已达到上限'}, status=status.HTTP_400_BAD_REQUEST) return super().create(request, *args, **kwargs) # delete /addresses/<pk>/ def destroy(self, request, *args, **kwargs): """ 处理删除 """ address = self.get_object() # 进行逻辑删除 address.is_deleted = True address.save() return Response(status=status.HTTP_204_NO_CONTENT) # put /addresses/pk/status/ @action(methods=['put'], detail=True) def status(self, request, pk=None): """ 设置默认地址 """ address = self.get_object() request.user.default_address = address request.user.save() return Response({'message': 'OK'}, status=status.HTTP_200_OK) # put /addresses/pk/title/ # 需要请求体参数 title @action(methods=['put'], detail=True) def title(self, request, pk=None): """ 修改标题 """ address = self.get_object() serializer = serializers.AddressTitleSerializer(instance=address, data=request.data) serializer.is_valid(raise_exception=True) serializer.save() return Response(serializer.data) 在users/serializers.py中添加序列化器
class UserAddressSerializer(serializers.ModelSerializer):
""" 用户地址序列化器 """ province = serializers.StringRelatedField(read_only=True) city = serializers.StringRelatedField(read_only=True) district = serializers.StringRelatedField(read_only=True) province_id = serializers.IntegerField(label='省ID', required=True) city_id = serializers.IntegerField(label='市ID', required=True) district_id = serializers.IntegerField(label='区ID', required=True) class Meta: model = Address exclude = ('user', 'is_deleted', 'create_time', 'update_time') def validate_mobile(self, value): """ 验证手机号 """ if not re.match(r'^1[3-9]\d{9}$', value): raise serializers.ValidationError('手机号格式错误') return value def create(self, validated_data): """ 保存 """ validated_data['user'] = self.context['request'].user return super().create(validated_data) class AddressTitleSerializer(serializers.ModelSerializer): """ 地址标题 """ class Meta: model = Address fields = ('title',) 在users/urls.py中添加路由
router = routers.DefaultRouter()
router.register(r'addresses', views.AddressViewSet, base_name='addresses')
urlpatterns += router.urls
# POST /addresses/ 新建 -> create
# PUT /addresses/<pk>/ 修改 -> update
# GET /addresses/ 查询 -> list # DELETE /addresses/<pk>/ 删除 -> destroy # PUT /addresses/<pk>/status/ 设置默认 -> status # PUT /addresses/<pk>/title/ 设置标题 -> title 前端
修改user_center_site.js的mounted
mounted: function(){
...
// 补充获取地址数据的请求
axios.get(this.host + '/addresses/', { headers: { 'Authorization': 'JWT ' + this.token }, responseType: 'json' }) .then(response => { this.addresses = response.data.addresses; this.limit = response.data.limit; this.default_address_id = response.data.default_address_id; }) .catch(error => { status = error.response.status; if (status == 401 || status == 403) { location.href = 'login.html?next=/user_center_site.html'; } else { alert(error.response.data.detail); } }) }, 修改user_center_site.js的methods
// 保存地址
save_address: function(){
if (this.error_receiver || this.error_place || this.error_mobile || this.error_email || !this.form_address.province_id || !this.form_address.city_id || !this.form_address.district_id ) { alert('信息填写有误！'); } else { this.form_address.title = this.form_address.receiver; if (this.editing_address_index === '') { // 新增地址 axios.post(this.host + '/addresses/', this.form_address, { headers: { 'Authorization': 'JWT ' + this.token }, responseType: 'json' }) .then(response => { // 将新地址添加大数组头部 this.addresses.splice(0, 0, response.data); this.is_show_edit = false; }) .catch(error => { console.log(error.response.data); }) } else { // 修改地址 axios.put(this.host + '/addresses/' + this.addresses[this.editing_address_index].id + '/', this.form_address, { headers: { 'Authorization': 'JWT ' + this.token }, responseType: 'json' }) .then(response => { this.addresses[this.editing_address_index] = response.data; this.is_show_edit = false; }) .catch(error => { alert(error.response.data.detail || error.response.data.message); }) } } }, // 删除地址 del_address: function(index){ axios.delete(this.host + '/addresses/' + this.addresses[index].id + '/', { headers: { 'Authorization': 'JWT ' + this.token }, responseType: 'json' }) .then(response => { // 从数组中移除地址 this.addresses.splice(index, 1); }) .catch(error => { console.log(error.response.data); }) }, // 设置默认地址 set_default: function(index){ axios.put(this.host + '/addresses/' + this.addresses[index].id + '/status/', {}, { headers: { 'Authorization': 'JWT ' + this.token }, responseType: 'json' }) .then(response => { this.default_address_id = this.addresses[index].id; }) .catch(error => { console.log(error.response.data); }) }, // 展示编辑标题 show_edit_title: function(index){ this.input_title = this.addresses[index].title; for(var i=0; i<index; i++) { this.is_set_title.push(false); } this.is_set_title.push(true); } , // 保存地址标题 save_title: function(index){ if (!this.input_title) { alert("请填写标题后再保存！"); } else { axios.put(this.host + '/addresses/' + this.addresses[index].id + '/title/', { title: this.input_title }, { headers: { 'Authorization': 'JWT ' + token }, responseType: 'json' }) .then(response => { this.addresses[index].title = this.input_title; this.is_set_title = []; }) .catch(error => { console.log(error.response.data); }) } }, // 取消保存地址 cancel_title: function(index){ this.is_set_title = []; }