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

    代码仓库: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,明天见!

学生信息管理系统(2),传送门:点此

展开阅读全文

没有更多推荐了,返回首页