WeX5.Baas服务详解 视频地址:http://pan.baidu.com/s/1o6upyJ4

baas.net 版:http://wex5.com/cn/wex5-baas-guide-net/

1      概述

本案例实现了对takeout_order(外卖订单表)表的分页查询、关键字检索和修改保存的能力,数据库表结构参见WeX5自带的mysql数据库。

bass-sampleData-run

案例代码分为服务端和客户端两部分:

    服务端包含一个servlet(com.justep.baas.test.DemoServlet),用于为客户端提供数据查询和数据保存的Web服务;

    客户端包含一个.w页面(/UI2/demo/baas/simpleData/index.w),页面上的数据集通过ajax请求访问服务端提供的Web服务,实现数据的增删改查。

2      服务端

服务端实现了一个servlet(com.justep.baas.test.DemoServlet),用于为客户端提供数据查询和数据保存的Web服务。

2.1   导入baas工程

  1. 运行“启动WeX5开发工具.bat”;
  2. 打开Java透视图,选择菜单“窗口-打开透视图-Java”;
  3. 导入baas工程,选择菜单“文件-导入”,选择“常规-现有项目到工作空间中”,“下一步”,“选择根目录-浏览”,选择WeX5目录下“apache-tomcat\webapps\baas”,“完成”。

2.2   JNDI数据源配置

/baas/META-INF/context.xml

 
  1. <?xml version=“1.0” encoding=“UTF-8″?>
  2. <Context reloadable=“true”>
  3.     <Resource name=“jdbc/takeout” type=“javax.sql.DataSource”
  4.         maxActive=“100” maxIdle=“30”
  5.         driverClassName=“com.mysql.jdbc.Driver” url=“jdbc:mysql://127.0.0.1:3306/takeout”
  6.         username=“root” password=“x5″ />
  7. </Context>

注意:
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”。切记!切记!

特别注意

由于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

 
  1. // Servlet入口,通过判断action参数,进入各自对应的实现方法
  2. public void service(ServletRequest request, ServletResponse response) throws ServletException {
  3.     try {
  4.         String action = request.getParameter(“action”);
  5.         if (“queryOrder”.equals(action)) {
  6.             queryOrder(request, response);
  7.         } else if (“saveOrder”.equals(action)) {
  8.             saveOrder(request, response);
  9.         }
  10.     } catch (Exception e) {
  11.         e.printStackTrace();
  12.         throw new ServletException(e);
  13.     }
  14. }

