关于springboot+Jpa+vue三级联动_springboot整合jpa做三级联动-CSDN博客

本文链接：https://blog.csdn.net/qq_43402624/article/details/103026299

1.介绍

用vue项目我就不多介绍了,没安装过脚手架vue的可以参考脚手架vue安装
引入式vue只提供参考
3.在vue项目中首先在main.js中添加
import ElementUI from ‘element-ui’
import axios from ‘axios’
Vue.use(ElementUI)
Vue.prototype.axios = axios

在这里插入图片描述添加完以后应该和我的main.js是一样的
添加这两个组件主要是方便后面开发
添加完后还需要去下载组件

如果是webstorm在左下角运行
npm i element-ui -S
npm install axios -s

如果是用idea或者其他打开的vue项目
可以在dos命令中先去你项目的根目录,再运行这两个项目

2.vue页面代码

1.首先我用的是elementul框架,关于elementul框架大家如果没用过的可以了解一下,快速开发而且页面十分的美观elementul官网

在这里插入图片描述官网提供代码只需要cv就行

2.我先提供我的代码，因为比较少后续慢慢讲解

<template>
  <div>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options.data"
      :key="item.id"
      :label="item.name"
      :value="item.code">
    </el-option>
  </el-select>
    <el-select v-model="value1" placeholder="请选择">-->
      <el-option
        v-for="item in options1.data"
        :key="item.id"
        :label="item.name"
        :value="item.code">
      </el-option>
    </el-select>
    <el-select v-model="value2" placeholder="请选择">
    <el-option
    v-for="item in options2.data"
    :key="item.id"
    :label="item.name"
    :value="item.code">
    </el-option>
    </el-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: '',
        value: '',
        options1: '',
        value1: '',
        options2: '',
        value2: ''
      }
    },watch:{
      value(value){
        var i = this
        this.axios.get('http://localhost:8081/t-address-city/findcity', {
          params: {
            id: value,
          }
        })
          .then(function (SY) {
            if (SY!=null) {
             i.options1=SY;
            }
            else{
              alert("出问题了")
            }
            console.log(SY);
          })
          .catch(function(err){
            console.log(err);
          });
      },
      value1(value1){
        var i = this
        this.axios.get('http://localhost:8081/t-address-town/findtown', {
          params: {
            id: value1,
          }
        })
          .then(function (SY) {
            if (SY!=null) {
              i.options2=SY;
            }
            else{
              alert("出问题了")
            }
            console.log(SY);
          })
          .catch(function(err){
            console.log(err);
          });
      }
    },mounted:function () {
    this.city();
    },methods:{
        city:function () {
          var i=this
          this.axios.post('http://localhost:8081/t-address-province/findprovince')
            .then(function(res){
              if(res!=null){
              i.options=res;
              }
              else{
                alert("失败")
              }
              console.log(res);
            })
            .catch(function(err){
              console.log(err);
            });
        }
    }
  }
</script>

3.逻辑
1.首先我们加载页面肯定是需要先读取出省的数据
2.那么在vue中,页面加载运行函数我们需要在mounted中运行函数（如代码示例）
3.这样我们就可以从axios中从后台请求到一组省集合并且将值给到前端 i.options=res;
4.在我们循环依次添加数据时,注意 v-for=“item in options.data” 我们得到的集合已经到了options属性里面去了,但是我们读取数据时需用这个集合.data才能得到数据,然后
:key=“item.id” key值
:label=“item.name” 显示的值
:value=“item.code”> value值(后面有讲到)
id name code 分别都是返回回来的数据集中的属性
在这里插入图片描述
5.这样我们第一个省的数据集也就成功得到
6.当我们随意在选择器选择一个省时,我们可以用到监听watch,比失去焦点这些方法好用,主要就是选择内容时就可以实现调用方法(具体百度),主要是和v-model绑定
当v-model中使得数据变化时,watch监听就会自动调用方法，方法名和v-model其中的名字一致,其中有两个参数 value oldvalue(我只用了一个) 字面意思也就是新值和旧值(具体百度watch),我这也就是用到了新值也就是当我选择一个省时(因为数据变化自动调用函数),他就会把我选择省:value=“item.code”> 绑定的值返回给我,然后我以此为参数请求后台返回我第二组数据(第三组数据大致相同); 在这里插入图片描述
前端的代码大致讲完,一些其他的东西如果学过html,js应该是明白的不一一细讲

4.后台代码(jpa+springboot)
Dao层
在这里插入图片描述在每个Dao层继承JpaRepository
注解repositoty一般是因为实现类未注入没找到冒红线(我个人是因为这个加这个注解)

查询所有省的方法因为sql不是很复杂可以用Jpa自带的方法,
JpaRepository提供了很多方法,十分方便具体大家自己了解