基于HTML5的校園食譜推薦系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

林滿山 梁欣

摘 要：如今人們?cè)絹碓街匾曪嬍辰】担捎趯W(xué)生的學(xué)習(xí)繁忙又無暇過多研究考慮飲食搭配問題或咨詢專業(yè)的營養(yǎng)師，因此對(duì)于快捷、方便、準(zhǔn)確、有效的食譜推薦系統(tǒng)的需求越來越強(qiáng)烈。為了解決以上問題，本文提出了一種基于HTML5的校園食譜推薦系統(tǒng)的設(shè)計(jì)方案，并完成了該系統(tǒng)的軟件設(shè)計(jì)與實(shí)現(xiàn)。本系統(tǒng)利用HTML5、Java、mySQL數(shù)據(jù)庫等技術(shù)，結(jié)合營養(yǎng)學(xué)相關(guān)理論，實(shí)現(xiàn)了一個(gè)食譜推薦系統(tǒng)。實(shí)驗(yàn)結(jié)果表明，該系統(tǒng)具有操作簡單，功能完備，具有一定的實(shí)用價(jià)值。

【關(guān)鍵詞】HTML5 食譜推薦系統(tǒng)

1 研究背景及意義

隨著現(xiàn)在社會(huì)生活的加快，飲食不合理、休息不足，心理壓力過大等不良情緒時(shí)刻危險(xiǎn)著人們的健康。作為學(xué)生，正處于學(xué)習(xí)的關(guān)鍵時(shí)期，營養(yǎng)搭配對(duì)其自身健康有著重要意義。但由于學(xué)習(xí)任務(wù)繁忙，無暇研究飲食搭配，因此，校園食譜推薦系統(tǒng)的開發(fā)至關(guān)重要。

HTML5的優(yōu)點(diǎn)主要在于：

（1）多設(shè)備跨平臺(tái)，比如一款HTML5游戲，可以很容易地移植到各種平臺(tái)上，極大地減低了開發(fā)成本；

（2）自適應(yīng)網(wǎng)頁設(shè)計(jì)，網(wǎng)頁經(jīng)過一次設(shè)計(jì)后，網(wǎng)頁自適應(yīng)不同大小的屏幕，根據(jù)屏幕的大小，并進(jìn)行相應(yīng)的調(diào)整；

（3）即時(shí)更新，游戲客戶端每次都要更新，更新過程相當(dāng)繁瑣，可是HTML5開發(fā)的游戲好像更新頁面一樣，是即時(shí)更新的。

因此，開發(fā)基于HTML5 的校園食譜推薦系統(tǒng)對(duì)于處在校園環(huán)境中的學(xué)生來說是非常有必要的。

2 主要開發(fā)技術(shù)

校園食譜推薦系統(tǒng)是利用現(xiàn)有的開源軟件完成動(dòng)態(tài)網(wǎng)站的開發(fā)。系統(tǒng)開發(fā)系統(tǒng)平臺(tái)為Windows7，前臺(tái)使用HTML5、JavaScript、JQuery、Ajax等技術(shù)，后臺(tái)使用Jsp、Servlet等Java技術(shù)，服務(wù)器使用免費(fèi)開源的Web應(yīng)用服務(wù)器Apache Tomcat7作為系統(tǒng)的應(yīng)用服務(wù)器，數(shù)據(jù)庫使用關(guān)系型數(shù)據(jù)庫MySql為數(shù)據(jù)的存儲(chǔ)系統(tǒng)。

2.1 HTML5技術(shù)

HTML5 是用于取代1999 年所制定的HTML4.01 和XHTML 1.0 標(biāo)準(zhǔn)的HTML 標(biāo)準(zhǔn)版本，目前大部分瀏覽器都已經(jīng)支持HTML5 技術(shù)。HTML5 有兩大特點(diǎn)：

（1）強(qiáng)化了Web 網(wǎng)頁的表現(xiàn)性能；

