学生信息管理系统

使用Tomcat+easyui+httpclient+json+MySQL技术写的一个入门级web应用。

源代码下载

Github-StudentInfoManager

工具

• EasyUI是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。
• Tomcat是Apache软件基金会下的一个轻量级Java Web服务器项目，免费、开源，是开发和调试中小型JSP&Servlet程序的首选。(The Apache Tomcat® software is an open source implementation of the Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket technologies. )
• Apache Commons包含了许多Java程序常用的组件库。(Apache Commons is an Apache project focused on all aspects of reusable Java components.)
• HttpClient是Apache Jakarta Common 下的子项目，可以用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包。目前已停止更新，由Apache HttpComponents代替。
• Json是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。 该项目需要用到其中的Json-lib。
• ezmorph是一个简单的java类库，用于将一种对象转换成另外一种对象。EZMorph原先是Json-lib项目中的转换器。
• MySQL是一个常用的关系型数据库管理系统，非常适合Web应用开发。

准备工作

1. 安装Tomcat，可自行百度或在我写的JSP基础中查看。

• 注意工程路径、Tomcat的路径和Eclipse启动Tomcat服务的路径问题。
• 双击Servers中的Tomcat服务，在Server Locations中查看。我选择的是使用Tomcat安装路径来启动服务，eclipse会自动把编译好的文件放到tomcat中的webapps里面。
  
  
  

1. 添加EasyUI包，在官网下载后直接放入工程目录中的WebContent下即可。
   
2. 添加MySQL JDBC Driver。选中工程，右键->Build Path->Configure Build Path…->Add External JARs->选择mysql-connector-java-8.0.13的文件位置。
   
3. 添加Apache Commons组件，在官网下载后放入WEB-INF下的lib文件夹即可。
   
4. 添加json-lib和ezmorph，同上。
5. 需要的图标可以去easyicon下载。
6. 如果你的eclipse没有Java EE支持，需要去Help->Install new software，输入http://download.eclipse.org/releases/你的eclipse版本名称/。选择图中选中的那个组件下载安装，重启eclipse即可。

1. （不是必须的）添加JS代码联想支持，去Help->Eclipse Marketplace，搜索你想要的JS插件，我使用的是AngularJS。右键工程->Properties，添加AngularJS支持，重启eclipse即可。
   
   
2. 如果你的eclipse中没有安装marketplace，需要去Help->Install new software，输入http://download.eclipse.org/mpc/你的eclipse版本名称/。选择图中选中的那个组件下载安装，重启eclipse即可。
   
3. 新建一个数据库db_studentInfo，在GitHub中可以找到。

model包

• Grade.java，年级数据的模型。
• Student.java，学生数据的模型。
• PageBean.java，页面模型，使用分页技术时要用。
• User.java，登录用户的模型。

dao包

• GradeDao.java，年级数据的操作，包括查询、计数、增删改。
• StudentDao.java，学生数据的操作，包括查询、计数、增删改。
• UserDao.java，登录用户的操作，包括登录、下线等。

util包

• DateUtil.java，日期工具，包括日期与字符串的相互转换。
• DbUtil.java，数据库连接工具，包括获取数据库连接和断开连接。
• JsonUtil.java，json工具，包括ResultSet的数据转换为JSON格式。
• ResponseUtil.java，http响应工具，包括向response写入内容的方法。
• StringUtil.java，字符串工具，包括比较字符串是否为空等方法。

web包

该包内的文件包含大部分的业务逻辑处理，继承HttpServlet，处理get和post请求。

• GradeComboListServlet.java，下拉列表选择班级。

JSONArray jsonArray = new JSONArray();
JSONObject jsonObject = new JSONObject();
jsonObject.put("id", "");
jsonObject.put("gradeName", "请选择班级...");
jsonArray.add(jsonObject);
jsonArray.addAll(JsonUtil.formatRsToJsonArray(gradeDao.gradeList(con, null, null)));
com.redsheep.util.ResponseUtil.write(response, jsonArray);

• GradeDeleteServlet.java，删除班级信息。

JSONObject result = new JSONObject();String str[] = delIds.split(",");for (int i = 0; i < str.length; i++) {boolean f = studentDao.getStudentByGradeId(con, str[i]);if (f) {result.put("errorIndex", i);result.put("errorMsg", "班级下面有学生，不能删除！");ResponseUtil.write(resp, result);return;}}int delNums = gradeDao.gradeDelete(con, delIds);if (delNums > 0) {result.put("success", "true");result.put("delNums", delNums);} else {result.put("errorMsg", "删除失败");}ResponseUtil.write(resp, result);

