springboot+mybatis+thymleft 省份的三级联动

Zealones

于 2022-11-23 11:36:02 发布

阅读量154

点赞数

文章标签： mybatis spring boot java

本文链接：https://blog.csdn.net/Zealones/article/details/127997000

版权

第一步：创建Spring-boot项目：

第二步选择项目所需要的jar包：

第三步：完成项目创建之后，配置 application.yml文件（我是将application.properties 重构成 application.yml 两者功能一样的）

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/ctiy?serverTimezone=Asia/Shanghai
    username: root
    password: root

server:
  port: 8081

mybatis:
  mapper-Locations: classpath:mapper/*Mapper.xml

  thymeleaf:
    mode: HTML5
    cache: false
    suffix: .html
    prefix: classpath:/templates/

logging:
  level:
    com.cskt.springbootdemo4.mapper: trace

第四步：创建项目所需要的 pojo层 dao（mapper）层 service层以及 conterller层

controller层：

package com.cskt.springbootdemo4.controller;

import com.cskt.springbootdemo4.service.proservice;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import com.cskt.springbootdemo4.pojo.City;
import com.cskt.springbootdemo4.pojo.Province;
import com.cskt.springbootdemo4.pojo.Town;

import java.util.List;


@RestController
public class procontroller {
    @Autowired
    private proservice ps;

    @GetMapping("findall")
    public List<Province> findall(){
        List<Province> list=ps.findall();
        return list;
    }

    @GetMapping("findbypid")
    public List<City> findBypid(@RequestParam("pid") Integer pcode){
        List<City> list=ps.findallBypid(pcode);
        return list;
    }

    @GetMapping("findbycid")
    public List<Town> findBycid(@RequestParam("cid") Integer ccode){
        List<Town> list=ps.findallBycid(ccode);
        return list;
    }

}

mapper层：

package com.cskt.springbootdemo4.mapper;

import com.cskt.springbootdemo4.pojo.City;
import com.cskt.springbootdemo4.pojo.Province;
import com.cskt.springbootdemo4.pojo.Town;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;
@Mapper
public interface proMapper {
    //查询所有省份
    public List<Province> findall();
    //根据省份code查找市级
    public List<City> findallBypid(int pcode);
    //根据市级code查找区
    public List<Town>  findallBycid(int ccode);

}

ProMapper.xml

<?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.cskt.springbootdemo4.mapper.proMapper">
    <resultMap type="com.cskt.springbootdemo4.pojo.City" id="pp">
        <id column="id" property="id" />
        <result column="code" property="code" />
        <result column="name" property="name" />
        <result column="provinceCode" property="provinceCode" />
        <association property="p" javaType="com.cskt.springbootdemo4.pojo.Province">
            <id column="id" property="id" />
            <result column="code" property="code" />
            <result column="name" property="name" />
        </association>
    </resultMap>
    <resultMap type="com.cskt.springbootdemo4.pojo.Town" id="t">
        <id column="id" property="id" />
        <result column="code" property="code" />
        <result column="name" property="name" />
        <result column="cityCode" property="cityCode" />
        <association property="city" javaType="com.cskt.springbootdemo4.pojo.City">
            <id column="id" property="id" />
            <result column="code" property="code" />
            <result column="name" property="name" />
            <result column="provinceCode" property="provinceCode" />
        </association>
    </resultMap>
    <select id="findall" resultType="com.cskt.springbootdemo4.pojo.Province">
        select * from t_address_province
    </select>
    <select id="findallBypid" resultMap="pp">
        SELECT * from t_address_city cc JOIN t_address_province p on p.`code`=cc.provinceCode where cc.provinceCode=#{pid}
    </select>
    <select id="findallBycid" resultMap="t">
        SELECT * from t_address_town t JOIN t_address_city cc on t.cityCode =cc.`code`	where t.cityCode=#{cid}
    </select>
</mapper>

pojo： City类

package com.cskt.springbootdemo4.pojo;

import lombok.Data;


@Data
public class City {
    private int id;

    private String code;

    private String name;

    private String provinceCode;

    private Province p;
}

Province类

package com.cskt.springbootdemo4.pojo;

import lombok.Data;


@Data
public class Province {
    private int id;

    private String code;

    private String name;
}

Town类

package com.cskt.springbootdemo4.pojo;

import lombok.Data;


@Data
public class Town {
    private int id;

    private String code;

    private String name;

    private String cityCode;

    private City city;
}

service层

ProvinceService:

package com.cskt.springbootdemo4.service;

import com.cskt.springbootdemo4.pojo.City;
import com.cskt.springbootdemo4.pojo.Province;
import com.cskt.springbootdemo4.pojo.Town;

import java.util.List;

public interface proservice {
    //查询所有省份
    public List<Province> findall();
    //根据省份code查找市级
    public List<City> findallBypid(int pcode);
    //根据市级code查找区
    public List<Town>  findallBycid(int ccode);

}

ProvinceServiceImpl:

package com.cskt.springbootdemo4.service.impl;

import com.cskt.springbootdemo4.mapper.proMapper;
import com.cskt.springbootdemo4.pojo.Town;
import com.cskt.springbootdemo4.service.proservice;
import com.cskt.springbootdemo4.pojo.City;
import com.cskt.springbootdemo4.pojo.Province;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;


@Service
public class proserviceimpl implements proservice{
    @Autowired
    private proMapper pm;
    @Override
    public List<Province> findall() {
        return pm.findall();
    }

    @Override
    public List<City> findallBypid(int pcode) {
        return pm.findallBypid(pcode);
    }

    @Override
    public List<Town> findallBycid(int ccode) {
        return pm.findallBycid(ccode);
    }

}

utill（工具类）

PageController

package com.cskt.springbootdemo4.util;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class PageController {
   @RequestMapping("/{page}.html")
   public String toPage(@PathVariable("page") String page){
       return page;
   }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
<div align="center">
    <h1>三级联动查询 省 市 区</h1>
<form action="">

    <select class="a"></select>
    <select class="b"></select>
    <select class="c"></select>
</form>
</div>
<script src="/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $.getJSON('http://localhost:8081/findall', '', function(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();
            alert(z)
            $.getJSON('http://localhost:8081/findbypid', '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].code+">"+ data[a].name + "</option>";
                    $(".b").append(b);
                }
            });
        });
        $(".b").blur(function() {
            var c = $(this).val();
            $.getJSON('http://localhost:8081/findbycid', 'cid=' + 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>