文档章节

wex5和nutz集成,前端wex5,后端nutz

muyu
 muyu
发布于 2016/11/13 00:29
字数 587
阅读 580
收藏 8

今天用wex5解决数据维护的需求,需求比较简单,订单数据的查询、新增、删除、更新。

  1. 功能界面见下图

2. wex5的代码片段,主要是data组件的两个事件orderDataCustomRefresh、orderDataCustomSave

  • orderDataCustomRefresh
	Model.prototype.orderDataCustomRefresh = function(event){
		var searchVal = this.getElementByXid("searchInput").value;
		var dfd =$.Deferred();
		var doRefresh =function(event,dfd){
			justep.Baas.sendRequest({
				"url" : "/ecoolper/order",
				"action" : "queryAction",
				"async" : true,
				"params" : {
					"searchVal" : searchVal,
					"limit" : event.limit,
					"offset" : event.offset
				},
				"success" : function(table) {
					event.source.loadData(table,event.options.append);
					dfd.resolve();
				}
			});
			return dfd.promise();
		}(event,dfd);
		event.promise =$.when(doRefresh);
	};
  • orderDataCustomSave
	Model.prototype.orderDataCustomSave = function(event){
		var dfd =$.Deferred();
		var doSave =function(event,dfd){
			justep.Baas.sendRequest({
				"url" : "/ecoolper/order",
				"action" : "saveAction",
				"async" : true,
				"params" : {
					table : event.source.toJson(true)
				},
				"success" : function(data) {
					dfd.resolve();
				}
			});
			return dfd.promise();
		}(event,dfd);
		event.promise =$.when(doSave);
	};

这里用到了jquery的Deferred特性,5.2版本是没有这个特性的。

  • x5 studio的设计界面

3. nutz后端 后端用的baaServer做的改造,BaasServer工程在runtime目录下,先把BaasServer工程导入到studio中,再做改造。

后端主要用到OrderAction的两个方法query、saveAction

  • query
	@At("/queryAction")
	@Ok("json")
	@AdaptBy(type = JsonAdaptor.class)
	public JSONObject query(@Param("..") JSONObject params) {
		Integer limit = params.getInteger("limit");
		Integer offset = params.getInteger("offset");
		String searchVal =params.getString("searchVal");
		Cnd cnd = Cnd.NEW();
		if(Strings.isNotBlank(searchVal)){
			searchVal ="%"+searchVal+"%";
			cnd.or("userName","like", searchVal);
			cnd.or("phoneNumber", "like",  searchVal);
			cnd.or("address", "like", searchVal);
			cnd.or("content", "like", searchVal);
		}

		int pageNumber = (int) Math.ceil(offset / limit) + 1;
		Pager pager = new Pager();
		pager.setPageNumber(pageNumber);
		pager.setPageSize(limit);
		List<Order> rows = dao.query(Order.class, cnd, pager);
		// 设置总个数
		pager.setRecordCount(dao.count(Order.class, cnd));

		JSONObject table = new JSONObject();
		table.put("@type", "table");// 设置type
		table.put("rows", rows);// rows
		JSONObject userdata = new JSONObject();
		userdata.put("sys.count", pager.getRecordCount());
		table.put("userdata", userdata);// 设置userdata
		return table;
	}
  • saveAction
	@At("/saveAction")
	@AdaptBy(type = JsonAdaptor.class)
	@Aop(TransAop.READ_COMMITTED)
	public void saveAction(@Param("..") JSONObject params) throws ParseException {
		Table table = Transform.jsonToTable(params.getJSONObject("table"));
		// 更新
		List<Order> list = Transform2.tableToPojo(table, RowState.EDIT, Order.class);
		dao.update(list, DataUtils2.arrayJoin4Regex(table.getColumnNames().toArray(), "%s", "|"));
		// 添加
		list = Transform2.tableToPojo(table, RowState.NEW, Order.class);
		dao.insert(list);
		// 删除
		list = Transform2.tableToPojo(table, RowState.DELETE, Order.class);
		dao.delete(list);
	}
  • DataUtils2类
public class DataUtils2 {

	public static String arrayJoin4Regex(Object[] objects, String format, String separator) {
		StringBuffer buf = new StringBuffer();
		buf.append("^(");
		for (Object o : objects) {
			if (buf.length() > 0) {
				buf.append(separator);
			}
			buf.append(String.format(format, o.toString()));
		}
		buf.append(")$");
		return buf.toString();
	}
	
}
  • Transform2
public class Transform2 {
	public static <T> List<T> tableToPojo(Table table, RowState state, Class<T> type) {
		List<T> list = new ArrayList<>(); // 存放转换结果
		// 先得到所有字段名称
		Collection<String> names = table.getColumnNames();
		// 开始遍历row
		for (Row row : table.getRows(state)) {
			Map<String, Object> map = new HashMap<String, Object>();
			for (String name : names) {
				map.put(name, row.getValue(name));
			}
			T t = Lang.map2Object(map, type);
			list.add(t);
		}
		return list;
	}
}

源码位置:http://bbs.wex5.com/forum.php?mod=viewthread&tid=108674&extra=page%3D1

© 著作权归作者所有

共有 人打赏支持
muyu

muyu

粉丝 36
博文 35
码字总数 3632
作品 0
海淀
程序员
用Wex5实现部分移动端页面效果

根据设计原型采用起步科技Wex5开发框架完成静态前端页面开发。 详细的需求在附件中,都是做成html5的静态页面,但是必须用wex5的框架

张杰东
07/17
0
0
【php增删改查实例】第二十六节 - 个人详情页制作

在一般的系统中,当用户点击头像的时候,就会跳转到对应的个人详情页,在这个页面,他可以查看和修改自己的个人信息,或者更换头像。 本案例中,个人详情页使用bootstrap框架。 首先,我们新...

剽悍一小兔
06/07
0
0
最火的前端开发框架Bootstrap简单了解

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 [1] Bootstrap提供了优雅的H...

mcy0425
09/12
0
0
我是木予/nutz_baas

nutz_baas 修改baas部分代码 添加部分代码,主要在com.my目录下 可以和X5的Baas事务完全融合,事务交给Baas管理,nutz不管理 Wex5 WeX5是H5 App开发工具,Apache开源,免费开放所有代码,所开...

我是木予
2016/05/05
0
0
使用so动态链接库g++正确,gcc undefined reference错误

在调用libcyusb.so时出现undefined reference错误,具体过程如下: test.c如下: cyusb_open为libcyusb.so中的库函数,使用 g++ test.c -lcyusb 可正确编译 gcc test.c -lcyusb 错误,提示c...

悲催的古灵武士
02/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
0
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
0
0
学习设计模式——中介者模式

1. 认识中介者模式 1. 定义:用一个中介对象来封装一系列的对象交互行为,中介者使得各对象不需要显式的互相引用,从而使其松散耦合,独立的改变他们之间的交互。 2. 结构: Mediator:中介者...

江左煤郎
昨天
0
0
深入理解Plasma(1):Plasma 框架

这一系列文章将围绕以太坊的二层扩容框架,介绍其基本运行原理,具体操作细节,安全性讨论以及未来研究方向等。本篇文章作为开篇,主要目的是理解 Plasma 框架。 Plasma 作为以太坊的二层扩容...

HiBlock
昨天
0
0
Java 8 日期 示例

Java 8 推出了全新的日期时间API。Java处理日期、日历和时间的方式一直为社区所诟病,将 java.util.Date设定为可变类型,以及SimpleDateFormat的非线程安全使其应用非常受限。Java也意识到需...

阿刚ABC
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部