劉 然

(西安石油大學(xué) 電子工程學(xué)院，陜西 西安 710065)

基于jQuery Mobile的健身管理WebApp的設(shè)計與實現(xiàn)

劉 然

(西安石油大學(xué) 電子工程學(xué)院，陜西 西安 710065)

基于jQuery Mobile框架、結(jié)合個人健身用戶的需求，利用CSS、HTML5、PHP技術(shù)，開發(fā)一款應(yīng)用于手機端的在線健身管理系統(tǒng)。實現(xiàn)手機端的個人健身日程安排管理，個人體重變化記錄等多種功能。該系統(tǒng)實用性較強，功能全面，設(shè)置簡潔，無多余廣告的干擾，給健身人士帶來了許多便利。

jQuery Mobile；WebApp；PHP；HTML5；健身管理

隨著社會文化，國家經(jīng)濟(jì)實力的快速發(fā)展，人們對自身身體素質(zhì)的重視程度越來越高，引發(fā)了健身熱潮。為了更好地管理時間與身體狀況，各種健身App應(yīng)用而生。

現(xiàn)階段的健身App大多為應(yīng)用于IOS與Android操作系統(tǒng)的Native App，由于基于IOS 與Android的操作系統(tǒng)的Native App開發(fā)語言不同，導(dǎo)致移植性差[1]。同時現(xiàn)階段健身Native App存在插件過多，系統(tǒng)功能繁雜，廣告植入過多等問題[2]。

綜上，本文開發(fā)了一款基于jQuery Mobile框架的健身Web App，其具有開發(fā)難度小，移植性好，可應(yīng)用于各種不同的手機操作系統(tǒng)的優(yōu)點，并且系統(tǒng)設(shè)置簡潔，無多余廣告干擾，功能齊全，實用性強，可給健身用戶帶來更好的用戶體驗[3]。

1 系統(tǒng)功能

1.1 系統(tǒng)總體設(shè)計

本文開發(fā)一款跨平臺的健身WebApp。用戶可以通過瀏覽器登錄系統(tǒng)，在系統(tǒng)中查看自己所在健身房的課程安排，記錄體重變化。如用戶在室外時，還可以利用系統(tǒng)中的跑步計時功能，記錄運動時間。最后系統(tǒng)還包括日歷記事模塊，用戶可以在該日歷中記錄未辦日程，或健身計劃等事項，幫助用戶更好地管理時間。整體設(shè)計包括6個模塊，如圖1所示。

圖1 整體設(shè)計框圖

1.2 模塊功能簡介

6個模塊的功能分別是：

1) 登錄注冊界面

2) 菜單

3) 課程安排計劃表：記錄健身房課程安排，方便健身者隨時查看課表的更新狀態(tài)。

4) 體重變化折線圖：方便健身者記錄體重變化情況，監(jiān)視身體變化情況。

5) 跑步秒表計時：方便健身者記錄運動時長。

6) 日歷：方便健身者規(guī)劃健身安排，查看身體狀況在一段時間內(nèi)的變化情況。

1.3 系統(tǒng)特點介紹

1) 使用jQuery Mobile技術(shù)實現(xiàn)移動軟件的跨平臺和跨設(shè)備開發(fā)， jQuery Mobile是基于jQuery JavaScript庫和HTML5發(fā)展而成的移動應(yīng)用用戶界面系統(tǒng)[4]?；趈Query Mobile開發(fā)的移動應(yīng)用，體積輕量，用戶體驗與界面風(fēng)格統(tǒng)一，并兼容大量移動平臺。在前端頁面的呈現(xiàn)方面，jQuery Mobile實現(xiàn)了界面美化和對移動設(shè)備瀏覽器的兼容。在大多數(shù)開發(fā)場景下，jQuery Mobile應(yīng)用開發(fā)不需要過多關(guān)心jQuery JavaScript庫的實現(xiàn)方式，只需要在頁面中引用合適的jQuery版本既可。能夠在Android、IOS、Windows Phone等手機平臺上運行，減少開發(fā)的工作量。實現(xiàn)“一次開發(fā)，多次運行”[5]。

