springboot+thymeleaf+mysql实现省市联动下拉

最新推荐文章于 2023-09-08 00:06:32 发布

楚风岸影

最新推荐文章于 2023-09-08 00:06:32 发布

阅读量1.3k

点赞数 1

文章标签： mysql spring boot java

本文链接：https://blog.csdn.net/lcb9354/article/details/120131333

版权

本文档展示了如何使用Spring Boot、MyBatis Plus和Thymeleaf实现省市联动的下拉菜单功能。通过获取省份和城市数据，利用Ajax异步更新城市列表，实现了动态加载的效果。同时，利用session缓存数据，提高性能。

摘要由CSDN通过智能技术生成

一、数据准备

①数据获取：获取省市数据以及建表和插入表数据语句

二、实现编码

①效果图示：

在这里插入图片描述

②项目目录：

在这里插入图片描述

③代码实现：

controller：（核心）

CasCadeController

package com.cfay.controller;

import com.alibaba.fastjson.JSON;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.cfay.pojo.City;
import com.cfay.pojo.Province;
import com.cfay.service.CityService;
import com.cfay.service.ProvinceService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpSession;
import java.util.List;

@Controller
public class CasCadeController {
    @Autowired
    private ProvinceService provinceService;
    @Autowired
    private CityService cityService;

    //获取省份信息
    @GetMapping("/main")
    public String toIndex(Model model, HttpSession session){
        String proListSession = (String) session.getAttribute("proList");
        //省份数据已经有了
        if(proListSession != null && proListSession.length() != 0) {
            model.addAttribute("proList",proListSession);
            System.out.println("已存在省份信息");
        }else{
            //还没有省份数据
            List<Province> proList = provinceService.list();
            String strProList = JSON.toJSONString(proList);
            session.setAttribute("proList",strProList);
            model.addAttribute("proList",strProList);
        }
        return "main";
    }

    //获取省份对应的城市信息
    @GetMapping("/getCityMessage")
    @ResponseBody
    public String getCityMessage(String cityKey){
        //建议：这里可以把已经查出来的城市保存在session中，然后查询的时候先判断是否有这个数据，有的话，就直接从session中获取，没有的话再去查数据库，可参考上面的方式实现
        City city = new City();
        city.setPCode(cityKey);
        List<City> cityList = cityService.list(Wrappers.query(city));
        return JSON.toJSONString(cityList);
    }
}

Dao：

CityDao

package com.cfay.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.cfay.pojo.City;

public interface CityDao extends BaseMapper<City> {
}

ProvinceDao

package com.cfay.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.cfay.pojo.Province;

public interface ProvinceDao extends BaseMapper<Province> {
}

实体类：

City

package com.cfay.pojo;

import lombok.Data;

@Data
public class City {
    private Integer cId;
    private String cName;
    private String cCode;
    private String pCode;
}

Province

package com.cfay.pojo;

import lombok.Data;

@Data
public class Province {
    private Integer pId;
    private String pName;
    private String pCode;
}

service

CityService

package com.cfay.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.cfay.pojo.City;

public interface CityService extends IService<City> {
}

CityServiceImpl

package com.cfay.service;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.cfay.dao.CityDao;
import com.cfay.pojo.City;
import org.springframework.stereotype.Service;

@Service
public class CityServiceImpl extends ServiceImpl<CityDao,City> implements CityService {
}

ProvinceService

package com.cfay.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.cfay.pojo.Province;

public interface ProvinceService extends IService<Province> {
}

ProvinceServiceImpl

package com.cfay.service;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.cfay.dao.ProvinceDao;
import com.cfay.pojo.Province;
import org.springframework.stereotype.Service;

@Service
public class ProvinceServiceImpl extends ServiceImpl<ProvinceDao, Province> implements ProvinceService {
}

html

index

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>欢迎来到首页！</h2>
<a href="main">省市联动下拉测试</a>
</body>
</html>

main（核心实现）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="../js/jquery-3.5.1.min.js"></script>
<body>
<h2>选择你所在的城市：</h2>
<select name="select" id="provinceId">
    <option value="0">请选择省份-</option>
</select>

<select name="select" id="cityId">
    <option value="0">请选择城市-</option>
