新手上路：旅游网案例(上)

最新推荐文章于 2022-05-24 11:07:12 发布

枫緋栖燃羽

最新推荐文章于 2022-05-24 11:07:12 发布

阅读量230

点赞数 1

本文链接：https://blog.csdn.net/NightNorth/article/details/117248646

版权

完成工作：旅游网的后端和前端的请求代码编写

主要技术：ajax+三层架构+druid连接池+maven+redis+jquery

一、环境搭建

（一）搭建maven环境

（二）导入准备好的travel项目资源

二、创建数据库表单

CREATE DATABASE travel;
-- 使用数据库
USE travel;
-- 创建表
     +
-- maven/resources/travel.sql

三、登录相关功能的实现

1、注册

（1）表单校验

   <!--js代码-->
    <script>
        //校验用户名
        function checkUsername() {
            //获取用户名的值
            var username = $("#username").val();
            //定义正则表达式(单词字符8-20位)
            var reg_username = /^\w{8,20}$/;
            //判断用户名是否符合规范，返回值为boolean类型
            var flag = reg_username.test(username);
            //利用flag进行判断符合与否，并给出提示信息
            if (flag) {
                //合法把边框变为绿色
                $("#username").css("border", "1px solid green");
            } else {
                //不合法把边框变为红色
                $("#username").css("border", "1px solid red");
            }
            //返回用户规范的boolean值
            return flag;
        }

        //校验密码
        function checkPassword() {
            //获取密码的值
            var password = $("#password").val();
            //定义正则表达式(单词字符8-20位)
            var reg_password = /^\w{8,20}$/;
            //判断密码是否符合规范，返回值为boolean类型
            var flag = reg_password.test(password);
            //利用flag进行判断符合与否，并给出提示信息
            if (flag) {
                //合法把边框变为绿色
                $("#password").css("border", "1px solid green");
            } else {
                //不合法把边框变为红色
                $("#password").css("border", "1px solid red");
            }
            //返回用户规范的boolean值
            return flag;
        }


        //校验邮箱
        function checkEmail() {
            //获取邮箱的值
            var email = $("#email").val();
            //定义正则表达式(邮箱规范)
            var reg_email = /^\w+@\w+\.\w+$/;
            //判断邮箱是否符合规范，返回值为boolean类型
            var flag = reg_email.test(email);
            //利用flag进行判断符合与否，并给出提示信息
            if (flag) {
                //合法把边框变为绿色
                $("#email").css("border", "1px solid green");
            } else {
                //不合法把边框变为红色
                $("#email").css("border", "1px solid red");
            }
            //返回用户规范的boolean值
            return flag;
        }

        //校验姓名
        function checkName() {
            //获取邮箱的值
            var name = $("#name").val();
            //定义正则表达式(非空)
            var reg_name = /\S/;
            //判断姓名是否符合规范，返回值为boolean类型
            var flag = reg_name.test(name);
            //利用flag进行判断符合与否，并给出提示信息
            if (flag) {
                //合法把边框变为绿色
                $("#name").css("border", "1px solid green");
            } else {
                //不合法把边框变为红色
                $("#name").css("border", "1px solid red");
            }
            //返回用户规范的boolean值
            return flag;
        }


        //校验手机号
        function checkTelephone() {
            //获取手机号的值
            var telephone = $("#telephone").val();
            //定义正则表达式(手机号规范)
            var reg_telephone = /^1[3546789][0-9]{9}$/;
            //判断手机号是否符合规范，返回值为boolean类型
            var flag = reg_telephone.test(telephone);
            //利用flag进行判断符合与否，并给出提示信息
            if (flag) {
                //合法把边框变为绿色
                $("#telephone").css("border", "1px solid green");
            } else {
                // 不合法把边框变为红色
                $("#telephone").css("border", "1px solid red");
            }
            //返回用户规范的boolean值
            return flag;
        }

        //校验出生日期
        function checkBirthday() {
            //获取出生日期的值
            var birthday = $("#birthday").val();
            //定义正则表达式(非空)
            var reg_birthday = /\S/;
            //判断出生日期是否符合规范，返回值为boolean类型
            var flag = reg_birthday.test(birthday);
            //利用flag进行判断符合与否，并给出提示信息
            if (flag) {
                //合法把边框变为绿色
                $("#birthday").css("border", "1px solid green");
            } else {
                $("#birthday").css("border", "1px solid red");
            }
            //返回用户规范的boolean值
            return flag;
        }

        //校验验证码
        function check() {
            //获取验证码的值
            var check = $("#check").val();
            //定义正则表达式(非空)
            var reg_check = /\S/;
            //判断验证码是否符合规范，返回值为boolean类型
            var flag = reg_check.test(check);
            //利用flag进行判断符合与否，并给出提示信息
            if (flag) {
                //合法把边框变为绿色
                $("#check").css("border", "1px solid green");
            } else {
                // 不合法把边框变为红色
                $("#check").css("border", "1px solid red");
            }
            //返回用户规范的boolean值
            return flag;
        }


        //入口函数
        $(function () {
            //当表单提交时调用所有的校验方法
            $("#registerForm").submit(function () {
            //当表单提交时调用所有的校验方法
            $("#registerForm").submit(function () {
                //获取所有表单的返回值
                var formAll = checkUsername() && checkPassword() && checkEmail() && checkName()
                    && checkTelephone() && checkBirthday() && check();
                //如果校验通过(返回值为true)，则发送ajax请求，提交表单数据
                if (formAll) {
                    $.post("regisUserServlet", $(this).serialize(), function (data) {

                    })
                }
                //跳转页面(异步发送数据，不进行action的同步提交操作)
                return false;
            })
            //利用离焦事件，调用相应的校验方法
            $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#email").blur(checkEmail);
            $("#name").blur(checkName);
            $("#telephone").blur(checkTelephone);
            $("#birthday").blur(checkBirthday);
            $("#check").blur(check);
        })
    </script>

servlet

public class RegistUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //①利用request方法获取数据
        Map<String, String[]> map = request.getParameterMap();

        //②封装User对象
        //调用user对象
        User user = new User();
        try {
            //调用BeanUtils的静态方法把map封装到user对象
            BeanUtils.populate(user, map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        //③调用service层
        UserServlet service = new UserServletImpl();
        //调用service的方法完成注册
        boolean flag = service.regist(user);

        //④响应结果
        //调用ResultInfo对象对返回数据的结果进行封装
        ResultInfo info = new ResultInfo();
        if (flag) {
            //注册成功
            info.setFlag(true);
        } else {
            //注册失败
            info.setFlag(false);
            //封装提示信息
            info.setErrorMsg("该用户名已存在!");
        }
        //将ResultInfo对象序列化为json
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(info);
        //将json数据重写回客户端
        //设置content-type
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(json);

    }

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

service

public class UserServletImpl implements UserService {
    //声明UserDao对象
    private UserDao userDao=new UserDaoImpl();


    @Override
    public boolean regist(User user) {
        //根据用户名查询用户对象
        User u=userDao.findByUsername(user.getUsername());
        //判断u是否为null
        if(u!=null){
            //如果用户名不为空，则用户名已存在，注册失败，返回false
            return false;
        }
        //存在就保存用户信息
        userDao.save(user);
        return true;
    }
}

dao


    //声明数据库连接池工具类
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());


    @Override
    public User findByUsername(String username) {
        //定义sql
        String sql = "select * from tab_user where username=?";
        //调用工具类执行sql
        User user = template.queryForObject(sql, new BeanPropertyRowMapper<>(User.class), username);
        //返回user对象
        return user;
    }

    /**
     * @Description: 用户保存
     * @Author: Mr.Night
     */
    @Override
    public void save(User user) {
        //定义sql
        String sql = "insert into user(username,password,name,birthday,sex,telephone,email) " +
                "values(?,?,?,?,?,?,?)";
        //执行sql
        template.update(sql, user.getUsername(),
                user.getPassword(),
                user.getName(),
                user.getBirthday(),
                user.getSex(),
                user.getTelephone(),
                user.getEmail());
    }

(2)验证码处理

servlet


       //验证码校验
        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对象对返 回数据的结果进行封装
            ResultInfo info = new ResultInfo();
            //注册失败
            info.setFlag(false);
            //提示信息
            info.setErrorMsg("验证码有误！");
            //将ResultInfo对象序列化为json
            ObjectMapper mapper = new ObjectMapper();
            String json = mapper.writeValueAsString(info);
            //将json数据重写回客户端
            //设置content-type
            response.setContentType("application/json;charset=utf-8");
            response.getWriter().write(json);
            return;
        }

        $(function () {
            //当表单提交时调用所有的校验方法
            $("#registerForm").submit(function () {
                //获取所有表单的返回值
                var formAll = checkUsername() && checkPassword() && checkEmail() && checkName()
                    && checkTelephone() && checkBirthday() && check();
                //发送数据到服务器
                if (formAll) {
                    //如果校验通过(返回值为true)，则发送ajax请求，提交表单数据
                    $.post("registUserServlet", $(this).serialize(), function (data) {
                        //处理服务器响应的数据
                        if (data.flag) {
                            //注册成功，跳转页面
                            location.href = "register_ok.html";
                        } else {
                            //注册失败,给前端页面添加提示信息
                            $("#errorMsg").html(data.errorMsg);

                        }
                    })
                }
                //跳转页面(异步发送数据，不进行action的同步提交操作)
                return false;
            })
            //利用离焦事件，调用相应的校验方法
            $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#email").blur(checkEmail);
            $("#name").blur(checkName);
            $("#telephone").blur(checkTelephone);
            $("#birthday").blur(checkBirthday);
            $("#check").blur(check);
        })

service

        //设置激活码，字符串唯一，唯一激活码可以使用Uuidutil工具类的getUuid进行生成
        user.setCode(UuidUtil.getUuid());
        //设置激活码状态为N
        user.setStatus("N");
       //编写邮件地址
        String content = "<a href='http://localhost/travel/activeUserServlet?code="
                + user.getCode() + "'>点击激活【旅游网】</a>";
        //设置随机数修改邮件名字
        int num = (int) (Math.random() + 1000);
        //使用MaiUtils工具类的sendMail方法发送邮件
        MailUtils.sendMail(user.getEmail(), content, "激活邮件"+num);

dao


    @Override
    public void save(User user) {
        //定义sql
        String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email,status,code) " +
                "values(?,?,?,?,?,?,?,?,?)";
        //执行sql
        template.update(sql, user.getUsername(),
                user.getPassword(),
                user.getName(),
                user.getBirthday(),
                user.getSex(),
                user.getTelephone(),
                user.getEmail(),
                user.getStatus(),
                user.getCode()
        );
    }
}

