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

项目Demo：点此跳转

代码仓库：https://github.com/KarezaC/StudentsInformationManagerSystem

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

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

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

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

    那么，冒险开始~

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

    

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

    
        
        
        
    
    
        
欢迎使用学生管理系统
        
点击进入
    

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

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

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

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

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

<%@ page contentType="text/html; charset=UTF-8"%>


    
        
        
        
    
    
    
        
学生登录
        

            

                

                    

                        
用户名：
                        

                    
                    

                        
密 码：
                        

                    
                    

                        

                            
                        
                    
                
            
        
    

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

博主将整个表单

装在这个

中，再对这个

标签做内嵌的CSS处理，即

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

 

这可以让整个

在页面居中。还要

注意！！

的就是，与

一起使用时，需要在标签中添加

style="margin:auto"

第二个:

解释一下标签里的两个属性，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跳转到哪个页面？

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

    “上菜”

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

代码如下：

<%@page contentType="text/html" pageEncoding="UTF-8"%>


    
        
        
        
    
    
        
欢迎你，<%=request.getParameter("username")%> 
            退出
        
        
学生信息列表
        

学号	姓名	性别	年龄	年级	个人简介	操作
*	*	*	*	*	*	*
*	*	*	*	*	*	*
*	*	*	*	*	*	*

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

附上项目的导航图

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

    Over，明天见！

学生信息管理系统（2），传送门：点此