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提供了很多方法,十分方便具体大家自己了解
controller层
controller基本都是一样的 举例一个
其中注解@RequestParam可以从前端this.axios.get 取得参数
@CroossOrigin解决跨域问题 因为我是前后端分离 当然也可以写一个解决跨域的类 这个是一样的 不冲突 看自己
@Resource 和@Autowides不冲突 都是注入看自己用哪个了
5.结尾
因为是第一次写博客,然后肯定有很多不足,包括很多地方可能讲解的不是很清楚,不喜勿喷,记录自己的学习生活