尚好房 07_前端房源展示

最新推荐文章于 2023-05-12 07:45:00 发布

胖ۣۖ虎ۣۖ

最新推荐文章于 2023-05-12 07:45:00 发布

阅读量398

点赞数

分类专栏：尚好房文章标签：前端 spring java

本文链接：https://blog.csdn.net/lbw18/article/details/126614452

版权

尚好房专栏收录该内容

12 篇文章 7 订阅

订阅专栏

尚好房：前端房源展示

一、分页显示房源列表

1、效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5AYyMbU9-1661871323620)(images/07/img_001.png)]

2、项目搭建

2.1 创建项目

在web项目中创建子工程web-front

2.2 pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>web</artifactId>
        <groupId>com.atguigu</groupId>
        <version>1.0</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>web-front</artifactId>
    <packaging>war</packaging>

    <build>
        <plugins>
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.4.15.v20190215</version>
                <configuration>
                    <!-- 如果检测到项目有更改则自动热部署，每隔n秒扫描一次。默认为0，即不扫描-->
                    <scanIntervalSeconds>10</scanIntervalSeconds>
                    <webAppConfig>
                        <!--指定web项目的根路径，默认为/ -->
                        <contextPath>/</contextPath>
                    </webAppConfig>
                    <httpConnector>
                        <!--端口号，默认 8080-->
                        <port>8001</port>
                    </httpConnector>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

2.3 spring-mvc.xml

创建resources/spring/spring-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd">
    <!--包扫描-->
    <context:component-scan base-package="com.atguigu" />

    <!-- 没有匹配上的url全部按默认方式（就是直接访问）访问，避免拦截静态资源 -->
    <mvc:default-servlet-handler/>
    <!-- 开启mvc注解-->
    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <!-- 配置Fastjson支持 -->
            <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
                <property name="supportedMediaTypes">
                    <list>
                        <value>text/html;charset=UTF-8</value>
                        <value>application/json</value>
                    </list>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
</beans>

2.4 spring-registry.xml

创建resources/spring/spring-registry.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd">
   <!--应用名称-->
    <dubbo:application name="web-front"/>
    <!--注册中心地址-->
    <dubbo:registry address="zookeeper://127.0.0.1:2181"/>
    <!--包扫描:订阅服务-->
    <dubbo:annotation package="com.atguigu"/>
    <!--配置启动时不检查提供者-->
    <dubbo:consumer check="false"/>
</beans>

2.5 logback.xml

创建resources/logback.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration debug="false">

    <!--定义日志文件的存储地址 logs为当前项目的logs目录 还可以设置为../logs -->
    <property name="LOG_HOME" value="logs" />

    <!--控制台日志， 控制台输出 -->
    <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
        <encoder class="ch.qos.logback.classic.encoder.PatternLayoutEncoder">
            <!--格式化输出：%d表示日期，%thread表示线程名，%-5level：级别从左显示5个字符宽度,%msg：日志消息，%n是换行符-->
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50} - %msg%n</pattern>
        </encoder>
    </appender>

    <!-- 日志输出级别 -->
    <root level="DEBUG">
        <appender-ref ref="STDOUT" />
    </root>
</configuration>

2.6 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         version="2.5">
    <servlet>
        <servlet-name>dispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring/spring-*.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>dispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!-- 配置过滤器解决 POST 请求的字符乱码问题 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <!-- encoding参数指定要使用的字符集名称 -->
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <!-- 请求强制编码 -->
        <init-param>
            <param-name>forceRequestEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        <!-- 响应强制编码 -->
        <init-param>
            <param-name>forceResponseEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

3、持久层

3.1 HouseMapper接口

在service-house项目中的com.atguigu.mapper.HouseMapper接口中新增

Page<HouseVo> findListPage(HouseQueryBo houseQueryBo);

3.2 HouseMapper.xml映射配置文件

在service-house项目的resources/mappers/HouseMapper.xml中新增

<sql id="findListPageWhere">
    <where>
        <if test="areaId != null and areaId != ''">
            hc.area_id = #{areaId}
        </if>
        <if test="buildStructureId != null and buildStructureId != ''">
            and hh.build_structure_id = #{buildStructureId}
        </if>
        <if test="decorationId != null and decorationId != ''">
            and hh.decoration_id = #{decorationId}
        </if>
        <if test="directionId != null and directionId != ''">
            and hh.direction_id = #{directionId}
        </if>
        <if test="floorId != null and floorId != ''">
            and hh.floor_id = #{floorId}
        </if>
        <if test="houseTypeId != null and houseTypeId != ''">
            and hh.house_type_id = #{houseTypeId}
        </if>
        <if test="houseUseId != null and houseUseId != ''">
            and hh.house_use_id = #{houseUseId}
        </if>
        <if test="plateId != null and plateId != ''">
            and hc.plate_id = #{plateId}
        </if>
        and hh.is_deleted=0 and hc.is_deleted=0
    </where>
</sql>