• GradeListServlet.java，列出查询的班级信息。

@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stub//分页，获取页数和行数String page = req.getParameter("page");String rows = req.getParameter("rows");String gradeName = req.getParameter("gradeName");if (gradeName == null) {gradeName = "";}Grade grade = new Grade();grade.setGradeName(gradeName);PageBean pageBean = new PageBean(Integer.parseInt(page), Integer.parseInt(rows));Connection con = null;try {con = dbUtil.getCon();JSONObject result = new JSONObject();JSONArray jsonArray = JsonUtil.formatRsToJsonArray(gradeDao.gradeList(con, pageBean, grade));int total = gradeDao.gradeCount(con, grade);//获取总行数和总条量result.put("rows", jsonArray);result.put("total", total);ResponseUtil.write(resp, result);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();} finally {try {DbUtil.closeCon(con);} catch (Exception e) {e.printStackTrace();}}}

• GradeSaveServlet.java，班级信息保存。

@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//设置请求的编码request.setCharacterEncoding("utf-8");String gradeName = request.getParameter("gradeName");String gradeDesc = request.getParameter("gradeDesc");String id = request.getParameter("id");Grade grade = new Grade(gradeName, gradeDesc);if (StringUtil.isNotEmpty(id)) {grade.setId(Integer.parseInt(id));}Connection con = null;try {con = dbUtil.getCon();int saveNums = 0;JSONObject result = new JSONObject();if (StringUtil.isNotEmpty(id)) {saveNums = gradeDao.gradeModify(con, grade);} else {saveNums = gradeDao.gradeAdd(con, grade);}if (saveNums > 0) {result.put("success", "true");} else {result.put("success", "true");result.put("errorMsg", "保存失败");}ResponseUtil.write(response, result);} catch (Exception e) {e.printStackTrace();} finally {try {dbUtil.closeCon(con);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}

• LoginServlet.java，身份验证、页面跳转。

@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stubString userName = req.getParameter("userName");String password = req.getParameter("password");req.setAttribute("userName", userName);req.setAttribute("password", password);//身份验证if (StringUtil.isEmpty(userName) || StringUtil.isEmpty(password)) {req.setAttribute("error", "用户名或密码为空");req.getRequestDispatcher("index.jsp").forward(req, resp);return;}User user = new User(userName, password);Connection con = null;try {con = dbUtil.getCon();User currentUser = userDao.login(con, user);if (currentUser == null) {req.setAttribute("error", "用户名或密码错误");// 服务器跳转req.getRequestDispatcher("index.jsp").forward(req, resp);} else {// 获取SessionHttpSession session = req.getSession();session.setAttribute("currentUser", currentUser);// 客户端跳转resp.sendRedirect("main.jsp");}} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();} finally {try {dbUtil.closeCon(con);} catch (Exception e) {// TODO Auto-generated catch blocke.printStackTrace();}}}

• StudentDeleteServlet.java，删除学生信息。
• StudentListServlet.java，列出查询的学生信息。
• StudentSaveServlet.java，学生信息保存。

登录界面

• 修改文档编码为utf-8

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

• 记住用户名和密码

<form action="login" method="post"><table style="border-collapse:separate; border-spacing:10px;"><tr><td>姓名：</td><td><input type="text" name="userName" value="${userName }" id="userName"/></td></tr><tr><td>密码：</td><td><input type="password" name="password" value="${password }" id="password"/></td></tr><tr><td align="left"><input type="button" value="重置" onclick="resetValue()"/></td><td align="right"><input type="submit" value="登录"/></td></tr></table>

• 在web.xml中配置login的映射

  <servlet><servlet-name>loginServlet</servlet-name><servlet-class>com.redsheep.web.LoginServlet</servlet-class></servlet><servlet-mapping><servlet-name>loginServlet</servlet-name><url-pattern>/login</url-pattern></servlet-mapping>

• 在LoginServlet中实现身份验证、页面跳转。用户名密码错误进行服务器端跳转，登录成功进行客户端跳转。

主界面

• 身份验证

