基于HTML5的校園食譜推薦系統的設計與實現

林滿山 梁欣

摘 要：如今人們越來越重視飲食健康，而由于學生的學習繁忙又無暇過多研究考慮飲食搭配問題或咨詢專業的營養師，因此對于快捷、方便、準確、有效的食譜推薦系統的需求越來越強烈。為了解決以上問題，本文提出了一種基于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.

[3]王霖.移動停車車位管理系統的分析與設計[D].昆明：云南大學，2013.

[4]盧火.股票數據庫管理系統的設計與實現[D].成都：電子科技大學，2011.

[5]莫雪勤.網上信訪管理系統的分析與設計[D].昆明：云南大學，2014.

作者單位

北方工業大學 北京市 100041