springBoot第三天
1.list.vue
<template> <div> <el-card style="margin-bottom:15px"> <el-form ref="queryFormRef" :model="queryForm" label-width="80px"> <!-- 横向排列省市区 --> <el-row :gutter="10"> <el-col :span="8"> <el-form-item label="所在省" prop="province"> <el-select v-model="queryForm.province" @change="queryCityList"> <el-option label="请选择" value=""></el-option> <el-option v-for="area in area.provinceList" :key="area.name" :label="area.name" :value="area.id"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="所在市" prop="city"> <el-select v-model="queryForm.city" @change="queryAreaList"> <el-option label="请选择" value=""></el-option> <el-option v-for="city in area.cityList" :key="city.name" :label="city.name" :value="city.id"></el-option> </el-select> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="所在区" prop="area"> <el-select v-model="queryForm.area" > <el-option label="请选择" value=""></el-option> <el-option v-for="area in area.areaList" :key="area.name" :label="area.name" :value="area.id"></el-option> </el-select> </el-form-item> </el-col> </el-row> <!-- 租赁方式 --> <el-form-item label="租赁方式" prop="rentModeList"> <el-radio-group v-model="queryForm.rentModeList"> <el-radio v-for="rentMode in dict.rentModeList" :key="rentMode.name" :label="rentMode.value">{{rentMode.name}}</el-radio> </el-radio-group> </el-form-item> <!-- 租金 --> <el-form-item label="租金" prop="rentList"> <el-checkbox-group v-model="queryForm.rentList"> <el-checkbox-button v-for="dict in dict.rentList" :key="dict.name" :label="dict.value">{{dict.name}}</el-checkbox-button> </el-checkbox-group> </el-form-item> <!-- 户型 --> <el-form-item label="户型" prop="houseTypeList"> <el-checkbox-group v-model="queryForm.houseTypeList"> <el-checkbox-button v-for="houseType in dict.houseTypeList" :key="houseType.name" :label="houseType.value">{{houseType.name}}</el-checkbox-button> </el-checkbox-group> </el-form-item> <!-- 朝向 --> <el-form-item label="朝向" prop="directionList"> <el-checkbox-group v-model="queryForm.directionList"> <el-checkbox-button v-for="direction in dict.directionList" :key="direction.name" :label="direction.value">{{direction.name}}</el-checkbox-button> </el-checkbox-group> </el-form-item> <!-- 条件查询 --> <el-form-item> <el-button @click="clickQuery" type="primary" >查询</el-button> <el-button @click="resetQueryForm" type="info">重置</el-button> </el-form-item> </el-form> </el-card> <!-- 列表展示 --> <el-card :span="24"> <el-table :data="houseList" border stripe style="width: 100%"> <el-table-column prop="id" label="id" ></el-table-column> <el-table-column prop="areaName" label="所在区"></el-table-column> <el-table-column prop="rentModeName" label="租赁方式" width=""></el-table-column> <el-table-column prop="rent" label="租金(元)"></el-table-column> <el-table-column prop="houseTypeName" label="户型" ></el-table-column> <el-table-column prop="directionName" label="朝向"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="图片"> <template slot-scope="scope"> <img :src="path + scope.row.pic" alt="" style="height:50px;width:50px;"> </template> </el-table-column> <el-table-column prop="createTime" label="发布时间"></el-table-column> <el-table-column label="操作" width="90px"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table> <el-pagination style="margin-top:30px" background :current-page="pageNum" :page-size="pageSize" :page-sizes="[1, 2, 5, 10, 15, 20]" layout="total,sizes,prev, pager, next,jumper" :total="total" @size-change="pageSizeChange" @current-change="pageNumChange"> </el-pagination> </el-card> </div> </template> <script> export default { name:"List", data() { return { pageNum:1, pageSize:10, total:0, houseList:[], queryForm:{//查询条件 province:'', city:'', area:'', rentMode:'', rentList:[],//租金参数 houseTypeList:[],//户型参数 directionList:[],//朝向 rentModeList:[],//租赁方式 }, area:{//所在省市区 provinceList:[], cityList:[], areaList:[] }, dict:{//字典项,给表单项赋值 rentModeList:[], houseTypeList:[], directionList:[], rentList:[ {name:'<=1000元',value:'0-1000'}, {name:'1000-1500元',value:'1000-1500'}, {name:'1500-2500元',value:'1500-2000'}, {name:'2500-5000元',value:'2500-5000'}, {name:'5000元以上',value:'5000-100000'}, ] } } }, methods: { //查询字典列表(租赁方式,户型,朝向) queryDict(groupId){ // let url = '/dict?groupId=' + groupId if(groupId){ this.$http.get('dict',{ params:{ groupId:groupId } }).then(res=>{ if(res.data.code === 200){ let result = res.data.data if(groupId ==='rent_mode'){ this.dict.rentModeList = result }else if(groupId==='house_type'){ this.dict.houseTypeList = result }else{ this.dict.directionList = result } } }).catch(e=>{ console.log(e) }) } }, queryAreaList(cityId){ this.area.areaList = [] this.queryForm.area = '' this.$http.get('/area/' + cityId).then(resp=>{ if(resp.data.code===200){ this.area.areaList = resp.data.data } }).catch(e=>{ console.log(e) }) }, queryCityList(provinceId){ this.area.areaList = [] this.area.cityList = [] this.queryForm.area = '' this.queryForm.city = '' this.$http.get('/area/' + provinceId).then(resp=>{ if(resp.data.code===200){ this.area.cityList = resp.data.data } }).catch(e=>{ console.log(e) }) }, queryProvinceList(){ this.$http.get('/area/-1').then(resp=>{ if(resp.data.code===200){ this.area.provinceList = resp.data.data } }).catch(e=>{ console.log(e) }) }, /* 分页 */ pageSizeChange(pageSize){ this.pageSize = pageSize this.queryHouseList() }, pageNumChange(pageNum){ this.pageNum = pageNum this.queryHouseList() }, //点击查询,第一页 clickQuery(){ this.pageNum = 1 this.queryHouseList() }, //查询列表房源 queryHouseList(){ this.$http.get('/house',{ params:{ pageNum:this.pageNum, pageSize:this.pageSize, province:this.queryForm.province, city:this.queryForm.city, area:this.queryForm.area, rentList:this.queryForm.rentList.join(','), houseTypeList:this.queryForm.houseTypeList.join(','), directionList:this.queryForm.directionList.join(','), rentMode:this.queryForm.rentModeList, } }).then(resp=>{ //打印出来是个Object?直接打印resp就行了
console.log( resp) if(resp.data.code===200){ this.houseList = resp.data.data.rows this.total = resp.data.data.total this.pageNum = resp.data.data.pageNum this.pageSize = resp.data.data.pageSize } }).catch(e=>{ console.log(e) }) }, resetQueryForm(){ this.$refs.queryFormRef.resetFields() this.area.cityList = [] this.area.areaList = [] } }, created() { this.queryHouseList() this.queryProvinceList() this.queryDict('rent_mode') this.queryDict('house_type') this.queryDict('direction') }, } </script> <style scoped> </style>
2.springboot项目中定义的返回前台的固定类
package com.etoak.bean; import lombok.Data; import java.io.Serializable; @Data public class HouseVo implements Serializable { private Integer id; private Integer province;//省 private Integer city;//市 private Integer area;//区 private String areaName;//所在区名称 private String rentMode;//租赁方式 private String houseType;//户型 private String direction;//朝向 private Double rent;//租金 private String address;//地址 private String pic;//房屋图片 private String createTime;//创建时间 //方式名称 private String rentModeName;//租赁方式 private String houseTypeName;//户型 private String directionName;//朝向 }
3.springboot项目中定义的接请求的类
package com.etoak.common; import lombok.Data; import org.apache.commons.collections4.CollectionUtils; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; //房源查询条件 @Data public class HouseRequestVo { private Integer province;//省 private Integer city;//市 private Integer area;//区 private String rentMode;//租赁方式 private List<String> rentList;//租金 private List<String> directionList;//朝向 private List<String> houseTypeList;//户型 /*将rentList转成rentMapList,作为传入到mapper的参数*/ private List<Map<String,Double>> rentMapList; public List<Map<String,Double>> getRentMapList(){ if(CollectionUtils.isNotEmpty(this.rentList)){ this.rentMapList = new ArrayList<>(); this.rentList.forEach(rent->{ String[] rentArray = rent.split("-"); Map<String,Double> rentMap = new HashMap<>(); rentMap.put("start",Double.parseDouble(rentArray[0])); rentMap.put("end",Double.parseDouble(rentArray[1])); this.rentMapList.add(rentMap); }); } return this.rentMapList; } }
4.sql语句
test里是HouseRequestVo实体类中的字段,collection="集合名字",item="别名",open,close和separator进行拼接sql(1 or 2),只有集合能用foreach
