电商项目的收货地址

收货地址主要分为：

1：添加地址
2：设置默认地址
3：编辑地址
4：删除地址
添加地址框里面涉及到了省市区三级联动问题

我们需要先创建一张自关联的城市表

# 城市表  自关联表
class City(models.Model):

    name = models.CharField(max_length=20,verbose_name='城市名字')
    city_id = models.IntegerField(verbose_name='城市ID')
    parent = models.ForeignKey(
        to = 'self',      # 自己关联自己
        on_delete = models.SET_NULL,
        null = True,     # 允许字段为 None值
        blank = True,    # 输入框可以不输入
        related_name = 'subs'    # 反向查询
    )

    def __str__(self):
        return self.name

    class Meta:
        db_table = 'city'
        verbose_name_plural = '城市'

创好表后我手动输入了一点假数据，右边关联左边ID

有数据就可以可以把数据渲染到页面上了 首先写一个点击事件，点击把增加地址框显示出来

// 获取一级城市
        add_edit:function(){
            this.is_show_edit = true
            this.axios({
                url:"http://127.0.0.1:8000/api/get_edit_one/",
                method:'get'
            }).then(res=>{
                this.city_one = res.data    # 将获取到的省数据复制到原本的默认省变量上
                this.get_two_city()
            }).catch(error=>{
                console.log(error)
            })

select 下拉框有个
@change属性，可以获取选中的value，我们v-model绑定了省的ID,当选中哪个省的同事就获取到了当前省ID和触动了一个点击方法

二级城市三级城市同理

 // 获取二级城市    
        get_two_city:function(){

            this.axios({
                url:"http://127.0.0.1:8000/api/get_edit_two/" + this.one_city_id + '/',
                method:'get'
            }).then(res=>{
                this.city_two = res.data

            }).catch(error=>{
                console.log(error)
            })
        },
        // 获取三级城市
        get_three_city:function(){
            this.axios({
                url:"http://127.0.0.1:8000/api/get_edit_three/" + this.two_city_id + '/',
                method:'get'
            }).then(res=>{
                this.city_three = res.data
            }).catch(error=>{
                console.log(error)
            })
        },

三级联动后台代码

# 正则路由传参
re_path(r'get_edit_two/(?P<one_city_id>\d+)/',views.Get_edit_two.as_view()),
re_path(r'get_edit_three/(?P<two_city_id>\d+)/',views.Get_edit_three.as_view()),

from rest_framework import generics
# 获取一级城市
class Get_edit_one(generics.ListAPIView):
    '''
        条件查询数据库 parent=None的城市代表是最上级，
        用 generics.ListAPIView 类视图可以直接调用它的序列化器，自动返回
    '''
    # queryset:底层的方法
    queryset = models.City.objects.filter(parent=None).all()
	
	# 查询出来的数据对象 queryset  会自动走下面这个序列化器并返回
    serializer_class = serializer.CitySerializer


# 获取二级城市数据
class Get_edit_two(generics