天天看点
返回

JavaWeb学习笔记——黑马旅游网《黑马旅游网》综合案例

《黑马旅游网》综合案例

目录

《黑马旅游网》综合案例

一、启动项目

二、技术选型

Web层

Service层

Dao层

三、创建数据库

四、注册功能

功能分析

代码实现

校验用户名

校验密码

校验邮箱

异步(ajax)提交表单

后台代码实现

发送邮件

五、登录

六、退出

七、旅游线路名称查询

一、启动项目

方式一：

JavaWeb学习笔记——黑马旅游网《黑马旅游网》综合案例

方式二：配置maven快捷启动

JavaWeb学习笔记——黑马旅游网《黑马旅游网》综合案例
JavaWeb学习笔记——黑马旅游网《黑马旅游网》综合案例

二、技术选型

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的工具

三、创建数据库

-- 创建数据库

CREATE DATABASE travel;

-- 使用数据库

USE travel;

--创建表

         复制提供好的sql

四、注册功能

功能分析

JavaWeb学习笔记——黑马旅游网《黑马旅游网》综合案例

代码实现 

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

    //校验用户名
    function checkUsername() {
        alert("校验密码");
        return true;
    }

    //校验密码
    function checkPassword() {
        alert("校验密码");
        return true;
    }

    $(function () {
        //当表单提交时，调用所有的校验方法
        $("#registerForm").submit(function () {

            return checkUsername() && checkPassword();
            //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回false，则表单不提交
        });

        //当某一个组件失去焦点时，调用对应的校验方法
        $("#username").blur(checkUsername);
    })
</script>

校验用户名 

//校验用户名
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 true;
}

校验密码

方法和校验用户名一样

校验邮箱 

//校验邮箱
function checkEmail(){
    //1.获取邮箱
    var email = $("#email").val();
    //2.定义正则 [email protected]
    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;
}

异步(ajax)提交表单

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

$(function () {
    //当表单提交时，调用所有的校验方法
    $("#registerForm").submit(function () {
        //1.发送数据到服务器
        if(checkUsername() && checkPassword() && checkEmail()){
            //校验通过，发送ajax请求，提交表单的数据
            $.post("registUserServlet",$(this).serialize(),function(data) {
                //处理服务器响应的数据  data 
            });
        }
        //2.跳转页面
        return false;
        //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回false，则表单不提交
});

后台代码实现

编写RegistUserServlet

package cn.itcast.travel.web.servlet;

import cn.itcast.travel.domain.ResultInfo;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.service.UserService;
import cn.itcast.travel.service.impl.UserServiceImpl;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

@WebServlet("/registUserServlet")
public class RegistUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //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完成注册
        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
        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);
    }
}

编写UserService以及UserServiceImpl

UserService

package cn.itcast.travel.service;

import cn.itcast.travel.domain.User;

public interface UserService {
    /**
     * 注册用户
     * @param user
     * @return
     */
    boolean regist(User user);
}

UserServiceImpl

package cn.itcast.travel.service.impl;

import cn.itcast.travel.dao.UserDao;
import cn.itcast.travel.dao.impl.UserDaoImpl;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.service.UserService;

public class UserServiceImpl implements UserService {

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

        //2.保存用户信息
        userDao.save(user);
        return true;
    }
}

编写UserDao以及UserDaoImpl

UserDao

package cn.itcast.travel.dao;

import cn.itcast.travel.domain.User;

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

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

UserDaoImpl

package cn.itcast.travel.dao.impl;

import cn.itcast.travel.dao.UserDao;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.util.JDBCUtils;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;

public class UserDaoImpl implements UserDao {

    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 (DataAccessException e) {
            e.printStackTrace();
        }

        return user;
    }

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

验证码

//验证校验
        String check = request.getParameter("check");
        //从session中获取验证码
        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);
            //将json数据写回客户端
            //设置content-type
            response.setContentType("application/json;charset=utf-8");
            response.getWriter().write(json);
            return;
        }

register.html

$.post("registUserServlet",$(this).serialize(),function (data) {
	//处理服务器响应的数据  data
	if(data.flag){
		//注册成功，跳转成功页面
		location.href="register_ok.html" target="_blank" rel="external nofollow" ;
	}else {
		//注册失败,给errorMsg添加提示信息
		$("#errorMsg").html(data.errorMsg);
	}
});

发送邮件

为什么要进行邮件激活？为了保证用户填写的邮箱是正确的。将来可以推广一些宣传信息，到用户邮箱中。

要在MailUtils中设置自己的邮箱账号和密码(授权码)

邮件工具类：MailUtils，调用其中sendMail方法可以完成邮件发送

JavaWeb学习笔记——黑马旅游网《黑马旅游网》综合案例
UserDaoImpl
           
package cn.itcast.travel.web.servlet;

import cn.itcast.travel.service.UserService;
import cn.itcast.travel.service.impl.UserServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/activeUserServlet")
public class ActiveUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //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);
        }
    }

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

五、登录

header.html代码

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


    //3.处理响应结果
</script>

Servlet代码

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

六、退出

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

实现步骤：

     1.访问servlet，将session销毁

     2.跳转到登录页面

代码实现：

         Header.html

<div class="login">
            	
   <span id="span_username"></span>
   <a href="myfavorite.html" target="_blank" rel="external nofollow"  class="collection">我的收藏</a>
   <a href="javascript:location.href='exitServlet';" target="_blank" rel="external nofollow" >退出</a>
</div>

Servlet

JavaWeb学习笔记——黑马旅游网《黑马旅游网》综合案例

七、旅游线路名称查询

JavaWeb学习笔记——黑马旅游网《黑马旅游网》综合案例

查询参数的传递

在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=" target="_blank" rel="external nofollow" +cid+"&rname="+rname;
});

在route_list.html

var cid = getParameter("cid");
 //获取rname的参数值
 var rname = getParameter("rname");
 //判断rname如果不为null或者""
 if(rname){
     //url解码
     rname = window.decodeURIComponent(rname);
 }
javaweb学习笔记
上一篇: 黑马旅游网学习记录（三）黑马旅游网学习记录（三）
下一篇: 构建嵌入式LINUX的NFS[转]

继续阅读