基于HTML5的校园食谱推荐系统的设计与实现

2016-07-10林满山梁欣

电子技术与软件工程 2016年8期

林满山梁欣

摘要：如今人们越来越重视饮食健康，而由于学生的学习繁忙又无暇过多研究考虑饮食搭配问题或咨询专业的营养师，因此对于快捷、方便、准确、有效的食谱推荐系统的需求越来越强烈。为了解决以上问题，本文提出了一种基于HTML5的校园食谱推荐系统的设计方案，并完成了该系统的软件设计与实现。本系统利用HTML5、Java、mySQL数据库等技术，结合营养学相关理论，实现了一个食谱推荐系统。实验结果表明，该系统具有操作简单，功能完备，具有一定的实用价值。

【关键词】HTML5 食谱推荐系统

1 研究背景及意义

随着现在社会生活的加快，饮食不合理、休息不足，心理压力过大等不良情绪时刻危险着人们的健康。作为学生，正处于学习的关键时期，营养搭配对其自身健康有着重要意义。但由于学习任务繁忙，无暇研究饮食搭配，因此，校园食谱推荐系统的开发至关重要。

HTML5的优点主要在于：

（1）多设备跨平台，比如一款HTML5游戏，可以很容易地移植到各种平台上，极大地减低了开发成本；

（2）自适应网页设计，网页经过一次设计后，网页自适应不同大小的屏幕，根据屏幕的大小，并进行相应的调整；

（3）即时更新，游戏客户端每次都要更新，更新过程相当繁琐，可是HTML5开发的游戏好像更新页面一样，是即时更新的。

因此，开发基于HTML5 的校园食谱推荐系统对于处在校园环境中的学生来说是非常有必要的。

2 主要开发技术

校园食谱推荐系统是利用现有的开源软件完成动态网站的开发。系统开发系统平台为Windows7，前台使用HTML5、JavaScript、JQuery、Ajax等技术，后台使用Jsp、Servlet等Java技术，服务器使用免费开源的Web应用服务器Apache Tomcat7作为系统的应用服务器，数据库使用关系型数据库MySql为数据的存储系统。

2.1 HTML5技术

HTML5 是用于取代1999 年所制定的HTML4.01 和XHTML 1.0 标准的HTML 标准版本，目前大部分浏览器都已经支持HTML5 技术。HTML5 有两大特点：

（1）强化了Web 网页的表现性能；

（2）追加了对本地数据库操作等Web 应用的功能。

2.2 Java

Java是一种计算机编程语言，拥有跨平台、面向对象、泛型编程的特性，广泛应用于企业级Web应用开发和移动应用开发，它集成了其它一些语言的特点和优势，又避开了它们的不足之处，具有简单性、平台独立性、面向对象、多线程、动态性、安全性等特点。

2.3 MySQL数据库技术

MySQL 是一个小型关系型数据库管理系统，由于MySQL 数据库体积小、速度快、成本低等特点，开放源码更是使其成为众多编程高手的喜爱，许多中小型网站为了降低网站总体拥有成本而选择了MySQL 作为网站数据库，一方面为了降低成本，另一方面则是其源码的开放性，更有利于开发符合网站自身特别的数据库，因此它在WEB应用方面应用非常广泛。

2.4 Apache Tomcat

Apache是普通服务器，本身只支持静态普通网页。Tomcat是Apache软件基金下属Jakarta项目开发的一个Servlet容器，根据Sun Microsystems提供的技术规范，实现了对Servlet和JSP的支持，还有作为Web服务器的一些功能，比如Tomcat管理和控制平台、安全域管理和Tomcat域等。

3 总体设计

基于HTML5的校园食谱推荐系统采用了app engine framework框架，采用MVC模式、分层架构和mysql数据库，采用html5实现了用户在手机web端对食谱的访问，通过前台访问后台Jsp+servlet处理，结合json传值在前台动态显示菜单。完全按照“用户需求是最重要的”的理念进行设计。

本系统从用户的角度，他们对于食谱的需求是多样的，例如哪些美食属于当前季节的时蔬，哪些美食是有特殊功效的，哪些美食包含了自己想吃的食材，周围的同学们都流行吃哪些美食，哪些美食是最新的等等。为了更好的满足用户的食谱需求，我们根据各种食谱需求，在本系统中设计了如下功能：

3.1 推荐功能

包括推荐最新收录的美食，推荐用户点击率最高的美食，推荐用户最喜欢咨询的美食，推荐综合美食排行。

3.2 查询功能

包括查询满足用户给定的条件（季节、食材、功效）的美食，查询用户给定的模糊美食名称对应的美食，并对返回的美食列表进行了分类以便更直观的呈现给用户。

3.3 用户相关功能

包括用户注册、用户登录、用户查询记录等功能。

总体设计的详细模块如图1所示。

4 数据库设计

基于HTML5的校园食谱推荐系统所需的所有信息都保存在数据库中。数据库结构设计的好坏将直接对应用系统的效率以及实现的效果产生影响，数据库的设计过程应本着具有良好结构化的数据，数据独立性高和数据存储粒度小为目标，本数据库的采用雪花模型结构，将属性信息分开存储，将原来的一个表分成美食表、季节表、功能表和原料表，虽然表格的数量比较多，但每个表储存的内容相对较少，而且各个属性之间的关系反而更加明晰，资料的完整性、灵活性和一致性比较高，具有快速的响应速度。

5 系统主要实现的功能介绍

基于HTML5的校园食谱推荐系统主要服务于广大校园师生，采用HTML5技术开发APP，使得APP可以兼容各种主流的手机系统，同时搜集食谱、食材、养生茶等基础数据信息，针对用户的操作习惯，通过记录用户点击美食、查询美食等方式分析用户对哪一类食谱感兴趣，并给用户推荐其感兴趣的食谱。

5.1 主界面

如图2所示，主界面为推荐界面，包括美食查询、最新食谱推荐、最热食谱推荐、最爱食谱推荐等。

5.2 榜单界面

如图3所示，通过记录用户的美食查询，感兴趣美食点击数，分析给出榜单排名前10的美食。

6 结束语

本校园食谱推荐系统是建立在信息技术基础上，与人体健康营养理论相结合，为校园师生提供了方便快捷、实用性强、针对性强的食谱推荐系统。同时，通过开发这个系统，对各个技术的应用也有了更进一步的了解。

本系统功能完备齐全，并且是按模块来划分构建的，方便了程序进行更新，维护性好，界面简洁易操作，在运用了HTML5 技术后，使我们的食谱推荐系统能跨平台使用，更加地适应现代浏览器的需求，使系统运行效率更高。当然，该系统仍然存在一些不足，在以后的学习工作中会进一步对其进行改善优化，以达到最佳效果。

参考文献

[1]陆凌牛.HTML5开发精要与实例详解[M].北京：机械工业出版社，2012.

[2]郑金明佟施.基于HTML5的校园网高校管理系统的设计与实现[J].广西教育学院学报，2013（02）：157-161.