第二期项目前台详细分析

在打开服务器时，会激活一个application监听，将所有房屋的信息查出并存到数据库，
这样会减少数据库的压力，以后的取值只需要从application中拿。

一，注册页面
1，利用正则表达式，来规范用户输入的信息。输错了会用jQuery的失焦事件，改变输入框后面的提示信息
2，给提交按钮绑定点击事件，判断文本框是否都填好了。如果没有错误，则跳到登录页面。

二，登录页面
1，给登录按钮绑定了判空键，一但发现，有框为空，则结束。
2，通过CodeServlet产生验证码， BufferedImage 在通过画笔Graphics画在在imgs上记得保存恢复现场
随机产生干扰点，防止机器读码。
3，如果不为空则发jaxa请求到UserServlet传过去的数据是利用jquery中的serialize()
方法将整个表单的值转过去
4，userservle中的loginop方法：
利用RequestUtil将表单提交过来的参数转化为对象
然后判断验证码是否正确，如果错误则返回验证码错误，结束操作

    如果验证码正确则访问数据库，如果找到此用户则跳转至首页，并且将此用户存入session中
    如果该用户找不到，则返回，错误信息。

    以json的格式回送
    所有以json的格式回送的数据都会在outData()中用Gson解析，再回传给页面。

三，首页
静态效果：
1，给头部绑定了鼠标移上和移开的方法，
当鼠标移开时，创建定时器，启动图片轮换。
当鼠标移上时，清除定时器。停止图片轮换。

检测是否登录：
    当页面加载完，会发送一个ajax请求到yaoUserServlet，通过UserLoginOp检测用户是否登录
    判断session中是否有用户登录的信息，如果取到则改变头部的样式，显示用户名。

随机在首页显示两个房间信息：
    在页面加载完成之后发送一个ajax到yaoRoomServlet通过FindCityRoomRand（）方法
    先去到application中的房子，然后通过RoomRand（）方法在已有的房屋中随机产生两不同的房屋id
    匹配这俩个id，将找到的房屋存到一个list中，再将list存到json中的object中，
    再写出到首页。

接受俩个房子信息：
    首页接受到ajax以json格式回传的数据然后再通过字符串的拼接，将其信息显示在首页。

给随机产的这两个房子绑定点击方法showInfo01(this)：
    这里值得的注意的是，要在拼接时，就要写上方法，要是在后面等页面加载完再绑定方法就迟了，因为
    这里是等页面加载完才发送的ajax，所以会找不到想要绑定的这个元素。

    点击事件showInfo01(this)；
    在绑定这个方法时会带入参数this，以此来保证获取到你指定的放间id。
    在这个方法中也会发送一个ajax到yaoRoomServlet，并且将roomid拼接到yaoRoomServlet

    在yaoRoomServlet中FindSigleRoomId（）将此id存到session中，然后再匹配这个id
    将此房屋的详细信息存到一个map中存到session中配合kk_show_rooms.jsp中的foreach取值。
    再通过json返回一个code=1，通过location.href="kk_show_rooms.jsp"跳转页面。

点击城市图片：
    点击城市图片会跳转至yaohouse页面，显示出该城市下对应的房间信息。
    在点击时也会发一个ajax请求到yaoRoomServlet通过FindCityRoomId（）方法
    接受首页传来的城市名，在这之前会通过查询数据更新application中的房间信息。
    //如何取出application 呢？
    ServletContext application= request.getSession().getServletContext();
    将这个城市id存到session中。


搜索框中的日历：
    首先引入My97DatePicker日历js框架，改写其部分代码让过去的时间不能选择。

搜索按钮也是与点击城市按钮差不多。

四，显示城市下的房间，yaohouse.jsp页面。
1，这个页面所有的房间信息都是通过ajax刷出来的，在yaoRoomServlet的FindCityRoom（）方法中
取到开始存的那个城市ID，然后通过匹配application中的房间信息，要是是这个城市下的房间
就存到一个list中，再把这个list存到json中，再回转给页面，
页面接受到这些数据再通过拼接的方式刷出来。

跳详细信息的页面基本是跟首页的那个跳转是一样的。

2，百度地图api:
    这个页面还会刷新出一个百度地图，这个地图是引用的百度地图的api接口，
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YRLRyjWVvTVjOnB3yk6gie2s"></script>
    还要注册百度api的信息获得秘钥，才能使用它的接口
    秘钥：ak=YRLRyjWVvTVjOnB3yk6gie2s
    通过取到首页传过来的城市名，并且改写百度地图的JavaScript脚本，将城市名设置
    进去就可以成功显示出对应城市下的地图了。
    注意：
    在使用百度地图api时需注意尽量使用JavaScript减少使用jQuery，否则会引起冲突导致地图不能显示
    http://developer.baidu.com/map/jsdemo.htm#a1_2百度地图的网址

3，这个跳到详细页面跟首页的跳详情也是一样的。
    也要注意选定房间的取值。

五，详细页面的显示 kk_show_ronms.jsp
这个页面是用来显示房间的具体的信息的。
因为前面已经通过 yaoRoomServlet 中的FindSigleRoomId方法将具体的房间存入了
session中，所以在这边的jsp就可以直接获取到session中的值，显示在页面。

下单确定按钮
    在点击确定下单按钮时会发送一个ajax请求到yaoOrderServlet，数据以json的格式传输
    将此房源id，日期，价格等参数进行拼接，传送给servelt
    在yaoOrderServlet中的InsertOrder方法中：
        会获取当前的用户id也是从session中取得，如果当前没有用户登录，则json，就会返回code=0；
        表示无用户登录，然后在ajax中接受后，通过location.href="tg_login.html";跳转至登录页面；
        如果有用户登录则将房源id,用户id等信息通过InsertOrder（）方法在业务层将数据插入数据库。
        然后跳转至显示订单的页面  x_roomsresource.jsp

六，预订单显示页面 x_roomsresource.jsp
，您预订的旅程，谁预订了你的房间，您发布的房源 查看个人资料，以及发邮件。

点击您预订的旅程 会发送一个ajax请求到yaoOrderServlet通过其FindOrder()查找订单信息
    首先会从session中取到用户的id然后会从数据将该用户的所有订单信息查出，存到一个list中
    然后再将这个list中的信息存到一个map中，为了配合后面的jsp页面中的foreach循环。
    然后将这个map存到一个session中。
    在通过request.getRequestDispatcher("backcust/yaouseryuding.jsp").forward(request, response);
    到yaouseryuding.jsp页面。

    注意这是一个小页面，里面用来显示用户的所有预订信息，因为它要作为一个html返回给ajax，
    所以不能有html的头部等信息，因为在页面用到了forEach 所有在jsp的顶端要引入
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    标签。

    在ajax中的dataTYpe中的数据类型改为html
        然后用一个层接受他即可。
    这样返回一个小页面的形式虽然方便，但是不利于网站转向手机，因为转过来的是一个页面，不是直接的
    json数据，不利于数据的提取，耗费流量。

    谁预订了你的房间的基本流程跟1的差不多。