使用 EasyUI+MySQL+Servlet 实现用户数据维护功能 - Go语言中文社区

使用 EasyUI+MySQL+Servlet 实现用户数据维护功能

一、前言

用过 EasyUI 的人都知道，它是一个很好的显示数据的框架，如 SQLyog 这种非客户人员使用的页面，是不需要追求太多的特效的页面，只需要
①方便地对数据进行分页显示、操作
②方便数据地进行增删改查地处理。
③写一个简单的信息管理系统，如课程设计、毕业设计、小型的外包。
EasyUI 无疑是最好的选择了。
下面是笔者写的一个简单的增删改的页面，也方便大家的理解，大家可以以这个页面为基础，进行相关的拓展。

二、功能演示

①显示数据（来自数据库MySQL的信息）

这里写图片描述

②增加数据

点击这里写图片描述
填写下面表单之后，点击这里写图片描述
这里写图片描述
刷新页面之后就增加了新的数据了（当然你也可以继续新增数据，都是保存到数据库的）
这里写图片描述

③更改数据

点击任意一行，再点击这里写图片描述
就会进入编译提示框，以刚刚新增的一行信息为例子
这里写图片描述
点击 这里写图片描述
之后点击这里写图片描述或者这里写图片描述关闭提示框
再刷新一下页面，就会发现修改成功了：把Name中的 baidu 修改为 BaiDu（当然所有项都能改）
这里写图片描述

④查找数据

在上面的输入框中输入刚刚修改的数据的Name（当然你可以改为id的搜索方式）
这里写图片描述
点击这里写图片描述
显示的数据就只有一条所要查找的
这里写图片描述

⑤删除数据

选择一行数据，以我们刚刚输入的数据为例子
这里写图片描述
点击这里写图片描述
弹出提示框，点击确定这里写图片描述
这里写图片描述
再刷新页面，会发现刚敢的数据没了
这里写图片描述

三、代码结构

这里写图片描述

四、代码

①index.jsp 主界面代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<!--易错点1：容易忘记导入架包，费了很多时间在查代码-->
<script type="text/javascript" src="jquery-easyui-1.5.3/jquery.min.js"></script>
<script type="text/javascript"
	src="jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<!--易错点2：容易导包的顺序乱了——先导入jQuery，再导入UI-->
<link rel="stylesheet"
	href="jquery-easyui-1.5.3/themes/default/easyui.css" type="text/css" />
<link rel="stylesheet" href="jquery-easyui-1.5.3/themes/icon.css"
	type="text/css" />
<script type="text/javascript"
	src="jquery-easyui-1.5.3/locale/easyui-lang-zh_CN.js"></script>
</head>

<body>
	<!--
	一、页面基本架构
	①toolbar="#toolbar"指定已经写好的工具栏div
	②singleSelect="true"点击每个行，只能单选
	③fitColumns="true"每个列的大小适应父类
	 -->
	<table id="dg" style="width:800px" title="My Users" rownumbers="true"
		data-options="fit:true" toolbar="#toolbar" fitColumns="true"
		singleSelect="true"></table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
			οnclick="newUser()">New User</a> <a href="#"
			class="easyui-linkbutton" iconCls="icon-edit" plain="true"
			οnclick="editUser()">Edit User</a> <a href="#"
			class="easyui-linkbutton" iconCls="icon-remove" plain="true"
			οnclick="destroyUser()">Remove User</a> <input id="searchByName"
			style="line-height:26px;border:1px solid #ccc"> <a href="#"
			class="easyui-linkbutton" plain="true" iconCls="icon-search"
			οnclick="doSearch()">Search</a>
	</div>
	<!-- 
	二、增
	①validType="email",自动附带邮件的正则表达式
	②required="true"，要求为必填
	 -->
	<div id="dlg" class="easyui-dialog"
		style="width:400px;height:280px;padding:10px 20px" closed="true"
		buttons="#dlg-buttons">
		<div class="ftitle">User Information</div>
		<form id="fm" method="post">
			<div class="fitem">
				<label>Name:</label> <input name="Name" class="easyui-validatebox"
					required="true">
			</div>
			<br>
			<div class="fitem">
				<label>Email:</label> <input name="Email" class="easyui-validatebox"
					validType="email">
			</div>
			<br>
			<div class="fitem">
				<label>Salary:</label> <input name="Salary"
					class="easyui-validatebox">
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			οnclick="saveUser()">Save</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel" οnclick="javascript:$('#dlg').dialog('close')">Cancel</a>
	</div>

	<script type="text/javascript" src="js/fun.js">
	//使用外引入，加快的页面的加载速度，同时分离了不同类型的代码，查看的时候可以左右对照着看，查bug更方便
	</script>
	<script type="text/javascript" src="js/search.js"></script>

