黑马旅游网（web综合项目）

柠砸

已于 2022-01-21 17:53:58 修改

阅读量7.6k

点赞数 8

分类专栏： web 文章标签：前端 html p2p

于 2021-12-18 23:19:33 首次发布

本文链接：https://blog.csdn.net/weixin_62226325/article/details/122015615

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

创建ResultInfo用于封装后端返回前端数据对象

一，技术选型

web层

1. Servlet：前端控制器
2. html：视图
3. Filter：过滤器
4. BeanUtils：数据封装
5. Jackson：json序列化工具

service层

1. Javamail：java发送邮件工具
2. Redis：nosql内存数据库
3. Jedis：java的redis客户端

dao层

1. Mysql：数据库
2. Druid：数据库连接池
3. JdbcTemplate：jdbc的工具

二，注册功能

1.页面效果：

2.功能分析：

3.代码实现：

a）前端代码的实现

表单加上提交地址：

验证表单内容：

<script>
			/*
				表单校验：
					1.用户名：单词字符，长度8到20位
					2.密码：单词字符，长度8到20位
					3.email：邮件格式
					4.姓名：非空
					5.手机号：手机号格式
					6.出生日期：非空
					7.验证码：非空
			 */

			//校验用户名
			//单词字符，长度8到20位
			function checkUsername() {
                //1.获取用户名值
				var username = $("#username").val();
				//2.定义正则
				var reg_username = /^\w{8,20}$/;
				
				//3.判断，给出提示信息
			    var flag = reg_username.test(username);
			    if(flag){
			        //用户名合法
                    $("#username").css("border","");
				}else{
			        //用户名非法,加一个红色边框
					$("#username").css("border","1px solid red");
				}
			    
                return flag;
            }

            //校验密码
            function checkPassword() {
                //1.获取密码值
                var password = $("#password").val();
                //2.定义正则
                var reg_password = /^\w{8,20}$/;

                //3.判断，给出提示信息
                var flag = reg_password.test(password);
                if(flag){
                    //密码合法
                    $("#password").css("border","");
                }else{
                    //密码非法,加一个红色边框
                    $("#password").css("border","1px solid red");
                }

                return flag;
            }

            //校验邮箱
			function checkEmail(){
			    //1.获取邮箱
				var email = $("#email").val();
				//2.定义正则		itcast@163.com
				var reg_email = /^\w+@\w+\.\w+$/;

				//3.判断
				var flag = reg_email.test(email);
				if(flag){
                    $("#email").css("border","");
				}else{
                    $("#email").css("border","1px solid red");
				}

				return flag;
			}

			//验证姓名
			function checkName() {
				//1.获取姓名值
				var name = $("#name").val();
				//2.定义正则
				var reg_name = /^\w{8,20}$/;

				//3.判断，给出提示信息
				var flag = reg_name.test(name);
				if(flag){
					//姓名合法
					$("#name").css("border","");
				}else{
					//姓名非法,加一个红色边框
					$("#name").css("border","1px solid red");
				}

				return flag;
			}

			//验证手机号
			function checkTelephone() {
				//1.获取手机号值
				var telephone = $("#telephone").val();
				//2.定义正则
				var reg_telephone = /^\s*$/g;

				//3.判断，给出提示信息
				var flag = reg_telephone.test(telephone);
				if(flag){
					//用户名合法
					$("#telephone").css("border","");
				}else{
					//用户名非法,加一个红色边框
					$("#telephone").css("border","1px solid red");
				}

				return flag;
			}
			//验证生日
			function checkBirthday() {
				//1.获取生日值
				var birthday = $("#birthday").val();
				//2.定义正则
				var reg_birthday = /^\s*$/g;

				//3.判断，给出提示信息
				var flag = reg_birthday.test(birthday);
				if(flag){
					//生日合法
					$("#birthday").css("border","");
				}else{
					//生日非法,加一个红色边框
					$("#birthday").css("border","1px solid red");
				}

				return flag;
			}
			//验证验证码
			function checkCheck() {
				//1.获取验证码值
				var check = $("#check").val();
				//2.定义正则
				var reg_check = /^\s*$/g;

				//3.判断，给出提示信息
				var flag = reg_check.test(check);
				if(flag){
					//验证密码合法
					$("#check").css("border","");
				}else{
					//验证码非法,加一个红色边框
					$("#check").css("border","1px solid red");
				}

				return flag;
			}

			$(function () {
                //当表单提交时，调用所有的校验方法
				$("#registerForm").submit(function(){
					//1.发送数据到服务器
					if(checkUsername() && checkPassword() && checkEmail() && checkCheck() && checkTelephone() && checkBirthday() && checkName()){
					    //校验通过,发送ajax请求，提交表单的数据   username=zhangsan&password=123

						$.post("registUserServlet",$(this).serialize(),function(data){
							//处理服务器响应的数据  data  {flag:true,errorMsg:"注册失败"}

							if(data.flag){
							    //注册成功，跳转成功页面
								location.href="register_ok.html";
							}else{
							    //注册失败,给errorMsg添加提示信息
								$("#errorMsg").html(data.errorMsg);

							}
						});
					}
					//2.不让页面跳转
                    return false;
                    //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
				});

                //当某一个组件失去焦点是，调用对应的校验方法
				$("#username").blur(checkUsername);
                $("#password").blur(checkPassword);
                $("#email").blur(checkEmail);
                $("#check").blur(checkCheck);
                $("#telephone").blur(checkEmail);
                $("#name").blur(checkName());
                $("#birthday").blur(checkBirthday());


            });


		</script>

b）异步（ajax）提交表单

🔺在此使用异步提交表单是为了获取服务器响应的数据。因为我们前台使用的是html作为视图层，不能够直接从servlet相关的域对象获取值，只能通过ajax获取响应数据

c）后台代码的实现

创建ResultInfo用于封装后端返回前端数据对象

（用于前后端数据交互成功与否的联系以及异常信息的传递，封装为对象转换json形式从而便于开发）

/**
 * 用于封装后端返回前端数据对象
 */
public class ResultInfo implements Serializable {
    private boolean flag;//后端返回结果正常为true，发生异常返回false
    private Object data;//后端返回结果数据对象
    private String errorMsg;//发生异常的错误消息

