精华内容
下载资源
问答
  • %@ 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 PUBLIC "-//W3C//DTD
    <%@page import="edu.pdsu.stu.beans.Student"%>
    <%@ 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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    	a{
    		text-decoration:none;
    	 }
    </style>
    </head>
    <body>
    	<h2><a href="ViewProfileServlet">查看个人信息</a></h2>
    	<h2><a href="ModifyProfile.jsp">修改个人信息</a></h2>
    	<h2><a href="login.jsp">切换用户</a></h2>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 本代码包是基于Servlet的用户登录界面的一个操作,里面包含了用户登录界面的HTML文件,并且使用了C3P0和MySql,是学生管理系统的最基础也是最开端的东西。
  • 简介 这个html+css+js的学生管理系统,相对简单,由于没有连接...登录面板的html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主界面</title> <

    简介

    这个html+css+js的学生管理系统,相对简单,由于没有连接数据库,所以每次打开页面需要重新生成数据,只是把注册的放在代码里面的数组中,并没有持久化存储。相对来说纯javascript的代码还是有些意思。

    界面

    在这里插入图片描述
    在这里插入图片描述

    登录面板的html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>主界面</title>
        <link rel="stylesheet" href="font/iconfont.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="js/index.js"></script>
    </head>
    <body>
    <img src="images/2.jpg" alt="">
    <!--登录面板-->
    <div class="login-panel panel">
        <h1 class="panel-header ">
            学生管理系统
        </h1>
        <div class="panel-middle">
            <form action="#" class="form">
                <table >
                    <tr>
                        <td class="td_left">用户名</td>
                        <td class="td_right"><input type="text" name="username" id="login_username" placeholder="请输入用户名"><i class="iconfont icon-ren-"></i></td>
                    </tr>
                    <tr>
                        <td class="td_left">密码</td>
                        <td class="td_right"><input type="password" name="password" id="login_password"  placeholder="请输入密码"><i class="iconfont icon-suo"></i></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><input type="submit" name="submit" class="submit-btn panel-btn" value="登录"></td>
                    </tr>
                </table>
            </form>
        </div>
        <div class="panel-footer">
            <span class="toRegister"><a href="#">注册</a></span>
            ||
            <span class="forgetPassword"><a href="#">忘记密码</a></span>
        </div>
    </div>
    <!--注册面板-->
    <div class="register-panel panel">
        <h1 class="panel-header ">欢迎注册</h1>
        <div class="panel-middle register-middle">
            <form action="#" class="form">
                <table >
                    <tr>
                        <td class="td_left">用户名</td>
                        <td class="td_right"><input type="text" name="username" id="register_username" placeholder="请输入6-12位用户名"></td>
                        <td><span id="s_username" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">密码</td>
                        <td class="td_right"><input type="password" name="password" id="register_password1" placeholder="请输入密码"></td>
                        <td><span id="s_password1" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">确认密码</td>
                        <td class="td_right"><input type="password" name="password" id="register_password2"  placeholder="请再次输入密码"></td>
                        <td><span id="s_password2" class="error"></span></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><input type="submit" name="submit" class="register-btn panel-btn" value="注册"></td>
                        <td><span id="s_btn" class="error1"></span></td>
                    </tr>
    
                </table>
            </form>
        </div>
        <div class="register-footer">
            <a href="#">返回登录</a>
        </div>
    
    </div>
    <!--修改密码面板-->
    <div class="updatePassword-panel panel">
        <h1 class="panel-header ">重置密码</h1>
        <div class="panel-middle updatePassword-middle">
            <form action="#" class="form">
                <table >
                    <tr>
                        <td class="td_left">用户名</td>
                        <td class="td_right"><input type="text" name="username" id="update_username" placeholder="请输入用户名"></td>
                        <td><span id="s_updateName" class="error"></span></td>
                    </tr>
                    <tr>
                        <td class="td_left">密码</td>
                        <td class="td_right"><input type="password" name="password" id="update_password1" placeholder="请输入密码"></td>
                    </tr>
                    <tr>
                        <td class="td_left">确认密码</td>
                        <td class="td_right"><input type="password" name="password" id="update_password2"  placeholder="请再次输入密码"></td>
                        <td><span id="s_UpdatePassword" class="error"></span></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><input type="submit" name="submit" class="update-btn panel-btn" value="确定"></td>
                        <td><span id="s_update" class="error1"></span></td>
                    </tr>
                </table>
            </form>
    
        </div>
        <div class="update-footer">
            <a href="#">返回登录</a>
        </div>
    
    </div>
    
    
    </body>
    </html>
    

    主页面的html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>学生</title>
        <script src="js/student.js"></script>
        <link rel="stylesheet" href="css/student.css">
    </head>
    <body>
    <div class="main">
        <div class="header">
           <div class="header-first">
               <div class="left-line header-line"></div>
               <h1>学生管理系统</h1>
               <div class="right-line header-line"></div>
           </div>
            <div class="header-bottom">
                <button class="green-button" onclick="add()">新增</button>
                <button class="red-button" onclick="remove()">删除</button>
            </div>
        </div>
        <div class="table">
            <table id="form" cellspacing="0">
    
            </table>
        </div>
        <div class="footer">
            <span class="numInfo">sjjj</span>
            <input type="button" class="green-button" onclick="prevPage()" value="上一页">
            <input type="button" class="red-button" onclick="nextPage()" value="下一页">
        </div>
    </div>
    <div class="hiddenPage"></div>
    <div class="edit">
        <div class="head-title">查看学生信息</div>
        <ul>
            <li><label for="">学号</label><input type="text" class="edit-info"></li>
            <li><label for="">姓名</label><input type="text" class="edit-info"></li>
            <li><label for="">学院</label><input type="text" class="edit-info"></li>
            <li><label for="">专业</label><input type="text" class="edit-info"></li>
            <li><label for="">年级</label><input type="text" class="edit-info"></li>
            <li><label for="">班级</label><input type="text" class="edit-info"></li>
            <li><label for="">年龄</label><input type="text" class="edit-info"></li>
        </ul>
        <div class="edit-btn">
            <button class="edit-submit" ></button>
            <button class="edit-cancel" onclick="cancel()">取消</button>
        </div>
    </div>
    </body>
    </html>
    

    登录页面的css

    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    body>img{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -999;
    }
    .panel{
        width: 300px;
        height: 400px;
        border: 1px solid red;
        margin: 100px auto;
       border-radius: 15px;
        overflow: hidden;
        box-sizing: border-box;
    }
    .login-panel{
        /*display: none;*/
    }
    .panel-header{
        font-size: 30px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        color: deepskyblue;
       border-bottom: #e82c07 1px solid;
    
    }
    .panel-middle{
        height: 300px;
        padding: 20px 10px 20px 10px;
        box-sizing: border-box;
        border-bottom: 1px solid orangered;
    }
    .panel-middle>form tr {
        font-size: 20px;
        color: orangered;
        height: 60px;
        text-align: center;
    }
    .login-panel .panel-middle>form .td_right{
        padding-left: 30px;
        position: relative;
    }
    .td_right>i{
        position: absolute;
        left:30px;top: 50%;
        transform: translateY(-50%);
    }
    .panel-middle>form .td_right>input{
        width: 120px;
        height: 30px;
        border: none;
        background: none;
        outline: none;
        /*border-radius: 10px;*/
        border-bottom: 1px solid red;
        /*margin-left: 10px;*/
        color: orange;
        /*background: rgba(255,255,255,.5);*/
    }
    
    .login-panel input{
    
        padding-left: 20px;
    }
    .panel-middle>form .panel-btn{
        margin-top: 30px;
        width: 120px;
        height: 40px;
        font-size: 30px;
        background: none;
        border-radius: 15px;
        color: orangered;
        border: 2px orangered solid;
    }
    .login-panel>.panel-footer{
        /*background: #31c27c;*/
        height: 40px;
        padding: 0 20px;
        text-align: right;
        line-height: 40px;
        font-size: 20px;
        color: orangered;
    }
     a{
        text-decoration: none;
        color: orangered;
    }
    .register-panel{
        display: none;
    }
    
    .register-footer{
        height: 50px;
        text-align: right;
        line-height: 50px;
        padding-right: 20px;
    }
    .updatePassword-panel{
        display: none;
    }
    
    .update-footer{
        height: 30px;
        text-align: right;
        line-height: 30px;
        padding-right: 20px;
    }
    .error{
        color: red;
        font-size: 10px;
    }
    .error1{
        color: purple;
        font-size: 10px;
        font-weight: bold;
    }
    

    主页面的css

    *{
        margin: 0;
        padding: 0;
    }
    body{
        color: #000;
    }
    .main{
        width: 1200px;
       margin: 0 auto;
       background-color: #f0ece9;
    }
    .main .header-first{
        display: flex;
        justify-content: space-between;
    }
    .main>.header{
        height: 80px;
        /*background-color: orangered;*/
    }
    .header .header-line{
        width: 400px;
        height: 2px;
        margin: 20px 40px;
        background-color: #c8a98c;
    }
    .header h1{
        color: #a0a1a1;
    }
    .header-bottom{
        margin-left: 20px;
        margin-bottom: 10px;
    }
    .green-button{
        color: white;
        background-color: #5cb85c;
        width: 75px;
        height: 30px;
        border: 1px solid black;
    }
    .red-button{
        color: white;
        background-color: #d9534f;
        width: 75px;
        height: 30px;
        border: 1px solid black;
    }
    .table{
        width: 1200px;
        height: 400px;
        /*background-color:red;*/
        margin-top: 9px;
    }
    .footer{
        height: 60px;
        text-align: right;
        position: relative;
    }
    .footer>span{
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
    }
    .footer>input{
        margin-right: 10px;
        margin-top: 30px;
    }
    .hiddenPage{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: none;
    }
    .edit{
        width: 450px;
        height: 400px;
        /*background: url("../images/timg.jfif") no-repeat ;*/
        /*background-size: cover;*/
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: #ccc;
        overflow: hidden;
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        left: 50%;
        border: 1px solid black;
        display: none;
    }
    .edit>.head-title{
        background: #555555;
        width: 100%;
        height: 50px;
        color: white;
        font-size: 30px;
        line-height: 50px;
        text-align: center;
        font-weight: bold;
    }
    .edit>ul{
        margin-top: 30px;
        text-align: center;
        list-style: none;
        /*background: orangered;*/
    }
    .edit>ul>li{
        color: #000;
        height: 40px;
    }
    .edit>ul>li>label{
        margin-right: 20px;
    }
    .edit>ul>li>input{
        width: 150px;
        background: none;
        border: none;
        border-bottom: 1px solid green;
    }
    .edit-btn{
        text-align: right;
    }
    .edit-btn button{
        width: 60px;
        height: 30px;
        margin-right: 30px;
        border: 1px solid #ffffff;
        border-radius: 5px;
    }
    .edit-btn button:nth-child(1){
        background: green;
    }
    
    

    登录页面的js

    window.onload = function () {
        //定义用户类
        class  User{
            constructor(username,password) {
                this.username = username;
                this.password = password;
            }
        }
        let userInfo =[];//定义数组保存用户的用户名和密码信息
        let oLoginPanel = document.querySelector(".login-panel");//登录面板
        let oRegisterPanel = document.querySelector(".register-panel") ;//注册面板
        let oSubmitBtn = document.querySelector(".submit-btn");//登录按钮
        let oRegister = document.querySelector(".toRegister");//去注册链接
        let oRegisterBack = document.querySelector(".register-footer>a");//注册页面的返回登录链接
        let oForgetPassword = document.querySelector(".forgetPassword");//登录面板的忘记密码链接
        let oUpdatePanel = document.querySelector(".updatePassword-panel");//改密面板
         let oUpdateBtn = document.querySelector(".update-btn");//改密页面的确定按钮
        let oUpdateBack = document.querySelector(".update-footer");//改密页面的返回登录链接
        let oRegisterSuccessBtn = document.querySelector(".register-btn");//注册按钮
        //登录按钮的点击事件
        oSubmitBtn.onclick = function (){
            let login_username = document.querySelector("#login_username").value;
            let login_password = document.getElementById("login_password").value;
          if (isInList2(login_username, login_password)) {
              window.location.href = "http://localhost:63342/h5jsCode/src/javascriptCode/%E5%AD%A6%E7%94%9F%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/student.html"
          }else{
              alert("用户名不存在");
          }
          return false;
        }
        //判断是否在数组中的方法
        function isInList2(name,password){
    
            for (let i = 0;i < userInfo.length;i++){
                if (userInfo[i].username === name && userInfo[i].password === password){
                    return true;
                }
            }
            return false;
        }
        //去注册页面的点击事件
        oRegister.onclick = function () {
            oLoginPanel.style.display = 'none';
            oRegisterPanel.style.display = "block";
        }
        // 注册页面的返回登录链接的点击事件
        oRegisterBack.onclick = function () {
            oRegisterPanel.style.display = "none";
            oLoginPanel.style.display = "block";
        }
        //为注册用户名和密码绑定离焦事件
        document.getElementById("register_username").onblur = checkUsername;
        document.getElementById("register_password1").onblur = checkPassword;
        document.getElementById("register_password2").onblur = checkPassword2;
        //注册页面检查用户注册的方法
        function checkUsername(){
            let username = document.getElementById("register_username").value;
            //正则判断
            let reg_username = /^\w{6,12}$/;
            let flag = reg_username.test(username);
            let s_username = document.getElementById("s_username");
            if (flag){
                //若正确格式显示对勾
                s_username.innerHTML =  "<img style='width: 35px;height: 25px' src='images/gou.png'/>";
            }
            else{
                //不正确就报错
                s_username.innerHTML = "用户名格式有误";
            }
            return flag;
        }
        function checkPassword() {
            let password1 = document.getElementById("register_password1").value;
            let reg_password = /^\w{6,12}$/;
    
            let flag = reg_password.test(password1);
            let s_password1 = document.getElementById("s_password1");
            if (flag){
                //提示绿色对
                s_password1.innerHTML =  "<img width='35' height='25' src='images/gou.png'/>";
            }
            else{
                s_password1.innerHTML = "密码格式有误";
            }
            return flag;
        }
        function checkPassword2(){
           let  password1 = document.getElementById("register_password1").value;
            let password2 = document.getElementById("register_password2").value;
            let s_password2 = document.getElementById("s_password2");
            if (password1 === password2){
                //提示绿色对
                s_password2.innerHTML =  "<img width='35' height='25' src='images/gou.png'/>";
            }
            else{
                s_password2.innerHTML = "输入不一样";
            }
            return password1===password2;
    
        }
        oRegisterSuccessBtn.onclick = function (){
            let s_btn = document.getElementById("s_btn");
              if( checkUsername() && checkPassword() && checkPassword2()){
                  //将用户放入数组
                  let password = document.getElementById("register_password1").value;
                  let username = document.getElementById("register_username").value;
                  let user = new User(username,password);
                  userInfo.push(user);
                  //提示注册成功
                  s_btn.innerHTML = "注册成功";
              }
              else{
                  s_btn.innerHTML = "注册失败";
              }
            return false;
        }
        // 登录面板的忘记密码链接的点击事件
        oForgetPassword.onclick = function () {
            oLoginPanel.style.display = 'none';
            oUpdatePanel.style.display = "block";
        }
    
        //改密离焦事件
        document.getElementById("update_username").onblur = checkUpdateUsername;
        document.getElementById("update_password2").onblur = checkPassword3;
        function checkUpdateUsername() {
            let username = document.getElementById("update_username").value;
            if (!isInLIst(username)){
                let s_updateName = document.querySelector("#s_updateName");
                s_updateName.innerHTML = "用户名不存在";
                return false;
            }else {
                return true;
            }
    
        }
        //判断是否在数组里面方法
        function isInLIst(username) {
    
            for (let i = 0;i < userInfo.length;i++){
                if (userInfo[i].username == username){
                    return true;
                }
            }
            return false;
        }
        //检验重置的密码
        function checkPassword3(){
            let updatePassword = document.getElementById("update_password1").value;
            let updatePassword2 = document.getElementById("update_password2").value;
            let s_UpdatePassword = document.getElementById('s_UpdatePassword');
            if (updatePassword === updatePassword2){
                s_UpdatePassword.innerHTML = '正确';
                return true;
            }else{
                s_UpdatePassword.innerHTML = '输入错误';
                return false;
            }
        }
    //改密页面确定按钮的点击事件
        oUpdateBtn.onclick = function(){
            let s_update = document.getElementById("s_update");
            if (checkPassword3()&&checkUpdateUsername()){
                let username = document.getElementById("update_username").value;
                for (let i = 0; i < userInfo.length; i++) {
                    if (username==userInfo[i].username){
                        userInfo[i].password =  document.getElementById("register_password2").value;
    
                        s_update.innerHTML = "改密成功";
                    }
                }
            }
            else {
                s_update.innerHTML = "改密失败";
            }
            return false;
        }
        // 改密页面返回登录事件
        oUpdateBack.onclick = function () {
            oUpdatePanel.style.display = 'none';
            oLoginPanel.style.display = "block";
        }
    
    }
    
    

    主页面的js

    window.onload = function () {
        render();
    }
    class CreateStudent {
        constructor(id,name,college,major,grade,clas,age) {
            this.id = id;
            this.name = name;
            this.college = college;
            this.major = major;
            this.grade = grade;
            this.clas = clas;
            this.age = age;
        }
    
    }
    let stu1 = new CreateStudent("11923020310","郭喵呜","人工智能学院","软件工程","大二","19", "1");
    let stu2 = new CreateStudent("11923020310","郭哈哈","人工智能学院","软件工程","大二","19", "1");
    let stu3 = new CreateStudent("11923020310","郭嘻嘻","人工智能学院","软件工程","大二","19", "1");
    let stu4 = new CreateStudent("11923020310","郭喵喵","人工智能学院","软件工程","大二","19", "1");
    let stu5 = new CreateStudent("11923020310","郭爸爸","人工智能学院","软件工程","大二","19", "1");
    let stu6 = new CreateStudent("11923020310","郭花花","人工智能学院","软件工程","大二","19", "1");
    let stu7 = new CreateStudent("11923020310","郭草草","人工智能学院","软件工程","大二","29", "1");
    let stu8 = new CreateStudent("11923020310","郭嘻哈","人工智能学院","软件工程","大二","119", "1");
    let stu9 = new CreateStudent("11923020310","郭麻麻","人工智能学院","软件工程","大二","19", "1");
    let stu10 = new CreateStudent("19823020310","郭...","人工智能学院","软件工程","大二","19", "1");
    let stu11 = new CreateStudent("19823020310","郭喵呜","人工智能学院","软件工程","大二","19", "1");
    let stu12 = new CreateStudent("19823020310","郭喵呜","人工智能学院","软件工程","大二","19", "1");
    let students =[stu1, stu2,stu3, stu4,stu5,stu6,stu7,stu8,stu9,stu10,stu11,stu12];
    //常用名词
    let list = ["<input type='checkbox' id='check-box' οnclick='checkAll(this)'>",
                "序号","学号","姓名","学院","专业","年级","班级","年龄","操作"];
    let editInfo = document.getElementsByClassName("edit-info");
    let currentPage = 1;
    
    function render() {
        //拿到form
        let oTable = document.getElementById("form");
        //清空表
        oTable.innerHTML = "";
        //生成头部
        let oTr = document.createElement("tr");
        //
        for (let i = 0;i<list.length;i++){
            let oTd = document.createElement("td");
            if (i==0 || i==1){
                oTd.style.width = "45px";
            }
            else {
                oTd.style.width = "175px";
            }
            oTd.style.textAlign = "center";
            oTd.innerHTML = list[i];
            oTr.appendChild(oTd);
        }
        //设置oTr样式并加入table中;
        oTr.style.height = "54px";
        oTr.style.fontSize = "bold";
        oTr.style.backgroundColor = "#dadee1";
        oTable.appendChild(oTr);
        //页码
    
        let pageInfo = document.querySelector(".numInfo");
        pageInfo.innerHTML = `共${students.length}条信息,共${Math.ceil(students.length/10)}页,目前为${currentPage}页`;
        //创建学生条目
        for (let i = (currentPage-1) * 10 ; i < students.length && i<(currentPage*10);i++){
            //创建每一行
            let oBodyTr = document.createElement("tr");
            oBodyTr.style.textAlign = "center";
            oBodyTr.style.height = "35px";
            //颜色
            if (i % 2 == 0) {
                oBodyTr.style.backgroundColor = "#ffffff";
            } else {
                oBodyTr.style.backgroundColor = "#eef1f8";
            }
            //创建表格
            for (let j = 0; j < 10; j++) {
                  oBodyTr.insertCell(j);
            }
            oBodyTr.childNodes[0].innerHTML = "<input type='checkbox' class='checkBoxes' name='boxSituation'/>";
            oBodyTr.childNodes[1].innerHTML = `${i+1}`;
            oBodyTr.childNodes[2].innerHTML = students[i].id;
            oBodyTr.childNodes[3].innerHTML = students[i].name;
            oBodyTr.childNodes[4].innerHTML = students[i].college;
            oBodyTr.childNodes[5].innerHTML = students[i].major;
            oBodyTr.childNodes[6].innerHTML = students[i].grade;
            oBodyTr.childNodes[7].innerHTML = students[i].clas;
            oBodyTr.childNodes[8].innerHTML = students[i].age;
            oBodyTr.childNodes[9].innerHTML = "<a href='#' style='color: red' οnclick='watch("+ i +")'> 查看</a> <a href='#' style='color: red' οnclick='update("+i+")'>修改</a> "
    
            oTable.appendChild(oBodyTr);
        }
    
    
    }
    function add() {
        //调用show方法
        show();
        changHeader(0);
        changeBtn(0);
    
    }
    //显示方法
    function show() {
        document.querySelector(".hiddenPage").style.display = "block";
        document.querySelector(".edit").style.display = "block";
    }
    //隐藏方法
    function hidden() {
        document.querySelector(".hiddenPage").style.display = "none";
        document.querySelector(".edit").style.display = "none";
    }
    //更改弹出框文字的方法
    function changHeader(i) {
        let headTitle = document.querySelector(".head-title");
        if (i==0){
            let headTitle = document.querySelector(".head-title");
            headTitle.innerHTML = "新增学生信息";
        }
        else if (i==1){
            headTitle.innerHTML = "查看学生信息";
        }
        else if (i==2){
            headTitle.innerHTML = "修改学生信息";
        }
    }
    //更改底部按钮的方法
    function changeBtn(i,index) {
        let leftBtn = document.querySelector(".edit-submit");
        if (i==0){
            leftBtn.innerHTML = "提交";
            leftBtn.onclick = submit;
        }
        else if (i==1){
            leftBtn.style.display = "none";
            leftBtn.disabled = true;
        }
        else if(i==2){
            leftBtn.style.display = "inline-block";
            leftBtn.disabled = false;
            leftBtn.innerHTML = "保存";
            leftBtn.onclick = function () {
                if (!confirm("确定保存吗?")){
                    return;
                }
                else{
                    //更换数据
                    students[index].id = editInfo[0].value;
                    students[index].name = editInfo[1].value;
                    students[index].college = editInfo[2].value;
                    students[index].major = editInfo[3].value ;
                    students[index].grade = editInfo[4].value;
                    students[index].clas = editInfo[5].value;
                    students[index].age = editInfo[6].value;
                    //隐藏
                    hidden();
                    render();
                }
    
            }
    
        }
    }
    
    //新增按钮提交方法
    function submit() {
        if (correct()){
            //将表单里信息创建对象并添加到数组里
           let newStudent = new  CreateStudent(editInfo[0].value,editInfo[1].value,editInfo[2].value,editInfo[3].value,editInfo[4].value,editInfo[5].value,editInfo[6].value);
            students.push(newStudent);
           alert("新增成功");
           //隐藏
            hidden();
            //重新创建表
            render();
        }else{
            alert('新增失败');
        }
        //清空
        clearEdit();
    
    }
    //表单验证方法
    function correct() {
       //验证空
        for (let i = 0;i < editInfo.length;i++){
            if (editInfo[i].value == ""){
                alert(list[i+2] + "不能为空");
                return false;
            }
            //验证学号
            let idCheck = /^\d{11}$/;
            if (!idCheck.test(editInfo[0].value)){
                alert("学号必须十一位数字");
                return false;
            }
    
            //验证年龄
            let ageCheck =/^\d{1,2}$/
            if(!ageCheck.test(editInfo[6].value)){
                alert("年龄必须两位数");
                return false;
            }
        }
        return true;
    }
    //清空表的方法
    function clearEdit() {
        for (let i = 0; i < editInfo.length; i++) {
            editInfo[i].value = "";
        }
    }
    //取消按钮
    function cancel() {
        hidden();
        clearEdit();
        for (let i = 0; i < editInfo.length; i++) {
            editInfo[i].disabled = false;
        }
    }
    //上一页
    function prevPage() {
        if (currentPage <=1){
            alert("当前是第一页");
        }else{
            currentPage--;
            render();
        }
    }
    //下一页
    function nextPage() {
        if(currentPage >= Math.ceil(students.length/10)){
            alert("当前最后一页");
        }
        else {
            currentPage++;
            render();
        }
    }
    //插入数据的方法
    function insertInfo(i) {
    
        editInfo[0].value = students[i].id;
        editInfo[1].value = students[i].name;
        editInfo[2].value = students[i].college;
        editInfo[3].value = students[i].major;
        editInfo[4].value = students[i].grade;
        editInfo[5].value = students[i].clas;
        editInfo[6].value = students[i].age;
    }
    //查看方法
    function watch(i) {
        show();
        changHeader(1);
        insertInfo(i);
        changeBtn(1);
        //修改属性
        for (let j = 0; j < editInfo.length; j++) {
            editInfo[j].disabled = true;
        }
    }
    //修改方法
    function update(i) {
        show();
        changHeader(2);
        insertInfo(i);
        changeBtn(2,i);
    }
    //全选按钮
    function checkAll(o) {
        let checkBoxs = document.querySelectorAll(".checkBoxes");
        for (let i = 0; i < checkBoxs.length; i++) {
            checkBoxs[i].checked = o.checked;
        }
    
    }
    //删除方法
    function remove() {
        let checkAll = document.getElementById("check-box");
        let checkBoxs = document.querySelectorAll(".checkBoxes");
        console.log(checkBoxs)
        if (!isChecked()){
            confirm("所选不能为空!");
            return;
        }else{
            //删除当前页面
            if(checkAll.checked){
                let flag = confirm("真的要全部删掉吗?");
                if (!flag){
                    return;
                }
                else{
                    //删除学生
                    students.splice((currentPage-1)*10,10);
                }
                render();
                return;
            }
    
            //删除单个
            for (let i = 0; i < checkBoxs.length; i++) {
                if (checkBoxs[i].checked){
                    let flag = confirm("真的要删掉吗?");
                    if (!flag){
                        return;
                    }
                    else{
                        students.splice((currentPage-1)*10+i,1);
                    }
                }
            }
            render();
        }
    
    }
    //
    function isChecked() {
        let checkBoxs = document.querySelectorAll(".checkBoxes");
        for (let i = 0; i < checkBoxs.length; i++){
            if (checkBoxs[i].checked){
                return true;
            }
        }
        return false;
    
    }
    
    展开全文
  • 系统的实现采用了Node.js的Express架构,开发采用JavaScript,页面显示采用HTML5、CSS、JQuery等技术,MongoDB数据库作为数据管理。通过前期的调研、需求分析,该系统有四大模块;登录模块、作业模块、信息发布模块...
  • 学生管理系统

    2018-04-17 15:36:42
    利用HTML,CSS等技术完成系统web登录界面,基于Java语言完 成各功能模块底层实现,在Eclipse平台上结合Tomcat服务器和MySQL数据库完 成web学生信息管理系统的实现
  • 目录任务简介需求分析系统设计代码实现 任务简介 多用户管理:用户分管理员,学生 网页界面设计:利用HTML和CSS...本学生成绩管理系统分为管理员登录,学生登录,其中管理员可以实现增加学生成绩信息,删除学生成绩信

    任务简介

    • 多用户管理:用户分管理员,学生
    • 网页界面设计:利用HTML和CSS实现客户端前台设计
    • 类间关系的设计、数据库表格设计
    • 数据库数据的增(录入)、删、改、查等基本功能
    • JSP中Requests Response内置对象的使用;
    • 数据库表格结构的生成(SQL脚本)
    • 前台JS校验设计
    • DOM技术实现
    • 开发环境与技术:IDEA、Java 语言、JDK、MySQL

    需求分析

    本学生成绩管理系统分为管理员登录,学生登录,其中管理员可以实现增加学生成绩信息,删除学生成绩信息,修改学生成绩信息,查找学生成绩信息,按照学生GPA进行排名,其中学生可以实现登录查询成绩功能,能否成功登录取决于数据库中是否有该学生。

    系统设计

    学生成绩管理系统具备以下功能:管理员学生分权限登录,增加学生成绩信息,删除学生成绩信息,修改学生成绩信息,查询学生成绩,按照学生GPA进行排名。
    分权限登录:系统分为管理员和学生用户两个权限,因为管理员就一个,所以账号秘密固定,但是学生有很多,所以在学生登录的过程中要对数据库中的学生进行查询,如果存在,而且密码正确,才能成功登录

    增加学生成绩:该功能可以将学生的姓名,学号,一系列成绩,登录密码等信息录入系

    删除学生成绩:该功能可以将学生的信息全部列举出来,然后选择想要删除的学生的信

    修改学生成绩:该功能可以将学生的所有信息全部列举出来,然后再选择想要修改的学生的信息,然后弹出一个修改框,再做仔细的修改

    查询学生成绩信息:该功能可以在输入学号后显示出学生的各项成绩信息

    按照学生GPA进行排名:该功能可以将所有学生按照GPA进行排名,并显示出来

    代码实现

    include file技术

    <html> 
      <head> 
        <title>
          学生成绩管理系统
        </title>
      </head> 
      <body bgcolor="#FFFFFF">
        <%@ include file="include_head_JSP2.jsp"%>
      </body>
    </html>
    

    Bootstrap 框架技术

    <%@page contentType= "text/html; charset=UTF-8" language= "java" errorPage=""%> <!DOCTYPE html>
    <html> 
      <head> 
        <style>
          body{
            background-image: url("1281116171866201.jpg");
          }
        </style>
        <title>学生管理系统</title>
          <meta name= "viewport" content = "width=device-width, initial-scale= 1.0">
          <!-引入Bootstrap->
          <link href="bootstrap.css" rel="stylesheet">
          </head> 
        <body> 
          <center> <hi>学生成绩管理系统</hi></center>   
            <br>
            <center> <div class ="container">
              <a href= "selectLogin .j sp" class= "btn btn-info" role= "button">管理员</a>  
              <a href= "studentLogin.jsp" class= "btn btn-info" role= "button">学生</a> 
              </div></center>
            <!– jQuery (Bootstrap 的 JavaScript 插件需要引⼊ jQuery)> 
            <script src=”jquery-3.2.1.min.js”></script> 
            <!– 包括所有已编译的插件 –> 
            <script src=”bootstrap.min.js”></script> 
        </body> 
    </html>
    

    Bootstrap.css技术
    响应式表格:

    <table class=”table table-condensed table-hover” >
    

    美化按钮:

    <a href=”Findinfo2.jsp” class=”btn btn-info” role=”button”> 返回 </a>
    

    登录界面的校验

    <script language=”javascript” type=””> 
    function checkform() 
    {
      //验证输⼊数据的合法性 
      if (form1.teacherName.value==””)
      {
        alert(” ⽤户名不能为空。”); 
        return false; 
      } 
      if (form1.teacherPassword.value==””) 
      {
        alert(” 密码不能为空。”);
        return false;
      }
    }
    </script>
    

    往数据库写⼊数据的检验

    function checkform()
    {
      //验证输⼊数据的合法性 
      if (form1.id.value==””)
      { 
        alert(” 学号不能为空。”); 
        return false; 
      } 
      if (isNaN(form1.id.value)) 
      { 
        alert(” 学号只能为数字”); 
        return false;
      }
      if (form1.name.value==””) 
      { 
        alert(” 姓名不能为空。”); 
        return false; 
      }
      if (form1.cppstring.value==””)
      { 
        alert(C++ 成绩不能为空。”);
        return false; 
      } 
      if (isNaN(form1.cppstring.value))
      {
        alert(C++ 成绩只能为数字”); 
        return false; 
      }
      else
      { 
        var num=parseFloat(form1.cppstring.value); 
        if (num<0||num>100)
        { 
          alert(C++ 成绩必须在 0-100 之间!”); 
          return false;
        } 
      }
      if (form1.cirstring.value==””) 
      {
        alert(” 电路成绩不能为空。”); 
        return false; 
      } 
      if (isNaN(form1.cirstring.value))
      {
        alert(” 电路成绩只能为数字”); 
        return false; 
      }
      else
      { 
        var num=parseFloat(form1.cirstring.value);
        if (num<0||num>100) 
        {
          alert(” 电路成绩必须在 0-100 之间!”); 
          return false;
        }
      }
      if (form1.Ewritestring.value==””) 
      { 
        alert(” 英语读写成绩不能为空。”); 
        return false;
      }
      if (isNaN(form1.Ewritestring.value))
      {
        alert(” 英语读写成绩只能为数字”);
        return false; 
      } 
      else 
      { 
        var num=parseFloat(form1.Ewritestring.value); 
        if (num<0||num>100)
        { 
          alert(” 英语读写成绩必须在 0-100 之间!”); 
          return false; 
        } 
      } 
      if (form1.Elistenstring.value==””) 
      {
        alert(” 英语听说成绩不能为空。”); 
        return false; 
      } 
      if (isNaN(form1.Elistenstring.value))
      { 
        alert(” 英语听说成绩只能为数字”);
        return false;
      }
      else
      { 
        var num=parseFloat(form1.Elistenstring.value); 
        if (num<0||num>100) 
        { 
          alert(” 英语听说成绩必须在 0-100 之间!”);
          return false;
        } 
      } 
      if (form1.physicsstring.value==””) 
      { 
        alert(” ⼤学物理成绩不能为空。”);
        return false;
      } 
      if (isNaN(form1.physicsstring.value))
      { 
        alert(” ⼤学物理成绩只能为数字”); 
        return false; 
      }
      else 
      {
        var num=parseFloat(form1.physicstring.value); 
        if (num<0||num>100) 
        {
          alert(” ⼤学物理成绩必须在 0-100 之间!”);
          return false;
        }
      } 
      if (form1.prostring.value==””)
      { 
        alert(” 概率论成绩不能为空。”); 
        return false; 
      } 
      if (isNaN(form1.prostring.value))
      {
        alert(” 概率论成绩只能为数字”); 
        return false; 
      }
      else 
      {
        var num=parseFloat(form1.prostring.value);
        if (num<0||num>100)
        {
          alert(” 概率论成绩必须在 0-100 之间!”);
          return false; 
        } 
      }
      if (form1.hisstring.value==””) 
      { 
        alert(” 近代史成绩不能为空。”); 
        return false; 
      }
      if (isNaN(form1.hisstring.value)) 
      {
        alert(” 近代史成绩只能为数字”); 
        return false;
      } 
      else { 
        var num=parseFloat(form1.hisstring.value); 
        if (num<0||num>100) 
        { 
          alert(” 近代史成绩必须在 0-100 之间!”);
          return false; 
        } 
      }
      if (form1.xingzhengstring.value==””)
      { 
        alert(” 形势与政策成绩不能为空。”);
        return false; 
      } 
      if(isNaN(form1.xingzhengstring.value))
      {
        alert(” 形势与政策成绩只能为数字”); 
        return false;
      } 
      else
      { 
        var num=parseFloat(form1.xingzhengstring.value); 
        if (num<0||num>100)
        { 
          alert(” 形势与政策成绩必须在 0-100 之间!”); 
          return false; 
        } 
      }
      if (form1.pestring.value==””) 
      { 
        alert(” 体育成绩不能为空。”); 
        return false; 
      } 
      if (isNaN(form1.pestring.value)) 
      { 
        alert(” 体育成绩只能为数字”);
        return false; 
      }
      else 
      { 
        var num=parseFloat(form1.pestring.value); 
        if (num<0||num>100) 
        { 
          alert(” 体育成绩必须在 0-100 之间!”); 
          return false; 
        } 
      }
      if (form1.discretestring.value==””) 
      { 
        alert(” 离散数学成绩不能为空。”); 
        return false;
      } 
      if (isNaN(form1.discretestring.value)) 
      { 
        alert(” 离散数学成绩只能为数字”);
        return false;
      }
      else 
      { 
        var num=parseFloat(form1.discretestring.value); 
        if (num<0||num>100)
        { 
          alert(” 离散数学成绩必须在 0-100 之间!”); 
          return false;
        } 
      }
      if (form1.rank.value==””) 
      { 
        alert(” 查询密码成绩不能为空。”);
        return false;
      } 
      if (form1.rank.value.length<1||form1.rank.value.length>20) 
      {
        alert(” 密码超出了范围(120)”); 
        return false; 
      }
    }
    </script>
    

    DOM 关键技术及应用

    <script language=”javascript” type=””> 
      function checkform() 
    {
      //验证输⼊数据的合法性 
      if (form1.teacherName.value==””) 
      { 
        alert(” ⽤户名不能为空。”); 
        return false; 
      }
      if (form1.teacherPassword.value==””) 
      { 
        alert(” 密码不能为空。”);
        return false;
      }
    } 
    </script>
    

    数据库脚本

    CREATE TABLE ‘grade‘ ( 
      ‘id‘ varchar(30) NOT NULL, 
      ‘name‘ varchar(30) NOT NULL, 
      ‘cpp‘ varchar(30) NOT NULL,
      ‘circuit‘ varchar(30) NOT NULL, 
      ‘Ewrite‘ varchar(30) NOT NULL, 
      ‘Elisten‘ varchar(30) NOT NULL, 
      ‘physics‘ varchar(30) NOT NULL, 
      ‘probability‘ varchar(30) NOT NULL,
      ‘history‘ varchar(30) NOT NULL,
      ‘xingzheng‘ varchar(30) NOT NULL,
      ‘pe‘ varchar(30) NOT NULL, 
      ‘discrete‘ varchar(30) NOT NULL, 
      ‘overall‘ varchar(30) DEFAULT0, 
      ‘gpa‘ varchar(30) DEFAULT0,
      ‘rank‘ varchar(30) DEFAULT0)
    

    增删改查功能实现
    增加学生成绩信息

    String idstring=ChangeEncoding(request.getParameter(”id”).trim()); 
    String namestring=ChangeEncoding(request.getParameter(”name”).trim());
    String cppstring=request.getParameter(”cppstring”); 
    String cirstring=request.getParameter(”cirstring”); 
    String Ewritestring=request.getParameter(”Ewritestring”);
    String Elistenstring=request.getParameter(”Elistenstring”); 
    String physicsstring=request.getParameter(”physicsstring”);
    String prostring=request.getParameter(”prostring”);
    String hisstring=request.getParameter(”hisstring”); 
    String xingzhengstring=request.getParameter(”xingzhengstring”);
    String pestring=request.getParameter(”pestring”);
    String discretestring=request.getParameter(”discretestring”); 
    String overallstring=getOvarall(cppstring,cirstring,Ewritestring,Elistenstring, physicsstring,prostring,hisstring,xingzhengstring,pestring,discretestring); String gpastring=getGPA(cppstring,cirstring,Ewritestring,Elistenstring, physicsstring,prostring,hisstring,xingzhengstring,pestring,discretestring); String rankstring=request.getParameter(”rank”); 
    //构造 SQL 语句 
    Stringsql=”insertintograde(id,name,cpp,circuit,Ewrite,Elisten,physics,probability,history,xingzheng”+,pe,discrete,overall,gpa,rank)+VALUES(’”+idstring+”’,’”+namestring+”’,’”+cppstring+”’,’”+cirstring+”’,’”+Ewritestring+”’,’”+Elistenstring+”’,’”+physicsstring+”’,’”+prostring+”’,’”+hisstring+”’,’”+xingzhengstring+”’,’”+pestring+”’,’”+discretestring+”’,’”+overallstring+”’,’”+gpastring+”’,’”+rankstring+”’); 
    String DBDRIVER = ”org.gjt.mm.mysql.Driver” ; 
    // 定义 MySQL 数据库的连接地址 
    String DBURL = ”jdbc:mysql://localhost:3306/student”; 
    // MySQL 数据库的连接⽤户名 
    String DBUSER = ”root” ;
    // MySQL 数据库的连接密码
    String DBPASS = ”xzk520521”;
    try { 
      Class.forName(DBDRIVER).newInstance();
    } 
    catch (ClassNotFoundException e) {
      out.print(” 错误”); e.printStackTrace();
    }
    try { 
      Connection conn=DriverManager.getConnection(DBURL, DBUSER, DBPASS); 
      Statement stmt=conn.createStatement(); 
      stmt.executeUpdate(sql); 
      out.print(<center>);
      out.println(<P><font size=2>+” 向数据库增加学⽣信息”+</font>); 
      out.println(<P><font size=2>+” 该学⽣信息数据已经成功添加到数据库。”+</font>);
      out.print(</center>); 
      stmt.close(); 
      conn.close(); 
    } 
    catch(SQLException e) { 
      out.print(” 错误”); 
      e.printStackTrace(); 
    }
    

    删除学生成绩

    String DBDRIVER = ”org.gjt.mm.mysql.Driver” ;
    // 定义 MySQL 数据库的连接地址
    String DBURL = ”jdbc:mysql://localhost:3306/student”; 
    // MySQL 数据库的连接⽤户名 
    String DBUSER = ”root” ; 
    // MySQL 数据库的连接密码 
    String DBPASS = ”xzk520521”; 
    String id=codeToString(request.getParameter(”id”).trim());
    //构造 SQL 语句 
    String sql=delete from grade where id=’”+id+”’”; 
    try { 
      Class.forName(DBDRIVER).newInstance(); 
    } 
    catch (ClassNotFoundException e) { 
      out.print(” 错误”); 
      e.printStackTrace();
    } 
    try{ 
      Connection conn=DriverManager.getConnection(DBURL, DBUSER, DBPASS);
      Statement stmt=conn.createStatement();
      stmt.executeUpdate(sql); 
      out.print(<center>); 
      out.println(<P><font size=2 color=’blue’>+” 向数据库删除学⽣信息数据”+</font>); 
      out.println(<P><fontsize=2>+”学号为:”+id+”的学⽣数据信息已经被成功删除。”+</font>); 
      out.print(</center>); 
      stmt.close();
      conn.close(); 
    }
    catch(SQLException e) { 
      out.print(” 错误”); 
      e.printStackTrace(); 
    }
    查找学生成绩信息
    
    String DBDRIVER = ”org.gjt.mm.mysql.Driver” ; 
    // 定义 MySQL 数据库的连接地址 
    String DBURL = ”jdbc:mysql://localhost:3306/student” ; 
    // MySQL 数据库的连接⽤户名 
    String DBUSER = ”root” ; 
    // MySQL 数据库的连接密码 
    String DBPASS = ”xzk520521”; 
    String id=request.getParameter(”id”); 
    String sql=”select * from grade where id=’”+id+”’”;
    //设置查询 SQL 语句
    try { 
      Class.forName(DBDRIVER).newInstance();
        } 
    catch (ClassNotFoundException e) {
      out.print(” 错误”);
      e.printStackTrace(); 
    } 
    try {
      Connection conn=DriverManager.getConnection(DBURL, DBUSER, DBPASS);
      Statement stmt=conn.createStatement();
      ResultSet rs=stmt.executeQuery(sql); 
      if(!rs.next()) { 
        out.print(<center>); 
        out.println(<P><fontsize=2color=’blue’>+”该学⽣尚未录⼊系统,请前去录⼊!”+</font>);
      }
      else{ 
        dec.idField.setText(rs.getString(”id”)); 
        dec.nameField.setText(rs.getString(”name”));
        dec.cppField.setText(rs.getString(”cpp”)); 
        dec.cirField.setText(rs.getString(”circuit”)); 
        dec.EwriteField.setText(rs.getString(”Ewrite”)); 
        dec.ElistenField.setText(rs.getString(”Elisten”)); 
        dec.phyField.setText(rs.getString(”physics”)); 
        dec.proField.setText(rs.getString(”probability”)); 
        dec.historyField.setText(rs.getString(”history”)); 
        dec.xingzhengField.setText(rs.getString(”xingzheng”)); 
        dec.peField.setText(rs.getString(”pe”)); 
        dec.discreteField.setText(rs.getString(”discrete”)); 
        dec.overallField.setText(rs.getString(”overall”)); 
        dec.gpaField.setText(rs.getString(”gpa”)); 
      }
      rs.close(); 
      stmt.close(); 
      conn.close();
    }
    catch (SQLException e) { 
      e.printStackTrace(); 
    }
    

    修改学生成绩信息

    String idstring=ChangeEncoding(request.getParameter(”id”).trim()); 
    String namestring=ChangeEncoding(request.getParameter(”name”).trim()); 
    String cppstring=request.getParameter(”cpp”); 
    String cirstring=request.getParameter(”circuit”); 
    String Ewritestring=request.getParameter(”Ewrite”); 
    String Elistenstring=request.getParameter(”Elisten”); 
    String physicsstring=request.getParameter(”physics”); 
    String prostring=request.getParameter(”probability”);
    String hisstring=request.getParameter(”history”);
    String xingzhengstring=request.getParameter(”xingzheng”);
    String pestring=request.getParameter(”pe”);
    String discretestring=request.getParameter(”discrete”); 
    Stringoverallstring=getOvarall(cppstring,cirstring,Ewritestring,Elistenstring,physicsstring,prostring,hisstring,xingzhengstring,pestring,discretestring); 
    Stringgpastring=getGPA(cppstring,cirstring,Ewritestring,Elistenstring,physicsstring,prostring,hisstring,xingzhengstring,pestring,discretestring); 
    String rankstring=request.getParameter(”rank”); 
    String DBDRIVER = ”org.gjt.mm.mysql.Driver” ; 
    // 定义 MySQL 数据库的连接地址 
    String DBURL = ”jdbc:mysql://localhost:3306/student” ; 
    // MySQL 数据库的连接⽤户名 
    String DBUSER = ”root” ; 
    // MySQL 数据库的连接密码 
    String DBPASS = ”xzk520521”; 
    String id=ChangeEncoding(request.getParameter(”id”).trim());
    //构造 SQL 语句 
    Stringsql=”updategradesetid=’”+idstring+”’,name=’”+namestring+”’,cpp=’”+cppstring+”’,circuit=’”+cirstring+”’,Ewrite=’”+Ewritestring+”’,Elisten=’”+Elistenstring+”’,physics=’”+physicsstring+”’,probability=’”+prostring+”’,history=’”+hisstring+ ”’,xingzheng=’”+xingzhengstring+”’,pe=’”+pestring+”’,discrete=’”+discretestring+”’,overall=’”+overallstring+”’,gpa=’”+ gpastring+”’,rank=’”+ rankstring+”’where id=’”+id+”’”; 
    try {
      Class.forName(DBDRIVER).newInstance();
    } 
    catch (ClassNotFoundException e) {
      out.print(” 错误”); 
      e.printStackTrace();
    }
    try {
      Connection conn=DriverManager.getConnection(DBURL, DBUSER, DBPASS);
      Statement stmt=conn.createStatement();
      stmt.executeUpdate(sql);
      out.print(<center>); 
      out.println(<P><font size=2 color=’blue’>+” 向数据库修改学⽣信息数据”+</font>); out.println(<P><fontsize=2>+”学号为:”+id+”的学⽣数据信息已经被成功修改。”+</font>); 
      out.print(</center>); 
      stmt.close();
      conn.close();
    } 
    catch(SQLException e) {
      out.print(” 错误”); 
      e.printStackTrace(); 
    }
    

    显⽰——按照学⽣的 GPA 进⾏排名并打印

    <% String DBDRIVER = ”org.gjt.mm.mysql.Driver” ; 
    // 定义 MySQL 数据库的连接地址
    String DBURL = ”jdbc:mysql://localhost:3306/student” ; 
    // MySQL 数据库的连接⽤户名 
    String DBUSER = ”root” ; 
    // MySQL 数据库的连接密码 
    String DBPASS = ”xzk520521”; 
    int realrank=1; 
    String sql=”select * from grade ORDER BY gpa DESC;
    //设置查询 SQL 语句 
    try { 
      Class.forName(DBDRIVER).newInstance();
    }
    catch (ClassNotFoundException e) {
      out.print(” 错误”);
      e.printStackTrace(); 
    } 
    try {
      Connection conn=DriverManager.getConnection(DBURL, DBUSER, DBPASS); 
      Statement stmt=conn.createStatement(); 
      ResultSet rs=stmt.executeQuery(sql); 
      %> 
        <center><h1> 学⽣成绩 GPA 排名表 </h1></center> 
          <hr> 
          <table class=”table table-condensed table-hover” > 
            <thead> 
            <tr > 
            <th> 学号 </th> 
      <th> 姓名 </th> 
      <th>C++ 成绩 </th> 
      <th> 电路成绩 </th>
      <th> 英语读写 </th> 
      <th> 英语听说 </th>
      <th> ⼤学物理 </th> 
      <th> 概率论 </th>
      <th> 近代史 </th> 
      <th> 形势与政策 </th>
      <th> 体育 </th>
      <th> 离散数学 </th>
      <th> 总分 </th>
      <th>GPA</th> 
      <th> 排名 </th> 
      </tr> 
      </thead> 
      <% 
        while (rs.next()){
          //获取学⽣数据表中的记录
          %> 
            <tr > 
            <td><%=rs.getString(”id”)%></td> 
          <td><%=rs.getString(”name”)%></td> 
          <td><%=rs.getString(”cpp”)%></td> 
          <td><%=rs.getString(”circuit”)%></td>
          <td><%=rs.getString(”Ewrite”)%></td> 
          <td><%=rs.getString(”Elisten”)%></td> 
          <td><%=rs.getString(”physics”)%></td>
          <td><%=rs.getString(”probability”)%></td> 
          <td><%=rs.getString(”history”)%></td>
          <td><%=rs.getString(”xingzheng”)%></td> 
          <td><%=rs.getString(”pe”)%></td>
          <td><%=rs.getString(”discrete”)%></td>
          <td><%=rs.getString(”overall”)%></td> 
          <td><%=rs.getString(”gpa”)%></td> 
          <td><%=realrank++%></td>
          </tr> 
          <%
        } 
          rs.close(); 
          stmt.close();
          conn.close(); 
        } 
      catch (SQLException e){ 
        e.printStackTrace();
      } 
      %> 
        </table>
    

    Java-Serviet设计与实现
    userLoginCheckFilter.java

    package mywebapp; 
    import java.io.IOException; 
    import java.util.ArrayList; 
    import java.util.List; 
    import javax.servlet.FilterConfig;
    import javax.servlet.ServletException; 
    import javax.servlet.Filter; 
    import javax.servlet.FilterChain; 
    import javax.servlet.ServletRequest; 
    import javax.servlet.ServletResponse; 
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession; 
    public class userLoginCheckFilter implements Filter { 
      public static final Stringloginpage = ”index.jsp”;
      public void destroy(){ 
      }
      public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws ServletException, IOException { 
        HttpServletRequest request = (HttpServletRequest)servletRequest; 
        HttpServletResponse response = (HttpServletResponse)servletResponse;
        String currentURL = request.getRequestURI();
        String ctxPath = request.getContextPath(); 
        //除掉项⽬名称时访问页⾯当前路径
        String targetURL = currentURL.substring(ctxPath.length()); 
        System.out.println(targetURL); 
        List<String>info = new ArrayList<String>();
        HttpSession session = request.getSession(false);
        //对当前页⾯进⾏判断,如果当前页⾯不为登录页⾯
        if(!((/index.jsp”.equals(targetURL)) || 
             (/selectLogin.jsp”.equals(targetURL)) ||
             (/studentLogin.jsp”.equals(targetURL)))){ 
          //在不为登陆页⾯时,再进⾏判断,如果不是登陆页⾯也没有 session 则跳转到登录页⾯
          if(session == null || session.getAttribute(”admin”) == null){ 
            info.add(”You are not logged in!); 
            request.setAttribute(”info”,info); 
            request.getRequestDispatcher(loginpage).forward(request,response); 
            return; 
          }
          else{ 
            //这⾥表⽰正确,会去寻找下⼀个链,如果不存在,则进⾏正常的页⾯跳转 
            filterChain.doFilter(request, response);
            return; 
          } 
        }
        else{ 
          //这⾥表⽰如果当前页⾯是登陆页⾯,跳转到登陆页⾯ 
          try{ 
            filterChain.doFilter(request, response);
          }
          catch (Exception e){ 
            throw e;
          }
          return; 
        } 
      } 
      public void init(FilterConfig filterConfig)throws ServletException{    
      }
    }
    

    web.xml ⽂件

    <?xml version=1.0” encoding=UTF-8?> 
    <web-app xmlns=”http://xmlns.jcp.org/xml/ns/javaee” version=3.1>
    <filter> 
      <filter-name>userLoginCheckFilter</filter-name> 
      <filter-class>mywebapp.userLoginCheckFilter</filter-class>
    </filter> 
      <filter-mapping> 
        <filter-name>userLoginCheckFilter</filter-name> 
        <url-pattern>*.jsp</url-pattern> 
      </filter-mapping> 
    </web-app>
    

    JSP内置对象的使用
    本成绩管理系统用了4种JSP内置对象,分别是Request、Response、Out、Session。
    Request

    String idstring=ChangeEncoding(request.getParameter(”id”).trim()); 
    String namestring=ChangeEncoding(request.getParameter(”name”).trim()); 
    String cppstring=request.getParameter(”cpp”); 
    String cirstring=request.getParameter(”circuit”);
    String Ewritestring=request.getParameter(”Ewrite”); 
    String Elistenstring=request.getParameter(”Elisten”); 
    String physicsstring=request.getParameter(”physics”);
    String prostring=request.getParameter(”probability”); 
    String hisstring=request.getParameter(”history”);
    String xingzhengstring=request.getParameter(”xingzheng”); 
    String pestring=request.getParameter(”pe”); 
    String discretestring=request.getParameter(”discrete”);
    

    Response

    response.sendRedirect(”teacharMenu.jsp”);
    

    Out

    out.print(<center>); 
    out.println(<P><font size=2 color=’blue’>+” 管理员⽤户或密码错误”+</font>);
    

    Session

    session.setAttribute(”teacherName”,name); session.setAttribute(”teacherPassword”,password); 
    String user=(String)session.getAttribute(”teacherName”); 
    String pwd=(String)session.getAttribute(”teacherPassword”);
    

    多用户管理设计与实现
    首先进入系统时出现选择用户,如果选择管理员需要知道管理员账号密码,如果选择学生, 需要该学生的学号在数据库中而且密码正确。

    运行效果:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    总结:该项目源码来自转载,但环境是自己配置的,很复杂,涉及到eclipse里的组件安装,项目中添加包,连接mysql,连接tomcat等等,期间遇到了很多问题,百度了很多次,看了很多博客,最后才将环境配置好,不过对于整个项目的运行,和源码的意义和作用还是一知半解。
    转载于:https://www.write-bug.com/article/1433.html

    展开全文
  • 大家好,今天和大家分享一下自己开发一个大学生社团活动管理系统。咱不做语言上巨人行动上矮子,直奔主题吧! 主页面 前端用Sublime Text3这个编译器编写代码,其实Visual Studio Code这个编译器也不错...

    HTML+CSS+JSP+JS实现课设大学生社团活动管理系统

    大家好,今天和大家分享一下自己开发的一个大学生社团活动管理系统。咱不做语言上的巨人行动上的矮子,直奔主题吧!

    源文件来啦 抱歉让大家久等啦 喜欢就给我一个眼花缭乱的赞趴~~

    链接:https://pan.baidu.com/s/1yeEIEpqEILqc5jG6Eiu5sw
    提取码:37ko

    题目

    大学生社团活动管理系统
    

    选题背景:某大学社团的在线网站,包括社团的信息管理与活动发起、参与等内容。
    功能需求:大学生社团活动管理系统的使用者有超级管理员、社团负责人、一般学生等角色。主要包括社团管理子系统、社团人员管理子系统、社团活动管理子系统三个组成部分,具体要求如下。
    1、 社团管理子系统
    社团管理子系统主要包括社团的社团的创建、删除、信息修改;以及对应社团页面的创建。
    超级管理员
    登录功能:在网站后台通过验证用户密码,验证成功后可以登录。
    社团信息的增删改查:登录后可操作社团信息:包括社团名称、社团介绍文字、社团介绍 图片、社团负责人等内容。
    根据社团信息,并添加少量布局数据,系统(自动)生成社团页面,当生成了社团页面后,主页(自动)增加跳转到该社团页面的连接。
    一般学生
    在社团主页进行留言,对社团添加印象标签。
    社团负责人/社团助理:
    可对以上留言信息删除。
    2、社团人员管理子系统
    系统中可以对相关角色及其信息进行操作。
    超级管理员:
    (1) 登录功能:在网站后台通过验证用户密码,验证成功后可以登录。
    (2) 增加,修改社团负责人,当社团没有负责人时应提示增加,每个用户最多担当一个社团负责人。
    社团负责人/社团助理:
    (1) 注册和找回:通过姓名、学号、邮箱进行注册,可通过邮箱找回密码。
    (2) 登录功能:通过验证用户密码,验证成功后可以登录。
    (3) 设置个人信息:设置昵称、头像、班级、个性签名等信息。
    (4) 社团负责人可以增加、删除社团助理。每个用户最多担当2个社团助理。
    (5) 社团负责人和助理可以受理一般学生申请加入社团。
    一般学生:
    (1) 注册和找回:通过姓名、学号、邮箱进行注册,可通过邮箱找回密码。
    (2) 登录功能:通过验证用户密码,验证成功后可以登录。
    (3) 设置个人信息:设置昵称、头像、班级、个性签名等信息。
    (4) 可以申请成为社团助理。
    (5) 可以申请/退出参加社团。
    3、社团活动管理子系统
    该系统用于完成社团活动的组织管理。
    超级管理员:
    (1) 维护社团活动信息的格式,社团活动的人数限制,时间限制等等。
    社团负责人/社团助理:
    (1) 社团负责人和助理可以对活动信息进行改查,社团负责人可以发布、取消社团活动,社团负责人可以设置活动参加权限,如:是否只针对本社团成员,是否只针对某些年级等等。
    (2) 可以开放/关闭社团活动的讨论,可以删除该活动讨论中的留言。
    (3) 可以查看社团活动的统计信息,如人数、性别、年级等分布。
    一般学生:
    (1) 可以申请/退出参加社团活动。
    (2) 可以对开放讨论的社团活动进行讨论。
    4、活动推荐子系统
    该系统用于给一般超级管理员以外的用户推荐当前的有一些社团活动。
    超级管理员:
    (1) 可以开放或关闭该推荐系统。
    社团负责人/社团助理:
    (1) 社团负责人可以发布活动时可以设置关键词。(例如3个关键词)
    一般学生:
    (1) 可以设置是否接收推荐信息。
    说明:该系统推荐使用算法为“协同过滤算法”,可采用基于用户的协同过滤,可以将“关键词”视为“商品”以提高执行效率。相关参考资料:https://blog.csdn.net/u014473918/article/details/79771558
    技术要求 11. 基于MVC模式,运用JSP、JavaBean、HTML、CSS、Javascript等技术实现所设计的系统;
    12. 使用SQL Server或MySQL作为后台数据库,依据数据库设计过程及规范,设计数据库表结构及主外键关系,并结合功能需求适当设计存储过程和触发器;
    13. 采用面向对象设计方法学,运用所学的面向对象分析设计方法,以及对应的工具对系统进行分析与设计建模;
    14. 基于模块化编程思想,程序源文件应划分为相应package,组织层次清晰;
    15. 遵循程序设计编码规范,标识符应命名规范、代码注释充分、排版风格良好;
    16. 使用JS对表单提交的数据及格式进行校验(是否为空、是否为数字等等)
    17. 要求系统具有良好的安全性,能有效防止非法登录用户访问需授权网页。
    18. 系统具有良好的人机交互界面,界面应布局清晰、简洁大方。
    19. 系统具有较好的可操作性,界面友好。(例如:民族、部门、学院、班级等信息通过下来列表展示)
    20. 系统具有良好的健壮性。例如:用户输入错误或者不按流程操作时系统不会异常退出。

    主页面

    前端用的Sublime Text3这个编译器编写的代码,其实Visual Studio Code这个编译器也不错,笔者认为这是两个最好用的前端开发工具了。
    在这里插入图片描述

    这个是登录注册界面

    ,一比一还原并模仿了小红书的登录界面,然后又窃取了知乎的登录界面背景做该系统的背景。
    在这里插入图片描述

    在这里插入图片描述

    后台管理界面

    在这里插入图片描述

    ## 功能快捷键

    具体到某个社团的页面

    文字内容是网上复制的一段话,图片可根据需要自行替换。
    在这里插入图片描述

    用户个人中心页面

    在这里插入图片描述
    登录注册界面代码
    在这里插入图片描述

    展开全文
  • 学生功能主要有:注册、登录、浏览课程、选择课程、退出课程、搜索课程信息、查看热门课程、查看已选课程、查看个人资料、编辑个人信息等。 教秘端(管理员端)功能主要有:开设专业管理、学生信息管理、教师...
  • 一 需求分析利用c语言链表或结构体数组实现学生信息管理,编写有登录界面的学生信息管理系统,可以实现学生信息录入,显示,删除,排序,统计,文件读写等功能。 源码下载地址:...
  • 主要功能说明: 管理员...学生角色包含以下功能:登录界面,选课,确认选课,查看选课结果,退选界面,查看已修课程,管理个人信息等功能。 用了技术框架: HTML+CSS+JavaScript+jsp+mysql+Spring+SpringMVC+mybatis+maven
  • 基于HTML+Servlet开发一个小型管理学生信息Web系统,要求:1)服务器端使用文件保存所有学生信息,包括:学号、姓名、性别、所在学院、系统密码;2)提供学生登录的界面,可以获取客户端发送学生学号和密码...
  • 本项目为2020年实战学生志愿填报信息管理系统的前端部分原始代码,基于html + js + jquery + bootstrap。使用ajax向重定向发送请求,获取json字符串后展示在html界面上。 二。文件说明 文件 描述 index.html 后台...
  • 设计学生学籍管理系统

    热门讨论 2009-07-05 18:28:22
    它除拥有其他开发平台的界面制作的优秀控件之外,以应用系统的工作窨(WorkSpace)为框架,以数据窗口控件和数据窗口对象作为数据库应用系统开发的核心,通过这两个控件和使用,并结合其他控件的辅助功能,用户可以...
  • 1.团队课程设计博客链接 ...登录界面学生信息管理系统添加,编辑及修改功能 注册界面学生信息管理系统界面,删除及搜索功能 3.自己代码提交记录截图 4.自己负责模块或任务详细说明 注册界面:先填写用...
  • Java+Access学生成绩管理系统

    热门讨论 2009-01-08 14:28:42
    本系统是一个简易的学生成绩管理系统,采用JSP+Access设计方式,系统的主要功能包括:新用户注册功能,用户登录功能,能根据用户登录的身份(管理员和用户)不同显示不同的界面。当作为普通用户登录时,可以进行各科...
  • 帐户供学生登录并查看自己页面 管理员可以通过Django管理界面登录并查看所有人 就能使用Github OAuth 关于计划 freeCodeSchool是一个非营利性编码程序,可免费教人们编码基础知识。 它设置为以两个不同级别(1...
  • 基于初步开发的学生健康管理系统,开展学生体质测试大数据可视化分析,分析当代大学生运动情况与体质改善量化关系,对人群进行聚类、分类,并开发各种有效分析工具,包括有效上卷、下钻OLAP工具。...
  • 界面设计高仿超级课程表。主要是做了一个社团管理系统。 使用技术主要是前端:html+css+js 模板采用ejs 后端使用node+express 数据存储使用了leancloud。 做毕业设计,课程设计或者正在学习相关技术知识朋友可以...
  • 5.1.1登录界面与模块设计 17 5.1.2学生信息管理模块 18 5.1.3班级管理模块 18 5.1.4科目管理模块 19 5.1.5成绩管理模块 20 5.2代码设计分析 21 5.2.1登陆界面的部分代码设计 21 5.2.2学生信息管理模块部分代码设计 ...
  • 1.团队课程设计博客链接 http://www.cnblogs.com/handsome321/p/7067121.html ...①登录界面登录的界面分为两种,一种是学生界面,一种是管理员界面,两种界面分别实现功能不相同。 ②插入功能:由新...
  • 为了熟悉Django框架流程,自己写了个管理系统界面仅通过html实现,简陋至极) 一、基本流程 首先这是一个最简单流程 #mermaid-svg-5IqZuGJrWBUQh7xE .label { font-family: 'trebuchet ms', verdana, ...
  • 将一个用原生php语言写好选课系统用tp5搭建,根据学生/老师不同身份实现不同功能。主要是想学习后端技能,所以前端页面很简陋。 因为初学,所以需要花一些时间摸索。 (一)、登录界面实现 目标:实现后台...
  • java程序设计----学生基本信息管理系统 1. 团队课程设计博客链接 http://www.cnblogs.com/hyy786030686/p/7063890.html 2. 个人负责模块或任务说明 --登录界面的设计 --用户名和密码验证 3. 自己...
  • 已做:后台java代码、把后台及登录界面、注册界面、超管界面和跳转到主界面代码写好、实现登录注册数据库管理、登录身份验证和登录类型验证(是否是管理员),根据不同身份跳转到不同主界面、超级管理员用户管理...
  • 已做:后台java代码、把后台及登录界面、注册界面、超管界面和跳转到主界面代码写好、实现登录注册数据库管理、登录身份验证和登录类型验证(是否是管理员),根据不同身份跳转到不同主界面。 准备做:超级管理员...
  • 已做:后台java代码、把后台及登录界面、注册界面、超管界面和跳转到主界面代码写好、实现登录注册数据库管理。 准备做:登录身份验证和登录类型验证(是否是管理员),根据不同身份跳转到不同主界面。 遇到...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 125
精华内容 50
关键字:

学生登录系统的html界面