省市县下拉框的逻辑以及多表联查的实例

一. 省市县的逻辑开发。

1、准备:

1.1. 要求:

做一个选择省市县的开发:
在这里插入图片描述

1.2 数据库表:

在这里插入图片描述

2. 逻辑:

首先根据这张表,证明,我们所有的数据都将放到这张表里面,包含省市县。但有上级行政区划这一个字段,证明我们需要通过这个字段来判断,他的等级。(如:没有上级行政区划,则为省,有一级为市,有两级为县)根据这个去进行操作。

3. 方法

1.通过自连接的方式来进行查询全部表,然后就能获得分级的表,然后返回数据。
2.根据code直接查询出全部的表进行逻辑操作,通过递归,构造树形结构(超级厉害)
所以我们直接介绍第二种:

3.1 创建实体类

首先,你可能需要修改 Area 实体类,以便于支持递归结构。添加一个 children 属性来存储子节点:

package com.example.demo.model;

import java.util.ArrayList;
import java.util.List;

public class Area {
    
    private String code; // 行政区划编码
    private String name; // 行政区划名称
    private String parentCode; // 上级行政区划编码
    private List<Area> children = new ArrayList<>(); // 子级行政区划列表

    // Getters and Setters
}

3.2 数据访问层

在数据访问层中,提供一个方法来根据父级编码获取所有子级数据:

package com.example.demo.repository;

import com.example.demo.model.Area;
import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;

public interface AreaRepository extends JpaRepository<Area, String> {
    List<Area> findByParentCode(String parentCode);
}

3.3 实现递归方法

在服务层中实现递归方法来构建完整的层级结构:

package com.example.demo.service;

import com.example.demo.model.Area;
import com.example.demo.repository.AreaRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;

@Service
public class AreaService {

    @Autowired
    private AreaRepository areaRepository;

    // 递归方法来构建层级结构
    public List<Area> getAllAreas() {
        List<Area> allAreas = areaRepository.findAll();
        return buildHierarchy(allAreas, null);
    }

    // 构建层级结构的方法
    private List<Area> buildHierarchy(List<Area> allAreas, String parentCode) {
        List<Area> result = new ArrayList<>();
        for (Area area : allAreas) {
            if ((parentCode == null && area.getParentCode() == null) || (parentCode != null && parentCode.equals(area.getParentCode()))) {
                // 找到子级,递归构建子级树
                area.setChildren(buildHierarchy(allAreas, area.getCode()));
                result.add(area);
            }
        }
        return result;
    }
}

3.4 控制器实现

在控制器中调用服务层的方法,并返回构建好的层级结构数据:

package com.example.demo.controller;

import com.example.demo.model.Area;
import com.example.demo.service.AreaService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;

@RestController
@RequestMapping("/api/areas")
public class AreaController {

    @Autowired
    private AreaService areaService;

    @GetMapping
    public List<Area> getAllAreas() {
        return areaService.getAllAreas();
    }
}

3.5 前端处理

前端接收到的数据将是一个嵌套的树形结构,你可以用来构建下拉框或其他需要显示层级结构的控件。例如,使用 JavaScript 来处理并渲染树形结构数据:

// 假设你使用 jQuery
$(document).ready(function() {
    $.get('/api/areas', function(data) {
        // 处理和渲染树形结构
        renderTree(data);
    });
});

function renderTree(data) {
    // 递归渲染树形结构
    function renderNode(node) {
        let html = '<option value="' + node.code + '">' + node.name + '</option>';
        if (node.children && node.children.length > 0) {
            node.children.forEach(child => {
                html += renderNode(child);
            });
        }
        return html;
    }
    
    let html = '<select>' + data.map(renderNode).join('') + '</select>';
    $('#treeContainer').html(html);
}

二、多表联查(给我干红温了)

1. 出现了问题

