html5 – 如何使用已有的spring MVC框架实现基于浏览器的Web应用程序

您需要遵循许多事项.为了便于理解,我们假设您网站的网址是whackedup.com.

为您的服务器端构建前端,但明智地选择！

您必须为服务器端代码构建响应/移动就绪前端.您可以使用使用REST API的Web服务公开Web应用程序的功能.这样你的代码就不会复制了.但是,您应该小心在移动应用程序中包含哪些内容.包括绝对必要的功能.无论如何,可以从Web应用程序访问其他功能.正如一位聪明人曾经说过的那样,“不难为某些东西添加新功能,其省略的决定是什么让它变得困难”.

移动框架可以考虑：

免责声明：这完全是我的偏好,不要因为不喜欢其他框架而阉割我.我称这些是框架,以便更容易解决它们.我知道他们不是框架.

在移动开发方面,您需要一个框架来使您更轻松.是的,你可以使用好的’HTML5但是这会对你的DEV时间产生影响,以构建在你的应用中使用的可视组件(如旋转木马,滑块等).因此通常建议使用框架和you’ll invariably end up using one of the following：

> Twitter’s BootStrap
> jQuery Mobile
> Sencha Touch

如果您想构建适应移动屏幕的桌面网站,Bootstrap将是您的第一选择.我个人使用jQuery Mobile,因为：

>它依赖于jQuery
> It’s got awesome docs. Really,they’re fantastic.
>它具有响应性,这意味着它可以在平板电脑和手机上使用.
> It supports a plethora of devices.

你可以找到jQM的好资源的地方：

> Stack overflow’s jquery-mobile tag(@L_618_21@)
> jQuery’s learning center& the demo center for jQM
> Here’s a sample app at noupe which you could try to get the hang of it.

这就是说,在其网站上学习jQuery Mobile总是更好,因为他们总是倾向于教授最新版本的jQm.

重定向到移动网站

在您选择的框架内完成应用程序构建后,您将不得不重定向使用whackedup.com的用户从他们的移动设备.这是通过使用useragent完成的. According to wikipedia,

这将告诉您用户登录网站的设备/浏览器.这可以通过JS中的navigator.userAgent方法访问. Here’s a demo.通常对于Androind设备,useragent将如下所示：

使用此信息,您可以根据以下内容了解该设备是否为Android设备/ iOS设备：

navigator.userAgent.indexOf("Android") != -1 //will return true if accessed on an android device

这样,您可以将此作为if循环的条件并执行重定向,可能是m.whackedup.com. For a complete list of userAgents,check this list.

使用缓存来提高性能

要提高性能,可以使用localStorage将数据存储在浏览器的缓存中,而不是进行服务器调用以再次获取该数据. This is a good resource to learn abt the localStorage API.

希望这有帮助！

编辑 – 您的问题的答案

 Q1：你建议jquerymobile是HTML5的替代品(真的很困惑,jquery用于验证,它只是javascipt)

HTML5不像HTML4那样是标记语言.它只是一个组件提供商.它提供了诸如Canvas(文字闪存替代)和许多类型的< input>之类的组件.标签和API就像localStorage.您会发现单独使用HTML5构建移动应用程序很困难.没有人说它不可能,但它很麻烦. jQuery Mobile不是HTML5的替代品,它建立在HTML5之上,以使其更好.

也就是说,你认为jQuery Mobile只给你JS的想法是错误的.虽然jQuery是一个JavaScript库,但它的年轻兄弟jQuery Mobile也是一个可视化库. jQuery Mobile提供了大量的CSS和JavaScript,因此样式变得更容易.

摘要：

> jQuery Mobile不是HTML5的替代品,jQM增强了HTML5提供的组件. Please visit this site to see for yourself.
> jQuery Mobile不仅仅是JavaScript,它还是一个可视化库,您可以根据自己的需要主题.

 Q2：我们的spring mvc是项目没有使用任何注释或没有REST API.所以你建议改变代码来支持REST API吗？

A它没有必要,但我真的给出了一个建议,让你的代码适应这两种情况,即Web应用程序和移动应用程序.否则,你将在你的环境中复制你的代码,这很糟糕.如果您的Web应用程序和移动应用程序文件将同时驻留(在同一项目中),您的移动应用程序和Web应用程序可以共享您的spring MVC代码库.

摘要

>我只是建议你可以使用REST API服务.>如果您的移动应用程序和Web应用程序将是相同的,那么重用Web应用程序的服务器端代码比重新创建移动应用程序更好.那样你就不要重复自己了.