尚好房：前端房源展示

一、分页显示房源列表

1、效果

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/beanshttp://www.springframework.org/schema/beans/spring-beans.xsdhttp://www.springframework.org/schema/contexthttp://www.springframework.org/schema/context/spring-context.xsdhttp://www.springframework.org/schema/mvchttp://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/beanshttp://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 {@Referenceprivate 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 {@Referenceprivate 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><ahref="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 = pageNumdebuggerif(pageNum < 1) pageNum = 1var that = thisaxios.post('/house/list/'+pageNum+'/'+this.page.pageSize, this.houseQueryBo).then(function (response) {that.page = response.data.data});},//按照区域搜索searchArea(id) {this.houseQueryBo.areaId = idthis.houseQueryBo.plateId = ''this.fetchData(1)if(id == '') {this.plateList = []return}var that = thisaxios.get('/dict/findDictListByParentId/'+id).then(function (response) {that.plateList = response.data.data});},//按照板块搜索searchPlate(id) {this.houseQueryBo.plateId = idthis.fetchData(1)},//按照房屋类型搜索searchHouseType(id) {this.houseQueryBo.houseTypeId = idthis.fetchData(1)},//按照楼层搜索searchFloor(id) {this.houseQueryBo.floorId = idthis.fetchData(1)},//按照建筑结构搜索searchBuildStructure(id) {this.houseQueryBo.buildStructureId = idthis.fetchData(1)},//按照朝向搜索searchDirection(id) {this.houseQueryBo.directionId = idthis.fetchData(1)},//按照装修搜索searchDecoration(id) {this.houseQueryBo.decorationId = idthis.fetchData(1)},//按照房屋用途搜索searchHouseUse(id) {this.houseQueryBo.houseUseId = idthis.fetchData(1)},//默认排序sortDefault() {this.houseQueryBo.defaultSort = 1this.houseQueryBo.priceSort = nullthis.houseQueryBo.timeSort = nullthis.fetchData(1)},//根据价格排序sortPrice() {this.houseQueryBo.defaultSort = nullthis.houseQueryBo.priceSort = 1this.houseQueryBo.timeSort = nullthis.fetchData(1)},//根据时间排序sortTime() {this.houseQueryBo.defaultSort = nullthis.houseQueryBo.priceSort = nullthis.houseQueryBo.timeSort = 1this.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);//关注业务: 现在不做，明天完成，现在先设置为falsemap.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><ahref="#">{{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><ahref="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.housethis.community = response.data.data.communitythis.houseBroker = response.data.data.houseBrokerList[0]this.houseImage1List = response.data.data.houseImage1Listthis.isFollow = response.data.data.isFollowthis.isLoad = true})}}})
</script>
</body>
</html>

尚好房 07_前端房源展示相关推荐

Java分布式二手房项目尚好房第五课图片上传及前端房源展示
尚好房:图片上传一.图片存储方案 1.介绍在实际开发中,我们会有很多处理不同功能的服务器.例如: 应用服务器:负责部署我们的应用数据库服务器:运行我们的数据库文件服务器:负责存储用户上传文件的 ...
Java分布式二手房项目尚好房第四课二手房和房源管理
尚好房:二手房管理一.功能介绍 1.数据字典 2.小区管理 3.房源管理二.数据字典 1.搭建service-house模块搭建方式与service-acl一致,这里可直接复制service-a ...
22-07-04 西安尚好房（01）项目经验总结
尚好房是一个二手房管理服务平台,开放优质资源和线上能力,聚合线上线下二手房产资源,打造一个全方位二手房服务生态市场,为消费者提供优质房产服务资源. 页面类似于安居客.后来做了"尚医通&quo ...
Java分布式二手房项目尚好房第三课利用Dubbo拆分微服务
Java分布式二手房项目尚好房:Apache Dubbo介绍一.分布式RPC框架Apache Dubbo 1.软件架构的演进过程软件架构的发展经历了由单体架构.垂直架构.SOA架构到微服务架构的演 ...
尚好房 04_服务拆分
尚好房:服务拆分一.业务介绍 1.项目模块划分根据前面的介绍,目前我们的系统规划了3个dubbo服务提供者模块:权限服务.房源服务与会员服务,及2个服务消费者模块:尚好房管理平台(web-admi ...
Java分布式二手房项目尚好房第一课搭建环境
Java分布式二手房项目尚好房2.0:搭建环境一.项目介绍 1.介绍尚好房是一个二手房管理服务平台,开放优质资源和线上能力,聚合线上线下二手房产资源,打造一个全方位二手房服务生态市场,为消费者提供 ...
尚好房 01_搭建环境
尚好房:搭建环境一.项目介绍 1.介绍尚好房是一个二手房管理服务平台,开放优质资源和线上能力,聚合线上线下二手房产资源,打造一个全方位二手房服务生态市场,为消费者提供优质房产服务资源. 2.核心技 ...
尚好房 02_用户角色管理
尚好房:用户角色管理一.功能介绍 1.角色管理 2.用户管理二.后台前端框架 1.后台框架选择后台前端框架模板:Hplus 下载地址:https://gitee.com/hplus_admin/ ...
尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...

尚好房 07_前端房源展示