Cloud Studio再体验——个性化门户主页

2018-05-30

项目介绍

项目功能介绍

该项目旨在实现“个性化门户主页”。其功能包括：用户注册、登录，动态化背景，用户查看主页资讯。其中，主页资讯包括今日详情（万年历、天气预报），头条新闻，趣图轶事，NBA赛事，星座运势。

项目所用到的开发技术

Node.js，MongoDB，WebIDE（Cloud Studio），Ajax，Servlet，J2EE，JQuery，JavaScript，CSS3，HTML5等。

项目功能需求分析

通过MongoDB数据库实现用户的注册登录功能。
利用Canvas动态生成验证码。
注册、登录过程中加以用户输入的有效性验证。
利用Node.js驱动web服务，并通过mongoose组件连接数据库。
通过Ajax实现C/S异步操作，调用聚合数据API以丰富主页内容。主页板块包括（万年历、天气预报、今日头条、趣图、NBA赛事、星座运势）。
通过J2EE下的Servlet，在本地做一个中转，将聚合数据中部分不支持直接传输jsonp格式的api接口转换成jsonp格式，并在客户端通过Ajax调用。
调用canvas_net，实现网页动态背景。
整个项目托管在Coding.net，利用其自带的git进行多人协作开发。
在Cloud Studio云计算平台上进行编程，将整个项目部署在云端。
其他需求。例如：保证用户界面的友好和美观，数据排版合理等。

项目开发细节

开发技术难点

MVC框架下Node.js脚本语言开发

利用Node.js连接数据库，并设置一个Schema与数据库关联，此Schema则作为项目的模型（Model）。
Node.js驱动路由，连接html文件。所有html文件作为项目的视图（View）。
用Node.js实现网页的动态编程（包括驱动服务器、数据库操作等）。作为项目的控制器（Controller）。

Node.js远程连接数据库

由于Cloud Studio所提供的云主机功能有限，只允许用户在其预先搭建好的环境下进行开发，不支持自己搭建数据库、Tomcat等环境。因此只能选择远程连接数据库。
在阿里云的ECS云服务器上建立了MongoDB数据库，并创建了相应的集合。

并为数据库添加管理员用户，保证远程连接的安全性。

最后，还需要在阿里云ECS管理控制台中，将MongoDB所用的27017端口打开。
上述工作完成后，便可通过调用Node.js下的mongoose组件，实现对数据库的远程访问。

Node.js实现注册登录功能

创建好数据库后，首先完成视图文件的编写。通过CSS搭配JavaScript，编写出注册登录的UI界面。注册、登录页面均包含一个表单，表单的action方法均指向node路由中的一个地址。在路由中，通过对数据库的访问，返回相应的参数值。

获取API中的数据

项目调用聚合数据的API获取相关数据。聚合API的数据均封装在web上的一个URL中。通过Ajax服务端/客户端异步的操作，从指定URL中，通过提交相应参数，获取返回值。API提供的返回值均为json类型的数据，由于json数据是以JavaScript语言编写的，因此大大降低了解析的难度。数据解析后，以html文档的格式将相应数据append到主页面中，从而达到异步获取数据的功能。

在Cloud Studio上云端开发项目

此项目完全托管在Cloud Studio云端开发IDE上，由于其服务器已经搭建好了相应环境，因此只需利用页面下的控制台输入指令，便可实现项目的部署。

项目更新日志

2018/5/13

调用canvas_net.js，实现页面的动态背景。

2018/5/11

添加趣图板块

添加NBA板块

添加星座板块

不支持jsonp跨域传值的api接口，调用本地servlet间接传值

2018/5/10

优化页面样式

插入天气、万年历接口

2018/5/8

服务器端创建MongoDB数据库，并添加管理者

简单实现注册登录的功能

接入聚合数据的API，利用AJAX实现主体功能

2018/5/7

新建项目

创建部分试图文件(view)

插入数据库管理文件(model)

定义路由，将Node.js作为控制器(control)

项目开发时遇到的问题

云开发平台不支持在云端搭建数据库

解决方法：跨平台远程访问数据库。
由于Cloud Studio所提供的云主机功能有限，只允许用户在其预先搭建好的环境下进行开发，不支持自己搭建数据库、Tomcat等环境。因此只能选择远程连接数据库。我在阿里云的ECS云服务器上建立了MongoDB数据库，并创建了相应的集合以及管理员账户，供项目可以远程访问。

部分API不支持传输jsonp类型的数据

解决方法：通过自己的服务器进行中转，将API中的json数据转成jsonp格式，再供项目调用。
Cloud Studio自动部署的web网址是在https协议下的，由于https协议安全级别较高，使用Ajax跨域访问其他web服务时，只能通过crossDomain的方法，并且返回值必须是jsonp。但部分API接口的返回值只支持json格式的数据，因此在初期调用的过程中遇到“明明能够获取到，但就是显示不出来”的问题。
对此，我通过在本地的Tomcat上搭建一个Servlet，实现API上的json数据转成jsonp的功能，再由Ajax调用本地服务器上对应的Servlet。

https协议下的web应用获取http数据出错

解决方法：浏览器设置允许加载不安全的脚本。
Cloud Studio所部署的网址建立在https协议下，在访问本地Servlet时，由于本地使用的是http协议，因此出现了数据无法传输的问题。
观察后发现在访问http数据时，浏览器上方会有一个小感叹号，点击后出现不安全脚本的提示。通过设置允许浏览器加载不安全的脚本后，则可以正常访问数据。
不过，此举只适用在电脑端，手机端由于浏览器功能权限开放得不多依旧访问不了。最佳的处理方法应该是将服务器端部署在http上，或者将Servlet部署到https上。