day16--途牛旅游项目-环境搭建&登录功能

day16–旅游项目

学习目标

（1）项目搭建
（ 2）核心模块：登录
（3）sql
(4) Junit
(5) Git：版本管理工具

项目演示

登陆进去后：

边滑动边加载、分页
…

项目实现

1：新建一个工程（quickstart），src目录没什么作用，删掉

• maven 改为JDK1.8版本的，删除build标签（没什么用）
• 点击工程创建一个小模块（webapp），大的工程已经制定maven版本，小模块的就不要，build不要
• 在终端（terminal）将项目管理起来
  - git init
  - git config --global user.name
  - git config --global user.email
  - git status
  - git add . （.表示提交所有的）
  - git commit -m “init” 提交到本地仓库
• 放静态页面， 点击左边的commit可以查看还有哪些文件没提交到本地仓库
• 配置tomcat跑起来，运行没问题将项目提交一下

2：三层架构与建包

3：项目技术选型

• （1）Web层
  a)Servlet：前端控制器
  b)html：视图
  c)Filter：过滤器
  d)BeanUtils：数据封装
  e)Jackson：json序列化工具
• （2）Service层
  f)Javamail：java发送邮件工具
  g)Redis：nosql内存数据库
  h)Jedis：java的redis客户端
• （3）Dao层
  i)Mysql：数据库
  j)Mybatis：对jdbc进行封装

4：配置依赖

pom.xml

<dependencies>
        <!-- junit-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.11</version>
            <scope>test</scope>
        </dependency>
        <!--servlet-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

        <!-- MySql -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.32</version>
        </dependency>
        <!-- Mybatis -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.4.5</version>
        </dependency>
        <!--日志包-->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-log4j12</artifactId>
            <version>1.7.25</version>
        </dependency>
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>
        </dependency>

        <!--beanUtils-->
        <dependency>
            <groupId>commons-beanutils</groupId>
            <artifactId>commons-beanutils</artifactId>
            <version>1.9.2</version>
            <scope>compile</scope>
        </dependency>
        <!--jackson-->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.3.3</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.3.3</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.3.3</version>
        </dependency>


        <!--javaMail-->
        <dependency>
            <groupId>javax.mail</groupId>
            <artifactId>javax.mail-api</artifactId>
            <version>1.5.6</version>
        </dependency>
        <dependency>
            <groupId>com.sun.mail</groupId>
            <artifactId>javax.mail</artifactId>
            <version>1.5.3</version>
        </dependency>
        <!--jedis-->
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
            <version>2.7.0</version>
        </dependency>

    </dependencies>

提交到git

5：创建数据库

-- 创建数据库
create database lvyou;
-- 使用数据库
use lvyou;
-- 创建表
复制提供好的sql

将.sql里的语句在小海豚里执行一下

6：搭建mybatis
复制四个重要的文件
核心 配置文件
映射文件
日志文件
工具类MySessionUtil

SqlMapConfig.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">

<configuration>
    <typeAliases>
        <package name="com.rh.domain"/>
    </typeAliases>

    <environments default="mybatis">
        <environment id="mybatis">

            <transactionManager type="JDBC"/>

            <dataSource type="POOLED">
                <!--    四大信息 -->
                <property name="driver" value="com.mysql.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql://localhost:3306/lvyou?characterEncoding=utf-8"/>
                <property name="username" value="root"/>
                <property name="password" value="123456"/>
            </dataSource>
        </environment>
    </environments>
<!--   一个mapper标签可以指定一个映射文件-->
    <mappers>
        <mapper resource="com/wzx/dao/UserDao.xml"/>
    </mappers>
</configuration>

log4j.properties文件

# Global logging configuration
log4j.rootLogger=DEBUG, stdout
# Console output...
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n

Template.xml文件 （模板文件）

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wzx.dao.OrderDao">
</mapper>

MySessionUtils.java文件