<sql id="listPageSort">
    <if test="defaultSort == 1">
        order by hh.id desc
    </if>
    <if test="priceSort == 1">
        order by hh.total_price desc
    </if>
    <if test="timeSort == 1">
        order by hh.create_time desc
    </if>
</sql>

<select id="findListPage" resultType="HouseVo">
    <!--查询house表中的字段-->
    select hh.id,hh.community_id,hh.name,hh.description,hh.total_price,hh.unit_price,hh.build_area,hh.inside_area,
    hh.house_type_id,hh.floor_id,hh.build_structure_id,hh.direction_id,hh.decoration_id,hh.house_use_id,
    hh.elevator_ratio,hh.listing_date,hh.last_trade_date,hh.status,hh.create_time,hh.update_time,hh.is_deleted,
    <!--查询小区表中的name-->
    hc.name communityName,
    <!--子查询dict表中的name-->
    (select name from hse_dict where id=hh.direction_id) directionName,
    (select name from hse_dict where id=hh.floor_id) floorName,
    (select name from hse_dict where id=hh.house_type_id) houseTypeName
    <!--连表-->
    from hse_house hh left join hse_community hc
    <!--连表条件-->
    on hh.community_id = hc.id
    <!--查询条件-->
    <include refid="findListPageWhere"></include>
    <!--排序-->
    <include refid="listPageSort"></include>
</select>

4、业务层

4.1 HouseService接口

PageInfo<HouseVo> findListPage(int pageNum, int pageSize, HouseQueryBo houseQueryBo);

4.2 HouseServiceImpl实现类

@Override
public PageInfo<HouseVo> findListPage(int pageNum, int pageSize, HouseQueryBo houseQueryBo) {
    //开启分页
    PageHelper.startPage(pageNum, pageSize);
    Page<HouseVo> page = houseMapper.findListPage(houseQueryBo);
    return new PageInfo<HouseVo>(page);
}

5、表现层

在web-front项目中创建com.atguigu.controller.HouseController类

@RestController
@RequestMapping("/house")
public class HouseController {
    @Reference
    private HouseService houseService;
    @PostMapping("/list/{pageNum}/{pageSize}")
    public Result findListPage(@RequestBody HouseQueryBo houseQueryBo,
                               @PathVariable("pageNum") Integer pageNum,
                               @PathVariable("pageSize") Integer pageSize){
        PageInfo<HouseVo> pageInfo = houseService.findListPage(pageNum, pageSize, houseQueryBo);
        return Result.ok(pageInfo);
    }
}

在web-front项目中创建com.atguigu.controller.DictController类

@RestController
@RequestMapping("/dict")
public class DictController {
    @Reference
    private DictService dictService;

    @GetMapping("/findDictListByParentDictCode/{dictCode}")
    public Result findDictListByParentDictCode(@PathVariable String dictCode) {
        List<Dict> dictList = dictService.findDictListByParentDictCode(dictCode);
        return Result.ok(dictList);
    }

    @GetMapping("/findDictListByParentId/{parentId}")
    public Result findDictListByParentId(@PathVariable("parentId") Long parentId) {
        List<Dict> dictList = dictService.findDictListByParentId(parentId);
        return Result.ok(dictList);
    }
}

6、前端页面

6.1 引入静态资源

6.2 首页

在webapp目录中新建index.html页面

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="Author" contect="http://www.webqin.net">
  <title>尚好房</title>
  <link rel="shortcut icon" href="./static/images/favicon.ico"/>
  <link type="text/css" href="./static/css/css.css" rel="stylesheet"/>
  <script type="text/javascript" src="./static/js/jquery.js"></script>
  <script type="text/javascript" src="./static/js/js.js"></script>
  <script src="./static/js/vue.js"></script>
  <script src="./static/js/axios.js"></script>
  <script type="text/javascript">
    $(function () {
      //导航定位
      $(".nav li:eq(1)").addClass("navCur");
    })
  </script>
</head>