这里实现了queryOrder和saveOrder两个action。

 
  1. // 查询订单,实现了分页查询和按检索关键字过滤
  2. private static void queryOrder(ServletRequest request, ServletResponse response) throws SQLException, IOException, NamingException {
  3.     // 参数序列化
  4.     JSONObject params = (JSONObject) JSONObject.parse(request.getParameter(“params”));
  5.     // 获取参数
  6.     JSONObject columns = params.getJSONObject(“columns”); // 要返回的数据列定义,里面包含列名和列数据类型 
  7.     Integer limit = params.getInteger(“limit”); // 分页查询的行数
  8.     Integer offset = params.getInteger(“offset”); // 分页查询的行偏移
  9.     String search = params.getString(“search”); // 检索关键字
  10.     // 存放SQL中的参数值
  11.     List<Object> sqlParams = new ArrayList<Object>();
  12.     // 存放SQL中的过滤条件
  13.     List<String> filters = new ArrayList<String>();
  14.     if (!Util.isEmptyString(search)) {
  15.         // 增加过滤条件
  16.         filters.add(“fUserName LIKE ? OR fPhoneNumber LIKE ? OR fAddress LIKE ? OR fContent LIKE ?”);
  17.         // 检索关键字中如果没有%,则前后自动加%
  18.         search = (search.indexOf(“%”) != -1) ? search : “%” + search + “%”;
  19.         // 增加参数值,参数的个数和顺序必须与过滤条件的?相匹配 
  20.         for (int i = 0; i < 4; i++) {
  21.             sqlParams.add(search);
  22.         }
  23.     }
  24.     Table table = null;
  25.     // 获取数据源连接
  26.     Connection conn = Util.getConnection(DATASOURCE_TAKEOUT);
  27.     try {
  28.         // 执行单表数据查询,返回Table
  29.         table = Util.queryData(conn, TABLE_TAKEOUT_ORDER, columns, filters, “fCreateTime DESC”, sqlParams, offset, limit);
  30.     } finally {
  31.         // 必须关闭数据源连接
  32.         conn.close();
  33.     }
  34.     // 输出Table做为返回结果,这里会自动转换为Table的JSON格式 
  35.     Util.writeTableToResponse(response, table);
  36. }
 
  1. // 保存订单
  2. private static void saveOrder(ServletRequest request, ServletResponse response) throws ParseException, SQLException, NamingException {
  3.     // 参数序列化
  4.     JSONObject params = (JSONObject) JSONObject.parse(request.getParameter(“params”));
  5.     // 获取参数
  6.     JSONObject data = params.getJSONObject(“data”); // 订单数据的JSON格式
  7.     // JSON转换Table
  8.     Table table = Transform.jsonToTable(data);
  9.     // 获取数据源连接
  10.     Connection conn = Util.getConnection(DATASOURCE_TAKEOUT);
  11.     try {
  12.         // 开启事务
  13.         conn.setAutoCommit(false);
  14.         try {
  15.             // 保存Table
  16.             Util.saveData(conn, table, TABLE_TAKEOUT_ORDER);
  17.             // 提交事务
  18.             conn.commit();
  19.         } catch (SQLException e) {
  20.             // 如果发生异常,首先回滚事务,然后把异常继续抛出
  21.             conn.rollback();
  22.             throw e;
  23.         }
  24.     } finally {
  25.         // 必须关闭数据源连接
  26.         conn.close();
  27.     }
  28. }

在上面的代码中,大多数都是用来处理参数、数据库连接和事务的代码,核心代码其实只有以下几句:

 
  1. // 执行单表数据查询,返回Table
  2. table = Util.queryData(conn, TABLE_TAKEOUT_ORDER, columns, filters, “fCreateTime DESC”, sqlParams, offset, limit);
 
  1. // 输出Table做为返回结果,这里会自动转换为Table的JSON格式 
  2. Util.writeTableToResponse(response, table);
 
  1. // JSON转换Table
  2. Table table = Transform.jsonToTable(data);
 
  1. // 保存Table
  2. Util.saveData(conn, table, TABLE_TAKEOUT_ORDER);

2.4   Servlet配置

/baas/WEB-INF/web.xml

 
  1. <servlet>
  2.     <servlet-name>X5 Baas Demo Servlet</servlet-name>
  3.     <servlet-class>com.justep.baas.test.DemoServlet</servlet-class>
  4.     <load-on-startup>1</load-on-startup>
  5. </servlet>
  6. <servlet-mapping>
  7.     <servlet-name>X5 Baas Demo Servlet</servlet-name>
  8.     <url-pattern>/demo</url-pattern>
  9. </servlet-mapping>

3      客户端

客户端通过data组件的自定义刷新(onCustomRefresh)和自定义保存(onCustomSave)事件,实现页面数据与后台servlet服务的交互。

3.1   页面设计

/UI2/demo/baas/simpleData/index.w

