软件实训：手把手写一个简单的javaweb项目

前言：

三个星期的实训过去了大半，剩下的时间要开始搞实训项目，所以花点时间整理一下实训的收获。感谢何老师，讲得简练清晰，引人入胜。感谢相遇。

开发环境：

IDE：Eclipse IDEA
JDK：JDK8
DB：MySql5.5
服务器：tomcat-7
浏览器：谷歌chrom

实现功能：

1.用户登陆，通过查询数据库中是否含有该用户实现登陆；

2.用户注册，通过向数据库的表中添加用户信息进行注册；

3.优质用户推荐，通过查询数据库表中的标识recommend判断是否显示在优质用户栏；

4.管理员账户admin可实现用户的信息过滤及查看详细信息、修改用户和删除用户；

5.用户注销。

详细设计：

1.数据库的建立及jdbc的封装；

①：user表：

hid为主键；recommend默认为0，等于1时为优质用户；flag默认为0，等于1时为用户被删除。

②：jdbc的封装：

参考博客：https://blog.csdn.net/weixin_43912621/article/details/106871762.

2.Eclipse上配置tomcat；

参考博客： https://blog.csdn.net/weixin_43912621/article/details/107041596.大体记录了一下过程。

3.jsp：

导包jjstl.jar和standard.jar;

4.目录结构介绍：

①：bean为封装的用户类，封装了用户的所有信息：

package bean;public class User {private int hid;private String name;private String password;private int age;private String email;private String Picture;private String intro;private int recommend;private int flag;private int toage;public int getHid() {return hid;}public String getPicture() {return Picture;}public void setPicture(String picture) {Picture = picture;}public void setHid(int hid) {this.hid = hid;}public String getIntro() {return intro;}public void setIntro(String intro) {this.intro = intro;}public int getRecommend() {return recommend;}public void setRecommend(int recommend) {this.recommend = recommend;}public int getFlag() {return flag;}public void setFlag(int flag) {this.flag = flag;}public User() {}public User(int uid, String name, String picture,String intro) {this.hid = uid;this.name = name;this.Picture = picture;this.intro = intro;}public int getToage() {return toage;}public void setToage(int toage) {this.toage = toage;}public User(int uid, String name, int age,int toage,int recommend) {this.hid = uid;this.name = name;this.age = age;this.toage = toage;this.recommend = recommend;}public User(int uid, String name, int age,String email,int recommend) {this.hid = uid;this.name = name;this.age = age;this.email = email;this.recommend = recommend;}public User(int uid, String name, String password, int age, String email,String picture,String intro,int recommend,int flag) {this.hid = uid;this.name = name;this.password = password;this.age = age;this.email = email;this.Picture = picture;this.intro = intro;this.recommend = recommend;this.flag = flag;}public int getUid() {return hid;}public void setUid(int uid) {this.hid = uid;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}public String toString() {return name+"\t"+age+"\t"+email;}
}

②：control为servlet包：servlet是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。

③：dao包用来与数据库进行业务操作，返回业务操作结果；

