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=" 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;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