SpringBoot+HTML+ Mybatis 简单三级联动

本次内容Spring boot + Mybatis +html集成的三级联动
数据库链接: https://www.ssfiction.com/sqljc/616147.html

这是整个项目的架构:

我这里不是前后台分离，所以在一个项目中完成的，请不要介意并且为了节省时间用的是注解写的Mybatis

配置文件

application.yml配置

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver #数据源配置
    username: root  #数据库账户
    password: 123456  #数据库密码
    url: jdbc:mysql://localhost:3306/spring #URL路径
thymeleaf:
  prefix: classpath:/templates  #prefix：指定模板所在的目录
  check-template: false         
  check-template-location: false
  cache: false  #cache: 是否缓存，开发模式下设置为false，避免改了模板还要重启服务器，线上设置为true，可以提高性能。
  suffix:  .html  #后缀因为我用的是html
  #encoding: UTF-8
  #content-type: text/html
  mode: HTML5
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #开启日志
  global-config:
    banner: false #隐藏图标

这里切记改成自己的数据库，这里的characterEncoding是设置中文字符，serverTimezone这个是设置时区，设置为中国时区，端口号可改可不改

实体类

城市

package com.sjld.pojo;

import lombok.Data;

/**
 * com.sjld.pojo
 * liu
 * 2022/11/22
 * sjld
 * 2022年11月22日16时53分
 */
@Data
public class City {
    Integer id;
    String code1;
    String name1;
    String name;
    String provincecode;
}

省份

package com.sjld.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

/**
 * com.sjld.pojo
 * liu
 * 2022/11/22
 * sjld
 * 2022年11月22日16时53分
 */
@Data
@TableName("t_address_province")//与数据库表名一致
public class Province {
    @TableId(type= IdType.AUTO)//自动增长
    Integer id;
    String code;
    String name;
}

区域

package com.sjld.pojo;

import lombok.Data;

/**
 * com.sjld.pojo
 * liu
 * 2022/11/22
 * sjld
 * 2022年11月22日16时52分
 */
@Data
public class Town {
    Integer id;
    String code;
    String name;
    String citycode;
    String name1;
}

DAO层

package com.sjld.Dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.sjld.pojo.City;
import com.sjld.pojo.Province;
import com.sjld.pojo.Town;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Controller;

import java.util.List;

/**
 * com.sjld.Dao
 * liu
 * 2022/11/22
 * sjld
 * 2022年11月22日16时54分
 */
@Mapper
public interface CityDao  {
    @Select("SELECT * FROM `t_address_province` ")
    List<Province>all();//查询省份
    @Select("SELECT *,b.name as name1,b.code as code1 FROM `t_address_province` a,`t_address_city` b where a.code=b.provincecode and b.provincecode=#{pid}")
    List<City>all1(Integer id);//根据省份id查询城市
    @Select("SELECT *,a.name as name1 FROM `t_address_town` a,`t_address_city` b where a.citycode=b.`code`  and a.citycode=#{id}")
    List<Town>all2(Integer id);//根据城市id查询区域
}

Controller层

package com.sjld.web;

import com.sjld.Dao.CityDao;
import com.sjld.Dao.ProvinceDao;
import com.sjld.pojo.Province;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import java.util.List;

/**
 * com.sjld.web
 * liu
 * 2022/11/22
 * sjld
 * 2022年11月22日17时53分
 */
@RestController
public class ProvinceController {
    @Autowired
    CityDao cityDao;
    
@RequestMapping("/all")
    public List<Province> all(){
        List<Province> all = cityDao.all();
    System.out.println(all);
        return all;
    }
    @RequestMapping("all1")
    public List all1(@RequestParam("pid") Integer pid){
        List all = cityDao.all1(pid);
        return all;
    }
    @RequestMapping("all2")
    public List all2(@RequestParam("id") Integer ccode){
        List all = cityDao.all2(ccode);
        return all;
    }
    @RequestMapping("index")
    @ResponseBody
    public ModelAndView a(){
    ModelAndView modelAndView=new ModelAndView();
    modelAndView.setViewName("index");
    return modelAndView;
    }
    @RequestMapping("add.html")
    @ResponseBody
    public ModelAndView aa(){
        ModelAndView modelAndView=new ModelAndView();
        modelAndView.setViewName("add");
        return modelAndView;
    }

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<script src="/jquery-3.3.1.min.js"></script>
<body>
<form action="">
    <select class="a"></select>
    <select class="b"></select>
    <select class="c"></select>
</form>

<script>
    $(function () {
        $.getJSON('http://localhost:8080/all', '', function(data) {
            console.log(data)
            for ( var a = 0; a < data.length; a++) {
                var b = "<option value="+data[a].code+">" + data[a].name+ "</option>";
                $(".a").append(b);
            };
        });
        $(".a").blur(function() {
            var z = $(this).val();
            $.getJSON('http://localhost:8080/all1', 'pid=' + z, function(data) {
                console.log(data)
                $(".b").children().remove();
                $(".c").children().remove();
                for ( var a = 0; a < data.length; a++) {
                    var b = "<option value="+data[a].code1+">"+ data[a].name1 + "</option>";
                    $(".b").append(b);
                }
            });
        });
        $(".b").blur(function() {
            var c = $(this).val();
            $.getJSON('http://localhost:8080/all2', 'id=' + c, function(data) {
                console.log(data)
                $(".c").children().remove();
                for ( var a = 0; a < data.length; a++) {
                    var city = "<option value="+data[a].code+">"+ data[a].name + "</option>";
                    $(".c").append(city);
                }
            });
        });
    })
</script>
</body>
</html>

这里注意jquery文件的路径存放很重要，为此我报了很久的错误
如果没有数据的话可以 console.log(data)查数据是否对应最后放一个效果图

效果图