Информация об административном делении Китая JS library china-location

Node.js внешний интерфейс JavaScript React.js

Выбор адреса часто используется в некоторых проектах, особенно когда некоторым онлайн-торговым центрам необходимо указать адрес доставки, чаще всего используются три раскрывающихся списка провинций и городов. И вот однажды, когда мне понадобился адрес доставки в маленьком проекте, я вдруг обнаружил, что вроде бы нет готовой библиотеки (чтобы можно было напрямуюnpm install xxx), чтобы использовать 😰, а затем поискал на github и действительно обнаружил, что есть формат jsonНеобработанные данные,но структура на том же уровне,трудно отличить провинция это город или район.Хотя автор и предоставляет плагин jquery,он ведь используется на мобиле,и он лучше всего работать напрямую через js (это также можно использовать на сервере nodejs). Поэтому я решил переформатировать исходные данные во вложенный формат провинций и муниципалитетов, чтобы было легко через ID провинции получить список городов, а потом через ID города получить список районов. структура, которую хочет выпадающее меню.

Настройки структуры

Окончательная желаемая структура выглядит следующим образом:

{
    "320000": {
        "code": "320000",
        "name": "江苏省",
        "cities": {
            "320100": {
                "code": "320100",
                "name": "南京市",
                "districts": {
                    "320102": "玄武区",
                    "320104": "秦淮区",
                    //...
                }
            }
            //...
        }
    }
    //...
}

Мы используем первые 2 цифры кода для определения провинции, средние 2 цифры для определения города и последние 2 цифры для определения района, поэтому, если первые две цифры совпадают, это означает, что они принадлежат к одна и та же провинция, и средние 2 цифры одинаковы.Для одного и того же города и т. д. следует отметить, что для муниципалитетов, находящихся в непосредственном подчинении центрального правительства, таких как Шанхай и Пекин, провинция и город являются Шанхаем, код город 00, а город всего один, средние 2 кода следующих районов оба 01, тут Будьте внимательны при передаче данных.

Используйте библиотеку china-location

На основе вышеописанной логики пишется простой конверсионный js, и предоставляется простой API для вызова напрямую наружу 🍺. Сначала установите библиотекуchina-location:

npm install china-location --save

или

yarn add china-location

Затем внутри JS

//跟库一起绑定转换好的数据
import list from 'china-location/dist/location.json'
//in node.js
//const list = require('china-location/dist/location.json');

//ES6 import
import ChinaLocation from 'china-location';
//提供获取地址，修改地址API的类
//in node.js
//const ChinaLocation = require('china-location');

//初始化实例，并传入json数据
const location = new ChinaLocation(list);

//获取初始时当前地址包括code及中文名
//{
//  province: {code: '110000', name: '北京市'},
//  city: {code: '110000', name: '北京市'},
//  district: {code: '110101', name: '东城区'}
//}
const defaultLocation = location.getCurrentAddress();

//修改地址
const newProvince = '320000';
const newCity = '320500';
const newDistrict = '320509';
//一般使用联动下拉框，获取选中的code来更新地址，获得下一级的数据
location.changeProvince(newProvince);
location.changeCity(newCity);
location.changeDistrict(newDistrict);
//也可以一次性都修改
location.changeLocation(newProvince, newCity, newDistrict);
//{
//  province: {code: '320000', name: '江苏省'},
//  city: {code: '320500', name: '苏州市'},
//  district: {code: '320509', name: '吴江区'}
//}
//获取更新后的地址信息
const newLocation = location.getCurrentAddress();

API очень прост, инициализируйте, затем измените текущий адрес и, наконец, получите текущий адрес. С такой библиотекой мы можем легко выполнять логику, связанную с адресами, на странице браузера или на стороне node.js 🎉.

Используйте адресные данные, созданные самостоятельно

china-locationУпакованные данные могут быть не самыми последними, но исходные данные могли быть обновлены.Чтобы не повторять релизную версию, также можно использовать самые свежие данные.china-locationТакже предоставляется простой скрипт npm для преобразования локально настроенных необработанных данных, а затемnew ChinaLocation(latestData)При инициализации передайте данные json, которые вы преобразовали вручную. Первый клонРепозиторий необработанных данных: mumuy/data_location, или сразу положить внутрьlist.jsonСохраните его, затем git clonechina-location:

git clone git@github.com:JasonBoy/china-location.git
cd china-location

Используйте после входа в корневой каталог chian-locationreformatскрипт для конвертации:

npm run reformat -- /path/to/data_location/list.json

--Следующий параметр представляет собой локальный путь к исходным данным, которые будут выводиться вdistкаталог, внутриlocation.jsonа такжеlocation.min.json, а затем скопируйте его непосредственно в импорт вашего проекта и передайте его вnew ChinaLocation(data)Конструктор готов использовать последние данные.

Простой компонент React

Вышеупомянутое использование чистого JS.Конечно, если мы используем некоторые UI-библиотеки для разработки, такие как React, я также написал простой компонент Reactreact-china-location, Все стили являются собственными стилями раскрывающегося списка HTML, здесь используется только демонстрационное использование, вы можете создавать компоненты, которые соответствуют требованиям пользовательского интерфейса проекта в соответствии с этой логикой:

существуетreact-china-locationвнутриchina-locationразмещенpeerDependencesв, такchina-locationЕго также необходимо установить отдельно:

npm install china-location react-china-location --save

Затем в вашем JSX:

import locationData from 'china-location/dist/location.json';
import ChinaLocation from 'react-china-location';

class App extends React.Component {
  constructor (props) {
    super(props);

    this.onLocationChange = this.onLocationChange.bind(this);
    this.state = {
      currentLocation: {},
    }
  }

  onLocationChange (newLocation) {
    //{
    //  province: {code: '110000', name: '北京市'},
    //  city: {code: '110000', name: '北京市'},
    //  district: {code: '110101', name: '东城区'}
    //}
    console.log(newLocation);
    //更新到state
    this.setState({
      currentLocation: newLocation,
    });
  }

  render () {
    <div>
      <ChinaLocation list={locationData} onLocationChange={this.onLocationChange}/>
    </div>
  }
}

<ChinaLocation>в компонентеlistprop — это преобразованные данные json, аonLocationChangeОбратный вызов — это обратный вызов, когда пользователь выбирает другую провинцию или город, последние данные о местоположении будут переданы, а затем setState может быть обновлен для других пользовательских интерфейсов на странице.

В заключение

Надеюсь, это простоchina-locationБиблиотека может принести удобство другим небольшим партнерам, когда они используют адресную логику в проекте, чтобы ее можно было использовать «из коробки», не тратя время и не переписывая ее вручную, а уделяя больше времени собственной бизнес-логике.

Категории