    //无参构造方法
    public ResultInfo() {
    }
    public ResultInfo(boolean flag) {
        this.flag = flag;
    }
    /**
     * 有参构造方法
     * @param flag
     * @param errorMsg
     */
    public ResultInfo(boolean flag, String errorMsg) {
        this.flag = flag;
        this.errorMsg = errorMsg;
    }
    /**
     * 有参构造方法
     * @param flag
     * @param data
     * @param errorMsg
     */
    public ResultInfo(boolean flag, Object data, String errorMsg) {
        this.flag = flag;
        this.data = data;
        this.errorMsg = errorMsg;
    }

    public boolean isFlag() {
        return flag;
    }

    public void setFlag(boolean flag) {
        this.flag = flag;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

    public String getErrorMsg() {
        return errorMsg;
    }

    public void setErrorMsg(String errorMsg) {
        this.errorMsg = errorMsg;
    }
}

🔺前端能提供ajax获取响应的 ResultInfo数据，并进行处理判断

并在光标处加入错误信息

①编写RegistUserServlet

基本内容

//1.获取数据
        Map<String, String[]> map = request.getParameterMap();

        //2.封装对象
        User user = new User();
        try {
            //将map封装到user对象中
            BeanUtils.populate(user,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        //3.调用service完成注册
        UserService service = new UserServiceImpl();
        boolean flag = service.regist(user);
        ResultInfo info = new ResultInfo();
        //4.响应结果
        if(flag){
            //注册成功
            info.setFlag(true);
        }else{
            //注册失败
            info.setFlag(false);
            info.setErrorMsg("注册失败!");
        }

        //将info对象序列化为json，运用了jackson
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(info);

        //将json数据写回客户端，json为字符串数据，可以用字节流和字符流
        //字节流要加getbyte，字符流要更方便一些
        //设置content-type
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(json);

验证码获取以及校验

⭕补充：前端验证码与后台交互以及刷新（登录注册同理）：

<td class="td_right check">
        <input type="text" id="check" name="check" class="check">
        <!--src中导入CheckCodeServlet的url“checkCode”-->
        <img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
        <script type="text/javascript">
        //图片点击事件
        function changeCheckCode(img) {
        img.src="checkCode?"+new Date().getTime();
    }
    </script>
</td>

RegistUserServlet中对验证码的判断（CHECKCODE_SERVER为验证码在session域中的名称）

 //验证校验
        String check = request.getParameter("check");
        //从sesion中获取验证码
        HttpSession session = request.getSession();
        String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
        session.removeAttribute("CHECKCODE_SERVER");//为了保证验证码只能使用一次
        //比较
        if(checkcode_server == null || !checkcode_server.equalsIgnoreCase(check)){
            //验证码错误
            ResultInfo info = new ResultInfo();
            //注册失败
            info.setFlag(false);
            info.setErrorMsg("验证码错误");
            //将info对象序列化为json
            ObjectMapper mapper = new ObjectMapper();
            String json = mapper.writeValueAsString(info);
            response.setContentType("application/json;charset=utf-8");
            response.getWriter().write(json);
            return;
        }

正确则进行上一步的基本内容操作。

🔺初步分析：要在UserServiceImpl中实现登录方法（regist）需要根据用户写入的表单数据（即在servlet中封装的user对象）中拿到用户名查找用户是否存在（实现findByUsername方法查询），并根据逻辑判断，存在就return false，使servlet中响应为false（注册失败），不存在则可以保持数据（实现save方法保存），并同时return true。

②在UserService中编写regist方法

③分别在UserDao和UserDaoImpl中实现findByUsername 和save方法

 /**
     * 根据用户名查询用户信息
     * @param username
     * @return
     */
    public User findByUsername(String username);

    /**
     * 用户保存
     * @param user
     */
    public void save(User user);

要在findByUsername中处理异常，不然就会向UserServiceImpl中放回异常，我们要想它出异常时返回null，故catch异常而不处理。

 private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    @Override
    public User findByUsername(String username) {
        User user = null;
        try {
            //1.定义sql
            String sql = "select * from tab_user where username = ?";
            //2.执行sql
            user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username);
        } catch (Exception e) {

        }

        return user;
    }

    @Override
    public void save(User user) {
        //1.定义sql
        String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email,status,code) values(?,?,?,?,?,?,?,?,?)";
        //2.执行sql

        template.update(sql,user.getUsername(),
                    user.getPassword(),
                user.getName(),
                user.getBirthday(),
                user.getSex(),
                user.getTelephone(),
                user.getEmail(),
                user.getStatus(),
                user.getCode()
                );
    }

④UserServiceImpl的实现

 private UserDao userDao = new UserDaoImpl();
    /**
     * 注册用户
     * @param user
     * @return
     */
    @Override
    public boolean regist(User user) {
        //1.根据用户名查询用户对象
        User u = userDao.findByUsername(user.getUsername());
        //判断u是否为null
        if(u != null){
            //用户名存在，注册失败
            return false;
        }
            //用户名不存在，执行注册成功代码
            userDao.save(user);
            return true;
}

🔺深入分析：用户激活

①要使用工具类（MailUtils）根据用户填写的邮箱发送邮件，要在UserServiceImpl中的登录方法（regist）中用工具类（UuidUtil）给注册成功的用户设定特有的激活码，并设定用户激活状态为N，保存用户（save）的同时发送激活邮件

②创建ActiveUserServlet来操作前后端激活码的数据，从前端获取激活码，并根据激活成功与否进行信息的响应