（3）邮件激活

servlet

       public class ActiveUserServlet extends HttpServlet {
          protected void doPost(HttpServletRequest request, HttpServletResponse response) 
                       throws ServletException, IOException {
        //获取激活码
        String code = request.getParameter("code");
        //判断激活码是否存在
        if (code != null) {
            //激活码存在
            //调用service的方法完成激活
            UserServlet service = new UserServletImpl();
            //声明提示信息
            String msg = null;
            //激活用户是否成功，用boolean接收
            boolean flag = service.active(code);
            if (flag) {
                //激活成功，显示提示信息并可以跳转到登录页面
                msg = "激活成功，请<a href='login.html'>登录</a>";
            } else {
                //激活失败，显示提示信息
                msg = "激活失败，请联系管理员！";
            }
            //设置content-type防止乱码
            response.setContentType("text/html;charset=utf-8");
            //将数据写回客户端页面
            response.getWriter().write(msg);
        }
    }

service

    @Override
    public boolean active(String code) {
        //调用dao方法根据激活码查询用户对象
        User user = userDao.findByCode(code);
        //查询用户是否存在
        if (user != null) {
            //存在
            //调用dao方法修改激活状态
            userDao.updateStatus(user);
            //返回true,响应servlet
            return true;
        } else {
            //不存在
            //返回false,响应servlet
            return false;
        }
    }

dao

    @Override
    public User findByCode(String code) {
        //声明user
        User user = null;
        try {
            //定义sql
            String sql = "select * from tab_user where code=?";
            //调用工具类方法执行sql
            user = template.queryForObject(sql, new BeanPropertyRowMapper<>(User.class), code);
        } catch (DataAccessException e) {
            e.printStackTrace();
        }
        //返回user对象
        return user;
    }

    @Override
    public void updateStatus(User user) {
        //定义sql
        String sql = "update tab_user set status='Y' where uid=?";
        //调用工具类执行sql修改语句
        template.update(sql, user.getUid());
    }
}

