1
案例概述
本案例实现了对takeout_order（外卖订单表）表的分页查询、关键字检索和修改保存的能力，数据库表结构参见WeX5自带的mysql数据库。
案例代码分为服务端和客户端两部分：
服务端包含一个servlet（com.justep.baas.test.DemoServlet），用于为客户端提供数据查询和数据保存的Web服务；
客户端包含一个.w页面（/UI2/demo/baas/simpleData/index.w），页面上的数据集通过ajax请求访问服务端提供的Web服务，实现数据的增删改查。
2 服务端
2.1 导入baas工程
1、 运行“启动WeX5开发工具.bat”；
2、 打开Java透视图，选择菜单“窗口-打开透视图-Java”； 3、 导入baas工程，选择菜单“文件-导入”，选择“常规-现有项目到工作空间中”，“下
一步”，“选择根目录-浏览”，选择WeX5目录下“apache-tomcat\\webapps\\baas”，“完成”。
2.2 JNDI数据源配置
/baas/META-INF/context.xml
driverClassName=%url=\
username=\password=\/>
maxActive=\maxIdle=\ 注意： Tomcat 6启动时，自动将“/baas/META-INF/context.xml”复制一份到“\\apache-tomcat\\conf\\Catalina\\localhost\\baas.xml”。但是当context.xml内容修改后，Tomcat并不会自动更新。所以,修改context.xml的内容后，需要手动更新“\\apache-tomcat\\conf\\Catalina\\localhost\\baas.xml”。切记！切记！ www.wex5.com 特别注意： 由于Tomcat 6的bug（https://bz.apache.org/bugzilla/show_bug.cgi?id=44725），不要在Tomcat服务运行时删除“\\apache-tomcat\\conf\\Catalina\\localhost\\baas.xml”，否则Tomcat会自动删除WEB-INF/web.xml。 2.3 Java Servlet com.justep.baas.test.DemoServlet // Servlet入口，通过判断action参数，进入各自对应的实现方法 publicvoid service(ServletRequest request, ServletResponse response) throws ServletException { } try { String action = request.getParameter(\); if (\.equals(action)) { queryOrder(request, response); } elseif (\.equals(action)) { } saveOrder(request, response); } catch (Exception e) { } e.printStackTrace(); thrownew ServletException(e); 这里实现了queryOrder和saveOrder两个action。 // 查询订单，实现了分页查询和按检索关键字过滤 privatestaticvoid queryOrder(ServletRequest request, ServletResponse response) throws SQLException, IOException, NamingException { // 参数序列化 JSONObject params = (JSONObject) JSONObject.parse(request.getParameter(\)); // 获取参数 String columns = params.getString(\); // 要返回的数据列 Integer limit = params.getInteger(\); // 分页查询的行数 Integer offset = params.getInteger(\); // 分页查询的行偏移 String search = params.getString(\); // 检索关键字 // 存放SQL中的参数值 List List www.wex5.com if (!Util.isEmptyString(search)) { // 增加过滤条件filters.add(\LIKE ? OR fPhoneNumber LIKE ? OR fAddress LIKE ? OR fContent LIKE ?\); } Table table = null; // 获取数据源连接 Connection conn = Util.getConnection(DATASOURCE_TAKEOUT); try { // 执行单表数据查询，返回Table table = Util.queryData(conn, TABLE_TAKEOUT_ORDER, columns, filters, // 检索关键字中如果没有%，则前后自动加% search = (search.indexOf(\) != -1) ? search : \ + search + \; // 增加参数值，参数的个数和顺序必须与过滤条件的?相匹配 for (int i = 0; i < 4; i++) { } sqlParams.add(search); \, sqlParams, offset, limit); } // 保存订单 privatestaticvoid saveOrder(ServletRequest request, ServletResponse response) throws } finally { } // 输出Table做为返回结果，这里会自动转换为Table的JSON格式 Util.writeTableToResponse(response, table); // 必须关闭数据源连接 conn.close(); ParseException, SQLException, NamingException { // 参数序列化 JSONObject params = (JSONObject) JSONObject.parse(request.getParameter(\)); // 获取参数 JSONObject data = params.getJSONObject(\); // 订单数据的JSON格式 // JSON转换Table Table table = Transform.jsonToTable(data); // 获取数据源连接 Connection conn = Util.getConnection(DATASOURCE_TAKEOUT); try { // 开启事务 conn.setAutoCommit(false); try { // 保存Table Util.saveData(conn, table, TABLE_TAKEOUT_ORDER); www.wex5.com } // 提交事务 conn.commit(); } catch (SQLException e) { } // 如果发生异常，首先回滚事务，然后把异常继续抛出 conn.rollback(); throw e; } finally { } // 必须关闭数据源连接 conn.close(); 在上面的代码中，大多数都是用来处理参数、数据库连接和事务的代码，核心代码其实只有以下几句： // 执行单表数据查询，返回Table table = Util.queryData(conn, TABLE_TAKEOUT_ORDER, columns, filters, \, sqlParams, offset, limit); // 输出Table做为返回结果，这里会自动转换为Table的JSON格式 Util.writeTableToResponse(response, table); // JSON转换Table Table table = Transform.jsonToTable(data); // 保存Table Util.saveData(conn, table, TABLE_TAKEOUT_ORDER); 2.4 Servlet配置 /baas/WEB-INF/web.xml 3 客户端 www.wex5.com 3.1 页面设计 /UI2/demo/baas/simpleData/index.w 页面上包含一个数据组件orderData，orderData的列设置与数据库表takeout_order的列结构相匹配。 页面布局的最外层是一个panel，将页面分为上中下三个部分： ? 上部包含一个titleBar组件，设置了页面的标题和几个按钮，几个按钮的 onClick事件分别设置了window或orderData的操作； ? 中部包含一个contents多页组件，里面包含两个页listContent和 detailContent； ? 下部包含一个buttonGroup组件，里面包含两个按钮，分别通过target属性 指向listContent和detailContent。 listContent中用一个pancel分成上下两个部分： ? 上部包含一个inputGroup，用于输入检索关键字； ? 下部外层是scrollView，scrollView的中间是一个list，用于展示订单列表 数据。 detailContent中包含一组单列布局的labelInput组件，用于编辑订单数据。 3.2 页面代码 /UI2/demo/baas/simpleData/index.js // 引入/UI2/demo/baas/baas.js var Baas = require(\); // orderData的自定义刷新事件onCustomRefresh Model.prototype.orderDataCustomRefresh = function(event) { // 获取当前数据对象 var data = event.source; // 构造请求参数 www.wex5.com