《黑馬旅遊網》綜合案例

一、啟動項目

二、技術選型

Web層

Service層

Dao層

三、建立資料庫

四、注冊功能

功能分析

代碼實作

校驗使用者名

校驗密碼

校驗郵箱

異步(ajax)送出表單

背景代碼實作

發送郵件

五、登入

六、退出

七、旅遊線路名稱查詢

一、啟動項目

方式一：

JavaWeb學習筆記——黑馬旅遊網《黑馬旅遊網》綜合案例

方式二：配置maven快捷啟動

JavaWeb學習筆記——黑馬旅遊網《黑馬旅遊網》綜合案例

二、技術選型

Web層

Servlet：前端控制器
html：視圖
Filter：過濾器
BeanUtils：資料封裝
Jackson：json序列化工具

Service層

Javamail：java發送郵件工具
Redis：nosql記憶體資料庫
Jedis：java的redis用戶端

Dao層

Mysql：資料庫
Druid：資料庫連接配接池
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;
        }

$.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學習筆記——黑馬旅遊網《黑馬旅遊網》綜合案例

《黑馬旅遊網》綜合案例

一、啟動項目

二、技術選型

Web層

Service層

Dao層

三、建立資料庫

四、注冊功能

功能分析

代碼實作

校驗使用者名

校驗密碼

校驗郵箱

異步(ajax)送出表單

背景代碼實作

發送郵件

五、登入

六、退出

七、旅遊線路名稱查詢

查詢參數的傳遞

繼續閱讀

Javaweb學習筆記之JSP(八)：在 JSP 頁面中使用 JavaBean

JSTL标簽庫學習筆記（超詳細）1.JSTL 标簽庫的使用步驟2.core 核心庫使用

Ajax筆記一、關于Ajax二、XMLHttpRequest對象三、Ajax案例

Javaweb學習筆記之HttpServlet(三)：Servlet 的自動加載

JavaWeb學習筆記（三）------ServletJavaWeb學習筆記（三）------Servlet

javaWeb項目之Servlet學習筆記----初識Servlet

JavaWeb學習筆記——servlet

JavaWeb學習筆記——ServletServlet： server applet

JQ仿百度提示頁面

第三章課後練習題

maven-生命周期與插件1. 生命周期與插件建構

javaWeb項目之JSP學習筆記----3，JSP動作元素JSP 動作元素

javaWeb項目之JSP學習筆記----6JSP标簽JSTLJSP 标準标簽庫（JSTL）

Apache DBUtils使用總結

MVC三層架構學習筆記