 //1.获取激活码
        String code = request.getParameter("code");
        if(code != null){
            //2.调用service完成激活
            UserService service = new UserServiceImpl();
            boolean flag = service.active(code);

            //3.判断标记
            String msg = null;
            if(flag){
                //激活成功
                msg = "激活成功，请<a href='login.html'>登录</a>";
            }else{
                //激活失败
                msg = "激活失败，请联系管理员!";
            }
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write(msg);
        }

③ 根据激活码调用UserService进行激活（实现active方法）

④并在实现类中实现此方法，而想要实现此方法，则必须根据激活码查询到对于的user对象（findByCode），并实现方法（updateStatus）修改激活状态为Y，所以需要在UserDao以及实现类中创建对应的方法。

/**
     * 激活用户
     * @param code
     * @return
     */
    @Override
    public boolean active(String code) {
        //1.根据激活码查询用户对象
        User user = userDao.findByCode(code);
        if(user != null){
            //2.调用dao的修改激活状态的方法
            userDao.updateStatus(user);
            return true;
        }else{
            return false;
        }

⑤UserDao

⑥UserDaoImpl

/**
     * 根据激活码查询用户对象
     * @param code
     * @return
     */
    @Override
    public User findByCode(String code) {
        User user = null;
        try {
            String sql = "select * from tab_user where code = ?";

            user = template.queryForObject(sql,new BeanPropertyRowMapper<User>(User.class),code);
        } catch (DataAccessException e) {
            e.printStackTrace();
        }

        return user;
    }

    /**
     * 修改指定用户激活状态
     * @param user
     */
    @Override
    public void updateStatus(User user) {
        String sql = " update tab_user set status = 'Y' where uid=?";
        template.update(sql,user.getUid());
    }

三，登录功能

1.功能分析：

2.后台代码实现：

①创建LoginServlet进行前后端数据交互以及判断，获取前端用户登录时填写的数据，将用户填写的数据封装为user对象调用UserService的登录方法进行登录（实现login方法）给LoginServlet返回对应的user对象，而登录需要判断用户是否存在和激活，则需要在UserDao中创建对应的方法（实现findByUsernameAndPassword方法），并给予不同的提示信息，再给予前端响应

//1.获取用户名和密码数据
        Map<String, String[]> map = request.getParameterMap();
        //2.封装User对象
        User user = new User();
        try {
            BeanUtils.populate(user,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        //3.调用Service查询
        UserService service = new UserServiceImpl();
        User u  = service.login(user);

        ResultInfo info = new ResultInfo();

        //4.判断用户对象是否为null
        if(u == null){
            //用户名密码或错误
            info.setFlag(false);
            info.setErrorMsg("用户名密码或错误");
        }
        //5.判断用户是否激活
        if(u != null && !"Y".equals(u.getStatus())){
            //用户尚未激活
            info.setFlag(false);
            info.setErrorMsg("您尚未激活，请激活");
        }
        //6.判断登录成功
        if(u != null && "Y".equals(u.getStatus())){
            request.getSession().setAttribute("user",u);//登录成功标记

            //登录成功
            info.setFlag(true);
        }

        //响应数据
        ObjectMapper mapper = new ObjectMapper();

        response.setContentType("application/json;charset=utf-8");
        mapper.writeValue(response.getOutputStream(),info);

    }

②UserService的登录方法

Impl的实现：

/**
     * 登录方法
     * @param user
     * @return
     */
    @Override
    public User login(User user) {
        return userDao.findByUsernameAndPassword(user.getUsername(),user.getPassword());
    }

}

③ UserDao中实现findByUsernameAndPassword方法

Impl的实现：

 /**
     * 根据用户名和密码查询的方法
     * @param username
     * @param password
     * @return
     */
    @Override
    public User findByUsernameAndPassword(String username, String password) {
        User user = null;
        try {
            //1.定义sql
            String sql = "select * from tab_user where username = ? and password = ?";
            //2.执行sql
            user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username,password);
        } catch (Exception e) {

        }

        return user;
    }

3，前端代码的实现：

<!--导入jquery-->
	<script src="js/jquery-3.3.1.js"></script>
	<script>

		$(function () {
            //1.给登录按钮绑定单击事件
			$("#btn_sub").click(function () {
                //2.发送ajax请求，提交表单数据
				$.post("loginServlet",$("#loginForm").serialize(),function (data) {
					//data : {flag:false,errorMsg:''}
					if(data.flag){
					    //登录成功
						location.href="index.html";
					}else{
					    //登录失败
						$("#errorMsg").html(data.errorMsg);
					}
                });
            });
        });
		//3.处理响应结果
	</script>

⭕登陆成功后的用户提示：

效果展示

后台实现：

当用户登录成功后，发送异步请求，获取登录的用户姓名，展示在登录首页上

需要获取user对象中的姓名，故需要创建servle（FindUserServlet）进行前后端的交互

在登录（LoginServlet中以及把user传入到了session域中了）

 //6.判断登录成功
        if(u != null && "Y".equals(u.getStatus())){
            request.getSession().setAttribute("user",u);//登录成功标记

            //登录成功
            info.setFlag(true);
        }

直接获取user对象

@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //从session中获取登录用户
        Object user = request.getSession().getAttribute("user");
        //将user写回客户端

        ObjectMapper mapper = new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");
        mapper.writeValue(response.getOutputStream(),user);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

前端实现：

使用ajax实现异步数据请求

<script>
    $(function () {
       $.get("findUserServlet",{},function (data) {
           //{uid:1,name:'李四'}
           var msg = "欢迎回来，"+data.name;
           $("#span_username").html(msg);

       }); 
    });

</script>

⭕退出功能的实现：

后台实现：

创建ExitServlet，使用户访问servlet，销毁session，并跳转到登录页面

@WebServlet("/exitServlet")
public class ExitServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.销毁session
        request.getSession().invalidate();