</body>
</html>

②fun.js JavaScript 的增删改函数



function destroyUser() {
	var row = $('#dg').datagrid('getSelected');
	if (row) {
		$.messager.confirm('Confirm', 'Are you sure you want to destroy this user?', function(r) {
			if (r) {
				$.post('Delete', {
					//传递选中的行中指定列，注意名字和field相同！
					id : row.Id
				}, function(result) {
					if (result.success) {
						$('#dg').datagrid('reload'); // reload the user data
					} else {
						$.messager.show({ // show error message
							title : 'Error',
							msg : result.errorMsg
						});
					}
				}, 'json');
			}
		});
	}
}


function saveUser() {
	$('#fm').form('submit', {
		//注意这里使用了url而不指明哪个 Servlet，使得 New 里边的save 和 Edit 里边的 save 通用！！！ 
		url : url,
		onSubmit : function() {
			return $(this).form('validate');
		},
		success : function(result) {
			var result = eval('(' + result + ')');
			if (result.errorMsg) {
				$.messager.show({
					title : 'Error',
					msg : result.errorMsg
				});
			} else {
				$('#dlg').dialog('close'); // close the dialog
				$('#dg').datagrid('reload'); // reload the user data
			}
		}
	});
}

function newUser() {
	$('#dlg').dialog('open').dialog('setTitle', 'New User');
	$('#fm').form('clear');
	url = "Save";
}

function editUser() {
	var row = $('#dg').datagrid('getSelected');
	if (row) {
		$('#dlg').dialog('open').dialog('setTitle', 'Edit User');
		$('#fm').form('load', row);
		//参数在这里传进去，后面的 save 就不传了！
		url = 'Edit?Id=' + row.Id;
	}
}

$('#dg').datagrid({
	columns : [ [ //添加列  
		{
			field : 'Id', //绑定数据源ID  
			title : 'Id', //显示列名称
			align : 'center', //内容在列居中
			width : 100 //列的宽度
		},
		{
			field : 'Name',
			title : 'Name',
			align : 'center',
			width : 100
		},
		{
			field : 'Email',
			title : 'Email',
			align : 'center',
			width : 100
		},
		{
			field : 'Salary',
			title : 'Salary',
			align : 'center',
			width : 100
		},
	] ],
	pagination : true, //开启分页
	url : 'DB', //获取数据地址
	loadFilter : pagerFilter, //①调用分页函数
});

//②构造分页函数，万能的Tools函数! 
//分页数据的操作 :
function pagerFilter(data) {
	if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array  
		data = {
			total : data.length,
			rows : data
		}
	}
	var dg = $(this);
	var opts = dg.datagrid('options');
	var pager = dg.datagrid('getPager');
	pager.pagination({
		onSelectPage : function(pageNum, pageSize) {
			opts.pageNumber = pageNum;
			opts.pageSize = pageSize;
			pager.pagination('refresh', {
				pageNumber : pageNum,
				pageSize : pageSize
			});
			dg.datagrid('loadData', data);
		}
	});
	if (!data.originalRows) {
		data.originalRows = (data.rows);
	}
	var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
	var end = start + parseInt(opts.pageSize);
	data.rows = (data.originalRows.slice(start, end));
	return data;
}