package dao.Impl;import bean.User;
import dao.IUserDao;
import util.DBconUtil;import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;public class IUserDaoImpl implements IUserDao {public int register(User user) {// TODO Auto-generated method stubint i = 0;Connection conn = DBconUtil.getConn();PreparedStatement pstmt = null;String sql = "insert into users(name,password,age,email,picture,intro,recommend,flag)values(?,?,?,?,?,?,?,?)";try {//new Driver();//Class c = Driver.class;conn = DBconUtil.getConn();pstmt = conn.prepareStatement(sql);System.out.println("DB"+user.getName());pstmt.setString(1,user.getName());pstmt.setString(2,user.getPassword());pstmt.setInt(3,user.getAge());pstmt.setString(4,user.getEmail());pstmt.setString(5,user.getPicture());pstmt.setString(6,user.getEmail());pstmt.setInt(7,user.getRecommend());pstmt.setInt(8,user.getFlag());i = pstmt.executeUpdate();} catch(Exception e) {e.printStackTrace();}finally {DBconUtil.close(null,pstmt,null,null);}return i;}public int login(User user) {// TODO Auto-generated method stubint hid = 0;ResultSet rs = null;Connection conn = DBconUtil.getConn();PreparedStatement pstmt = null;String sql = "select hid from users where name =? and password = ?";try {conn = DBconUtil.getConn();pstmt = conn.prepareStatement(sql);pstmt.setString(1,user.getName());pstmt.setString(2,user.getPassword());rs = pstmt.executeQuery();if(rs.next()) {hid = rs.getInt("hid");}} catch(Exception e) {e.printStackTrace();}finally {DBconUtil.close(null,pstmt,null,rs);}return hid;}public List<User> getIndexUser(){String sql = "select hid,name,picture,intro from users where recommend = 1";ResultSet rs = null;Connection conn = DBconUtil.getConn();PreparedStatement pstmt = null;List<User> list = null;try {conn = DBconUtil.getConn();pstmt = conn.prepareStatement(sql);list = new ArrayList<User>();rs = pstmt.executeQuery();while(rs.next()) {int hid = rs.getInt("hid");String name = rs.getString("name");String picture = rs.getString("picture");String intro = rs.getString("intro");User user = new User(hid,name,picture,intro);list.add(user);}} catch(Exception e) {e.printStackTrace();}finally {DBconUtil.close(null,pstmt,null,rs);}return list;}public List<User> getAllUser(User user) {String sql = "select hid,name,age,email,recommend from users where 1=1 and flag=0";Connection conn = DBconUtil.getConn();StringBuffer sb = new StringBuffer(sql);List<Object> params = new ArrayList<Object>();if(null != user.getName() && !"".equals(user.getName())) {sb.append(" and name like ? ");params.add("%"+user.getName()+"%");}if(user.getRecommend()!=2) {sb.append(" and recommend = ? ");params.add(user.getRecommend());}if(0 != user.getAge()) {sb.append(" and age>= ? ");params.add(user.getAge());}if(0 != user.getToage()) {sb.append(" and age<= ? ");params.add(user.getToage());}sql=sb.toString();//System.out.println(sql);PreparedStatement pstmt = null;ResultSet rs = null;List<User> list = null;try {pstmt = conn.prepareStatement(sql);for(int i=0;i<params.size();i++) {pstmt.setObject(i+1, params.get(i));}rs = pstmt.executeQuery();list = new ArrayList<User>();while(rs.next()) {int uid = rs.getInt("hid");String name = rs.getString("name");int age = rs.getInt("age");String email = rs.getString("email");int recommend = rs.getInt("recommend");User user_ = new User(uid,name,age,email,recommend);list.add(user_);}} catch (SQLException e) {e.printStackTrace();}finally {DBconUtil.close(null, pstmt, null, rs);}return list;}public User getUserById(int uid) {String sql = "select name,password,age,email,picture,intro,recommend from users where hid = ?";PreparedStatement pstmt = null;ResultSet rs = null;Connection conn = DBconUtil.getConn();User user = null;try {pstmt = conn.prepareStatement(sql);pstmt.setInt(1, uid);rs = pstmt.executeQuery();if(rs.next()) {String name = rs.getString("name");String password = rs.getString("password");int age = rs.getInt("age");String email = rs.getString("email");String intro = rs.getString("intro");String picture = rs.getString("picture");int recommend = rs.getInt("recommend");user = new User(uid,name,password,age,email,picture,intro,recommend,0);}} catch (SQLException e) {e.printStackTrace();}finally {DBconUtil.close(null, pstmt, null, rs);}System.out.println(user);return user;}public int updateUser(User user) {String sql="update users set age=?,email=?,recommend=?,intro=? where hid = ?";Connection conn = DBconUtil.getConn();int i = 0;System.out.println("dao-------------"+user.getEmail());PreparedStatement pstmt = null;try {pstmt = conn.prepareStatement(sql);pstmt.setInt(1, user.getAge());pstmt.setString(2, user.getEmail());pstmt.setInt(3, user.getRecommend());pstmt.setString(4, user.getIntro());pstmt.setInt(5, user.getUid());System.out.println("dao-------------"+user.getEmail());i = pstmt.executeUpdate();} catch (SQLException e) {e.printStackTrace();}finally {DBconUtil.close(null, pstmt, null, null);}return i;}public int deleteUserById(int uid) {String sql="delete from users where hid = ?";Connection conn = DBconUtil.getConn();int i = 0;PreparedStatement pstmt = null;try {pstmt = conn.prepareStatement(sql);pstmt.setInt(1, uid);i = pstmt.executeUpdate();} catch (SQLException e) {e.printStackTrace();}finally {DBconUtil.close(null, pstmt, null, null);}return i;}public int updateUserById(int uid,int flag) {String sql="update users set flag = ? where hid = ?";Connection conn = DBconUtil.getConn();int i = 0;PreparedStatement pstmt = null;try {pstmt = conn.prepareStatement(sql);pstmt.setInt(1, flag);pstmt.setInt(2, uid);i = pstmt.executeUpdate();} catch (SQLException e) {e.printStackTrace();}finally {DBconUtil.close(null, pstmt, null, null);}return i;}
}

④：service包用来接收dao包业务操作后的结果，传给control包；

package service.Impl;import java.util.List;import bean.User;
import dao.IUserDao;
import dao.Impl.IUserDaoImpl;
import service.IUserServices;public class IUserServicesImpl implements IUserServices {private IUserDao iuserDao = new IUserDaoImpl();public boolean register(User user) {int i = iuserDao.register(user);return i>0?true:false;}public boolean login(User user) {// TODO Auto-generated method stubint hid = iuserDao.login(user);return hid>0?true:false;}public List<User> getIndexUser() {List<User> list = iuserDao.getIndexUser();if(null == list || list.size() == 0) {return null;}return list;}public List<User> getAllUser(User user) {List<User> list = iuserDao.getAllUser(user);if(null == list || list.size() == 0) {return null;}return list;}public User getUserById(int uid) {User user = iuserDao.getUserById(uid);return user;}public boolean updateUser(User user) {int i = iuserDao.updateUser(user);return i>0?true:false;}public boolean deleteUserById(int uid) {int i = iuserDao.deleteUserById(uid);return i>0?true:false;}public boolean updateUserById(int uid,int flag) {int i = iuserDao.updateUserById(uid,flag);return i>0?true:false;}
}

⑤：util为封装的jdbc工具包，用来进行数据库的业务操作。

4.登录：

前端页面login.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>登录</title><link rel ="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.css"><script type = "text/javascript" href="./js/jquery.js"></script><script type = "text/javascript" href="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><!--hearder--><jsp:include page="header.jsp"></jsp:include><h3 class="text-center">用户登录</h3><span style="margin-left: 290px;color:red;">${info }</span><form class="form-horizontal" style="padding-left:150px;" role="form" action="login.do" method="post"><div class="form-group"><label for="user" class="col-sm-2 control-label">用户名</label><div class="col-sm-6"><input type="text" name="user" class="form-control" id="user" placeholder="请输入用户名"></div></div><div class="form-group"><label for="password" class="col-sm-2 control-label">密码</label><div class="col-sm-6"><input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-info">登录</button></div></div></form></div>
</body>
</html>

header.jsp为上方导航栏：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Insert title here</title></head>
<style type="text/css">body{padding-top:70px}
</style>
<body><nav class="navbar navbar-default navbar-fixed-top" role="navigation"><div class="container-fluid"><div class="navbar-header"><img src="./images/logo.jpg" style="margin-top:2px" width="120" height="45"></div><div><p class="navbar-text navbar-left"><c:if test="${name!=null }">欢迎:${name }${info }&nbsp;&nbsp;<a href="index.do">首页</a>&nbsp;&nbsp;<a href="#">个人资料</a>&nbsp;&nbsp;</c:if><c:if test="${name==null }"><a href="login.jsp">登录</a>&nbsp;&nbsp;<a href="register.jsp">注册</a>&nbsp;&nbsp;<a href="index.do">首页</a>&nbsp;&nbsp;</c:if><c:if test="${name == 'admin'}"><a href="userindex.do">用户管理</a></c:if></p><p class="navbar-text navbar-right" style="margin-right:2px"><a href-"">消息<span class="badge" style="background-color:#f00;margin-top:-2px">42</span></a>&nbsp;&nbsp;<a href="loginout.do" style="">注销</a></p></div></div></nav>
</body>
</html>

登录的action=“login.do”，login.do通过获取login.jsp中输入的用户名和密码，判断是否登陆成功。

package control;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import bean.User;
import service.IUserServices;
import service.Impl.IUserServicesImpl;/*** Servlet implementation class LoginServlet*/
@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {private IUserServices iuserServices = new IUserServicesImpl();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stubdoPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubrequest.setCharacterEncoding("UTF-8");//编码方式String name = request.getParameter("user");//获取前端输入的用户名String password = request.getParameter("password");//获取前端输入的密码//封装为User类User user = new User();user.setName(name);user.setPassword(password);boolean result = iuserServices.login(user);//判断是否登录成功if(result) {request.getSession().setAttribute("name",name);//若成功传参name到header.jsp  用来欢迎  response.sendRedirect("index.do");}else {request.setAttribute("info", "用户名或密码错误");request.getRequestDispatcher("login.do").forward(request, response);}}
}

5.用户管理：

只用管理员admin才能进行用户管理，header.jsp这里：

<c:if test="${name == 'admin'}"><a href="userindex.do">用户管理</a>
</c:if>

那么userindex.do通过输入条件进行查询，如果不输入即输出表中的全部内容。:

package control;import java.io.IOException;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import bean.User;
import service.IUserServices;
import service.Impl.IUserServicesImpl;/*** Servlet implementation class UserIndexServlet*/
@WebServlet("/userindex.do")
public class UserIndexServlet extends HttpServlet {private IUserServices iuserServices = new IUserServicesImpl();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stubdoPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubrequest.setCharacterEncoding("UTF-8");String name = request.getParameter("user");String recommend = request.getParameter("recommend");String age = request.getParameter("age");String toage = request.getParameter("toage");if(null == age || "".equals(age)) {age = "0";}if(null == toage || "".equals(toage)) {toage = "0";}if(null == recommend || "".equals(recommend)) {recommend = "2";}User user = new User(0,name,Integer.parseInt(age),Integer.parseInt(toage),Integer.parseInt(recommend));List<User> list = iuserServices.getAllUser(user);request.setAttribute("list", list);request.setAttribute("user", user);request.getRequestDispatcher("/userIndex.jsp").forward(request, response);}
}

前端页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户管理</title><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"><script src="js/jquery-1.11.1.js"></script><script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script><script type="text/javascript">//toastr.options = {"timeOut":1000};var uid = 0;var trobj;$(function(){/*当点击确认删除时：获取当前uidAjax调用servlet删除记录根据删除结果提示用户*/$("#ok").click(function(){$("#myModal").modal('hide');$.ajax({url:"userdelete.do",type:"post",dataType:"json",async:true,data:"uid="+uid,success:function(data){if(data==1){// 隐藏当前行trobj.hide();//toastr.success("删除成功!");}else{//toastr.success("删除失败！");}}})})})function showd(uid_,obj){// 桥接对象uid = uid_;trobj = $(obj).parent().parent();$('#myModal').modal("show");}</script>
</head>
<body><div class="container"><!--hearder--><jsp:include page="header.jsp"></jsp:include><h3>用户列表</h3><form class="form-horizontal" style="margin-left: -140px;margin-top:40px; "><div class="form-group"><label for="user" class="col-sm-2 control-label">用户名：</label><div class="col-sm-2"><input type="text" name="user" class="form-control" value="${user.name }" id="user" placeholder="请输入用户名"></div></div><div class="form-group"><label class="col-sm-2 control-label">推&nbsp;&nbsp;&nbsp;荐：</label><input name="recommend" type="radio" value="2" ${user.recommend==2?"checked":"" } ${user.name==null?"checked":"" } style="margin:10px 13px 0px;">全部<input name="recommend" type="radio" value="1" ${user.recommend==1?"checked":"" } style="margin:10px 13px 0px;">已推荐<input name="recommend" type="radio" value="0" ${user.recommend==0?"checked":"" } style="margin:10px 13px 0px;">未推荐</div><!--如何让两个input并排显示？用.form-inline--><div class="form-group"><label for="age" class="col-sm-2 control-label">年&nbsp;&nbsp;&nbsp;龄：</label><div class="col-sm-2 form-inline"><input type="text" name="age" value="${user.age==0?'':user.age }" class="form-control" id="age" placeholder=""></div><!-- width可以覆盖掉掉col-sm-2 的设定--><label for="toage" class="col-sm-2 control-label" style="width: 0px;margin-left: 20px;">TO</label><div class="col-sm-2 form-inline"><input type="text" name="toage" value="${user.toage==0?'':user.toage }" class="form-control" id="toage" placeholder=""></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-sm btn-info">查询</button></div></div></form><table class="table table-hover" style="margin-top: 70px;"><caption>查询结果：</caption><thead><tr><th>用户名</th><th>年龄</th><th>邮箱</th><th>是否推荐</th><th>操作</th></tr></thead><tbody><c:forEach items="${list }" var="user"><tr><td>${user.name }</td><td>${user.age }</td><td>${user.email }</td><td>${user.recommend==1?"已推荐":"未推荐" }</td><td><a href="userinfo.do?hid=${user.hid }&flag=0" class="btn btn-primary btn-xs">查看</a><a href="userinfo.do?hid=${user.hid }&flag=1" class="btn btn-warning btn-xs">修改</a><button type="button" class="btn btn-danger btn-xs" onclick="showd(${user.hid},this)">删除 </button></td></tr></c:forEach><c:if test="${empty list }"><tr><td colspan="5" class="text-center">此查询无数据!</td></tr></c:if></tbody></table></div><div class="modal fade" id="myModal" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">提示：</h4></div><div class="modal-body"><p>是否确认删除？</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取消</button><button type="button" id="ok" class="btn btn-primary">确认</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog --></div><!-- /.modal -->
</body>
</html>

每一个用户会有三个按键，各自实现不同的功能：

<a href="userinfo.do?hid=${user.hid }&flag=0" class="btn btn-primary btn-xs">查看</a>
<a href="userinfo.do?hid=${user.hid }&flag=1" class="btn btn-warning btn-xs">修改</a>
<button type="button" class="btn btn-danger btn-xs" onclick="showd(${user.hid},this)">删除 </button>

拿删除来说，点击后会弹出：

点击确认后，js中进行userdelete.do。功能就介绍这两个，其他的大致相仿，优质用户推荐就是取出recommend等于1的用户展示出来。源码请参考https://download.csdn.net/download/weixin_43912621/12567991
.

后记：

记录一下小插曲：
1.删除的提示一直不弹出，找陈大佬一起改了一下午，最后是jq的路径搞错了，我········；当然，轮播图不轮播也是这个问题。
2.乱码，修改数据库中表的内容时，中文乱码，一步一步定位，最后定位到数据库这里，只需要改一句jdbc:mysql://127.0.0.1:3306/数据库名?useUnicode=true&characterEncoding=utf8。
3.醉里挑灯看剑，梦回吹角连营。八百里分麾下炙，五十弦翻塞外声，沙场秋点兵。
马作的卢飞快，弓如霹雳弦惊。了却君王天下事，赢得生前身后名。可怜白发生！