travel_system分析(ajax)

检查用户名是否存在

$.validator.addMethod("checkUser", function(value, element, param) {
		var flag = false;
		$.ajax({
			async: false,
			url: "/travel/user/checkUser",
			data: {username: value},
			success: function(data) {
				flag = data.flag;
			},
			dataType: "json"
		});
		return flag;
	});
		// 检查用户名是否存在
		// 1.接收到请求参数 username
        String username = request.getParameter("username");
        // 2.调用service检查用户是否存在 存在-true, 不存在-false
        boolean flag = userService.checkUserExist(username);
        // 3.创建返回给前端的数据对象
        ResultInfo info = new ResultInfo();
        // 4.设置flag为通过,不通过
        info.setFlag(!flag);
        // 5.将数据对象封装为json返回给客户端
        writeValue(response, info);
		// 检查用户名是否存在
    	// true - 存在
   		// false - 不存在
		try {
            userDao.findUserByUsername(username);
            return true;
        } catch (Exception e){
            return false;
        }
// 根据用户名查询用户对象
public User findUserByUsername(String username) {
        String sql = "select * from tab_user where username = ?";
        User user = jdbcTemplate.queryForObject(sql, new BeanPropertyRowMapper<>(User.class), username);
        return user;
    }

校验验证码

$.validator.addMethod("checkCode", function(value, element, param) {
		var flag = false;
		$.ajax({
			async: false,
			url: "/travel/check/checkCodeContent",
			data: {check_code: value},
			success: function(data) {
				flag = data.flag;
			},
			dataType: "json"
		});
		return flag;
	});
		// 1.获得客户端输入的验证码
		String check_code = request.getParameter("check_code");
		// 2.获得session中保存的验证码
		String checkcode_server = (String) request.getSession().getAttribute("CHECKCODE_SERVER");
		ResultInfo info = new ResultInfo();
		// 3.判断验证码
		if (checkcode_server != null && checkcode_server.equalsIgnoreCase(check_code)) {
			info.setFlag(true);
		} else {
			info.setFlag(false);
		}
		// 4.将结果转换为json返回给客户端
		writeValue(response, info);