在我写sql的时候,开始对应着每个表之间对应的字段开始写join on语句,但还是查不出数据,原来,我们需要保证我们的每个字段都有数据,才会返回查询, 所以我去修改我需要表的数据,发现是公共表,我他们写入数据不一致,导致的,这就是开发的时候用服务器连数据库的弊端,我直接把服务器的表复制到我本地,开始开发。还有,xml里面一直报错:
在这里插入图片描述

2 sql语句的书写

注意: 我们使用join on一定要对应好字段,才能保证数据的一致性。
sql:

SELECT  t1.term_sn,t1.out_term_type_name,t1.om_term_info_id,t3.bill_type,t3.ship_notice_no,t3.ship_time,
        t4.custom_name,t3.take_address,t3.branch_name,t3.bank_contacts,t3.bank_tel,t4.sales_uid,t1.ship_state,
        t1.out_region_id,t6.user_name,t1.creat_time
from om_term_info t1
         join out_term_type t2 on t1.out_term_type_name= t2.name
         join out_term_ship t3 on t1.om_term_info_id=t3.om_term_info_id
         join out_custom_info t4 on  t3.custom_no =t4.custom_no
         join out_region t5 on t1.out_region_id=t5.code
         join  sys_user t6 on t1.user_id=t6.user_id;

3 mapper.xml 中:

我们返回数据的时候,需要定义一个<resultMap,然后注意id和type,对应不好很容易出错。还有就是表字段和属性的对应,要细心。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.hengyin.ship.mapper.HomePageMapper">
    <resultMap id="HomePageResult" type="com.hengyin.ship.domain.Homepage">
        <id column="term_sn" property="termSn" jdbcType="VARCHAR"/>
        <result column="out_term_type_name" property="outTermTypeName" jdbcType="VARCHAR"/>
        <result column="om_term_info_id" property="omTermInfoId" jdbcType="BIGINT"/>
        <result column="bill_type" property="billType" jdbcType="VARCHAR"/>
        <result column="ship_notice_no" property="shipNoticeNo" jdbcType="VARCHAR"/>
        <result column="ship_time" property="shipTime" jdbcType="TIMESTAMP"/>
        <result column="custom_name" property="customName" jdbcType="VARCHAR"/>
        <result column="take_address" property="takeAddress" jdbcType="VARCHAR"/>
        <result column="branch_name" property="branchName" jdbcType="VARCHAR"/>
        <result column="bank_contacts" property="bankContacts" jdbcType="VARCHAR"/>
        <result column="bank_tel" property="bankTel" jdbcType="VARCHAR"/>
        <result column="sales_uid" property="salesUid" jdbcType="BIGINT"/>
        <result column="ship_state" property="shipState" jdbcType="BIGINT"/>
        <result column="out_region_id" property="outRegionId" jdbcType="BIGINT"/>
        <result column="user_name" property="userName" jdbcType="VARCHAR"/>
        <result column="creat_time" property="createTime" jdbcType="TIMESTAMP"/>
    </resultMap>

<!--    <select id="slectHomePage" resultType="com.hengyin.ship.domain.Homepage">-->
    <select id="slectHomePage" resultMap="HomePageResult">
        SELECT  t1.term_sn, t1.out_term_type_name, t1.om_term_info_id, t3.bill_type,
                t3.ship_notice_no, t3.ship_time, t4.custom_name, t3.take_address,
                t3.branch_name, t3.bank_contacts, t3.bank_tel, t4.sales_uid,
                t1.ship_state, t1.out_region_id, t6.user_name, t1.creat_time
        FROM om_term_info t1
                 JOIN out_term_type t2 ON t1.out_term_type_name = t2.name
                 JOIN out_term_ship t3 ON t1.om_term_info_id = t3.om_term_info_id
                 JOIN out_custom_info t4 ON t3.custom_no = t4.custom_no
                 JOIN out_region t5 ON t1.out_region_id = t5.code
                 JOIN sys_user t6 ON t1.user_id = t6.user_id;
    </select>
