JavaWeb課程設計，通過Jsp+Servlet+MySql設計實現，功能比較簡單，用戶可以通過登錄註冊方式進入管理界面可以管理學生信息，班級信息，課程信息等信息。實現了分頁查詢，添加信息、修改信息、刪除信息、選中刪除等功能，下面是運行的界面：
相關技術：
Servlet+JSP+Bootstrap+Jquery+MYSQL
項目目錄:
後端代碼部分：
前端頁面部分：
相關jar包：
數據庫表結構:
create database StudentInfo;
use StudentInfo;
drop table if exists student;
drop table if exists user;
drop table if exists class;
drop table if exists course;
#用戶表
create table user(
id int auto_increment primary key,
username nvarchar(20) null,
password nvarchar(20) null,
name nvarchar(20) null,
gender nchar(10) null,
age int null,
classno nvarchar(20) null,
phone nvarchar(11) unique null,
email nvarchar(30) null
);
#學生表
create table student(
id int auto_increment primary key,
name nvarchar(20) null,
gender nvarchar(10) null,
age int null,
classno nvarchar(20) null,
phone nvarchar(11) unique null,
email nvarchar(30) null
);
#班級表
create table class(
id int auto_increment primary key,
cno nvarchar(10) null,
classname nvarchar(30) null,
department nvarchar(30) null
);
#課程表
create table course(
id int auto_increment primary key,
courseno nvarchar(20) null,
coursename nvarchar(20) null,
type nvarchar(8) null,
period int null,
credit double null
);
用戶信息表：User
學生信息表：Student
班級信息表：Class
課程信息表：Course
功能展示：
用戶登錄：
用戶註冊：
登錄成功：
點擊左上角用戶名完善個人信息：
信息管理部分實現了分頁展示，增、刪、改、查、批量刪除
學生信息管理：
班級信息管理：
課程管理：
設計步驟
代碼比較多，只展示比較重要的部分：
1. 數據庫連接實現
數據庫連接部分使用的是druid數據庫連接池，首先先進行數據庫連接池的配置：druid.properties
driverClassName=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/mydb?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf-8
username=root
password=123456
initialSize=5
maxActive=10
maxWait=3000
然後編寫數據庫連接工具類：
/**
* JDBC工具類 使用Durid連接池
*/
public class JDBCUtils {
private static DataSource ds ;
static {
try {
//1.加載配置文件
Properties pro = new Properties();
//使用ClassLoader加載配置文件，獲取字節輸入流
InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
pro.load(is);
//2.初始化連接池對象
ds = DruidDataSourceFactory.createDataSource(pro);
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 獲取連接池對象
*/
public static DataSource getDataSource(){
return ds;
}
/**
* 獲取連接Connection對象
*/
public static Connection getConnection() throws SQLException {
return ds.getConnection();
}
}
這裏我們使用JdbcTemplate來進行數據連接操作數據庫：
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
2. 實現持久層（Dao）
編寫持久層接口：
/**
* 用戶操作的DAO
*/
public interface UserDao {
}
實現持久層接口：
public class UserDaoImpl implements UserDao {
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
}
3. 實現業務層（Service）
編寫業務層接口：
/**
* 用戶管理的業務接口
*/
public interface UserService {
}
實現業務層接口：
public class UserServiceImpl implements UserService {
private UserDao dao = new UserDaoImpl();
}
4.實現表現層功能
編寫表現層：
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
/*
* Code
*/
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
5.由於表現層Servlet太多，我們可以做簡單的提取
編寫BaseServlet類，然後由其他servlet繼承
public class BaseServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
// 獲取請求標識
String methodName = request.getParameter("method");
// 獲取指定類的字節碼對象
Class<? extends BaseServlet> clazz = this.getClass();//這裏的this指的是繼承BaseServlet對象
// 通過類的字節碼對象獲取方法的字節碼對象
Method method = clazz.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
// 讓方法執行
method.invoke(this, request, response);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
5.編寫對應的前端頁面：以user_login.jsp爲例
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>管理員登錄</title>
<!-- 1. 導入CSS的全局樣式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery導入，建議使用1.9以上的版本 -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. 導入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
//切換驗證碼
function refreshCode(){
//1.獲取驗證碼圖片對象
var vcode=document.getElementById("vcode");
//2.設置其src屬性，加時間戳
//2.設置其src屬性，加時間戳
vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
}
</script>
</head>
<body>
<div class="container" style="width: 400px;">
<h3 style="text-align: center;">管理員登錄</h3>
<form action="${pageContext.request.contextPath}/loginServlet" method="post">
<div class="form-group">
<label for="user">用戶名：</label>
<input type="text" name="username" class="form-control" id="user" placeholder="請輸入用戶名"/>
</div>
<div class="form-group">
<label for="password">密碼：</label>
<input type="password" name="password" class="form-control" id="password" placeholder="請輸入密碼"/>
</div>
<div class="form-inline">
<label for="vcode">驗證碼：</label>
<input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="請輸入驗證碼" style="width: 120px;"/>
<a href="javascript:refreshCode();">
<img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清點擊刷新" id="vcode"/>
</a>
</div>
<hr/>
<div class="form-group" style="text-align: center;">
<input class="btn btn btn-primary" type="submit" value="登錄">
</div>
</form>
<!-- 出錯顯示的信息框 -->
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" >
<span>×</span></button>
<strong>${login_msg}</strong>
</div>
</div>
</body>
</html>
運行截圖：
測試登錄功能，發現中文亂碼問題（直接繼承HttpServlet不會出現，繼承BaseServlet會出現）
6.編寫過濾器解決中文亂碼問題
@WebFilter("/*")
public class CharchaterFilter implements Filter {
protected String encoding;
@Override
public void destroy() {
// TODO 自動生成的方法存根
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
// TODO 自動生成的方法存根
HttpServletRequest request=(HttpServletRequest)req;
HttpServletResponse response=(HttpServletResponse)res;
String method=request.getMethod();
if(method.equalsIgnoreCase("post")){
request.setCharacterEncoding("utf-8");
}
response.setContentType("text/html;charset=utf-8");
chain.doFilter(request, response);
}
@Override
public void init(FilterConfig arg0) throws ServletException {
// TODO 自動生成的方法存根
}
}
7.編寫列表頁面，並在後端代碼上實現響應的功能
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>網站後臺管理</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
@media (min-width: 768px) {
#slider_sub{
width: 200px;
margin-top: 51px;
position: absolute;
z-index: 1;
height: 600px;
}
.mysearch{
margin: 10px 0;
}
.page_main{
margin-left: 205px;
}
}
</style>
<script>
function deleteStudent(id){
//用戶安全提示
if(confirm("您確定要刪除嗎？")){
//訪問路徑
location.href="${pageContext.request.contextPath}/student?method=delStudent&id="+id;
}
}
window.onload = function(){
//給刪除選中按鈕添加單擊事件
document.getElementById("delSelectedStudent").onclick = function(){
if(confirm("您確定要刪除選中條目嗎？")){
var flag = false;
//判斷是否有選中條目
var cbs = document.getElementsByName("id");
for (var i = 0; i < cbs.length; i++) {
if(cbs[i].checked){
//有一個條目選中了
flag = true;
break;
}
}
if(flag){
//有條目被選中
//表單提交
document.getElementById("form").submit();
}
}
}
//1.獲取第一個cb
document.getElementById("firstCb").onclick = function(){
//2.獲取下邊列表中所有的cb
var cbs = document.getElementsByName("uid");
//3.遍歷
for (var i = 0; i < cbs.length; i++) {
//4.設置這些cbs[i]的checked狀態 = firstCb.checked
cbs[i].checked = this.checked;
}
}
}
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<!--縮放 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#slider_sub">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">學生信息管理</a>
</div>
<ul class="nav navbar-nav navbar-right" style="margin-right: 25px">
<li><a href="${pageContext.request.contextPath}/user?method=findUser&id=${user.id}"><span class="badge" style="background: #C12E2A">${user.username}</span></a></li>
<li><a href="${pageContext.request.contextPath}/user?method=destroyUser"><span class="glyphicon glyphicon-off"></span> 註銷</a></li>
</ul>
<!-- 側邊欄 -->
<div class="navbar-default navbar-collapse" id="slider_sub">
<ul class="nav">
<li>
<form class="form-inline" action="${pageContext.request.contextPath}/student?method=findAll" method="post">
<!--搜索 -->
<div class="input-group mysearch">
<input type="text" name="name" value="${condition.name[0]}" class="form-control" id="exampleInputName2" >
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</li>
<li><a href="${pageContext.request.contextPath}/index.jsp" class="collapse" data-toggle="collapse">首頁<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<!-- <ul id="sub2" class="nav collapse">
<li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> 信息管理</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 學生管理</a></li>
</ul> -->
</li>
<li><a href="${pageContext.request.contextPath}/student?method=findAll" class="collapse" data-toggle="collapse">學生管理<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
</li>
<li><a href="${pageContext.request.contextPath}/classno?method=findAll" class="collapse" data-toggle="collapse">班級管理<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
</li>
<li><a href="${pageContext.request.contextPath}/course?method=findAll" class="collapse" data-toggle="collapse">課程管理<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
</li>
<li><a href="${pageContext.request.contextPath}/about.jsp" class="collapse" data-toggle="collapse">關於我們<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
</li>
</ul>
</div>
</nav>
<!-- 主區域 -->
<div class="page_main" style="background: rgba(92,88,116,0.34)">
<ol class="breadcrumb">
<li><a href="#">管理首頁</a></li>
<li><a href="#">學生管理</a></li>
<li><a href="#">學生信息</a></li>
</ol>
<div class="row">
<div class="col-md-12 col-sm-3">
<div class="panel panel-default">
<!-- <div class="panel-header">學生信息</div> -->
<div class="panel-body table-responsive">
<div style="float: right;margin: 5px;">
<a class="btn btn-primary" href="${pageContext.request.contextPath}/student_add.jsp">添加學生</a>
<a class="btn btn-primary" href="javascript:void(0);" id="delSelectedStudent">刪除選中</a>
</div>
<form id="form" action="${pageContext.request.contextPath}/student?method=delSelectedStudent" method="post">
<table class="table table-striped table-hover" style="margin: 10px;">
<thead>
<tr>
<th><input type="checkbox" id="firstCb"></th>
<th>編號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>班級</th>
<th>電話</th>
<th>郵箱</th>
</tr>
</thead>
<c:forEach items="${pb.list}" var="student" varStatus="s">
<tr>
<td><input type="checkbox" name="id" value="${student.id}"></td>
<td>${student.id}</td>
<td>${student.name}</td>
<td>${student.gender}</td>
<td>${student.age}</td>
<td>${student.classno}</td>
<td>${student.phone}</td>
<td>${student.email}</td>
<td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/student?method=findStudent&id=${student.id}">修改</a>
<a class="btn btn-default btn-sm" href="javascript:deleteStudent(${student.id});">刪除</a></td>
</tr>
</c:forEach>
</table>
</form>
<nav aria-label="Page navigation" class="pull-right">
<ul class="pagination" style="margin-top: 10px;">
<c:if test="${pb.currentPage == 1}">
<li class="disabled">
</c:if>
<c:if test="${pb.currentPage != 1}">
<li>
</c:if>
<a href="${pageContext.request.contextPath}/student?method=findAll¤tPage=${pb.currentPage - 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<c:forEach begin="1" end="${pb.totalPage}" var="i" >
<c:if test="${pb.currentPage == i}">
<li class="active"><a href="${pageContext.request.contextPath}/student?method=findAll¤tPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
<c:if test="${pb.currentPage != i}">
<li><a href="${pageContext.request.contextPath}/student?method=findAll¤tPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li>
</c:if>
</c:forEach>
<li>
<a href="${pageContext.request.contextPath}/student?method=findAll¤tPage=${pb.currentPage + 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<span style="font-size: 25px;margin-left: 5px;">
共${pb.totalCount}條記錄，共${pb.totalPage}頁
</span>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
8.實現不同信息的刪除修改功能，並進一步完善
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 網頁使用的語言 -->
<html lang="zh-CN">
<head>
<!-- 指定字符集 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>修改學生信息</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="width: 400px;">
<h3 style="text-align: center;">修改學生信息</h3>
<form action="${pageContext.request.contextPath}/student?method=updateStudent" method="post">
<!-- 隱藏域 提交id-->
<input type="hidden" name="id" value="${student.id}">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" name="name" value="${student.name}" readonly="readonly" placeholder="請輸入姓名" />
</div>
<div class="form-group">
<label>性別：</label>
<c:if test="${student.gender == '男'}">
<input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="女" />女
</c:if>
<c:if test="${student.gender == '女'}">
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" checked />女
</c:if>
</div>
<div class="form-group">
<label for="age">年齡：</label>
<input type="text" class="form-control" value="${student.age}" id="age" name="age" placeholder="請輸入年齡" />
</div>
<div class="form-group">
<label for="classno">班級：</label>
<input type="text" id="classno" class="form-control" value="${student.classno}" name="classno" placeholder="請輸入班級信息"/>
</div>
<div class="form-group">
<label for="phone">電話</label>
<input type="text" id="phone" class="form-control" value="${student.phone}" name="phone" placeholder="請輸入電話號碼"/>
</div>
<div class="form-group">
<label for="email">Email：</label>
<input type="text" id="email" class="form-control" value="${student.email}" name="email" placeholder="請輸入郵箱地址"/>
</div>
<div class="form-group" style="text-align: center">
<input class="btn btn-primary" type="submit" value="提交" />
<input class="btn btn-default" type="reset" value="重置" />
</div>
</form>
</div>
</body>
</html>
