尚好房：二手房管理
一、功能介绍
1、数据字典
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QHFrCEuq-1661870815221)(images/05/img_001.png)]](https://i-blog.csdnimg.cn/blog_migrate/504d99f22c955d15421c98d2bb46c291.png)
2、小区管理
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0RqXuRme-1661870815225)(images/05/img_002.png)]](https://i-blog.csdnimg.cn/blog_migrate/19009291d92a6f35e971cd55388a2074.png)
3、房源管理
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e4vWU4ry-1661870815226)(images/05/img_003.png)]](https://i-blog.csdnimg.cn/blog_migrate/e66bbebcda19824a55e8cad26a516006.png)
二、数字字典模块
1、搭建service-house
1.1 创建工程
在service工程中创建子工程，命名为service-house，并且使用插件将其转换成javaweb工程
1.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>service</artifactId>
<groupId>com.atguigu</groupId>
<version>1.0</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>service-house</artifactId>
<packaging>war</packaging>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
</properties>
<build>
<plugins>
<plugin>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>9.4.15.v20190215</version>
<configuration>
<webAppConfig>
<!--指定web项目的根路径，默认为/ -->
<contextPath>/</contextPath>
</webAppConfig>
<httpConnector>
<!--端口号，默认 8080-->
<port>7002</port>
</httpConnector>
</configuration>
</plugin>
</plugins>
</build>
</project>
1.3 创建目录结构
- 创建
com.atguigu.mapper包 - 创建
com.atguigu.service.impl包 - 在
resources目录中创建mappers目录
1.4 配置文件
-
在
resources目录中创建spring目录 -
将
service-acl的resources/spring目录中的配置文件拷贝过来 -
修改spring-register.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:annotation package="com.atguigu"/> <!-- 注册中心地址 --> <dubbo:registry address="zookeeper://127.0.0.1:2181"/> <!--应用名称--> <dubbo:application name="service-house"/> <!--协议和端口--> <dubbo:protocol name="dubbo" port="20882"/> </beans> -
拷贝日志配置文件和
jdbc.properties文件到resources目录中
1.5 配置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">
<!--配置ContextLoaderListener-->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring/spring-*.xml</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
</web-app>
2、前端实现方案
数据字典我们使用zTree渲染，在线文档：http://www.treejs.cn/v3/demo.php#_108
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sYP2Zmil-1661870815227)(images/05/img_004.png)]](https://i-blog.csdnimg.cn/blog_migrate/13ff4e39134ec91e09e35ec6391f2abd.png)
点击父节点发送请求获取子节点列表，响应数据类似:
[{ id:'0131', name:'n1.3.n1', isParent:true},{ id:'0132', name:'n1.3.n2', isParent:false},{ id:'0133', name:'n1.3.n3', isParent:true},{ id:'0134', name:'n1.3.n4', isParent:false}]
我们通过观察可以看到，每个子节点的数据包括:
id: 子节点的主键值name:子节点名称isParent:表示子节点是否还有子节点
3、搭建服务提供者
3.1 持久层
3.1.1 DictMapper接口
在service-house项目中的com.atguigu.mapper包中创建DictMapper接口
package com.atguigu.mapper;
import com.atguigu.entity.Dict;
import java.util.List;
/**
* 包名:com.atguigu.mapper
*
* @author Leevi
* 日期2022-03-25 21:52
*/
public interface DictMapper {
/**
* 根据父节点id查询子节点列表
* @param parentId
* @return
*/
List<Dict> findListByParentId(Long parentId);
/**
* 判断是否是父节点
* @param id
* @return
*/
Integer countIsParent(Long id);
}
3.1.2 DictMapper.xml映射配置文件
在service-house工程的resources/mappers目录中创建DictMapper.xml文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.mapper.DictMapper">
<!-- 用于select查询公用抽取的列 -->
<sql id="columns">
select id,parent_id,name,dict_code,create_time,update_time,is_deleted
</sql>
<select id="findListByParentId" resultType="Dict">
<include refid="columns"></include>
from hse_dict
where
parent_id=#{parentId}
and
is_deleted=0
</select>
<select id="countIsParent" resultType="int">
select count(0) from hse_dict where parent_id=#{id}
</select>
</mapper>
3.1 创建接口
在service-api工程中创建DictService接口
package com.atguigu.service;
import java.util.List;
import java.util.Map;
public interface DictService {
List<Map<String,Object>> findZnodes(Long id);
}
3.2 创建接口实现类
在service-house工程中的com.atguigu.service.impl包中创建DictService接口的实现类
@Override
public List<Map<String, Object>> findZnodes(Long id) {
//1. 调用持久层方法，根据父节点id查询List<Dict>
List<Dict> dictList = dictMapper.findListByParentId(id);
/*List<Map<String, Object>> znodes = new ArrayList<>();
//2. 将dictList转成List<Map>
for (Dict dict : dictList) {
Map<String,Object> znode = new HashMap();
znode.put("id",dict.getId());
znode.put("name",dict.getName());
znode.put("isParent",dictMapper.countIsParent(dict.getId()) > 0);
//将znode添加到znodes中
znodes.add(znode);
}*/
//使用Stream流
List<Map<String, Object>> znodes = dictList.stream()
.map(dict -> {
Map<String, Object> znode = new HashMap<>();
//往znode中存放id
znode.put("id", dict.getId());
//往znode中存放name
znode.put("name", dict.getName());
//往znode中存放isParent
znode.put("isParent", dictMapper.countIsParent(dict.getId()) > 0);
return znode;
})
.collect(Collectors.toList());
return znodes;
}
4、搭建服务消费者
4.1 表现层
在web-admin中创建DictController类
package com.atguigu.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.atguigu.base.BaseController;
import com.atguigu.entity.Dict;
import com.atguigu.result.Result;
import com.atguigu.service.DictService;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.Map;
/**
* 包名:com.atguigu.controller
*
* @author Leevi
* 日期2022-03-25 22:03
*/
@RestController
@RequestMapping("/dict")
public class DictController extends BaseController {
@Reference
private DictService dictService;
@GetMapping("/findZnodes")
public Result findZNodes(@RequestParam(value = "id",defaultValue = "0") Long id){
List<Map<String, Object>> zNodes = dictService.findZnodes(id);
return Result.ok(zNodes);
}
}
在spring-mvc.xml中配置view-controller访问数字字典的首页
<!--访问字典首页-->
<mvc:view-controller path="/dict" view-name="dict/index"/>
4.2 前端页面
4.2.2 拷贝ztree
将资料中的zTree_v3文件夹拷贝到static/js/plugins目录中
4.2.1 创建dict的首页
在templates目录中创建dict目录，在dict目录中创建index.html，zTree依赖jquery，head文件已引用
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<link rel="stylesheet" th:href="@{/static/js/plugins/zTree_v3/zTreeStyle.css}" type="text/css">
<script type="text/javascript" th:src="@{/static/js/plugins/zTree_v3/jquery.ztree.core.js}"></script>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
</div>
<script th:inline="javascript">
// 文档地址:http://www.treejs.cn/v3/demo.php#_108
var setting = {
async: {
enable: true,
url: "/dict/findZnodes",
type: "get",
autoParam: ["id"],
dataFilter: filter
}
};
function filter(treeId, parentNode, childNodes) {
childNodes = childNodes.data
if (!childNodes) return null;
for (var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
$.fn.zTree.init($("#treeDemo"), setting);
</script>
</body>
</html>
4.2.2 修改frame中的首页
修改frame/index.html，设置访问数字字典
<li>
<a href="#">
<i class="fa fa-home"></i>
<span class="nav-label">权限管理</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="/admin" data-index="0">用户管理</a>
</li>
<li>
<a class="J_menuItem" href="/role">角色列表</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-home"></i>
<span class="nav-label">二手房管理</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level">
<li>
<a class="J_menuItem" href="/dict" data-index="0">数据字典</a>
</li>
</ul>
</li>
4.3 测试
启动服务消费者和服务提供者，并在地址栏输入: http://localhost:8000，然后点击左侧菜单中的数字字典
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8OhTBe93-1661870815228)(images/05/img_005.png)]](https://i-blog.csdnimg.cn/blog_migrate/643a153ed7ce9e3d0934ab2d92f3b996.png)
三、小区管理模块
1、分页显示小区列表功能
1.1 服务提供者
1.1.1 初始化加载区域列表
1.1.1.1 持久层
① DictMapper接口
/**
* 根据父节点的dictCode查询子节点列表
* @param parentDictCode
* @return
*/
List<Dict> findDictListByParentDictCode(String parentDictCode);
② DictMapper.xml映射配置文件
<select id="findDictListByParentDictCode" resultType="Dict">
<include refid="columns"></include>
from hse_dict
where parent_id=(select id from hse_dict where dict_code=#{parentDictCode} and is_deleted=0)
and is_deleted=0
</select>
1.1.1.2 业务层
① service-api项目中的DictService接口
/**
* 根据dictCode查询dict集合
* @param parentDictCode
* @return
*/
List<Dict> findDictListByParentDictCode(String parentDictCode);
/**
* 根据父节点的id查询其所有的子节点
* @param parentId
* @return
*/
List<Dict> findDictListByParentId(Long parentId);
② service-house项目中的DictServiceImpl实现类
@Override
public List<Dict> findDictListByParentDictCode(String parentDictCode) {
return dictMapper.findDictListByParentDictCode(parentDictCode);
}
@Override
public List<Dict> findDictListByParentId(Long parentId) {
return dictMapper.findListByParentId(parentId);
}
1.1.2 按条件分页加载小区列表
1.1.2.1 持久层
① 在service-house的com.atguigu.mapper包中创建CommunityMapper接口
public interface CommunityMapper extends BaseMapper<Community> {
}
② 在service-house的resources/mappers目录中创建CommunityMapper.xml映射配置文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.mapper.CommunityMapper">
<sql id="columns">
select id,name,description,province_id,city_id,area_id,plate_id,address,longitude,latitude,
build_years,property_price,property_company,developer,build_num,house_num,average_price,
create_time,update_time,is_deleted,
<!--
使用子查询根据小区的区域id，到dict表中查询name
hc是小区表的别名
-->
(select name from hse_dict where id = hc.area_id) areaName,
(select name from hse_dict where id = hc.plate_id) plateName
</sql>
<sql id="findPageWhere">
<where>
<if test="name != null and name != ''">
and name like "%"#{name}"%"
</if>
<if test="areaId != null and areaId != ''">
and area_id=#{areaId}
</if>
<if test="plateId != null and plateId != ''">
and plate_id=#{plateId}
</if>
and is_deleted = 0
</where>
</sql>
<select id="getById" resultType="Community">
<include refid="columns"></include>
from hse_community hc
where
is_deleted=0 and id = #{id}
</select>
<select id="findPage" resultType="Community">
<include refid="columns"></include>
from hse_community hc
<include refid="findPageWhere"></include>
order by id desc
</select>
</mapper>
1.1.2.2 业务层
① 在service-api项目中创建CommunityService接口
public interface CommunityService extends BaseService<Community> {
}
② 在service-house项目的com.atguigu.service.impl包中创建CommunityServiceImpl实现类
@Service(interfaceClass = CommunityService.class)
public class CommunityServiceImpl extends BaseServiceImpl<Community> implements CommunityService {
@Autowired
private CommunityMapper communityMapper;
@Override
protected BaseMapper<Community> getEntityMapper() {
return communityMapper;
}
}
1.2 服务消费者
1.2.1 DictController
web-admin项目中的DictController，新增代码
/**
* 根据父节点的id获取子节点数据列表
* @param parentId
* @return
*/
@RequestMapping("/findDictListByParentId/{parentId}")
public Result findDictListByParentId(@PathVariable("parentId") Long parentId) {
List<Dict> dictList = dictService.findDIctListByParentId(parentId);
return Result.ok(dictList);
}
测试:
访问:http://localhost:8000/dict/findListByParentId/1
1.2.2 CommunityController
在web-admin项目中创建CommunityController类
package com.atguigu.controller;
import com.alibaba.dubbo.config.annotation.Reference;
import com.atguigu.base.BaseController;
import com.atguigu.entity.Community;
import com.atguigu.entity.Dict;
import com.atguigu.service.CommunityService;
import com.atguigu.service.DictService;
import com.github.pagehelper.PageInfo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.List;
import java.util.Map;
/**
* 包名:com.atguigu.controller
*
* @author Leevi
* 日期2022-03-26 19:12
*/
@Controller
@RequestMapping("/community")
public class CommunityController extends BaseController {
@Reference
private CommunityService communityService;
@Reference
private DictService dictService;
private final static String PAGE_INDEX = "community/index";
@RequestMapping
public String index(@RequestParam Map<String,Object> filters, Model model){
//处理pageNum和pageSize为空的情况
if (filters.get("pageNum") == null || "".equals(filters.get("pageNum"))) {
filters.put("pageNum",1);
}
if (filters.get("pageSize") == null || "".equals(filters.get("pageSize"))) {
filters.put("pageSize",10);
}
//查询"beijing"的所有区域
List<Dict> areaList = dictService.findDictListByParentDictCode("beijing");
PageInfo<Community> pageInfo = communityService.findPage(filters);
//将分页数据存储到请求域
model.addAttribute("page",pageInfo);
//将搜索条件存储到请求域
//处理filters中没有areaId和plateId的情况
if (!filters.containsKey("areaId")){
filters.put("areaId",0);
}
if (!filters.containsKey("plateId")){
filters.put("plateId",0);
}
model.addAttribute("filters",filters);
//将areaList存储到请求域
model.addAttribute("areaList",areaList);
return PAGE_INDEX;
}
}
2.3 前端页面
2.3.1 创建小区首页
在templates目录中创建community目录，在community目录中创建index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:include="common/head :: head"></head>
<body class="gray-bg">
<form id="ec" th:action="@{/community}" method="post">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<table class="table form-table margin-bottom10">
<tr>
<td>
<input type="text" name="name" th:value="${#maps.containsKey(filters, 'name')} ? ${filters.name} : ''" placeholder="小区名称" class="input-sm form-control"/>
</td>
<td>
<select name="areaId" id="areaId" class="form-control">
<option value="">-请选择区域-</option>
<option th:each="item,it : ${areaList}" th:text="${item.name}" th:value="${item.id}" th:selected="${item.id } eq ${filters.areaId }">-选择区域-</option>
</select>
</td>
<td>
<select name="plateId" id="plateId" class="form-control">
<option value="">-请选择-</option>
</select>
</td>
</tr>
</table>
<div>
<button type="submit" class="btn btn-sm btn-primary"> 搜索</button>
<button type="button" class="btn btn-sm btn-primary create" sec:authorize="hasAuthority('community.create')"> 新增</button>
<button type="button" id="loading-example-btn" onclick="javascript:window.location.reload();" class="btn btn-white btn-sm">刷新</button>
</div>
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th>序号</th>
<th>小区名称</th>
<th>区域</th>
<th>板块</th>
<th>详细地址</th>
<th>建筑年代</th>
<th>创建时间</th>
<th>操作 </th>
</tr>
</thead>
<tbody>
<tr class="gradeX" th:each="item,it: ${page.list}">
<td class="text-center" th:text="${it.count}">11</td>
<td th:text="${item.name}">22</td>
<td th:text="${item.areaName}">33</td>
<td th:text="${item.plateName}">22</td>
<td th:text="${item.address}">22</td>
<td th:text="${item.buildYears}">22</td>
<td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33</td>
<td class="text-center">
<a class="edit" th:attr="data-id=${item.id}">修改</a>
<a class="delete" th:attr="data-id=${item.id}">删除</a>
</td>
</tr>
</tbody>
</table>
<div class="row" th:include="common/pagination :: pagination"></div>
</div>
</div>
</div>
</div>
</div>
</form>
<script th:inline="javascript">
$(function(){
//点击区域获取该区域的所有版块
$("#areaId").bind("change",function() {
var areaId = $("#areaId").val();
if(areaId == '') return
$("#plateId").empty();
$.get("/dict/findDictListByParentId/" + areaId,function(response) {
$("<option value=''>-请选择板块-</option>").appendTo("#plateId");
var res = JSON.parse(response)
$.each(res.data, function(i,item) {
var plateId = [[${filters.plateId}]];
if(item.id == plateId) {
$("<option></option>").val(item.id).text(item.name).attr('selected', 'true').appendTo("#plateId");
} else {
$("<option></option>").val(item.id).text(item.name).appendTo("#plateId");
}
});
});
});
// 触发 select 元素的 change 事件：
$("#areaId").trigger("change");
});
</script>
</body>
</html>
2.3.2 修改框架首页
frame/index.html页面添加导航
<li>
<a class="J_menuItem" href="/community" data-index="0">小区管理</a>
</li>
2、新增小区功能
2.1 访问新增页面功能
2.1.1 CommunityController
在web-admin项目中的CommunityController中新增
private final static String PAGE_CREATE = "community/create";
@RequestMapping("/create")
public String create(Model model){
List<Dict> areaList = dictService.findDictListByParentDictCode("beijing");
model.addAttribute("areaList",areaList);
return PAGE_CREATE;
}
2.1.2 index.html
修改web-admin项目中的templates/community/index.html页面，给新增绑定点击事件
$(".create").on("click",function () {
opt.openWin('/community/create','新增',630,430)
});
2.1.3 create.html页面
在web-admin项目中的templates/community目录中创建create.html页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<script type="text/javascript">
$(function () {
//根据区域id获取板块列表
$("#areaId").bind("change", function () {
var areaId = $("#areaId").val();
$("#plateId").empty();
$.get("/dict/findDictListByParentId/" + areaId, function (response) {
var res = JSON.parse(response)
$.each(res.data, function (i, item) {
$("<option></option>").val(item.id).text(item.name).appendTo("#plateId");
});
});
});
});
</script>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<form id="ec" action="/community/save" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">小区名称：</label>
<div class="col-sm-10">
<input type="text" name="name" id="name" class="form-control"/>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">描述：</label>
<div class="col-sm-10">
<input type="text" name="description" id="description" class="form-control"/>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">区域：</label>
<div class="col-sm-10">
<select name="areaId" id="areaId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${areaList}" th:text="${item.name}" th:value="${item.id}">
-选择区域-
</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">板块：</label>
<div class="col-sm-10">
<select name="plateId" id="plateId" class="form-control">
<option value="">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">详细地址：</label>
<div class="col-sm-10">
<input type="text" name="address" id="address" class="form-control"/>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">建筑年代：</label>
<div class="col-sm-10">
<input type="text" name="buildYears" id="buildYears" class="form-control"/>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">物业价格(元/平)：</label>
<div class="col-sm-10">
<input type="text" name="propertyPrice" id="propertyPrice" class="form-control"/>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">物业公司：</label>
<div class="col-sm-10">
<input type="text" name="propertyCompany" id="propertyCompany" class="form-control"/>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">开发商：</label>
<div class="col-sm-10">
<input type="text" name="developer" id="developer" class="form-control"/>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">楼栋数：</label>
<div class="col-sm-10">
<input type="text" name="buildNum" id="buildNum" class="form-control"/>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">房屋数：</label>
<div class="col-sm-10">
<input type="text" name="houseNum" id="houseNum" class="form-control"/>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">均价(万元/平)：</label>
<div class="col-sm-10">
<input type="text" name="averagePrice" id="averagePrice" class="form-control"/>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2 text-right">
<button class="btn btn-primary" type="submit">确定</button>
<button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
2.2 保存新增小区功能
2.2.1 CommunityMapper.xml映射配置文件
在service-house项目中的resources/mappers/CommunityMapper.xml中新增
<insert id="insert">
insert into hse_community
(id ,name ,description ,province_id ,city_id ,area_id ,plate_id ,address ,longitude ,latitude ,
build_years ,property_price ,property_company ,developer ,build_num ,house_num ,average_price)
values (#{id} ,#{name} ,#{description} ,#{provinceId} ,#{cityId} ,#{areaId} ,#{plateId} ,#{address} ,#{longitude} ,
#{latitude} ,#{buildYears} ,#{propertyPrice} ,#{propertyCompany} ,#{developer} ,#{buildNum} ,#{houseNum} ,#{averagePrice})
</insert>
2.2.2 CommunityController
在web-admin项目中的CommunityController中新增
@PostMapping("/save")
public String save(Community community,Model model){
communityService.insert(community);
return successPage(model,"添加小区成功");
}
3、修改小区功能
3.1 访问修改页面功能
3.1.1 CommunityMapper.xml
<select id="getById" resultType="Community">
<include refid="columns"></include>
from hse_community where id=#{id} and is_deleted=0
</select>
3.1.2 CommunityController
在web-admin项目中的CommunityController中新增
private final static String PAGE_EDIT = "community/edit";
@RequestMapping("/edit/{id}")
public String edit(@PathVariable("id") Long id, Model model){
//查询小区信息
Community community = communityService.getById(id);
model.addAttribute("community",community);
//查询beijing所有的区域
List<Dict> areaList = dictService.findDictListByParentDictCode("beijing");
model.addAttribute("areaList",areaList);
return PAGE_EDIT;
}
3.1.3 index.html
修改web-admin项目中的templates/community/index.html页面，给修改绑定点击事件
$(".edit").on("click",function () {
var id = $(this).attr("data-id");
opt.openWin('/community/edit/' + id,'修改',580,430);
});
3.1.4 edit.html
在web-admin项目中的templates/community目录中创建edit.html页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<script type="text/javascript">
$(function(){
$("#areaId").bind("change",function() {
var areaId = $("#areaId").val();
if(areaId == '') return
$("#plateId").empty();
$.get("/dict/findDictListByParentId/" + areaId,function(response) {
var res = JSON.parse(response)
$.each(res.data, function(i,item) {
var plateId = [[${community.plateId}]];
if(item.id == plateId) {
$("<option></option>").val(item.id).text(item.name).attr('selected', 'true').appendTo("#plateId");
} else {
$("<option></option>").val(item.id).text(item.name).appendTo("#plateId");
}
});
});
});
// 触发 select 元素的 change 事件：
$("#areaId").trigger("change");
});
</script>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<form id="ec" th:action="@{/community/update}" method="post" class="form-horizontal">
<input type="hidden" name="id" th:value="${community.id}">
<div class="form-group">
<label class="col-sm-2 control-label">小区名称：</label>
<div class="col-sm-10">
<input type="text" name="name" id="name" th:value="${community.name}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">描述：</label>
<div class="col-sm-10">
<input type="text" name="description" id="description" th:value="${community.description}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">区域：</label>
<div class="col-sm-10">
<select name="areaId" id="areaId" class="form-control">
<option value="">-选择区域-</option>
<option th:each="item,it : ${areaList}" th:text="${item.name}" th:value="${item.id}" th:selected="${item.id} eq ${community.areaId}">-选择区域-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">板块：</label>
<div class="col-sm-10">
<select name="plateId" id="plateId" class="form-control">
<option value="">-选择板块-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">详细地址：</label>
<div class="col-sm-10">
<input type="text" name="address" id="address" th:value="${community.address}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">建筑年代：</label>
<div class="col-sm-10">
<input type="text" name="buildYears" id="buildYears" th:value="${community.buildYears}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">物业价格(元/平)：</label>
<div class="col-sm-10">
<input type="text" name="propertyPrice" id="propertyPrice" th:value="${community.propertyPrice}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">物业公司：</label>
<div class="col-sm-10">
<input type="text" name="propertyCompany" id="propertyCompany" th:value="${community.propertyCompany}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">开发商：</label>
<div class="col-sm-10">
<input type="text" name="developer" id="developer" th:value="${community.developer}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">楼栋数：</label>
<div class="col-sm-10">
<input type="text" name="buildNum" id="buildNum" th:value="${community.buildNum}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">房屋数：</label>
<div class="col-sm-10">
<input type="text" name="houseNum" id="houseNum" th:value="${community.houseNum}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">均价(万元/平)：</label>
<div class="col-sm-10">
<input type="text" name="averagePrice" id="averagePrice" th:value="${community.averagePrice}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group posf">
<div class="col-sm-4 col-sm-offset-2 text-right">
<button class="btn btn-primary" type="submit">确定</button>
<button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
3.2 保存修改功能
3.2.1 CommunityMapper.xml映射配置文件
在service-house项目中的resources/mappers/CommunityMapper.xml中新增
<update id="update">
update hse_community set
<if test="name != null">
name = #{name} ,
</if>
<if test="description != null">
description = #{description} ,
</if>
<if test="provinceId != null">
province_id = #{provinceId} ,
</if>
<if test="cityId != null">
city_id = #{cityId} ,
</if>
<if test="areaId != null">
area_id = #{areaId} ,
</if>
<if test="plateId != null">
plate_id = #{plateId} ,
</if>
<if test="address != null">
address = #{address} ,
</if>
<if test="longitude != null">
longitude = #{longitude} ,
</if>
<if test="latitude != null">
latitude = #{latitude} ,
</if>
<if test="buildYears != null">
build_years = #{buildYears} ,
</if>
<if test="propertyPrice != null">
property_price = #{propertyPrice} ,
</if>
<if test="propertyCompany != null">
property_company = #{propertyCompany} ,
</if>
<if test="developer != null">
developer = #{developer} ,
</if>
<if test="buildNum != null">
build_num = #{buildNum} ,
</if>
<if test="houseNum != null">
house_num = #{houseNum} ,
</if>
<if test="averagePrice != null">
average_price = #{averagePrice} ,
</if>
update_time = now()
where
id = #{id}
</update>
3.2.2 CommunityController
在web-admin项目中的CommunityController中新增
@PostMapping("/update")
public String update(Community community,Model model){
communityService.update(community);
return successPage(model,"修改小区信息成功");
}
4、删除小区功能
4.1 CommunityMapper.xml映射配置文件
<update id="delete">
update hse_community set
update_time = now() ,
is_deleted = 1
where
id = #{id}
</update>
4.2 CommunityController
在web-admin项目中的CommunityController中新增
private final static String LIST_ACTION = "redirect:/community";
@RequestMapping("/delete/{id}")
public String delete(@PathVariable("id") Long id){
communityService.delete(id);
return LIST_ACTION;
}
4.2 index.html
修改web-admin项目中的templates/community/index.html页面，给删除绑定点击事件
$(".delete").on("click",function(){
var id = $(this).attr("data-id");
opt.confirm('/community/delete/'+id);
});
四、房源管理模块
1、分页显示房源列表功能
1.1 加载所有小区
因为查询房源信息的条件中有根据小区查询，所以需要查询所有小区
1.1.1 持久层
1.1.1.1 CommunityMapper接口
在service-house项目中的com.atguigu.mapper.CommunityMapper接口中新增
List<Community> findAll();
1.1.1.2 CommunityMapper.xml映射配置文件
在service-house项目中的resources/mapper/CommunityMapper.xml文件中新增
<!--查询所有小区-->
<select id="findAll" resultType="Community">
select id,name
from hse_community
where
is_deleted = 0
order by id desc
</select>
1.1.2 业务层
1.1.2.1 CommunityService接口
在service-api项目中的com.atguigu.service.CommunityService接口中新增
List<Community> findAll();
1.1.2.2 CommunityServiceImpl实现类
在service-house项目中的com.atguigu.service.impl.CommunityServiceImpl实现类中新增
@Override
public List<Community> findAll() {
return communityMapper.findAll();
}
1.2 按条件分页加载房源
1.2.1 持久层
1.2.1.1 HouseMapper接口
在service-house项目的com.atguigu.mapper包中新建HouseMapper接口
public interface HouseMapper extends BaseMapper<House> {
}
1.1.1.2 HouseMapper.xml映射配置文件
在service-house项目的resources/mappers目录中新建HouseMapper.xml映射配置文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.mapper.HouseMapper">
<sql id="columns">
select id,community_id,name,description,total_price,unit_price,build_area,inside_area,
house_type_id,floor_id,build_structure_id,direction_id,decoration_id,house_use_id,
elevator_ratio,listing_date,last_trade_date,status,create_time,update_time,is_deleted
</sql>
<select id="getById" resultType="House">
<include refid="columns"></include>
from hse_house hh
where id=#{id} and is_deleted=0
</select>
<sql id="findPageWhere">
<where>
<if test="communityId != null and communityId != ''">
and community_id = #{communityId}
</if>
<if test="name != null and name != ''">
and name like CONCAT('%',#{name},'%')
</if>
<if test="houseTypeId != null and houseTypeId != ''">
and house_type_id = #{houseTypeId}
</if>
<if test="floorId != null and floorId != ''">
and floor_id = #{floorId}
</if>
<if test="buildStructureId != null and buildStructureId != ''">
and build_structure_id = #{buildStructureId}
</if>
<if test="directionId != null and directionId != ''">
and direction_id = #{directionId}
</if>
<if test="decorationId != null and decorationId != ''">
and decoration_id = #{decorationId}
</if>
<if test="houseUseId != null and houseUseId != ''">
and house_use_id = #{houseUseId}
</if>
and is_deleted = 0
</where>
</sql>
<select id="findPage" resultType="House">
<include refid="columns" />
from hse_house hh
<include refid="findPageWhere"/>
order by id desc
</select>
</mapper>
1.2.2 业务层
1.2.2.1 HouseService接口
在service-api项目中的com.atguigu.service包中新建HouseService接口
public interface HouseService extends BaseService<House> {
}
1.2.2.2 HouseServiceImpl实现类
在service-house项目中的com.atguigu.service.impl包中新建HouseServiceImpl实现类
@Service(interfaceClass = HouseService.class)
public class HouseServiceImpl extends BaseServiceImpl<House> implements HouseService {
@Autowired
private HouseMapper houseMapper;
@Override
protected BaseMapper<House> getEntityMapper() {
return houseMapper;
}
}
1.2.3 表现层
在model项目中的com.atguigu.en包下创建一个枚举类
public enum DictCode {
HOUSETYPE("houseType"),FLOOR("floor"),BUILDSTRUCTURE("buildStructure"),
DECORATION("decoration"),DIRECTION("direction"),HOUSEUSE("houseUse");
private String message;
DictCode(String message) {
this.message = message;
}
public String getMessage() {
return message;
}
}
在web-admin项目的com.atguigu.controller包中新建HouseController
@Controller
@RequestMapping("/house")
public class HouseController {
private static final String PAGE_INDEX = "house/index";
@Reference
private HouseService houseService;
@Reference
private CommunityService communityService;
@Reference
private DictService dictService;
@RequestMapping
public String index(@RequestParam Map<String,Object> filters, Model model){
//处理pageNum和pageSize为空的情况
if (!filters.containsKey("pageNum")) {
filters.put("pageNum",1);
}
if (!filters.containsKey("pageSize")) {
filters.put("pageSize",10);
}
//1. 分页搜索房源列表信息
PageInfo<House> pageInfo = houseService.findPage(filters);
//2. 将房源分页信息存储到请求域
model.addAttribute("page",pageInfo);
//3. 将搜索条件存储到请求域
model.addAttribute("filters",filters);
//4. 查询所有小区、以及字典里的各种列表存储到请求域
saveAllDictToRequestScope(model);
return PAGE_INDEX;
}
/**
* 查询所有小区以及字典里的各种列表存储到请求域
* @param model
*/
private void saveAllDictToRequestScope(Model model) {
//2. 查询所有小区
List<Community> communityList = communityService.findAll();
//3. 查询各种初始化列表:户型列表、楼层列表、装修情况列表....
List<Dict> houseTypeList = dictService.findDictListByParentDictCode(DictCode.HOUSETYPE.getMessage());
List<Dict> floorList = dictService.findDictListByParentDictCode(DictCode.FLOOR.getMessage());
List<Dict> buildStructureList = dictService.findDictListByParentDictCode(DictCode.BUILDSTRUCTURE.getMessage());
List<Dict> directionList = dictService.findDictListByParentDictCode(DictCode.DIRECTION.getMessage());
List<Dict> decorationList = dictService.findDictListByParentDictCode(DictCode.DECORATION.getMessage());
List<Dict> houseUseList = dictService.findDictListByParentDictCode(DictCode.HOUSEUSE.getMessage());
//5. 将所有小区存储到请求域
model.addAttribute("communityList",communityList);
//6. 将各种列表存储到请求域
model.addAttribute("houseTypeList",houseTypeList);
model.addAttribute("floorList",floorList);
model.addAttribute("buildStructureList",buildStructureList);
model.addAttribute("directionList",directionList);
model.addAttribute("decorationList",decorationList);
model.addAttribute("houseUseList",houseUseList);
}
}
1.2.4 前端页面
在web-admin项目的templates目录中创建house目录，在house目录中新建index.html页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:include="common/head :: head"></head>
<body class="gray-bg">
<form id="ec" th:action="@{/house}" method="post">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-content">
<table class="table form-table margin-bottom10">
<tr>
<td>
<input type="text" name="name" th:value="${#maps.containsKey(filters, 'name')} ? ${filters.name} : ''" placeholder="房源名称" class="input-sm form-control"/>
</td>
<td>
<select name="communityId" id="communityId" class="form-control">
<option value="">-请选择小区-</option>
<option th:each="item,it : ${communityList}" th:text="${item.name}" th:value="${item.id}" th:selected="${#maps.containsKey(filters, 'communityId')} ? ${item.id} eq ${filters.communityId} : false">-选择小区-</option>
</select>
</td>
<td>
<select name="houseTypeId" id="houseTypeId" class="form-control">
<option value="">-请选择户型-</option>
<option th:each="item,it : ${houseTypeList}" th:text="${item.name}" th:value="${item.id}" th:selected="${#maps.containsKey(filters, 'houseTypeId')} ? ${item.id} eq ${filters.houseTypeId} : false">-请选择-</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="floorId" id="floorId" class="form-control">
<option value="">-请选择楼层-</option>
<option th:each="item,it : ${floorList}" th:text="${item.name}" th:value="${item.id}" th:selected="${#maps.containsKey(filters, 'floorId')} ? ${item.id} eq ${filters.floorId} : false">-请选择-</option>
</select>
</td>
<td>
<select name="buildStructureId" id="buildStructureId" class="form-control">
<option value="">-请选择建筑结构-</option>
<option th:each="item,it : ${buildStructureList}" th:text="${item.name}" th:value="${item.id}" th:selected="${#maps.containsKey(filters, 'buildStructureId')} ? ${item.id} eq ${filters.buildStructureId} : false">-请选择-</option>
</select>
</td>
<td>
<select name="directionId" id="directionId" class="form-control">
<option value="">-请朝向-</option>
<option th:each="item,it : ${directionList}" th:text="${item.name}" th:value="${item.id}" th:selected="${#maps.containsKey(filters, 'directionId')} ? ${item.id} eq ${filters.directionId} : false">-请选择-</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="decorationId" id="decorationId" class="form-control">
<option value="">-请选择装修情况-</option>
<option th:each="item,it : ${decorationList}" th:text="${item.name}" th:value="${item.id}" th:selected="${#maps.containsKey(filters, 'decorationId')} ? ${item.id} eq ${filters.decorationId} : false">-请选择-</option>
</select>
</td>
<td>
<select name="houseUseId" id="houseUseId" class="form-control">
<option value="">-请选择房屋用途-</option>
<option th:each="item,it : ${houseUseList}" th:text="${item.name}" th:value="${item.id}" th:selected="${#maps.containsKey(filters, 'houseUseId')} ? ${item.id} eq ${filters.houseUseId} : false">-请选择-</option>
</select>
</td>
<td>
</td>
</tr>
</table>
<div>
<button type="submit" class="btn btn-sm btn-primary"> 搜索</button>
<button type="button" class="btn btn-sm btn-primary create"> 新增</button>
<button type="button" id="loading-example-btn" onclick="javascript:window.location.reload();" class="btn btn-white btn-sm">刷新</button>
</div>
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th>序号</th>
<th>房源名称</th>
<th>总价：万元</th>
<th>单价：元/平米</th>
<th>建筑面积</th>
<th>套内面积</th>
<th>挂牌日期</th>
<th>上次交易日期</th>
<th>状态</th>
<th width="160">操作 </th>
</tr>
</thead>
<tbody>
<tr class="gradeX" th:each="item,it: ${page.list}">
<td class="text-center" th:text="${it.count}">11</td>
<td th:text="${item.name}">22</td>
<td th:text="${item.totalPrice}">22</td>
<td th:text="${item.unitPrice}">22</td>
<td th:text="${item.buildArea}">22</td>
<td th:text="${item.insideArea}">22</td>
<td th:text="${item.listingDateString}">22</td>
<td th:text="${item.lastTradeDateString}">22</td>
<td th:text="${item.status == 1 ? '已发布' : '未发布'}">22</td>
<td class="text-center">
<a class="edit" th:attr="data-id=${item.id}">修改</a>
<a class="delete" th:attr="data-id=${item.id}">删除</a>
</td>
</tr>
</tbody>
</table>
<div class="row" th:include="common/pagination :: pagination"></div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
2、新增房源功能
2.1 进入新增房源界面
2.1.1 表现层
在web-admin项目中的com.atguigu.controller.HouseController中新增
private static final String PAGE_CREATE = "house/create";
@RequestMapping("/create")
public String create(Model model){
//查询房屋初始化信息存储到model中
saveAllDictToRequestScope(model);
return PAGE_CREATE;
}
2.1.2 index.html
在web-admin项目中的templates/house/index.html中给新增绑定点击事件
<script th:inline="javascript">
$(function () {
$(".create").on("click", function () {
opt.openWin('/house/create', '新增', 630, 430)
});
});
</script>
2.1.3 create.html
在web-admin项目中的templates/house中新建create.html页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<form id="ec" th:action="@{/house/save}" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">小区：</label>
<div class="col-sm-10">
<select name="communityId" id="communityId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${communityList}" th:text="${item.name}" th:value="${item.id}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">房源名称：</label>
<div class="col-sm-10">
<input type="text" name="name" id="name" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">描述：</label>
<div class="col-sm-10">
<input type="text" name="description" id="description" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">总价：万元：</label>
<div class="col-sm-10">
<input type="text" name="totalPrice" id="totalPrice" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">单位价格：</label>
<div class="col-sm-10">
<input type="text" name="unitPrice" id="unitPrice" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">建筑面积：</label>
<div class="col-sm-10">
<input type="text" name="buildArea" id="buildArea" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">套内面积：</label>
<div class="col-sm-10">
<input type="text" name="insideArea" id="insideArea" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">户型：</label>
<div class="col-sm-10">
<select name="houseTypeId" id="houseTypeId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${houseTypeList}" th:text="${item.name}" th:value="${item.id}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">楼层：</label>
<div class="col-sm-10">
<select name="floorId" id="floorId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${floorList}" th:text="${item.name}" th:value="${item.id}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">建筑结构：</label>
<div class="col-sm-10">
<select name="buildStructureId" id="buildStructureId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${buildStructureList}" th:text="${item.name}" th:value="${item.id}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">朝向：</label>
<div class="col-sm-10">
<select name="directionId" id="directionId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${directionList}" th:text="${item.name}" th:value="${item.id}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">装修情况：</label>
<div class="col-sm-10">
<select name="decorationId" id="decorationId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${decorationList}" th:text="${item.name}" th:value="${item.id}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">房屋用途：</label>
<div class="col-sm-10">
<select name="houseUseId" id="houseUseId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${houseUseList}" th:text="${item.name}" th:value="${item.id}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">电梯比例：</label>
<div class="col-sm-10">
<input type="text" name="elevatorRatio" id="elevatorRatio" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">挂牌日期：</label>
<div class="col-sm-10">
<input name="listingDateString" class="form-control layer-date" placeholder="YYYY-MM-DD" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
<label class="laydate-icon"></label>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">上次交易日期：</label>
<div class="col-sm-10">
<input name="lastTradeDateString" class="form-control layer-date" placeholder="YYYY-MM-DD" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
<label class="laydate-icon"></label>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2 text-right">
<button class="btn btn-primary" type="submit">确定</button>
<button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
2.2 保存新增
2.2.1 持久层
在service-house项目的resources/mappers/HouseMapper.xml文件中新增
<insert id="insert" useGeneratedKeys="true" keyProperty="id">
insert into hse_house (
id ,
community_id ,
name ,
description ,
total_price ,
unit_price ,
build_area ,
inside_area ,
house_type_id ,
floor_id ,
build_structure_id ,
direction_id ,
decoration_id ,
house_use_id ,
elevator_ratio ,
listing_date ,
last_trade_date ,
status
) values (
#{id} ,
#{communityId} ,
#{name} ,
#{description} ,
#{totalPrice} ,
#{unitPrice} ,
#{buildArea} ,
#{insideArea} ,
#{houseTypeId} ,
#{floorId} ,
#{buildStructureId} ,
#{directionId} ,
#{decorationId} ,
#{houseUseId} ,
#{elevatorRatio} ,
#{listingDate} ,
#{lastTradeDate} ,
#{status}
)
</insert>
2.2.2 表现层
在model项目中新建com.atguigu.en包，在该包中创建HouseStatus枚举类
public enum HouseStatus {
PUBLISHED(1,"已发布"), UNPUBLISHED(0,"未发布");
public int code;
public String message;
HouseStatus(int code, String message) {
this.code = code;
this.message = message;
}
}
在web-admin项目中的HouseController中新增
@PostMapping("/save")
public String save(House house,Model model){
//未发布
house.setStatus(HouseStatus.UNPUBLISHED.getCode());
houseService.insert(house);
return successPage(model,"添加房源信息成功");
}
3、修改房源功能
3.1 进入修改房源页面
3.1.1 持久层
在service-house项目中的resources/mappers/HouseMapper.xml中新增
<select id="getById" resultType="House">
<include refid="columns"></include>
from hse_house
where id=#{id} and is_deleted=0
</select>
3.1.2 表现层
在web-admin项目中的HouseController中新增
private static final String PAGE_EDIT = "house/edit";
@RequestMapping("/edit/{id}")
public String edit(@PathVariable("id") Long id,Model model){
House house = houseService.getById(id);
model.addAttribute("house",house);
saveAllDictToRequestScope(model);
return PAGE_EDIT;
}
3.1.3 index.html
在web-admin项目中的templates/house/index.html中给修改绑定点击事件
$(".edit").on("click", function () {
var id = $(this).attr("data-id");
opt.openWin('/house/edit/' + id, '修改', 630, 430);
});
3.1.4 edit.html
在web-admin项目中的templates/house中新建edit.html页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<form id="ec" th:action="@{/house/update}" method="post" class="form-horizontal">
<input type="hidden" name="id" th:value="${house.id}">
<div class="form-group">
<label class="col-sm-2 control-label">小区：</label>
<div class="col-sm-10">
<select name="communityId" id="communityId" class="form-control">
<option value="">-选择小区-</option>
<option th:each="item,it : ${communityList}" th:text="${item.name}" th:value="${item.id}" th:selected="${item.id} eq ${house.communityId}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">房源名称：</label>
<div class="col-sm-10">
<input type="text" name="name" id="name" th:value="${house.name}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">描述：</label>
<div class="col-sm-10">
<input type="text" name="description" id="description" th:value="${house.description}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">总价：万元：</label>
<div class="col-sm-10">
<input type="text" name="totalPrice" id="totalPrice" th:value="${house.totalPrice}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">单位价格：</label>
<div class="col-sm-10">
<input type="text" name="unitPrice" id="unitPrice" th:value="${house.unitPrice}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">建筑面积：</label>
<div class="col-sm-10">
<input type="text" name="buildArea" id="buildArea" th:value="${house.buildArea}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">套内面积：</label>
<div class="col-sm-10">
<input type="text" name="insideArea" id="insideArea" th:value="${house.insideArea}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">户型：</label>
<div class="col-sm-10">
<select name="houseTypeId" id="houseTypeId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${houseTypeList}" th:text="${item.name}" th:value="${item.id}" th:selected="${item.id} eq ${house.houseTypeId}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">楼层：</label>
<div class="col-sm-10">
<select name="floorId" id="floorId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${floorList}" th:text="${item.name}" th:value="${item.id}" th:selected="${item.id} eq ${house.floorId}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">建筑结构：</label>
<div class="col-sm-10">
<select name="buildStructureId" id="buildStructureId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${buildStructureList}" th:text="${item.name}" th:value="${item.id}" th:selected="${item.id} eq ${house.buildStructureId}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">朝向：</label>
<div class="col-sm-10">
<select name="directionId" id="directionId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${directionList}" th:text="${item.name}" th:value="${item.id}" th:selected="${item.id} eq ${house.directionId}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">装修情况：</label>
<div class="col-sm-10">
<select name="decorationId" id="decorationId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${decorationList}" th:text="${item.name}" th:value="${item.id}" th:selected="${item.id} eq ${house.decorationId}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">房屋用途：</label>
<div class="col-sm-10">
<select name="houseUseId" id="houseUseId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${houseUseList}" th:text="${item.name}" th:value="${item.id}" th:selected="${item.id} eq ${house.houseUseId}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">电梯比例：</label>
<div class="col-sm-10">
<input type="text" name="elevatorRatio" id="elevatorRatio" th:value="${house.elevatorRatio}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">挂牌日期：</label>
<div class="col-sm-10">
<input name="listingDateString" th:value="${house.listingDateString}" class="form-control layer-date" placeholder="YYYY-MM-DD" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
<label class="laydate-icon"></label>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">上次交易日期：</label>
<div class="col-sm-10">
<input name="lastTradeDateString" th:value="${house.lastTradeDateString}" class="form-control layer-date" placeholder="YYYY-MM-DD" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
<label class="laydate-icon"></label>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group posf">
<div class="col-sm-4 col-sm-offset-2 text-right">
<button class="btn btn-primary" type="submit">确定</button>
<button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
3.2 保存修改
3.2.1 持久层
在service-house项目的resources/mappers/HouseMapper.xml文件中新增
<update id="update" >
update hse_house set
<if test="communityId != null">
community_id = #{communityId} ,
</if>
<if test="name != null">
name = #{name} ,
</if>
<if test="description != null">
description = #{description} ,
</if>
<if test="totalPrice != null">
total_price = #{totalPrice} ,
</if>
<if test="unitPrice != null">
unit_price = #{unitPrice} ,
</if>
<if test="buildArea != null">
build_area = #{buildArea} ,
</if>
<if test="insideArea != null">
inside_area = #{insideArea} ,
</if>
<if test="houseTypeId != null">
house_type_id = #{houseTypeId} ,
</if>
<if test="floorId != null">
floor_id = #{floorId} ,
</if>
<if test="buildStructureId != null">
build_structure_id = #{buildStructureId} ,
</if>
<if test="directionId != null">
direction_id = #{directionId} ,
</if>
<if test="decorationId != null">
decoration_id = #{decorationId} ,
</if>
<if test="houseUseId != null">
house_use_id = #{houseUseId} ,
</if>
<if test="elevatorRatio != null">
elevator_ratio = #{elevatorRatio} ,
</if>
<if test="listingDate != null">
listing_date = #{listingDate} ,
</if>
<if test="lastTradeDate != null">
last_trade_date = #{lastTradeDate} ,
</if>
<if test="status != null">
status = #{status} ,
</if>
update_time = now()
where
id = #{id}
</update>
3.2.2 表现层
在web-admin项目中的HouseController中新增
@PostMapping("/update")
public String update(House house,Model model){
houseService.update(house);
return successPage(model,"修改房源信息成功");
}
4、删除房源功能
4.1 持久层
在service-house项目中的resources/mappers/HouseMapper.xml中新增
<update id="delete">
update hse_house set is_deleted=1 where id=#{id}
</update>
4.2 表现层
在web-admin项目中的HouseController中新增
private static final String LIST_ACTION = "redirect:/house";
@RequestMapping("/delete/{id}")
public String delete(@PathVariable("id") Long id){
houseService.delete(id);
return LIST_ACTION;
}
4.3 index.html
在web-admin项目中的templates/house/index.html中给删除绑定点击事件
$(".delete").on("click", function () {
var id = $(this).attr("data-id");
opt.confirm('/house/delete/' + id);
});
5、发布房源
5.1 业务层
5.1.1 HouseService接口
在service-api项目的HouseService接口中新增
void publish(Long id, Integer status);
5.1.2 HouseServiceImpl实现类
在service-house项目的HouseServiceImpl实现类中新增
@Override
public void publish(Long id, Integer status) {
//要发布房源其实就是修改房源的status的值
House house = new House();
//设置房源的status
house.setStatus(status);
//设置房源的id
house.setId(id);
houseMapper.update(house);
}
5.2 表现层
在web-admin项目中的HouseController中新增
@GetMapping("/publish/{id}/{status}")
public String publish(@PathVariable("id") Long id,@PathVariable("status") Integer status){
houseService.publish(id,status);
return LIST_ACTION;
}
5.3 前端页面
5.3.1 index.html
5.3.1.1 新增发布和取消发布按钮
<a class="publish" th:if="${item.status} eq '0'" th:attr="data-id=${item.id},data-status=1">发布</a>
<a class="publish" th:if="${item.status} eq '1'" th:attr="data-id=${item.id},data-status=0">取消发布</a>
5.3.1.2 绑定点击事件
//给发布和取消发布按钮绑定点击事件
$(".publish").on("click",function () {
//获取房源id
var id = $(this).attr("data-id");
//获取data-status的值,如果点击的是发布那么该值就是1，如果点击的是取消发布那么该值就是0
var status = $(this).attr("data-status");
//弹出确认框，点击确定就能发送请求
opt.confirm("/house/publish/" + id + "/" + status, "确定该操作吗？");
});
6、房源详情
6.1 效果
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oSSJGIa9-1661870815231)(images/05/img_006.png)]](https://i-blog.csdnimg.cn/blog_migrate/0312a2417da1c3138eb75463d5014c33.png)
需要查询的内容:
- 房源详情
- 小区详情(之前已经编写好)
- 房源图片列表和房产图片列表
- 经纪人列表
- 房东列表
6.2 查询房源图片列表和房产图片列表
6.2.1 持久层
6.2.1.1 HouseImageMapper接口
在service-house项目中的com.atguigu.mapper包下创建HouseImageMapper接口
public interface HouseImageMapper extends BaseMapper<HouseImage> {
List<HouseImage> findHouseImageList(@Param("houseId") Long houseId, @Param("type") Integer type);
}
6.2.1.2 HouseImageMapper.xml映射配置文件
在service-house项目中的resources/mappers目录中创建HouseImageMapper.xml映射配置文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.mapper.HouseImageMapper">
<sql id="columns">
select id,house_id,image_name,image_url,type,create_time,update_time,is_deleted
</sql>
<select id="findHouseImageList" resultType="HouseImage">
<include refid="columns"></include>
from hse_house_image
where house_id=#{houseId} and type=#{type} and is_deleted=0
</select>
</mapper>
6.2.2 业务层
6.2.2.1 HouseImageService接口
在service-api项目中创建com.atguigu.service.HouseImageService接口
public interface HouseImageService extends BaseService<HouseImage> {
List<HouseImage> findHouseImageList(Long houseId,Integer type);
}
6.2.2.2 HouseImageServiceImpl实现类
在service-house项目中创建com.atguigu.service.impl.HouseImageServiceImpl实现类
@Service(interfaceClass = HouseImageService.class)
public class HouseImageServiceImpl extends BaseServiceImpl<HouseImage> implements HouseImageService {
@Autowired
private HouseImageMapper houseImageMapper;
@Override
protected BaseMapper<HouseImage> getEntityMapper() {
return houseImageMapper;
}
@Override
public List<HouseImage> findHouseImageList(Long houseId, Integer type) {
return houseImageMapper.findHouseImageList(houseId,type);
}
}
6.3 查询房源经纪人列表
6.3.1 持久层
6.3.1.1 HouseBrokerMapper接口
在service-house项目中的com.atguigu.mapper包下创建HouseBrokerMapper接口
public interface HouseBrokerMapper extends BaseMapper<HouseBroker> {
List<HouseBroker> findHouseBrokerListByHouseId(Long houseId);
}
6.3.1.2 HouseBrokerMapper.xml映射配置文件
在service-house项目中的resources/mappers目录中创建HouseBrokerMapper.xml映射配置文件
<mapper namespace="com.atguigu.mapper.HouseBrokerMapper">
<!-- 用于select查询公用抽取的列 -->
<sql id="columns">
select id,house_id,broker_id,broker_name,broker_head_url,create_time,update_time,is_deleted
</sql>
<select id="findHouseBrokerListByHouseId" resultType="HouseBroker">
<include refid="columns"></include>
from hse_house_broker
where house_id=#{houseId} and is_deleted=0
</select>
</mapper>
6.3.2 业务层
6.3.2.1 HouseBrokerService接口
在service-api项目中创建com.atguigu.service.HouseBrokerService接口
public interface HouseBrokerService extends BaseService<HouseBroker> {
List<HouseBroker> findHouseBrokerListByHouseId(Long houseId);
}
6.3.2.2 HouseBrokerServiceImpl实现类
在service-house项目中创建com.atguigu.service.impl.HouseBrokerServiceImpl实现类
@Service(interfaceClass = HouseBrokerService.class)
public class HouseBrokerServiceImpl extends BaseServiceImpl<HouseBroker> implements HouseBrokerService {
@Autowired
private HouseBrokerMapper houseBrokerMapper;
@Override
protected BaseMapper<HouseBroker> getEntityMapper() {
return houseBrokerMapper;
}
@Override
public List<HouseBroker> findHouseBrokerListByHouseId(Long houseId) {
return houseBrokerMapper.findHouseBrokerListByHouseId(houseId);
}
}
6.4 查询房东列表
6.4.1 持久层
6.4.1.1 HouseUserMapper接口
在service-house项目中的com.atguigu.mapper包下创建HouseUserMapper接口
public interface HouseUserMapper extends BaseMapper<HouseUser> {
List<HouseUser> findHouseUserListByHouseId(Long houseId);
}
6.4.1.2 HouseUserMapper.xml映射配置文件
在service-house项目中的resources/mappers目录中创建HouseUserMapper.xml映射配置文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.mapper.HouseUserMapper">
<!-- 用于select查询公用抽取的列 -->
<sql id="columns">
select id,house_id,name,phone,sex,id_no,create_time,update_time,is_deleted
</sql>
<select id="findHouseUserListByHouseId" resultType="HouseUser">
<include refid="columns"></include>
from hse_house_user where house_id=#{houseId} and is_deleted=0
</select>
</mapper>
6.4.2 业务层
6.4.2.1 HouseUserService接口
在service-api项目中创建com.atguigu.service.HouseUserService接口
public interface HouseUserService extends BaseService<HouseUser> {
List<HouseUser> findHouseUserListByHouseId(Long houseId);
}
6.4.2.2 HouseUserServiceImpl实现类
在service-house项目中创建com.atguigu.service.impl.HouseUserServiceImpl实现类
@Service(interfaceClass = HouseUserService.class)
public class HouseUserServiceImpl extends BaseServiceImpl<HouseUser> implements HouseUserService {
@Autowired
private HouseUserMapper houseUserMapper;
@Override
protected BaseMapper<HouseUser> getEntityMapper() {
return houseUserMapper;
}
@Override
public List<HouseUser> findHouseUserListByHouseId(Long houseId) {
return houseUserMapper.findHouseUserListByHouseId(houseId);
}
}
6.5 查询房源详情
修改service-house项目中的resources/mappers/HouseMapper.xml文件
<select id="getById" resultType="House">
<include refid="columns"></include>,
(select name from hse_dict where id=hh.house_type_id ) houseTypeName,
(select name from hse_dict where id=hh.floor_id ) floorName,
(select name from hse_dict where id=hh.build_structure_id ) buildStructureName,
(select name from hse_dict where id=hh.direction_id ) directionName,
(select name from hse_dict where id=hh.decoration_id ) decorationName,
(select name from hse_dict where id=hh.house_use_id ) houseUseName
from hse_house hh
where id=#{id} and is_deleted=0
</select>
6.6 表现层
在web-admin项目的HouseController中新增
private static final String PAGE_SHOW = "house/show";
@GetMapping("/{houseId}")
public String detail(@PathVariable("houseId") Long houseId,Model model){
//1. 根据id查询房源详情
House house = houseService.getById(houseId);
//2. 根据小区id查询小区详情
Community community = communityService.getById(house.getCommunityId());
//3. 根据房源id查询房源的房源图片列表
List<HouseImage> houseImage1List = houseImageService.findHouseImageList(houseId, 1);
//4. 根据房源id查询房源的房产图片列表
List<HouseImage> houseImage2List = houseImageService.findHouseImageList(houseId, 2);
//5. 根据房源id查询房源的经纪人列表
List<HouseBroker> houseBrokerList = houseBrokerService.findHouseBrokerListByHouseId(houseId);
//6. 根据房源id查询房源的房东列表
List<HouseUser> houseUserList = houseUserService.findHouseUserListByHouseId(houseId);
//将上述查询到的内容存储到请求域
model.addAttribute("house",house);
model.addAttribute("community",community);
model.addAttribute("houseImage1List",houseImage1List);
model.addAttribute("houseImage2List",houseImage2List);
model.addAttribute("houseBrokerList",houseBrokerList);
model.addAttribute("houseUserList",houseUserList);
return PAGE_SHOW;
}
6.7 前端页面
6.7.1 index.html
① 添加详情按钮
<a class="detail" th:attr="data-id=${item.id}">详情</a>
② 绑定点击事件
$(".detail").on("click",function () {
var id = $(this).attr("data-id");
window.location = "/house/" + id;
});
6.7.2 show.html
在web-admin项目的templates/house目录中新增show.html文件
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:include="common/head :: head"></head>
<body class="gray-bg">
<div class="row">
<div class="col-sm-12">
<div class="wrapper wrapper-content animated fadeInUp">
<div class="ibox">
<div class="ibox-content">
<div class="row">
<div class="col-sm-12">
<div class="m-b-md">
<a th:href="@{/house/{id}(id=${house.id})}" class="btn btn-white btn-xs pull-right">刷新</a>
<a href="/house" class="btn btn-white btn-xs pull-right">返回</a>
<h2 th:text="${house.name}">金色城市</h2>
</div>
<dl class="dl-horizontal">
<dt>状态：</dt>
<dd><span class="label label-primary" th:text="${house.status == 1 ? '已发布' : '未发布'}">进行中</span>
</dd>
</dl>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<dl class="dl-horizontal">
<dt>总价：</dt><dd th:text="${house.totalPrice} + '万元'"></dd>
<dt>单位价格：</dt><dd th:text="${house.unitPrice} + '元/平米'"></dd>
<dt>建筑面积：</dt><dd th:text="${house.buildArea} + '平米'"></dd>
<dt>套内面积：</dt><dd th:text="${house.insideArea} + '平米'"></dd>
<dt>房屋户型：</dt><dd th:text="${house.houseTypeName}"></dd>
<dt>所在楼层：</dt><dd th:text="${house.floorName}"></dd>
<dt>建筑结构：</dt><dd th:text="${house.buildStructureName}"></dd>
<dt>房屋朝向：</dt><dd th:text="${house.directionName}"></dd>
<dt>装修情况：</dt><dd th:text="${house.decorationName}"></dd>
<dt>装修情况：</dt><dd th:text="${house.houseUseName}"></dd>
<dt>梯户比例：</dt><dd th:text="${house.elevatorRatio}"></dd>
<dt>挂牌时间：</dt><dd th:text="${house.listingDateString}"></dd>
<dt>上次交易：</dt><dd th:text="${house.lastTradeDateString}"></dd>
</dl>
</div>
<div class="col-sm-7" id="cluster_info">
<dl class="dl-horizontal">
<dt>小区名称：</dt><dd th:text="${community.name}"></dd>
<dt>小区均价：</dt><dd th:text="${community.averagePrice}+'元/平米'">已上传房本照片</dd>
<dt>区域：</dt><dd th:text="${community.areaName}">商品房</dd>
<dt>板块：</dt><dd th:text="${community.plateName}"></dd>
<dt>详细地址：</dt><dd th:text="${community.address}"></dd>
<dt>建筑年代：</dt><dd th:text="${community.buildYears}">满五年</dd>
<dt>物业价格：</dt><dd th:text="${community.propertyPrice}+'元/平米'">共有</dd>
<dt>物业公司：</dt><dd th:text="${community.propertyCompany}">有抵押 19万元 中国银行四川分行 业主自还</dd>
<dt>开发商：</dt><dd th:text="${community.developer}">已上传房本照片</dd>
<dt>楼栋数：</dt><dd th:text="${community.buildNum}">已上传房本照片</dd>
<dt>房屋数：</dt><dd th:text="${community.houseNum}">已上传房本照片</dd>
</dl>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h3>房源图片信息</h3>
<a class="btn btn-xs btn-primary" id="upload1">上传房源图片</a>
</div>
<div class="ibox-content">
<a th:each="item,it : ${houseImage1List}" class="fancybox" >
<img alt="image" th:src="${item.imageUrl}"/>
<a th:attr="data-id=${item.id}" class="deleteImages">删除</a>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h3>房产图片信息</h3>
<a class="btn btn-xs btn-primary" id="upload2">上传房产图片</a>
</div>
<div class="ibox-content">
<a th:each="item,it : ${houseImage2List}" class="fancybox" >
<img alt="image" th:src="${item.imageUrl}"/>
<a th:attr="data-id=${item.id}" class="deleteImages">删除</a>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel blank-panel">
<div class="pull-left" style="margin-top: 10px;">
<a class="btn btn-xs btn-white"><h3>经纪人信息</h3></a>
<a class="btn btn-xs btn-primary createBroker">添加</a>
</div>
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th>序号</th>
<th>经纪人头像</th>
<th>经纪人姓名</th>
<th>创建时间</th>
<th>操作 </th>
</tr>
</thead>
<tbody>
<tr class="gradeX" th:each="item,it : ${houseBrokerList}">
<td class="text-center" th:text="${it.count}">11</td>
<td>
<img th:src="${item.brokerHeadUrl}" style="width: 60px; height: 60px;">
</td>
<td th:text="${item.brokerName}">33</td>
<td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33</td>
<td class="text-center">
<a class="editBroker" th:attr="data-id=${item.id}">修改</a>
<a class="deleteBroker" th:attr="data-id=${item.id}">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="panel blank-panel">
<div class="pull-left" style="margin-top: 10px;">
<a class="btn btn-xs btn-white"><h3>房东信息</h3></a>
<a class="btn btn-xs btn-primary createUser">添加</a>
</div>
<table class="table table-striped table-bordered table-hover dataTables-example">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>手机号</th>
<th>性别</th>
<th>身份证号码</th>
<th>创建时间</th>
<th>操作 </th>
</tr>
</thead>
<tbody>
<tr class="gradeX" th:each="item,it : ${houseUserList}">
<td class="text-center" th:text="${it.count}">11</td>
<td th:text="${item.name}">33</td>
<td th:text="${item.phone}">33</td>
<td th:text="${item.sex == 1 ? '男' : '女'}">33</td>
<td th:text="${item.idNo}">33</td>
<td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33</td>
<td class="text-center">
<a class="editUser" th:attr="data-id=${item.id}">修改</a>
<a class="deleteUser" th:attr="data-id=${item.id}">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
五、房源经纪人管理模块(自己扩展练习)
1、新增经纪人功能
1.1 查询所有用户
1.1.1 持久层
1.1.1.1 AdminMapper接口
在service-acl项目的AdminMapper接口中新增
List<Admin> findAll();
1.1.1.2 AdminMapper.xml映射配置文件
在service-acl项目的AdminMapper.xml映射配置文件中新增
<select id="findAll" resultType="admin">
<include refid="columns"></include>
from acl_admin
where is_deleted = 0
</select>
1.1.2 业务层
1.1.2.1 AdminService接口
在service-api项目的AdminService接口中新增
List<Admin> findAll();
1.1.2.2 AdminServiceImpl实现类
在service-acl项目的AdminServiceImpl实现类中新增
@Override
public List<Admin> findAll() {
return adminMapper.findAll();
}
1.2 进入新增经纪人页面
1.2.1 表现层
在web-admin项目中的com.atguigu.controller包中创建HouseBrokerController类
@Controller
@RequestMapping("/houseBroker")
public class HouseBrokerController extends BaseController {
@Reference
private AdminService adminService;
@Reference
private HouseBrokerService houseBrokerService;
private static final String PAGE_CREATE = "houseBroker/create";
@RequestMapping("/create")
public String create(Model model, HouseBroker houseBroker){
//查询管理员列表
saveAdminListToModel(model);
model.addAttribute("houseBroker",houseBroker);
return PAGE_CREATE;
}
private void saveAdminListToModel(Model model) {
List<Admin> adminList = adminService.findAll();
model.addAttribute("adminList",adminList);
}
}
1.2.2 前端页面
在show.html页面给新增经纪人绑定点击事件
<script type="text/javascript">
$(function(){
$(".createBroker").on("click",function () {
opt.openWin('/houseBroker/create?houseId=[[${house.id}]]','新增经纪人',630,300)
});
});
</script>
在web-admin项目的templates目录中创建houseBroker目录，在目录中创建create.html页面
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<form id="ec" action="/houseBroker/save" method="post" class="form-horizontal">
<input type="hidden" name="houseId" th:value="${houseBroker.houseId}"/>
<div class="form-group">
<label class="col-sm-2 control-label">经纪人：</label>
<div class="col-sm-10">
<select name="brokerId" id="brokerId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${adminList}" th:text="${item.name}" th:value="${item.id}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2 text-right">
<button class="btn btn-primary" type="submit">确定</button>
<button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
1.3 保存新增
1.3.1 持久层
在service-house项目中的resources/mappers/HouseBrokerMapper.xml中新增
<insert id="insert" useGeneratedKeys="true" keyProperty="id">
insert into hse_house_broker (
id ,
house_id ,
broker_id ,
broker_name ,
broker_head_url
) values (
#{id} ,
#{houseId} ,
#{brokerId} ,
#{brokerName} ,
#{brokerHeadUrl}
)
</insert>
1.3.2 表现层
在web-admin项目的HouseBrokerController中新增
@PostMapping("/save")
public String save(HouseBroker houseBroker,Model model){
Admin admin = adminService.getById(houseBroker.getBrokerId());
houseBroker.setBrokerName(admin.getName());
houseBroker.setBrokerHeadUrl(admin.getHeadUrl());
houseBrokerService.insert(houseBroker);
return successPage(model,"添加经纪人成功");
}
2、修改经纪人功能
2.1 进入修改经纪人页面
2.1.1 持久层
在service-house的resources/mappers/HouseBrokerMapper.xml中新增
<select id="getById" resultType="HouseBroker">
<include refid="columns"></include>
from hse_house_broker where id=#{id} and is_deleted=0
</select>
2.1.2 表现层
在web-admin项目的HouseBrokerController中新增
private static final String PAGE_EDIT = "houseBroker/edit";
@RequestMapping("/edit/{id}")
public String edit(@PathVariable("id") Long id,Model model){
HouseBroker houseBroker = houseBrokerService.getById(id);
saveAdminListToModel(model);
model.addAttribute("houseBroker",houseBroker);
return PAGE_EDIT;
}
2.1.3 前端页面
① 在show.html中给经纪人的修改按钮绑定点击事件
$(".editBroker").on("click",function () {
var id = $(this).attr("data-id");
opt.openWin('/houseBroker/edit/' + id,'修改经纪人',630,300);
});
② 在web-admin项目中的templates/houseBroker目录中创建edit.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<form id="ec" th:action="@{/houseBroker/update}" method="post" class="form-horizontal">
<input type="hidden" name="id" th:value="${houseBroker.id}">
<div class="form-group">
<label class="col-sm-2 control-label">经纪人：</label>
<div class="col-sm-10">
<select name="brokerId" id="brokerId" class="form-control">
<option value="">-请选择-</option>
<option th:each="item,it : ${adminList}" th:text="${item.name}" th:value="${item.id}" th:selected="${item.id} eq ${houseBroker.brokerId}">-请选择-</option>
</select>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group posf">
<div class="col-sm-4 col-sm-offset-2 text-right">
<button class="btn btn-primary" type="submit">确定</button>
<button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
2.2 保存修改
2.2.1 持久层
在service-acl项目的HouseBrokerMapper.xml映射配置文件中新增
<update id="update" >
update hse_house_broker set
<if test="houseId != null and houseId != ''">
house_id = #{houseId} ,
</if>
<if test="brokerId != null and brokerId != ''">
broker_id = #{brokerId} ,
</if>
<if test="brokerName != null and brokerName != ''">
broker_name = #{brokerName} ,
</if>
<if test="brokerHeadUrl != null and brokerHeadUrl != ''">
broker_head_url = #{brokerHeadUrl} ,
</if>
update_time = now()
where
id = #{id}
</update>
2.2.2 表现层
在web-admin项目的HouseBrokerController中新增
@PostMapping("/update")
public String update(Model model, HouseBroker houseBroker){
//根据id查询经纪人信息
HouseBroker originHouseBroker = houseBrokerService.getById(houseBroker.getBrokerId());
//更新originHouseBroker的信息
Admin admin = adminService.getById(houseBroker.getBrokerId());
originHouseBroker.setBrokerName(admin.getName());
originHouseBroker.setBrokerHeadUrl(admin.getHeadUrl());
//修改经纪人信息
houseBrokerService.update(originHouseBroker);
return successPage(model,"修改经纪人成功");
}
3、删除经纪人功能
3.1 持久层
在service-acl项目的HouseBrokerMapper.xml映射配置文件中新增
<update id="delete">
update hse_house_broker set
update_time = now() ,
is_deleted = 1
where
id = #{id}
</update>
3.2 表现层
在web-admin项目的HouseBrokerController中新增
private static final String SHOW_ACTION = "redirect:/house/";
@RequestMapping("/delete/{houseId}/{id}")
public String delete(@PathVariable("houseId") Long houseId,@PathVariable("id") Long id){
houseBrokerService.delete(id);
return SHOW_ACTION + houseId;
}
3.3 前端页面
在web-admin项目的templates/house/show.html中给房东删除按钮绑定点击事件
$(".deleteBroker").on("click",function(){
var id = $(this).attr("data-id");
opt.confirm('/houseBroker/delete/[[${house.id}]]/'+id);
});
六、房东管理模块(自己扩展练习)
1、新增房东功能
1.1 进入房东新增页面
1.1.1表现层
在web-admin项目中的com.atguigu.controller包中创建HouseUserController类
@Controller
@RequestMapping("/houseUser")
public class HouseUserController extends BaseController {
@Reference
private HouseUserService houseUserService;
private static final String PAGE_CREATE = "houseUser/create";
@GetMapping("/create")
public String create(HouseUser houseUser,Model model){
model.addAttribute("houseUser",houseUser);
return PAGE_CREATE;
}
}
1.1.2 前端页面
① 在show.html页面给房东添加按钮绑定点击事件
$(".createUser").on("click",function () {
opt.openWin('/houseUser/create?houseId=[[${house.id}]]','新增房东',630,430)
});
② 在templates目录中创建houseUser目录，并在该目录中创建create.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<form id="ec" action="/houseUser/save" method="post" class="form-horizontal">
<input type="hidden" name="houseId" th:value="${houseUser.houseId}"/>
<div class="form-group">
<label class="col-sm-2 control-label">房东姓名：</label>
<div class="col-sm-10">
<input type="text" name="name" id="name" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">手机：</label>
<div class="col-sm-10">
<input type="text" name="phone" id="phone" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<div class="radio">
<label><input type="radio" checked="checked" value="1" name="sex">男</label>
</div>
<div class="radio">
<label> <input type="radio" value="2" name="sex">女</label>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">身份证号：</label>
<div class="col-sm-10">
<input type="text" name="idNo" id="idNo" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2 text-right">
<button class="btn btn-primary" type="submit">确定</button>
<button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
1.2 保存新增
1.2.1 持久层
在service-acl项目的HouseUserMapper.xml映射配置文件中新增
<insert id="insert" useGeneratedKeys="true" keyProperty="id">
insert into hse_house_user (
id ,
house_id ,
name ,
phone ,
sex ,
id_no
) values (
#{id} ,
#{houseId} ,
#{name} ,
#{phone} ,
#{sex} ,
#{idNo}
)
</insert>
1.2.2 表现层
在web-admin项目中的HouseUserController中新增
@PostMapping("/save")
public String save(HouseUser houseUser, Model model){
houseUserService.insert(houseUser);
return successPage(model,"新增房东信息成功");
}
2、修改房东功能
2.1 进入修改房东页面
2.1.1 持久层
在service-house项目的resources/mappers/HouseUserMapper.xml中新增
<select id="getById" resultType="HouseUser">
<include refid="columns"></include>
from hse_house_user where id=#{id} and is_deleted=0
</select>
2.1.2 表现层
在web-admin项目的HouseUserController中新增
private static final String PAGE_EDIT = "houseUser/edit";
@GetMapping("/edit/{id}")
public String edit(@PathVariable("id") Long id,Model model){
HouseUser houseUser = houseUserService.getById(id);
model.addAttribute("houseUser",houseUser);
return PAGE_EDIT;
}
2.1.3 前端页面
① 在show.html中给房东的修改按钮绑定点击事件
$(".editUser").on("click",function () {
var id = $(this).attr("data-id");
opt.openWin('/houseUser/edit/' + id,'修改房东',630,430);
});
② 在web-admin项目中的templates/houseUser目录中创建edit.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head :: head"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="ibox float-e-margins">
<div class="ibox-content" style="width: 98%;">
<form id="ec" th:action="@{/houseUser/update}" method="post" class="form-horizontal">
<input type="hidden" name="id" th:value="${houseUser.id}"/>
<div class="form-group">
<label class="col-sm-2 control-label">房东姓名：</label>
<div class="col-sm-10">
<input type="text" name="name" id="name" th:value="${houseUser.name}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">手机：</label>
<div class="col-sm-10">
<input type="text" name="phone" id="phone" th:value="${houseUser.phone}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">性别</label>
<div class="col-sm-10">
<div class="col-sm-10">
<div class="radio">
<label><input type="radio" th:checked="${houseUser.sex} eq 1" value="1" name="sex">男</label>
</div>
<div class="radio">
<label> <input type="radio" th:checked="${houseUser.sex} eq 2" value="2" name="sex">女</label>
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group">
<label class="col-sm-2 control-label">身份证号：</label>
<div class="col-sm-10">
<input type="text" name="idNo" id="idNo" th:value="${houseUser.idNo}" class="form-control" />
</div>
</div>
<div class="hr-line-dashed"></div>
<div class="form-group posf">
<div class="col-sm-4 col-sm-offset-2 text-right">
<button class="btn btn-primary" type="submit">确定</button>
<button class="btn btn-white" type="button" onclick="javascript:opt.closeWin();" value="取消">取消</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
2.2 保存修改
2.2.1 持久层
在service-acl项目的HouseUserMapper.xml映射配置文件中新增
<update id="update" >
update hse_house_user set
<if test="houseId != null and houseId != ''">
house_id = #{houseId} ,
</if>
<if test="name != null and name != ''">
name = #{name} ,
</if>
<if test="phone != null and phone != ''">
phone = #{phone} ,
</if>
<if test="sex != null and sex != ''">
sex = #{sex} ,
</if>
<if test="idNo != null and idNo != ''">
id_no = #{idNo} ,
</if>
update_time = now()
where
id = #{id}
</update>
2.2.2 表现层
在web-admin项目的HouseUserController中新增
@PostMapping("/update/{id}")
public String update(@PathVariable("id") Long id, HouseUser houseUser,Model model){
houseUser.setId(id);
houseUserService.update(houseUser);
return successPage(model,"修改房东信息成功");
}
3、删除房东功能
3.1 持久层
在service-acl项目的HouseUserMapper.xml映射配置文件中新增
<update id="delete">
update hse_house_user set
update_time = now() ,
is_deleted = 1
where
id = #{id}
</update>
3.2 表现层
在web-admin项目的HouseUserController中新增
private static final String SHOW_ACTION = "redirect:/house/";
@GetMapping("/delete/{houseId}/{id}")
public String delete(@PathVariable("houseId") Long houseId,@PathVariable("id") Long id){
houseUserService.delete(id);
return SHOW_ACTION + houseId;
}
3.3 前端页面
在web-admin项目的templates/house/show.html中给房东删除按钮绑定点击事件
$(".deleteUser").on("click",function(){
var id = $(this).attr("data-id");
opt.confirm('/houseUser/delete/[[${house.id}]]/'+id);
});
扫一扫
1119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
