今天我们来做一个前后端分离的省市区三级联动,后端项目使用springboot快速构建,数据访问层使用springdata-jpa,前端页面使用vue+element UI的组件,HTTP请求使用axios,接下来我们开始。
<properties>
<java.version>1.8</java.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<mysql.version>8.0.11</mysql.version>
</properties>
<dependencies>
<!--springdata-jpa启动器-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!--lombok插件-->
<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>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
<!--配置项目阿里仓库地址提高下载速度-->
<repositories>
<repository>
<id>aliyunmaven</id>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
</repository>
<repository>
<id>spring-milestones</id>
<name>Spring Milestones</name>
<url>https://repo.spring.io/milestone</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
</repositories>
server:
port: 8888 #端口配置
spring:
devtools:
restart:
enabled: false #启动热部署
datasource: #这里需要更改为自己数据库
url: jdbc:mysql://127.0.0.1:3306/demo?useSSL=false&serverTimezone=GMT%2B8
username: root
password: sasa
driver-class-name: com.mysql.cj.jdbc.Driver
jpa: #配置springdata-jpa
hibernate:
ddl-auto: update # 第一次建表create 后面用update,要不然每次重启都会新建表
show-sql: true #控制台显示SQL语句
到此我们项目构建完成。
注:实体类中使用@Data,@NoArgsConstructor,@AllArgsConstructor,为lombok插件,请自行安装使用。
@Data
@Entity
@Table(name = "areas")
@NoArgsConstructor
@AllArgsConstructor
/**
* 地区实体类
*/
public class Areas implements Serializable {
/**
* 地区id
*/
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "area_id", unique = true, nullable = false, length = 6)
private Integer areaId;
/**
* 区域父id
*/
@Column(name = "parent_id")
private Integer parentId;
/**
* 区域类型
*/
@Column(name = "area_type")
private Integer areaType;
/**
* 区域名称
*/
@Column(name = "area_name")
private String areaName;
}
注:继承JpaRepository
package com.demo.address.repository;
import com.demo.address.pojo.Areas;
import org.springframework.data.jpa.repository.JpaRepository;
import java.util.List;
/**
* 地址查询接口
*/
public interface AddressRepository extends JpaRepository<Areas,Integer>{
/**
* 根据父Id查询地区
* @param parentId 父Id
* @return 相同父id的地区
*/
List<Areas> findAllByParentIdEquals(Integer parentId);
}
package com.demo.address.service;
import com.demo.address.pojo.Areas;
/**
* 地址服务接口
*/
import java.util.List;
public interface AddressService {
List<Areas> findAddressByParentId(Integer parentId);
}
package com.demo.address.service.impl;
import com.demo.address.pojo.Areas;
import com.demo.address.repository.AddressRepository;
import com.demo.address.service.AddressService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
/**
* 描述:
* 地址服务接口的实现类
*/
@Service
public class AddressServiceImpl implements AddressService {
@Autowired
private AddressRepository addressRepository;
@Override
public List<Areas> findAddressByParentId(Integer parentId) {
return addressRepository.findAllByParentIdEquals(parentId);
}
}
注:ResponseEntity 标识整个http相应:状态码、头部信息、响应体内容(spring)
package com.demo.address.web;
import com.demo.address.pojo.Areas;
import com.demo.address.service.AddressService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import java.util.List;
/**
* 地址请求控制层
*/
@RestController
public class AddressController {
@Autowired
private AddressService addressService;
/**
* 根据父Id查询地址
* @param parentId 父ID
* @return 所有子地区
*/
@GetMapping("address")
public ResponseEntity<List<Areas>> findAddressByParentId(
@RequestParam(value = "parentId", defaultValue = "1") Integer parentId
) {
return ResponseEntity.ok(addressService.findAddressByParentId(parentId));
}
}
当我们的项目真正分离之后此时我们产生了一个跨域问题,此时我们使用一个CORS的跨域解决方案
package com.demo.address.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter() {
//1.添加CORS配置信息
final CorsConfiguration config = new CorsConfiguration();
//1) 允许的域,不要写*,否则cookie就无法使用了
config.addAllowedOrigin("*");
//2) 是否发送Cookie信息
config.setAllowCredentials(true);
//3) 允许的请求方式
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
// 4)允许的头信息
config.addAllowedHeader("*");
//5,有效时长
config.setMaxAge(3600L);
//2.添加映射路径,我们拦截一切请求,
final UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
//3.返回新的CorsFilter.
return new CorsFilter(configSource);
}
}
首先我们使用vue-cli脚手架创建一个Vue项目
安装element 这里我推荐使用npm安装,它能更好地和 webpack 打包工具配合使用。(npm命令:npm i element-ui -S)
前端HTTP请求我们使用axios,(注:vue2.0之后,就不再对vue-resource更新,而是推荐使用axios。基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用。npm命令:npm install --save axios vue-axios)
安装完成之后在程序入口main.js中全局引入
import axios from 'axios'
import VueAxios from 'vue-axios'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import moment from 'moment/moment'
Vue.use(VueAxios, axios)
Vue.use(ElementUI)
//配置axios默认访问地址
axios.defaults.baseURL = "http://localhost:8888/"
接下来我们编写vue文件及请求数据方法(注:使用的是ElementUI的下拉菜单组件)
<template>
<div>
<el-select v-model="provinceCode" placeholder="省份">
<el-option
v-for="item in AddressProvince" //循环取出所有省份,其下同理
:key="item.areaId"
:label="item.areaName" //省份名称
:value="item.areaId" //该省份id
></el-option>
</el-select>
<el-select v-model="cityCode" placeholder="城市">
<el-option
v-for="item in AddressCity"
:key="item.areaId"
:label="item.areaName"
:value="item.areaId"
></el-option>
</el-select>
<el-select v-model="value" placeholder="区域">
<el-option
v-for="item in AddressTown"
:key="item.areaId"
:label="item.areaName"
:value="item.areaId"
></el-option>
</el-select>
</div>
</template>
<script>
const axios = require("axios");
export default {
name: 'Hello',
data () {
return {
AddressCity: [],
AddressProvince: [],
AddressTown: [],
provinceCode: '',
cityCode: '',
value: ''
}
},
watch: {
provinceCode: { //监听当前地区值的变化,于与上方地区值进行了双向绑定
deep:true, //深度监听
handler () {
//每当值省份值改变时其下地区值进行清空
this.AddressCity = [];
this.AddressTown = [];
this.cityCode = "";
this.value = "";
this.findByprovinceCode();
}
},
cityCode: {
deep:true, //深度监听
handler () {
this.findBycityCode();
}
}
},
created () {
this.init();
},
methods: {
init () {
//加载时发起请求获取所有省份值
axios.get("address?parentId=").then(({data}) => {
this.AddressProvince = data;
})
.catch(error => {
console.log(error);
});
},
findByprovinceCode () {
//获取当前省份值id,获取该省份下城市
axios.get("address?parentId=" + this.provinceCode).then(({data}) => {
this.AddressCity = data;
})
.catch(error => {
console.log(error);
});
},
findBycityCode () {
//获取当前城市值id,获取该城市下区域
axios.get("address?parentId=" + this.cityCode).then(({data}) => {
this.AddressTown = data;
})
.catch(error => {
console.log(error);
});
},
}
}
</script>