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<?xml version="1.0" encoding="UTF-8"?><Context reloadable="true"><Resource name="jdbc/takeout" type="javax.sql.DataSource"maxActive="100" maxIdle="30"driverClassName="com.mysql.jdbc.Driver" url="jdbc:mysql:/127.0.0.1:3306/takeout"username="root" password="x5" /></Context>注意：Tomcat 6启动时，自动将“/baas/META-INF/context.xml”复制一份到“apache-tomcatconfCatalinalocalhostbaas.xml”。但是当context.xml内容修改后，Tomcat并不会自动更新。所以,修改context.xml的内容后，需要手动更新“apache-tomcatconfCatalinalocalhostbaas.xml”。切记！切记！特别注意：由于Tomcat 6的bug（https:/bz.apache.org/bugzilla/show_bug.cgi?id=44725），不要在Tomcat服务运行时删除“apache-tomcatconfCatalinalocalhostbaas.xml”，否则Tomcat会自动删除WEB-INF/web.xml。2.3 Java Servlet/ 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<Object> sqlParams = new ArrayList<Object>();/ 存放SQL中的过滤条件List<String> filters = new ArrayList<String>();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);/ 提交事务conn.commit(); 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.xml<servlet><servlet-name>X5 Baas Demo Servlet</servlet-name><servlet-class>com.justep.baas.test.DemoServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>X5 Baas Demo Servlet</servlet-name><url-pattern>/demo</url-pattern></servlet-mapping>3 客户端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属性指向