关于springboot+Jpa+vue三级联动

1.介绍

1. 用vue项目我就不多介绍了,没安装过脚手架vue的可以参考脚手架vue安装
2. 引入式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.我先提供我的代码，因为比较少 后续慢慢讲解

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提供了很多方法,十分方便具体大家自己了解

controller层

controller基本都是一样的 举例一个

其中注解@RequestParam可以从前端this.axios.get 取得参数
@CroossOrigin解决跨域问题 因为我是前后端分离 当然也可以写一个解决跨域的类 这个是一样的 不冲突 看自己
@Resource 和@Autowides不冲突 都是注入看自己用哪个了

5.结尾
因为是第一次写博客,然后肯定有很多不足,包括很多地方可能讲解的不是很清楚,不喜勿喷,记录自己的学习生活