package com.rh.util;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.InputStream;
//Session工具类
public class MySessionUtils {
    private static SqlSessionFactory sessionFactory;
    //static 静态代码，在类加载的时候执行一次，且只执行一次
    static{
//  》1 创建SqlSessionFactoryBuilder对象
        SqlSessionFactoryBuilder sqlSessionFactoryBuilder = new SqlSessionFactoryBuilder();
// 》2 创建SqlSessionFactory对象
        InputStream inputStream = MySessionUtils.class.getClassLoader().getResourceAsStream("SqlMapConfig.xml");
         sessionFactory = sqlSessionFactoryBuilder.build(inputStream);//加载核心配置文件 参1 输入流
//        》3 加载SqlMapConfig.xml配置文件
    }
    public static SqlSession getSession() {
//        》4 创建SqlSession对象
        SqlSession sqlSession = sessionFactory.openSession();
        return sqlSession;
    }
}

提交到git

7：登录功能_分析

8：登录功能_实现
TestUserService文件

//测试
public class TestUserService {
    @Test
    public void test01() {
        //将用户输入账号与密码发到后台
        UserService userService = new UserService();
        //1:查找用户数据
        User user = userService.findUserByName("jackhello");
        //2:根据数据， 正确，错误，不存在。
        if (user == null) {
            System.out.println("不存在");
        } else {
            //1:3种情况
            System.out.println("存在");
        }
    }

UserService文件

public class UserService {
    //直接获取Dao

    public User findUserByName(String name) {
        //getMapper是mybatis,给接口生成实现类，将实现类对象返回
        UserDao userDao = MySessionUtils2.getSession().getMapper(UserDao.class);
        //根据用户名查找用户
        User user = userDao.findByName(name);
       MySessionUtils2.getSession().commit();
        return user;
    }

    public int login(User user) {
        //账号密码
        UserDao userDao = MySessionUtils2.getSession().getMapper(UserDao.class);
        User u = userDao.findByName(user.getUsername());
        //比对数据库的账号密码
        if (u == null) {
            return -1;//找不到jack
        } else {
            //判断是否是激活的账户
            if ('Y'== u.getStatus()) {
                //是激活用户
                if (u.getUsername().equals(user.getUsername()) && u.getPassword().equals(user.getPassword())) {
                    return 1;//提示登录成功
                } else {
                    return -2;//账号或者密码出错
                }
            } else {
                return -3;//已激活
            }
        }
    }
}

UserDao文件

public interface UserDao {
    //select * from tab_user where username = 'jackhello'
    User findByName(String name);
}

User类

public class User {
    private int uid;
    private String username;
    private String password;
    private Date birthday;
    private String name;
    private String sex;
    private String telephone;
    private String email;
    private char status;
    private String code;
}

UserDao.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.wzx.dao.UserDao">
    <select id="findByName" parameterType="string" resultType="user">
        select * from tab_user where username = #{username}
    </select>
</mapper>

SqlMapConfig.xml文件

<!--   一个mapper标签可以指定一个映射文件-->
    <mappers>
        <mapper resource="com/wzx/dao/UserDao.xml"/>
    </mappers>

将项目提交到git，target文件夹里的文件是编译的中间文件，不要提交，可以建立一个.gitignore文件，设置在提交代码时自动忽略target里的文件

.gitignore文件里只要写上要忽略的文件所在的文件目录即可

target/

9：Junit注解
测试文件UserDaoTest文件补上Before和After注解，添加Test注解的方法可以当作main方法使用

public class UserDaoTest {

//    @Before：用来初始化@Test方法要使用到的资源
//    @After:用来释放资源
    // 执行顺序：@Before ->@Test -> @After
    private SqlSession session;
    private  UserDao userDao;
    @Before
    public void init() throws Exception {
        System.out.println("Before");
        //创建Session对象
         session = MySessionUtils.getSession();
         userDao = session.getMapper(UserDao.class);
    }

    @After
    public void destory() throws Exception {
        System.out.println("After");

        //提交与关闭session
        session.commit();
        session.close();
    }

