学生信息管理系统
使用Tomcat+easyui+httpclient+json+MySQL技术写的一个入门级web应用。
源代码下载
工具
- 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应用开发。
准备工作
- 安装Tomcat,可自行百度或在我写的JSP基础中查看。
- 注意工程路径、Tomcat的路径和Eclipse启动Tomcat服务的路径问题。
- 双击Servers中的Tomcat服务,在Server Locations中查看。我选择的是使用Tomcat安装路径来启动服务,eclipse会自动把编译好的文件放到tomcat中的webapps里面。
- 添加EasyUI包,在官网下载后直接放入工程目录中的WebContent下即可。
- 添加MySQL JDBC Driver。选中工程,右键->Build Path->Configure Build Path…->Add External JARs->选择mysql-connector-java-8.0.13的文件位置。
- 添加Apache Commons组件,在官网下载后放入WEB-INF下的lib文件夹即可。
- 添加json-lib和ezmorph,同上。
- 需要的图标可以去easyicon下载。
- 如果你的eclipse没有Java EE支持,需要去Help->Install new software,输入http://download.eclipse.org/releases/你的eclipse版本名称/。选择图中选中的那个组件下载安装,重启eclipse即可。
- (不是必须的)添加JS代码联想支持,去Help->Eclipse Marketplace,搜索你想要的JS插件,我使用的是AngularJS。右键工程->Properties,添加AngularJS支持,重启eclipse即可。
- 如果你的eclipse中没有安装marketplace,需要去Help->Install new software,输入http://download.eclipse.org/mpc/你的eclipse版本名称/。选择图中选中的那个组件下载安装,重启eclipse即可。
- 新建一个数据库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,列出查询的班级信息。
@Override
protected 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 block
e.printStackTrace();
} finally {
try {
DbUtil.closeCon(con);
} catch (Exception e) {
e.printStackTrace();
}
}
}
- GradeSaveServlet.java,班级信息保存。
@Override
protected 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 block
e.printStackTrace();
}
}
}
- LoginServlet.java,身份验证、页面跳转。
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
String 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 {
// 获取Session
HttpSession session = req.getSession();
session.setAttribute("currentUser", currentUser);
// 客户端跳转
resp.sendRedirect("main.jsp");
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} finally {
try {
dbUtil.closeCon(con);
} catch (Exception e) {
// TODO Auto-generated catch block
e.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> 班级名称: <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
性别: <select class="easyui-combobox" id="s_sex" name="s_sex" editable="false" panelHeight="auto">
<option value="">请选择...</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
自动填充班级信息数据功能
所属班级: <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>