2、登录

后端

//servlet
       @WebServlet("/loginServlet")
       public class LoginServlet extends HttpServlet {
           protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取用户名和密码
        Map<String, String[]> map = request.getParameterMap();
        //封装user对象
        User user = new User();
        try {
            //调用BeanUtils的静态方法把map封装进user对象
            BeanUtils.populate(user, map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        //调用service
        UserServlet service = new UserServletImpl();
        //使用service方法进行查询
        User u = service.login(user);
        //调用ResultInfo工具类对返回数据结果进行封装
        ResultInfo info = new ResultInfo();

        //判断对象是否为null
        if (u == null) {
            //用户名或密码错误，调用info方法
            //登录失败
            info.setFlag(false);
            //提示信息
            info.setErrorMsg("用户名或密码错误");
        }

        //判断用户是否激活
        if (u != null && "N".equals(u.getStatus())) {
            //用户尚未激活
            //登录失败
            info.setFlag(false);
            //提示信息
            info.setErrorMsg("您尚未激活，请先激活！");
        }

        //判断用户是否登录成功
        if (u != null && "Y".equals(u.getStatus())) {
            //满足if，则登录成功
            info.setFlag(true);
        }

        //响应数据
        ObjectMapper mapper = new ObjectMapper();
        //设置Content-type
        response.setContentType("application/json;charset=utf-8");
        //将数据写会客户端
        mapper.writeValue(response.getOutputStream(), info);
    }

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


//service
    @Override
    public User login(User user) {
        //返回dao层查询方法，响应servlet
        return userDao.findByUsernameAndPassword(user.getUsername(),user.getPassword());
    }
}


//dao
    @Override
    public User findByUsernameAndPassword(String username, String password) {
        //声明user
        User user = null;
        try {
            //定义sql,编写查询语句
            String sql = "select * from tab_user where username=? and password=?";
            //执行sql
            user=template.queryForObject(sql,new BeanPropertyRowMapper<>(User.class),
                    username,password);
        } catch (Exception e) {
        }
        return user;
    }

前端

<script>
        $(function () {
            //给登录按钮绑定单机事件
            $("#btn_sub").click(function () {
                //发送ajax请求，提交表单数据
                $.post("loginServlet", $("#loginForm").serialize(), function (data) {
                    if (data.flag) {
                        //登录成功，跳转到主页
                        location.href = "index.html";
                    } else {
                        //登录失败，显示错误信息
                        $("#errorMsg").html(data.errorMsg);
                    }
                })
            })
        });
</script>

3、退出

@WebServlet("/exitServlet")
public class ExitServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //销毁session数据
        request.getSession().invalidate();
        //重定向跳转到登录页面
        response.sendRedirect(request.getContextPath() + "/login.html");
    }

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

枫緋栖燃羽

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
新手上路：旅游网案例(上)

完成工作：旅游网的后端和前端的请求代码编写主要技术：ajax+三层架构+druid连接池+maven+redis+jquery一、环境搭建（一）搭建maven环境（二）导入准备好的travel项目资源二、创建数据库表单CREATE DATABASE travel;-- 使用数据库USE travel;-- 创建表 +-- maven/resources/travel.sql三、登录相关功能的实现1、注册（1）表单校验 <!--js代..
复制链接

扫一扫