新手上路:旅游网案例(上)
作者:互联网
完成工作:旅游网的后端和前端的请求代码编写
主要技术:ajax+三层架构+druid连接池+maven+redis+jquery
一、环境搭建
(一)搭建maven环境
(二)导入准备好的travel项目资源
二、创建数据库表单
CREATE DATABASE travel;
-- 使用数据库
USE travel;
-- 创建表
+
-- maven/resources/travel.sql
三、登录相关功能的实现
1、注册
(1)表单校验
<!--js代码-->
<script>
//校验用户名
function checkUsername() {
//获取用户名的值
var username = $("#username").val();
//定义正则表达式(单词字符8-20位)
var reg_username = /^\w{8,20}$/;
//判断用户名是否符合规范,返回值为boolean类型
var flag = reg_username.test(username);
//利用flag进行判断符合与否,并给出提示信息
if (flag) {
//合法把边框变为绿色
$("#username").css("border", "1px solid green");
} else {
//不合法把边框变为红色
$("#username").css("border", "1px solid red");
}
//返回用户规范的boolean值
return flag;
}
//校验密码
function checkPassword() {
//获取密码的值
var password = $("#password").val();
//定义正则表达式(单词字符8-20位)
var reg_password = /^\w{8,20}$/;
//判断密码是否符合规范,返回值为boolean类型
var flag = reg_password.test(password);
//利用flag进行判断符合与否,并给出提示信息
if (flag) {
//合法把边框变为绿色
$("#password").css("border", "1px solid green");
} else {
//不合法把边框变为红色
$("#password").css("border", "1px solid red");
}
//返回用户规范的boolean值
return flag;
}
//校验邮箱
function checkEmail() {
//获取邮箱的值
var email = $("#email").val();
//定义正则表达式(邮箱规范)
var reg_email = /^\w+@\w+\.\w+$/;
//判断邮箱是否符合规范,返回值为boolean类型
var flag = reg_email.test(email);
//利用flag进行判断符合与否,并给出提示信息
if (flag) {
//合法把边框变为绿色
$("#email").css("border", "1px solid green");
} else {
//不合法把边框变为红色
$("#email").css("border", "1px solid red");
}
//返回用户规范的boolean值
return flag;
}
//校验姓名
function checkName() {
//获取邮箱的值
var name = $("#name").val();
//定义正则表达式(非空)
var reg_name = /\S/;
//判断姓名是否符合规范,返回值为boolean类型
var flag = reg_name.test(name);
//利用flag进行判断符合与否,并给出提示信息
if (flag) {
//合法把边框变为绿色
$("#name").css("border", "1px solid green");
} else {
//不合法把边框变为红色
$("#name").css("border", "1px solid red");
}
//返回用户规范的boolean值
return flag;
}
//校验手机号
function checkTelephone() {
//获取手机号的值
var telephone = $("#telephone").val();
//定义正则表达式(手机号规范)
var reg_telephone = /^1[3546789][0-9]{9}$/;
//判断手机号是否符合规范,返回值为boolean类型
var flag = reg_telephone.test(telephone);
//利用flag进行判断符合与否,并给出提示信息
if (flag) {
//合法把边框变为绿色
$("#telephone").css("border", "1px solid green");
} else {
// 不合法把边框变为红色
$("#telephone").css("border", "1px solid red");
}
//返回用户规范的boolean值
return flag;
}
//校验出生日期
function checkBirthday() {
//获取出生日期的值
var birthday = $("#birthday").val();
//定义正则表达式(非空)
var reg_birthday = /\S/;
//判断出生日期是否符合规范,返回值为boolean类型
var flag = reg_birthday.test(birthday);
//利用flag进行判断符合与否,并给出提示信息
if (flag) {
//合法把边框变为绿色
$("#birthday").css("border", "1px solid green");
} else {
$("#birthday").css("border", "1px solid red");
}
//返回用户规范的boolean值
return flag;
}
//校验验证码
function check() {
//获取验证码的值
var check = $("#check").val();
//定义正则表达式(非空)
var reg_check = /\S/;
//判断验证码是否符合规范,返回值为boolean类型
var flag = reg_check.test(check);
//利用flag进行判断符合与否,并给出提示信息
if (flag) {
//合法把边框变为绿色
$("#check").css("border", "1px solid green");
} else {
// 不合法把边框变为红色
$("#check").css("border", "1px solid red");
}
//返回用户规范的boolean值
return flag;
}
//入口函数
$(function () {
//当表单提交时调用所有的校验方法
$("#registerForm").submit(function () {
//当表单提交时调用所有的校验方法
$("#registerForm").submit(function () {
//获取所有表单的返回值
var formAll = checkUsername() && checkPassword() && checkEmail() && checkName()
&& checkTelephone() && checkBirthday() && check();
//如果校验通过(返回值为true),则发送ajax请求,提交表单数据
if (formAll) {
$.post("regisUserServlet", $(this).serialize(), function (data) {
})
}
//跳转页面(异步发送数据,不进行action的同步提交操作)
return false;
})
//利用离焦事件,调用相应的校验方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
$("#name").blur(checkName);
$("#telephone").blur(checkTelephone);
$("#birthday").blur(checkBirthday);
$("#check").blur(check);
})
</script>
servlet
public class RegistUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//①利用request方法获取数据
Map<String, String[]> map = request.getParameterMap();
//②封装User对象
//调用user对象
User user = new User();
try {
//调用BeanUtils的静态方法把map封装到user对象
BeanUtils.populate(user, map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//③调用service层
UserServlet service = new UserServletImpl();
//调用service的方法完成注册
boolean flag = service.regist(user);
//④响应结果
//调用ResultInfo对象对返回数据的结果进行封装
ResultInfo info = new ResultInfo();
if (flag) {
//注册成功
info.setFlag(true);
} else {
//注册失败
info.setFlag(false);
//封装提示信息
info.setErrorMsg("该用户名已存在!");
}
//将ResultInfo对象序列化为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);
}
}
service
public class UserServletImpl implements UserService {
//声明UserDao对象
private UserDao userDao=new UserDaoImpl();
@Override
public boolean regist(User user) {
//根据用户名查询用户对象
User u=userDao.findByUsername(user.getUsername());
//判断u是否为null
if(u!=null){
//如果用户名不为空,则用户名已存在,注册失败,返回false
return false;
}
//存在就保存用户信息
userDao.save(user);
return true;
}
}
dao
//声明数据库连接池工具类
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public User findByUsername(String username) {
//定义sql
String sql = "select * from tab_user where username=?";
//调用工具类执行sql
User user = template.queryForObject(sql, new BeanPropertyRowMapper<>(User.class), username);
//返回user对象
return user;
}
/**
* @Description: 用户保存
* @Author: Mr.Night
*/
@Override
public void save(User user) {
//定义sql
String sql = "insert into user(username,password,name,birthday,sex,telephone,email) " +
"values(?,?,?,?,?,?,?)";
//执行sql
template.update(sql, user.getUsername(),
user.getPassword(),
user.getName(),
user.getBirthday(),
user.getSex(),
user.getTelephone(),
user.getEmail());
}
(2)验证码处理
servlet
//验证码校验
String check = request.getParameter("check");
//从sesion中获取验证码
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对象对返 回数据的结果进行封装
ResultInfo info = new ResultInfo();
//注册失败
info.setFlag(false);
//提示信息
info.setErrorMsg("验证码有误!");
//将ResultInfo对象序列化为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;
}
js
$(function () {
//当表单提交时调用所有的校验方法
$("#registerForm").submit(function () {
//获取所有表单的返回值
var formAll = checkUsername() && checkPassword() && checkEmail() && checkName()
&& checkTelephone() && checkBirthday() && check();
//发送数据到服务器
if (formAll) {
//如果校验通过(返回值为true),则发送ajax请求,提交表单数据
$.post("registUserServlet", $(this).serialize(), function (data) {
//处理服务器响应的数据
if (data.flag) {
//注册成功,跳转页面
location.href = "register_ok.html";
} else {
//注册失败,给前端页面添加提示信息
$("#errorMsg").html(data.errorMsg);
}
})
}
//跳转页面(异步发送数据,不进行action的同步提交操作)
return false;
})
//利用离焦事件,调用相应的校验方法
$("#username").blur(checkUsername);
$("#password").blur(checkPassword);
$("#email").blur(checkEmail);
$("#name").blur(checkName);
$("#telephone").blur(checkTelephone);
$("#birthday").blur(checkBirthday);
$("#check").blur(check);
})
service
//设置激活码,字符串唯一,唯一激活码可以使用Uuidutil工具类的getUuid进行生成
user.setCode(UuidUtil.getUuid());
//设置激活码状态为N
user.setStatus("N");
//编写邮件地址
String content = "<a href='http://localhost/travel/activeUserServlet?code="
+ user.getCode() + "'>点击激活【旅游网】</a>";
//设置随机数修改邮件名字
int num = (int) (Math.random() + 1000);
//使用MaiUtils工具类的sendMail方法发送邮件
MailUtils.sendMail(user.getEmail(), content, "激活邮件"+num);
dao
@Override
public void save(User user) {
//定义sql
String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email,status,code) " +
"values(?,?,?,?,?,?,?,?,?)";
//执行sql
template.update(sql, user.getUsername(),
user.getPassword(),
user.getName(),
user.getBirthday(),
user.getSex(),
user.getTelephone(),
user.getEmail(),
user.getStatus(),
user.getCode()
);
}
}
(3)邮件激活
servlet
public class ActiveUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取激活码
String code = request.getParameter("code");
//判断激活码是否存在
if (code != null) {
//激活码存在
//调用service的方法完成激活
UserServlet service = new UserServletImpl();
//声明提示信息
String msg = null;
//激活用户是否成功,用boolean接收
boolean flag = service.active(code);
if (flag) {
//激活成功,显示提示信息并可以跳转到登录页面
msg = "激活成功,请<a href='login.html'>登录</a>";
} else {
//激活失败,显示提示信息
msg = "激活失败,请联系管理员!";
}
//设置content-type防止乱码
response.setContentType("text/html;charset=utf-8");
//将数据写回客户端页面
response.getWriter().write(msg);
}
}
service
@Override
public boolean active(String code) {
//调用dao方法根据激活码查询用户对象
User user = userDao.findByCode(code);
//查询用户是否存在
if (user != null) {
//存在
//调用dao方法修改激活状态
userDao.updateStatus(user);
//返回true,响应servlet
return true;
} else {
//不存在
//返回false,响应servlet
return false;
}
}
dao
@Override
public User findByCode(String code) {
//声明user
User user = null;
try {
//定义sql
String sql = "select * from tab_user where code=?";
//调用工具类方法执行sql
user = template.queryForObject(sql, new BeanPropertyRowMapper<>(User.class), code);
} catch (DataAccessException e) {
e.printStackTrace();
}
//返回user对象
return user;
}
@Override
public void updateStatus(User user) {
//定义sql
String sql = "update tab_user set status='Y' where uid=?";
//调用工具类执行sql修改语句
template.update(sql, user.getUid());
}
}
2、登录
后端
//servlet
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取用户名和密码
Map<String, String[]> map = request.getParameterMap();
//封装user对象
User user = new User();
try {
//调用BeanUtils的静态方法把map封装进user对象
BeanUtils.populate(user, map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//调用service
UserServlet service = new UserServletImpl();
//使用service方法进行查询
User u = service.login(user);
//调用ResultInfo工具类对返回数据结果进行封装
ResultInfo info = new ResultInfo();
//判断对象是否为null
if (u == null) {
//用户名或密码错误,调用info方法
//登录失败
info.setFlag(false);
//提示信息
info.setErrorMsg("用户名或密码错误");
}
//判断用户是否激活
if (u != null && "N".equals(u.getStatus())) {
//用户尚未激活
//登录失败
info.setFlag(false);
//提示信息
info.setErrorMsg("您尚未激活,请先激活!");
}
//判断用户是否登录成功
if (u != null && "Y".equals(u.getStatus())) {
//满足if,则登录成功
info.setFlag(true);
}
//响应数据
ObjectMapper mapper = new ObjectMapper();
//设置Content-type
response.setContentType("application/json;charset=utf-8");
//将数据写会客户端
mapper.writeValue(response.getOutputStream(), info);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
//service
@Override
public User login(User user) {
//返回dao层查询方法,响应servlet
return userDao.findByUsernameAndPassword(user.getUsername(),user.getPassword());
}
}
//dao
@Override
public User findByUsernameAndPassword(String username, String password) {
//声明user
User user = null;
try {
//定义sql,编写查询语句
String sql = "select * from tab_user where username=? and password=?";
//执行sql
user=template.queryForObject(sql,new BeanPropertyRowMapper<>(User.class),
username,password);
} catch (Exception e) {
}
return user;
}
前端
<script>
$(function () {
//给登录按钮绑定单机事件
$("#btn_sub").click(function () {
//发送ajax请求,提交表单数据
$.post("loginServlet", $("#loginForm").serialize(), function (data) {
if (data.flag) {
//登录成功,跳转到主页
location.href = "index.html";
} else {
//登录失败,显示错误信息
$("#errorMsg").html(data.errorMsg);
}
})
})
});
</script>
3、退出
@WebServlet("/exitServlet")
public class ExitServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//销毁session数据
request.getSession().invalidate();
//重定向跳转到登录页面
response.sendRedirect(request.getContextPath() + "/login.html");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
标签:手上,旅游网,案例,flag,user,sql,var,response,User 来源: https://blog.csdn.net/NightNorth/article/details/117248646