<body>
<div id="list">
  <div class="header">
    <div class="width1190">
      <div class="fl">您好，欢迎来到尚好房！</div>
      <div class="fr">
        <a href="login.html">登录</a> |
        <a href="register.html">注册</a> |
        <a href="javascript:;">加入收藏</a> |
        <a href="javascript:;">设为首页</a>
      </div>
      <div class="clears"></div>
    </div><!--width1190/-->
  </div>
  <div class="list-nav">
    <div class="width1190">
      <div class="list"><h3>房源分类</h3></div><!--list/-->
      <ul class="nav">
        <li><a href="index.html">首页</a></li>
        <li><a href="about.html">关于我们</a></li>
        <li><a href="contact.html">联系我们</a></li>
        <div class="clears"></div>
      </ul><!--nav/-->
      <div class="clears"></div>
    </div><!--width1190/-->
  </div><!--list-nav/-->
  <div class="banner" style="background:url(./static/images/ban.jpg) center center no-repeat;"></div>

  <div class="content">
    <div class="width1190">
      <form action="#" method="get" class="pro-search">
        <table>
          <tr>
            <th>房源区域：</th>
            <td>
              <div style="line-height: 30px;">
                <a href="javascript:;" @click="searchArea('')" :class="houseQueryBo.areaId=='' ? 'pro-cur' : ''">不限</a>
                <a href="javascript:;" @click="searchArea(item.id)" :class="item.id==houseQueryBo.areaId ? 'pro-cur' : ''" v-for="item in areaList" :key="item.id">{{ item.name }}</a>
              </div>
              <!--新增区域-->
              <div style="font-size: 12px;border-top:#ccc 1px dotted;">
                <a href="javascript:;" @click="searchPlate(item.id)" :class="item.id==houseQueryBo.plateId ? 'pro-cur' : ''" v-for="item in plateList" :key="item.id">{{ item.name }}</a>
              </div>
            </td>
          </tr>
          <tr>
            <th>户型：</th>
            <td>
              <a href="javascript:;" @click="searchHouseType('')" :class="houseQueryBo.houseTypeId=='' ? 'pro-cur' : ''">不限</a>
              <a href="javascript:;" @click="searchHouseType(item.id)" :class="item.id==houseQueryBo.houseTypeId ? 'pro-cur' : ''" v-for="item in houseTypeList" :key="item.id">{{ item.name }}</a>
            </td>
          </tr>
          <tr>
            <th>楼层：</th>
            <td>
              <a href="javascript:;" @click="searchFloor('')" :class="houseQueryBo.floorId=='' ? 'pro-cur' : ''">不限</a>
              <a href="javascript:;" @click="searchFloor(item.id)" :class="item.id==houseQueryBo.floorId ? 'pro-cur' : ''" v-for="item in floorList" :key="item.id">{{ item.name }}</a>
            </td>
          </tr>
          <tr>
            <th>建筑结构：</th>
            <td>
              <a href="javascript:;" @click="searchBuildStructure('')" :class="houseQueryBo.buildStructureId=='' ? 'pro-cur' : ''">不限</a>
              <a href="javascript:;" @click="searchBuildStructure(item.id)" :class="item.id==houseQueryBo.buildStructureId ? 'pro-cur' : ''" v-for="item in buildStructureList" :key="item.id">{{ item.name }}</a>
            </td>
          </tr>
          <tr>
            <th>朝向：</th>
            <td>
              <a href="javascript:;" @click="searchDirection('')" :class="houseQueryBo.directionId=='' ? 'pro-cur' : ''">不限</a>
              <a href="javascript:;" @click="searchDirection(item.id)" :class="item.id==houseQueryBo.directionId ? 'pro-cur' : ''" v-for="item in directionList" :key="item.id">{{ item.name }}</a>
            </td>
          </tr>
          <tr>
            <th>装修情况：</th>
            <td>
              <a href="javascript:;" @click="searchDecoration('')" :class="houseQueryBo.decorationId=='' ? 'pro-cur' : ''">不限</a>
              <a href="javascript:;" @click="searchDecoration(item.id)" :class="item.id==houseQueryBo.decorationId ? 'pro-cur' : ''" v-for="item in decorationList" :key="item.id">{{ item.name }}</a>
            </td>
          </tr>
          <tr>
            <th>房屋用途：</th>
            <td>
              <a href="javascript:;" @click="searchHouseUse('')" :class="houseQueryBo.houseUseId=='' ? 'pro-cur' : ''">不限</a>
              <a href="javascript:;" @click="searchHouseUse(item.id)" :class="item.id==houseQueryBo.houseUseId ? 'pro-cur' : ''" v-for="item in houseUseList" :key="item.id">{{ item.name }}</a>
            </td>
          </tr>
        </table>
        <div class="paixu">
          <strong>排序：</strong>
          <a href="javascript:;" @click="sortDefault()" :class="houseQueryBo.defaultSort=='1' ? 'pai-cur' : ''">默认</a>
          <a href="javascript:;" @click="sortPrice()" :class="houseQueryBo.priceSort=='1' ? 'pai-cur' : ''">价格 &or;</a>
          <a href="javascript:;" @click="sortTime()" :class="houseQueryBo.timeSort=='1' ? 'pai-cur' : ''">最新 &or;</a>
        </div>
      </form><!--pro-search/-->
    </div><!--width1190/-->
    <div class="width1190">
      <div class="pro-left">
        <dl v-for="item in page.list" :key="item.id" >
          <dt><a :href="'info.html?id='+item.id"><img :src="item.defaultImageUrl" width="286" height="188"/></a></dt>
          <dd>
            <h3><a :href="'info.html?id='+item.id">{{ item.name }}</a></h3>
            <div class="pro-wei">
              <img src="/static/images/weizhi.png" width="12" height="16"/> <strong class="red">{{ item.communityName }}</strong>
            </div>
            <div class="pro-fang">{{ item.buildArea }}平 {{ item.houseTypeName}} {{ item.floorName}} {{ item.decorationName}}</div>
            <div class="pra-fa"> 发布时间：{{ item.createTimeString }}</div>
          </dd>
          <div class="price">¥<strong>{{ item.totalPrice }}</strong><span class="font12">万元</span></div>
          <div class="clears"></div>
        </dl>
      </div><!--pro-left/-->
      <div class="pro-right">
        <h2 class="right-title">新上房源</h2>
        <div class="right-pro">
          <dl>
            <dt><a href="proinfo.html"><img src="./static/images/fang8.jpg"/></a></dt>
            <dd>
              <h3><a href="proinfo.html">中装一室一厅，楼层好，采光足，稀缺房源</a></h3>
              <div class="pro-fang">一室一厅 38平 南</div>
              <div class="right-price">90万元</div>
            </dd>
          </dl>
          <dl>
            <dt><a href="proinfo.html"><img src="./static/images/fang7.jpg"/></a></dt>
            <dd>
              <h3><a href="proinfo.html">中装两室，楼层好，采光足，稀缺房源</a></h3>
              <div class="pro-fang">两室一厅 78平 南</div>
              <div class="right-price">130万元</div>
            </dd>
          </dl>
          <dl>
            <dt><a href="proinfo.html"><img src="./static/images/fang6.jpg"/></a></dt>
            <dd>
              <h3><a href="proinfo.html">中装三室，楼层好，采光足，稀缺房源</a></h3>
              <div class="pro-fang">三室一厅 98平 南</div>
              <div class="right-price">190万元</div>
            </dd>
          </dl>
        </div><!--right-pro/-->
      </div><!--pro-right/-->
      <div class="clears"></div>
      <ul class="pages">
        <li>
          <a href="javascript:;" @click="fetchData(page.prePage)" v-if="page.hasPreviousPage">上一页</a>
        </li>
        <li v-for="item in page.navigatepageNums" :class="item==page.pageNum ? 'page_active' : ''">
          <a href="javascript:;" @click="fetchData(item)">{{ item }}</a>
        </li>
        <li>
          <a href="javascript:;" @click="fetchData(page.nextPage)" v-if="page.hasNextPage">下一页</a>
        </li>
      </ul>
    </div><!--width1190/-->
  </div><!--content/-->

  <div class="footer">
    <div class="width1190">
      <div class="fl"><a href="index.html"><strong>尚好房</strong></a><a href="about.html">关于我们</a><a
              href="contact.html">联系我们</a><a href="follow.html">个人中心</a></div>
      <div class="fr">
        <dl>
          <dt><img src="./static/images/erweima.png" width="76" height="76"/></dt>
          <dd>微信扫一扫<br/>房价点评，精彩发布</dd>
        </dl>
        <dl>
          <dt><img src="./static/images/erweima.png" width="76" height="76"/></dt>
          <dd>微信扫一扫<br/>房价点评，精彩发布</dd>
        </dl>
        <div class="clears"></div>
      </div>
      <div class="clears"></div>
    </div><!--width1190/-->
  </div><!--footer/-->
  <div class="copy">Copyright@ 2020 尚好房 版权所有 沪ICP备1234567号-0&nbsp;&nbsp;&nbsp;&nbsp;技术支持：XXX</div>
  <div class="bg100"></div>