</select>
<script th:inline="javascript">
    var str = [[${proList}]];
    var provinceArray = JSON.parse(str);

    $(function () {
        getProvince();
        $("#provinceId").change(function () {
            getCity();
        })
    })

    //获取省份信息
    function getProvince() {
        for (var i = 0; i < provinceArray.length; i++) {
            $("#provinceId").append("<option value='" + provinceArray[i].pCode + "'>" + provinceArray[i].pName + "</option>");
        }
    }

    //获取地市信息
    function getCity() {
        var pCodeVal = $("#provinceId").val();
        //异步查询数据
        $.ajax({
            type: "GET",
            url: "getCityMessage",
            data: {cityKey: pCodeVal},
            dataType: "json",
            success: function (data) {
                $.each(data, function () {
                    //移除下拉框数据
                    $("#cityId").find("option").remove();
                    //添加下拉框数据
                    $("#cityId").prepend("<option value='0'>请选择城市-</option>");
                    for (var i = 0; i < data.length; i++) {
                        $("#cityId").append("<option value='" + data[i].cCode + "'>" + data[i].cName + "</option>");
                    }
                });
            }
        });
    }

</script>
</body>
</html>

properties文件

application

# 应用名称
spring.application.name=springboot-cascade
# 应用服务 WEB 访问端口
server.port=8080
#下面这些内容是为了让MyBatis映射
#指定Mybatis的Mapper文件
mybatis.mapper-locations=classpath:mappers/*xml
#指定Mybatis的实体目录
mybatis.type-aliases-package=com.cfay.mybatis.entity
# 数据库驱动：
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 数据源名称
spring.datasource.name=defaultDataSource
# 数据库连接地址
spring.datasource.url=jdbc:mysql://localhost:3306/region?serverTimezone=UTC&characterEncoding=utf8
# 数据库用户名&密码：
spring.datasource.username=root
spring.datasource.password=123456
# THYMELEAF (ThymeleafAutoConfiguration)
# 开启模板缓存（默认值： true ）
spring.thymeleaf.cache=false
# 检查模板是否存在，然后再呈现
spring.thymeleaf.check-template=true
# 检查模板位置是否正确（默认值 :true ）
spring.thymeleaf.check-template-location=true
#Content-Type 的值（默认值： text/html ）
spring.thymeleaf.content-type=text/html
# 开启 MVC Thymeleaf 视图解析（默认值： true ）
spring.thymeleaf.enabled=true
# 模板编码
spring.thymeleaf.encoding=UTF-8
# 要被排除在解析之外的视图名称列表，⽤逗号分隔
spring.thymeleaf.excluded-view-names=
# 要运⽤于模板之上的模板模式。另⻅ StandardTemplate-ModeHandlers( 默认值： HTML5)
spring.thymeleaf.mode=HTML5
# 在构建 URL 时添加到视图名称前的前缀（默认值： classpath:/templates/ ）
spring.thymeleaf.prefix=classpath:/templates/
# 在构建 URL 时添加到视图名称后的后缀（默认值： .html ）
spring.thymeleaf.suffix=.html
#启用驼峰
mybatis.configuration.map-underscore-to-camel-case=true

#控制台开启sql打印
logging.level.com.cfay.dao=debug

pom

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.cfay</groupId>
    <artifactId>springboot-cascade</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-cascade</name>
    <description>省市级联下拉的实现</description>

    <properties>
        <java.version>1.8</java.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <spring-boot.version>2.3.7.RELEASE</spring-boot.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.68</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-dependencies</artifactId>
                <version>${spring-boot.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.7.RELEASE</version>
                <configuration>
                    <mainClass>com.cfay.SpringbootCascadeApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

楚风岸影

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
springboot+thymeleaf+mysql实现省市联动下拉

一、数据准备①数据获取：获取省市数据以及建表和插入表数据语句二、实现编码①项目目录②代码实现controller：（核心）CasCadeControllerpackage com.cfay.controller;import com.alibaba.fastjson.JSON;import com.baomidou.mybatisplus.core.toolkit.Wrappers;import com.cfay.pojo.City;import com.cfay.pojo.Pro
复制链接

扫一扫