2) 后臺使用PHP技術(shù)，采用ThinkPHP框架，代碼簡潔，上手快，減少了開發(fā)工作量，縮短了開發(fā)周期。 ThinkPHP是一個快速、兼容而且簡單的輕量級國產(chǎn)免費開源PHP開發(fā)框架，作為一個整體開發(fā)解決方案，ThinkPHP能夠解決應(yīng)用開發(fā)中的大多數(shù)需要，因為其自身包含了底層架構(gòu)、兼容處理、基類庫、數(shù)據(jù)庫訪問層、模板引擎、緩存機制、插件機制、角色認(rèn)證、表單處理等常用的組件，并且對于跨版本、跨平臺和跨數(shù)據(jù)庫移植都比較方便。并且每個組件都是精心設(shè)計和完善的，應(yīng)用開發(fā)過程僅僅需要關(guān)注您的業(yè)務(wù)邏輯[6]。

3) 使用AJAX技術(shù)保存用戶的注冊登錄信息，存儲在云數(shù)據(jù)庫中。

WebApp與后臺交互流程如圖2。

圖2 WebAPP與后臺交互流程圖

3 系統(tǒng)的實現(xiàn)

3.1 Web App的安裝環(huán)境

1) 客戶端

手機操作系統(tǒng):Androis、IOS、Windows phone等。

手機瀏覽器：UCweb瀏覽器、Chrome瀏覽器、Opera瀏覽器、Firefox瀏覽器等。

本文以iphone5為操作平臺，使用UCweb瀏覽器。

2) 服務(wù)器端。

硬件配置：Pentinum Ⅱ400以上的中央處理器；256M以上的主存儲器空間；10G以上的硬盤空間；

操作系統(tǒng)：Windows/Linux

3) 服務(wù)器安裝配置

本系統(tǒng)基于Java平臺開發(fā)，使用SSH開發(fā)框架。后臺數(shù)據(jù)庫服務(wù)器采用MySQL5.7版本，應(yīng)用服務(wù)器采用Tomcat9.0版本。由于Java本身的跨平臺性，服務(wù)器端系統(tǒng)既可以部署在Windows操作系統(tǒng)上，也可以部署在Linux操作系統(tǒng)上。同時，本系統(tǒng)服務(wù)器端使用了新浪云平臺。文本以Windows操作系統(tǒng)環(huán)境下的部署為例。

3.2 Web App各模塊功能實現(xiàn)

3.2.1 登錄界面

登錄頁面作為首頁，若用戶為已注冊用戶，在用戶名與密碼輸入框輸入密碼，點擊右下角的直接登錄，此時系統(tǒng)通過Ajax技術(shù)將數(shù)據(jù)提交到服務(wù)器端進(jìn)行驗證，若驗證成功，服務(wù)器返回信息到客戶端，用戶便可進(jìn)入用戶界面。登錄頁面中還可以勾選記住密碼和自動登錄選框，勾選記住密碼后在一定的時間內(nèi)，用戶登錄時將不需要重新輸入用戶名與密碼；自動登錄指系統(tǒng)每次打開后，便會按照記憶的用戶名與密碼自動登錄到用戶界面。

若用戶為未注冊用戶，用戶可點擊左下角用戶注冊。進(jìn)而進(jìn)入注冊頁面，在注冊界面內(nèi)輸入想注冊的用戶名與密碼，點擊確認(rèn)后，系統(tǒng)通過Ajax技術(shù)將數(shù)據(jù)提交到服務(wù)器，服務(wù)器將數(shù)據(jù)插入數(shù)據(jù)庫。接著便可點擊下方返回登錄，返回到登錄界面，重新登錄。

登錄界面與注冊界面分別如圖3、圖4所示。

圖3 用戶登錄界面

圖4 用戶注冊界面

3.2.1 菜單頁面

菜單頁面包括本W(wǎng)eb App所包含的所有功能列表，右邊的數(shù)字表示相關(guān)功能的未讀信息數(shù)目。用戶可點擊任一列表項，跳轉(zhuǎn)到相關(guān)頁面。

菜單頁面如圖5所示。

圖5 菜單頁面

3.2.3 課程安排計劃表

