开发一个JavaWeb项目需要学习的技术很多，通过练习NineSquareDiary这个项目熟悉Java+JSP+MySql+Ajax+HTML5+JS+(DIV+CSS)等。开发环境是Eclipse与Tomcat v9.0
先看主要部分截图：
screen1.png
screen2.png
screen3.png
环境配置：
1.Tomcat服务器配置关联项目；
2.jstl下载放在lib文件夹下，包括jstl-api-1.2.jar和jstl-impl-1.2.jar。
3、MySql配置。创建数据库db_9griddiary，里面包含两张表tb_diary与tb_user.对应的字段如下图。
screen4.png
首页主要代码：
1.首页右边导航的JSP代码如下：
<div id="navigation">
<div style="float:left;color:#006700;">
<c:if test="${!empty sessionScope.userName}">
<b> 》 欢迎 ${sessionScope.userName} 登录九宫格日记网！</b>
</c:if>
<c:if test="${empty sessionScope.userName}">
<b> 》 欢迎光临九宫格日记网！</b>
</c:if>
</div>
<div style="float:right;text-align: right;">
<a href="DiaryServlet?action=listAllDiary">首页</a>
<c:if test="${empty sessionScope.userName}">
| <a href="#" onClick="Myopen('login')">登录</a>
| <a href="#" onClick="Regopen('register')">注册</a>
| <a href="forgetPwd_1.jsp">找回密码</a>
</c:if>
<c:if test="${!empty sessionScope.userName}">
| <a href="DiaryServlet?action=listMyDiary">我的日记</a>
| <a href="writeDiary.jsp">写九宫格日记</a>
| <a href="UserServlet?action=exit">退出登录</a>
</c:if>
</div>
</div>
2.处理登陆功能的js代码：
function Myopen(divID){ //根据传递的参数确定显示的层
var notClickDiv=document.getElementById("notClickDiv"); //获取id为notClickDiv的层
notClickDiv.style.display='block'; //设置层显示
document.getElementById("notClickDiv").style.width=document.body.clientWidth;
document.getElementById("notClickDiv").style.height=document.body.clientHeight;
document.getElementById(divID).style.display='block'; //设置由divID所指定的层显示
document.getElementById(divID).style.left=(document.body.clientWidth-240)/2; //设置由divID所指定的层的左边距
document.getElementById(divID).style.top=(document.body.clientHeight-139)/2; //设置由divID所指定的层的顶边框
}
function loginSubmit(form2){
if(form2.username.value==""){ //验证用户名是否为空
alert("请输入用户名！");form2.username.focus();return false;
}
if(form2.pwd.value==""){ //验证密码是否为空
alert("请输入密码！");form2.pwd.focus();return false;
}
var param="username="+form2.username.value+"&pwd="+form2.pwd.value; //将登录信息连接成字符串，作为发送请求的参数
var loader=new net.AjaxRequest("UserServlet?action=login",deal_login,onerror,"POST",encodeURI(param));
}
function onerror(){
alert("您的操作有误");
}
function deal_login(){
/*****************显示提示信息******************************/
var h=this.req.responseText;
h=h.replace(/\s/g,""); //去除字符串中的Unicode空白
alert(h);
if(h=="登录成功！"){
window.location.href="DiaryServlet?action=listAllDiary";
}else{
form2.username.value="";//清空用户名文本框
form2.pwd.value="";//清空密码文本框
form2.username.focus();//让用户名文本框获得焦点
}
}
3.在UserServlet中用Servlet处理登陆请求的Java代码
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
String action = request.getParameter("action");
if ("login".equals(action)) { // 用户登录
this.login(request, response);
} else if ("exit".equals(action)) {// 用户退出
this.exit(request, response);
} else if ("save".equals(action)) { // 保存用户注册信息
this.save(request, response);
} else if ("getProvince".equals(action)) { // 获取省份信息
this.getProvince(request, response);
} else if ("getCity".equals(action)) { // 获取市县信息
this.getCity(request, response);
} else if ("checkUser".equals(action)) {// 检测用户名是否存在
this.checkUser(request, response);
} else if ("forgetPwd1".equals(action)) { // 找回密码第一步
this.forgetPwd1(request, response);
} else if ("forgetPwd2".equals(action)) { // 找回密码第二步
this.forgetPwd2(request, response);
}
}
/**
* 功能：用户登录
*
* @param request
* @param response
* @throws ServletException
* @throws IOException
*/
private void login(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
User f = new User();
f.setUsername(request.getParameter("username")); // 获取并设置用户名
f.setPwd(request.getParameter("pwd")); // 获取并设置密码
int r = userDao.login(f);
if (r > 0) {// 当用户登录成功时
HttpSession session = request.getSession();
session.setAttribute("userName", f.getUsername());// 保存用户名
session.setAttribute("uid", r);// 保存用户ID
request.setAttribute("returnValue", "登录成功！");// 保存提示信息
request.getRequestDispatcher("userMessage.jsp").forward(request,
response);// 重定向页面
} else {// 当用户登录不成功时
request.setAttribute("returnValue", "您输入的用户名或密码错误，请重新输入！");
request.getRequestDispatcher("userMessage.jsp").forward(request,
response);// 重定向页面
}
}
4.在UserDao中处理登陆功能查询数据库的java代码
public int login(User user) {
int flag = 0;
String sql = "SELECT * FROM tb_user where userName='"
+ user.getUsername() + "'";
ResultSet rs = conn.executeQuery(sql);// 执行SQL语句
try {
if (rs.next()) {
String pwd = user.getPwd();// 获取密码
int uid = rs.getInt(1);// 获取第一列的数据
if (pwd.equals(rs.getString(3))) {
flag = uid;
rs.last(); // 定位到最后一条记录
int rowSum = rs.getRow();// 获取记录总数
rs.first();// 定位到第一条记录
if (rowSum != 1) {
flag = 0;
}
} else {
flag = 0;
}
} else {
flag = 0;
}
} catch (SQLException ex) {
ex.printStackTrace();// 输出异常信息
flag = 0;
} finally {
conn.close();// 关闭数据库连接
}
return flag;
}
5.完整代码请点击github地址下载
QQ:2239344645 我的github
