<template>
<div>
<router-link to="/studentAdd">添加学生</router-link> <br/>
<table>
<tr>
<td>班级</td>
<td>
<select v-model="studentVo.cid" value="">
<option value="">--请选择班级--</option>
<option v-for="(clas,index) in classes" :key="index" :value="clas.cid">{{clas.cname}}</option>
</select>
</td>
<td>省份</td>
<td>
<select v-model="studentVo.pid" >
<option value="">--请选择省--</option>
<option v-for="(province,index) in provinces" :key="index" :value="province.pid">{{province.pname}}</option>
</select>
</td>
<td>姓名</td>
<td>
<input type="text" v-model="studentVo.sname" placeholder="请输入姓名" >
</td>
<td>年龄</td>
<td>
<input type="text" v-model="studentVo.startAge" placeholder="请输入开始年龄" >--<input type="text" v-model="studentVo.endAge" placeholder="请输入结束年龄" >
</td>
<td><input type="button" value="查询" @click="condition(1)"></td>
</tr>
</table>
<table border="1">
<tr>
<td>编号</td>
<td>学生ID</td>
<td>班级</td>
<td>省份</td>
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
<td>性别</td>
<td>婚否</td>
<td>操作</td>
</tr>
<tr v-for="(student,index) in pageInfo.list" :key="index">
<td>{{index+1}}</td>
<td>{{student.sid}}</td>
<td>{{student.classes.cname}}</td>
<td>{{student.provinces.pname}}</td>
<td>{{student.sname}}</td>
<td>{{student.age}}</td>
<td>{{student.birthday}}</td>
<td>{{student.gender==1?"男":"女"}}</td>
<td>{{student.marray==1?"已婚":(student.marray==2?"未婚":"保密")}}</td>
<td>操作</td>
</tr>
</table>
<div>
<a href="#" v-for="(num,index) in pageInfo.pages" :key="index" @click="condition(num)"> 第{{num}}页 </a>
跳转到第<input type="text" v-model="pageNum" @keydown.enter="go()">页
</div>
</div>
</template>
<script>
// 导入axios
import axios from 'axios'
export default {
data(){
return{
//条件查询数据 studentVo
studentVo:{
cid:'',
pid:'',
sanme:'',
startAge:'',
endAge:''
},
pageNum:1, //页数
pageSize:2, //条数
pageInfo:[], //分页数据
classes:[], //班级集合
provinces:[] //地区集合
}
},
methods:{
查询所有
condition(pageNum){
this.pageNum =pageNum;
var url = `http://localhost:8081/student/condition/${this.pageSize}/${pageNum}`
axios.post(url,this.studentVo)
.then((response)=>{
if(response.data.code==1){
this.pageInfo=response.data.data
}else{
alert(response.data.message)
}
})
.catch((error)=>{
alert(error)
})
},
go方法 用于跳转页数 parseInt的使用是防止非数字的出现报异常
go(){
var newNum = parseInt(this.pageNum)
if(newNum==this.pageNum){
this.condition(newNum)
}
},
//查询班级
findClasses(){
var url = "http://localhost:8081/classes"
axios.get(url)
.then((response)=>{
if(response.data.code==1){
this.classes=response.data.data
}else{
alert(response.data.message)
}
})
.catch((error)=>{
alert(error)
})
},
//查询地区
findProvinces(){
var url = "http://localhost:8081/province"
axios.get(url)
.then((response)=>{
if(response.data.code==1){
this.provinces=response.data.data
}else{
alert(response.data.message)
}
})
.catch((error)=>{
alert(error)
})
}
},
mounted(){
this.condition(1)
this.findClasses()//查询班级
this.findProvinces()//查询地区
}
}
</script>
<style>
</style>