注册
在这里插入图片描述

	// 给提交按钮添加事件
	$("#submit").click(function() {
		// 先进行表单的校验
		var flag = $("#registerForm").valid();
		// 表单校验通过
		if (flag) {
			// 想要发送注册的请求
			$.post("/travel/user/register",
					// 将表单数据转换为json格式
					$("#registerForm").serialize(),
					function (data) {
						if (data.flag) {
							// 注册成功 - 页面跳转
							location.href = "register_ok.html";
						} else {
							// 注册失败
							// data.errorMsg
							$("#errorMsg").html(data.errorMsg);
						}
					},
					"json");
		}
	});
		// 注册账号
		// 1.接收请求参数
        Map<String, String[]> map = request.getParameterMap();
        // 2.封装对象
        User user = new User();
        try {
            BeanUtils.populate(user, map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        // 3.调用service进行注册
        boolean flag = userService.registerUser(user);
        // 4.结果判断, 封装结果数据
        ResultInfo info = new ResultInfo();
        info.setFlag(flag);
        if (!flag) {
            info.setErrorMsg("注册失败!");
        }
        // 5.将结果数据返回个客户端
        writeValue(response, info);
		// 注册用户
    	// true - 注册成功
    	// false - 注册失败
		try {
            // 设置账号未激活N - 激活Y
            user.setStatus("N");
            // 设置唯一的code
            user.setCode(UuidUtil.getUuid());
            // 保存这个账号信息
            userDao.saveUser(user);

            // 发送激活邮件
            String text = "<a href='http://localhost:80/travel/user/active?code="+user.getCode()+"'>账号激活</a>";
            MailUtils.sendMail(user.getEmail(), text, "指针旅游网账号激活");

            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }
	// 保存用户
    public void saveUser(User user) {
        String sql = "insert into tab_user values(null,?,?,?,?,?,?,?,?,?)";
        jdbcTemplate.update(sql, user.getUsername(), user.getPassword(), user.getName(), user.getBirthday(), user.getSex(), user.getTelephone(), user.getEmail(), user.getStatus(), user.getCode());
    }

激活账户
在这里插入图片描述

		// 激活账号
		// 1.接收请求参数 code
        String code = request.getParameter("code");
        // 2.调用service激活
        boolean flag = userService.active(code);

        // 3.返回结果数据 - 页面 - 登录页面
        if (flag) {
//            response.sendRedirect(request.getContextPath()+"/login.html");
            response.getWriter().write("激活成功, 请<a href='/travel/login.html'>登录</a>");
        } else {
            response.getWriter().write("激活失败! 请联系管理员!");
        }
// 账号激活
// true - 激活成功
// false - 激活失败
public boolean active(String code) {
        int count = userDao.updateUserStatus(code);
        return count != 0;
    }
// 更新用户激活状态
public int updateUserStatus(String code) {
        String sql = "update tab_user set status = 'Y' where code = ?";
        int count = jdbcTemplate.update(sql, code);
        return count;
    }

登录
在这里插入图片描述

$("#login").click(function (){
		$.post("/travel/user/login",
				$("#loginForm").serialize(),
				function(data){
					if (data.flag) {
						// 登录成功 -> 跳转到首页
						location.href = 'index.html';
					} else {
						// 登录失败 data.errorMsg
						$("#errorMsg").html(data.errorMsg);
						// 重新加载验证码
						changeCheckCode($("#checkCodeImg").get(0));
					}
				}, "json"
		);
	});
		// 登录
		// 1.接收验证码
        String check = request.getParameter("check");
        // 1.1获取session中的验证码
        String checkcode_server = (String) request.getSession().getAttribute("CHECKCODE_SERVER");
        // 1.2对比验证码
        ResultInfo info = new ResultInfo();
        if (check == null || !check.equalsIgnoreCase(checkcode_server)) {
            info.setFlag(false);
            info.setErrorMsg("验证码错误");
        } else {
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            UserService userService = new UserServiceImpl();
            try {
                User login = userService.login(username, password);
                request.getSession().setAttribute("loginUser", login);
                info.setFlag(true);
            } catch (LoginException e) {
                info.setFlag(false);
                info.setErrorMsg(e.getMessage());
            }
        }
        writeValue(response, info);
		// 登录
        // LoginException 登录失败
        User user = userDao.findByUsernameAndPassword(username, password);
        if (user == null) {
            // 账号/密码错误
            throw new LoginException("账号/密码错误");
        } else if (user.getStatus().equals("N")) {
            // 账号未激活
            throw new LoginException("账号未激活");
        } else  {
            return user;
        }
	// 根据账号密码查询用户
    public User findByUsernameAndPassword(String username, String password) {
        String sql = "select * from tab_user where username = ? and password = ?";
        try {
            User user = jdbcTemplate.queryForObject(sql, new BeanPropertyRowMapper<>(User.class), username, password);
            return user;
        } catch (Exception e) {
            return null;
        }
    }

补充:BaseServlet抽取
在这里插入图片描述

public class BaseServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 接收请求, 来实现方法的分发: 按照功能调用不同的方法
        // uri: /user/active
        // 判断调用的是哪个方法 active login
        String uri = req.getRequestURI();
        // method就是要调用的方法名
        String method = uri.substring(uri.lastIndexOf("/") + 1);
        try {
            // 1.获得method所在的字节码对象, 从而得到方法对象 - 反射
            // this是当前对象, 谁调用这方法, 对象就是谁
            Method method1 = this.getClass().getMethod(method, HttpServletRequest.class, HttpServletResponse.class);
            // 2.执行方法
            method1.invoke(this, req, resp);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
    }
    // 将制定对象序列化为json返回给客户端
    protected void writeValue(HttpServletResponse response, Object obj) throws IOException {
        ObjectMapper mapper = new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");
        mapper.writeValue(response.getOutputStream(), obj);
    }
}

导航栏加载
在这里插入图片描述

$(function() {
        $.get('/travel/category/findAll', {},
            function(data) {
                var lis = '<li class="nav-active"><a href="index.html">首页</a></li>';
                for (var i = 0; i < data.length; i++) {
                    // data[i].cname  data[i].cid
                    var li = '<li><a href="route_list.html?cid='+data[i].cid+'">'+data[i].cname+'</a></li>';
                    lis += li;
                }
                lis += '<li><a href="favoriterank.html">收藏排行榜</a></li>';
                $("#navlis").html(lis);
            }, 'json');
    })
private CategoryService categoryService = new CategoryServiceImpl();
    public void findAll(HttpServletRequest request, HttpServletResponse response) throws IOException {
        List<Category> list = categoryService.findAll();
        writeValue(response, list);
    }
public List<Category> findAll() {
        Jedis jedis = JedisUtil.getJedis();
        // 1.从redis缓存中查询数据
//        Set<String> categorys = jedis.zrange("category", 0, -1);
        Set<Tuple> categorys = jedis.zrangeWithScores("category", 0, -1);
        if (categorys == null || categorys.size() == 0) {
            // 1.2查不到数据, 从数据库中查询并返回
            List<Category> list = categoryDao.findAll();
            // 2.第一次从数据库中查询出来的数据,存储到redis缓存中
            for(Category cate:list) {
                jedis.zadd("category", cate.getCid(), cate.getCname());
            }
            return list;
        } else {
            // 1.1查到数据, 直接将数据封装返回
            List<Category> categories = new ArrayList<>();
            for (Tuple tuple : categorys) {
                Category category = new Category();
                category.setCid((int) tuple.getScore());
                category.setCname(tuple.getElement());
                categories.add(category);
            }
            return categories;
        }
    }
public List<Category> findAll() {
        String sql = "select * from tab_category";
        List<Category> list = jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Category.class));
        return list;
    }

