學生選課資訊管理系統

1、效果圖
2、專案闡述
3、開發環境
4、功能開發
- 4.1、登錄
- 4.2、學生模塊
- - 4.2.1、個人資訊查詢
  - 4.2.2、選課
- 4.3、教師模塊
- - 4.3.1、分數錄入
- 4.4、管理員模塊
- - 4.4.1 資訊管理
  - 4.4.2、資料報表
5、其他小技巧
- 5.1、實作列印功能
- 5.2、資料輸入約束性
- 5.3、全選\全不選
- 5.4、批量洗掉
- 5.5、模糊查詢
6、總結

1、效果圖

在這里插入圖片描述

2、專案闡述

該專案是模擬學生選課資訊的管理系統，用戶型別有三種，分別是管理員、教師、學生，學生入校注冊后需統一記錄學生個人基本資訊，對于面向學生開設的相關課程需要記錄每門課程的基本資訊，每個任課教師規定其可主講三門課程，學生選課時系統將相應的選課資訊記錄入庫，考試結束后教師需在相應的選課記錄中補上考試成績，管理員可查看所有用戶資訊，同時查看一系列的資料報表，

由于代碼量較多，就不放上完整代碼啦，若有需要可評論交流聯系或者私信博主哦O(∩_∩)O
該專案的所有頁面樣式，布局等均由博主自主撰寫
本文不涉及前端頁面撰寫知識

3、開發環境

編譯軟體：IntelliJ IDEA 2019
頁面設計軟體：Adobe Dreamweaver CC 2019
資料庫：MySQL 8.0
資料庫操作工具：Navicat Premium 12
服務器：Tomcat 9.0.37
環境：jdk1.8

4、功能開發

在這里插入圖片描述

4.1、登錄

用戶型別選擇
登錄

在這里插入圖片描述
由于專案分為三個型別的用戶，即管理員、教師、學生，因此在進入系統前須先選擇相應的用戶型別，

