Nodejs 全国省市乡镇村地区五级联动

Nodejs 全国省市乡镇村地区五级联动

个人写的一个全国省市乡镇村地区五级联动， 在这分享出来，有兴趣的可以将我的代码改简单点。

http://pan.baidu.com/s/1bnw7MYr

4 回复

好的，以下是一个关于Node.js实现全国省市乡镇村地区五级联动的示例。这个示例将展示如何使用Node.js以及前端JavaScript来实现一个动态的五级联动选择器。

后端（Node.js）

首先，我们需要创建一个Node.js服务器，它将提供省市乡镇村的数据。

安装依赖

npm init -y
npm install express body-parser

创建服务器文件 server.js

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

// 假设我们有一个数据结构存储省市区镇村信息
const regions = {
    "北京": {
        "市辖区": {
            "东城区": ["东华门街道", "景山街道"],
            "西城区": ["新街口街道", "月坛街道"]
        }
    },
    // 更多省份数据...
};

app.get('/api/regions', (req, res) => {
    const { level, parent } = req.query;
    let data = regions;

    if (level && parent) {
        for (let i = 0; i < parseInt(level); i++) {
            data = data[parent];
        }
    }

    res.json(data);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

前端（HTML + JavaScript）

接下来，我们将创建一个简单的HTML页面，并使用JavaScript来处理用户的选择。

创建HTML文件 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五级联动选择器</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="province" name="province">
        <option value="">请选择省份</option>
    </select>
    <select id="city" name="city">
        <option value="">请选择城市</option>
    </select>
    <select id="district" name="district">
        <option value="">请选择区县</option>
    </select>
    <select id="town" name="town">
        <option value="">请选择乡镇</option>
    </select>
    <select id="village" name="village">
        <option value="">请选择村庄</option>
    </select>

    <script>
        $(document).ready(function() {
            function loadRegions(level, parent) {
                $.get('/api/regions', { level, parent }, function(data) {
                    const selectId = level === '1' ? '#province' : level === '2' ? '#city' : level === '3' ? '#district' : level === '4' ? '#town' : '#village';
                    const $select = $(selectId);
                    $select.empty().append('<option value="">请选择</option>');
                    Object.keys(data).forEach(key => {
                        $select.append(`<option value="${key}">${key}</option>`);
                    });
                });
            }

            $('#province').on('change', function() {
                loadRegions('2', $(this).val());
            });

            $('#city').on('change', function() {
                loadRegions('3', $(this).val());
            });

            $('#district').on('change', function() {
                loadRegions('4', $(this).val());
            });

            $('#town').on('change', function() {
                loadRegions('5', $(this).val());
            });

            loadRegions('1', '');
        });
    </script>
</body>
</html>

总结

以上代码展示了如何使用Node.js和前端JavaScript实现一个五级联动的选择器。后端提供了API来获取不同级别的区域数据，而前端则通过AJAX请求这些数据并动态更新下拉菜单。你可以根据需要进一步优化和扩展这个示例。


不好意思，楼主，我来宣传一下自己写的插件。 这是用angularjs实现的三级联动。

可以，哪里可以下载

针对“Nodejs 全国省市乡镇村地区五级联动”的需求，我们可以使用一个包含所有地区信息的数据结构，并通过选择器实现联动效果。以下是一个简单的示例，展示如何在前端（例如：React 或 Vue.js）与后端（Node.js + Express）之间协作实现这一功能。

后端（Node.js + Express）

首先，我们需要创建一个包含全国地区数据的 JSON 文件，然后在 Node.js 中读取并提供给前端使用。

地区数据文件（data/areas.json）

[
    {
        "name": "北京市",
        "children": [
            {"name": "东城区"},
            {"name": "西城区"}
        ]
    },
    {
        "name": "上海市",
        "children": [
            {"name": "浦东新区"},
            {"name": "黄浦区"}
        ]
    }
]

后端代码（server.js）

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

// 读取地区数据
let areasData;
try {
    areasData = require('./data/areas.json');
} catch (error) {
    console.error('Error reading areas data:', error);
}

app.get('/api/areas', (req, res) => {
    res.json(areasData);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

前端（例如：React）

接下来，在前端组件中处理获取地区数据，并实现联动效果。

React 组件（AreaSelector.js）

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function AreaSelector() {
    const [provinces, setProvinces] = useState([]);
    const [selectedProvince, setSelectedProvince] = useState(null);
    const [cities, setCities] = useState([]);

    useEffect(() => {
        // 获取省份数据
        axios.get('/api/areas')
            .then(response => setProvinces(response.data));
    }, []);

    const handleProvinceChange = (e) => {
        const province = e.target.value;
        setSelectedProvince(province);
        // 根据选中的省份获取城市数据
        const selectedProvinceData = provinces.find(p => p.name === province);
        setCities(selectedProvinceData ? selectedProvinceData.children : []);
    };

    return (
        <div>
            <select onChange={handleProvinceChange}>
                {provinces.map(province => (
                    <option key={province.name} value={province.name}>{province.name}</option>
                ))}
            </select>
            <select>
                {cities.map(city => (
                    <option key={city.name} value={city.name}>{city.name}</option>
                ))}
            </select>
        </div>
    );
}

export default AreaSelector;

上述代码展示了如何使用 Node.js 和 React 实现省市区三级联动的基本逻辑。根据具体需求，您可以进一步扩展到四级或五级联动。

回到顶部