快应用之地图——获取全国的省/直辖市、市/区、县

最近在学快应用，学的过程模仿滴滴写页面再加深理解和运用，发觉哦，很有趣哦。

好啦，开始我们的正题。使用快应用的数据请求接口fetch(需要import哦)来向本地的服务请求数据，获取全国的省/直辖市（相关的数据url:https://github.com/Enmeng/ChinesePlacename.git），将获得的数据用select、option组合展示出来，用户选择其中一个选中，触发select的onchange事件，在处理事件中根据选择项的值向服务器请求该省/直辖市的下一级的地名，并用下一个select、option组合来显示，一直下钻到区。

下面是相关的部分代码哦。

index.ux中的select部分

 <div class="item addressList">
         <div>
            <text class="tipText">省/直辖市</text>
            <select @change="selectProChange">
              <option for="pro in listPro">{{pro}}</option>
            </select>
            <text class="tipText" style="font-size:60px;"><span>|</span></text>
         </div>
         <div>
           <text class="tipText">市/区</text>
           <select @change="selectCityChange">
             <option for="city in listCity">{{city}}</option>
           </select>
           <text class="tipText" style="font-size:60px;"><span>|</span></text>
         </div>
         <div>
          <text class="tipText">区</text>
          <select @change="selectCountyChange">
            <option for="county in listCounty">{{county}}</option>
          </select>
        </div>
       </div>

接下来是处理事件部分

      onInit:function(){
        prompt.showToast({message:this.currentCity});
        
        var that=this;
        fetch.fetch({
        url:that.baseUrl,
        success: function (response) {
            that.listPro=[].concat(JSON.parse(response.data));
        },
        fail: function (err, code) {
            prompt.showToast({message:err});
        }
       })
      },
      enterKeyClick:function(res){
        this.selectCity=res.value;
      },
      selectProChange:function(res){
        this.selectPro=res.newValue;
        var url=this.baseUrl+'?currentPro='+this.selectPro;
        var that=this;
        fetch.fetch({
        url: url,
        success: function (response) {
            that.listCity=[].concat(JSON.parse(response.data));
        },
        fail: function (err, code) {
            prompt.showToast({message:err});
        }
       })
      },
      selectCityChange:function(res){
        this.selectCity=res.newValue;
        var url=that.baseUrl+'?currentPro='+this.selectPro+'&&currentCity='+this.selectCity;
        var that=this;
        fetch.fetch({
          url:url,
          success:function(response){
            that.listCounty=[].concat(JSON.parse(response.data));
          },
          fail:function(err,code){
            prompt.showToast({message:err});
          }
        })
      },
      selectCountyChange:function(res){
        this.selectCounty=res.newValue;
      },

本地服务器部分代码

fs.readFile('./static/city.json', 'utf8', function(err, data){
    //获得所有省/直辖市
    var pro=JSON.parse(data).arrCity;
    var list=[];
    if(req.query.currentPro==undefined&&req.query.currentCity==undefined){
      pro.forEach(element => {
        list.push(element.name);
      });
    }else{
      //获得特定省/直辖市的市/区
      if(req.query.currentPro!=undefined&&req.query.currentCity==undefined){
        let item=pro.filter(function(item){
          return item.name == req.query.currentPro; 
        })
        if(item[0]!=undefined&&item[0].sub!=undefined){
          let sub=item[0].sub;
          sub.forEach(element=>{
            list.push(element.name);
          })
        }else{
          list=[];
        }
      }else{
        //获得特定市的区
        let item=pro.filter(function(item){
          return item.name==req.query.currentPro;
        })
        if(item[0]!=undefined&&item[0].sub!=undefined){
          let sub=item[0].sub;
          let subItem=sub.filter(function(subItem){
            return subItem.name==req.query.currentCity;
          });
          if(subItem[0]!=undefined&&subItem[0].sub!=undefined){
            let subSubItem=subItem[0].sub;
            subSubItem.forEach(element=>{
              list.push(element.name);
            })
          }else{
            list=[];
          }
        }else{
          list=[];
        }
      }
    }
    res.send(list);