SSM项目-我爱我家（三）
2020-06-26 04:30
316 查看
视图
HouseinfoMapper.java 房源信息接口
//房源信息接口
public interface HouseinfoMapper {
//查询表信息
public List getHouseinfo();
//查询全部表信息
public List<Houseinfo> getHouseinfoAll();
//按条件查询表信息
public List getHouseinfoBy(HashMap conditionMap);
//视图搜索查询
public List getHouseinfoSearch(String searchInfo);
}
HouseinfoMapper.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="cn.com.dao.HouseinfoMapper"> <!--本映射器文件路径-->
<!--区级表SQL映射文件-->
<!--查-->
<!--查所有项目组-->
<!--SELECT * FROM `project`;-->
<select id="getHouseinfoAll" resultType="Houseinfo">
SELECT * FROM `houseinfo`;
</select>
<!--多表联查,自动映射-->
<resultMap id="houseinfo" type="HashMap" autoMapping="true">
<id property="hid" column="hid"></id>
</resultMap>
<select id="getHouseinfo" resultMap="houseinfo">
SELECT h.*,bq.`bqname`,cx.`cxname`,hp.`hpurl`,ht.`htname`,lc.`lcname`,s.`sname`,zx.`zxname`
FROM `houseinfo` h,`biaoqian` bq,`chaoxiang` cx,`housepic` hp,`housetype` ht,`louceng` lc,`street` s,`zhuangxiu` zx
WHERE h.`bqid` = bq.`bqid` AND h.`cxid` = cx.`cxid` AND h.`hid` = hp.`hid` AND hpid = 1 AND h.`htid` = ht.`htid`
AND h.`lcid` = lc.`lcid` AND h.`sid` = s.`sid` AND h.`zxid` = zx.`zxid` AND h.information LIKE "%"
</select>
<!--根据筛选条件查询-->
<select id="getHouseinfoBy" resultMap="houseinfo" parameterType="HashMap">
SELECT h.*,bq.`bqname`,cx.`cxname`,hp.`hpurl`,ht.`htname`,lc.`lcname`,s.`sname`,zx.`zxname`
FROM `houseinfo` h,`biaoqian` bq,`chaoxiang` cx,`housepic` hp,`housetype` ht,`louceng` lc,`street` s,`zhuangxiu`
zx,district d
WHERE h.`bqid` = bq.`bqid` AND h.`cxid` = cx.`cxid` AND h.`hid` = hp.`hid` AND hpid = 1 AND h.`htid` = ht.`htid`
AND h.`lcid` = lc.`lcid` AND h.`sid` = s.`sid` AND h.`zxid` = zx.`zxid` AND d.`did` = s.`did`
<if test="dname != null and dname !=''">
and d.`dname` = #{dname}
</if>
<if test="tpsname != null and tpsname !=''">
and h.`price` BETWEEN #{minPrice} and #{maxPrice}
</if>
<if test="tasname != null and tasname !=''">
and h.`area` BETWEEN #{minArea} and #{maxArea}
</if>
</select>
<!--视图搜索查询-->
<select id="getHouseinfoSearch" resultMap="houseinfo" parameterType="String">
SELECT * FROM `view_test`
WHERE CONCAT(information,AREA,price) LIKE CONCAT('%',#{searchInfo},'%')
</select>
</mapper>
HouseinfoService.java 房源信息Service层
//房源信息Service层
@Service
public class HouseinfoService implements HouseinfoMapper{
//注入Dao层接口
@Autowired
private HouseinfoMapper houseinfoMapper;
//返回Dao接口方法
@Override
public List getHouseinfo() {
return houseinfoMapper.getHouseinfo();
}
public List<Houseinfo> getHouseinfoAll() {
return houseinfoMapper.getHouseinfoAll();
}
public List getHouseinfoBy(HashMap conditionMap){
return houseinfoMapper.getHouseinfoBy(conditionMap);
}
//视图搜索查询
public List getHouseinfoSearch(String searchInfo){
return houseinfoMapper.getHouseinfoSearch(searchInfo);
}
}
HouseinfoController.java 房源信息控制类
//房源信息控制类
@Controller
public class HouseinfoController {
//引入Service层接口
@Autowired
private HouseinfoService houseinfoService;
//使用Ajax的回调
//查询首页推荐表信息
@RequestMapping("/getHouseinfoAll")
@ResponseBody
public List<Houseinfo> getHouseinfoAll(){
List<Houseinfo> houseinfos = houseinfoService.getHouseinfo();
System.out.println("进入HouseinfoController,getHouseinfoAll,查询房源表方法!"+houseinfos);
return houseinfos;
}
//使用Ajax的回调
//分页查询房源信息
@RequestMapping(value = "/getHouseinfo")
@ResponseBody //返回自己页面
public HashMap getHouseinfo(
@RequestParam(value = "pagenum",required = false,defaultValue = "1") int pageNum){
System.out.println("进入HouseinfoController,getHouseinfoMap,分页查询房源信息方法!");
//创建HashMap对象
HashMap hashMap = new HashMap();
//封装PageHelper,每页显示3个
PageHelper.startPage(pageNum,5);
//查询集合,调用Service层方法
List houseinfos = houseinfoService.getHouseinfo();
//把集合封装进PageInfo
PageInfo pageInfo = new PageInfo(houseinfos);
//把结果集合和分页封装HashMap对象
hashMap.put("houseinfo",houseinfos);
hashMap.put("pageInfo",pageInfo);
System.out.println("封装完成! return hashMap");
/* Set keys = hashMap.keySet();
Iterator iterator=keys.iterator();
while (iterator.hasNext()){
String key=(String)iterator.next();
String value=(String)hashMap.get(key);
System.out.println(key+"+++++"+value);
}*/
//返回值是hashMap对象
return hashMap;
}
//使用Ajax的回调
//条件查询房源信息
@RequestMapping(value = "/getHouseinfoBy")
@ResponseBody //返回自己页面
public HashMap getHouseinfoBy(@RequestParam(value = "pagenum",required = false,defaultValue = "1") int pageNum,
@RequestParam(value = "names",required = false,defaultValue = "") String[] names,
@RequestParam(value = "values",required = false,defaultValue = "") String[] values) {
//条件HashMap集合
HashMap conditionMap = new HashMap();
for (int i = 0; i < names.length; i++) {
conditionMap.put(names[i], values[i]);
}
//判断条件的集合各种包含那几个选项 选项-区域 面积 价格...
//判断是否包含价格
if (conditionMap.containsKey("tpsname")){
System.out.println("判断是否包含价格");
//判断是否区间值
String price = (String)conditionMap.get("tpsname");
if((price.indexOf("-"))!=-1) {
//是区间值 80-100cm berween 80 and 100
String[] arr = price.split("-");
//最小值
int minPrice = Integer.parseInt(arr[0]);
//最大值
String[] arr2 = arr[1].split("万");
int maxPrice = Integer.parseInt(arr2[0]);
//将最大和最小值存放到条件集合中
conditionMap.put("minPrice",minPrice);
conditionMap.put(("maxPrice"),maxPrice);
}else{
//不是区间
if (price.indexOf("万以上")!=-1){
//对50万以下的处理
String[] arr = price.split("万");
int maxPrice = Integer.parseInt(arr[0]);
int minPrice = 0;
//将最大和最小值存放到条件集合中
conditionMap.put("minPrice",minPrice);
conditionMap.put(("maxPrice"),maxPrice);
}else{
//对500万以上的处理
String[] arr = price.split("万");
int minPrice = Integer.parseInt(arr[0]);
int maxPrice = 1000;
//将最大和最小值存放到条件集合中
conditionMap.put("minPrice",minPrice);
conditionMap.put(("maxPrice"),maxPrice);
}
}
}
//判断是否包含面积
if (conditionMap.containsKey("tasname")){
System.out.println("判断是否包含面积!");
//判断是否区间值
String area = (String)conditionMap.get("tasname");
if(area.indexOf("-")!=-1) {
//是区间值 80-100cm berween 80 and 100
String[] arr = area.split("-");
//最小值
int minArea = Integer.parseInt(arr[0]);
//最大值
String[] arr2 = arr[1].split("㎡");
int maxArea = Integer.parseInt(arr2[0]);
//将最大和最小值存放到条件集合中
conditionMap.put("minArea",minArea);
conditionMap.put(("maxArea"),maxArea);
}else{
//不是区间
if ((area.indexOf("以上"))!=-1){
String str = "";
//对于200m以上
for(int i = 0;i<area.length();i++){
if(area.charAt(i)>=48 && area.charAt(i)<=57){
str+=area.charAt(i);
}
}
int minArea = Integer.parseInt(str);
//将最大和最小值存放到条件集合中
conditionMap.put("minArea",minArea);
conditionMap.put(("maxArea"),1000);
}else{
//对50m²以下的处理
String[] arr = area.split("㎡");
int maxArea = Integer.parseInt(arr[0]);
int minArea = 0;
//将最大和最小值存放到条件集合中
conditionMap.put("minArea",minArea);
conditionMap.put(("maxArea"),maxArea);
}
}
}
HashMap hashMap = new HashMap();
PageHelper.startPage(pageNum,5);
List houseinfos = houseinfoService.getHouseinfoBy(conditionMap);
PageInfo pageInfo = new PageInfo(houseinfos);
//把结果集合和分页封装HashMap对象
hashMap.put("houseinfo",houseinfos);
hashMap.put("pageInfo",pageInfo);
System.out.println("条件筛选封装完成! return hashMap");
return hashMap;
}
//使用Ajax的回调
//分页查询房源信息
@RequestMapping(value = "/getHouseinfoSearch")
@ResponseBody //返回自己页面
public HashMap getHouseinfoSearch(@RequestParam(value = "pagenum",required = false,defaultValue = "1") int pageNum,
@RequestParam(value = "searchInfo",required = false,defaultValue = "1") String searchInfo){
System.out.println("进入HouseinfoController,getHouseinfoMap,分页查询房源信息方法!");
//创建HashMap对象
HashMap hashMap = new HashMap();
//封装PageHelper,每页显示3个
PageHelper.startPage(pageNum,5);
//查询集合,调用Service层方法
List houseinfos = houseinfoService.getHouseinfoSearch(searchInfo);
//把集合封装进PageInfo
PageInfo pageInfo = new PageInfo(houseinfos);
//把结果集合和分页封装HashMap对象
hashMap.put("houseinfo",houseinfos);
hashMap.put("pageInfo",pageInfo);
System.out.println("封装完成! return hashMap");
//返回值是hashMap对象
return hashMap;
}
}
secondHandHouse.html 前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二手房首页</title>
<link type="text/css" rel="stylesheet" href="css/secondHandHouse.css"/>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/secondHandHouse.js"></script>
</head>
<body style="overflow-x: hidden;">
<!--1.黑色背景头部导航-->
<div id="d2">
<iframe src="common/public_top.html" height="60px"
width="100%" scrolling="no" frameborder="no"></iframe>
</div>
<!--2.搜索框所在灰色背景两端顶头div-->
<div id="d3">
<!--2.1 主体内容居中div-->
<div class="d3c2">
<p>
<span><a href="#">我爱我家南京</a> </span>
>
<span><a href="#">南京二手房</a></span>
</p>
<div id="#getHouseinfoSearch">
<p>
<input type="text" id="searchInfo" name="search" placeholder="区域、商圈、小区、地铁应有尽有"/>
<input type="image" id="searchImage" src="image/secondHouse/search.png"/>
</p>
</div>
</div>
</div>
<!--3.条件筛选-->
<div id="d4">
<!--3.1主体内容居中div-->
<div class="d4c2">
<!--3.1.1 选项卡-->
<div class="d4c22">
<p><a href="#">条件筛选</a></p>
<p><a href="#">选房卡</a></p>
</div>
<!--3.1.2 条件筛选-->
<div class="d4c23">
<!--3.1.2.1 位置-->
<div class="d4c232">
<p>位置</p>
<ul>
<li>区域</li>
<li>地铁</li>
</ul>
</div>
<!--3.1.2.2 所有条件筛选所在div-->
<div class="d4c233">
<!--区域-->
<dl id="district">
<dt>全部</dt>
<!-- <dd>江宁区</dd>
<dd>鼓楼区</dd>
<dd>玄武区</dd>
<dd>建邺区</dd>
<dd>秦淮区</dd>
<dd>栖霞区</dd>
<dd>雨花台区</dd>
<dd>浦口区</dd>
<dd>六合区</dd>
<dd>溧水区</dd>
<dd>高淳区</dd>
<dd>南京周边</dd>-->
</dl>
<!--3.1.2.2.1总价-->
<dl id="totalpricesection">
<dt>总价</dt>
<!-- <dd><img src="image/secondHouse/kuang2.png"/><span class="maxprice">80万以下</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="price">80-100万</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="price">100-120万</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="price">120-150万</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="price">150-200万</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="price">200-300万</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="price">300-500万</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="minprice">500万以上</span></dd>-->
<dd>
<ul>
<li><input type="text" name="minarea"/></li>
<li>~</li>
<li><input type="text" name="maxarea"/></li>
<li>㎡</li>
<li><input type="button" value="确定"/></li>
</ul>
</dd>
</dl>
<!--3.1.2.2.2面积-->
<dl id="totalareasection">
<dt>面积</dt>
<!-- <dd><img src="image/secondHouse/kuang2.png"/><span class="maxarea">50㎡以下</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="area">50-70㎡</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="area">70-90㎡</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="area">90-110㎡</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="area">110-130㎡</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="area">130-150㎡</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="area">150-200㎡</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="minarea">200㎡以上</span></dd>-->
<dd>
<ul>
<li><input type="text" name="minarea"/></li>
<li>~</li>
<li><input type="text" name="maxarea"/></li>
<li>㎡</li>
<li><input type="button" value="确定"/></li>
</ul>
</dd>
</dl>
<!--3.1.2.2.3户型-->
<dl id="housetype">
<dt>户型</dt>
<!-- <dd><img src="image/secondHouse/kuang2.png"/><span class="housetype">一室</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="housetype">二室</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="housetype">三室</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="housetype">四室</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="housetype">五室</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="housetype">五室以上</span></dd>-->
</dl>
<!--3.1.2.2.4用途-->
<dl id="houseuse">
<dt>用途</dt>
<!-- <dd><img src="image/secondHouse/kuang2.png"/><span class="use">普通住宅</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="use">别墅</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="use">其他</span></dd>-->
</dl>
<!--3.1.2.2.5楼层-->
<dl id="louceng">
<dt>楼层</dt>
<!-- <dd><img src="image/secondHouse/kuang2.png"/><span class="floor">低楼层</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="floor">中楼层</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="floor">高楼层</span></dd>-->
</dl>
<!--3.1.2.2.6朝向-->
<dl id="chaoxiang">
<dt>朝向</dt>
<!-- <dd><img src="image/secondHouse/kuang2.png"/><span class="faceto">南北</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="faceto">南</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="faceto">东</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="faceto">西</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="faceto">北</span></dd>-->
</dl>
<!--3.1.2.2.7楼龄-->
<dl id="louling">
<dt>楼龄</dt>
<!-- <dd><img src="image/secondHouse/kuang2.png"/><span class="houseage">5年以内</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="houseage">10年以内</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="houseage">15年以内</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="houseage">20年以内</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="houseage">20年以上</span></dd>-->
</dl>
<!--3.1.2.2.8装修-->
<dl id="zhuangxiu">
<dt>装修</dt>
<!-- <dd><img src="image/secondHouse/kuang2.png"/><span class="decoration">精装修</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="decoration">普通装修</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="decoration">毛坯房</span></dd>-->
</dl>
<!--3.1.2.2.9标签-->
<dl id="biaoqian">
<dt>标签</dt>
<!-- <dd><img src="image/secondHouse/kuang2.png"/><span class="lable">近地铁</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="lable">随时看</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="lable">满两年</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="lable">满五年</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="lable">近公园</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="lable">复式</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="lable">跃层</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="lable">loft</span></dd>
<dd><img src="image/secondHouse/kuang1.png"/><span class="lable">隧道口</span></dd>-->
</dl>
</div>
<!--3.1.2.3 更多首期链接div-->
<div class="d4c234">
<img src="image/secondHouse/shouqi.png"/>
</div>
</div>
<!--3.1.3条件拼接-->
<div class="d4c24">
<!--3.1.3.1 条件文字所在div-->
<div class="d4c242">
条件
</div>
<!--3.1.3.2 条件拼接div-->
<div class="d4c243" id="condition">
<!-- <p>
<span>毛坯房</span>
<label>X</label>
</p>
<p>
<span>普通住宅</span>
<label>X</label>
</p>
<p>
<span>普通住宅</span>
<label>X</label>
</p>-->
</div>
<!--3.1.3.3 保存删除所在div-->
<div class="d4c244">
<img id="save" src="image/secondHouse/save.png"/>
<img id="delete" src="image/secondHouse/delete.png"/>
</div>
</div>
</div>
</div>
<!--4.数据部分div两端顶头div-->
<div id="d5">
<!--4.1主题内容居中div-->
<div class="d5c2">
<!--4.1.1左侧数据列表部分div-->
<div class="d5c22">
<!--4.1.1.1第一行菜单列表div-->
<div class="d5c222">
<ul>
<li>默认排序</li>
<li>总价</li>
<li>单价</li>
<li>面积</li>
<li>最新发布</li>
</ul>
</div>
<!--4.1.1.2第二行总条数div-->
<div class="d5c223" id="totalCount">
<!--共找到 <strong>39510</strong> 套房源-->
</div>
<!--★4.1.1.3数据列表div-->
<div class="d5c224" id="houseList">
<!--4.1.1.3.1 数据内容div-->
<!-- <div class="d5c2242">-->
<!--<!–4.1.3.1.1 存放图片div–>
<div>
<a href="#">
<img src="image/secondHouse/house/1.jpg" height="195px" width="240px">
</a>
</div>
<!–4.1.3.1.2 存放文字内容div–>
<div>
<!–黑体字标题–>
<h3><a href="#">西方巷一室一厅一卫</a></h3>
<!–房子信息–>
<div>
<ul>
<li>
<i></i>
1 室 1 厅 · 36 平米 · 南 · 高楼层/7层 · 精装
</li>
<li>
<i></i>
新街口 西方巷 · 距离地铁张府园310米
</li>
<li>
<i></i>
1 人关注 · 近30天带看 13 次 · 2018-01-05发布
</li>
</ul>
<ul>
<li><strong>165</strong>万</li>
<li>单价45833元/m²</li>
</ul>
</div>
<!–房子标签–>
<div>
<span>近地铁</span>
<span>满两年</span>
<span>近公园</span>
</div>
</div>
</div>
</div>
<!–★4.1.1.3数据列表div–>
<div class="d5c224">
<!–4.1.1.3.1 数据内容div–>
<div class="d5c2242">
<!–4.1.3.1.1 存放图片div–>
<div>
<a href="#">
<img src="image/secondHouse/house/2.jpg" height="195px" width="240px">
</a>
</div>
<!–4.1.3.1.2 存放文字内容div–>
<div>
<!–黑体字标题–>
<h3><a href="#">新街口 省中医 市妇幼 朝天宫西街 三房 全明 边户带阳光房</a></h3>
<!–房子信息–>
<div>
<ul>
<li>
<i></i>
1 室 1 厅 · 36 平米 · 南 · 高楼层/7层 · 精装
</li>
<li>
<i></i>
新街口 西方巷 · 距离地铁张府园310米
</li>
<li>
<i></i>
1 人关注 · 近30天带看 13 次 · 2018-01-05发布
</li>
</ul>
<ul>
<li><strong>270</strong>万</li>
<li>单价45833元/m²</li>
</ul>
</div>
<!–房子标签–>
<div>
<span>近地铁</span>
<span>满两年</span>
<span>近公园</span>
</div>
</div>
</div>
</div>
<!–★4.1.1.3数据列表div–>
<div class="d5c224">
<!–4.1.1.3.1 数据内容div–>
<div class="d5c2242">
<!–4.1.3.1.1 存放图片div–>
<div>
<a href="#">
<img src="image/secondHouse/house/3.jpg" height="195px" width="240px">
</a>
</div>
<!–4.1.3.1.2 存放文字内容div–>
<div>
<!–黑体字标题–>
<h3><a href="#">典雅居三室二厅一卫</a></h3>
<!–房子信息–>
<div>
<ul>
<li>
<i></i>
1 室 1 厅 · 36 平米 · 南 · 高楼层/7层 · 精装
</li>
<li>
<i></i>
新街口 西方巷 · 距离地铁张府园310米
</li>
<li>
<i></i>
1 人关注 · 近30天带看 13 次 · 2018-01-05发布
</li>
</ul>
<ul>
<li><strong>338</strong>万</li>
<li>单价45833元/m²</li>
</ul>
</div>
<!–房子标签–>
<div>
<span>近地铁</span>
<span>满两年</span>
<span>近公园</span>
</div>
</div>-->
<!-- </div>-->
</div>
<!--4.1.1.4数据分页所在div-->
<div class="d5c225">
<!-- <ul>
<li>第<span id="pageno">1</span>/<span id="totalpage">30</span></li>
<li><a href="#">首页</a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#">末页</a></li>
<li>共<span id="totalcount">100</span>条</li>
</ul>-->
</div>
</div>
<!--4.1.2 右侧地图部分div-->
<div class="d5c23">
<a href="#">
<img src="image/secondHouse/map.png"/>
<span></span>
</a>
</div>
</div>
</div>
<div>
<iframe src="common/root/publicRoot.html" width="100%" height="314px" scrolling="no" frameborder="no"></iframe>
</div>
<!--条件选项的jQuery-->
<script type="text/javascript">
//获得区级
$(document).ready(function () {
//拿控制类的回调方法,data是返回的值,集合
$.get("/getDistrict", function (data) {
//alert("进入区级的jQuery回调,集合是" + data);
var str = `<dt>全部</dt>`; //存放ul的html代码
//拼接str,遍历data集合,i是索引,item是集合中的对象,ecmascript6报错打开,支持``撇号
//pojo的字段名
$(data).each(function (i, item) {
//绑定点击事件οnclick="conditionSel();"
str += `<dd><input type="radio" name="district" οnclick="conditionSel();" value="${item.dname}" />${item.dname}</dd>`;
});
//将str放入到d4的div中
$("#district").html(str);
});
//});
//获得价格
//$(document).ready(function () {
//拿控制类的回调方法,data是返回的值,集合
$.get("/getTotalpricesection", function (data) {
var str = ""; //存放ul的html代码
//拼接str,遍历data集合,i是索引,item是集合中的对象
//pojo的字段名
$(data).each(function (i, item) {
str += `<dd><input type="radio" name="totalpricesection" οnclick="conditionSel();" value="${item.tpsname}" />${item.tpsname}</dd>`;
});
//将str放入到d4的div中
$("#totalpricesection>dt").after(str);
});
//});
//获得面积
//$(document).ready(function () {
//拿控制类的回调方法,data是返回的值,集合
$.get("/getTotalareasection", function (data) {
var str = ""; //存放ul的html代码
//拼接str,遍历data集合,i是索引,item是集合中的对象
//pojo的字段名
$(data).each(function (i, item) {
str += `<dd><input type="radio" name="totalareasection" οnclick="conditionSel();" value="${item.tasname}" />${item.tasname}</dd>`;
});
//将str放入到d4的div中
$("#totalareasection>dt").after(str);
});
//});
//获得户型
//$(document).ready(function () {
//拿控制类的回调方法,data是返回的值,集合
$.get("/getHousetype", function (data) {
var str = ""; //存放ul的html代码
//拼接str,遍历data集合,
20000
i是索引,item是集合中的对象
//pojo的字段名
$(data).each(function (i, item) {
str += `<dd><input type="radio" name="housetype" οnclick="conditionSel();" value="${item.htname}" />${item.htname}</dd>`;
});
//将str放入到d4的div中
$("#housetype>dt").after(str);
});
//});
//获得用途
//$(document).ready(function () {
//拿控制类的回调方法,data是返回的值,集合
$.get("/getHouseuse", function (data) {
var str = ""; //存放ul的html代码
//拼接str,遍历data集合,i是索引,item是集合中的对象
//pojo的字段名
$(data).each(function (i, item) {
str += `<dd><input type="radio" name="houseuse" οnclick="conditionSel();" value="${item.huname}" />${item.huname}</dd>`;
});
//将str放入到d4的div中
$("#houseuse>dt").after(str);
});
//});
//获得楼层
//$(document).ready(function () {
//拿控制类的回调方法,data是返回的值,集合
$.get("/getLouceng", function (data) {
var str = ""; //存放ul的html代码
//拼接str,遍历data集合,i是索引,item是集合中的对象
//pojo的字段名
$(data).each(function (i, item) {
str += `<dd><input type="radio" name="louceng" οnclick="conditionSel();" value="${item.lcname}" />${item.lcname}</dd>`;
});
//将str放入到d4的div中
$("#louceng>dt").after(str);
});
//});
//获得朝向
//$(document).ready(function () {
//拿控制类的回调方法,data是返回的值,集合
$.get("/getChaoxiang", function (data) {
var str = ""; //存放ul的html代码
//拼接str,遍历data集合,i是索引,item是集合中的对象
//pojo的字段名
$(data).each(function (i, item) {
str += `<dd><input type="radio" name="chaoxiang" οnclick="conditionSel();" value="${item.cxname}" />${item.cxname}</dd>`;
});
//将str放入到d4的div中
$("#chaoxiang>dt").after(str);
});
//});
//获得楼龄
//$(document).ready(function () {
//拿控制类的回调方法,data是返回的值,集合
$.get("/getLouling", function (data) {
var str = ""; //存放ul的html代码
//拼接str,遍历data集合,i是索引,item是集合中的对象
//pojo的字段名
$(data).each(function (i, item) {
str += `<dd><input type="radio" name="louling" οnclick="conditionSel();" value="${item.llname}" />${item.llname}</dd>`;
});
//将str放入到d4的div中
$("#louling>dt").after(str);
});
//});
//获得装修
// $(document).ready(function () {
//拿控制类的回调方法,data是返回的值,集合
$.get("/getZhuangxiu", function (data) {
var str = ""; //存放ul的html代码
//拼接str,遍历data集合,i是索引,item是集合中的对象
//pojo的字段名
$(data).each(function (i, item) {
str += `<dd><input type="radio" name="zhuangxiu" οnclick="conditionSel();" value="${item.zxname}" />${item.zxname}</dd>`;
});
//将str放入到d4的div中
$("#zhuangxiu>dt").after(str);
});
//});
//获得标签
//$(document).ready(function () {
//拿控制类的回调方法,data是返回的值,集合
$.get("/getBiaoqian", function (data) {
var str = ""; //存放ul的html代码
//拼接str,遍历data集合,i是索引,item是集合中的对象
//pojo的字段名
$(data).each(function (i, item) {
str += `<dd><input type="radio" name="biaoqian" οnclick="conditionSel();" value="${item.bqname}" />${item.bqname}</dd>`;
});
//将str放入到d4的div中
$("#biaoqian>dt").after(str);
});
//});
//获取房源信息
//$(document).ready(function () {
//拿控制类的回调方法,data是返回的值,集合
$.get("/getHouseinfo", function (data) {
alert("data" + data);
alert("data.houseinfo" + data.houseinfo);
alert("data.pageInfo" + data.pageInfo);
//console.log(data)
//调用房屋相关信息
showHouseInfo(data.houseinfo);
//调用分页信息
showPageInfo(data.pageInfo);
});
});
//显示房源信息方法
function showHouseInfo(data) {
//alert("data" + data);
//data是Controller控制类的houseinfos对象
var str = "";
//遍历data集合
$(data).each(function (i, item) {
str += `<div class="d5c2242">
<div>
<a href="#">
<img src="${item.hpurl}" height="195px" width="240px">
</a>
</div>
<div>
<h3><a href="#">${item.information}</a></h3>
<div>
<ul>
<li>
<i></i>
${item.htname} .${item.area} 平米 . ${item.cxname} .${item.lcname} .${item.zxname}
</li>
<li>
<i></i>
${item.sname}
</li>
<li>
<i></i>
${item.personno} 人关注 . 近30天带看 ${item.dkno} 次 . ${item.publishtime} 发布
</li>
</ul>
<ul>
<li><strong>${item.price}</strong>万</li>
<li>单价 ${(item.price / item.area).toFixed(2)} 元/m²</li>
</ul>
</div>
<div>
<span>${item.bqname}</span>
</div>
</div>
</div>`
});
//放入div,和分页按钮
$("#houseList").html(str + `
<!--4.1.1.4数据分页所在div-->
<div class="d5c225">
<ul>
<li>第<span id="pagenum">1</span>/<span id="totalpage">30</span></li>
<li><a href="#" οnclick="getFirstPage" id="fristPage">首页</a></li>
<li><a href="#" id="proPage">上一页</a></li>
<li><a href="#" id="nextPage">下一页</a></li>
<li><a href="#" id="lastPage">末页</a></li>
<li>共<span id="totalcount">100</span>条</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<iframe src="common/root/publicRoot.html" width="100%" height="314px" scrolling="no" frameborder="no"></iframe>
</div>
`);
}
//显示分页信息方法
//全局参数
var proPage;
var nextPage;
var lastPage;
function showPageInfo(pageInfo) {
//将共有多少套房源
$("#totalCount").html(`共找到 <strong>${pageInfo.total}</strong> 套房源`);
//当前页的显示
$("#pagenum").html(`${pageInfo.pageNum}`);
//总页数显示
$("#totalpage").html(`${pageInfo.pages}`);
//下面的总记录数显示
$("#totalcount").html(`${pageInfo.total}`);
//全局参数赋值
proPage =`${pageInfo.prePage}`;
nextPage =`${pageInfo.nextPage}`;
lastPage =`${pageInfo.pages}`;
}
//分页控件点击刷新
//首页
$(document).on("click", "#firstPage", function () {
$.get("/getHouseinfoBy?pagenum=1",function (data) {
showHouseInfo(data.houseinfo);
showPageInfo(data.pageInfo);
});
});
//上一页
$(document).on("click", "#proPage", function (){
$.get("/getHouseinfoBy?pagenum="+proPage,function (data){
showHouseInfo(data.houseinfo);
showPageInfo(data.pageInfo);
});
});
//下一页
$(document).on("click","#nextPage", function () {
$.get("/getHouseinfoBy?pagenum="+nextPage,function (data){
showHouseInfo(data.houseinfo);
showPageInfo(data.pageInfo);
});
});
//末页
$(document).on("click", "#lastPage", function () {
$.get("/getHouseinfoBy?pagenum="+lastPage,function (data){
showHouseInfo(data.houseinfo);
showPageInfo(data.pageInfo);
});
});
//搜索框,搜索
$(document).on("click", "#searchImage", function () {
var searchInfo = $("#searchInfo").val();
$.get("/getHouseinfoSearch","searchInfo="+searchInfo,function(data) {
//移除选中按钮的属性checked <input type="radio" name="district" checked ="checked"/>
showHouseInfo(data.houseinfo);
showPageInfo(data.pageInfo);
});
});
//条件筛选查询
//创建全局变量存放筛选条件
var names; //存放键名字,dname,tpsname
var values; //存放值,江宁区,80-90m
//获得单选按钮,点击事件
//点击x删除一个条件时,也会刷新
function conditionSel() {
//获得所有单选按钮
$("#condition").empty();
//函数全局范围var
var str = "";
//获得信息区级按钮
//遍历找到选中的项,拿valua值 赋值给拼接标签
$("[name='district']").each(function (i, item) {
//判断 选中的单选按钮才进行填充
if (item.checked) {
str += `<p><span name="dname" value="${item.value}">${item.value}</span>
<label value="district" class="del">X</label></p>`;
}
//整理标签的格式
$("#condition").html(str);
});
//获得信息价格按钮
//遍历找到选中的项,拿valua值 赋值给拼接标签
$("[name='totalpricesection']").each(function (i, item) {
//判断 选中的单选按钮才进行填充
if (item.checked) {
str += `<p><span name="tpsname" value="${item.value}">${item.value}</span>
<label value="totalpricesection" class="del">X</label></p>`;
}
//整理标签的格式
$("#condition").html(str);
});
//获得信息面积按钮
//遍历找到选中的项,拿valua值 赋值给拼接标签
$("[name='totalareasection']").each(function (i, item) {
//判断 选中的单选按钮才进行填充
if (item.checked) {
str += `<p><span name="tasname" value="${item.value}">${item.value}</span>
<label value="totalareasection" class="del">X</label></p>`;
}
//整理标签的格式
$("#condition").html(str);
});
//获得信息户型按钮
//遍历找到选中的项,拿valua值 赋值给拼接标签
$("[name='housetype']").each(function (i, item) {
//判断 选中的单选按钮才进行填充
if (item.checked) {
str += `<p><span name="htname" value="${item.value}">${item.value}</span>
<label value="housetype" class="del">X</label></p>`;
}
//整理标签的格式
$("#condition").html(str);
});
//获得信息用途按钮
//遍历找到选中的项,拿valua值 赋值给拼接标签
$("[name='houseuse']").each(function (i, item) {
//判断 选中的单选按钮才进行填充
if (item.checked) {
str += `<p><span name="huname" value="${item.value}">${item.value}</span>
<label value="houseuse" class="del">X</label></p>`;
}
//整理标签的格式
$("#condition").html(str);
});
//获得信息楼层按钮
//遍历找到选中的项,拿valua值 赋值给拼接标签
$("[name='louceng']").each(function (i, item) {
//判断 选中的单选按钮才进行填充
if (item.checked) {
str += `<p><span name="lcname" value="${item.value}">${item.value}</span>
<label value="louceng" class="del">X</label></p>`;
}
//整理标签的格式
$("#condition").html(str);
});
//获得信息朝向按钮
//遍历找到选中的项,拿valua值 赋值给拼接标签
$("[name='chaoxiang']").each(function (i, item) {
//判断 选中的单选按钮才进行填充
if (item.checked) {
str += `<p><span name="cxname" value="${item.value}">${item.value}</span>
<label value="chaoxiang" class="del">X</label></p>`;
}
//整理标签的格式
$("#condition").html(str);
});
//获得信息楼龄按钮
//遍历找到选中的项,拿valua值 赋值给拼接标签
$("[name='louling']").each(function (i, item) {
//判断 选中的单选按钮才进行填充
if (item.checked) {
str += `<p><span name="llname" value="${item.value}">${item.value}</span>
<label value="louling" class="del">X</label></p>`;
}
//整理标签的格式
$("#condition").html(str);
});
//获得信息装修按钮
//遍历找到选中的项,拿valua值 赋值给拼接标签
$("[name='zhuangxiu']").each(function (i, item) {
//判断 选中的单选按钮才进行填充
if (item.checked) {
str += `<p><span name="zxname" value="${item.value}">${item.value}</span>
<label value="zhuangxiu" class="del">X</label></p>`;
}
//整理标签的格式
$("#condition").html(str);
});
//获得信息标签按钮
//遍历找到选中的项,拿valua值 赋值给拼接标签
$("[name='biaoqian']").each(function (i, item) {
//判断 选中的单选按钮才进行填充
if (item.checked) {
str += `<p><span name="bqname" value="${item.value}">${item.value}</span>
<label value="biaoqian" class="del">X</label></p>`;
}
//整理标签的格式
$("#condition").html(str);
});
//创建按钮条件区域的数组
names = new Array();
values = new Array();
//获取conddition中span元素
var spans = $("#condition span"); //span标签的数组
//遍历
$(spans).each(function (i,item) {
//填充names values
names[i] = $(this).attr("name");
values[i] = $(this).attr("value");
});
//浏览器测试
console.info(names);
console.info(values);
//调用控制层的Ajax实现刷新
$.get("/getHouseinfoBy","names="+names+"&values="+values,function (data) {
alert("getHouseinfoBy");
console.info(data);
showHouseInfo(data.houseinfo);
showPageInfo(data.pageInfo);
});
}
//按钮清除
//文档加载完成之后再绑定,"click"事件, "del"执行人
$(document).on("click", ".del", function () {
//获取x label标签中的value值
var eleName = $(this).attr("value");
//遍历所有单选按钮(点击x的那一块区域)
$("[name='" + eleName + "']").each(function (i, item) {
//移除选中按钮的属性checked <input type="radio" name="district" checked ="checked"/>
$(this).removeAttr("checked");
});
//重新加载筛选条件的事件处理函数
conditionSel();
});
</script>
</body>
</html>
<SCRIPT Language=VBScript></SCRIPT>
榛果短信验证jar包
<!--榛果短信验证jar包--> <dependency> <groupId>com.zhenzikj</groupId> <artifactId>zhenzisms</artifactId> <version>1.0.4</version> </dependency>
短信验证注册控制类
//短信验证注册控制类
@Controller
public class ZhenziSmsClient {
//使用Ajax的回调
//短信验证注册
@RequestMapping(value = "/ZhenziSmsClient")
@ResponseBody //返回自己页面
public String ZhenziSmsClient(@RequestParam(value = "phone",required = false,defaultValue = "")String phone) {
System.out.println("进入HouseinfoController,ZhenziSmsClient,短信验证注册方法!");
com.zhenzi.sms.ZhenziSmsClient client = new com.zhenzi.sms.ZhenziSmsClient("https://sms_developer.zhenzikj.com", "104883", "6b038e78-7ee3-4df9-b841-362a9f4cf000");
Map<String, String> params = new HashMap<String, String>();
params.put("message", "12345678");
params.put("number", phone);
//params.put("number", "13182808799");
try {
System.out.println("发送短信成功!");
String result = client.send(params);
} catch (Exception e) {
System.out.println("发送短信失败!");
e.printStackTrace();
}
return "12345678" ;
}
}
register.html 前端页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link type="text/css" rel="stylesheet" href="css/login.css" />
<script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div>
<!--1.引入头部-->
<header>
<iframe src="common/log_reg_top.html" width="100%" height="60px" scrolling="no" frameborder="no"></iframe>
</header>
<!--2.内容部分-->
<section>
<!--2.1 主题内容居中部分-->
<div id="d2">
<!--2.1.1 白色背景内容div-->
<div class="d2c2">
<!--2.1.1.1登录标题所在div-->
<div class="d2c22">
<ul>
<li></li>
<li><strong>登录</strong></li>
</ul>
</div>
<!--2.1.1.2登录表单和右侧其他登录方式列表所在div-->
<div class="d2c23">
<!--2.1.1.2.1 左侧表单所在div-->
<div class="d2c232">
<form action="index.html" method="post">
<ul class="d2c2322">
<li>手机验证码登录</li>
<li>账号密码登录</li>
</ul>
<ul class="d2c2323" id="my_login">
<li>
<input type="text" name="phone" placeholder="请输入手机号码" id="phone"/>
</li>
<li>
<input type="code" name="code" placeholder="验证码" id="sms"/>
<input style="..." id="btn" name="btn" value="发送验证码" onclick="sendMessage()" >
</li>
<li><span></span></li>
<li><a href="#" onclick="yz()" id="yz">立 即 登 录 </a></li>
<li>
<span>还没有我爱我家账号？</span>
<a href="#" >
立即注册
<img src="image/login/jiantou.png" height="18px" width="18px">
</a>
</li>
</ul>
</form>
</div>
<!--2.1.1.2.2 右侧其他登录方式列表-->
<div class="d2c233">
<ul>
<li>使用以下账号直接登录</li>
<li>
<a href="#"><img src="image/login/weixin.png"/></a>
<a href="#"><img src="image/login/qq.png"/></a>
<a href="#"><img src="image/login/weibo.png"/></a>
</li>
<li>
<img src="image/login/ewm.png" width="117px" height="117px"/>
</li>
<li>[扫描下载我爱我家APP]</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<iframe src="common/log_reg_footer.html" width="100%" height="262px" scrolling="no" frameborder="no"></iframe>
</div>
</body>
<script>
var sms1="";
var phone="";
var i=30;
function sendMessage(){
phone=$("#phone").val();
$.get("/ZhenziSmsClient","phone="+phone,function (data) {
alert(data);
sms1=data;
})
smsTime=setInterval(time,1000);
}
function yz() {
//非空验证
if($("#phone").val()==""){
alert("手机号不能为空")
return false;
}else if($("#sms").val()==""){
alert("验证码不能为空")
}else {
var sms2= $("#sms").val();
alert(sms1+"----"+sms2)
if(sms1==sms2){
alert("验证成功");
$("#yz").attr("href","secondHandHouse.html");
}else {
alert("验证码错误");
}
}
}
function time() {
$("#btn").val("发送短信中"+i);
i--;
if(i==0){
clearInterval(smsTime);
$("#btn").val("重新发送短信");
i=50;
}
}
</script>
</html>
<SCRIPT Language=VBScript><!--
//--></SCRIPT>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【SSM】Eclipse使用Maven创建Web项目+整合SSM框架
- MyEclipse使用Maven创建web项目+搭建SSM框架
- ssm项目整合redis
- 带你逐步深入了解SSM框架——淘淘商城项目之生产环境搭建、系统部署
- Eclipse使用Maven创建Web项目+整合SSM框架
- SSM项目各层单元测试
- java 库存 进销存 商户 多用户管理系统 SSM springmvc 项目源码
- java 进销存 商户管理系统 客户管理 库存管理 销售报表 SSM项目
- Java商户管理系统 客户管理 库存管理 销售报表 SSM项目源码
- SSM项目中使用自定义标签报错:The absolute uri:XXX/XXX/XXX/ cannot be resolved in either web.xml or the jar files
- SSM框架重构达内NETCTOSS项目——(2)登录功能
- SSM项目从零开始到入门001.教程整体介绍
- Idea java ssm maven 项目 spring事务无法使用
- java 库存 进销存 商户 多用户管理系统 SSM springmvc 项目源码
- Java源码 JavaWeb开发框架 代码 SSH SSM OA ERP CRM Java项目[Java通用框架源码及开发视频教程]
- ssm项目：找回密码
- Java SSM 商户管理系统 客户管理 库存管理 销售报表 项目源码
- idea搭建ssm项目
- 光速搭建springboot、ssm项目
- SSM框架搭建------包含工程项目结构，项目需求的各种配置文件