</mapper>

4 解决前面报的错:

提示我们limit 10的错误 ,我找半天也没找到我哪里写limit10,最有趣的是,我第一次问gpt,他告诉我让我加上limit10,然后还报错,又发给他,他又说我加了limit 10 哈哈哈哈哈哈哈。
最后的原因是我忘记了再controller中我加入了分页查询的工具类导致的,下次要思维活跃一点。

  • 11
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
您好!关于Java下拉框填写省市,一般的做法是通过前端页面使用三个下拉框,分别表示选择省、市、/区。用户先选择省份,然后根据省份的不同,动态加载该省份下的所有城市,用户再选择一个城市,再根据城市的不同,加载该城市下的所有/区,用户最后选择一个/区。 具体实现方法可以使用Ajax异步加载数据,通过后台查询数据库获取对应的省市/区数据,然后在前端页面上动态生成下拉框选项,实现联动效果。 下面是一个简单的示例代码,供参考: HTML页面: ``` <select id="province" name="province"> <option value="">请选择省份</option> </select> <select id="city" name="city"> <option value="">请选择城市</option> </select> <select id="county" name="county"> <option value="">请选择/区</option> </select> ``` JavaScript代码: ``` $(function() { // 加载省份数据 $.ajax({ url : 'getProvinceData',// 后台获取省份数据的接口 type : 'GET', dataType : 'json', success : function(data) { var options = '<option value="">请选择省份</option>'; $(data).each(function() { options += '<option value="' + this.provinceCode + '">' + this.provinceName + '</option>'; }); $('#province').html(options); } }); // 省份下拉框变化时,加载城市数据 $('#province').change(function() { var provinceCode = $(this).val(); if (provinceCode != '') { $.ajax({ url : 'getCityData',// 后台获取城市数据的接口 type : 'GET', dataType : 'json', data : { provinceCode : provinceCode }, success : function(data) { var options = '<option value="">请选择城市</option>'; $(data).each(function() { options += '<option value="' + this.cityCode + '">' + this.cityName + '</option>'; }); $('#city').html(options); $('#county').html('<option value="">请选择/区</option>'); } }); } else { $('#city').html('<option value="">请选择城市</option>'); $('#county').html('<option value="">请选择/区</option>'); } }); // 城市下拉框变化时,加载/区数据 $('#city').change(function() { var cityCode = $(this).val(); if (cityCode != '') { $.ajax({ url : 'getCountyData',// 后台获取/区数据的接口 type : 'GET', dataType : 'json', data : { cityCode : cityCode }, success : function(data) { var options = '<option value="">请选择/区</option>'; $(data).each(function() { options += '<option value="' + this.countyCode + '">' + this.countyName + '</option>'; }); $('#county').html(options); } }); } else { $('#county').html('<option value="">请选择/区</option>'); } }); }); ``` 后台Java代码: ``` // 获取省份数据 @RequestMapping(value = "/getProvinceData", method = RequestMethod.GET) @ResponseBody public List<Province> getProvinceData() { List<Province> provinceList = provinceService.findAllProvinces(); return provinceList; } // 获取城市数据 @RequestMapping(value = "/getCityData", method = RequestMethod.GET) @ResponseBody public List<City> getCityData(@RequestParam("provinceCode") String provinceCode) { List<City> cityList = cityService.findCitiesByProvinceCode(provinceCode); return cityList; } // 获取/区数据 @RequestMapping(value = "/getCountyData", method = RequestMethod.GET) @ResponseBody public List<County> getCountyData(@RequestParam("cityCode") String cityCode) { List<County> countyList = countyService.findCountiesByCityCode(cityCode); return countyList; } ``` 需要注意的地方是,省市/区的数据需要进行持久化存储,可以使用数据库或者其他方式进行存储。同时,需要在后台代码中提供相应的接口,供前端页面进行数据获取。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值