ThinkPHP uniapp 本地JSON数据 实现省市区三级联动

ThinkPHP + uni-app + uni-data-picker

环境

ThinkPHP版本:3.2.3

PHP版本:5.6

vue版本: vue3

数据库：MySQL5.7.40

省市区数据源

数据源giteee（json文件）:city-china.json

数据库设计

1.uni-app的uni-data-picker每项数据之多只需要3个key:text,value,children
2.JSON文件与上下级关联的主要是code和parent_code，数据库可以从简设计
3.将数据保存至数据库，不需要每次都遍历一次JSON数组，消耗性能，同时分级查询省市区逻辑更清晰

数据库

省/直辖市

省/直辖市 的数据库只需要设计id,text,value,code四项就可以了，其中id主键

CREATE TABLE `你的数据库名`.`province_data` ( 
`id` INT(11) NOT NULL AUTO_INCREMENT , 
`text` VARCHAR(255) NOT NULL , 
`value` VARCHAR(255) NOT NULL ,
`code` VARCHAR(255) NOT NULL , PRIMARY KEY (`id`)
 );

市、区/县

市、区/县属于次级，数据库设计可以完全相同，但要记得做完事是3个数据表

CREATE TABLE `你的数据库名`.`city_data` ( 
`id` INT(11) NOT NULL AUTO_INCREMENT ,
`text` VARCHAR(255) NOT NULL , 
`value` VARCHAR(255) NOT NULL ,
`parent_code` VARCHAR(255) NOT NULL ,
`code` VARCHAR(255) NOT NULL , PRIMARY KEY (`id`)
);

ThinkPHP后端控制器

文件处理

将下载的data.json文件放在网站根目录下的随意文件夹内，我这边改名为city-china.json；
处理完成后可以将initCityData()在页面返回的JSON字符串保存下来，不再经过数据库
数据库在处理完JSON文件后的功能就是为前端所选的code匹配地名

public function execSaveCityData()
    {
   
        $file = json_decode(file_get_contents('./Uploads/documents/city-china.json'