一、前言
用过 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 class Edit extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("Name");
System.out.println(name);
String email = request.getParameter("Email");
System.out.println(email);
String salary = request.getParameter("Salary");
System.out.println(salary);
// 前台传递过来的 是一个 字符串 类型,这里必须把它转换为一个 整数 类型的
String id = request.getParameter("Id");
int Id = Integer.parseInt(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");
// 注意下面的sql语句只有一个set
String sql = "UPDATE employee SET Name=?,Email=?,Salary=? WHERE Id=?";
PreparedStatement stat = conn.prepareStatement(sql);
stat.setString(1, name);
stat.setString(2, email);
stat.setString(3, salary);
stat.setInt(4, 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();
}
}
}
⑧Save.java 新增数据的 Servlet
package crud;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
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;
/**
* Servlet implementation class Save
*/
@WebServlet("/Save")
public class Save extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("Name");
String email = request.getParameter("Email");
String salary = request.getParameter("Salary");
System.out.println(name);
System.out.println(email);
System.out.println(salary);
try {
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/car", "root", "123");
String sql = "INSERT INTO employee(Name,Email,Salary) VALUES(?,?,?)";
PreparedStatement stat = conn.prepareStatement(sql);
stat.setString(1,name);
stat.setString(2,email);
stat.setString(3,salary);
int rs = stat.executeUpdate();
if (rs == 1) {
System.out.println("插入成功");
} else {
System.out.println("插入失败");
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
⑨Search.java 查找数据的 Servlet
package crud;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
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;
@WebServlet("/Search")
public class Search extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
String ByName = request.getParameter("ByName");
System.out.println(ByName);
Class.forName("com.mysql.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/car", "root", "123");
String sql = "SELECT * FROM employee WHERE Name=?";
PreparedStatement stat = conn.prepareStatement(sql);
stat.setString(1, ByName);
ResultSet rs = stat.executeQuery();
List<PeBean> list = new ArrayList<>();
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();
}
}
}
五、其他
看完这篇简单的博文,相信大家应该是有点感触的!
涉及的相关知识
①Java:Servlet前端后台数据处理、JDBC连接数据库
②JavaScript:实现前端后台的交互,如JavaScript写的函数,函数里边又包含Servlet接口,实现数据来回交互
③EayUI:界面体验优化、数据处理简单化。