Jsp&Servlet入门项目-学生信息管理系统

学生信息管理系统使用Tomcat+easyui+httpclient+json+MySQL技术写的一个入门级web应用。源代码下载Github-StudentInfoManager工具EasyUI是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。Tomcat是Apache软件基金会下的一个轻量级Java Web服务器项目，免费、开源，是开发和调...

Alan_Redsheep

5852人浏览 · 2019-02-28 14:02:32

Alan_Redsheep · 2019-02-28 14:02:32 发布

学生信息管理系统

使用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应用开发。

准备工作

安装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>&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

&nbsp;出生日期：&nbsp;
<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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...