实现省份城市级联树

Vue+ElementUI+Servlet+Mysql 实现前端界面中展现省份城市级联树

 

 

1. 设计一张能够存储省份、城市、区域 信息的的表（包含 ID、ParentId、name三个字段）往表中插入 10 条左右的数据

2. 创建 Servlet,用于接收客户端的请求，调用 JDBC，将第 1 步表中的数据生成如下格式的 Json 串返回给客户端

 1 [{
 2 label: '湖南',
 3 children: [{
 4 　　label: '长沙',
 5 　　children: [{
 6 　　　　label: '天心区'
 7 　　　　}]
 8 　　}]
 9 }, {
10 label: '湖北',
11 children: [{
12 　　label: '武汉',
13 　　children: [{
14 　　　　label: '汉阳区'
15 　　　　}]
16 　　}, { label: '荆州市',
17 　　children: [{
18 　　　　label: '荆州区'
19 　　},{
20　　　　 label: '沙市区'
21 　　}]
22 　}]
23 }]

 

3. 参 考 ElementUI 中 的 Tree 树 形 组 件 https://element.eleme.cn/#/zhCN/component/tree，在页面打开时发请求给 Servlet,在 Servlet 返回第二步得到的 JSON 串，并 将省份、城市、区域按树形结构展现在前端界面中