[云开发2]-快速开发一个问卷调查云应用(前端)

通过OpenUI5来开发一个问卷调查前端

阅读这篇blog大约需要5分钟

在这里插入图片描述

现在通过OpenUI5来开发一个简单的问卷调查前端。

抱着学习UI5的目的,这个例子是通过VS Code在本地开发测试运行的。

OpenUI5是SAP根据Fiori设计的HTML5框架。开源、免费。SAP在企业级云应用开发过程中的大量积累都在其中,比较成熟,对于复杂的企业级应用来说,是前端的开发利器。UI5是完全基于MVC的设计,和OData数据模型结合有很大的优势。

Programs must be written for people to read, and only incidentally for machines to execute. --Harold Abelson

创建项目

为了节约时间,这里使用了模板项目:

https://github.com/SAP/openui5-basic-template-app

下载到本地:

git clone https://github.com/SAP/openui5-basic-template-app

运行:

npm start

在这里插入图片描述
运行成功是一个空白页,可以看到已经自带了UI5的背景主题风格。

页面开发

用户界面很简单,主要包含了:

  • 问题清单
  • 提交按钮

在这里插入图片描述

调用接口

在Controller代码中,通过JQuery调用RESTful API:

result.answers = [q1, q2, q3, q4, q5];

			var jsonData = JSON.stringify(result);
	  
			$.ajax({
			  url: url,
			  type: "POST",
			  contentType: "application/json",
			  dataType: "json",
			  data: jsonData,

			  success: function(data){
				console.log("success"+data);
			  },
			  error: function(e){
				  console.log("error: "+e);
			  }
			});
			
			MessageToast.show("感谢您的参与,已经成功提交。");

测试运行

测试正常,数据正确。加载速度比其它开源流行框架稍慢一点。

小结

UI5目前的版本是1.7,功能非常成熟和强大了,这个小例子使用UI5来实现有一点点杀鸡用牛刀的感觉。这个小例子主要是学习了解一下UI5的开发技术。

项目代码

  • https://github.com/rangwei/cloud-blogs/tree/master/b09/arctic-ui5

参考阅读

  • https://openui5.org/
发布了291 篇原创文章 · 获赞 72 · 访问量 103万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: Age of Ai 设计师: meimeiellie

分享到微信朋友圈

×

扫一扫,手机浏览