</div>
<script>
  new Vue({
    el: '#list',

    data: {
      //区域列表
      areaList: [],
      //板块列表
      plateList: [],
      //房屋类型列表
      houseTypeList: [],
      //房屋楼层列表
      floorList: [],
      //建筑结构列表
      buildStructureList: [],
      //朝向列表
      directionList: [],
      //装修情况列表
      decorationList: [],
      //房屋用途列表
      houseUseList: [],

      //接口返回的分页数据
      page: {
        //当前页的房源列表
        list: [],
        //当前页数
        pageNum: 1,
        //每页数据条数
        pageSize: 2,
        //总页数
        pages: 1,
        //页码
        navigatepageNums: [1,2,3,4],
        //上一页
        prePage: 0,
        //下一页
        nextPage: 0,
        //是否有上一页
        hasPreviousPage: false,
        //是否有下一页
        hasNextPage: false
      },

      //封装查询条件业务数据
      houseQueryBo: {
        areaId: '',
        plateId: '',
        houseTypeId: '',
        floorId: '',
        buildStructureId: '',
        directionId: '',
        decorationId: '',
        houseUseId: '',

        defaultSort: 1,
        priceSort: null,
        timeSort: null,
      },
    },
    //钩子函数
    created () {
      //初始化数据
      this.fetchDictData()
      //默认加载第一页数据
      this.fetchData(1);
    },

    methods: {
      fetchDictData() {
        //axios在then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定
        var that = this
        //加载北京的所有区域列表
        axios.get('/dict/findDictListByParentDictCode/beijing').then(function (response) {
          that.areaList = response.data.data
        });
        //加载房屋类型列表
        axios.get('/dict/findDictListByParentDictCode/houseType').then(function (response) {
          that.houseTypeList = response.data.data
        });
        //加载楼层列表
        axios.get('/dict/findDictListByParentDictCode/floor').then(function (response) {
          that.floorList = response.data.data
        });
        //加载建筑结构列表
        axios.get('/dict/findDictListByParentDictCode/buildStructure').then(function (response) {
          that.buildStructureList = response.data.data
        });
        //加载朝向列表
        axios.get('/dict/findDictListByParentDictCode/direction').then(function (response) {
          that.directionList = response.data.data
        });
        //加载装修情况列表
        axios.get('/dict/findDictListByParentDictCode/decoration').then(function (response) {
          that.decorationList = response.data.data
        });
        //加载房屋用途列表
        axios.get('/dict/findDictListByParentDictCode/houseUse').then(function (response) {
          that.houseUseList = response.data.data
        });
      },

      //搜索加载房源数据
      fetchData(pageNum = 1) {
        this.page.pageNum = pageNum
        debugger
        if(pageNum < 1) pageNum = 1

        var that = this
        axios.post('/house/list/'+pageNum+'/'+this.page.pageSize, this.houseQueryBo).then(function (response) {
          that.page = response.data.data
        });
      },
      //按照区域搜索
      searchArea(id) {
        this.houseQueryBo.areaId = id
        this.houseQueryBo.plateId = ''
        this.fetchData(1)

        if(id == '') {
          this.plateList = []
          return
        }
        var that = this
        axios.get('/dict/findDictListByParentId/'+id).then(function (response) {
          that.plateList = response.data.data
        });
      },
      //按照板块搜索
      searchPlate(id) {
        this.houseQueryBo.plateId = id
        this.fetchData(1)
      },
      //按照房屋类型搜索
      searchHouseType(id) {
        this.houseQueryBo.houseTypeId = id
        this.fetchData(1)
      },
      //按照楼层搜索
      searchFloor(id) {
        this.houseQueryBo.floorId = id
        this.fetchData(1)
      },
      //按照建筑结构搜索
      searchBuildStructure(id) {
        this.houseQueryBo.buildStructureId = id
        this.fetchData(1)
      },
      //按照朝向搜索
      searchDirection(id) {
        this.houseQueryBo.directionId = id
        this.fetchData(1)
      },
      //按照装修搜索
      searchDecoration(id) {
        this.houseQueryBo.decorationId = id
        this.fetchData(1)
      },
      //按照房屋用途搜索
      searchHouseUse(id) {
        this.houseQueryBo.houseUseId = id
        this.fetchData(1)
      },

      //默认排序
      sortDefault() {
        this.houseQueryBo.defaultSort = 1
        this.houseQueryBo.priceSort = null
        this.houseQueryBo.timeSort = null
        this.fetchData(1)
      },
      //根据价格排序
      sortPrice() {
        this.houseQueryBo.defaultSort = null
        this.houseQueryBo.priceSort = 1
        this.houseQueryBo.timeSort = null
        this.fetchData(1)
      },
      //根据时间排序
      sortTime() {
        this.houseQueryBo.defaultSort = null
        this.houseQueryBo.priceSort = null
        this.houseQueryBo.timeSort = 1
        this.fetchData(1)
      }
    }
  })