        //2.跳转登录页面
        response.sendRedirect(request.getContextPath()+"/login.html");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

前端实现：

⭕servlet的优化

简述：该项目使用了大量的servlet，为了减少耦合，可以创建BaseServlet，学习向service一样，通过路径名分发不同的servlet，再通过反射获取对应的方法。

BaseServlet的创建

使全部servlet继承BaseServlet，改路径为/xxx/*

public class BaseServlet extends HttpServlet {


    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //System.out.println("baseServlet的service方法被执行了...");

        //完成方法分发
        //1.获取请求路径
        String uri = req.getRequestURI(); //   /travel/user/add
        System.out.println("请求uri:"+uri);//  /travel/user/add
        //2.获取方法名称
        String methodName = uri.substring(uri.lastIndexOf('/') + 1);
        System.out.println("方法名称："+methodName);
        //3.获取方法对象Method
        //谁调用我？我代表谁
        System.out.println(this);//UserServlet的对象cn.itcast.travel.web.servlet.UserServlet@4903d97e
        try {
            //获取方法
            //（忽略访问权限符）不建议 把对应方法改为public即可
            // Method method = this.getClass().getDeclaredMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            Method method = this.getClass().getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            //4.执行方法
            //暴力反射① 
            //method.setAccessible(true);
            method.invoke(this,req,resp);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }


    }

四，分类数据展示功能

1.效果展示：

2.分析：

3. 后台代码实现

🔺实现分析：前端要获取分类数据，需要向后台发送Ajax请求获取数据，需要创建Servlet实现查询方法（实现findAll方法），调用Service对数据库的分类进行查询，再响应回前端。而需要创建CategoryService和CategoryService来实现findAll方法。

①Dao的实现

其实现类：

public class CategoryDaoImpl implements CategoryDao {

    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    @Override
    public List<Category> findAll() {
        String sql = "select * from tab_category ";
        return template.query(sql,new BeanPropertyRowMapper<Category>(Category.class));
    }
}

②Service的实现

其实现类：

public class CategoryServiceImpl implements CategoryService {

    private CategoryDao categoryDao = new CategoryDaoImpl();

    @Override
    public List<Category> findAll() {
        return categoryDao.findAll();
    }
}

③servlet的实现

@WebServlet("/category/*")
public class CategoryServlet extends BaseServlet {

    private CategoryService service = new CategoryServiceImpl();

    /**
     * 查询所有
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void findAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.调用service查询所有
        List<Category> cs = service.findAll();
        //2.序列化json返回
       /* ObjectMapper mapper = new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");
        mapper.writeValue(response.getOutputStream(),cs);*/
       writeValue(cs,response);

    }

}

🔺优化分析：因为servlet中后面可能还需要多次进行序列化json的返回，故可以在BaseServlet中写一个序列化 json的方法便于servlet的调用。

 /**
     * 直接将传入的对象序列化为json，并且写回客户端
     * @param obj
     */
    public void writeValue(Object obj,HttpServletResponse response) throws IOException {
        ObjectMapper mapper = new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");
        mapper.writeValue(response.getOutputStream(),obj);
    }

    /**
     * 将传入的对象序列化为json，返回
     * @param obj
     * @return
     */
    public String writeValueAsString(Object obj) throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        return mapper.writeValueAsString(obj);
    }

}

4.前端代码实现

//查询分类数据
        $.get("category/findAll",{},function (data) {
            //[{cid:1,cname:国内游},{},{}]
            var lis = '<li class="nav-active"><a href="index.html">首页</a></li>';
            //遍历数组,拼接字符串(<li>)
            for (var i = 0; i < data.length; i++) {
                var li = '<li><a href="route_list.html?cid='+data[i].cid+'">'+data[i].cname+'</a></li>';

                lis += li;
                
            }
            //拼接收藏排行榜的li,<li><a href="favoriterank.html">收藏排行榜</a></li>
            
            lis+= '<li><a href="favoriterank.html">收藏排行榜</a></li>';

            //将lis字符串，设置到ul的html内容中
            $("#category").html(lis);
        });

🔺深度优化分析：不难发现，每次访问首页都会执行findAll方法查询分类数据，而对于这种每次都要查询但不经常发生变化的数据，我们可以使用缓存（redis）来加载（缓存优化），使查询速度更快，提高用户体验。

代码编写：

@Override
public List<Category> findAll() {
    //1.从redis中查询
    //1.1获取jedis客户端
    Jedis jedis = JedisUtil.getJedis();
    //1.2可使用sortedset排序查询
    Set<String> categorys = jedis.zrange("category", 0, -1);
    List<Category> cs = null;
    //2.判断查询的集合是否为空
    if (categorys == null || categorys.size() == 0) {

        System.out.println("从数据库查询....");
        //3.如果为空,需要从数据库查询,在将数据存入redis
        //3.1 从数据库查询
        cs = categoryDao.findAll();
        //3.2 将集合数据存储到redis中的 category的key
        for (int i = 0; i < cs.size(); i++) {

            jedis.zadd("category", cs.get(i).getCid(), cs.get(i).getCname());
        }
    } else {
        System.out.println("从redis中查询.....");

        //4.如果不为空,将set的数据存入list
        cs = new ArrayList<Category>();
        for (String name : categorys) {
            Category category = new Category();
            category.setCname(name);
            cs.add(category);

        }
    }


    return cs;
}

五，分类展示功能

1.分析：

点击了不同的分类后，将来看到的旅游线路不一样的。通过分析数据库表结构，发现，旅游线路表和分类表时一个多对一的关系

2.添加对cid的传递：

★后台代码：

public class CategoryServiceImpl implements CategoryService {

    private CategoryDao categoryDao = new CategoryDaoImpl();

    @Override
    public List<Category> findAll() {
        //1.从redis中查询
        //1.1获取jedis客户端
        Jedis jedis = JedisUtil.getJedis();
        //1.2可使用sortedset排序查询
        //Set<String> categorys = jedis.zrange("category", 0, -1);
        //1.3查询sortedset中的分数(cid)和值(cname)
        Set<Tuple> categorys = jedis.zrangeWithScores("category", 0, -1);

        List<Category> cs = null;
        //2.判断查询的集合是否为空
        if (categorys == null || categorys.size() == 0) {

            System.out.println("从数据库查询....");
            //3.如果为空,需要从数据库查询,在将数据存入redis
            //3.1 从数据库查询
            cs = categoryDao.findAll();
            //3.2 将集合数据存储到redis中的 category的key
            for (int i = 0; i < cs.size(); i++) {

                jedis.zadd("category", cs.get(i).getCid(), cs.get(i).getCname());
            }
        } else {
            System.out.println("从redis中查询.....");

            //4.如果不为空,将set的数据存入list
            cs = new ArrayList<Category>();
            for (Tuple tuple : categorys) {
                Category category = new Category();
                category.setCname(tuple.getElement());
                category.setCid((int)tuple.getScore());
                cs.add(category);

            }
        }


        return cs;
    }
}

★后台代码：

var li = '<li><a href="route_list.html?cid='+data[i].cid+'">'+data[i].cname+'</a></li>';

