写在前面，自研究生找到这份工作，开始自学java web，零零碎碎花了半年的时间，web开发的知识体系基本算是过了一遍，包括ssh框架，但之前都是零碎的实现，前端就只练习前端，后端只练习后端，前后端的是怎么交互的，理论上知道那么回事，可是从来没用过，趁着实习及试用期时间，学习了下Extjs，把extjs的相关知识结合起来，写了这么个demo：
踩到的坑：
后代去数据库查询的结果为list，最终要按照全台约定的格式拼接成json对象，这个拼接过程竟然纠结了很久，都有现成的轮子啊；
Hibernate的hql查询与jdbc的sql查询还是有差别的！
需要完善的地方：
引入Spring框架，对象都是new出来的
spring mvc（用的还是servlet）
在第一级combox改变时，第二级combox是根据第一级的value传到后台，去数据库重新获取数据的，如何实现将第二级combox的store只从后台获取一次，然后只在前台筛选！（Extjs还是不熟啊，只会个皮毛）
前端js代码：
1 Ext.onReady(function () { 2 //创建一个Ext.data.store对象,用于为category提供数据 3 var categoryStore = Ext.create('Ext.data.Store', 4 { 5 //指定读取数据的name ,id值 6 fields:["name","id"],//与后台约定好请求的数据源格式 7 proxy: 8 { 9 type:'ajax', 10 url:'/getAllCategory', 11 reader:{//使用Ext.data.reader.Json读取服务器数据 12 type:'json', 13 root:"data"//直接读取服务器响应的数据 14 } 15 16 }, 17 autoLoad:true 18 }); 19 20 //创建一个Ext.data,store对象，为Book提供数据 21 var bookStore = Ext.create('Ext.data.Store', 22 { 23 //指定读取数据的name，id字段 24 fields:['bookname','bookid',"categoryId"], 25 proxy: 26 { 27 type:'ajax', 28 url:'/getBooksByCategory',//向该URL发送请求 29 reader:{ 30 //使用Ext.data.reader.Json读取服务器数据 31 type:'json', 32 root:'data'//直接读取服务器响应的data数据 33 } 34 } 35 }); 36 37 Ext.create('Ext.form.Panel',{ 38 title:'选择图书', 39 bodyPadding:5, 40 width:350,//指定表单宽度 41 //默认使用anchore布局方式 42 layout:'anchor', 43 renderTo:Ext.getBody(), 44 //设置表单控件默认占满整个容器 45 defaults:{ 46 anchor:'100%' 47 }, 48 items:[//为表单里添加一些组件 49 //第一个组件，一个复选框 50 { 51 id:'category_combo', 52 xtype:'combo', 53 fieldLabel:'选择种类', 54 width:300, 55 store:categoryStore,//使用categoryStore数据提供下拉列表项的数据 56 displayField:"name",//列表项的显示文本使用name字段 57 valueField:"id",//列表项的值使用id字段的值 58 queryModel:'local',//指定使用Store中已有数据，如果不指定数据源，可以直接从从数据库中获取？ 59 listeners:{ 60 select:function (combo,ecords) 61 { 62 //只要一选择category的复选框，将触发级联框book的数据值刷新 63 Ext.getCmp('book_combo').reset(); 64 //调用bookstore的load()方法加载服务器响应 65 bookStore.load({ 66 67 //发送请求categoryId参数，该参数代表图书类别，往哪里请求？往store请求，而非数据库请求 68 params:{ 69 categoryId:combo.value 70 } 71 72 }); 73 74 } 75 } 76 }, 77 { 78 id:'book_combo', 79 xtype:'combo', 80 fieldLabel:'选择图书', 81 width:300, 82 store:bookStore,//使用bookStore数据提供下拉列表项的数据 83 displayField:'bookname',//列表项的显示文本使用name字段的值 84 valueField:'bookid',//列表项的值使用id字段的值 85 queryMode:'local'//指定使用Store中已有的数据 86 } 87 ] 88 }); 89 90 });
后台核心代码：
扫描二维码关注公众号，回复：
1927228 查看本文章
GetBookServlet
1 @WebServlet(urlPatterns = "/getBooksByCategory") 2 public class GetBooksServlet extends HttpServlet { 3 @Override 4 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 5 doPost(req, resp); 6 } 7 8 @Override 9 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 10 req.setCharacterEncoding("utf-8"); 11 IBookService bookService = new BookService(); 12 Integer categoryId = Integer.valueOf(req.getParameter("categoryId")); 13 //准备json串 14 List<Book> books = bookService.getBookByCategoryId(categoryId); 15 List list = new ArrayList(); 16 17 18 for (int i = 0; i <books.size() ; i++) { 19 Map<String,Object> map =new HashMap<>(); 20 map.put("bookid",books.get(i).getBookId()); 21 map.put("bookname",books.get(i).getBookName()); 22 map.put("author",books.get(i).getAuthor()); 23 map.put("categoryId",books.get(i).getCategory().getCategoryId()); 24 list.add(i,map); 25 } 26 27 Map<String,Object> map = new HashMap<>(); 28 map.put("data",list); 29 30 //将map包装成json对象后输出 31 resp.setContentType("text/html;charset=utf-8"); 32 System.out.println(new JSONObject(map)); 33 34 resp.getWriter().print(new JSONObject(map)); 35 } 36 }
GetAllCategory
1 @WebServlet(urlPatterns = "/getAllCategory") 2 public class GetAllCategoryServlet extends HttpServlet { 3 @Override 4 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 5 doPost(req, resp); 6 } 7 8 @Override 9 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 10 //这里是没有请求参数的！ 11 req.setCharacterEncoding("utf-8"); 12 ICategoryService categoryService = new CategoryService(); 13 //准备JSON串 14 List<Category> categories = categoryService.getAllCategory(); 15 List list = new ArrayList(); 16 17 for (int i =0;i<categories.size();i++){ 18 Map<String,Object> map = new HashMap<>(); 19 map.put("id",categories.get(i).getCategoryId()); 20 map.put("name",categories.get(i).getCategoryName()); 21 list.add(i,map); 22 } 23 24 Map<String,Object> map = new HashMap<>(); 25 26 map.put("data",list); 27 //map.put("success",true); 28 //将map包装成json对象后输出 29 /*[{"data":[{"name":"古典小说","id":1},{"name":"都市言情","id":2}]}]*/ 30 JSONArray js = JSONArray.fromObject(map); 31 System.out.println(js); 32 /*[{"data":[{"name":"古典小说","id":1},{"name":"都市言情","id":2}]}]*/ 33 34 //一个是json数组，还有一个是json对象，浏览器只支持对象，即下面这个！！！！！ 35 36 /*{"data":[{"name":"古典小说","id":1},{"name":"都市言情","id":2}]}*/ 37 38 //准备输出服务器的响应 39 resp.setContentType("text/html;charset=utf-8"); 40 System.out.println(new org.json.JSONObject(map)); 41 resp.getWriter().print(new org.json.JSONObject(map)); 42 } 43 }
用到的持久层代码片段：
1 @Override 2 /** 3 * 数据量较少，就不用分页了，直接通过hql语句查询 4 */ 5 public List<Category> getAllCategory() { 6 session = HibernateUtil.getSession(); 7 try{ 8 List resultList = session.createQuery("from Category c").list(); 9 return resultList; 10 }catch (Exception e){ 11 e.printStackTrace(); 12 throw e; 13 } 14 } 15 16 17 @Override 18 public List getBookByCategoryId(Integer id) { 19 session = HibernateUtil.getSession(); 20 try{ 21 List resultList = session 22 .createQuery("from Book b where b.category.id =:id").setInteger("id",id).list(); 23 System.out.println("查询完毕，正在返回结果"); 24 return resultList; 25 }catch (Exception e){ 26 e.printStackTrace(); 27 System.out.println("根据目录id查询失败！"); 28 throw e; 29 } 30 }