<%if(session.getAttribute("currentUser")==null){response.sendRedirect("index.jsp");return;}
%>

• 添加EasyUI组件支持

<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/demo/demo.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui/locale/easyui-lang-zh_CN.js"></script>

• 目录树

	<script type="text/javascript">$(function(){// 数据结构var treeData=[{text:"根",children:[{text:"班级信息管理",attributes:{url:"gradeInfoManage.jsp"}},{text:"学生信息管理",attributes:{url:"studentInfoManage.jsp"}}]}];// 实例化树菜单$("#tree").tree({data:treeData,lines:true,onClick:function(node){if(node.attributes){openTab(node.text,node.attributes.url);}}});function openTab(text,url){//标签已打开，则选中if($("#tabs").tabs('exists',text)){$('#tabs').tabs('select',text);}else{var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";$("#tabs").tabs('add',{title:text,closable:true,content:content});}}});</script>

• 使用easyui的方法，直接在html声明组件

<div region="center"><div class="easyui-tabs" fit="true" border="false" id="tabs"><div title="首页"><div align="center" style="padding-top:100px;"><font color=#E0EDFF size="10">欢迎使用</font></div></div></div></div>

也可以编写JS代码来创建

<input id="cc" style="width:200px" />$('#cc').combobox({url: ...,required: true,valueField: 'id',textField: 'text'
});

班级信息管理界面

• 使用EasyUI中的easyui-datagrid，可便捷填充表格数据。

<table id="dg" title="班级信息" class="easyui-datagrid" fitColumns="true"pagination="true" rownumbers="true" url="gradeList" fit="true" toolbar="#tb"><thead><tr><th field="cb" checkbox="true"></th><th field="id" width="50">编号</th><th field="gradeName" width="100">班级名称</th><th field="gradeDesc" width="250">班级描述</th></tr></thead></table>

• 使用EasyUI中的超链接按钮easyui-linkbutton，获得EasyUI的按钮样式。

<div id="tb"><div><a href="javascript:openGradeAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a><a href="javascript:openGradeModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a><a href="javascript:deleteGrade()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a></div><div>&nbsp;班级名称：&nbsp;<input type="text" name="s_gradeName" id="s_gradeName"/><a href="javascript:searchGrade()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a></div></div>

• 使用EasyUI的对话框easyui-dialog，获得EasyUI的对话框样式。
  

<div id="dlg" class="easyui-dialog" style="width: 400px;height: 280px;padding: 10px 20px"closed="true" buttons="#dlg-buttons"><form id="fm" method="post"><table><tr><td>班级名称：</td><td><input type="text" name="gradeName" id="gradeName" class="easyui-validatebox" required="true"/></td></tr><tr><td valign="top">班级描述：</td><td><textarea rows="7" cols="30" name="gradeDesc" id="gradeDesc"></textarea></td></tr></table></form></div>

• 对话框还可以便捷添加按钮

<div id="dlg-buttons"><a href="javascript:saveGrade()" class="easyui-linkbutton" iconCls="icon-ok">保存</a><a href="javascript:closeGradeDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a></div>

• 添加JavaScript

<script type="text/javascript">var url;//datagrid的load()方法function searchGrade(){$('#dg').datagrid('load',{gradeName:$('#s_gradeName').val()});}function deleteGrade(){var selectedRows=$("#dg").datagrid('getSelections');if(selectedRows.length==0){$.messager.alert("系统提示","请选择要删除的数据！");return; }var strIds=[];for(var i=0;i<selectedRows.length;i++){strIds.push(selectedRows[i].id);}var ids=strIds.join(",");$.messager.confirm("系统提示","您确认要删掉这<font color=red>"+selectedRows.length+"</font>条数据吗？",function(r){if(r){$.post("gradeDelete",{delIds:ids},function(result){if(result.success){$.messager.alert("系统提示","您已成功删除<font color=red>"+result.delNums+"</font>条数据！");$("#dg").datagrid("reload");}else{$.messager.alert('系统提示','<font color=red>'+selectedRows[result.errorIndex].gradeName+'</font>'+result.errorMsg);}},"json");}});}//dialog设置属性function openGradeAddDialog(){$("#dlg").dialog("open").dialog("setTitle","添加班级信息");url="gradeSave";}function openGradeModifyDialog(){var selectedRows=$("#dg").datagrid('getSelections');if(selectedRows.length!=1){$.messager.alert("系统提示","请选择一条要编辑的数据！");return;}var row=selectedRows[0];$("#dlg").dialog("open").dialog("setTitle","编辑班级信息");$("#fm").form("load",row);url="gradeSave?id="+row.id;}function closeGradeDialog(){$("#dlg").dialog("close");resetValue();}function resetValue(){$("#gradeName").val("");$("#gradeDesc").val("");}//确认框function saveGrade(){$("#fm").form("submit",{url:url,onSubmit:function(){return $(this).form("validate");},success:function(result){if(result.errorMsg){$.messager.alert("系统提示",result.errorMsg);return;}else{$.messager.alert("系统提示","保存成功");resetValue();$("#dlg").dialog("close");$("#dg").datagrid("reload");}}});}
</script>

学生信息管理界面

• 使用EasyUI的下拉框 easyui-combobox

&nbsp;性别：&nbsp;<select class="easyui-combobox" id="s_sex" name="s_sex" editable="false" panelHeight="auto"><option value="">请选择...</option><option value="男">男</option><option value="女">女</option></select>

自动填充班级信息数据功能

&nbsp;所属班级：&nbsp;<input class="easyui-combobox" id="s_gradeId" name="s_gradeId" size="10" data-options="panelHeight:'auto',editable:false,valueField:'id',textField:'gradeName',url:'gradeComboList'"/>

• 使用EasyUI的日期框easyui-datebox

 出生日期： 
<input class="easyui-datebox" name="s_bbirthday" id="s_bbirthday" editable="false" size="10"/>->
<input class="easyui-datebox" name="s_ebirthday" id="s_ebirthday" editable="false" size="10"/>

• 更多关于EasyUI的使用可在官方查找Demo。
• 添加JavaScript

<script type="text/javascript">
var url;function deleteStudent(){var selectedRows=$("#dg").datagrid('getSelections');if(selectedRows.length==0){$.messager.alert("系统提示","请选择要删除的数据！");return;}var strIds=[];for(var i=0;i<selectedRows.length;i++){strIds.push(selectedRows[i].stuId);}var ids=strIds.join(",");$.messager.confirm("系统提示","您确认要删掉这<font color=red>"+selectedRows.length+"</font>条数据吗？",function(r){if(r){$.post("studentDelete",{delIds:ids},function(result){if(result.success){$.messager.alert("系统提示","您已成功删除<font color=red>"+result.delNums+"</font>条数据！");$("#dg").datagrid("reload");}else{$.messager.alert('系统提示',result.errorMsg);}},"json");}});
}function searchStudent(){$('#dg').datagrid('load',{stuNo:$('#s_stuNo').val(),stuName:$('#s_stuName').val(),sex:$('#s_sex').combobox("getValue"),bbirthday:$('#s_bbirthday').datebox("getValue"),ebirthday:$('#s_ebirthday').datebox("getValue"),gradeId:$('#s_gradeId').combobox("getValue")});
}function openStudentAddDialog(){$("#dlg").dialog("open").dialog("setTitle","添加学生信息");url="studentSave";
}function saveStudent(){$("#fm").form("submit",{url:url,onSubmit:function(){if($('#sex').combobox("getValue")==""){$.messager.alert("系统提示","请选择性别");return false;}if($('#gradeId').combobox("getValue")==""){$.messager.alert("系统提示","请选择所属班级");return false;}return $(this).form("validate");},success:function(result){if(result.errorMsg){$.messager.alert("系统提示",result.errorMsg);return;}else{$.messager.alert("系统提示","保存成功");resetValue();$("#dlg").dialog("close");$("#dg").datagrid("reload");}}});
}function resetValue(){$("#stuNo").val("");$("#stuName").val("");$("#sex").combobox("setValue","");$("#birthday").datebox("setValue","");$("#gradeId").combobox("setValue","");$("#email").val("");$("#stuDesc").val("");
}function closeStudentDialog(){$("#dlg").dialog("close");resetValue();
}function openStudentModifyDialog(){var selectedRows=$("#dg").datagrid('getSelections');if(selectedRows.length!=1){$.messager.alert("系统提示","请选择一条要编辑的数据！");return;}var row=selectedRows[0];$("#dlg").dialog("open").dialog("setTitle","编辑学生信息");$("#fm").form("load",row);url="studentSave?stuId="+row.stuId;
}
</script>