JavaWeb課程設計，通過Jsp+Servlet+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>&times;</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>&nbsp;注銷</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>&nbsp;資訊管理</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;學生管理</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>&nbsp;
					                    <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&currentPage=${pb.currentPage - 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Previous">
				                        <span aria-hidden="true">&laquo;</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&currentPage=${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&currentPage=${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&currentPage=${pb.currentPage + 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next">
				                        <span aria-hidden="true">&raquo;</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>

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/239688.html

標籤：其他

上一篇：session,application,pageContext的作用域和區別

下一篇：基于vue+echarts 資料可視化大屏展示

JavaWeb課程設計-學生資訊管理系統（Jsp+Servlet+MySql）

相關技術：

專案目錄:

資料庫表結構:

功能展示：

設計步驟

1. 資料庫連接實作

2. 實作持久層（Dao）

3. 實作業務層（Service）

4.實作表現層功能

5.由于表現層Servlet太多，我們可以做簡單的提取

5.撰寫對應的前端頁面：以user_login.jsp為例

6.撰寫過濾器解決中文亂碼問題

7.撰寫串列頁面，并在后端代碼上實作回應的功能

8.實作不同資訊的洗掉修改功能，并進一步完善