前言
省市县是常见的地区分类方式，很多前端开发工作中需要使用到相关数据。如果每次都手动输入这些数据，不仅费时费力，而且容易出现错误。因此，市面上也有很多省市县数据的 npm 包供开发者使用。
其中，province-city-county-server 这一 npm 包，不仅提供了省市县数据，还能快速搭建省市县数据的服务端，相对其他类似 npm 包更加实用且易于使用。本篇文章将详细介绍如何使用该 npm 包。
安装
可以使用 npm 或 yarn 进行安装，例如以下命令：
npm i province-city-county-server
或者
yarn add province-city-county-server
使用
搭建服务端
安装好之后，在项目中配置一个启动服务端的文件。例如，我们在根目录下新建一个 server.js 文件，并编写如下代码：
const ProvinceCityCountyServer = require('province-city-county-server');
const server = new ProvinceCityCountyServer({
port: 3000,
cache: false,
});
server.start();其中 port 表示服务端口号，cache 为 true 表示启用缓存功能，可以大幅降低数据更新时的等待时间。如果数据并不经常更新，可以考虑启用缓存。
我们使用 const server = new ProvinceCityCountyServer({...}) 创建一个 ProvinceCityCountyServer 实例，然后调用 server.start() 启动服务端，服务端即可在指定的端口号上运行。
API
服务端一旦启动，即可使用该服务提供的 API。
获取省列表
访问 /provinces 接口，即可获取所有省份的列表，如下代码所示：
fetch('http://localhost:3000/provinces').then(response => response.json()).then(data => {
console.log(data);
});输出如下：
-- -------------------- ---- -------
-
-
------- ------
----- --------
--
-
------- ------
----- --------
--
---
-
------- ----------
----- --------
--
-
------- ------
----- --------
-
-获取市列表
访问 /cities/:provinceId 接口，即可获取某个省份下所有城市的列表，其中 :provinceId 表示省份的 ID，如下代码所示：
fetch('http://localhost:3000/cities/110000').then(response => response.json()).then(data => {
console.log(data);
});输出如下：
-- -------------------- ---- -------
-
-
------- ------
----- --------
--
-
------- ----
----- --------
-
-获取县/区列表
访问 /counties/:cityId 接口，即可获取某个城市下所有县/区的列表，其中 :cityId 表示城市的 ID，如下代码所示：
fetch('http://localhost:3000/counties/110100').then(response => response.json()).then(data => {
console.log(data);
});输出如下：
-- -------------------- ---- -------
-
-
------- ------
----- --------
--
-
------- ------
----- --------
--
---
-
------- ------
----- --------
-
-获取某个省份下所有城市及其所辖县/区
访问 /provinces/:provinceId/cities 接口，即可获取某个省份下所有城市及其所辖县/区的列表，其中 :provinceId 表示省份的 ID，如下代码所示：
fetch('http://localhost:3000/provinces/110000/cities').then(response => response.json()).then(data => {
console.log(data);
});输出如下：
-- -------------------- ---- -------
-
-
------- ------
----- ---------
----------- -
-
------- ------
----- --------
--
-
------- ------
----- --------
--
---
-
------- ------
----- --------
-
-
--
-
------- ----
----- ---------
----------- -
---
-
-
-完整示例
为了更好地演示如何使用 province-city-county-server，以下是一个完整的示例，该示例演示了如何在页面中使用 fetch API 获取省市县数据，并根据数据生成省市县联动选择器：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------
-------
------
------- --------------------
------- -------------------------
---------
------- ----------------
------- -------------------------
---------
------- ------------------
------- --------------------------
---------
--------
----- -------------- - ------------------------------------------
----- ---------- - --------------------------------------
----- ------------ - ----------------------------------------
-------- -------------- --------- -
------------------------ -- -------------------------- -- -
---------------
---
-
-------- ----------------- -
-------------------------------------------- ---- -- -
--------------------- -- -
----- ------ - ---------------------------------
------------ - ------------
----------- - --------------
---------------------------
---
---
-
-------- ----------------------- -
------------------------------------------------------- ---- -- -
----------------------------------------------- -- ---------------------------
-- ------------ --- -- -
-------
-
----------------- -- -
----- ------ - ---------------------------------
------------ - --------
----------- - ----------
-----------------------
---
--------------------------
---
-
-------- --------------------- -
----------------------------------------------------- ---- -- -
------------------------------------------------- -- -----------------------------
-- ------------ --- -- -
-------
-
------------------- -- -
----- ------ - ---------------------------------
------------ - ----------
----------- - ------------
-------------------------
---
---
-
----------------------------------------- -- -- -
----- ---------- - ---------------------
-- ----------- --- ----- -
-------
-
------------------------
---
------------------------------------- -- -- -
----- ------ - -----------------
-- ------- --- ----- -
-------
-
----------------------
---
------------------
---------
-------
-------在启动 server.js 后，使用任意 web 服务器（如 live-server）在本地访问该页面，即可查看该示例效果。
总结
本文介绍了如何使用 province-city-county-server 这一 npm 包，快速搭建省市县数据的服务端，并获取该服务提供的 API。同时，本文也演示了如何根据数据生成省市县联动选择器。该 npm 包使用方便，适合快速开发省市县相关功能的前端开发人员使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601181e8991b448de04b