（2）追加了對(duì)本地?cái)?shù)據(jù)庫操作等Web 應(yīng)用的功能。

2.2 Java

Java是一種計(jì)算機(jī)編程語言，擁有跨平臺(tái)、面向?qū)ο?、泛型編程的特性，廣泛應(yīng)用于企業(yè)級(jí)Web應(yīng)用開發(fā)和移動(dòng)應(yīng)用開發(fā)，它集成了其它一些語言的特點(diǎn)和優(yōu)勢(shì)，又避開了它們的不足之處，具有簡單性、平臺(tái)獨(dú)立性、面向?qū)ο?、多線程、動(dòng)態(tài)性、安全性等特點(diǎn)。

2.3 MySQL數(shù)據(jù)庫技術(shù)

MySQL 是一個(gè)小型關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，由于MySQL 數(shù)據(jù)庫體積小、速度快、成本低等特點(diǎn)，開放源碼更是使其成為眾多編程高手的喜愛，許多中小型網(wǎng)站為了降低網(wǎng)站總體擁有成本而選擇了MySQL 作為網(wǎng)站數(shù)據(jù)庫，一方面為了降低成本，另一方面則是其源碼的開放性，更有利于開發(fā)符合網(wǎng)站自身特別的數(shù)據(jù)庫，因此它在WEB應(yīng)用方面應(yīng)用非常廣泛。

2.4 Apache Tomcat

Apache是普通服務(wù)器，本身只支持靜態(tài)普通網(wǎng)頁。Tomcat是Apache軟件基金下屬Jakarta項(xiàng)目開發(fā)的一個(gè)Servlet容器，根據(jù)Sun Microsystems提供的技術(shù)規(guī)范，實(shí)現(xiàn)了對(duì)Servlet和JSP的支持，還有作為Web服務(wù)器的一些功能，比如Tomcat管理和控制平臺(tái)、安全域管理和Tomcat域等。

3 總體設(shè)計(jì)

基于HTML5的校園食譜推薦系統(tǒng)采用了app engine framework框架，采用MVC模式、分層架構(gòu)和mysql數(shù)據(jù)庫，采用html5實(shí)現(xiàn)了用戶在手機(jī)web端對(duì)食譜的訪問，通過前臺(tái)訪問后臺(tái)Jsp+servlet處理，結(jié)合json傳值在前臺(tái)動(dòng)態(tài)顯示菜單。完全按照“用戶需求是最重要的”的理念進(jìn)行設(shè)計(jì)。

本系統(tǒng)從用戶的角度，他們對(duì)于食譜的需求是多樣的，例如哪些美食屬于當(dāng)前季節(jié)的時(shí)蔬，哪些美食是有特殊功效的，哪些美食包含了自己想吃的食材，周圍的同學(xué)們都流行吃哪些美食，哪些美食是最新的等等。為了更好的滿足用戶的食譜需求，我們根據(jù)各種食譜需求，在本系統(tǒng)中設(shè)計(jì)了如下功能：

3.1 推薦功能

包括推薦最新收錄的美食，推薦用戶點(diǎn)擊率最高的美食，推薦用戶最喜歡咨詢的美食，推薦綜合美食排行。

3.2 查詢功能

包括查詢滿足用戶給定的條件（季節(jié)、食材、功效）的美食，查詢用戶給定的模糊美食名稱對(duì)應(yīng)的美食，并對(duì)返回的美食列表進(jìn)行了分類以便更直觀的呈現(xiàn)給用戶。

3.3 用戶相關(guān)功能

包括用戶注冊(cè)、用戶登錄、用戶查詢記錄等功能。

總體設(shè)計(jì)的詳細(xì)模塊如圖1所示。

4 數(shù)據(jù)庫設(shè)計(jì)