    @Test
    public void test01() {
      //查找对象
        User user = userDao.findByName("jackhello");
     //查看对象
        System.out.println(user);

    }
    @Test
    public void test02() {
        User user = userDao.findByName("jackhello");
        //查看对象
        System.out.println(user);

    }
}

将获取session和关闭session的方法分别放到有Before和After注释的init（）和destroy（）方法里，中间就是增删改查，可以提高效率

10：登录：UserService

 public int login(User user) {
        //账号密码
        UserDao userDao = MySessionUtils.getSession().getMapper(UserDao.class);
        User u = userDao.findByName(user.getUsername());
        //比对数据库的账号密码
        if (u == null) {
            return -1;//找不到jack
        } else {
            //判断是否是激活的账户
            if ('Y'== u.getStatus()) {///字符判断是否一样直接用==
                //是激活用户
                if (u.getUsername().equals(user.getUsername()) && u.getPassword().equals(user.getPassword())) {
                    return 1;//提示登录成功
                } else {
                    return -2;//账号或者密码出错
                }
            } else {
                return -3;//已激活
            }
        }
    }

11：登录：ThreadLocal介绍
SqlSession属于Dao层，Dao层的代码尽量不要出现在Service层里，即UserService里，因为若是出现在service层，现在用的是mybatis，若是以后出现一个更好的Dao层的东西，当我们移除mybatis后，会发现所有出现在userservice里关于sqlsession的类都要想办法处理掉。否则会报错。即一旦移除Dao的包，凡是涉及到Dao的类、方法等都会报错，这就叫耦合，耦合就是一移除，没有一个另一个就不行。
一个请求一个线程

ThreadLocal介绍：
（1）在实际开发中，SqlSession属于Dao层代码，不允许出现在Service层中
删除Mybastis依赖
（2）ThreadLocal是什么？
java.lang.ThreadLocal 该类提供了线程局部 (thread-local) 变量，用于在当前线程中共享数据。
（3）有什么特点？
》1 ThreadLocal工具类底层就是一个Map，key存放的当前线程，value存放需要共享的数据。
》2 使用哪个线程存的，就只能使用哪个线程取

测试 TestThreadLocal :模拟ThreadLocal类

public class TestThreadLocal {
    private ThreadLocal<String> map = new ThreadLocal<String>();
    @Before
    public void test00(){
        System.out.println("Before");
        System.out.println(Thread.currentThread());
        map.set("hello");//map.put(Thread.currentThread(),"hello")，会自动将当前线程的名字作为键存储进去，组成键值对
    }
    @Test
    public void test01(){
        System.out.println("Test");
        System.out.println(Thread.currentThread());//获取当前线程
        System.out.println(map.get());map.get(Thread.currentThread())，自动获取当前线程的对应的值
    }
}
//这几个方法在同一个线程里面
//在同一个线程里面，可以互相取对方存储的数据

用TestThreadLocal 改造

MySessionUtils2文件

//Session工具类
public class MySessionUtils2 {
    private static SqlSessionFactory sessionFactory;
    //static 静态代码，在类加载的时候执行一次，且只执行一次
    static{
//  》1 创建SqlSessionFactoryBuilder对象
        SqlSessionFactoryBuilder sqlSessionFactoryBuilder = new SqlSessionFactoryBuilder();
// 》2 创建SqlSessionFactory对象
        InputStream inputStream = MySessionUtils2.class.getClassLoader().getResourceAsStream("SqlMapConfig.xml");
         sessionFactory = sqlSessionFactoryBuilder.build(inputStream);//加载核心配置文件 参1 输入流
//        》3 加载SqlMapConfig.xml配置文件
    }

    //A: 定义一个ThreadLocal集合，本质是Map<Thread,Object> map
    private   static ThreadLocal<SqlSession> map = new ThreadLocal<SqlSession>();

