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

通过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/