如何區分用戶型別？
答：當用戶選擇完型別后，將對應的value值設定為session域物件值，session域可簡單理解為只要瀏覽器未關閉，session域物件就會一直存在，但是在Tomcat中，域物件的生命周期默認為30分鐘，即若30分鐘內客戶端沒有再發送請求，則會超時從而自動銷毀session域中相應的物件，

 /**
     * 登錄
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        String type = userService.queryTypeByUsername(username);
        String typeChoose = String.valueOf(req.getSession().getAttribute("UserType"));

        User user = userService.login(new User(username, password, null, type));

        //判斷用戶型別及賬號密碼是否成功匹配
        if (type.equalsIgnoreCase(typeChoose) == false){
            System.out.println("登錄失敗");
            req.setAttribute("username",username);
            req.setAttribute("tip","不存在此"+typeChoose+"用戶");
            req.getRequestDispatcher("/page/user/login.jsp").forward(req,resp);
        }else if (user==null){
            System.out.println("登錄失敗");
            req.setAttribute("username",username);
            req.setAttribute("tip","用戶名或密碼錯誤");
            req.getRequestDispatcher("/page/user/login.jsp").forward(req,resp);
        }
        else {
            System.out.println("登錄成功");
            req.setAttribute("username",username);


            if (typeChoose.equalsIgnoreCase("student")){
                req.getSession().setAttribute("stuNum",username);
                req.getRequestDispatcher("/page/student/index.jsp").forward(req,resp);
            }else if (typeChoose.equalsIgnoreCase("system")){
                req.getSession().setAttribute("systemNum",username);
                req.getRequestDispatcher("/page/system/index.jsp").forward(req,resp);
            }else if (typeChoose.equalsIgnoreCase("teacher")){
                req.getSession().setAttribute("teacherNum",username);
                req.getRequestDispatcher("/page/teacher/index.jsp").forward(req,resp);
            }

        }

    }

4.2、學生模塊

在這里插入圖片描述

4.2.1、個人資訊查詢

在這里插入圖片描述
個人資訊查詢功能的實作，只需將資料庫中對應的資訊讀取即可，通過Servlet呼叫Service層，Service層再去呼叫DAO層，DAO層與資料庫互動獲取該用戶資訊，并逐層回傳，最后由Servlet發送資料并跳轉到相應的Jsp頁面，

由于功能邏輯不復雜，此處就貼jsp頁面的代碼啦
涉及知識點：JSTL（JSP標準標簽庫）

<%--
  自我介紹
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <%@include file="/common/head.jsp" %>
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/introduction.css">
</head>

<body>
<%@include file="/common/header_student.jsp" %>
<section>

    <%@include file="/common/menu_student.jsp" %>

    <div class="info">
        <div class="address">
            &nbsp;&nbsp;&nbsp;&nbsp;<img src="static/picture/home.png">&nbsp;&nbsp;>&nbsp;&nbsp;資訊查詢&nbsp;&nbsp;>&nbsp;&nbsp;個人資訊
        </div>

        <div class="introduction">
<%--            頭像--%>
            <div class="intr-first">
                <div class="head-image">
                    <img class="face_image" src="static/picture/6.jpg">
                </div>
            </div>

<%--            學生資訊遍歷--%>
            <div class="intr-second">
                <c:forEach var="info" items="${requestScope.info}">
                    <div class="subassemble">
                        <label class="sub-1">${info.key}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <label class="sub-2">${info.value}</label>
                    </div>
                </c:forEach>
            </div>
        </div>
        
    </div>
</section>

</body>
</html>

4.2.2、選課

在這里插入圖片描述

學生選課會有兩種情況，一是處于選課時間，二是未在選課時間段，并且此處的限制是只選擇一門課，不可多選，

如何確定是否為選課時間？
答：選課開啟是由管理員開啟的，即可以設定一個servletContext域物件，當管理員開啟選課時，則該域物件的值為true，若關閉則為false，當學生點擊選課時，對應的Servlet先獲取servletContext域物件并進行判斷，若為true，則代表處在選課時間段，反之，

/**
     * 設定是否是選課時間
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void isChooseTime(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String isChecked = req.getParameter("isChecked");

        if (isChecked!=null && isChecked.equals("true")){
            req.getServletContext().setAttribute("isTime",isChecked);
        }

        req.getRequestDispatcher("/page/system/systemSetting.jsp").forward(req,resp);

    }

如何限定只選一門課？
答：使用JQuery為選課圖示系結一個點擊事件，當點擊選課時先獲取已選串列的資料物件，若已存在物件，即不為null，則說明已選一門課，則alert()提示并回傳false阻止點擊事件，

<script type="text/javascript">
        $(function () {
            //選課
            $(".choose").click(function () {

                var b = ${requestScope.isChoose.cno};
                if (b != null) {
                    alert("已選一門功課！請先退選！");
                    return false;
                }

            });

            //退課
            $(".delete").click(function () {
                return confirm("確定洗掉已選課程嗎？");
            })
        })
    </script>

4.3、教師模塊

在這里插入圖片描述

4.3.1、分數錄入

在這里插入圖片描述

教師只可錄入其所教課程的成績
錄入方式，在這里我使用的是input組件，直接進行錄入，錄入后修改對應的資料庫資料，并把input組件的默認值改成新的成績

4.4、管理員模塊

在這里插入圖片描述

4.4.1 資訊管理

管理員可以查看所有資訊，同時對資訊進行增刪查改的操作

資訊查詢
添加資訊
資訊修改
添加資訊的方式？
答：在專案中，通過css撰寫“添加資訊”組件，實作下拉影片效果，當點擊添加資訊時，會在當前頁面下方彈出一個添加框，填入一系列資訊并點擊確定，將資訊更新到資料庫中，并再由Servlet跳轉回當前資訊查詢頁面，

4.4.2、資料報表

專案中的資料報表使用Echarts圖表，關于Echarts圖表的使用方式在博主首頁噢！先給大家看看效果o(￣▽￣)o
在這里插入圖片描述

5、其他小技巧

5.1、實作列印功能

列印功能可以使用第三方插件，或者直接呼叫window.print()方法列印，window.print()的好處是使用方便，只需要直接呼叫即可，但缺點是直接呼叫的話不能列印像Echarts的圖表，還有一些css樣式也需要重新設定，總結下來，若只是為了簡單的列印網頁，沒有其他樣式要求，則可直接使用window.print()，若對列印樣式有需求，則需使用第三方插件，

利用 window.print() 列印指定部分的內容
在要列印的內容前面一行加上“< !–startprint-- >”,最后一行后面加上“< !–endprint-- >”，再給一個如button組件系結下方的doPrint()事件即可，

function doPrint() {
    bdhtml=window.document.body.innerHTML;
    sprnstr="<!--startprint-->"; //開始列印標識字串有17個字符
    eprnstr="<!--endprint-->"; //結束列印標識字串
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //從開始列印標識之后的內容
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取開始標識和結束標識之間的內容
    window.document.body.innerHTML=prnhtml; //把需要列印的指定內容賦給body.innerHTML
    window.print(); //呼叫瀏覽器的列印功能列印指定區域
    window.document.body.innerHTML=bdhtml;//重新給頁面內容賦值
    return false;
}

5.2、資料輸入約束性

盡可能地使用下拉串列組件（select-option），避免了手動輸入資料時資料不合法，
使用JS正則運算式輔助判斷資料的合法

function check() {

            var options=$("#searchType option:selected").val();
            var val = $("#searchInfo").val();
            var number = /^\+?[1-9][0-9]*$/;//數字

            if (options == "cno" || options == "priorId" || options == "credit"){
                if (number.test(val))//判斷輸入的是否為數字
                    return true;
                else{
                    alert("內容輸入錯誤！")
                    return false;
                }
            }
            return true;
        }

5.3、全選\全不選

在Jsp上使用type為checkbox的input組件，再給其添加系結事件（如下）

//全選/全不選
            $("#checkAll").click(function () {

                let checked = document.getElementById("checkAll").checked;
                if (checked==true){
                    <c:forEach items="${requestScope.CourseMap}" var="entry">
                        document.getElementById("${entry.value.id}").checked=true;
                    </c:forEach>
                }else if (checked==false){
                    <c:forEach items="${requestScope.CourseMap}" var="entry">
                        document.getElementById("${entry.value.id}").checked=false;
                    </c:forEach>
                }

            })

5.4、批量洗掉

獲取當前Jsp中已選中的資料編號，并將所有編號以一個字符（如s）作為連接，將其連接成一段字串，再把該字串傳送到Servlet中，再在Service層對字串以“s”作為分隔符，將字串分割后再逐一對每一個資料進行操作，

//批量洗掉
            $(".deleteAll").click(function () {

                let array = new Array();
                <c:forEach items="${requestScope.CourseMap}" var="entry">
                    if (document.getElementById("${entry.value.id}").checked==true){
                        array.push("${entry.value.id}");
                    }
                </c:forEach>

                let allcno=array[0];
                for (let i = 1; i < array.length; i++) {
                    allcno += "s"+array[i];
                }

                if (array[0]!=null){
                    let b = confirm("確定洗掉課程號"+allcno+"嗎？");
                    if (b==true){
                        location.href="http://localhost:8080/StudentsInfoSystem/systemCourseServlet?action=deleteMoreCourse&allcno="+allcno;
                    }
                }
            })

5.5、模糊查詢

模糊查詢這里以MySQL為例，主要使用“LIKE”關鍵詞，如要查詢學號中帶有10的學生，只需要輸入“10”即可，具體DAO層陳述句如下：

/**
     * 通過學號查詢所有學生資訊
     * @return
     */
    public List<Student> queryAllBySno(String sno){
        String sql="select * from student where sno like ?";

        return queryForList(Student.class,sql,sno);
    }

