Web的Java开发基础分享——学生信息管理系统（一）
项目Demo：点此跳转
代码仓库：https://github.com/KarezaC/StudentsInformationManagerSystem
如约，今天开始更新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，明天见！
