jQuery EasyUI快速入门04
目录所有图书显示1、创建数据表2、编写实体、数据访问层、业务逻辑层① 实体:② 数据访问层:③业务逻辑层:3、编写Servlet4、postman测试5、编写jsp页面代码① 编写一个查询所有书籍的jsp页面② index页面调用
目录
所有图书显示
1、创建数据表
注:自定义数据噢!!!
create table tb_book ( bid number primary key,--书籍id bname varchar2(100),--书籍名称 bprice number(5,2),--书籍价格 btype varchar2(100)--书籍类型 )
2、编写实体、数据访问层、业务逻辑层
① 实体:
这个应该没问题的吧,根据数据库的数据编写就好了,不要忘记get、set方法,再来一个无参构造、有参构造就好了(这里就不多描述了)
private Integer bid; private String bname; private Float bprice; private String btype;
② 数据访问层:
定义接口,实现接口,编写一个带模糊查询的分页方法和一个带模糊查询记录总条数的方法。
@Override public List<Books> quarryBooks(Integer pageIndex, Integer pageSize, String searchName) { Integer start = (pageIndex-1)*pageSize +1; Integer end = pageIndex*pageSize; Connection conn = null; PreparedStatement ps = null; ResultSet rs = null; String sql = "select b.*from (select a.*,rownum as rid from (select bid,bname,bprice,btype from tb_book where bname like '%"+searchName+"%')a)b where b.rid between "+start+" and "+end+""; Books books =null; List<Books> list = new ArrayList<Books>(); try { conn = DBHelper.getConn(); ps = conn.prepareStatement(sql); rs = ps.executeQuery(); while(rs.next()) { books = new Books(); books.setBid(rs.getInt("bid")); books.setBname(rs.getString("bname")); books.setBprice(rs.getFloat("bprice")); books.setBtype(rs.getString("btype")); list.add(books); } } catch (Exception e) { e.printStackTrace(); } finally { DBHelper.myClose(conn, ps, rs); } return list; } @Override public Integer getRowTable(String searchName) { Connection conn = null; PreparedStatement ps = null; ResultSet rs = null; String sql = "select count(0) from tb_book where bname like '%"+searchName+"%'"; try { conn = DBHelper.getConn(); ps = conn.prepareStatement(sql); rs = ps.executeQuery(); if(rs.next()) { return rs.getInt(1); } } catch (Exception e) { e.printStackTrace(); } finally { DBHelper.myClose(conn, ps, rs); } return null; }
③业务逻辑层:
定义接口,实现接口,实例化数据访问层调用方法
IBooksDao ibd = new BooksDaoImpl(); @Override public List<Books> quarryBooks(Integer pageIndex, Integer pageSize, String searchName){ // TODO Auto-generated method stub return ibd.quarryBooks(pageIndex, pageSize, searchName); } @Override public Integer getRowTable(String searchName) { // TODO Auto-generated method stub return ibd.getRowTable(searchName); }
3、编写Servlet
① 声明servlet
② 获取总页码和总条数(page和rows是固定的)
③ 利用Map集合添加总条数和总数据
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); response.setContentType("application/json;charset=utf-8"); IBooksBiz ibb = new BooksBizImpl(); Integer pageIndex = 1; String pIndex = request.getParameter("page"); if(pIndex!=null) { pageIndex = Integer.valueOf(pIndex); } Integer pageSize = 7; String pSize = request.getParameter("rows"); if(pSize!=null) { pageSize = Integer.valueOf(pSize); } String searchName = request.getParameter("searchName"); if(searchName == null) { searchName = ""; } Integer total = ibb.getRowTable(searchName); List<Books> list = ibb.quarryBooks(pageIndex, pageSize, searchName); Map<String, Object> maps = new HashMap<String,Object>(); maps.put("total", total); maps.put("rows", list); ObjectMapper mapper = new ObjectMapper(); String reuslt = mapper.writeValueAsString(maps); PrintWriter out = response.getWriter(); out.write(reuslt); out.flush(); out.close(); } }
4、postman测试
① 下载postman
② 将postman进行汉化
③ 新建项目,发送请求
④ 先测试servlet,后编写jsp页面
5、编写jsp页面代码
① 编写一个查询所有书籍的jsp页面
(1)创立一个panel面板
(2)创建表格设置id
(3)为表格设置DataGrid事件(包括表明与分页)
(4)为模糊查询设立点击事件,再次调用
注:此界面名字要与昨天的权限管理数据库的数据名一致
<body> <div id="mypanel"> <div style="margin:15px;margin-left:400px" > <input type="text" class="easyui-textbox" id="bookName" style="width:300px;"> <a id="bookOry" class="easyui-linkbutton" data-options="iconCls:'icon-search'" >查询</a> </div> <table id = "bookListID" style="width=100%;height=100%"> </table> </div> <script type="text/javascript"> $('#mypanel').panel({ width:'100%', height:450, }); $(function(){ $('#bookListID').datagrid({ url:xPath+'/BooksList.do', columns:[[ {field:'bid',title:'书籍id',width:'25%',align:'center'}, {field:'bname',title:'书籍名称',width:'25%',align:'center'}, {field:'bprice',title:'书籍价格',width:'25%',align:'center'}, {field:'btype',title:'书籍类型',width:'25%',align:'center'} ]], pagination:true, pageList:[7,10,30,50,70,90], queryParams:{ searchName:$("#bookName").val() } }); $("#bookOry").click(function(){ mydemo(); }); mydemo(); function mydemo(){ $('#bookListID').datagrid('load',{ searchName:$("#bookName").val() }); } }) </script> </body>
② index页面调用
这个index界面就是昨天的index.jsp,只是改了这个小小的地方
content:"<iframe src = '"+xPath+node.url+"' width ='100%' height ='100%'>",
更多推荐
所有评论(0)