旅游线路查询
在这里插入图片描述

        // route_list.html?cid=5
        $(function() {
            // location
            // 1.获取url上的cid=5, 参数5  ?cid=5
            var cid = getParameter("cid");
            // 2.发送异步请求分页查询
            load(cid);
        })
        function load(cid, currentPage) {
            $.get('/travel/route/queryPage',
                {cid: cid, currentPage: currentPage},
                function(pb) {
                    // pb就是pageBean对象的json格式
                    // 1.将totalCount更新
                    $("#totalCount").html(pb.totalCount);
                    // 2.将totalPage更新
                    $("#totalPage").html(pb.totalPage);
                    // 3.更新页码 - 首页-上一页-末页-下一页
                    // 前5 后4
                    var start = pb.currentPage - 5;
                    var end = pb.currentPage + 4;
                    // 前面不足5个, 后面补齐
                    if (start < 1) {
                        start = 1;
                        end = start + 9;
                    }
                    // 后面不足4个, 前面补齐
                    if (end > pb.totalPage) {
                        end = pb.totalPage;
                        start = end - 9;
                    }
                    // 总页数不足10个
                    if (pb.totalPage < 10) {
                        start = 1;
                        end = pb.totalPage
                    }
                    // 更新 页码
                    var lis = "";
                    var firstPage = '<li><a href="javascript:load('+cid+',1)">首页</a></li>';
                    var beforeNum = pb.currentPage - 1;
                    if (beforeNum < 1) {
                        beforeNum = 1;
                    }
                    var beforePage = '<li class="threeword"><a href="javascript:load('+cid+', '+beforeNum+')">上一页</a></li>';
                    lis += firstPage;
                    lis += beforePage;
                    for (var i = start; i <= end; i++) {
                        var li;
                        if (i == pb.currentPage) {
                            li = '<li class="curPage" οnclick="load('+cid+','+i+')"><a href="javascript:;">'+i+'</a></li>';
                        } else {
                            li = '<li οnclick="load('+cid+','+i+')"><a href="javascript:;">'+i+'</a></li>';
                        }
                        lis += li;
                    }
                    var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';
                    var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';
                    lis += nextPage;
                    lis += lastPage;
                    $("#page").html(lis);
                    // 更新 旅游路线
                    var lisList = "";
                    for (var i = 0; i < pb.list.length; i++) {
                        var route = pb.list[i];
                        var li = '<li>\n' +
                            '                            <div class="img"><img src="'+route.rimage+'" 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?rid='+route.rid+'">查看详情</a></p>\n' +
                            '                            </div>\n' +
                            '                        </li>';
                        lisList += li;
                    }
                    $("#list").html(lisList);
                }, "json");
        }
        // 1.接收参数
        String _cid = request.getParameter("cid");
        int cid = Integer.parseInt(_cid);
        String _currentPage = request.getParameter("currentPage");
        // 处理_currentPage
        int currentPage = 1;
        if (_currentPage != null && _currentPage.length() > 0) {
            currentPage = Integer.parseInt(_currentPage);
        }
        String _pageSize = request.getParameter("pageSize");
        // 处理_pageSize
        int pageSize = 8;
        if (_pageSize != null && _pageSize.length() > 0) {
            pageSize = Integer.parseInt(_pageSize);
        }
        // 2.调用service获得pageBean对象
        PageBean<Route> page = routeService.findByPage(cid, currentPage, pageSize);
        // 3.将结果序列化为json返回
        writeValue(response, page);
    // 查询分页对象
    // 封装了分页数据
    @Override
    public PageBean<Route> findByPage(int cid, int currentPage, int pageSize) {
        // 1.创建空白的PageBean对象
        PageBean<Route> pb = new PageBean<>();
        // 2.调用dao获得totalCount
        int totalCount = routeDao.findCount(cid);
        // 3.调用dao获得list
        int start = (currentPage - 1) * pageSize;
        List<Route> list = routeDao.findByPage(cid, start, pageSize);
        // 4.计算totalPage
        int totalPage = (totalCount + pageSize - 1) / pageSize;
        // 5.完成对pb对象的属性注入
        pb.setCurrentPage(currentPage);
        pb.setTotalPage(totalPage);
        pb.setPageSize(pageSize);
        pb.setList(list);
        pb.setTotalCount(totalCount);
        return pb;
    }
    // 根据cid查询线路总个数
    @Override
    public int findCount(int cid) {
        String sql = "select count(*) from tab_route where cid = ?";
        return jdbcTemplate.queryForObject(sql, Integer.class, cid);
    }
// 根据cid分页查询线路列表
    @Override
    public List<Route> findByPage(int cid, int start, int pageSize) {
        String sql = "select * from tab_route where cid = ? limit ?,?";
        return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(Route.class), cid, start, pageSize);
    }

分页处理
在这里插入图片描述

// 页码处理
    // 前5 后4
    var start = pb.currentPage - 5;
    var end = pb.currentPage + 4;
    // 前面不足5个, 后面补齐
    if (start < 1) {
        start = 1;
        end = start + 9;
    }
    // 后面不足4个, 前面补齐
    if (end > pb.totalPage) {
        end = pb.totalPage;
        start = end - 9;
    }
    // 总页数不足10个
    if (pb.totalPage < 10) {
        start = 1;
        end = pb.totalPage
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值