租房项目

该文章图片存在错误 详细请房屋http://four.haser.top/
(项目源码也可以去哪拿)
后端基于 java :struts1技术,采用MVC架构模式 前端 :CSS3 HTML5 Ajax JQuery;

这个项目有利于 解决北漂人员的租房问题
登录界面:
w.png

w.png

 

HTML排比较随意:
登录按钮是由div加阴影制作
这里 点击到切换到注册页面会有一个旋转切换的效果动画 (1).gif

动画 (1).gif

 

注册页面(雷同登录页面)

不可用.png

不可用.png

 

可用.png

可用.png
这里将显示判断用户的用户名是否被注册过 如果被注册过 将提示并且注册按钮将不可用

 

注册.png

注册.png
不同的是注册页面将会有一个注册验证 防止人机无线注册
这里需要输入验证码 没有邮箱或者邮箱错误 都将无法注册

 

链接上JQuey 的点击事件 触发slideDown事件 显示登录页面
![P6TP9OH)%7$S8~V]%K`MOIQ.png](http://four.haser.top/usr/uploads/2020/12/4024059731.png)
点击登录时 会进行一个判断 分为四种情况
1 表示登录成功
2 表示用户名不存在
3 表示密码错误
4 表示账号被锁了
如果登录失败操作三次 该用户将会被锁十分钟 用这种方式 防止账号密码被彩虹表破解

首页(index.jsp)
QQ截图20201214152354.png

QQ截图20201214152354.png
这里是一堆查询(查询全部 模糊查询 单值查询 多条件查询)
1.最上面哪一个搜索框可根据标题模糊查询fade.giffade.gif
这里使用了一个FadeIn的方法 当鼠标悬浮的时候 高级查询div滑动出现高级查询.png高级查询.png
再这上面可进行高级查询
分页 (1).gif分页 (1).gif
首页的数据都是根据slq(5/5)
分页查询出来的 这里下一页采用了以下sql语句可进行分页查询 分页的效果采用了一个自定义动画 变窄div的宽度模拟一个翻页的效果
sql分页.pngsql分页.png
sql语句需要的参数可更具自己实际需要来填写
是否用户.png是否用户.png
这里是在登录的时候将用户名保存在cookie里面 我们更具cookie里面是否有值来进行判断显示不同的文字链接 然后我们更具cookie来拿值显示
document.cookie = "uname="+escape($("#username").val());
当点击注销的时候我们清空cookie
//编写一个查询用户的方法

 

$.post("user.do?method=VerifyName&uname="+getCookie("uname"),function(data){if(getCookie("uname")!=null){
var obj = ""
+"当前用户:   "
+"管理我的租房信息   "
+"[注销]";
$(".denglu").append(obj);
$("#userName").append(data[0].uname) ;
$("#uuid").val(data[0].uuid);
}else{
var obj = "您还为登录点击登录"
$(".denglu").append(obj);
}
//注销
$("#exist").click(function(){
clearcookie("uname");
})
},"json");
});
查询.png

查询.png
当点击管理我的租房信息 将跳转到自己的租房管理页面 再这里我们会根据用户的id查询用户信息 并且显示自己的发布的租房信息管理.png管理.png
点击删除 会将发布的提示是否删除 点击是 将会被删除
点击修改 调用jquery hide()和show()方法 显示修改的div并加载用户发布的详细租房信息
修改.png修改.png
详细查询.png详细查询.png

 

posted @ 2020-12-17 22:58  FourAu  阅读(114)  评论(0)    收藏  举报