    public static SqlSession getSession() {

        //查找在local中，是否有对应的SqlSession
        SqlSession sqlSession = map.get(); //map.get(Thread.currentThread())

        if (sqlSession != null) {
            //有就直接返回给调用者使用
            return sqlSession;
        } else {

            //没有就创建一个新的，并且保存在local
            sqlSession = sessionFactory.openSession();
            //保存
            map.set(sqlSession);

            return sqlSession;
        }
    }

    public static void commitAndClose() {
        //将来进行写操作，之后需要提交，我们定义的方法
        SqlSession session = map.get();
        if (session != null) {
            session.commit();//提交
            session.close();//释放
            //已经关闭的session不能留在local
            //所以要删除
            map.remove();
        }
    }

    public static void rollbackAndClose() {
        //将来进行写操作，之后需要提交，我们定义的方法
        SqlSession session = map.get();
        if (session != null) {
            session.rollback();//回滚
            session.close();//释放
            //已经关闭的session不能留在local
            //所以要删除
            map.remove();
        }
    }
}

12：登录：前台表单校验
Ajax：异步的，用户使用javascript去发送提交请求，数据以前是xml，现在是json数据为主
以前是将账号密码发送到服务端，在服务端进行校验，在使用jquery之后，是在浏览器页面这边进行校验，原因：校验就是判断长度、个数等够不够，是否为空等简洁的判断，但是只要执行这些判断都要占用资源的，若是有一万人在服务器进行判断，那就会消耗很多的资源，但是在各自的浏览器上进行判断，既能完成功能，又不会影响服务器的性能，所以一般jquery在页面判断数据的格式，然后jQuery发送ajax请求，jquery两个作用

（0）实际项目中数据的格式都是在浏览器校验，why?
提升用户体验，并减轻服务器压力。
（1）校验用户名 /^\w{8,20}KaTeX parse error: Undefined control sequence: \w at position 26: …到20位 （2）校验密码 /^\̲w̲{8,20}/ 单词字符，长度8到20位
（3）校验密码邮箱 = /^\w+@\w+.\w+$/ 邮箱 xxx@qq.com
正则表达式

	正则表达式.test(字符串)
返回一个布尔值
	true 格式正确
	false 格式错误

<script type="text/javascript" >
		function checkUserName(){
			//获取输入框的值
			var username = $("#username").val();

			//正则表达式  定义一个规则，执行test方法，符合规则返回true，否则返回false

			var reg =  /^\w{8,20}$/ ;

			var flag = reg.test(username); //判断

			//如果符合要求，设置输入框边框是正常，否则设置红色

			if(flag){
				$("#username").css("border","");
			}else{
				$("#username").css("border","1px solid red");
			}
			//alert(flag)
			return flag;
		}

		function checkPassword(){
			//判断密码输入框的值是否合法
			var username = $("#password").val();
			var reg =  /^\w{8,20}$/ ;

			var flag = reg.test(username); //判断
			if(flag){
				$("#password").css("border","");//无色框
			}else{
				$("#password").css("border","1px solid red");//红框
			}
			//alert(flag)
			return flag;
		}
		$(function () {
			// 判断两个输入框架的是否格式正确
			$("#username").blur(checkUserName);//输入框失去焦点
			// 如果正确，使用ajax发送请求到servlet
			$("#password").blur(checkPassword);

			//编写ajax请求

		})

	</script>

12：登录：前台表单Ajax提交
控制表单是否提交，函数返回true，表单提交，返回false表单不提交
此处
在ajax提交，则写false
页面是一个带有submit按钮的form表单 ，才可以拦截，若是不是submit的表单（如普通按钮，不需要拦截，而不是不可以拦截，直接写点击事件
（登录页面点击提交，正常是将账号密码提交过去了，这是普通的提交，若是ajax提交，会先将原来的登录行为拦截下来，不让它提交，然后让js提交，这样才能变成ajax）

<form id="loginForm" action="" method="post" accept-charset="utf-8">
...
	<input type="submit" value="登录">
</form>

//给表单，先做拦截，再做提交
$("#loginForm").submit(function () {

				alert("拦截下来")
				//写false，表示拦截
				return false;
			})

若是不是submit，是一个普通按钮：