获取cid：

$(function () {

   var search = location.search;

   //alert(search);//?id=5

    // 切割字符串，拿到第二个值

    var cid = search.split("=")[1];

});

六，分页数据展示：

1.分析：

2.前端代码实现：

$(function () {
    var search = location.search;
        // 切割字符串，拿到第二个值
    var cid = search.split("=")[1];

    //当页码加载完成后，调用load方法，发送ajax请求加载数据
    load(cid);
});

function load(cid ,currentPage){
    //发送ajax请求，请求route/pageQuery,传递cid
    $.get("route/pageQuery",{cid:cid,currentPage:currentPage},function (pb) {
        //解析pagebean数据，展示到页面上

        //1.分页工具条数据展示
        //1.1 展示总页码和总记录数
        $("#totalPage").html(pb.totalPage);
        $("#totalCount").html(pb.totalCount);

                var lis = "";

        var fristPage = '<li onclick="javascipt:load('+cid+')"><a href="javascript:void(0)">首页</a></li>';

        //计算上一页的页码
        var beforeNum =  pb.currentPage - 1;
        if(beforeNum <= 0){
            beforeNum = 1;
        }

        var beforePage = '<li  onclick="javascipt:load('+cid+','+beforeNum+')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';

        lis += fristPage;
        lis += beforePage;
        //1.2 展示分页页码
        /*
            1.一共展示10个页码，能够达到前5后4的效果
            2.如果前边不够5个，后边补齐10个
            3.如果后边不足4个，前边补齐10个
        */

        // 定义开始位置begin,结束位置 end
        var begin; // 开始位置
        var end ; //  结束位置


        //1.要显示10个页码
        if(pb.totalPage < 10){
            //总页码不够10页

            begin = 1;
            end = pb.totalPage;
        }else{
            //总页码超过10页

            begin = pb.currentPage - 5 ;
            end = pb.currentPage + 4 ;

            //2.如果前边不够5个，后边补齐10个
            if(begin < 1){
                begin = 1;
                end = begin + 9;
            }

            //3.如果后边不足4个，前边补齐10个
            if(end > pb.totalPage){
                end = pb.totalPage;
                begin = end - 9 ;
            }
        }


        for (var i = begin; i <= end ; i++) {
            var li;
            //判断当前页码是否等于i
            if(pb.currentPage == i){

                li = '<li class="curPage" onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';

            }else{
                //创建页码的li
                li = '<li onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
            }
            //拼接字符串
            lis += li;
        }





             var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';
        var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';

        lis += nextPage;
        lis += lastPage;


        //将lis内容设置到 ul
        $("#pageNum").html(lis);



        
        //2.列表数据展示
        var route_lis = "";

        for (var i = 0; i < pb.list.length; i++) {
            //获取{rid:1,rname:"xxx"}
            var route = pb.list[i];

            var li = '<li>\n' +
                '                        <div class="img"><img src="'+route.rimage+'" style="width: 299px;"></div>\n' +
                '                        <div class="text1">\n' +
                '                            <p>'+route.rname+'</p>\n' +
                '                            <br/>\n' +
                '                            <p>'+route.routeIntroduce+'</p>\n' +
                '                        </div>\n' +
                '                        <div class="price">\n' +
                '                            <p class="price_num">\n' +
                '                                <span>&yen;</span>\n' +
                '                                <span>'+route.price+'</span>\n' +
                '                                <span>起</span>\n' +
                '                            </p>\n' +
                '                            <p><a href="route_detail.html">查看详情</a></p>\n' +
                '                        </div>\n' +
                '                    </li>';
            route_lis += li;
        }
        $("#route").html(route_lis);

        //定位到页面顶部
        window.scrollTo(0,0);
    });

}

3.后台代码实现：

a）创建PageBean对象（用于分页数据封装，便于数据传递）：

public class PageBean<T> {

    private int totalCount;//总记录数
    private int totalPage;//总页数
    private int currentPage;//当前页码
    private int pageSize;//每页显示的条数

    private List<T> list;//每页显示的数据集合

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }
}

b）RouteServlet

