个人技术总结——在VUE中使用element-china-area-data

[221900435-陈雅莹]

这个作业属于哪个课程	软件工程实践2022年春-F班
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	个人技术总结
其他参考文献	无

目录

• 一、技术概述
• 二、技术详述
• 1、项目开发过程遇到的“坑”
• 2、采取的解决方案
• 3、实现过程
• 三、遇到的问题和解决过程
• 四、总结
• 五、参考文献

一、技术概述

技术描述：在VUE中使用element-china-area-data的中国省市区级联数据编写城市选择器。

学习原因：人工输入城市数据工作量过于大且十分冗余，并且错误率高并且容易丢失部分城市数据。

技术难点：如何将城市对应的区域码和文字正常转换。

二、技术详述

1、项目开发过程遇到的“坑”

在团队项目中，我负责的是前端部分中的看吧、搜吧和搜贴页面。其中，看吧页面有一个同城筛选的功能和发表帖子时选择城市地区的功能需要实现。因此，我需要构建一个选择城市的选择器。在开始时，我选择自行编写省份和城市数据进入，后来发现，中国地域通过省市区进行划分，其中城市数据过于繁杂，若是通过自己编写城市数据进入，工作量过于大，且准确率不高，容易出错。以下为初始效果图：

2、采取的解决方案

因此，我在了解了element-ui存在中国省市区级联数据element-china-area-data的基础上，决定利用该数据编写城市选择器。使用element-china-area-data的中国省市区级联数据编写城市选择器。以下为解决效果图：

3、实现过程

（以下主要针对同城搜索功能进行描述）
流程图：

（1）安装

npm install element-china-area-data -S

（2）引入

import { regionData, CodeToText, TextToCode } from 'element-china-area-data'

其中：

①regionData是省市区三级联动数据（不带“全部”选项）
②CodeToText是个大对象，属性是区域码，属性值是汉字。
③textToCode是个大对象，属性是汉字，属性值是区域码。

（3）将城市代码转为文字

相关用法：

①CodeToText[‘110000’]输出北京市。

②TextToCode[‘北京市’].code输出110000；TextToCode[‘北京市’] [‘市辖区’].code输出110100,TextToCode[‘北京市’] [‘市辖区’] [‘朝阳区’].code输出110105。

数据示例：codeStr=‘110000,110100,110101’, codeArray=[110000,110100,110101]

getCodeToText (codeStr, codeArray) {
    if (null === codeStr && null === codeArray) {
        return null;
    } 
    else if (null === codeArray) {
        codeArray = codeStr.split(",");
    }
    let area = "";
    switch (codeArray.length) {
      case 1:
        area += CodeToText[codeArray[0]];
        break;
      case 2:
        area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
        break;
      case 3:
        area +=
            CodeToText[codeArray[0]] +
            "/" +
            CodeToText[codeArray[1]] +
            "/" +
            CodeToText[codeArray[2]];
        break;
      default:
        break;
    } 
    console.log(area)
    this.addForm.area = area
    return area;
}

（4）设置城市级联选择器

其中：

data() {
  return{
    cityOptions: regionData,//同城搜索的级联选择器的选择范围为已导入的中国省市区地域数据
    citySearch:[],//用来保存同城搜索的级联选择器的已选择数据   
  }
}
...
methods:{
     handleChange (value) {
      console.log(value)
      this.getCodeToText(null, value)
    },   
}

（5）进行同城筛选时，将区域码转化为文字进行筛选。

//进行同城筛选
getCitySearch() {
  this.cityfilter=true;
  var city=CodeToText[this.citySearch[2]];
  if (city) {
    this.filterpostdata=this.postdata.filter(data => {
      return Object.keys(data).some(key => {
        return String(data['city'])==city?true:false;
      })
    })
  }
},

三、遇到的问题和解决过程

问题1：不了解CodeToText和TextToCode的相关用法

解决过程：

①CodeToText是个大对象，属性是区域码，属性值是汉字。如：CodeToText[‘110000’]输出北京市。
②textToCode是个大对象，属性是汉字，属性值是区域码。如：TextToCode[‘北京市’].code输出110000；TextToCode[‘北京市’] [‘市辖区’].code输出110100,TextToCode[‘北京市’] [‘市辖区’] [‘朝阳区’].code输出110105。

根据以上相关示例进行理解，如果还不理解，可以通过页面console.log进一步验证数据进行理解使用。如观察console.log(CodeToText[this.citySearch[2]]);在页面输出的数据是否符合预期结果。

问题2：级联选择器选中区域存储数据为其区域码而非文字，如何使用选择器进行筛选

解决过程：citySearch存储城市选择器的已选择部分，存储形式为所选地区的区域码，如选择北京市/市辖区/朝阳区，则citySearch为['110000'] ['110100'] ['110105']。而我们在数据库存储的形式为省市区最后的区的文字。同城筛选也是依据区名进行筛选。因此，可以使用CodeToText()将区域码转为文字，其中区级对应的区域码应为citySearch[2]。因此我们可以定义city来存储区级名，如：var city=CodeToText[this.citySearch[2]];。接着通过filter得到筛选出的相同城市的帖子数据。

this.postdata.filter(data=>{return Object.keys(data).some(key => {
        return String(data['city'])==city?true:false;
      })
    })

四、总结

在对项目进行开发实现功能时，应该仔细思考考虑是否有更省力，更便捷，更有效率的方法实现。同时，我应该多去了解element-ui的相关组件库，以便将来进行开发的时候，能更好地进行使用。同时，关于页面功能的实现，数据的传递，我也可以使用console.log进行很好的测试。

五、参考文献

Element UI 中国省市区级联数据