</script>
</body>
</html>

二、房源详情

1、表现层

在web-front项目的HouseController中新增

@Reference
private CommunityService communityService;
@Reference
private HouseBrokerService houseBrokerService;
@Reference
private UserFollowService userFollowService;

@GetMapping("/info/{id}")
public Result info(@PathVariable("id") Long id, HttpSession session){
    //1. 查询房源信息
    House house = houseService.getById(id);
    //2. 查询小区信息
    Community community = communityService.getById(house.getCommunityId());
    //3. 查询经纪人列表信息
    List<HouseBroker> houseBrokerList = houseBrokerService.findHouseBrokerListByHouseId(id);
    //4. 获取房产列表信息
    List<HouseImage> houseImage1List = houseImageService.findHouseImageList(id, 1);

    Map<String, Object> map = new HashMap<>();
    map.put("house",house);
    map.put("community",community);
    map.put("houseBrokerList",houseBrokerList);
    map.put("houseImage1List",houseImage1List);
    //关注业务: 现在不做，明天完成，现在先设置为false
    map.put("isFollow",false);
    return Result.ok(map);
}

3、前端页面

在web-front项目的webapp目录中创建info.html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="Author" contect="http://www.webqin.net">
    <title>尚好房</title>
    <link rel="shortcut icon" href="./static/images/favicon.ico"/>
    <link type="text/css" href="./static/css/css.css" rel="stylesheet"/>
    <link rel="stylesheet" href="./static/css/swiper-bundle.min.css">
    <script type="text/javascript" src="./static/js/jquery.js"></script>
    <script type="text/javascript" src="./static/js/js.js"></script>
    <script src="./static/js/swiper-bundle.min.js"></script>

    <script src="static/js/vue.js"></script>
    <script src="static/js/axios.js"></script>
    <script src="static/js/util.js"></script>
    <style>
        .swiper {
            width: 100%;
            height: 100%
        }

        .swiper {
            width: 100%;
            height: 300px;
            margin-left: auto;
            margin-right: auto
        }

        .swiper-slide {
            background-size: cover;
            background-position: center
        }

        .mySwiper2 {
            height: 80%;
            width: 100%
        }

        .mySwiper {
            height: 20%;
            box-sizing: border-box;
            padding: 10px 0
        }

        .mySwiper .swiper-slide {
            width: 25%;
            height: 100%;
            opacity: .4
        }

        .mySwiper .swiper-slide-thumb-active {
            opacity: 1
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover
        }
    </style>