@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {

    private RouteService routeService = new RouteServiceImpl();

    /**
     * 分页查询
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接受参数
        String currentPageStr = request.getParameter("currentPage");
        String pageSizeStr = request.getParameter("pageSize");
        String cidStr = request.getParameter("cid");

        int cid = 0;//类别id
        //2.处理参数
        if(cidStr != null && cidStr.length() > 0){
            cid = Integer.parseInt(cidStr);
        }
        int currentPage = 0;//当前页码，如果不传递，则默认为第一页
        if(currentPageStr != null && currentPageStr.length() > 0){
            currentPage = Integer.parseInt(currentPageStr);
        }else{
            currentPage = 1;
        }

        int pageSize = 0;//每页显示条数，如果不传递，默认每页显示5条记录
        if(pageSizeStr != null && pageSizeStr.length() > 0){
            pageSize = Integer.parseInt(pageSizeStr);
        }else{
            pageSize = 5;
        }

        //3. 调用service查询PageBean对象
        PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize);

        //4. 将pageBean对象序列化为json，返回
        writeValue(pb,response);

    }

}

c）RouteService:
🔺分页数据start = （当前的页码数 - 1 ）* 每页的条数

public class RouteServiceImpl implements RouteService {
    private RouteDao routeDao = new RouteDaoImpl();
    @Override
    public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize) {
        //封装PageBean
        PageBean<Route> pb = new PageBean<Route>();
        //设置当前页码
        pb.setCurrentPage(currentPage);
        //设置每页显示条数
        pb.setPageSize(pageSize);
        
        //设置总记录数
        int totalCount = routeDao.findTotalCount(cid);
        pb.setTotalCount(totalCount);
        //设置当前页显示的数据集合
        int start = (currentPage - 1) * pageSize;//开始的记录数
        List<Route> list = routeDao.findByPage(cid,start,pageSize);
        pb.setList(list);

        //设置总页数 = 总记录数/每页显示条数
        int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize :(totalCount / pageSize) + 1 ;
        pb.setTotalPage(totalPage);


        return pb;
    }
}

d)RouteDao:

public class RouteDaoImpl implements RouteDao {
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());

    @Override
    public int findTotalCount(int cid) {
        String sql = "select count(*) from tab_route where cid = ?";
        return template.queryForObject(sql,Integer.class,cid);
    }

    @Override
    public List<Route> findByPage(int cid, int start, int pageSize) {
        String sql = "select * from tab_route where cid = ? limit ? , ?";

        return template.query(sql,new BeanPropertyRowMapper<Route>(Route.class),cid,start,pageSize);
    }
}

七，旅游线路查询：

1.查询参数的传递：

在header.html中：

$("#search-button").click(function () {

    //线路名称

    var rname = $("#search_input").val();



    var cid = getParameter("cid");

    // 跳转路径 http://localhost/travel/route_list.html?cid=5，拼接上rname=xxx

    location.href="http://localhost/travel/route_list.html?cid="+cid+"&rname="+rname;

});

在route_list.html

var cid = getParameter("cid");

 //获取rname的参数值

 var rname = getParameter("rname");

 //判断rname如果不为null或者""

 if(rname){

     //url解码

     rname = window.decodeURIComponent(rname);

 }

2.后台代码的修改（添加rname）

注意：tomcat8以下的要进行解码，不然会出现乱码的情况

rname = new String(rname.getBytes("iso-8859-1"),"utf-8");

a）servlet

@WebServlet("/route/*")
public class RouteServlet extends BaseServlet {

    private RouteService routeService = new RouteServiceImpl();

    /**
     * 分页查询
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    public void pageQuery(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接受参数
        String currentPageStr = request.getParameter("currentPage");
        String pageSizeStr = request.getParameter("pageSize");
        String cidStr = request.getParameter("cid");

        //接受rname 线路名称
        String rname = request.getParameter("rname");
        rname = new String(rname.getBytes("iso-8859-1"),"utf-8");


        int cid = 0;//类别id
        //2.处理参数
        if(cidStr != null && cidStr.length() > 0){
            cid = Integer.parseInt(cidStr);
        }
        int currentPage = 0;//当前页码，如果不传递，则默认为第一页
        if(currentPageStr != null && currentPageStr.length() > 0){
            currentPage = Integer.parseInt(currentPageStr);
        }else{
            currentPage = 1;
        }

        int pageSize = 0;//每页显示条数，如果不传递，默认每页显示5条记录
        if(pageSizeStr != null && pageSizeStr.length() > 0){
            pageSize = Integer.parseInt(pageSizeStr);
        }else{
            pageSize = 5;
        }

        //3. 调用service查询PageBean对象
        PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize,rname);

        //4. 将pageBean对象序列化为json，返回
        writeValue(pb,response);

    }

}

b）service

public PageBean<Route> pageQuery(int cid, int currentPage, int pageSize,String rname ) {
    //封装PageBean
    PageBean<Route> pb = new PageBean<Route>();
    //设置当前页码
    pb.setCurrentPage(currentPage);
    //设置每页显示条数
    pb.setPageSize(pageSize);
    
    //设置总记录数
    int totalCount = routeDao.findTotalCount(cid,rname);
    pb.setTotalCount(totalCount);
    //设置当前页显示的数据集合
    int start = (currentPage - 1) * pageSize;//开始的记录数
    List<Route> list = routeDao.findByPage(cid,start,pageSize,rname);
    pb.setList(list);

    //设置总页数 = 总记录数/每页显示条数
    int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize :(totalCount / pageSize) + 1 ;
    pb.setTotalPage(totalPage);


    return pb;
}

c）dao（使用了动态sql，注意拼接问题）

@Override
public int findTotalCount(int cid,String rname) {
    //String sql = "select count(*) from tab_route where cid = ?";
    //1.定义sql模板
    String sql = "select count(*) from tab_route where 1=1 ";
    StringBuilder sb = new StringBuilder(sql);

    List params = new ArrayList();//条件们
    //2.判断参数是否有值
    if(cid != 0){
        sb.append( " and cid = ? ");

        params.add(cid);//添加？对应的值
    }

    if(rname != null && rname.length() > 0){
        sb.append(" and rname like ? ");

        params.add("%"+rname+"%");
    }

    sql = sb.toString();


    return template.queryForObject(sql,Integer.class,params.toArray());
}

@Override
public List<Route> findByPage(int cid, int start, int pageSize,String rname) {
    //String sql = "select * from tab_route where cid = ? and rname like ?  limit ? , ?";
    String sql = " select * from tab_route where 1 = 1 ";
    //1.定义sql模板
    StringBuilder sb = new StringBuilder(sql);

    List params = new ArrayList();//条件们
    //2.判断参数是否有值
    if(cid != 0){
        sb.append( " and cid = ? ");

        params.add(cid);//添加？对应的值
    }

    if(rname != null && rname.length() > 0){
        sb.append(" and rname like ? ");

        params.add("%"+rname+"%");
    }
    sb.append(" limit ? , ? ");//分页条件

    sql = sb.toString();

    params.add(start);
    params.add(pageSize);


    return template.query(sql,new BeanPropertyRowMapper<Route>(Route.class),params.toArray());
}

3.前台代码的修改：（加上rname）

$(function () {
   /* var search = location.search;
    //alert(search);//?id=5
    // 切割字符串，拿到第二个值
    var cid = search.split("=")[1];*/
   //获取cid的参数值
   var cid = getParameter("cid");
    //获取rname的参数值
    var rname = getParameter("rname");
    //判断rname如果不为null或者""
    if(rname){
        //url解码
        rname = window.decodeURIComponent(rname);
    }

    //当页码加载完成后，调用load方法，发送ajax请求加载数据
    load(cid,null,rname);
});

