前段时间看完javaweb的课程，跟着老师简单完成了一个书城项目，虽然简单，但是仍然踩了不少坑，因此做个总结，对这个web项目的逻辑，以及自己碰到的一些问题，做个小总结，也希望可以帮助到其他人（需项目资料的可以在评论区说明）：
一，表单校验：
静态页面 包括：首页，注册，注册成功，登录页面等
验证用户名，密码这些用到了正则表达式**
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会员注册页面</title>
<%--静态包含 base标签，css样式，jQuery--%>
<%@ include file="../common/head.jsp" %>
<style type="text/css">
.login_form{
height:420px;
margin-top: 25px;
}
</style>
<!-- 验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位-->
<!-- 验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位-->
<!-- 验证确认密码：和密码相同-->
<!-- 邮箱验证：xxxxx@xxx.com-->
<!-- 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。-->
<script type="text/javascript">
$(function(){
$("#sub_btn").click(function(){
var username = $("#username").val();
var usernamePatt = /^\w{5,12}$/;
if(!usernamePatt.test(username)){
$("span.errorMsg").html("用户名输入不合法");
return false;
}
//验证密码
var password = $("#password").val();
var passwordPatt = /^\w{5,12}$/;
if(!passwordPatt.test(password)){
$("span.errorMsg").html("密码输入不合法");
return false;
}
//验证密码输入是否相同
var repwd = $("#repwd").val();
if(password != repwd){
$("span.errorMsg").html("密码输入不一致");
return false;
}
//验证邮箱
var email = $("#email").val();
var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
if(!emailPatt.test(email)){
$("span.errorMsg").html("邮箱输入不合法");
return false;
}
$("span.errorMsg").html("");
//验证码
var code = $("#code").val();
//去除字符串的前后空格
code = $.trim(code);
if(code == "" || code == null){
$("span.errorMsg").html("验证码输入不合法");
return false;
}
//进行插入操作
});
});
</script>
</head>
<body>
<div id="login_header">
<img class="logo_img" alt="" src="static/img/logo.gif" >
</div>
<div class="login_banner">
<div id="l_content">
<span class="login_word">欢迎注册</span>
</div>
<div id="content">
<div class="login_form">
<div class="login_box">
<div class="tit">
<h1>注册尚硅谷会员</h1>
<span class="errorMsg">
<%=request.getAttribute("msg")==null?"":request.getAttribute("msg")%>
</span>
</div>
<div class="form">
<form action="userServlet" method="post">
<input type="hidden" name="action" value="regist"/>
<label>用户名称：</label>
<input class="itxt" type="text" placeholder="请输入用户名"
autocomplete="off" tabindex="1" name="username" id="username"
value="${requestScope.username}" />
<br />
<br />
<label>用户密码：</label>
<input class="itxt" type="password" placeholder="请输入密码"
autocomplete="off" tabindex="1" name="password" id="password" value="123456"/>
<br />
<br />
<label>确认密码：</label>
<input class="itxt" type="password" placeholder="确认密码"
autocomplete="off" tabindex="1" name="repwd" id="repwd" value="123456"/>
<br />
<br />
<label>电子邮件：</label>
<input class="itxt" type="text" placeholder="请输入邮箱地址"
autocomplete="off" tabindex="1" name="email" id="email"
value="${requestScope.email}" />
<br />
<br />
<label>验证码：</label>
<input class="itxt" type="text" style="width: 80px;" id="code" name="code"/>
<img id="code_img" src="kaptcha.jpg" style="float: right; margin-right: 40px;width:100px;height:28px">
<br />
<br />
<input type="submit" value="注册" id="sub_btn" />
</form>
</div>
</div>
</div>
</div>
</div>
<%--静态包含页脚内容--%>
<%@ include file="/pages/common/footer.jsp" %>
</body>
</html>
二，用户模块（user）
① 数据库表的创建，对应注册页面信息 数据库中创建了user表，代码这里就需要有一个user类
② 在pojo类下创建数据库对应的javabean 这里就是创建user类
③ 编写dao持久层（测试很重要）
BaseDao--->UserDao--->UserDaoimpl
BaseDao即对数据库的各种操作进行一个总的封装，即CRUD
UserDao即对这个类所需操作的一个抽象，一个接口供实现
UserDaoipml即继承BaseDao,实现UserDao
④ 编写Userservice ，service是业务层（测试很重要）
UserService--->UserServiceImpl 用于接收web端的操作，然后调用Dao层的方法实现
注：测试类的生成 鼠标点击类名（如UserDaoipml）-->右键（点击go to) -->点击test
这里把所有的测试类都放在一个pacakage下
⑤实现用户注册的功能 registServlet程序接受来自用户输入的信息
注：1>在web阶段，使用base+相对路径 ；在框架阶段，使用绝对路径 （这里完整路径是不包括src和web这一级的）
<!-- 写 base 标签，永远固定相对路径跳转的结果，因为整个项目都在book工程下，因此所有文件的起始路径都从book开始 -->
<base href="http://localhost:8080/book/">
2> 注意表单 之所以验证码输入完显示为null，是因为在html文件中没有写name=code标签
三，代码的优化
① 将所有html页面转换成jsp页面，尤其注意index.html也要转换
然后将不同页面中的公共部分进行抽取
② 表单回显问题，即如果输入信息有误，将其他信息仍然显示在页面上
③ 代码优化
1> 在实际开发中，一个模块一般由一个servlet程序来完成 隐藏域标签的作用
2> 利用反射实现用户模块多个功能的编写
反射通过action参数动态的调用登录或者注册的业务
protected void doPost(HttpServletRequest requset, HttpServletResponse response) throws ServletException, IOException {
// 解决post请求中文乱码问题
// 一定要在获取请求参数之前调用才有效
requset.setCharacterEncoding("UTF-8");
String action = requset.getParameter("action");
try {
// 获取action业务鉴别字符串，获取相应的业务 方法反射对象
Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
// System.out.println(method);
// 调用目标业务 方法
method.invoke(this, requset, response);
} catch (Exception e) {
e.printStackTrace();
}
}3>抽取baseServlet，使包括UserServlet在内的其他模块都继承于它
④ BeanUtils 将请求参数注入到javabean中 属于第三方的工具类 注意其中webUtil使用map value 泛型
1>导入需要的 jar 包：
commons-beanutils-1.8.0.jar
commons-logging-1.1.1.jar
2>调用populate()方法
populate(Object bean, Map<String,String[]>properties)
将Map数据封装到指定Javabean中，一般用于将表单的所有数据封装到javabean
使用前提：参数名称 需要和javabean的属性名称保持一致
⑤ 使用EL表达式替代JSP页面中的表达式脚本
四，图书模块（book）
代码基本逻辑同上述用户模块，主要说一些遇到的问题以及需要了解MVC的概念：
①添加图书数据库时，sqlyog编码集不一致导致出现问题，还有测试时中文乱码问题，具体解决措施可以参考以下博客（之前碰到，解决之后写的）
mysql出现1366错误时的解决方案_xy_fantasy的博客-CSDN博客
web项目出现中文乱码的解决措施_xy_fantasy的博客-CSDN博客
② 图书列表功能的实现
后台管理-->图书管理-->通过BookServlet查询-->转发到jsp页面，如下
protected void list(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1 通过BookService查询全部图书
List<Book> books = bookService.queryBooks();
//2 把全部图书保存到Request域中
req.setAttribute("books",books);
//3 请求转发到/pages/manager/book_manager.jsp页面
req.getRequestDispatcher("/pages/manager/book_manager.jsp").forward(req,resp);
}
遍历图书操作
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书管理</title>
<%--静态包含 base标签，css样式，jQuery--%>
<%@ include file="../common/head.jsp" %>
<script type="text/javascript">
$(function(){
// 给删除的a标签绑定单击事件，用于删除的确认提示操作
$("a.deleteClass").click(function(){
// 在事件的function函数中，有一个this对象。这个this对象，是当前正在响应事件的dom对象。
/**
* confirm是确认提示框函数
* 参数是它的提示内容
* 它有两个按钮，一个确认，一个是取消。
* 返回true表示点击了，确认，返回false表示点击取消。
*/
return confirm("你确定要删除【"+$(this).parent().parent().find("td:first").text()+"】");
// return false// 阻止元素的默认行为===不提交请求
});
});
</script>
</head>
<body>
<div id="header">
<img class="logo_img" alt="" src="static/img/logo.gif" >
<span class="wel_word">图书管理系统</span>
<%--静态包含manager管理模块的菜单--%>
<%@ include file="../common/manager_menu.jsp" %>
</div>
<div id="main">
<table>
<tr>
<td>名称</td>
<td>价格</td>
<td>作者</td>
<td>销量</td>
<td>库存</td>
<td colspan="2">操作</td>
</tr>
<c:forEach items="${requestScope.page.items}" var="book">
<tr>
<td>${book.name}</td>
<td>${book.price}</td>
<td>${book.author}</td>
<td>${book.sales}</td>
<td>${book.stock}</td>
<td><a href="manager/bookServlet?action=getBook&id=${book.id}&pageNo=${requestScope.page.pageNo}">修改</a></td>
<td><a class="deleteClass" href="manager/bookServlet?action=delete&id=${book.id}&pageNo=${requestScope.page.pageNo}">删除</a></td>
</tr>
</c:forEach>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="pages/manager/book_edit.jsp?pageNo=${requestScope.page.pageTotal}">添加图书</a></td>
</tr>
</table>
<%--静态包含分页条--%>
<%@include file="/pages/common/page_nav.jsp" %>
</div>
<%--静态包含页脚内容--%>
<%@ include file="../common/footer.jsp" %>
</body>
</html>
③ 在后台管理页面实现图书的添加，删除，修改等操作
添加
删除
注：book_edit.jsp页面，即要做添加操作，又要做修改操作。所以如何动态修改隐藏域<input type=“hidden” name=“action” value=“xxx” />让它的值即可以实现添加，又可以实现修改操作
④ 分页功能的实现
1>分页基本操作
2> 首页、上一页、下一页、末页和跳转到指定页面的实现
3> 分页模块中 ，页码处理
4> 修改分页后，增加，删除，修改图书信息的回显页面
5> 分页条的抽取（难点）
⑤ 显示登录名称
7357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