bass-sampleData-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

 
  1. // 引入/UI2/demo/baas/baas.js
  2. var Baas = require(“$UI/demo/baas/baas”);
 
  1. // orderData的自定义刷新事件onCustomRefresh
  2. Model.prototype.orderDataCustomRefresh = function(event) {
  3.     // 获取当前数据对象
  4.     var data = event.source;
  5.     // 构造请求参数
  6.     var params = {
  7.         // 列定义,里面包含列名和列数据类型
  8.         “columns” : Baas.getDataColumns(data),
  9.         // 分页信息 – 行数
  10.         “limit” : event.limit,
  11.         // 分页信息 – 行偏移
  12.         “offset” : event.offset,
  13.         // 检索关键字
  14.         “search” : this.getElementByXid(“searchInput”).value
  15.     };
  16.     // 请求成功后的回调方法
  17.     var success = function(resultData) {
  18.         // 通过event.options.append判断数据是否增量加载
  19.         var append = event.options && event.options.append;
  20.         // 加载返回数据到data
  21.         data.loadData(resultData, append);
  22.     };
  23.     // 发送请求
  24.     Baas.sendRequest({
  25.         “url” : “/demo”// servlet请求地址
  26.         “action” : “queryOrder”// action
  27.         “params” : params, // action对应的参数
  28.         “success” : success // 请求成功后的回调方法
  29.     });
  30. };
 
  1. // orderData的自定义保存事件onCustomSave
  2. Model.prototype.orderDataCustomSave = function(event) {
  3.     // 获取当前数据对象
  4.     var data = event.source;
  5.     // 构造请求参数
  6.     var params = {
  7.         “data” : data.toJson(true// 将数据集中已变更数据导出为JSON数据
  8.     };
  9.     // 请求成功后的回调方法
  10.     var success = function(resultData) {
  11.         // 保存成功后,必须调用data.applyUpdates(),用于数据集确认数据已更新
  12.         data.applyUpdates();
  13.     };
  14.     // 发送请求
  15.     Baas.sendRequest({
  16.         “url” : “/demo”// servlet请求地址
  17.         “action” : “saveOrder”// action
  18.         “params” : params, // action对应的参数
  19.         “success” : success // 请求成功后的回调方法
  20.     });
  21. };

上面代码中的核心代码如下:

 
  1. // 发送请求
  2. Baas.sendRequest({
  3.     “url” : “/demo”// servlet请求地址
  4.     “action” : “saveOrder”// action
  5.     “params” : params, // action对应的参数
  6.     “success” : success // 请求成功后的回调方法
  7. });
  8. 这是客户端最重要一个方法,用于发送ajax请求,这个方法更多的注释和实现,参考/UI2/demo/baas/baas.js。
  9. 执行这个方法需要在js头引入baas.js:var Baas = require(“$UI/demo/baas/baas”);
 
  1. // 加载返回数据到data
  2. data.loadData(resultData, append);
 
  1. data.toJson(true// 将数据集中已变更数据导出为JSON数据
 
  1. // 保存成功后,必须调用data.applyUpdates(),用于数据集确认数据已更新
  2. data.applyUpdates();

4      运行和调试

4.1   案例运行

  1. 运行“启动MySQL数据库.bat”;
  2. 运行“启动WeX5开发工具.bat”;
  3. 点击WeX5开发工具最上面的“小狐狸”按钮,启动Tomcat;
  4. 浏览器(推荐Chrome)地址栏输入http://localhost:8080/x5/m
  5. 点左上角的按钮呼出菜单项,选择“演示案例/BAAS/简单数据”。

4.2   服务端Java调试

WeX5开发工具中,选择菜单“窗口-首选项”,“首选项”中左边选择“Studio配置-Tomcat”,右边去掉“不以调试模式启动Tomcat”,去掉“自动设置源文件目录”,勾选“baas”。配置修改后,需要重新启动Tomcat。

bass-studio-tomcat

Java代码编辑窗口中,在需要调试代码的左侧边框,右键菜单选择“切换断点”,代码运行时会自动停在断点位置并进入调试模式。

bass-java-debug

4.3   客户端JavaScript调试

  1. 在代码中需要调试的地方,输入“debugger;”;
  2. Chrome浏览器,F12呼出开发人员工具,代码运行时会自动停到debugger的代码位置并进入调试模式。

bass-js-debug

 

 

本文示例代码适用于WeX5 V3.1以上版本,有关Bass服务的详解配套视频请下载:WeX5 Baas服务详解