function load(cid ,currentPage,rname){
    //发送ajax请求，请求route/pageQuery,传递cid
    $.get("route/pageQuery",{cid:cid,currentPage:currentPage,rname:rname},function (pb) {
        //解析pagebean数据，展示到页面上

        //1.分页工具条数据展示
        //1.1 展示总页码和总记录数
        $("#totalPage").html(pb.totalPage);
        $("#totalCount").html(pb.totalCount);

        /*
                <li><a href="">首页</a></li>
                <li class="threeword"><a href="#">上一页</a></li>
                <li class="curPage"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">8</a></li>
                <li><a href="#">9</a></li>
                <li><a href="#">10</a></li>
                <li class="threeword"><a href="javascript:;">下一页</a></li>
                <li class="threeword"><a href="javascript:;">末页</a></li>


         */
        var lis = "";

        var fristPage = '<li onclick="javascipt:load('+cid+',1,\''+rname+'\')"><a href="javascript:void(0)">首页</a></li>';

        //计算上一页的页码
        var beforeNum =  pb.currentPage - 1;
        if(beforeNum <= 0){
            beforeNum = 1;
        }

        var beforePage = '<li  onclick="javascipt:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';

        lis += fristPage;
        lis += beforePage;
        //1.2 展示分页页码
        /*
            1.一共展示10个页码，能够达到前5后4的效果
            2.如果前边不够5个，后边补齐10个
            3.如果后边不足4个，前边补齐10个
        */

        // 定义开始位置begin,结束位置 end
        var begin; // 开始位置
        var end ; //  结束位置


        //1.要显示10个页码
        if(pb.totalPage < 10){
            //总页码不够10页

            begin = 1;
            end = pb.totalPage;
        }else{
            //总页码超过10页

            begin = pb.currentPage - 5 ;
            end = pb.currentPage + 4 ;

            //2.如果前边不够5个，后边补齐10个
            if(begin < 1){
                begin = 1;
                end = begin + 9;
            }

            //3.如果后边不足4个，前边补齐10个
            if(end > pb.totalPage){
                end = pb.totalPage;
                begin = end - 9 ;
            }
        }


        for (var i = begin; i <= end ; i++) {
            var li;
            //判断当前页码是否等于i
            if(pb.currentPage == i){

                li = '<li class="curPage" onclick="javascipt:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';

            }else{
                //创建页码的li
                li = '<li onclick="javascipt:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
            }
            //拼接字符串
            lis += li;
        }





       /* for (var i = 1; i <= pb.totalPage ; i++) {
            var li;
            //判断当前页码是否等于i
            if(pb.currentPage == i){

                li = '<li class="curPage" onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';

            }else{
                //创建页码的li
                li = '<li onclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
            }
            //拼接字符串
            lis += li;
        }*/
        var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';
        var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';

        lis += nextPage;
        lis += lastPage;


        //将lis内容设置到 ul
        $("#pageNum").html(lis);



        /*
            <li>
                <div class="img"><img src="images/04-search_03.jpg" alt=""></div>
                <div class="text1">
                    <p>【减100元 含除夕/春节出发】广州增城三英温泉度假酒店/自由行套票</p>
                    <br/>
                    <p>1-2月出发，网付立享￥1099/2人起！爆款位置有限，抢完即止！</p>
                </div>
                <div class="price">
                    <p class="price_num">
                        <span>&yen;</span>
                        <span>299</span>
                        <span>起</span>
                    </p>
                    <p><a href="route_detail.html">查看详情</a></p>
                </div>
            </li>

         */

        //2.列表数据展示
        var route_lis = "";

        for (var i = 0; i < pb.list.length; i++) {
            //获取{rid:1,rname:"xxx"}
            var route = pb.list[i];

            var li = '<li>\n' +
                '                        <div class="img"><img src="'+route.rimage+'" style="width: 299px;"></div>\n' +
                '                        <div class="text1">\n' +
                '                            <p>'+route.rname+'</p>\n' +
                '                            <br/>\n' +
                '                            <p>'+route.routeIntroduce+'</p>\n' +
                '                        </div>\n' +
                '                        <div class="price">\n' +
                '                            <p class="price_num">\n' +
                '                                <span>&yen;</span>\n' +
                '                                <span>'+route.price+'</span>\n' +
                '                                <span>起</span>\n' +
                '                            </p>\n' +
                '                            <p><a href="route_detail.html">查看详情</a></p>\n' +
                '                        </div>\n' +
                '                    </li>';
            route_lis += li;
        }
        $("#route").html(route_lis);

        //定位到页面顶部
        window.scrollTo(0,0);
    });

}

八，旅游线路的详情展示：

1.分析：

2.后台代码实现：

a)Servlet：

/**
 * 根据id查询一个旅游线路的详细信息
 * @param request
 * @param response
 * @throws ServletException
 * @throws IOException
 */
public void findOne(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    //1.接收id
    String rid = request.getParameter("rid");
    //2.调用service查询route对象
    Route route = routeService.findOne(rid);
    //3.转为json写回客户端
    writeValue(route,response);
}

b)Service：

@Override
public Route findOne(String rid) {
    //1.根据id去route表中查询route对象
    Route route = routeDao.findOne(Integer.parseInt(rid));

    //2.根据route的id 查询图片集合信息
    List<RouteImg> routeImgList = routeImgDao.findByRid(route.getRid());
    //2.2将集合设置到route对象
    route.setRouteImgList(routeImgList);
    //3.根据route的sid（商家id）查询商家对象
    Seller seller = sellerDao.findById(route.getSid());
    route.setSeller(seller);

    return route;
}

c)SellerDao：

public class SellerDaoImpl implements SellerDao {

    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());



    @Override
    public Seller findById(int id) {

        String sql = "select * from tab_seller where sid = ? ";
        return template.queryForObject(sql,new BeanPropertyRowMapper<Seller>(Seller.class),id);
    }
}

d)RouteDao:

@Override

public Route findOne(int rid) {

    String sql = "select * from tab_route where rid = ?";

    return template.queryForObject(sql,new BeanPropertyRowMapper<Route>(Route.class),rid);

}

e)RouteImgDao：

public class RouteImgDaoImpl implements RouteImgDao {

    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());


    @Override
    public List<RouteImg> findByRid(int rid) {
        String sql = "select * from tab_route_img where rid = ? ";
        return template.query(sql,new BeanPropertyRowMapper<RouteImg>(RouteImg.class),rid);
    }
}

3.前台代码实现：

Route_detail.html中加载后

获取rid
发送ajax请求，获取route对象
解析对象的数据

//1.获取rid
var rid = getParameter("rid");

