WeX5通过Baas服务访问数据库.doc

WeX5通过Baas服务访问数据库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-tomcatwebappsbaas”，“完成”。2.2 JNDI数据源配置/baas/META-INF/context.xml注意：Tomcat 6启动时，自动将“/baas/META-INF/context.xml”复制一份到“apache-tomcatconfCatalinalocalhostbaas.xml”。但是当context.xml内容修改后，Tomcat并不会自动更新。所以,修改context.xml的内容后，需要手动更新“apache-tomcatconfCatalinalocalhostbaas.xml”。切记！切记！特别注意：由于Tomcat 6的bug（/bugzilla/show_bug.cgi?id=44725），不要在Tomcat服务运行时删除“apache-tomcatconfCatalinalocalhostbaas.xml”，否则Tomcat会自动删除WEB-INF/web.xml。2.3 Java Servletcom.justep.baas.test.DemoServlet/ Servlet入口，通过判断action参数，进入各自对应的实现方法public void service(ServletRequest request, ServletResponse response) throws ServletException try String action = request.getParameter(action);if (queryOrder.equals(action) queryOrder(request, response); else if (saveOrder.equals(action) saveOrder(request, response); catch (Exception e) e.printStackTrace();throw new ServletException(e);这里实现了queryOrder和saveOrder两个action。/ 查询订单，实现了分页查询和按检索关键字过滤private static void queryOrder(ServletRequest request, ServletResponse response) throws SQLException, IOException, NamingException / 参数序列化JSONObject params = (JSONObject) JSONObject.parse(request.getParameter(params);/ 获取参数String columns = params.getString(columns); / 要返回的数据列Integer limit = params.getInteger(limit); / 分页查询的行数Integer offset = params.getInteger(offset); / 分页查询的行偏移String search = params.getString(search); / 检索关键字/ 存放SQL中的参数值List sqlParams = new ArrayList();/ 存放SQL中的过滤条件List filters = new ArrayList();if (!Util.isEmptyString(search) / 增加过滤条件filters.add(fUserName LIKE ? OR fPhoneNumber LIKE ? OR fAddress LIKE ? OR fContent LIKE ?);/ 检索关键字中如果没有%，则前后自动加%search = (search.indexOf(%) != -1) ? search : % + search + %;/ 增加参数值，参数的个数和顺序必须与过滤条件的?相匹配 for (int i = 0; i 4; i+) sqlParams.add(search);Table table = null;/ 获取数据源连接Connection conn = Util.getConnection(DATASOURCE_TAKEOUT);try / 执行单表数据查询，返回Tabletable = Util.queryData(conn, TABLE_TAKEOUT_ORDER, columns, filters, fCreateTime DESC, sqlParams, offset, limit); finally / 必须关闭数据源连接conn.close();/ 输出Table做为返回结果，这里会自动转换为Table的JSON格式 Util.writeTableToResponse(response, table);/ 保存订单private static void saveOrder(ServletRequest request, ServletResponse response) throws ParseException, SQLException, NamingException / 参数序列化JSONObject params = (JSONObject) JSONObject.parse(request.getParameter(params);/ 获取参数JSONObject data = params.getJSONObject(data); / 订单数据的JSON格式/ JSON转换TableTable table = Transform.jsonToTable(data);/ 获取数据源连接Connection conn = Util.getConnection(DATASOURCE_TAKEOUT);try / 开启事务conn.setAutoCommit(false);try / 保存TableUtil.saveData(conn, table, TABLE_TAKEOUT_ORDER);/ 提交事务mit(); catch (SQLException e) / 如果发生异常，首先回滚事务，然后把异常继续抛出conn.rollback();throw e; finally / 必须关闭数据源连接conn.close();在上面的代码中，大多数都是用来处理参数、数据库连接和事务的代码，核心代码其实只有以下几句：/ 执行单表数据查询，返回Tabletable = Util.queryData(conn, TABLE_TAKEOUT_ORDER, columns, filters, fCreateTime DESC, sqlParams, offset, limit);/ 输出Table做为返回结果，这里会自动转换为Table的JSON格式 Util.writeTableToResponse(response, table);/ JSON转换TableTable table = Transform.jsonToTable(data);/ 保存TableUtil.saveData(conn, table, TABLE_TAKEOUT_ORDER);2.4 Servlet配置/baas/WEB-INF/web.xmlX5 Baas Demo Servletcom.justep.baas.test.DemoServlet1X5 Baas Demo Servlet/demo3 客户端3.1 页面设计/UI2/demo/baas/simpleData/index.w页面上包含一个数据组件orderData，orderData的列设置与数据库表takeout_order的列结构相匹配。页面布局的最外层是一个panel，将页面分为上中下三个部分：u 上部包含一个titleBar组件，设置了页面的标题和几个按钮，几个按钮的onClick事件分别设置了window或orderData的操作；u 中部包含一个contents多页组件，里面包含两个页listContent和detailContent；u 下部包含一个buttonGroup组件，里面包含两个按钮，分别通过target属性指向listContent和detailContent。listContent中用一个pancel分成上下两个部分：u 上部包含一个inputGroup，用于输入检索关键字；u 下部外层是scrollView，scrollView的中间是一个list，用于展示订单列表数据。detailContent中包含一组单列布局的labelInput组件，用于编辑订单数据。3.2 页面代码/UI2/demo/baas/simpleData/index.js/ 引入/UI2/demo/baas/baas.jsvar Baas = require($UI/demo/baas/baas);/ orderData的自定义刷新事件onCustomRefreshMtotype.orderDataCustomRefresh = function(event) / 获取当前数据对象var data = event.source;/ 构造请求参数var params = / 指定返回的列 - 不仅用于限定返回的列范围，同时也用于指定返回列名的大小写columns : data.getColumnIDs(),/ 分页信息 - 行数limit : event.limit,/ 分页信息 - 行偏移offset : event.offset,/ 检索关键字search : this.getElementByXid(searchInput).value;/ 请求成功后的回调方法var success = function(resultData) / 通过event.options.append判断数据是否增量加载var append = event.options & event.options.append;/ 加载返回数据到datadata.loadData(resultData, append);/ 发送请求Baas.sendRequest(url : /demo, / servlet请求地址action : queryOrder, / actionparams : params, / action对应的参数success : success / 请求成功后的回调方法);/ orderData的自定义保存事件onCustomSaveMtotype.orderDataCustomSave = function(event) / 获取当前数据对象var data = event.source;/ 构造请求参数var params = data : data.toJson(true) / 将数据集中已变更数据导出为JSON数据;/ 请求成功后的回调方法var success = function(resultData) / 保存成功后，必须调用data.applyUpdates()，用于数据集确认数据已更新data.applyUpdates();/ 发送请求Baas.sendRequest(url : /demo, / servlet请求地址action : saveOrder, / actionparams : params, / action对应的参数success : success / 请求成功后的回调方法);上面代码中的核心代码如下：/ 发送请求Baas.sendRequest(url : /demo, / servlet请求地址action : saveOrder, / actionparams : params, / action对应的参数success : success / 请求成功后的回调方法);这是客户端最重要一个方法，用于发送ajax请求，这个方法更多的注释和实现，参考/UI2/demo/baas/baas.js。执行这个方法需要在js头引入baas.js：var Baas = require($UI/demo/baas/baas);