完整代码-Vue+Java后台实现省市区三级联动

源的世界

3610人浏览 · 2022-08-13 12:13:38

源的世界 · 2022-08-13 12:13:38 发布

最终效果图

图1
在这里插入图片描述

图2
在这里插入图片描述

1. 我是通过element-ui、java程序、mysql数据库实现的，可自由选择UI

2. CV大全，直接上完整代码

pom.xml

<?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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.3</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.hn.yuan</groupId>
    <artifactId>vue_demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>vue_demo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <!--spring项目启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--通过注解消除实际开发中的样板式代码-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <!--spring项目测试启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
        <!--mybatis-plus启动器-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.3.0</version>
        </dependency>
        <!--mysql数据库驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.35</version>
        </dependency>
        <!--代码生成器-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.3.0</version>
        </dependency>
        <!--模板引擎-->
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity-engine-core</artifactId>
            <version>2.1</version>
        </dependency>

        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.28</version>
            <scope>compile</scope>
        </dependency>

        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

application.yml 层

server:
  port: 8081

spring:
    datasource:
        driver-class-name: com.mysql.jdbc.Driver
        url: jdbc:mysql://localhost:3306/yuan_productlist?useUnicode=true&characterEncoding=UTF-8&useSSL=false
        username: root
        password: root

JAVA代码

package com.hn.yuan.city.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import lombok.experimental.Accessors;

import java.io.Serializable;
import java.util.List;

/**
 * <p>
 *
 * </p>
 *
 * @author XIAOCAO
 * @since 2022-08-10
 */
@Data
@Accessors(chain = true)
public class Chinas implements Serializable {

    private static final long serialVersionUID = 1L;

    /**
     * 主键
     */
    @TableId(value = "id", type = IdType.AUTO)
    private Long id;

    /**
     * 区域代码
     */
    private Long code;

    /**
     * 名称
     */
    private String name;

    /**
     * Pid
     */
    private Long pid;

    /**
     * 级别1省、2市、3县区
     */
    private String level;

    /*
     *  城市
     */
    @TableField(exist = false)
    private List<Chinas> cityList;

    /*
     *   县区
     */
    @TableField(exist = false)
    private List<Chinas> areaList;


    @TableField(exist = false)
    private List<Chinas> children;

}

@Service
public class ChinasServiceImpl extends ServiceImpl<ChinasMapper, Chinas> implements ChinasService {


    @Autowired
    private ChinasMapper chinasMapper;


    /*
     * Vue前端省市区对接
     */
    @Override
    public List<Chinas> getRegions() {

        // 全部省数据
        List<Chinas> chinas = chinasMapper.selectList(new QueryWrapper<Chinas>().eq("pid", 0L).eq("level", "1"));

        List<Long> pid = new ArrayList<>();
        chinas.forEach(item -> {
            pid.add(item.getCode());
        });
        //全部市数据
        List<Chinas> json1 = chinasMapper.selectList(new QueryWrapper<Chinas>().eq("level", "2").in("pid", pid));
        Map<Long,List<Chinas>> cdv=json1.stream().collect(Collectors.groupingBy(Chinas::getPid));

        chinas.stream().forEach(a ->a.setChildren(cdv.get(a.getCode())));

        List<Long> pid1=new ArrayList<>();
        json1.forEach(item ->{
            pid1.add(item.getCode());
        });
        //全部县 区数据
        List<Chinas> json2=chinasMapper.selectList(new QueryWrapper<Chinas>().eq("level","3").in("pid",pid1));
        Map<Long,List<Chinas>> cdv2=json2.stream().collect(Collectors.groupingBy(Chinas::getPid));
        chinas.stream().filter(a -> a.getChildren() != null).forEach(a -> a.getChildren().stream()
                .forEach(i -> i.setChildren(cdv2.get(i.getCode()))));

        return chinas;
    }
}

Vue代码

<template>
  <el-form ref="form" :model="form" label-width="100px">
    <el-form-item  class="selform">
      <el-cascader
        :options="CityInfo"
        v-model="form.selectedOptions"
        :change-on-select="true"
        :clearable="true"
        :filterable="true"
        @change="handleChange"
      >
      </el-cascader>
      <div>
        <span
          >所选地区code码：{{ form.city }}{{ form.erae
          }}{{ form.minerae }}</span
        >
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      CityInfo: [], //地区数据
      form: {
        city: "",
        erae: "",
        minerae: "",
        selectedOptions: [], //地区筛选数组
      },
    };
  },

  methods: {
    handleChange(value) {
      this.form.city = this.form.selectedOptions[0];
      this.form.erae = this.form.selectedOptions[1];
      this.form.minerae = this.form.selectedOptions[2];
    },

    getRegions() {
      var that = this;
      that.axios.get("http://localhost:8081/chinas/getRegions").then((res) => {
        const jsona = JSON.stringify(res.data.data); // 把接口返回的res.data数据转成字符串
        const jsonb = jsona.replace(/"code"/g, '"value"'); // 修改成你要的字段
        const jsonc = jsonb.replace(/"name"/g, '"label"');
        const endjson = JSON.parse(jsonc); //  把JSON 字符串转换成对象\
        console.log(endjson);   
        that.CityInfo = endjson;
      });
    },
  },
  created() {
    this.getRegions();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

3.接口请求：数据结构大致如下

在这里插入图片描述

4. Mysql数据表数据

百度网盘链接：https://pan.baidu.com/s/1fBIdWbBz_8bfjYpDRjR2rg
提取码：1101

简易实现，模拟数据测试：仅使用vue

vue 代码

<template>
  <el-form ref="form" :model="form" label-width="100px">
    <el-form-item  class="selform">
      <el-cascader
        :options="CityInfo"
        v-model="form.selectedOptions"
        :change-on-select="true"
        :clearable="true"
        :filterable="true"
        @change="handleChange"
      >
      </el-cascader>
      <div>
        <span
          >所选地区code码：{{ form.city }}{{ form.erae
          }}{{ form.minerae }}</span
        >
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      CityInfo: [], //地区数据
      form: {
        city: "",
        erae: "",
        minerae: "",
        selectedOptions: [], //地区筛选数组
      },
    };
  },

  methods: {
    handleChange(value) {
      this.form.city = this.form.selectedOptions[0];
      this.form.erae = this.form.selectedOptions[1];
      this.form.minerae = this.form.selectedOptions[2];
    },

    getRegions() {
        this.CityInfo = [{
		value: 110000, label: '北京', children: [
			{
				value: 110000, label: '北京市', children: [
					{ value: 110101, label: '东城区' },
					{ value: 110102, label: '西城区' },
					{ value: 110103, label: '崇文区' },
					{ value: 110104, label: '宣武区' },
					{ value: 110105, label: '朝阳区' },
					{ value: 110106, label: '丰台区' },
					{ value: 110107, label: '石景山区' },
					{ value: 110108, label: '海淀区' },
					{ value: 110109, label: '门头沟区' },
					{ value: 110110, label: '房山区' },
					{ value: 110111, label: '通州区' },
					{ value: 110112, label: '顺义区' },
					{ value: 110113, label: '昌平区' },
					{ value: 110114, label: '大兴区' },
					{ value: 110115, label: '怀柔区' },
					{ value: 110116, label: '平谷区' },
					{ value: 110117, label: '密云县' },
					{ value: 110118, label: '延庆县' }
				]
			}
		]
	}]
    },
  },
  created() {
    this.getRegions();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

在这里插入图片描述

各位看官》创作不易，点个赞！！！
诸君共勉：万事开头难，只愿肯放弃。

免责声明：本文章仅用于学习参考

实战模式-微信小程序组件实现省市区三级联动
 实战模式-微信小程序java后台+mysql实现省市区三级联动
 爬虫java模式-拉取省市区数据

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^