zoukankan      html  css  js  c++  java
  • 入门级旅游网

    0 导语

    为了巩固web基础知识,提升综合运用能力。

    1 Maven项目导入

    选择travel项目的pom.xml文件,点击ok

    2 Maven项目启动

    2.1 "粗暴"启动

    2.2 配置Maven快捷启动


    3 技术选型

    3.1 Web层

    Servlet:前端控制器
    html:视图
    Filter:过滤器
    BeanUtils:数据封装
    Jackson:json序列化工具

    3.2 Service层

    Javamail:java发送邮件工具
    Redis:nosql内存数据库(缓存)
    Jedis:java的redis客户端

    3.3 Dao层

    Mysql:数据库
    Druid:数据库连接池
    JdbcTemplate:jdbc的工具

    4 数据库创建

    -- 创建数据库
    CREATE DATABASE travel;
    -- 使用数据库
    USE travel;
    

    数据库表项



    5 注册功能

    5.1 前端页面效果

    5.2 功能分析

    5.3 具体逻辑阐述

    5.3.1 js表单校验(以校验邮箱为例)

    目的:提升用户体验,同时也能减少访问数据库的IO操作。

    //校验邮箱
    function checkEmail(){
        //1.JQuery方式获取邮箱对象
       var email = $("#email").val();
       //2.定义正则表达式 如krismile@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;
    }
    

    上面这个js函数的作用就是校验email的合法性,当某个事件触发时,会调用校验函数。如下述代码所示。

    $(function () {
            //当表单提交时,调用所有的校验方法
            $("#registerForm").submit(function(){
                return checkUsername() && checkPassword() && checkEmail();
                //如果这个方法没有返回值,或者返回为true,则表单提交,如果返回为false,则表单不提交
            });
    
        //当某一个组件失去焦点是,调用对应的校验方法
        $("#username").blur(checkUsername);
                 $("#password").blur(checkPassword);
             $("#email").blur(checkEmail);
    });
    

    5.3.2 Ajax(异步)提交表单

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

    5.3.3 后端处理-三层架构思想

    Servlet控制层:
    - 获取表单数据,封装对象
    - 调用service处理注册业务逻辑(service.regist(user))
    - 得到数据,给与前端页面响应。如注册失败(用户名已存在等)信息

    service业务逻辑层:
    - 调用dao查询该注册用户是否存在 (dao.findByUserName(username))
    - 存在,注册不通过,返回false
    - 不存在,调用dao保存用户数据 (dao.save(user))

    dao数据库访问层
    - findByUserName(username):通过用户名查询用户
    - save(user):保存用户

    6 邮件激活

    注册完成后使用 注册时给的邮箱 进行账号的激活
    目的是 为了保证用户填写的邮箱是正确的。将来也可以推广一些宣传信息,到用户邮箱中

    6.1 发送邮件

    1.申请邮箱
    2.开启授权码
    3.在MailUtils中设置自己的邮箱账号和密码(授权码)


    tips: MailUtils是Java邮件发送的第三方工具类,网上下载的
    调用其中sendMail方法可以完成邮件发送

    6.2 功能分析

    用户点击发送的邮件,完成激活功能
    激活的功能,实质上只需要改变用户数据中status值为“Y”即可

    发送邮件代码

    6.3 后端处理-三层架构思想

    Servlet控制层:
    - 获取激活码code
    - 调用service处理激活用户业务逻辑(service.active(code))
    - 得到数据,给与前端页面响应。如激活失败(激活码不存在等)信息

    //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);
    

    service业务逻辑层:
    - 调用dao查询该注册用户是否存在 (dao.findByCode(code))
    - 不存在,激活不通过,返回false
    - 存在,调用dao更新用户数据 (dao.updateStatus(user)),返回true

    @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;
        }
    
    }
    

    dao数据库访问层
    - findByCode(code):通过激活码code查询用户
    - updateStatus(user):更新用户的status值为“Y”

     /**
     * 根据激活码查询用户对象
     * @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());
    }
    

    7 登录

    7.1 前端页面

    7.2 功能分析

    7.3 前端代码设计

    7.4 后端设计-三层架构思想

    Servlet控制层:
    - 获取表单数据,封装对象
    - 调用service处理登录业务逻辑(service.login(user))
    - 得到数据,将获取到的数据存入session
    - 给与前端页面响应。如登录失败(用户名或密码不正确等)信息

    service业务逻辑层:
    - 调用dao查询该用户 (dao.findByUserAndPassword(username, password))
    - 返回获取到了的对象user

    dao数据库访问层
    - findByUserAndPassword(username, password):通过用户名和密码查询用户

    8 退出

    什么叫做登录了?session中有user对象。

    实现步骤:
    1.访问servlet,将session销毁
    2.跳转到登录页面

    代码实现:

    Header.html
    

    Servlet:
    //1.销毁session
    request.getSession().invalidate();
    //2.跳转登录页面
    response.sendRedirect(request.getContextPath()+"/login.html");
  • 相关阅读:
    Linux 之 文件压缩解压
    Linux 之 文件搜索命令
    Linux 之 文件内容查看
    Linux 之 Vim常用命令
    Linux 之 CentOS练习
    CentOS找不到想要的镜像版本?
    Swoole 简单学习(2)
    Swoole 简单学习
    svn的简单知识
    8、16、32-BIT系列单片机区别与特点
  • 原文地址:https://www.cnblogs.com/Krisone/p/13223701.html
Copyright © 2011-2022 走看看