SpringData-jpa+Vue实现一个前后端分离的省市区三级联动

最新推荐文章于 2023-12-05 23:02:29 发布

一个BUG搞一天。

最新推荐文章于 2023-12-05 23:02:29 发布

阅读量1.6k

点赞数 11

分类专栏：笔记文章标签： springboot springdata-jpa vue

本文链接：https://blog.csdn.net/ZhouXianBiao/article/details/103041009

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前后端分离的省市区三级联动

今天我们来做一个前后端分离的省市区三级联动，后端项目使用springboot快速构建，数据访问层使用springdata-jpa，前端页面使用vue+element UI的组件，HTTP请求使用axios，接下来我们开始。

一、首先我们先创建一个springboot项目

选择New Project之后我们选择创建一个springboot项目（创建过程不一一说明，这里我们略过。）
添加依赖（我在下面给出我的pom.xml）

	<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>

配置application.yml文件

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;

}

三、创建Repository

注：继承JpaRepository<T,ID>，Repository是什么？

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);
}

四、创建service层

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跨域配置编写

当我们的项目真正分离之后此时我们产生了一个跨域问题，此时我们使用一个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);
    }
}

八、最终项目结构如下：

在这里插入图片描述

后端构建完成之后我们启动springboot项目，测试一下

注：测试后的数据如下。

在这里插入图片描述

测试完成之后，接下来我们编写前端代码

前端采用：Vue+element UI

首先我们使用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>

编写完成之后我们开始运行测试！

总结：

此刻我们已经完成了这一个简单的Demo，其实做起来没什么难度，主要是为了更加熟练的使用现阶段掌握的技术，为了今后更深入的学习做铺垫，让我们一起朝着技术大牛靠近，加油朋友们！

一个BUG搞一天。

关注

11
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
SpringData-jpa+Vue实现一个前后端分离的省市区三级联动

前后端分离的省市区三级联动今天我们来做一个前后端分离的省市区三级联动，后端项目使用springboot快速构建，数据访问层使用springdata-jpa，前端页面使用vue+element UI的组件，HTTP请求使用axios，接下来我们开始。一、首先我们先创建一个springboot项目选择New Project之后我们选择创建一个springboot项目（创建过程不一一说明，...
复制链接

扫一扫