 <button id="btn_login" type="button">登录</button>

直接写正常的点击事件：

$("#btn_login").click(function () {
					//点击时要求两个值正确，我们才做提交
					if(checkUserName()&&checkPassword()){
						var un = $("#username").val()
						var pw = $("#password").val()
						//alert(un+pw)
						//写提交
						$.ajax({
							url:"loginServlet",
							async:true,
							data:"username="+un+"&password="+pw,
							type:"post",
							dataType:"json",//服务端返回的数据
							success:function (data) {
								alert(data)//接收服务端返回来的数据
							},
							error:function () {
								alert("服务器发生了错误")//若是服务端没有响应或者网络断开，返回服务端发生了错误
							}
						});
					}
			})

13：登录：后台LoginServlet
（1）Servlet只做三件事
》接收请求获取参数
》处理参数
》将结果响应给浏览器（响应不能重定向或者请求转发，因为这是异步请求，异步请求意味着调ajax将数据发送给servlet，servlet是这样获取数据的，返回数据时会将数据发送给ajax，然后在jquery这边用函数接收）

@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //获取请求参数
        Map<String, String[]> map = request.getParameterMap();
        User u = new User();
        try {
            //参1 javaBean 参2 map
            BeanUtils.populate(u,map);//将map里面所有的参数赋值给javaBean
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        //处理参数
        UserService userService = new UserService();
        int code = userService.login(u);
        //响应给浏览器 ajax 是响应json给浏览器就可以
        ResponseInfo info = new ResponseInfo();
        info.setCode(code);
        if(code == - 1){
            info.setData("用户不存在");
        }else  if(code ==  1){
            info.setData("登录成功");
        }else  if(code ==  -2){
            info.setData("账号密码出错");
        }else  if(code ==  -3){
            info.setData("账号未激活");
        }
        //转成json
        String json =new ObjectMapper().writeValueAsString(info);
        response.getWriter().println(json);
    }
}

响应给浏览器 ajax 之前需要判断结果，定义一个 ResponseInfo类，相应信息类

public class ResponseInfo {
    private int code;
    private Object data;
}

14：登录：中文乱码使用过滤器

发现服务器相应的json数据乱码，中文问题，过滤器

/**
 * 解决全站乱码问题，处理所有的请求
 */
@WebFilter("/*")
public class CharchaterFilter implements Filter {
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    public void doFilter(ServletRequest req, ServletResponse rep, FilterChain filterChain) throws IOException, ServletException {

       req.setCharacterEncoding("utf-8");
        // 处理响应乱码
        rep.setContentType("text/html;charset=utf-8");
        // 放行请求
        filterChain.doFilter(req,rep);
    }

    public void destroy() {

    }
}

补充：login.html还是有乱码问题，其他页面正常
解决方法之一：
新建login.jsp
复制login.html的内容，jsp支持 el表达式与jstl 标签库
创建jsp会自动设置编码

            $("#btn_login").click(function () {
                //要求两个值正确，我们才做提交
                if(checkUserName()&&checkPassword()){
                    var un = $("#username").val()
                    var pw = $("#password").val()
                    //alert(un+pw)
                    //写提交
                    $.ajax({
                        url:"loginServlet",
                        async:true,
                        data:"username="+un+"&password="+pw,
                        type:"post",
                        dataType:"json",
                        success:function (data) {
                           // alert(data)  {"code":1,"data":"登录成功"}
                            if(1 == data.code){
                                //跳转到主页 index.html
                                $("#errorMsg").html("");
                                window.location="index.html"
                            }else{
                                //显示在界面上
                                $("#errorMsg").html(data.data);
                            }
                        },
                        error:function () {
                            alert("服务器发生了错误")
                        }
                    });
                }
            })