</head>

<body>
<div id="item">
    <div class="header">
        <div class="width1190">
            <div class="fl">您好，欢迎来到尚好房！</div>
            <div class="fr">
                <a href="login.html">登录</a> |
                <a href="register.html">注册</a> |
                <a href="javascript:;">加入收藏</a> |
                <a href="javascript:;">设为首页</a>
            </div>
            <div class="clears"></div>
        </div><!--width1190/-->
    </div>
    <div class="list-nav">
        <div class="width1190">
            <div class="list"><h3>房源分类</h3></div><!--list/-->
            <ul class="nav">
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="contact.html">联系我们</a></li>
                <div class="clears"></div>
            </ul><!--nav/-->
            <div class="clears"></div>
        </div><!--width1190/-->
    </div><!--list-nav/-->
    <div class="banner" style="background:url(./static/images/ban.jpg) center center no-repeat;"></div>

    <div class="content">
        <div class="width1190" style="width:1000px;">
            <div class="proImg fl">
                <!--<img src="/static/images/fangt1.jpg"/>-->

                <div style="--swiper-navigation-color: #F2F2F2; --swiper-pagination-color: #F2F2F2"
                     class="swiper mySwiper2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in houseImage1List" :key="item.id">
                            <img :src="item.imageUrl"/>
                        </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
                <div thumbsSlider="" class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in houseImage1List" :key="item.id">
                            <img :src="item.imageUrl"/>
                        </div>
                    </div>
                </div>
            </div>
            <!--proImg/-->
            <div class="proText fr">
                <h3 class="proTitle">
                    {{house.name}}
                    <span v-if="isFollow" style="margin-left: 50px; font-size: 14px;"><a href="javascript:;">已关注</a></span>
                    <span v-else style="margin-left: 50px; font-size: 14px;"><a href="javascript:;">关注</a></span>
                </h3>
                <div class="proText1">
                    <div class="proText1-detail-pri">
                        <strong>{{house.houseTypeName}}</strong>
                        <em>{{community.buildYears}}/{{house.floorName}}</em>
                    </div>
                    <div class="proText1-detail-pri">
                        <strong>{{house.directionName}}</strong>
                        <em>{{house.decorationName}}/板楼</em>
                    </div>
                    <div class="proText1-detail-pri">
                        <strong>{{house.totalPrice}}</strong>
                        <em>{{house.unitPrice}}元/平 {{house.buildArea}}平方米</em>
                    </div>
                    <ul class="proText1-detail-oth clears">
                        <li>
                            <span>小区名称：</span><a href="#">{{community.name}}</a>
                        </li>
                        <li>
                            <span>所在区域：</span><a href="#">{{community.areaName}}</a><a
                                href="#">{{community.plateName}}</a>
                        </li>
                        <li>
                            <span>房屋编号：</span>{{house.id}}
                        </li>
                    </ul>
                    <div class="jingji">
                        <div class="jingji-pho">
                            <h1 class="logo">
                                <a href="javascript:;">
                                    <img :src="houseBroker.brokerHeadUrl" width="163"
                                         height="59"/></a></h1>
                        </div>
                        <div class="jingji-deta">
                            <a href="javascript:;" class="projrgwc">{{houseBroker.brokerName}}</a>
                            <span>本小区好评经纪人</span>
                        </div>
                        <a href="javascript:;" class="jingji-tel">4008758119 <span>转</span>35790</a>
                    </div>
                </div>
            </div><!--proText/-->
            <div class="clears"></div>
        </div>
    </div><!--width1190/-->
    <div class="proBox" style="width:1000px;margin:10px auto;">
        <div class="proEq">
            <!--选项卡菜单-->
            <ul class="fl">
                <li class="proEqCur">房源信息</li>
                <li>房源特色</li>
                <li>户型分间</li>
                <li>经纪人反馈</li>
            </ul>
            <div class="clears"></div>
        </div><!--proEq/-->
        <!--每一个选项卡-->
        <div class="proList">
            <dl class="proList-con clearf">
                <dt>基本属性</dt>
                <dl>
                    <dd><span>房屋户型</span>{{house.houseTypeName}}</dd>
                    <dd><span>所在楼层</span>{{house.floorName}}</dd>
                    <dd><span>建筑面积</span>{{house.buildArea}}</dd>
                    <dd><span>建筑结构</span>{{house.buildStructureName}}</dd>
                    <dd><span>套内面积</span>{{house.insideArea}}</dd>
                    <dd><span>房屋朝向</span>{{house.directionName}}</dd>
                    <dd><span>装修情况</span>{{house.decorationName}}</dd>
                    <dd><span>梯户比例</span>{{house.elevatorRatio}}</dd>
                </dl>
            </dl>
            <dl class="proList-con clearf">
                <dt>交易性质</dt>
                <dl>
                    <dd><span>挂牌时间</span>{{house.listingDateString}}</dd>
                    <dd><span>交易权属</span>商品房</dd>
                    <dd><span>上次交易</span>{{house.lastTradeDateString}}</dd>
                    <dd><span>房屋用途</span>{{house.houseUseName}}</dd>
                    <dd><span>房屋年限</span>满五年</dd>
                    <dd><span>产权所属</span>共有</dd>
                    <dd><span>抵押信息</span>有抵押 19万元 中国银行四川分行 业主自还</dd>
                    <dd><span>房本备件</span>已上传房本照片</dd>
                </dl>
            </dl>
            <div class="proList-con-war">
                特别提示：本房源所示信息仅供参考，购房时以改房屋档案登记信息、产权证信息以及所签订合同条款约定为准；本房源公示信息不作为合同条款，不具有合同约束力。
            </div>
            <img :src="item.imageUrl" v-for="item in houseImage1List" :key="item.id"
                 style="width: 430px;height: 290px;"/>
        </div><!--proList/-->
        <!--每一个选项卡-->
        <div class="proList">
            <dl class="proList-con clearf">
                <dt>房源特色</dt>
                <dd>
                    <a href="#" class="proList-con-icon">满五年</a>
                    <a href="#" class="proList-con-icon">随时看房</a>
                    <a href="#" class="proList-con-icon">VR看房</a>
                </dd>
            </dl>
            <dl class="proList-con clearf">
                <dt>小区介绍</dt>
                <dd>
                    中国央企电建开发的，实力雄厚，品质保证。小区保安24小时巡逻，大门和楼栋均设有门禁，居住安全有保障。小区实行人车分流，配套健身设施齐全，老人和孩子可以安心享受居住环境。小区物业为开发商自己物业人员
                </dd>
            </dl>
            <dl class="proList-con clearf">
                <dt>核心卖点</dt>
                <dd>
                    本房满五年，卧室带有阳台，对小区中庭，采光好户型方正
                </dd>
            </dl>
            <dl class="proList-con clearf">
                <dt>周边配套</dt>
                <dd>
                    小区门口有多家商场，特色小吃众多，满足您绝大多数需求。1公里左右的师大现代广场休闲娱乐设施众多，充分满足您的娱乐选择。200米外即是金茶路菜市，居家买菜方便快捷。小区对门即是市政公园，在晚饭之余可以和家人朋友一期散步休憩，享受休闲。

                </dd>
            </dl>
            <dl class="proList-con clearf">
                <dt>交通出行</dt>
                <dd>
                    距离大面铺地铁站3.5公里（来源于百度地图）。川师成龙校区西门公交车站距离小区306米（来源于百度地图），有856路、898路。龙安村招呼站距离小区200米（来源于百度地图），有332路，313路。交通线路多，直达地铁站口，出行便捷
                </dd>
            </dl>
            <div class="proList-con-war">
                注：1.房源介绍中的周边配套、在建设施、规划设施、地铁信息、绿化率、得房率、容积率等信息为通过物业介绍、房产证、实勘、政府官网等渠道获取，因时间、政策会发生变化，与实际情况可能略有偏差，房源介绍仅供参考。
                2.房源介绍中与距离相关的数据均来源于百度地图。 3.土地使用起止年限详见业主土地证明材料或查询相关政府部门的登记文件。
            </div>
        </div><!--proList/-->
        <!--每一个选项卡-->
        <div class="proList">
            <div class="proList-fm">
                <img src="./static/images/standard_f1ba9c2f-a917-421d-ad0f-2a6048a0d0d7.jfif" alt="">
            </div>
            <div class="proList-fd">
                <table>
                    <tr>
                        <td>房间名</td>
                        <td>平方</td>
                        <td>朝向</td>
                        <td>窗户</td>
                    </tr>
                    <tr>
                        <td>客厅</td>
                        <td>29.76平方米</td>
                        <td>无</td>
                        <td>未知窗户类型</td>
                    </tr>
                    <tr>
                        <td>卧室A</td>
                        <td>10平方米</td>
                        <td>无</td>
                        <td>未知窗户类型</td>
                    </tr>
                    <tr>
                        <td>卧室B</td>
                        <td>13.06平方米</td>
                        <td>北</td>
                        <td>普通窗</td>
                    </tr>
                    <tr>
                        <td>卧室C</td>
                        <td>7.72平方米</td>
                        <td>西</td>
                        <td>落地窗</td>
                    </tr>
                    <tr>
                        <td>厨房</td>
                        <td>5.45平方米</td>
                        <td>北</td>
                        <td>普通窗</td>
                    </tr>
                    <tr>
                        <td>卫生间</td>
                        <td>4.38平方米</td>
                        <td>南</td>
                        <td>普通窗</td>
                    </tr>
                    <tr>
                        <td>阳台A</td>
                        <td>2.57平方米</td>
                        <td>北</td>
                        <td>普通窗</td>
                    </tr>
                    <tr>
                        <td>阳台B</td>
                        <td>4.81平方米</td>
                        <td>北 东</td>
                        <td>普通窗</td>
                    </tr>
                </table>
            </div>
            <div class="clears"></div>
        </div><!--proList/-->
        <!--每一个选项卡-->
        <div class="proList">
            <dl class="proList-jingjiL clearf">
                <dt>
                    <img src="./static/images/d61bd0db-9b94-4199-85e1-8360606f9c99.jpg.480x640.jpg.55x55.jpg" alt="">
                </dt>
                <dd>
                    <div>
                        <a href="#">王琢</a>
                        <span>4008897069转34851</span>
                    </div>
                    <p>
                        房屋所在楼盘电建地产云立方，我带看过此房，了解房屋相关信息。房屋三梯八户，，产权面积88平米，装修三房，卧室有阳台周边配套齐全，生活、出行便利。更多详情，欢迎来电咨询。竭诚为您服务，只为您找到满意的家！
                    </p>
                    <div>
                        2022/01/13 带客户看过此房，共带看本房3次
                    </div>
                </dd>
            </dl>
            <dl class="proList-jingjiL clearf">
                <dt>
                    <img src="./static/images/adb503d4-3b05-4574-a61a-e5efbd39ec47.png.480x640.jpg.55x55.jpg" alt="">
                </dt>
                <dd>
                    <div>
                        <a href="#">文辉</a>
                        <span>4008896851转37783</span>
                    </div>
                    <p>
                        云立方套三单卫，低楼层，简单装修，对小区中庭，客厅带飘窗，主卧室带阳台，户型方正，有钥匙，可以实地看房。
                    </p>
                    <div>
                        2022/01/01 带客户看过此房，共带看本房1次
                    </div>
                </dd>
            </dl>
            <dl class="proList-jingjiL clearf">
                <dt>
                    <img src="./static/images/832c9fdc-e770-416d-8ae4-cc17e294049e.jpg.480x640.jpg.55x55.jpg" alt="">
                </dt>
                <dd>
                    <div>
                        <a href="#">常新文</a>
                        <span>4008897038转86910</span>
                    </div>
                    <p>
                        本房满五年，卧室带有阳台，对小区中庭，采光好户型方正
                    </p>
                    <div>
                        2021/12/26 带客户看过此房，共带看本房1次
                    </div>
                </dd>
            </dl>
        </div><!--proList/-->
    </div><!--proBox/-->

    <div class="footer">
        <div class="width1190">
            <div class="fl"><a href="index.html"><strong>尚好房</strong></a><a href="about.html">关于我们</a><a
                    href="contact.html">联系我们</a><a href="follow.html">个人中心</a></div>
            <div class="fr">
                <dl>
                    <dt><img src="./static/images/erweima.png" width="76" height="76"/></dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布</dd>
                </dl>
                <dl>
                    <dt><img src="./static/images/erweima.png" width="76" height="76"/></dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布</dd>
                </dl>
                <div class="clears"></div>
            </div>
            <div class="clears"></div>
        </div><!--width1190/-->
    </div><!--footer/-->
    <div class="copy">Copyright@ 2020 尚好房 版权所有 沪ICP备1234567号-0&nbsp;&nbsp;&nbsp;&nbsp;技术支持：XXX</div>
    <div class="bg100"></div>
