Web的Java开发基础分享——学生信息管理系统（一）

如约，今天开始更新JavaWeb的内容。

要写在前面的背景是博主过几天有JavaWeb的考试，题目是在时限内开发出一个覆盖学期学习内容及以外知识的小网页。

选题为“学生信息管理系统”的原因是因为其可以涵盖大部分的JavaWeb基础知识，又是比较传统的选题，不至于喧宾夺主，毕竟我们的重点的JavaWeb学习。

开发环境是NetBeans IDE 8.2 和 jdk 1.8。

那么，冒险开始~

首先，你进入“学生信息管理系统”最先想看到的会是什么呢？希望我们的想法是一样的，毋庸置疑，劈头盖脸先丢给用户一个欢迎页面，“嘿，兄弟，欢迎你啊~你受到我们的重视了哦！”

这个页面很简洁，相信你可以很简单的敲出这一段代码，如下：

<!--这里是index.hetml-->
<!DOCTYPE html>
<html>
    <head>
        <title>学生信息管理系统</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0, 
              minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    </head>
    <body>
        <h1 align="center">欢迎使用学生管理系统</h1>
        <a href="login.jsp"><h2 align="center">点击进入</h2></a>
    </body>
</html>

但还是有需要提一下，这里我写入了一句：

        <meta name="viewport" content="width=device-width,initial-scale=1.0, 
              minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

这一句的作用是可以手机自适应，以下的几个页面我也都添加了这一句代码，后面就不再赘述。

好了，接下来我们点击“点击进入”之后页面要跳转到哪里呢？

正常想法应该就到登录页面啦，博主就是正常的想法。

这个页面也不难，但相较上一个页面，东西还是多了些，我们来瞧一瞧它的代码：

<!--这里是login.jsp-->
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>学生信息管理系统</title>
    <script type="text/javascript">
            function validate_form() {
                var name = document.getElementById("username").value;
                var password = document.getElementById("password").value;
                if (name == null || name == "") {
                    alert("姓名不能为空");
                    return false;
                }
                if (password == null || password == "") {
                    alert("密码不能为空");
                    return false;
                }
                return true;
            }
    </script>
    </head>
    <body>
        <h2 align="center">学生登录</h2>
        <div style="width:100%;text-align:center">
            <form action="pages/displayStuList.jsp" onsubmit="return validate_form()" method="post">
                <table border=1 style="margin:auto">
                    <tr>
                        <td>用户名：</td>
                        <td><input type="text" name="username" id="username"></td>
                    </tr>
                    <tr>
                        <td>密 码：</td>
                        <td><input type="password" name="password" id="password"></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit" value="提交">
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
</html>

不难吧，基本上就只有两个内容，一部分是页面显示，也就是<body></body>标签之间的代码，我挑了两个分享一下，第一个：

        <div style="width:100%;text-align:center"></div>

博主将整个表单<form></from>装在这个<div></div>中，再对这个<div>标签做内嵌的CSS处理，即

style="width:100%;text-align:center"

这可以让整个<div>在页面居中。还要

注意！！

的就是，与<table>一起使用时，需要在<table>标签中添加

style="margin:auto"

第二个:

<form action="pages/displayStuList.jsp" onsubmit="return validate_form()" method="post">

解释一下<from>标签里的两个属性，action即点击提交后把整个表单提交到哪个页面，我这边是提交到pages文件夹下的displayStuList.jsp页面；onsubmit即在这个表单提交到displayStuList.jsp页面前做一个验证，看validate_form()传回的参数是否为true,true跳转页面，false则做相应提醒。下面我们就来看一下另一部分，即validate_form()函数。

            function validate_form() {
                var name = document.getElementById("username").value;
                var password = document.getElementById("password").value;
                if (name == null || name == "") {
                    alert("姓名不能为空");
                    return false;
                }
                if (password == null || password == "") {
                    alert("密码不能为空");
                    return false;
                }
                return true;
            }

其实这个函数更为简单，即对表单中“用户名”栏和“密码”栏内容进行检查，如果为空即弹出提醒，都不为空则跳转到下一个页面（这里为何不做用户名和密码是否正确的判断？认真看下来的你是否有这个疑问呢？别急，这个我们明天再来解释）。

emmmm跳转到哪个页面？

这时候已经让用户看了两个并不是他需要的页面了，再不出正菜，怕是用户已经要不耐烦了。

“上菜”

这是我们的初步的学生信息页面，后续会在此基础上进行功能的完善，包括数据库的增删改查等。

代码如下：

<!--这里是pages文件夹里的displayStuList.jsp-->
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0, 
            minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>学生信息</title>
    </head>
    <body>
        <div align="right">欢迎你，<%=request.getParameter("username")%> 
            <a href="logout.jsp">退出</a>
        </div>
        <h2 align="center">学生信息列表</h2>
        <table border=1 style="margin:auto">
            <tr>
                <td class="listTable">学号</td>
                <td class="listTable">姓名</td>
                <td class="listTable">性别</td>
                <td class="listTable">年龄</td>
                <td class="listTable">年级</td>
                <td id="profile">个人简介</td>
                <td id="operate">操作</td>
            </tr>
            <tr>
                <td>*</td>
                <td>*</td>
                <td>*</td>
                <td>*</td>
                <td>*</td>
                <td>*</td>
                <td>*</td>
            </tr>
            <tr>
                <td>*</td>
                <td>*</td>
                <td>*</td>
                <td>*</td>
                <td>*</td>
                <td>*</td>
                <td>*</td>
            </tr>
            <tr>
                <td>*</td>
                <td>*</td>
                <td>*</td>
                <td>*</td>
                <td>*</td>
                <td>*</td>
                <td>*</td>
            </tr>
        </table>
    </body>
</html>

在还没有进行功能完善前，这个页面还没有需要分享的知识点，所以今天就先到这里啦！

附上项目的导航图

以及在手机浏览器打开该“学生信息管理系统”几个页面的截图

Over，明天见！

Web的Java开发基础分享——学生信息管理系统（一）

猜你喜欢