基于HTML5的校園食譜推薦系統(tǒng)所需的所有信息都保存在數(shù)據(jù)庫中。數(shù)據(jù)庫結(jié)構(gòu)設(shè)計(jì)的好壞將直接對(duì)應(yīng)用系統(tǒng)的效率以及實(shí)現(xiàn)的效果產(chǎn)生影響，數(shù)據(jù)庫的設(shè)計(jì)過程應(yīng)本著具有良好結(jié)構(gòu)化的數(shù)據(jù)，數(shù)據(jù)獨(dú)立性高和數(shù)據(jù)存儲(chǔ)粒度小為目標(biāo)，本數(shù)據(jù)庫的采用雪花模型結(jié)構(gòu)，將屬性信息分開存儲(chǔ)，將原來的一個(gè)表分成美食表、季節(jié)表、功能表和原料表，雖然表格的數(shù)量比較多，但每個(gè)表儲(chǔ)存的內(nèi)容相對(duì)較少，而且各個(gè)屬性之間的關(guān)系反而更加明晰，資料的完整性、靈活性和一致性比較高，具有快速的響應(yīng)速度。

5 系統(tǒng)主要實(shí)現(xiàn)的功能介紹

基于HTML5的校園食譜推薦系統(tǒng)主要服務(wù)于廣大校園師生，采用HTML5技術(shù)開發(fā)APP，使得APP可以兼容各種主流的手機(jī)系統(tǒng)，同時(shí)搜集食譜、食材、養(yǎng)生茶等基礎(chǔ)數(shù)據(jù)信息，針對(duì)用戶的操作習(xí)慣，通過記錄用戶點(diǎn)擊美食、查詢美食等方式分析用戶對(duì)哪一類食譜感興趣，并給用戶推薦其感興趣的食譜。

5.1 主界面

如圖2所示，主界面為推薦界面，包括美食查詢、最新食譜推薦、最熱食譜推薦、最愛食譜推薦等。

5.2 榜單界面

如圖3所示，通過記錄用戶的美食查詢，感興趣美食點(diǎn)擊數(shù)，分析給出榜單排名前10的美食。

6 結(jié)束語

本校園食譜推薦系統(tǒng)是建立在信息技術(shù)基礎(chǔ)上，與人體健康營養(yǎng)理論相結(jié)合，為校園師生提供了方便快捷、實(shí)用性強(qiáng)、針對(duì)性強(qiáng)的食譜推薦系統(tǒng)。同時(shí)，通過開發(fā)這個(gè)系統(tǒng)，對(duì)各個(gè)技術(shù)的應(yīng)用也有了更進(jìn)一步的了解。

本系統(tǒng)功能完備齊全，并且是按模塊來劃分構(gòu)建的，方便了程序進(jìn)行更新，維護(hù)性好，界面簡潔易操作，在運(yùn)用了HTML5 技術(shù)后，使我們的食譜推薦系統(tǒng)能跨平臺(tái)使用，更加地適應(yīng)現(xiàn)代瀏覽器的需求，使系統(tǒng)運(yùn)行效率更高。當(dāng)然，該系統(tǒng)仍然存在一些不足，在以后的學(xué)習(xí)工作中會(huì)進(jìn)一步對(duì)其進(jìn)行改善優(yōu)化，以達(dá)到最佳效果。

參考文獻(xiàn)

[1]陸凌牛.HTML5開發(fā)精要與實(shí)例詳解[M].北京：機(jī)械工業(yè)出版社，2012.

[2]鄭金明佟施.基于HTML5的校園網(wǎng)高校管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].廣西教育學(xué)院學(xué)報(bào)，2013（02）：157-161.

[3]王霖.移動(dòng)停車車位管理系統(tǒng)的分析與設(shè)計(jì)[D].昆明：云南大學(xué)，2013.

[4]盧火.股票數(shù)據(jù)庫管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].成都：電子科技大學(xué)，2011.

[5]莫雪勤.網(wǎng)上信訪管理系統(tǒng)的分析與設(shè)計(jì)[D].昆明：云南大學(xué)，2014.

作者單位

北方工業(yè)大學(xué) 北京市 100041