</div>
<script>
    new Vue({
        el: "#item",
        data: {
            id: null,
            isLoad: false,
            community: {},
            house: {},
            houseBroker: {},
            houseImage1List: [],
            isFollow: false
        },

        created() {
            this.init()
        },

        mounted() {
            const timer = setInterval(() => {
                // 图片加载成功，再去初始化轮播图
                if (this.isLoad) {
                    this.runSwiper()
                    clearInterval(timer);
                }
            }, 500);
        },

        methods: {
            runSwiper() {
                var swiper = new Swiper(".mySwiper", {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    freeMode: true,
                    watchSlidesProgress: true
                })
                new Swiper(".mySwiper2", {
                    spaceBetween: 10,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    },
                    thumbs: {
                        swiper: swiper
                    }
                })
            },

            init() {
                this.id = util.getQueryVariable("id")
                this.fetchData()
            },

            fetchData() {
                axios({
                    "url": "/house/info/" + this.id,
                    "method": "GET"
                }).then(response => {
                    this.house = response.data.data.house
                    this.community = response.data.data.community
                    this.houseBroker = response.data.data.houseBrokerList[0]
                    this.houseImage1List = response.data.data.houseImage1List
                    this.isFollow = response.data.data.isFollow
                    this.isLoad = true
                })
            }
        }
    })
</script>
</body>
</html>