③search.js JavaScript 绑定的查找函数



function doSearch() {
	var $uname = $('#searchByName')
	var ByName = $uname.val()


	$('#dg').datagrid({
		//这个的作用类似 Ajax 了！向后台传递数据
        queryParams: {          
        	ByName: ByName            
          },   
		columns : [ [ //添加列  
			{
				field : 'Id', //绑定数据源ID  
				title : 'Id', //显示列名称
				align : 'center', //内容在列居中
				width : 100 //列的宽度
			},
			{
				field : 'Name',
				title : 'Name',
				align : 'center',
				width : 100
			},
			{
				field : 'Email',
				title : 'Email',
				align : 'center',
				width : 100
			},
			{
				field : 'Salary',
				title : 'Salary',
				align : 'center',
				width : 100
			},
		] ],
		ByName : ByName,
		url : 'Search' //获取数据地址
	});
}

④PeBean.java 实体JavaBean类

package bean;
public class PeBean {
       public PeBean() {
              super();
              // TODO Auto-generated constructor stub
       }
       public PeBean(int id, String name, String email, String salary) {
              super();
              Id = id;
              Name = name;
              Email = email;
              Salary = salary;
       }
       @Override
       public String toString() {
              return "PeBean [Id=" + Id + ", Name=" + Name + ", Email=" + Email + ", Salary=" + Salary + "]";
       }
       public int getId() {
              return Id;
       }
       public void setId(int id) {
              Id = id;
       }
       public String getName() {
              return Name;
       }
       public void setName(String name) {
              Name = name;
       }
       public String getEmail() {
              return Email;
       }
       public void setEmail(String email) {
              Email = email;
       }
       public String getSalary() {
              return Salary;
       }
       public void setSalary(String salary) {
              Salary = salary;
       }
       int Id;
       String Name;
       String Email;
       String Salary;
       
}

⑤DB.java 显示数据库的 Servlet

package crud;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import bean.PeBean;
import net.sf.json.JSONArray;

@WebServlet("/DB")
public class DB extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		try {
			Class.forName("com.mysql.jdbc.Driver");
			Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/car", "root", "123");
			Statement stmt = conn.createStatement();
			ResultSet rs = stmt.executeQuery("SELECT * FROM employee");
			List<PeBean> list = new ArrayList<>();
			System.out.println("获取数据库的信息如下");
			while (rs.next()) {
				int Id = rs.getInt("Id");
				String Name = rs.getString("Name");
				String Email = rs.getString("Email");
				String Salary = rs.getString("Salary");
				PeBean pebean = new PeBean(Id, Name, Email, Salary);
				System.out.println(pebean);
				list.add(pebean);
			}
			Gson gson = new Gson();
			String json = gson.toJson(list);
			System.out.println(json);
			
			// 将JSON字符串作为响应数据返回
			response.setContentType("text/json;charset=UTF-8");
			PrintWriter writer = response.getWriter();
			writer.write(json);

		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}

	}

}

⑥Delete.java 删除数据的 Servlet

package crud;

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Delete
 */
@WebServlet("/Delete")
public class Delete extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		String id = request.getParameter("id");
		System.out.println(id);
		try {
			Class.forName("com.mysql.jdbc.Driver");// 2.引入JDBC驱动器类
			Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/car", "root", "123");
			String sql = "DELETE FROM employee WHERE Id=?";
			PreparedStatement stat = conn.prepareStatement(sql);
			stat.setString(1, id);
			int rs = stat.executeUpdate();
			if (rs != 0) {
				System.out.println("删除成功");
			} else {
				System.out.println("删除失败");
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

	}

}

⑦Edit.java 修改数据的 Servlet

package crud;

import java.io.IOException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Edit
 */
@WebServlet("/Edit")
public 
                        
                        

                            
                            版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

                            原文链接：https://blog.csdn.net/larger5/article/details/78631376

                            站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！