課程安排計劃表：用于記錄健身房課程安排，用戶可在自定義課表中輸入課程。若用戶想要選某節(jié)課，便可雙擊該時段課程，課程在列表中背景變?yōu)樗{(lán)色。若用戶不再進(jìn)行某已選課程的訓(xùn)練，再次雙擊，該課程背景藍(lán)色取消。

3.2.4 體重變化折線圖

體重變化折線圖界面：用戶進(jìn)入界面后，首先可以在今日體重輸入框輸入今天的體重，頁面便會顯示最近一周的體重變化折線圖。便于用戶對體重的監(jiān)測。

3.2.5 跑步秒表計時

跑步秒表計時模塊：若用于用戶在室外跑步，可以進(jìn)入到系統(tǒng)，打開跑步計時模塊，記錄跑步時間與里程數(shù)。用戶進(jìn)到界面后，點擊界面的開始跑步按鈕，模塊開始記錄時間，與里程。此模塊需要打開GPS，打開GPS后，系統(tǒng)將定位用戶所在地點，當(dāng)用戶開始跑步后，將根據(jù)GPS返回的數(shù)據(jù)記錄用戶所跑的里程距離，并顯示所花費的時間。當(dāng)用戶結(jié)束運動，想要停止計時，點擊頁面結(jié)束跑步按鈕。計時與里程計數(shù)功能停止。此時模塊將會將記錄數(shù)據(jù)提交給服務(wù)器，服務(wù)器提交給數(shù)據(jù)庫，數(shù)據(jù)庫保存當(dāng)次跑步公里數(shù)與時間，以保證用戶日后可以訪問到之前所跑公里數(shù)。

3.2.6 日歷

日歷模塊，用于用戶備忘，用戶可在相關(guān)的日期中加入所要記錄的事宜，或者備忘事宜，并可設(shè)置提醒，在設(shè)置好的時段若系統(tǒng)處于運行階段，便會以鬧鈴的方式提醒用戶，大大方便了用戶的日程管理。

4 系統(tǒng)測試

開發(fā)完成后，分別在Android和ios手機操作系統(tǒng)的各大瀏覽器(UC web瀏覽器、chrome瀏覽器、Opera瀏覽器、Firefox瀏覽器)對本設(shè)計完成的WebApp進(jìn)行了測試，系統(tǒng)的適應(yīng)情況好，能自適應(yīng)的滿足不同屏幕的界面縮放。功能簡潔，無多余插件，實用性高，能較好的滿足健身用戶的需求。

5 結(jié)論

本文利用jQuery Mobile技術(shù)實現(xiàn)了一個移動端的健身日程管理Web App，主要介紹了其基本功能以及前端的技術(shù)實現(xiàn)。本系統(tǒng)作為一個針對健身者健身管理的工具軟件，其實用性較強，設(shè)置簡潔，用戶無需下載，在瀏覽器端訪問即可，大大方便健身者的健身及日程安排。

同時本系統(tǒng)開發(fā)功能不夠全面，在后期開發(fā)中，可加入用戶體脂記錄，用戶心率檢測等功能。

[1] 宋利，張偉兵，王海榮.基于移動互聯(lián)網(wǎng)的個人學(xué)習(xí)助理開發(fā)研究[J].軟件工程，2016,19(6)：34-37.

[2] 柳瑞雪，石長地，孫眾.學(xué)習(xí)管理系統(tǒng)和社交平臺學(xué)習(xí)知識建構(gòu)層次分析[J].中國遠(yuǎn)程教育，2016(7)：10-19.

[3] 黎佳.基于JQuery的”小管家”系統(tǒng)[J].科學(xué)導(dǎo)刊，2016(2):145-146.

[4] 張欣毅.JQuery mobile移動網(wǎng)站開發(fā)[M].北京:清華大學(xué)出版社，2015:186-330.

[5] 李方方.基于jQuery Mobile的EMM記事本的設(shè)計與開發(fā)[J].計算機光盤軟件及應(yīng)用，2014(11)：276.

[6] 王彩云.基于Android的多功能備忘錄的設(shè)計與實現(xiàn)[D].福州：福州大學(xué)，2014.

Design and Implementation of Fitness Management System Based on jQuery Mobile

Liu Ran

(ElectronicEngineeringCollege,Xi’anShiyouUniversity，Xi’anShaanxi710065,China)

The paper introduces the development of an online fitness management system used in mobile phone based on jQuery Mobile framework and with the use of CSS, HTML5 and PHP technology so as to meet the needs of individual fitness users. It can achieve the functions of personal fitness schedule management, personal changes in weight and others in mobile phone side. The system has the advantages of practical, functional, simple, no extra advertising interference, and can bring a lot of convenience to the fitness.

jQuery mobile; WebApp；PHP；HTML5；fitness management system

2017-06-01

劉 然(1991- )，女，山西太原人，碩士研究生，主要研究方向為電路與系統(tǒng)。

1674- 4578(2017)04- 0063- 03

TP311.5

A