一.创建数据库

二.创建包结构

三.更改主页结构

onDblClick : function(node) {
//判重，如果为false即可以添加新的tab
if(!$("#tt").tabs('exists',node.text)){
$('#tt').tabs('add', {
       title:node.text,
//将内容更改为iframe框架，跳转到servlet处理
       content:'<iframe frameborder=0 src="'
           + node.url
           + '" scrolling="no" style="width:100%;height:100%;"></iframe>',
       closable:true
   });
//如果为true，证明已经存在，就移动到指定的tab
}else{
   $('#tt').tabs('select',node.text)
}
}

四.页面搭建

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="../../common/head.jsp"%>
<script type="text/javascript">
   $(function(){
       $('#dg').datagrid({
           //进servlet拿到数据
       url:ctx+'/BookServlet',
       toolbar: '#tb',
       //显示底部分页工具栏
       pagination:true,
       columns:[[
           //表格的结构，需要与实体类保持一致
       {field:'id',title:'ID',width:100},
       {field:'bookname',title:'书本名称',width:100},
       {field:'price',title:'价格',width:100},
       {field:'booktype',title:'类型',width:100}
       ]]
       });
       //模糊查询
       $("#qrybtn").click(function(){
           qry();
       });

       function qry(){
           //使用重载的方法将查询的内容传递到servlet中
           $('#dg').datagrid("reload",{
               bookName:$("#bookName").val()
           });
       }
   })
</script>
</head>
<body>
<form action="" method="post" style="margin-top:20px">
   <div>
<label for="name">书名：</label>
<input id="bookName" class="easyui-textbox" style="width:300px">
<a id="qrybtn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
</div>
<div style="margin-top:20px" style="text-align:center">
   <table id="dg"></table>
</div>
<div id="tb" style="text-align:right">
   <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true"></a>
       <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
       <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true"></a>
   </div>
</form>
</body>
</html>

五.dao层开发

public class BookDao implements IBookDao {

   @Override
   public List<Book> getBooks(String name, int pageIndex, int pageSize) {
       Connection con = null;
       PreparedStatement ps = null;
       ResultSet rs = null;

       List<Book> list = new ArrayList<>();

       try {
           String sql = "select id,bookname,price,booktype,rownum as rid from t_book";
           if(name != null && !"".equals(name)) {
               sql += " where bookname like ?";
           }

           sql = "select * from (" + sql + ")b where b.rid between ? and ?";

           con = DBHelper.getsCon();
           ps = con.prepareStatement(sql);

           int start =(pageIndex-1)*pageSize+1;
           int end = pageIndex*pageSize;

           if(name != null && !"".equals(name)) {
               ps.setString(1, "%"+name+"%");
               ps.setInt(2, start);
               ps.setInt(3, end);
           } else {
               ps.setInt(1, start);
               ps.setInt(2, end);
           }

           rs = ps.executeQuery();

           while(rs.next()) {
               Book m = new Book();
               m.setId(rs.getInt("id"));
               m.setBookname(rs.getString("bookname"));
               m.setPrice(rs.getBigDecimal("price"));
               m.setBooktype(rs.getString("booktype"));
               list.add(m);
           }

       } catch (Exception e) {
           e.printStackTrace();
       } finally {
           DBHelper.Close(con, ps, rs);
       }

       return list;
   }


   @Override
   public int getTotalPage() {
       Connection con = null;
       PreparedStatement ps = null;
       ResultSet rs = null;

       int n = 0;
       try {
           con= DBHelper.getsCon();
           String sql = "select count(*) from t_book";
           ps = con.prepareStatement(sql);
           rs= ps.executeQuery();
           if(rs.next()) {
               n = rs.getInt(1);
           }

       } catch (Exception e) {
           e.printStackTrace();
       }finally {
           DBHelper.Close(con, ps, rs);
       }
       return n;
   }

}

六.Service层开发

public class BookService implements IBookService {

   private IBookDao dao = new BookDao();

   @Override
   public List<Book> getBooks(String name, int pageIndex, int pageSize) {

       return dao.getBooks(name, pageIndex, pageSize);
   }

   @Override
   public int getTotalPage() {
       return dao.getTotalPage();
   }

}

七.servlet开发

@WebServlet("/BookServlet")
public class BookServlet extends HttpServlet{

   private IBookService service = new BookService();

   @Override
   protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       doPost(req, resp);
   }

   @Override
   protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       //设置字符编码
       req.setCharacterEncoding("utf-8");
           resp.setContentType("application/json; charset=utf-8");

           String name = req.getParameter("bookName");
           String pageIndex = req.getParameter("page");
           int pid = pageIndex == null || "".equals(pageIndex) ? 1 : Integer.parseInt(pageIndex);
           int pageSize = 10;

           List<Book> list = service.getBooks(name, pid, pageSize);
           int totalPage = service.getTotalPage();

           Map<String,Object> data = new HashMap<>();
           data.put("total", totalPage);
           data.put("rows", list);

           String json = JSON.toJSONString(data);

           PrintWriter out = resp.getWriter();
           out.write(json);
           out.flush();
           out.close();
   }
}