//2.发送请求请求 route/findOne
 $.get("route/findOne",{rid:rid},function (route) {
     //3.解析数据填充html
     $("#rname").html(route.rname);
     $("#routeIntroduce").html(route.routeIntroduce);
     $("#price").html("¥"+route.price);
     $("#sname").html(route.seller.sname);
     $("#consphone").html(route.seller.consphone);
     $("#address").html(route.seller.address);

     //图片展示

     var ddstr = '<a class="up_img up_img_disable"></a>';

     //遍历routeImgList
     for (var i = 0; i < route.routeImgList.length; i++) {
         var astr ;
         if(i >= 4){
             astr = '<a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'" style="display:none;">\n' +
                 '                        <img src="'+route.routeImgList[i].smallPic+'">\n' +
                 '                    </a>';
         }else{
             astr = '<a title="" class="little_img" data-bigpic="'+route.routeImgList[i].bigPic+'">\n' +
                 '                        <img src="'+route.routeImgList[i].smallPic+'">\n' +
                 '                    </a>';
         }


         ddstr += astr;
     }
     ddstr+='<a class="down_img down_img_disable" style="margin-bottom: 0;"></a>';

     $("#dd").html(ddstr);

     //图片展示和切换代码调用
     goImg();
 });

九，旅游线路收藏功能：

1.判断当前登录用户是否收藏过该线路：

a）分析

★当页面加载完成后，发送ajax请求，获取用户是否收藏的标记

根据标记，展示不同的按钮样式

b）后台代码实现：

1.RouteServlet:

public void isFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //1. 获取线路id
    String rid = request.getParameter("rid");

    //2. 获取当前登录的用户 user
    User user = (User) request.getSession().getAttribute("user");
    int uid;//用户id
    if(user == null){
        //用户尚未登录
        uid = 0;
    }else{
        //用户已经登录
        uid = user.getUid();
    }

    //3. 调用FavoriteService查询是否收藏
    boolean flag = favoriteService.isFavorite(rid, uid);

    //4. 写回客户端
    writeValue(flag,response);
}

2.FavoriteService

@Override

public boolean isFavorite(String rid, int uid) {

    Favorite favorite = favoriteDao.findByRidAndUid(Integer.parseInt(rid), uid);

    return favorite != null;//如果对象有值，则为true，反之，则为false

}

3.FavoriteDao:

@Override

public Favorite findByRidAndUid(int rid, int uid) {

    Favorite favorite = null;

    try {

        String sql = " select * from tab_favorite where rid = ? and uid = ?";

        favorite = template.queryForObject(sql, new BeanPropertyRowMapper<Favorite>(Favorite.class), rid, uid);

    } catch (DataAccessException e) {

        e.printStackTrace();

    }

    return favorite;

}

c)前台代码实现：

route_detail.html中
$(function () {

   // 发送请求，判断用户是否收藏过该线路

    var rid = getParameter("rid");

    $.get("route/isFavorite",{rid:rid},function (flag) {

        if(flag){

            // 用户已经收藏过

            //<a  class="btn already" disabled="disabled">

            //设置收藏按钮的样式

            $("#favorite").addClass("already");

            $("#favorite").prop("disabled",disabled);

        }else{

            // 用户没有收藏

        }

    });

2.收藏次数的动态展示：

a）前台代码实现：

//设置收藏次数

$("#favoriteCount").html("已收藏"+route.count+"次");

b）后台代码实现：

RouteService

//4. 查询收藏次数

int count = favoriteDao.findCountByRid(route.getRid());

route.setCount(count)

FavoriteDao

@Override

public int findCountByRid(int rid) {

    String sql = "SELECT COUNT(*) FROM tab_favorite WHERE rid = ?";

    return template.queryForObject(sql,Integer.class,rid);

}

3.点击按钮收藏线路

a）分析

b）前台代码实现：

$(function () {
   // 发送请求，判断用户是否收藏过该线路
    var rid = getParameter("rid");
    $.get("route/isFavorite",{rid:rid},function (flag) {
        if(flag){
            // 用户已经收藏过
            //<a  class="btn already" disabled="disabled">
            //设置收藏按钮的样式
            $("#favorite").addClass("already");
            $("#favorite").attr("disabled","disabled");

            //删除按钮的点击事件
            $("#favorite").removeAttr("onclick");
        }else{
            // 用户没有收藏
        }
    });

});

//点击收藏按钮触发的方法
function addFavorite(){
    var rid = getParameter("rid");
    //1. 判断用户是否登录
    $.get("user/findOne",{},function (user) {
       if(user){
           //用户登录了
            //添加功能
            $.get("route/addFavorite",{rid:rid},function () {

                //代码刷新页面
                location.reload();
            });

       }else{
           //用户没有登录
           alert("您尚未登录，请登录");
           location.href="http://localhost/travel/login.html";
       }
    })
}

c)后台代码实现

1.RouteServlet:

public void addFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    //1. 获取线路rid

    String rid = request.getParameter("rid");

    //2. 获取当前登录的用户

    User user = (User) request.getSession().getAttribute("user");

    int uid;//用户id

    if(user == null){

        //用户尚未登录

        return ;

    }else{

        //用户已经登录

        uid = user.getUid();

    }

    //3. 调用service添加

    favoriteService.add(rid,uid);

}

2.FavoriteService

@Override

public void add(String rid, int uid) {

    favoriteDao.add(Integer.parseInt(rid),uid);

}

3.FavoriteDao

@Override

public void add(int rid, int uid) {

    String sql = "insert into tab_favorite values(?,?,?)";

    template.update(sql,rid,new Date(),uid);

}

柠砸

关注

8
点赞
踩
73

收藏

觉得还不错? 一键收藏
2
评论
黑马旅游网（web综合项目）

目录一，技术选型二，注册功能1.页面效果：2.功能分析：3.代码实现：a）前端代码的实现b）异步（ajax）提交表单c）后台代码的实现创建ResultInfo用于封装后端返回前端数据对象①编写RegistUserServlet三，登录功能1.功能分析：2.后台代码实现：3，前端代码的实现：⭕登陆成功后的用户提示：后台实现：前端实现：⭕退出功能的实现：后台实现：前端实现：一，技术选型web层...
复制链接

扫一扫