JSP Servlet项目流程
学习笔记
注册
一、Register.html页面
1.页面显示
- 错误信息和输入框
<div id="error_msg" style="color: red;text-align: center"></div>
<!--注册表单-->
<form id="registerForm" action="user">
<!--提交处理请求的标识符-->
<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>
</table>
</form>
2.表单校验和异步提交表单
- 按下提交按钮，则会给form表单的路径提交数据
<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>
- 导入js/jquery文件
<script src="js/jquery-3.3.1.js"></script>
- 当表单提交或输入框失去焦点时进行数据格式校验
$("#registerForm").submit(function () {返回false则阻止提交}
function checkUsername() {
//获取用户名内容
var usernameVal = $("#username").val();
//定义正则表达式
var reg_username=/^\w{8,20}$/;
var flag = reg_username.test(usernameVal);
if (!flag){
$("#username").css("border","1px solid red");
}else {
$("#username").css("border","");
}
return flag;
}
$(function () {
$("#registerForm").submit(function () {
if (checkUsername()){
//发送ajax请求//发送数据到服务器
// 将填写的数据封装成键值对传送过去
// 回调函数（获取服务器响应的数据）
$.post("registUserServlet",$(this).serialize(),function (data) {
//处理服务器响应的数据
if (data.flag){
//注册成功
location.href="register_ok.html"
}else {
//提交但注册失败了 给error_msg添加提示信息
$("#error_msg").html(data.errorMsg);
}
});
}
return false;//不提交
});
$("#username").blur(checkUsername);
})
3.验证码
<tr>
<td class="td_left">
<label for="check">验证码</label>
</td>
<td class="td_right check">
<input type="text" id="check" name="check" class="check">
//checkCode为复制的Servlet
<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>
二、RegisterServlet实现
1.校验验证码
//获取用户输入的验证码
String check = request.getParameter("check");
//从session中获取验证码
HttpSession session=request.getSession();
String checkcode_server = (String)session.getAttribute("CHECKCODE_SERVER");
session.removeAttribute("CHECKCODE_SERVER"); //保证验证码只使用一次
ResultInfo info=new ResultInfo();
if (checkcode_server==null||!checkcode_server.equalsIgnoreCase(check)){
//验证码错误
info.setFlag(false);
info.setErrorMsg("验证码错误");
}
2.获取表单数据，封装成User对象
//获取数据
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();
}
3.调用service完成注册
UserService service = new UserServiceImpl();
boolean flag = service.regist(user);
//domain包下的类对象
ResultInfo info = new ResultInfo();
//4.响应结果
if(flag){
//注册成功
info.setFlag(true);
}else{
//注册失败
info.setFlag(false);
info.setErrorMsg("注册失败!");
}
4.将ResultInfo发送到用户界面显示
//将info对象序列化为json json的核心对象是ObjectMapper
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(info);
//将json数据写回客户端
//设置content-type
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(json);
三、service和dao实现
1.service层
- 查询用户是否存在，若不存在则创建对象，并存入一个唯一字符串
//1.根据用户名查询用户对象
User u = userDao.findByUsername(user.getUsername());
//判断u是否为null
if(u != null){
//用户名存在，注册失败
return false;
}
//2.保存用户信息
//2.1设置激活码，唯一字符串
user.setCode(UuidUtil.getUuid());
//2.2设置激活状态
user.setStatus("N");
userDao.save(user);
- 发送激活邮件 通过MailUtils，传入收件人信息，发送内容和标题
- 邮件正文是一个超链接
//3.激活邮件发送，邮件正文？
String content="<a href='http://localhost/travel/user/active?code="+user.getCode()+"'>点击激活【黑马旅游网】</a>";
MailUtils.sendMail(user.getEmail(),content,"激活邮件");
return true;
2.dao层
- 创建template对象
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
- 查询用户是否存在
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 (Exception e) {}
return user;
}
- 保存用户信息
public void save(User user) {
//1.定义sql
String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email,status,code) values(?,?,?,?,?,?,?,?,?)";
//2.执行sql
template.update(sql,user.getUsername(),
user.getPassword(),
user.getName(),
user.getBirthday(),
user.getSex(),
user.getTelephone(),
user.getEmail(),
user.getStatus(),
user.getCode()
);
}
四、流程
登录
一、Login.html页面
1.登录按钮
<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>
2.登录按钮绑定单击事件
$(function () {
//1.给登录按钮绑定单击事件
$("#btn_sub").click(function () {
//2.发送ajax请求，提交表单数据
$.post("user/login",$("#loginForm").serialize(),function (data) {
//data : {flag:false,errorMsg:''}
if(data.flag){
//登录成功
location.href="index.html";
}else{
//登录失败
$("#errorMsg").html(data.errorMsg);
}
});
});
});
3.header.html页面中用户姓名提示信息功能
//查询用户信息
$.get("user/findOne",{},function (data) {
//{uid:1,name:'李四'}
var msg = "欢迎回来，"+data.name;
$("#span_username").html(msg);
});
- findOne方法
//从session中获取登录用户
Object user = request.getSession().getAttribute("user");
//将user写回客户端
/* ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
mapper.writeValue(response.getOutputStream(),user);*/
writeValue(user,response);
4.退出
- 点击退出按钮跳转到
<a href="javascript:location.href='exitServlet';">退出</a>
- exitServlet
//1.销毁session
request.getSession().invalidate();
//2.跳转登录页面
response.sendRedirect(request.getContextPath()+"/login.html");
二、LoginServlet（整合到JavaBean中）
#####1.获取用户名和密码验证信息
//1.获取用户名和密码数据
Map<String, String[]> map = request.getParameterMap();
//2.封装User对象
User user = new User();
try {
BeanUtils.populate(user,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
2.调用Service完成查询
- 若登录成功则将user存入session中
// UserService service = new UserServiceImpl();
User u = service.login(user);
ResultInfo info = new ResultInfo();
//4.判断用户对象是否为null
if(u == null){
//用户名密码或错误
info.setFlag(false);
info.setErrorMsg("用户名密码或错误");
}
//5.判断用户是否激活
if(u != null && !"Y".equals(u.getStatus())){
//用户尚未激活
info.setFlag(false);
info.setErrorMsg("您尚未激活，请激活");
}
//6.判断登录成功
if(u != null && "Y".equals(u.getStatus())){
request.getSession().setAttribute("user",u);//登录成功标记
//登录成功
info.setFlag(true);
}
- 响应数据，写回到客户端界面
//响应数据
ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
mapper.writeValue(response.getOutputStream(),info);
三、service和dao实现
1.dao层
User user = null;
try {
//1.定义sql
String sql = "select * from tab_user where username = ? and password = ?";
//2.执行sql
user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username,password);
} catch (Exception e) {
}
return user;
四、流程图
补充：优化Servlet
-
创建一个BaseServlet实现HttpServlet，然后让其他Servlet都继承BaseServlet
-
在UserServlet中
@WebServlet("/user/*") // /user/add /user/find
public class UserServlet extends BaseServlet {}
- 在BaseServlet中通过反射创建对象
public class BaseServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//完成方法分发
//1.获取请求路径
String uri = req.getRequestURI(); // /travel/user/add
System.out.println("请求uri:"+uri);// /travel/user/add
//2.获取方法名称
String methodName = uri.substring(uri.lastIndexOf('/') + 1);
System.out.println("方法名称："+methodName);
//3.获取方法对象Method
//谁调用我？我代表谁
System.out.println(this);//UserServlet的对象cn.itcast.travel.web.servlet.UserServlet@4903d97e
try {
//获取方法
Method method = this.getClass().getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
//4.执行方法
//暴力反射
//method.setAccessible(true);
method.invoke(this,req,resp);
} catch (NoSuchMethodException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
- 经常使用将数据写回客户端的方法，可以在这里进行封装
- public方法，子类可以直接使用
//直接将传入的对象序列化为json，并且写回客户端
public void writeValue(Object obj,HttpServletResponse response) throws IOException {
ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
mapper.writeValue(response.getOutputStream(),obj);
}
//将传入的对象序列化为json，返回
public String writeValueAsString(Object obj) throws JsonProcessingException {
ObjectMapper mapper = new ObjectMapper();
return mapper.writeValueAsString(obj);
}
##分类数据展示
一、header.html
1.ajax获取数据
$.get("category/findAll",{},function (data) {
//[{cid:1,cname:国内游},{},{}]
var lis = '<li class="nav-active"><a href="index.html">首页</a></li>';
//遍历数组,拼接字符串(<li>)
for (var i = 0; i < data.length; i++) {
var li = '<li><a href="route_list.html?cid='+data[i].cid+'">'+data[i].cname+'</a></li>';
lis += li;
}
//将lis字符串，设置到ul的html内容中
$("#category").html(lis);
body部分:
<ul id="category" class="nav"></ul>
二、CategoryServlet
//1.调用service查询所有
List<Category> cs = service.findAll();
//2.序列化json返回
/* ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
mapper.writeValue(response.getOutputStream(),cs);*/
writeValue(cs,response);
三、service和dao
1.dao层
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
@Override
public List<Category> findAll() {
String sql = "select * from tab_category ";
return template.query(sql,new BeanPropertyRowMapper<Category>(Category.class));
}
2.service层
- 从redis中查询是否已经保存，查到的数据保存到categorys中
- 不仅要查询值，还要查询分数 Tuple封装了分数和值
//1.从redis中查询
//1.1获取jedis客户端
Jedis jedis = JedisUtil.getJedis();
//1.2可使用sortedset排序查询
//Set<String> categorys = jedis.zrange("category", 0, -1);
//1.3查询sortedset中的分数(cid)和值(cname)
Set<Tuple> categorys = jedis.zrangeWithScores("category", 0, -1);
- redis为空 则从数据库查询然后保存到redis中 否则从redis中查询
List<Category> cs = null;
//2.判断查询的集合是否为空
if (categorys == null || categorys.size() == 0) {
System.out.println("从数据库查询....");
//3.如果为空,需要从数据库查询,在将数据存入redis
//3.1 从数据库查询
cs = categoryDao.findAll();
//3.2 将集合数据存储到redis中的 category的key
for (int i = 0; i < cs.size(); i++) {
//键，分数，值
jedis.zadd("category", cs.get(i).getCid(), cs.get(i).getCname());
}
} else {
System.out.println("从redis中查询.....");
//4.如果不为空,将set的数据存入list
cs = new ArrayList<Category>();
for (Tuple tuple : categorys) {
Category category = new Category();
category.setCname(tuple.getElement());
category.setCid((int)tuple.getScore());
cs.add(category);
}
四、流程图
分页展示
一、route_list.html页面
1.location.search拿到 “？”后的信息 传递给servlet
$(function () {
var search = location.search;
//alert(search);//?id=5
// 切割字符串，拿到第二个值
var cid = search.split("=")[1];
//当页码加载完成后，调用load方法，发送ajax请求加载数据
load(cid); //load是个function（内容特别多）
});
2.load（cid） ；函数
- 发送ajax请求，请求route/pageQuery,传递cid
$.get("route/pageQuery",{cid:cid,currentPage:currentPage},function (pb) {
整个流程
}
- 解析pagebean数据，展示到页面上
- 分页工具条数据展示
//1.1 展示总页码和总记录数
$("#totalPage").html(pb.totalPage);
$("#totalCount").html(pb.totalCount);
//展示分页工具条
var lis = "";
var fristPage = '<li οnclick="javascipt:load('+cid+')"><a href="javascript:void(0)">首页</a></li>';
//计算上一页的页码
var beforeNum = pb.currentPage - 1;
if(beforeNum <= 0){
beforeNum = 1;
}
var beforePage = '<li οnclick="javascipt:load('+cid+','+beforeNum+')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
lis += fristPage;
lis += beforePage;
//1.2 展示分页页码
/*
1.一共展示10个页码，能够达到前5后4的效果
2.如果前边不够5个，后边补齐10个
3.如果后边不足4个，前边补齐10个
*/
// 定义开始位置begin,结束位置 end
var begin; // 开始位置
var end ; // 结束位置
//1.要显示10个页码
if(pb.totalPage < 10){
//总页码不够10页
begin = 1;
end = pb.totalPage;
}else{
//总页码超过10页
begin = pb.currentPage - 5 ;
end = pb.currentPage + 4 ;
//2.如果前边不够5个，后边补齐10个
if(begin < 1){
begin = 1;
end = begin + 9;
}
//3.如果后边不足4个，前边补齐10个
if(end > pb.totalPage){
end = pb.totalPage;
begin = end - 9 ;
}
}
for (var i = begin; i <= end ; i++) {
var li;
//判断当前页码是否等于i
if(pb.currentPage == i){
li = '<li class="curPage" οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
}else{
//创建页码的li
li = '<li οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
}
//拼接字符串
lis += li;
}
/* for (var i = 1; i <= pb.totalPage ; i++) {
var li;
//判断当前页码是否等于i
if(pb.currentPage == i){
li = '<li class="curPage" οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
}else{
//创建页码的li
li = '<li οnclick="javascipt:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
}
//拼接字符串
lis += li;
}*/
var lastPage = '<li class="threeword"><a href="javascript:;">末页</a></li>';
var nextPage = '<li class="threeword"><a href="javascript:;">下一页</a></li>';
lis += nextPage;
lis += lastPage;
//将lis内容设置到 ul
$("#pageNum").html(lis);
- 列表数据展示
//2.列表数据展示
var route_lis = "";
for (var i = 0; i < pb.list.length; i++) {
//获取{rid:1,rname:"xxx"}
var route = pb.list[i];
var li = '<li>\n' +
' <div class="img"><img src="'+route.rimage+'" style="width: 299px;"></div>\n' +
' <div class="text1">\n' +
' <p>'+route.rname+'</p>\n' +
' <br/>\n' +
' <p>'+route.routeIntroduce+'</p>\n' +
' </div>\n' +
' <div class="price">\n' +
' <p class="price_num">\n' +
' <span>¥</span>\n' +
' <span>'+route.price+'</span>\n' +
' <span>起</span>\n' +
' </p>\n' +
' <p><a href="route_detail.html">查看详情</a></p>\n' +
' </div>\n' +
' </li>';
route_lis += li;
}
$("#route").html(route_lis);
二、RouteServlet
1.接受ajax传过来的参数
String currentPageStr = request.getParameter("currentPage");
String pageSizeStr = request.getParameter("pageSize");
String cidStr = request.getParameter("cid");
2.处理参数，把页码，显示条数传到service层
int cid = 0;//类别id
if(cidStr != null && cidStr.length() > 0){
cid = Integer.parseInt(cidStr);
}
int currentPage = 0;//当前页码，如果不传递，则默认为第一页
if(currentPageStr != null && currentPageStr.length() > 0){
currentPage = Integer.parseInt(currentPageStr);
}else{
currentPage = 1;
}
int pageSize = 0;//每页显示条数，如果不传递，默认每页显示5条记录
if(pageSizeStr != null && pageSizeStr.length() > 0){
pageSize = Integer.parseInt(pageSizeStr);
}else{
pageSize = 5;
}
3.调用service，返回pageBean数据，这些数据就是要展示的信息
//3. 调用service查询PageBean对象
PageBean<Route> pb = routeService.pageQuery(cid, currentPage, pageSize);
//4. 将pageBean对象序列化为json，返回
writeValue(pb,response);
三、service、dao和javabean
1.创建bean对象
- 创建PageBean对象
private int totalCount;//总记录数
private int totalPage;//总页数
private int currentPage;//当前页码
private int pageSize;//每页显示的条数
private List<T> list;//每页显示的数据集合
- 创建Route对象
private int rid;//线路id，必输
private String rname;//线路名称，必输
private double price;//价格，必输
private String routeIntroduce;//线路介绍
private String rflag; //是否上架，必输，0代表没有上架，1代表是上架
private String rdate; //上架时间
private String isThemeTour;//是否主题旅游，必输，0代表不是，1代表是
private int count;//收藏数量
private int cid;//所属分类，必输
private String rimage;//缩略图
private int sid;//所属商家
private String sourceId;//抓取数据的来源id
private Category category;//所属分类 分类id 分类名称
private Seller seller;//所属商家 id 名称 电话 地址
private List<RouteImg> routeImgList;//商品详情图片列表
- 创建RouteImg对象
private int rgid;//商品图片id
private int rid;//旅游商品id
private String bigPic;//详情商品大图
private String smallPic;//详情商品小图
2.RouteDao
- 根据cid查询总记录数
public int findTotalCount(int cid) {
String sql = "select count(*) from tab_route where cid = ?";
return template.queryForObject(sql,Integer.class,cid);
}
- 根据cid，start，pageSize查询当前页的数据集合
public List<Route> findByPage(int cid, int start, int pageSize) {
String sql = "select * from tab_route where cid = ? limit ? , ?";
return template.query(sql,new BeanPropertyRowMapper<Route>(Route.class),cid,start,pageSize);
}
3.RouteService
- 封装成pageBean然后返回
//封装PageBean
PageBean<Route> pb = new PageBean<Route>();
//设置当前页码
pb.setCurrentPage(currentPage);
//设置每页显示条数
pb.setPageSize(pageSize);
//设置总记录数
int totalCount = routeDao.findTotalCount(cid);
pb.setTotalCount(totalCount);
//设置当前页显示的数据集合
int start = (currentPage - 1) * pageSize;//开始的记录数
List<Route> list = routeDao.findByPage(cid,start,pageSize);
pb.setList(list);
//设置总页数 = 总记录数/每页显示条数
int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize :(totalCount / pageSize) + 1 ;
pb.setTotalPage(totalPage);
return pb;
四、流程图
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
