一、搭建开发环境—基于前后端分离的旅游项目
项目需要用到的技术栈
后端：Servlet, beanUtils , Jackson , javaMail , jdbctemplate ,druid + mysql前端：bootstrap + jquery
1.创建web项目,创建java目录和resources目录
2.在pom.xml中导入项目需要用的依赖包
<?xml version="1.0" encoding="UTF-8"?><project xmlns="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.bianyiit</groupId><artifactId>maven_tourism</artifactId><version>1.0-SNAPSHOT</version><packaging>war</packaging><name>maven_tourism Maven Webapp</name><!-- FIXME change it to the project's website --><url></url><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><piler.source>1.8</piler.source><piler.target>1.8</piler.target></properties><dependencies><!--json转换相关依赖--><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.9.0</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.0</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.9.0</version></dependency><!--jedis依赖--><dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>2.7.2</version></dependency><!--beanUtils--><dependency><groupId>commons-beanutils</groupId><artifactId>commons-beanutils</artifactId><version>1.9.2</version><scope>compile</scope></dependency><dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1.1</version><scope>compile</scope></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><!--jdbcTemplate依赖--><dependency><groupId>org.springframework</groupId><artifactId>spring-jdbc</artifactId><version>5.0.5.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-tx</artifactId><version>5.0.5.RELEASE</version></dependency><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.0.5.RELEASE</version></dependency><!--druid连接池依赖--><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.1.10</version></dependency><!--数据库驱动依赖--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.6</version></dependency><!--web相关依赖--><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><scope>provided</scope></dependency><dependency><groupId>javax.servlet</groupId><artifactId>jsp-api</artifactId><version>2.0</version><scope>provided</scope></dependency><!--junit依赖--><dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.11</version><scope>test</scope></dependency></dependencies><build><finalName>day12_redis_role</finalName><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><version>2.2</version><configuration><!-- 指定端口 --><port>8080</port><!-- 请求路径 --><path>/</path></configuration></plugin></plugins></build></project>
3.在webapp下导入项目的前端资源--各类html页面/img/css/jquery/bootstrap...
4.创建数据库，导入六张表
5.在resources中导入两个配置文件
6.在util包下导入五个工具类
package com.bianyiit.util;import com.alibaba.druid.pool.DruidDataSourceFactory;import javax.sql.DataSource;import java.io.IOException;import java.io.InputStream;import java.sql.Connection;import java.sql.ResultSet;import java.sql.SQLException;import java.sql.Statement;import java.util.Properties;/*1. 声明静态数据源成员变量2. 创建连接池对象3. 定义公有的得到数据源的方法4. 定义得到连接对象的方法5. 定义关闭资源的方法*/public class JDBCUtils {// 1.声明静态数据源成员变量private static DataSource ds;// 2. 创建连接池对象static {// 加载配置文件中的数据InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");Properties pp = new Properties();try {pp.load(is);// 创建连接池，使用配置文件中的参数ds = DruidDataSourceFactory.createDataSource(pp);} catch (IOException e) {e.printStackTrace();} catch (Exception e) {e.printStackTrace();}}// 3. 定义公有的得到数据源的方法public static DataSource getDataSource() {return ds;}// 4. 定义得到连接对象的方法public static Connection getConnection() throws SQLException {return ds.getConnection();}// 5.定义关闭资源的方法public static void close(Connection conn, Statement stmt, ResultSet rs) {if (rs != null) {try {rs.close();} catch (SQLException e) {}}if (stmt != null) {try {stmt.close();} catch (SQLException e) {}}if (conn != null) {try {conn.close();} catch (SQLException e) {}}}// 6.重载关闭方法public static void close(Connection conn, Statement stmt) {close(conn, stmt, null);}}
package com.bianyiit.util;import redis.clients.jedis.Jedis;import redis.clients.jedis.JedisPool;import redis.clients.jedis.JedisPoolConfig;import java.io.IOException;import java.io.InputStream;import java.util.Properties;/*** Jedis工具类*/public final class JedisUtil {private static JedisPool jedisPool;static {//读取配置文件InputStream is = JedisPool.class.getClassLoader().getResourceAsStream("jedis.properties");//创建Properties对象Properties pro = new Properties();//关联文件try {pro.load(is);} catch (IOException e) {e.printStackTrace();}//获取数据，设置到JedisPoolConfig中JedisPoolConfig config = new JedisPoolConfig();config.setMaxTotal(Integer.parseInt(pro.getProperty("maxTotal")));config.setMaxIdle(Integer.parseInt(pro.getProperty("maxIdle")));//初始化JedisPooljedisPool = new JedisPool(config, pro.getProperty("host"), Integer.parseInt(pro.getProperty("port")));}/*** 获取连接方法*/public static Jedis getJedis() {return jedisPool.getResource();}/*** 关闭Jedis*/public static void close(Jedis jedis) {if (jedis != null) {jedis.close();}}}
package com.bianyiit.util;import javax.mail.*;import javax.mail.internet.InternetAddress;import javax.mail.internet.MimeMessage;import java.util.Properties;/*** 发邮件工具类*/public final class MailUtils {private static final String USER = "zhangsan@"; // 发件人称号，同邮箱地址private static final String PASSWORD = "xxxxx"; // 如果是qq邮箱可以使户端授权码，或者登录密码/**** @param to 收件人邮箱* @param text 邮件正文* @param title 标题*//* 发送验证信息的邮件 */public static boolean sendMail(String to, String text, String title){try {final Properties props = new Properties();props.put("mail.smtp.auth", "true");props.put("mail.smtp.host", "");// 发件人的账号props.put("mail.user", USER);//发件人的密码props.put("mail.password", PASSWORD);// 构建授权信息，用于进行SMTP进行身份验证Authenticator authenticator = new Authenticator() {@Overrideprotected PasswordAuthentication getPasswordAuthentication() {// 用户名、密码String userName = props.getProperty("mail.user");String password = props.getProperty("mail.password");return new PasswordAuthentication(userName, password);}};// 使用环境属性和授权信息，创建邮件会话Session mailSession = Session.getInstance(props, authenticator);// 创建邮件消息MimeMessage message = new MimeMessage(mailSession);// 设置发件人String username = props.getProperty("mail.user");InternetAddress form = new InternetAddress(username);message.setFrom(form);// 设置收件人InternetAddress toAddress = new InternetAddress(to);message.setRecipient(Message.RecipientType.TO, toAddress);// 设置邮件标题message.setSubject(title);// 设置邮件的内容体message.setContent(text, "text/html;charset=UTF-8");// 发送邮件Transport.send(message);return true;}catch (Exception e){e.printStackTrace();}return false;}public static void main(String[] args) throws Exception { // 做测试用MailUtils.sendMail("zhangsan@","你好，这是一封来自编易官方的邮件。","测试邮件");System.out.println("发送成功");}}
package com.bianyiit.util;import java.security.MessageDigest;/*** 写一个MD5算法,运行结果与MySQL的md5()函数相同* 将明文密码转成MD5密码* 123456->e10adc3949ba59abbe56e057f20f883e*/public final class Md5Util {private Md5Util(){}/*** 将明文密码转成MD5密码 */public static String encodeByMd5(String password) throws Exception{//Java中MessageDigest类封装了MD5和SHA算法，今天我们只要MD5算法MessageDigest md5 = MessageDigest.getInstance("MD5");//调用MD5算法，即返回16个byte类型的值byte[] byteArray = md5.digest(password.getBytes());//注意：MessageDigest只能将String转成byte[]，接下来的事情，由我们程序员来完成return byteArrayToHexString(byteArray);}/*** 将byte[]转在16进制字符串 */private static String byteArrayToHexString(byte[] byteArray) {StringBuffer sb = new StringBuffer();//遍历for(byte b : byteArray){//16次//取出每一个byte类型，进行转换String hex = byteToHexString(b);//将转换后的值放入StringBuffer中sb.append(hex);}return sb.toString();}/*** 将byte转在16进制字符串 */private static String byteToHexString(byte b) {//-31转成e1，10转成0a，。。。//将byte类型赋给int类型int n = b;//如果n是负数if(n < 0){//转正数//-31的16进制数，等价于求225的16进制数 n = 256 + n;}//商(14)，数组的下标int d1 = n / 16;//余(1)，数组的下标int d2 = n % 16;//通过下标取值return hex[d1] + hex[d2];}private static String[] hex = {"0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"};/*** 测试*/public static void main(String[] args) throws Exception{String password = "123456";String passwordMD5 = Md5Util.encodeByMd5(password);System.out.println(password);System.out.println(passwordMD5);}}
package com.bianyiit.util;import java.util.UUID;/*** 产生UUID随机字符串工具类*/public final class UuidUtil {private UuidUtil(){}public static String getUuid(){return UUID.randomUUID().toString().replace("-","");}/*** 测试*/public static void main(String[] args) {System.out.println(UuidUtil.getUuid());System.out.println(UuidUtil.getUuid());System.out.println(UuidUtil.getUuid());System.out.println(UuidUtil.getUuid());}}
7.在domain下新建两个实体类
package com.bianyiit.domain;import java.io.Serializable;/*** 用户实体类*/public class User implements Serializable {private int uid;//用户idprivate String username;//用户名，账号private String password;//密码private String name;//真实姓名private String birthday;//出生日期private String sex;//男或女private String telephone;//手机号private String email;//邮箱private String status;//激活状态，Y代表激活，N代表未激活private String code;//激活码（要求唯一）/*** 无参构造方法*/public User() {}/*** 有参构方法* @param uid* @param username* @param password* @param name* @param birthday* @param sex* @param telephone* @param email* @param status* @param code*/public User(int uid, String username, String password, String name, String birthday, String sex, String telephone, String email, String status, String code) {this.uid = uid;this.username = username;this.password = password;this.name = name;this.birthday = birthday;this.sex = sex;this.telephone = telephone;this.email = email;this.status = status;this.code = code;}public int getUid() {return uid;}public void setUid(int uid) {this.uid = uid;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getBirthday() {return birthday;}public void setBirthday(String birthday) {this.birthday = birthday;}public String getSex() {return sex;}public void setSex(String sex) {this.sex = sex;}public String getTelephone() {return telephone;}public void setTelephone(String telephone) {this.telephone = telephone;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}public String getStatus() {return status;}public void setStatus(String status) {this.status = status;}public String getCode() {return code;}public void setCode(String code) {this.code = code;}@Overridepublic String toString() {return "User{" +"uid=" + uid +", username='" + username + '\'' +", password='" + password + '\'' +", name='" + name + '\'' +", birthday='" + birthday + '\'' +", sex='" + sex + '\'' +", telephone='" + telephone + '\'' +", email='" + email + '\'' +", status='" + status + '\'' +", code='" + code + '\'' +'}';}}
package com.bianyiit.domain;import java.io.Serializable;import java.util.Objects;/*** 用于封装后端返回前端数据对象*/public class ResultInfo implements Serializable {private boolean flag;//后端返回结果正常为true，发生异常返回falseprivate Object data;//后端返回结果数据对象private String errorMsg;//发生异常的错误消息//无参构造方法public ResultInfo() {}public ResultInfo(boolean flag) {this.flag = flag;}/*** 有参构造方法* @param flag* @param errorMsg*/public ResultInfo(boolean flag, String errorMsg) {this.flag = flag;this.errorMsg = errorMsg;}/*** 有参构造方法* @param flag* @param data* @param errorMsg*/public ResultInfo(boolean flag, Object data, String errorMsg) {this.flag = flag;this.data = data;this.errorMsg = errorMsg;}public boolean isFlag() {return flag;}public void setFlag(boolean flag) {this.flag = flag;}public Object getData() {return data;}public void setData(Object data) {this.data = data;}public String getErrorMsg() {return errorMsg;}public void setErrorMsg(String errorMsg) {this.errorMsg = errorMsg;}}
二、注册功能的分析与代码编写
1.先打开index.html，查看整个网站的门户页面
2.打开register.html，进行用户名，密码的前端校验
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>注册</title><link rel="stylesheet" type="text/css" href="css/common.css"><link rel="stylesheet" href="css/register.css"><!--导入jquery--><script src="js/jquery-3.3.1.js"></script><script>function checkPassword () {var password = $("#password").val();var flag = /^\w{3,20}$/.test(password);if (!flag){$("#password").css("border","1px solid red");}else {$("#password").css("border","");}return flag;}function checkUsername () {var username = $("#username").val();var flag = /^\w{3,20}$/.test(username);if (!flag){$("#username").css("border","1px solid red");}else {$("#username").css("border","");}return flag;}$(function () {/** 校验用户名* 长度 3-20位字符 （字母或者数字）* */$("#username").blur(checkUsername);/** 校验密码* 长度 3-20位字符 （字母或者数字）* */$("#password").blur(checkPassword);$("#registerForm").submit(function () {var usernameFlag = checkUsername();var passwordFlag = checkPassword();if (usernameFlag && passwordFlag){//通过ajax 提交表单数据到服务器// 原因：项目的基本架构是前后端分离，前端页面都是html页面 ，html页面中不能通过el表达式获取request中的数据// 所有服务器是不能将数据保持到request中传递到页面里面来的，但是ajax请求能够接受服务器响应回来的数据$.post("/registServlet",$("#registerForm").serialize(),function (data) {/*1. 如果服务器注册成功 跳转页面2. 否则展示错误信息*/if(data.flag){location.href = "register_ok.html"}else {$("#errorMsg").html(data.errorMsg)}},"json");}return false;});})</script></head><body><!--引入头部--><div id="header"></div><!-- 头部 end --><div class="rg_layout"><div class="rg_form clearfix"><div class="rg_form_left"><p>新用户注册</p><p>USER REGISTER</p></div><div class="rg_form_center"><div id="errorMsg" style="color:red;text-align: center"></div><!--注册表单--><form id="registerForm" action="/registServlet"><!--提交处理请求的标识符--><input type="hidden" name="action" value="register"><table style="margin-top: 25px;"><tr><td class="td_left"><label for="username">用户名</label></td><td class="td_right"><input type="text" id="username" name="username" placeholder="请输入账号"></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="password" id="password" name="password" placeholder="请输入密码"></td></tr><tr><td class="td_left"><label for="email">Email</label></td><td class="td_right"><input type="text" id="email" name="email" placeholder="请输入Email"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" id="name" name="name" placeholder="请输入真实姓名"></td></tr><tr><td class="td_left"><label for="telephone">手机号</label></td><td class="td_right"><input type="text" id="telephone" name="telephone" placeholder="请输入您的手机号"></td></tr><tr><td class="td_left"><label for="sex">性别</label></td><td class="td_right gender"><input type="radio" id="sex" name="sex" value="男" checked> 男<input type="radio" name="sex" value="女"> 女</td></tr><tr><td class="td_left"><label for="birthday">出生日期</label></td><td class="td_right"><input type="date" id="birthday" name="birthday" placeholder="年/月/日"></td></tr><tr><td class="td_left"><label for="check">验证码</label></td><td class="td_right check"><input type="text" id="check" name="check" class="check"><img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)"><script type="text/javascript">//图片点击事件function changeCheckCode(img) {img.src="/checkCode?"+new Date().getTime();}</script></td></tr><tr><td class="td_left"> </td><td class="td_right check"> <input type="submit" class="submit" value="注册"><span id="msg" style="color: red;"></span></td></tr></table></form></div><div class="rg_form_right"><p>已有账号？<a href="#">立即登录</a></p></div></div></div><!--引入尾部--><div id="footer"></div><!--导入布局js，共享header和footer--><script type="text/javascript" src="js/include.js"></script></body></html>
1.点击注册按钮，进入注册界面
2.前端校验的时机一：输入框失去焦点
2.前端校验的时机二：提交表单之前
4.用户名错误，密码正确的效果演示（不涉及服务器的处理，单纯的前端校验）
5.用户名正确，密码错误的效果演示（不涉及服务器的处理，单纯的前端校验）
3.在web下新建一个filter包，用于对浏览器传入的request进行中文乱码的解决
package com.bianyiit.web.filter;import javax.servlet.*;import javax.servlet.annotation.WebFilter;import java.io.IOException;@WebFilter("/*")public class CharacterEncodingFilter implements Filter {public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {req.setCharacterEncoding("utf-8");chain.doFilter(req, resp);}public void init(FilterConfig config) throws ServletException {}public void destroy() {}}
3.在web下新建一个servlet包，在这个包下新建一个RegistServlet
package com.bianyiit.web.servlet;import com.bianyiit.domain.ResultInfo;import com.bianyiit.domain.User;import com.bianyiit.services.UserService;import com.bianyiit.services.UserServiceImpl;import com.fasterxml.jackson.databind.ObjectMapper;import mons.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.util.Map;@WebServlet("/registServlet")public class RegistServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("application/json;charset=utf-8");ResultInfo resultInfo = new ResultInfo();String check = request.getParameter("check");String checkcode_server = (String) request.getSession().getAttribute("CHECKCODE_SERVER");request.getSession().removeAttribute("CHECKCODE_SERVER");ObjectMapper objectMapper = new ObjectMapper();if(checkcode_server==null||!check.equalsIgnoreCase(checkcode_server)){resultInfo.setFlag(false);resultInfo.setErrorMsg("验证码不正确");objectMapper.writeValue(response.getWriter(),resultInfo);}Map<String, String[]> parameterMap = request.getParameterMap();User user=new User();try {BeanUtils.populate(user,parameterMap);} catch (Exception e) {e.printStackTrace();}//System.out.println(user);UserService userService = new UserServiceImpl();int update = 0;try {update = userService.regist(user);} catch (Exception e) {e.printStackTrace();resultInfo.setFlag(false);resultInfo.setErrorMsg("注册失败");objectMapper.writeValue(response.getWriter(),resultInfo);return;}if(update>0){//response.sendRedirect(request.getContextPath()+"/register.html");resultInfo.setFlag(true);resultInfo.setErrorMsg("注册成功");objectMapper.writeValue(response.getWriter(),resultInfo);}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}}
业务处理流程
4.采用面向接口编程，能够提高程序的可维护型和可扩展性
package com.bianyiit.services;import com.bianyiit.domain.User;public interface UserService {int regist(User user);}
package com.bianyiit.services;import com.bianyiit.dao.UserDao;import com.bianyiit.dao.UserDaoImpl;import com.bianyiit.domain.User;import com.bianyiit.util.JedisUtil;import com.bianyiit.util.MailUtils;import com.bianyiit.util.UuidUtil;import redis.clients.jedis.Jedis;public class UserServiceImpl implements UserService {UserDao userDao=new UserDaoImpl();@Overridepublic int regist(User user) {//1.保存用户到数据库int add = userDao.add(user);return add;}}
package com.bianyiit.dao;import com.bianyiit.domain.User;public interface UserDao {int add(User user);}
package com.bianyiit.dao;import com.bianyiit.domain.User;import com.bianyiit.util.JDBCUtils;import org.springframework.dao.DataAccessException;import org.springframework.jdbc.core.BeanPropertyRowMapper;import org.springframework.jdbc.core.JdbcTemplate;public class UserDaoImpl implements UserDao{JdbcTemplate jdbcTemplate = new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic int add(User user) {String sql="insert into tab_user values (null,?,?,?,?,?,?,?,?,?)";int update = jdbcTemplate.update(sql,user.getUsername(),user.getPassword(),user.getName(),user.getBirthday(),user.getSex(),user.getTelephone(),user.getEmail(),user.getStatus(),user.getCode());return update;}}
页面效果展示
三、验证码功能的分析与代码编写
1.找到register页面
2.在servlet中新建一个CheckCodeServlet
package com.bianyiit.web.servlet;import javax.imageio.ImageIO;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.awt.*;import java.awt.image.BufferedImage;import java.io.IOException;import java.util.Random;/*** 验证码*/@WebServlet("/checkCode")public class CheckCodeServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//服务器通知浏览器不要缓存response.setHeader("pragma","no-cache");response.setHeader("cache-control","no-cache");response.setHeader("expires","0");//在内存中创建一个长80，宽30的图片，默认黑色背景//参数一：长//参数二：宽//参数三：颜色int width = 80;int height = 30;BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);//获取画笔Graphics g = image.getGraphics();//设置画笔颜色为灰色g.setColor(Color.GRAY);//填充图片g.fillRect(0,0, width,height);//产生4个随机验证码，12EyString checkCode = getCheckCode();//将验证码放入HttpSession中request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);//设置画笔颜色为黄色g.setColor(Color.YELLOW);//设置字体的小大g.setFont(new Font("黑体",Font.BOLD,24));//向图片上写入验证码g.drawString(checkCode,15,25);//将内存中的图片输出到浏览器//参数一：图片对象//参数二：图片的格式，如PNG,JPG,GIF//参数三：图片输出到哪里去ImageIO.write(image,"PNG",response.getOutputStream());}/*** 产生4位随机字符串 */private String getCheckCode() {String base = "0123456789ABCDEFGabcdefg";int size = base.length();Random r = new Random();StringBuffer sb = new StringBuffer();for(int i=1;i<=4;i++){//产生0到size-1的随机值int index = r.nextInt(size);//在base字符串中获取下标为index的字符char c = base.charAt(index);//将c放入到StringBuffer中去sb.append(c);}return sb.toString();}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request,response);}}
验证码效果演示：
四、邮箱验证功能的分析与代码编写
1.回到注册用到的UserServiceImpl，当我们将用户信息保存到数据库之后，发送激活邮箱到真实的邮箱了
package com.bianyiit.services;import com.bianyiit.dao.UserDao;import com.bianyiit.dao.UserDaoImpl;import com.bianyiit.domain.User;import com.bianyiit.util.JedisUtil;import com.bianyiit.util.MailUtils;import com.bianyiit.util.UuidUtil;import redis.clients.jedis.Jedis;public class UserServiceImpl implements UserService {UserDao userDao=new UserDaoImpl();@Overridepublic int regist(User user) {//1.保存用户到数据库int add = userDao.add(user);//2.发送激活邮件String uuid = UuidUtil.getUuid();Jedis jedis = JedisUtil.getJedis();//两小时验证码有效jedis.setex(uuid,5*60,user.getUsername());jedis.close();String mailContent="<a href='http://localhost:8080/activeServlet?activeCode="+uuid+"'>请点此激活您的用户</a>";MailUtils.sendMail(user.getEmail(),mailContent,"用户激活邮件");return add;}@Overridepublic boolean active(String activeCode) {Jedis jedis = JedisUtil.getJedis();String username = jedis.get(activeCode);if(username==null||username.length()==0){return false;}else {int active = userDao.active(username);if(active>0){return true;}else{return false;}}}}
2.使用一个MailUtil工具类去完成这个发送邮箱的封装
package com.bianyiit.util;import javax.mail.*;import javax.mail.internet.InternetAddress;import javax.mail.internet.MimeMessage;import java.util.Properties;/*** 发邮件工具类*/public final class MailUtils {private static final String USER = "zhangsan@"; // 发件人称号，同邮箱地址private static final String PASSWORD = "1f5ewf1a5f1ae5fa"; // 如果是qq邮箱可以使户端授权码，或者登录密码/**** @param to 收件人邮箱* @param text 邮件正文* @param title 标题*//* 发送验证信息的邮件 */public static boolean sendMail(String to, String text, String title){try {final Properties props = new Properties();props.put("mail.smtp.auth", "true");props.put("mail.smtp.host", "");// 发件人的账号props.put("mail.user", USER);//发件人的密码props.put("mail.password", PASSWORD);// 构建授权信息，用于进行SMTP进行身份验证Authenticator authenticator = new Authenticator() {@Overrideprotected PasswordAuthentication getPasswordAuthentication() {// 用户名、密码String userName = props.getProperty("mail.user");String password = props.getProperty("mail.password");return new PasswordAuthentication(userName, password);}};// 使用环境属性和授权信息，创建邮件会话Session mailSession = Session.getInstance(props, authenticator);// 创建邮件消息MimeMessage message = new MimeMessage(mailSession);// 设置发件人String username = props.getProperty("mail.user");InternetAddress form = new InternetAddress(username);message.setFrom(form);// 设置收件人InternetAddress toAddress = new InternetAddress(to);message.setRecipient(Message.RecipientType.TO, toAddress);// 设置邮件标题message.setSubject(title);// 设置邮件的内容体message.setContent(text, "text/html;charset=UTF-8");// 发送邮件Transport.send(message);return true;}catch (Exception e){e.printStackTrace();}return false;}public static void main(String[] args) throws Exception { // 做测试用MailUtils.sendMail("zenglinkui@","你好，这是一封来自编易官方的邮件。","测试邮件");System.out.println("发送成功");}}
3.去QQ邮箱中开启SMTP和POP3协议
4.开启成功之后，通过如下代码向用户发送邮件
5.进入邮箱点击之后，跳转至ActiveServlet
package com.bianyiit.web.servlet;import com.bianyiit.services.UserService;import com.bianyiit.services.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("/activeServlet")public class ActiveServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String activeCode = request.getParameter("activeCode");System.out.println(activeCode);UserService userService=new UserServiceImpl();boolean isactive = userService.active(activeCode);if(isactive){//激活成功，跳转至主页response.sendRedirect(request.getContextPath()+"/active_ok.html");}else {response.sendRedirect(request.getContextPath()+"/active_fail.html");}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}}
激活成功之后的效果演示
五、登录功能的分析与代码编写
1.新建一个login.html
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>编易度假网-登录</title><link rel="stylesheet" type="text/css" href="css/common.css"><link rel="stylesheet" type="text/css" href="css/login.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="/html5shiv/3.7.3/html5shiv.min.js"></script><script src="/respond.js/1.4.2/respond.min.js"></script><![endif]--><!--导入angularJS文件--><!--<script src="js/angular.min.js"></script>--><!--导入jquery--><script src="js/jquery-3.3.1.js"></script><script>$(function () {//1.给登录按钮绑定单击事件$("#btn_sub").click(function () {//2.发送ajax请求，提交表单数据$.post("/loginServlet",$("#loginForm").serialize(),function (data) {//data : {flag:false,errorMsg:''}if(data.flag){//登录成功location.href="index.html";}else{//登录失败$("#errorMsg").html(data.errorMsg);}});});});//3.处理响应结果</script></head><body><!--引入头部--><div id="header"></div><!-- 头部 end --><section id="login_wrap"><div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;"></div><div class="login-box"><div class="title"><span>欢迎登录编易度假账户</span></div><div class="login_inner"><!--登录错误提示消息--><div id="errorMsg" class="alert alert-danger" ></div><form id="loginForm" action="" method="post" accept-charset="utf-8"><input type="hidden" name="action" value="login"/><input name="username" type="text" placeholder="请输入账号" autocomplete="off"><input name="password" type="text" placeholder="请输入密码" autocomplete="off"><div class="verify"><input name="check" type="text" placeholder="请输入验证码" autocomplete="off"><span><img src="checkCode" alt="" onclick="changeCheckCode(this)"></span><script type="text/javascript">//图片点击事件function changeCheckCode(img) {img.src="checkCode?"+new Date().getTime();}</script></div><div class="submit_btn"><button type="button" id="btn_sub">登录</button><div class="auto_login"><input type="checkbox" name="" class="checkbox"><span>自动登录</span></div> </div></form><div class="reg">没有账户？<a href="javascript:;">立即注册</a></div></div></div></section><!--引入尾部--><div id="footer"></div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="js/jquery-1.11.0.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script><!--导入布局js，共享header和footer--><script type="text/javascript" src="js/include.js"></script></body></html>
2.新建一个LoginServlet
package com.bianyiit.web.servlet;import com.bianyiit.domain.ResultInfo;import com.bianyiit.domain.User;import com.bianyiit.services.UserService;import com.bianyiit.services.UserServiceImpl;import com.fasterxml.jackson.databind.ObjectMapper;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("/loginServlet")public class LoginServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("application/json;charset=utf-8");ResultInfo info = new ResultInfo();ObjectMapper objectMapper = new ObjectMapper();String username = request.getParameter("username");String password = request.getParameter("password");String check = request.getParameter("check");String checkCode= (String)request.getSession().getAttribute("CHECKCODE_SERVER");request.getSession().removeAttribute(checkCode);if(checkCode==null||!checkCode.equalsIgnoreCase(check)){info.setFlag(false);info.setErrorMsg("验证码错误");objectMapper.writeValue(response.getWriter(),info);return;}UserService userService=new UserServiceImpl();User user = userService.login(username);if(user==null){info.setFlag(false);info.setErrorMsg("登录用户不存在");}else {if(password==null||!password.equals(user.getPassword())){info.setFlag(false);info.setErrorMsg("密码不正确");}else if(user.getStatus()==null){info.setFlag(false);info.setErrorMsg("用户未激活");}else{info.setFlag(true);request.getSession().setAttribute("loginUser",user);}}objectMapper.writeValue(response.getWriter(),info);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}}
3.业务逻辑处理
4.登录成功之后将用户信息封装到session中
5.登录成功之后，通过ajax返回一个data数据回来，并设置info.flag为true
6.这时我们在header.html中找到一段代码是用于获取用户存在session中的用户名
7.FindLoginUserServlet
package com.bianyiit.web.servlet;import com.fasterxml.jackson.databind.ObjectMapper;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("/findLoginUserServlet")public class FindLoginUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {Object loginUser = request.getSession().getAttribute("loginUser");response.setContentType("application/json;charset=utf-8");new ObjectMapper().writeValue(response.getWriter(),loginUser);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}}
8.登录的效果演示
六、退出功能的分析与代码编写
1.请求ExitServlet，将存在Session的值清空
2.ExitServlet
package com.bianyiit.web.servlet;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("/exitServlet")public class ExitServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.getSession().invalidate();response.sendRedirect("index.html");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doPost(request, response);}}
3.当点击退出之后的效果演示