6、總結

專案開發使用了三層架構，即“Web視圖層-Service業務層-Dao持久層”，分層的目的是為了解耦，即降低代碼耦合度，便于后期的維護，
建議多使用工廠模式創建實體化物件，這樣便于當底層資料庫有所變動時，只需DAO層變動，無需每一個頁面都進行修改，大大降低了作業量，
要有封裝的思想，把重復的，常用的陳述句進行封裝，再呼叫，這樣代碼看起來更加清楚整潔，而且修改方便，

謝謝看完的你！有幫助記得點個贊噢！有問題可隨時評論或者私信博主交流！！o(￣▽￣)o

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

標籤：其他

上一篇：關于深拷貝和淺拷貝

下一篇：vscode 總彈出enter your password...彈框，怎么回事？

實用！JavaWeb學生選課資訊管理系統（資料報表、列印、批量洗掉等）！

學生選課資訊管理系統

1、效果圖

2、專案闡述

3、開發環境

4、功能開發

4.1、登錄

4.2、學生模塊

4.2.1、個人資訊查詢

4.2.2、 選課

4.3、教師模塊

4.3.1、分數錄入

4.4、管理員模塊

4.4.1 資訊管理

4.4.2、資料報表

5、其他小技巧

5.1、實作列印功能

5.2、資料輸入約束性

5.3、全選\全不選

5.4、批量洗掉

5.5、模糊查詢

6、總結

4.2.2、選課