最近仿照着黑马旅游网写了个旅游网项目，界面和图片用的是黑马的，毕竟界面太难画…，但是不是响应式的，等改天用Bootstrap重构成响应式的，功能跟黑马的基本一样，我在此基础上进行了一些添加和优化。
在写的过程，收获到了很多知识，所以总结一下这几天所收获同时也重新梳理整个项目的流程，涉及的功能较多，我会分成几篇博客进行总结
本次没有使用jsp，前端单纯的就是html,后台提供接口，通过Ajax进行请求
因为用的是黑马的界面和图片，如果涉及侵权了，请联系我，我会道歉并且删除博客。
JavaWeb-旅游网-导航条和分页展示
JavaWeb-旅游网-线路搜索
JavaWeb-旅游网-详情展示
JavaWeb-旅游网-点击收藏
注册
功能：注册提交后会发送给用户一封激活邮件，只有激活用户才可登录到主界面
页面：
前端使用JQuery对用户输入的信息进行校验,只有当全部信息符合要求时才可进行注册
//检验用户名
function checkUserName() {
//1.获取用户名的值
var username = $("#username").val();
//2.定义正则
var reg_username = /^\w{2,10}$/;
//3.判断
var flag = reg_username.test(username);
if (flag){
//合法用户名
$("#username").css("border","");
} else{
//非法用户名,红色边框提示非法
$("#username").css("border","1px solid red");
}
return flag;
}
//检验密码
function checkPassWord() {
//1.获取用户名的值
var password = $("#password").val();
//2.定义正则
var reg_password = /^\w{6,20}$/;
//3.判断
var flag = reg_password.test(password);
if (flag){
//合法用户名
$("#password").css("border","");
} else{
//非法用户名,红色边框提示非法
$("#password").css("border","1px solid red");
}
return flag;
}
//检验邮箱
function checkEmail(){
var email = $("#email").val();
//定义正则
var reg_email = /^\w+@\w+\.\w+$/
//判断
var flag = reg_email.test(email);
if (flag){
$("#email").css("border","");
} else {
$("#email").css("border","1px solid red");
}
return flag
}
//检验姓名
function checkName() {
//1.获取用户名的值
var username = $("#name").val();
//3.判断
var flag = true;
if (username.length == 0){
//姓名为空
flag = false;
$("#name").css("border","1px solid red");
} else{
flag = true;
$("#name").css("border","");
}
return flag;
}
//检验手机号
function checkTel() {
//1.获取用户名的值
var telephone = $("#telephone").val();
//正则
var reg_tel = /^[1][3,4,5,7,8][0-9]{9}$/;
//3.判断
var flag = reg_tel.test(telephone);
if (!flag){
$("#telephone").css("border","1px solid red");
} else{
$("#telephone").css("border","");
}
return flag;
}
//检验出生日期
function checkBirth() {
//1.获取用户名的值
var birthday = $("#birthday").val();
//3.判断
var flag = true;
if (birthday.length == 0){
//姓名为空
flag = false;
$("#birthday").css("border","1px solid red");
} else{
flag = true;
$("#birthday").css("border","");
}
return flag;
}
$(function(){
//当表单提交，调用所有校验方法,返回为true，表单提交
$("#registerForm").submit(function(){
if (checkUserName()&&checkPassWord()&&checkEmail()&&checkName()&&checkTel()&&checkBirth()){
//检验通过，发送Ajax请求，提交表单的数据,$(this).serialize()该方法将表单数据序列化成: key=value&key=value的格式
$.post("user/regist",$(this).serialize(),function (data) {
if(data.flag){
//注册成功
location.href="register_ok.html"
}else{
//注册失败,添加提示信息
$("#errorMsg").html(data.errorMsg);
}
})
}
return false;
});
//当某个组件失去焦点，调用对应的校验
$("#username").blur(checkUserName)
$("#password").blur(checkPassWord)
$("#email").blur(checkEmail)
$("#name").blur(checkName)
$("#telephone").blur(checkTel)
$("#birthday").blur(checkBirth)
});
不符合要求的信息会有红框提示
信息都符合要求后，发送Ajax请求，后台进行注册,使用了MD5加盐（用户名+密码）的方式对用户密码进行加密，注册完成后发送激活邮件给用户
后台代码：
public void regist(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取数据
Map<String,String[]> map = request.getParameterMap();
//封装对象
User user = new User();
try {
BeanUtils.populate(user,map );
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//调用service完成注册
UserService service = new UserServiceImpl();
boolean flag = service.regist(user);
ResultInfo info = new ResultInfo();
//响应消息
if(flag){
//注册成功
info.setFlag(true);
}else {
//注册失败
info.setFlag(false);
info.setErrorMsg("注册失败");
}
//将info对象序列化为Json,返回客户端
//将json数据写回客户端
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(getJson(info));
}
用户只有在激活了账户后才能进行正常的使用，每个用户都会自动生成唯一的激活码，后台根据唯一的激活码进行激活状态的更改
public boolean regist(User user) {
//根据用户名查询用户对象
User u = userDao.findByUserName(user.getUsername());
if(null != u){
return false;
}
//邮件激活准备
//设置激活码，唯一字符串
user.setCode(UuidUtil.getUuid());
//设置激活状态
user.setStatus("N");
//保存用户信息
userDao.regist(user);
//激活邮件发送
String content = "<a href ='http://localhost/travel/activeUserServlet?code="+user.getCode()+"'>点击激活【黑马旅游网】</a>";
MailUtils.sendMail(user.getEmail(),content ,"激活邮件" );
return true;
}
激活账户
//获取激活码
String code = request.getParameter("code");
if(null != code){
//调用service完成激活
UserService service = new UserServiceImpl();
boolean flag = service.active(code);
//判断标记
String msg = null;
if(flag){
msg = "激活成功，请<a href='login.html'>登录</a>";
}else {
msg = "激活失败";
}
response.setContentType("text/html;charset=utf-8");
response.getWriter().write(msg);
}
用户收到的邮件
登录
功能：用户输入用户名，密码和验证码，来到主界面
页面：
前端通过JavaScript对登录信息进行简单的非空判断，只有都写了才能点击登录
function checkUserName(){
var username = $("#username").val();
var flag = true;
if (username.length == 0){
//姓名为空
flag = false;
$("#username").css("border","1px solid red");
} else{
flag = true;
$("#username").css("border","");
}
return flag;
}
//检查密码是否输入
function checkPassWord(){
var password = $("#password").val();
var flag = true;
if (password.length == 0){
//姓名为空
flag = false;
$("#password").css("border","1px solid red");
} else{
flag = true;
$("#password").css("border","");
}
return flag;
}
//检查验证码是否输入
function checkCode(){
var code = $("#check").val();
var flag = true;
if (code.length == 0){
//姓名为空
flag = false;
$("#check").css("border","1px solid red");
} else{
flag = true;
$("#check").css("border","");
}
return flag;
}
发送Ajax，后台对登录信息进行认证将结果以json格式返回到前端，前端根据结果进行相应处理，
前端代码：
$(function () {
//给登录按钮注册点击事件
$("#btn_submit").click(function(){
//Ajax请求，提交表单数据
if (checkUserName&&checkPassWord()&&checkCode()){
$.post("user/login",$("#loginForm").serialize(),function (data) {
//处理响应结果
if (data.flag){
//登录成功
location.href="index.html"
}else{
//登录错误，显示提示信息同时更新验证码
$("#errorMsg").css("visibility","visible");
$("#errorMsg").html(data.errorMsg);
changeCheckCode();
}
});
}
return false;
});
})
后台代码：后台进行认证时，先将前端传过来的密码进行MD5加密，然后再同数据库进行认证，同时判断验证码是否正确以及账户是否激活，提示以相应的信息
public void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//验证码校验
String check = request.getParameter("check");
String checkcode_server = (String) request.getSession().getAttribute("CHECKCODE_SERVER");
//保证验证码只能使用一次
request.getSession().removeAttribute("CHECKCODE_SERVER");
if(checkcode_server == null || !checkcode_server.equalsIgnoreCase(check)){
ResultInfo info = new ResultInfo();
info.setFlag(false);
info.setErrorMsg("验证码错误");
//将info对象序列化为Json,返回客户端
//将json数据写回客户端
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(getJson(info));
return;
}
//获取用户名和密码
Map<String,String[]> map = request.getParameterMap();
//封装对象
User user = new User();
try {
BeanUtils.populate(user,map );
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//将密码转换成MD5加密，再后数据进行对比
String password = user.getPassword();
try {
user.setPassword(Md5Util.encodeByMd5(user.getUsername()+password));
System.out.println("MD5: "+Md5Util.encodeByMd5(user.getUsername()+password));
} catch (Exception e) {
e.printStackTrace();
}
//查询
UserService service = new UserServiceImpl();
User u = service.login(user);
//判断用户信息是否正确
ResultInfo info = new ResultInfo();
if(null == u){
info.setFlag(false);
info.setErrorMsg("用户名或密码错误");
}
if(null != u&& !"Y".equals(u.getStatus())){
//未激活
info.setFlag(false);
info.setErrorMsg("尚未激活，请激活后重新登录");
}
if(null != u &&"Y".equals(u.getStatus())){
//将user对象存进session
request.getSession().setAttribute("user",u);
info.setFlag(true);
}
//JSON格式
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(getJson(info));
}
登录后的用户名显示
未登录前
登录后
因为前后端分离，所以没法像之前那样通过session获得用户，这里依然使用Ajax向后台请求用户信息
$.get("user/findUser",{},function (data) {
var msg = "欢迎，"+data.username;
//显示登录后的div
$("#login").css('display','block');
//将登录前的div隐藏
$("#logout").css('display','none');
$("#name").html(msg);
});
后台代码
public void findUser(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//从session中获取登录用户
Object user = request.getSession().getAttribute("user");
//将user写回客户端
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(getJson(user));
}
这里额外记录一点，display属性把元素隐藏后，隐藏的元素不会占据位置，看不见也摸不着，而visibility属性把元素隐藏后，隐藏的元素还是会占据位置，看不见但摸得着
visibility:visible(显示)/hidden(隐藏)
display:none(隐藏)/show(显示)
退出
退出就会简单了，把用户信息从session中移除，删除session，然后重定向到登录页面即可
public void exit(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
HttpSession session = request.getSession();
session.removeAttribute("user");
session.invalidate();
response.sendRedirect(request.getContextPath()+"/login.html");
}
