3Redis实现省市区三级联动（redis 省市区）

Redis实现省市区三级联动

随着移动互联网的发展，省市区三级联动已经成为了许多应用场景的标配，如新用户注册、新增地址等。因此，实现省市区三级联动显得尤为重要。这篇文章将介绍如何利用Redis实现省市区三级联动。

一、需求分析

实现省市区三级联动的核心是如何在用户选择不同地区的同时自动加载下一级地区的数据，这就需要一个能够动态加载数据的机制。因此，我们需要：

1. 一个能够存储所有省市区数据的数据源，本文采用Redis；

2. 一个前端UI组件，用于展示省市区选择界面，此处不作过多介绍；

3.一套数据结构和算法，用于从Redis中查询并返回对应的地区数据。

二、数据源的准备

我们需要准备一份能够在Redis中存储的省市区数据，其数据结构如下：

[
    {
        "name": "北京市",
        "code": "110000",
        "children": [
            {
                "name": "北京市",
                "code": "110100",
                "children": [
                    {
                        "name": "东城区",
                        "code": "110101"
                    },
                    {
                        "name": "西城区",
                        "code": "110102"
                    },
                    /*省略*/
                ]
            }
        ]
    },
    /*省略*/
]

在Redis中存储这份数据时，可以采用hash类型来存储，例如：

# hash data type
HMSET provinces 北京市 "{\"code\":\"110000\", \"children\":[{\"code\":\"110100\", \"name\":\"北京市\", \"children\":[{\"code\":\"110101\", \"name\":\"东城区\"}, {\"code\":\"110102\", \"name\":\"西城区\"}, ...]}], \"name\":\"北京市\"}"

HMSET provinces 天津市 "{\"code\":\"120000\", \"children\":[{\"code\":\"120100\", \"name\":\"天津市\", \"children\":[{\"code\":\"120101\", \"name\":\"和平区\"}, {\"code\":\"120102\", \"name\":\"河东区\"}, ...]}], \"name\":\"天津市\"}"

# 省略其他省份

好了，现在我们已经成功将省市区数据存储在了Redis中。

三、查询数据算法

在前端中，我们需要定位用户当前选择的省、市和区/县，在用户选择某个省/市时，要自动清空下一级的选择框并查询并填充下一级的数据。而在后端中，我们需要根据用户选择的省、市和区/县查询Redis并返回对应的数据。

以下是一组可以查询Redis并返回省份列表的Python代码：

import redis                               
                                            
def get_provinces():                        
    r = redis.Redis(host='localhost', port=6379, db=0, password=None)    
    provinces = []                          
    for p in r.scan_iter("provinces:*"):    
        d = r.hgetall(p)                    
        provinces.append(json.loads(d["data"])) 
    return provinces

这段代码的功能是从Redis中查询所有的省份数据，并返回一个省份列表，省份的数据格式同上文提到的数据格式。

需要注意的是，该代码仅返回了全部的省份数据，如果需要根据用户选择的省份来查询对应的市区，请自行编写。

四、前端实现

无论使用Vue、React还是纯原生js实现，前端的核心思路都是一样的：

1. 读取Redis中存储的省市区数据；

2. 初始化界面，展示省份选择框，其他两个地区选择框空置；

3. 监听用户选择的省份，当用户选择了某个省份时，清空市、区选择框，然后查询并填充对应的市数据；

4. 监听用户选择的市、区，当用户选择了某个市或区时，保存对应的城市编码，以便提交表单时上传服务器。

以Vue为例，以下是一个可以实现省市区三级联动的Vue组件代码：

  

    
      {{ province.name }}
    
    
      {{ city.name }}
    
    
      {{ region.name }}
    
  



import axios from 'axios'

export default {
  data() {
    return {
      provinces: [],
      cities: [],
      regions: [],
      selectedProvince: '',
      selectedCity: '',
      selectedRegion: ''
    }
  },
  created() {
    this.loadProvinces()
  },
  methods: {
    loadProvinces() {
      axios.get('/api/provinces').then((response) => {
        this.provinces = response.data
      })
    },
    onProvinceChange(event) {
      this.selectedCity = ''
      this.selectedRegion = ''
      const provinceCode = event.target.value
      axios.get(`/api/cities?provinceCode=${provinceCode}`).then((response) => {
        this.cities = response.data
      })
    },
    onCityChange(event) {
      this.selectedRegion = ''
      const cityCode = event.target.value
      axios.get(`/api/regions?cityCode=${cityCode}`).then((response) => {
        this.regions = response.data
      })
    },
    onRegionChange(event) {
      this.selectedRegion = event.target.value
    }
  }
}

其中，loadProvinces方法从后端拉取所有省份数据，并初始化界面，其他三个方法分别监听了用户选择的省份、市、区变化，并分别查询Redis，并填充对应的数据。

五、总结

通过以上几个步骤，我们已经成功实现了Redis的省市区三级联动，这是一个非常常见的问题，无论在Web端还是移动端都能得到广泛的应用。在实际开发中，可以根据自己的需求来对该方法进行改进、优化，比如在Redis中存储的省市区数据的数据结构可以根据实际情况来微调，能够更好地适配应用场景。