都说我们要做模块化设计，而不要做功能化设计

什么是模块化设计，就是可插拔性高，组件化，想要就用，不要用拉倒，直接删除就行

什么是功能化设计，就是一个简单的功能，实现想要的效果，但是不够通用化，别人要用的话需要读懂你的代码，还需要复制黏贴很多代码这样效率不高

 

今天写了一个省市区三级联动的模块，写完后使用会非常方便，也很灵活

主要使用到的技术：jquery，redis，springMVC，MyBatis（springMVC和MyBatis无所谓，你用struts或者hibernate或者spring data都行）

首先页面引入js

1 2 

HTML中写入3个div块，这是互斥的，div#id不同就可以做到模块化可插拔

1 
     
        2         
         3         
        4         
        5     
     
  6      7     
     
        8         
         9         
       10         
       11     
     
 12     13     
     
       14         
        15         
       16         
       17     
     

初始化JS：

后台controller：

1 /** 2      *  3      * @Description: 获取所有的省市区列表 4      * @return 5      * @throws Exception 6      *  7      * @author leechenxiang 8      * @date 2016年6月16日 上午11:22:10 9      */10     @RequestMapping("/getCities")11     @ResponseBody12     public CitiesDataResult getCities() throws Exception {13         CitiesDataResult areas = commonService.getAllCities();14         return areas;15     }

service：

1 @Override 2     public CitiesDataResult getAllCities() { 3         // 取出缓存 4         try { 5             String citiesDataResult = jedisClient.get(REDIS_CITIES_KEY); 6             if (!StringUtils.isBlank(citiesDataResult)) { 7                 CitiesDataResult redisResult = JsonUtils.jsonToPojo(citiesDataResult, CitiesDataResult.class); 8                 return redisResult; 9             }10         } catch (Exception e1) {11             e1.printStackTrace();12         }13         14         List
     
       provinceList = areaProvinceMapper.getProvinceList();15         List
      
        pList = new ArrayList
       
        ();16         for (AreaProvince province : provinceList) {17             int provinceId = province.getProvinceId();18             String provinceName = province.getProvinceName();19             20             List
        
          cityList = areaProvinceMapper.getCityListBypId(provinceId);21             List
         
           cList = new ArrayList
          
           ();22 for (AreaCity city : cityList) {23 int cityId = city.getCityId();24 String cityName = city.getCityName();25 26 List
           
             districtList = areaProvinceMapper.getDistrictListBycId(cityId);27 28 City c = new City();29 c.setN(cityName);30 c.setA(districtList);31 cList.add(c);32 }33 34 Province p = new Province(provinceName, cList);35 pList.add(p);36 }37 38 CitiesDataResult result = new CitiesDataResult();39 result.setCitylist(pList);40 41 // 放入缓存42 try {43 jedisClient.set(REDIS_CITIES_KEY, JsonUtils.objectToJson(result));44 } catch (Exception e) {45 e.printStackTrace();46 }47 48 return result;49 }
           
          
         
        
       
      
     

如果需要默认选中那么只需要对这3个参数赋值即可：

prov:"江苏省",city:"无锡市",dist:"南长区",

对于省市区的数据源，可以存放在数据库表中，也可以直接存入js，作为一个json来调用即可

如果没有省市区可以淘一下万能的X宝，可以参考如下链接，真的是太强大了，把省市区直接细化到了极致: