SpringBoot-Jpa+Vue的省市区三级联动
1.首先是数据库设计
省级表：
市级表：
区县表：
省市区三张表通过code相连
2.接下来是项目结构
entity层
package com.jxy.address.entity;
import io.swagger.models.auth.In;
import lombok.Data;
import javax.persistence.*;
import java.io.Serializable;
@Data
@Entity
@Table(name = "t_address_province")
public class TAddressProvince implements Serializable {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name = "id")
private Integer id;
@Column(name = "code")
private String code;
@Column(name = "name")
private String name;
}
package com.jxy.address.entity;
import lombok.Data;
import javax.persistence.*;
import java.io.Serializable;
@Data
@Entity
@Table(name = "t_address_city")
public class TAddressCity implements Serializable {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name = "id")
private Integer id;
@Column(name = "code")
private String code;
@Column(name = "name")
private String name;
@Column(name = "provincecode")
private String provincecode;
}
package com.jxy.address.entity;
import lombok.Data;
import javax.persistence.*;
import java.io.Serializable;
@Data
@Entity
@Table(name = "t_address_town")
public class TAddressTown implements Serializable {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name = "id")
private Integer id;
@Column(name = "code")
private String code;
@Column(name = "name")
private String name;
@Column(name = "citycode")
private String citycode;
}
dao层：这里使用的是Jpa
package com.jxy.address.dao;
import com.jxy.address.entity.TAddressProvince;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
@Repository
public interface TAddressProvinceReponsitory extends JpaRepository<TAddressProvince,Integer> {
}
package com.jxy.address.dao;
import com.jxy.address.entity.TAddressCity;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface TAddressCityReponsitory extends JpaRepository<TAddressCity,Integer> {
List<TAddressCity> findByProvincecode(String provinceCode);
}
package com.jxy.address.dao;
import com.jxy.address.entity.TAddressTown;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface TAddressTownReponsitory extends JpaRepository<TAddressTown,Integer> {
List<TAddressTown> findByCitycode(String cityCode);
}
service层：调用dao层
package com.jxy.address.service;
import com.jxy.address.dao.TAddressCityReponsitory;
import com.jxy.address.dao.TAddressProvinceReponsitory;
import com.jxy.address.dao.TAddressTownReponsitory;
import com.jxy.address.entity.TAddressCity;
import com.jxy.address.entity.TAddressProvince;
import com.jxy.address.entity.TAddressTown;
import com.jxy.address.entity.request.ResponseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Service
@Transactional
public class AddressService {
@Autowired
TAddressCityReponsitory tAddressCityReponsitory;
@Autowired
TAddressProvinceReponsitory tAddressProvinceReponsitory;
@Autowired
TAddressTownReponsitory tAddressTownReponsitory;
public ResponseResult province() {
List<TAddressProvince> provinceList = tAddressProvinceReponsitory.findAll();
return new ResponseResult(200,"成功",provinceList);
}
public ResponseResult city(String provinceCode) {
List<TAddressCity> cityList = tAddressCityReponsitory.findByProvincecode(provinceCode);
return new ResponseResult(200,"成功",cityList);
}
public ResponseResult town(String cityCode) {
List<TAddressTown> townList = tAddressTownReponsitory.findByCitycode(cityCode);
return new ResponseResult(200,"成功",townList);
}
}
这里我新建了一个类用于作为返回值
package com.jxy.address.entity.request;
/**
* Created by Administrator on 2019/11/4.
*/
public class ResponseResult {
private Integer state;
private String msg;
private Object data;
public ResponseResult() {
this.state = 200;
this.msg = "成功";
}
public ResponseResult(Integer state, String msg) {
this.state = state;
this.msg = msg;
}
public ResponseResult(Integer state, String msg, Object data) {
this.state = state;
this.msg = msg;
this.data = data;
}
public Integer getState() {
return state;
}
public void setState(Integer state) {
this.state = state;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
后端还要有一些配置：解决接下来的跨域问题
新建一个Configuration实现WebMvcConfigurer接口
package com.jxy.address.config;
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@org.springframework.context.annotation.Configuration
public class Configuration implements WebMvcConfigurer {
// 初始化 CorsConfiguration 对象并设置允许的域名、请求头部信息和请求方式
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1 允许任何域名使用
corsConfiguration.addAllowedHeader("*"); // 2 允许任何头
corsConfiguration.addAllowedMethod("*"); // 3 允许任何方法（post、get 等）
return corsConfiguration;
}
/**
* 创建 CorsFilter 对象
* @return CorsFilter
*/
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new
UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); //拦截所有请求
return new CorsFilter(source);
}
}
定义Api接口：用于接下来可以用Swigger测试
package com.jxy.address.api;
import com.jxy.address.entity.request.ResponseResult;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
@Api(value="三级联动接口")
public interface addressApi {
@ApiOperation("查询省级")
public ResponseResult province();
@ApiOperation("查询市级")
public ResponseResult city(String provinceCode);
@ApiOperation("查询县级")
public ResponseResult town(String cityCode);
}
接下来就是controller层：实现刚刚定义的Api接口
package com.jxy.address.controller;
import com.jxy.address.api.addressApi;
import com.jxy.address.entity.request.ResponseResult;
import com.jxy.address.service.AddressService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class addressController implements addressApi {
@Autowired
AddressService addressService;
@Override
@GetMapping("/province")
public ResponseResult province() {
return addressService.province();
}
@Override
@GetMapping("/city")
public ResponseResult city(String provinceCode) {
return addressService.city(provinceCode);
}
@Override
@GetMapping("/town")
public ResponseResult town(String cityCode) {
return addressService.town(cityCode);
}
}
还有pom.xml：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.17</version>
</dependency>
<!-- https://mvnrepository.com/artifact/commons-io/commons-io -->
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.6</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.apache.commons/commons-lang3 -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.9</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper-spring-boot-starter -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>1.2.12</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.10</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.projectlombok/lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.10</version>
<scope>provided</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.1</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.2.0.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-jpa -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
<version>2.2.0.RELEASE</version>
</dependency>
<!--引入pageHelper分页插件-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.0.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger2 -->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>2.7.0</version>
</dependency>
<!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger-ui -->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>2.7.0</version>
</dependency>
application.yml配置：
server:
port: 8887
spring:
datasource:
url: jdbc:mysql://localhost:3306/address?useUnicode=true&characterEncoding=UTF-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=UTC
username: root
password:
driver-class-name: com.mysql.jdbc.Driver
type: com.alibaba.druid.pool.DruidDataSource
#initialization-mode: always
#数据源其他配置
initialSize: 5
minIdle: 5
maxActive: 20
maxWait: 60000
timeBetweenEvictionRunsMillis: 60000
minEvictableIdleTimeMillis: 300000
validationQuery: SELECT 1 FROM DUAL
testWhileIdle: true
testOnBorrow: false
testOnReturn: false
poolPreparedStatements: true
# 配置监控统计拦截的filters，去掉后监控界面sql无法统计，'wall'用于防火墙
filters: stat,wall,log4j
maxPoolPreparedStatementPerConnectionSize: 20
useGlobalDataSourceStat: true
connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500
jpa:
show-sql: true
database: mysql
pagehelper:
helper‐dialect: mysql
后端代码就这么多------------------------
接下来就是前端：
首先就是下载element-ui和axios，点击左下角
输入下载axios指令：npm install --save axios vue-axios
输入element-ui下载指令：npm i element-ui -S
下载完成之后在main.js中引入即可
// element-ui 引入文件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 注册 VueAxios, axios
Vue.use(VueAxios, axios)
Vue.use(ElementUI)
接下来就是解决跨域问题：
在config目录下的index.js下配置
配置完成之后就是vue页面，这里页面使用了element组件，大家可以去element-ui官网去寻找这些组件
<template>
<div>
<el-select v-model="provinceVal" placeholder="请选择省份">
<el-option
v-for="item in province"
:key="item.code"
:label="item.name"
:value="item.code">
</el-option>
</el-select>
<el-select v-model="cityVal" placeholder="请选择市">
<el-option
v-for="item in city"
:key="item.id"
:label="item.name"
:value="item.code">
</el-option>
</el-select>
<el-select v-model="townVal" placeholder="请选择">
<el-option
v-for="item in town"
:key="item.id"
:label="item.name"
:value="item.code">
</el-option>
</el-select>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "address",
data(){
return{
provinceVal:'',
cityVal:'',
townVal:'',
province:[],
city:[],
town:[]
}
},
created:function () {
axios.get("/addressapi/province").then((result)=>{
this.province=result.data.data
})
},
watch:{
provinceVal(){
axios.get("/addressapi/city",{params:{"provinceCode":this.provinceVal}}).then((result)=>{
this.cityVal=result.data.data[0].code;
this.city=result.data.data
})
},
cityVal(){
axios.get("/addressapi/town",{params:{"cityCode":this.cityVal}}).then((result)=>{
this.townVal=result.data.data[0].code
this.town=result.data.data
})
}
}
}
</script>
<style scoped>
</style>
在这里就写完了，接下来看看效果吧
