張澤川,于迎霞,邱志豪,馬千里
(新疆大學(xué) 信息科學(xué)與工程學(xué)院,新疆 烏魯木齊 830046)
近年來,隨著大學(xué)生的物質(zhì)需求與消費水平不斷提高,大量的物品在被使用過幾次后便被閑置。每年畢業(yè)季更是有大量的浪費現(xiàn)象發(fā)生。同時,輕應(yīng)用已經(jīng)成為一個發(fā)展趨勢。目前,本校沒有此類共享服務(wù)平臺,故構(gòu)建校園“微代”服務(wù)平臺的需求大、可行性高。該服務(wù)平臺集成了閑置物品共享、學(xué)習(xí)資料分享及公益活動等功能,為學(xué)生提供及時快捷的信息共享服務(wù)。相比于安卓App,基于小程序的超輕型應(yīng)用具有無須下載即可以直接在微信上使用的特點[1],小程序的使用與手機操作系統(tǒng)無關(guān),并且不受安卓開發(fā)環(huán)境影響,操作方便快捷,因此小程序有著廣大的用戶基礎(chǔ)。
共享、經(jīng)濟、環(huán)保、綠色的理念推動了學(xué)校智慧校園的建設(shè)。本文立足學(xué)校的實際情況以及公共需求,基于微信小程序進行開發(fā)。本平臺使用O2O商業(yè)模式(Online to Offline)。在使用閑置物品交易功能時,本平臺以二手閑置物品的線上發(fā)布和查詢等為核心,在線下進行交易,交易雙方當(dāng)面驗貨并選擇購買與否,既避免了糾紛,同時也避開了線上復(fù)雜的支付系統(tǒng)設(shè)計[2],用戶可自由選擇多種支付手段,方便靈活。
本平臺基于微信平臺的底層支撐向校內(nèi)師生提供便捷的服務(wù),可跨平臺在手機、平板等移動設(shè)備上運行,無須安裝或卸載,隨時隨地可用,依托微信小程序開發(fā)平臺,可以方便地對該本項目的需求功能進行補充與完善。
該服務(wù)平臺前端通過小程序相配套的WXSS和WXML技術(shù)進行內(nèi)容顯示,通過JavaScript代碼實現(xiàn)對用戶的操作完成響應(yīng)。該平臺的服務(wù)器開發(fā)基于SpringMVC+Spring+MyBatis(SSM)框架,因其具有良好的性能和較快的開發(fā)效率并逐漸成為Web應(yīng)用中的主流框架,服務(wù)器具體功能實現(xiàn)使用JSP技術(shù)完成,因其具有良好的系統(tǒng)兼容性。本平臺的各個功能模塊相對獨立,便于小組分工設(shè)計。
校園“微代”平臺根據(jù)前期的調(diào)研結(jié)果,主要設(shè)置有四大核心模塊,主要包含失物招領(lǐng)、閑置商城、個人中心、資源共享,其中共享資源包含志愿服務(wù)、學(xué)習(xí)資料等,具體平臺功能如圖1所示。
圖1 平臺系統(tǒng)前端架構(gòu)
2.2.1 用戶注冊與登錄
用戶在每次啟動服務(wù)平臺小程序時,由全局App() 方法從微信官方平臺獲取用戶唯一的openid與session_key,本平臺將openid作為用戶是否進行過注冊的標(biāo)識,若不存在該用戶則跳轉(zhuǎn)到注冊模塊,用戶完成注冊后跳轉(zhuǎn)到瀏覽信息模塊,同時平臺更新用戶注冊信息到數(shù)據(jù)庫完成注冊流程。若已存在,則跳轉(zhuǎn)進行登錄流程。
2.2.2 瀏覽信息
校園“微代”服務(wù)平臺的信息瀏覽首頁如圖2所示。頂部可以修改用戶所在的校區(qū)位置,并實時同步修改到后臺數(shù)據(jù)庫中。搜索框可以按照物品名稱進行信息搜索。下方的輪播圖對收藏?zé)岫容^高的物品或共享信息進行展示,輪播圖下方分兩列對隨機物品信息進行展示,獲取隨機物品信息接口通過高效SQL語句實現(xiàn)?;瑒又恋撞孔詣蛹虞d新的物品信息。底部快捷導(dǎo)航欄包含首頁、物品發(fā)布和個人中心3部分,可進行快速跳轉(zhuǎn)。
圖2 平臺首頁界面
用戶可通過點擊物品或信息的縮略圖進入詳細信息展示模塊,如圖3所示。該模塊包含發(fā)布物品的關(guān)鍵信息,可供瀏覽者查看。下方欄包含發(fā)布人的信息鏈接以及加入收藏夾的功能,以便瀏覽者進行物品信息匯總。
圖3 物品信息詳情
2.2.3 物品及信息發(fā)布
物品及信息發(fā)布功能分為閑置物品發(fā)布和信息發(fā)布,信息包含失物招領(lǐng)、共享學(xué)習(xí)資源等,界面設(shè)計分別如圖4所示。發(fā)布者可以在該功能模塊中進行文本編輯以及多張圖片上傳操作,以達到更好的展示效果。
圖4 上傳界面
在將多張圖片上傳時,通常遍歷調(diào)用服務(wù)器圖片上傳接口即可實現(xiàn)多圖上傳功能,但可能會因為請求網(wǎng)絡(luò)連接導(dǎo)致結(jié)果不可靠。本平臺通過用戶端獲取服務(wù)器返回標(biāo)志進行計數(shù)來解決這一問題,從而確保不同網(wǎng)絡(luò)狀況下的數(shù)據(jù)上傳功能。
2.2.4 個人中心
用戶個人中心模塊共設(shè)計了4個子界面,如圖5(a)(b)所示,用戶可點擊最上方頭像欄,進入修改相關(guān)個人信息模塊。如圖5(c)(d)所示,用戶在發(fā)布欄可以查看發(fā)布的物品及信息,并且可以選擇對其修改或者進行下架。在收藏欄,用戶可以查看當(dāng)前收藏的物品及信息。在最下方欄,用戶可以向平臺管理員提交信息反饋以便優(yōu)化平臺。
圖5 個人中心及子界面
該服務(wù)平臺使用MySQL數(shù)據(jù)庫進行存儲,以Eclipse作為開發(fā)環(huán)境來搭建服務(wù)器,并采用SSM框架來相互通信,處理業(yè)務(wù)邏輯,持久保存數(shù)據(jù)。
本平臺的服務(wù)器運行在JavaSE上。Server 類的main()方法,在特定端口進行監(jiān)聽并處理Socket 客戶端的連接請求。當(dāng)有客戶端連接時,平臺獲取系統(tǒng)的日期并將其發(fā)送到客戶端[3]。本平臺服務(wù)器的工作流程如下:首先由小程序發(fā)出請求,服務(wù)器端接收到請求后,在服務(wù)器端進行數(shù)據(jù)保存并處理相關(guān)的數(shù)據(jù),返回小程序所需的業(yè)務(wù)數(shù)據(jù)。
本平臺服務(wù)器基于SpringMVC+Spring+MyBatis架構(gòu),該框架是Web服務(wù)器端選擇的核心技術(shù)[4]。Servlet對象的基于請求與問答的工作模式,由Servlet對象創(chuàng)建的接口用于客戶端和服務(wù)器之間的數(shù)據(jù)交互。Spring環(huán)節(jié)中管理實務(wù)的對象方法采用DAO模式,DAO層邏輯用于實現(xiàn)請求及更新數(shù)據(jù)庫的操作,由SQL語句實現(xiàn),存取效率高。Service層調(diào)用DAO層,實現(xiàn)業(yè)務(wù)邏輯及數(shù)據(jù)存儲;用戶端業(yè)務(wù)訪問的是Controller層接口,將創(chuàng)建相應(yīng)的數(shù)據(jù)接收和發(fā)送端口,這些接口被用于Web上終端設(shè)備和服務(wù)器之間的交互。
數(shù)據(jù)交互方法:Web應(yīng)用一般采用POST和GET請求方式通過解析服務(wù)端返回的JSON數(shù)據(jù)流,實現(xiàn)數(shù)據(jù)通信。小程序也有類似的封裝接口wx.request() 進行數(shù)據(jù)請求,可以通過設(shè)置method以選擇數(shù)據(jù)請求的方法。小程序需要設(shè)置JSON格式進行讀取后才能進行處理。其中:
GET方式傳入后端參數(shù)需要以參數(shù)形式傳入,生成的訪問鏈接中包含參數(shù)內(nèi)容,適用于小規(guī)模數(shù)據(jù)傳輸。
GET方式請求代碼:
POST方式傳入后端的數(shù)據(jù)格式設(shè)置為JSON,該格式適用于較大規(guī)模的數(shù)據(jù)傳輸,便于進行數(shù)據(jù)加密傳遞。兩種方式都可以向服務(wù)器傳入數(shù)據(jù)并且接收從服務(wù)器端返回的數(shù)據(jù)。
本校園“微代”平臺系統(tǒng)采用MySQL數(shù)據(jù)庫來存儲必要信息。為了提高SQL存取語句的運行效率,該設(shè)計將不同類型的數(shù)據(jù)保存在不同的表中,同時使用優(yōu)化的SQL書寫語法,內(nèi)存消耗低,提高系統(tǒng)的存取速度[5-7]。本平臺數(shù)據(jù)庫主要對于物品信息及用戶信息進行設(shè)計并存儲。商品信息設(shè)計如表1所示。
表1 商品信息設(shè)計
本文設(shè)計并開發(fā)了一個基于微信小程序的“微代”服務(wù)平臺,包含用戶前端的界面設(shè)計和業(yè)務(wù)處理代碼,平臺的后端基于SSM框架,用JSON格式作為數(shù)據(jù)傳輸格式,增強了平臺的安全性與穩(wěn)定性,在后期的使用中具有良好的適應(yīng)性。該平臺采用O2O商業(yè)模式,用戶在線上運用瀏覽、查詢功能,在線下完成驗貨交易,避免了設(shè)計復(fù)雜的支付系統(tǒng)及支付安全的問題[8-9]。小程序的功能可拓展性為平臺后期的完善與維護提供了極大的便利。本文對基于微信小程序的信息代理平臺的開發(fā)提供了一定的參考,后期需要針對核心模塊進行優(yōu)化。