基于微信小程序的冰雪運動社區(qū)系統(tǒng)的設(shè)計與實現(xiàn)

甄同妙，陳依鳴，崔少飛，閆煒鑫，段洪英，宋晨赫，張永琦，侯樹杰，李 琛*

（1.河北建筑工程學(xué)院，河北 張家口；2.張家口市人防（民防）指揮信息保障中心，河北 張家口）

引言

2021 年1 月20 日，總書記作出“要積極謀劃冬奧場館賽后利用，將舉辦重大賽事同服務(wù)全民健身結(jié)合起來，加快建設(shè)京張體育文化旅游帶”的重要指示。2022年2 月，文化和旅游部、國家發(fā)展改革委、國家體育總局聯(lián)合印發(fā)了《京張體育文化旅游帶建設(shè)規(guī)劃》[1]，同年4月和5 月，河北省委、省政府分別印發(fā)了《關(guān)于加快推進后奧運經(jīng)濟發(fā)展的意見》《京張體育文化旅游帶（張家口）建設(shè)規(guī)劃》[2]，從國家、省市層面明晰了京張體育文化旅游帶的建設(shè)目標(biāo)、發(fā)展定位、空間布局和建設(shè)重點。

1 研究現(xiàn)狀及意義

京張體育文化旅游帶建設(shè)作為后冬奧時代的重要舉措，有利于實現(xiàn)“帶動3 億人參與冰雪運動”的目標(biāo)，擴大“京張”兩座城市對外影響力、塑造形象，助推“京張”文體旅游帶產(chǎn)業(yè)結(jié)構(gòu)調(diào)整。這一課題引起了廣泛關(guān)注與熱烈討論[3-6]，社會各界展開了科技助力京張體育文化旅游帶發(fā)展的探索之路。本文以移動互聯(lián)網(wǎng)和京張體育文化旅游帶建設(shè)的融合技術(shù)研究為切入點、結(jié)合“互聯(lián)網(wǎng)+”思維，設(shè)計并實現(xiàn)了一個以當(dāng)前熱門的短視頻為載體的分享與交流平臺，旨在為“科技賦值京張體育文化旅游帶建設(shè)”添磚加瓦，深入推進京津冀協(xié)同發(fā)展、助推張家口市經(jīng)濟轉(zhuǎn)型發(fā)展。

2 冰雪運動社區(qū)系統(tǒng)的總體設(shè)計

冰雪運動社區(qū)系統(tǒng)分小程序端和管理端，整體設(shè)計如圖1 所示。使用人群為小程序用戶和后臺管理員兩類：小程序用戶無需下載安裝、使用手機便可隨時隨地訪問小程序端；管理端采用B/S 結(jié)構(gòu)，管理員只需用瀏覽器登錄系統(tǒng)便可進行訪問。

圖1 冰雪運動社區(qū)功能結(jié)構(gòu)

3 冰雪運動社區(qū)系統(tǒng)的詳細(xì)設(shè)計

3.1 功能模塊設(shè)計

小程序端主要進行首頁、視頻詳情頁和個人中心等頁面設(shè)計。首頁主要顯示視頻列表，點擊列表中的任一視頻可進入視頻詳情頁瀏覽視頻。視頻詳情頁設(shè)計主要區(qū)域播放視頻，視頻若有評論及回復(fù)，則在視頻播放區(qū)域的下方顯示。個人中心頁面設(shè)計時主要考慮用戶頭像、昵稱、上傳作品功能按鈕、作品收藏點贊數(shù)、用戶發(fā)布的作品等信息的合理布局，其中“用戶上傳作品”功能流程設(shè)計如圖2 所示。

圖2 用戶上傳視頻流程

管理員使用管理端對用戶、視頻、背景音樂等進行管理。視頻管理的重要模塊為審核被用戶舉報的視頻作品，流程設(shè)計如圖3 所示。

圖3 管理員審核被舉報視頻流程

3.2 數(shù)據(jù)庫設(shè)計

首先對系統(tǒng)中所有涉及到的實體進行分析，明確各實體屬性以及實體之間的聯(lián)系；其次對各實體和聯(lián)系均創(chuàng)建數(shù)據(jù)庫表，表與表之間靠外鍵約束及觸發(fā)器實現(xiàn)數(shù)據(jù)一致性和完整性。采用MySql 數(shù)據(jù)庫、使用結(jié)構(gòu)化查詢語言SQL 創(chuàng)建各種數(shù)據(jù)庫對象，如表1 所示的視頻評論。

表1 comments

4 冰雪運動社區(qū)系統(tǒng)的實現(xiàn)

本系統(tǒng)采用SpringBoot 框架實現(xiàn)Java 后臺，處理小程序端和管理端對數(shù)據(jù)庫存儲數(shù)據(jù)的訪問；采用微信開發(fā)者工具和小程序設(shè)計語言實現(xiàn)小程序端，采用Vue 框架實現(xiàn)管理端。

4.1 小程序端關(guān)鍵模塊的實現(xiàn)

4.1.1 首頁

用戶登錄成功后跳轉(zhuǎn)到小程序首頁，在js 文件onLoad()函數(shù)中使用wx.request()攜帶“搜索框關(guān)鍵字內(nèi)容”參數(shù)videosDesc 發(fā)出加載視頻的訪問請求；Java 后臺videoController 的showAll () 方法對接收到的videosDesc 參數(shù)長度進行判斷是否為0：若為0 則通過videoService 接口的getAllVideos () 函數(shù)聯(lián)合查詢videos 表和users_inform 表，返回視頻狀態(tài)為可見（未被舉報、可訪問） 的視頻列表；若不為0 則通過videoService 接口的getSearchVideos () 函數(shù)聯(lián)合查詢videos 表和users_inform 表，返回視頻狀態(tài)為可見（未被舉報、可訪問） 且videos 表的video_desc 列與videosDesc 參數(shù)進行模糊匹配后的視頻列表。小程序首頁實現(xiàn)效果如圖4 所示。

圖4 小程序首頁實現(xiàn)效果

4.1.2 視頻詳情頁

用戶點擊首頁視頻列表中感興趣的視頻進入視頻詳情頁時攜帶視頻id 和userId，Java 后臺userController 的query()方法根據(jù)視頻id 查詢視頻表videos 返回視頻發(fā)布者頭像和昵稱等信息、根據(jù)視頻id 和當(dāng)前登錄的userId 查詢user_like_videos 表和user_collect_videos 表返回當(dāng)前登錄用戶與當(dāng)前視頻的點贊收藏關(guān)系，小程序端解析Java 后臺返回的以上信 息 后 進 行 關(guān) 聯(lián) 顯 示 ；userController 的getAllComments()方法根據(jù)視頻id 對評論表comments和用戶表users_inform 聯(lián)表查詢評論人、評論內(nèi)容、回復(fù)人、回復(fù)內(nèi)容等，按時間先后順序顯示在評論區(qū)。

用戶點擊更多圖標(biāo)，使用wx.showActionSheet()在視頻詳情頁底部彈出舉報視頻、刪除視頻等功能欄，如圖5(c)所示。其中標(biāo)出的“刪除視頻”功能只有用戶瀏覽自己上傳的作品時才能顯示并使用。若用戶發(fā)現(xiàn)視頻內(nèi)容引起不適可點擊“舉報視頻”，wx.request()方法將舉報理由及描述等信息提交給Java 后臺，userService 接口的reportUser()方法將視頻id、舉報用戶id 及相關(guān)舉報信息存儲到數(shù)據(jù)庫users_report 表中，同時將視頻表videos 中相關(guān)視頻的狀態(tài)置為0(不可見)，即被舉報的視頻不能被用戶瀏覽。

圖5 視頻詳情頁實現(xiàn)效果

4.1.3 個人中心

用戶在小程序首頁底端點擊“我的”，進入個人中心頁面（見圖6）。個人中心展示了用戶頭像、昵稱、關(guān)注數(shù)（用戶關(guān)注的作者數(shù)）和粉絲數(shù)（關(guān)注用戶的作者數(shù)）及作品獲贊和收藏數(shù)等，分欄顯示用戶發(fā)布的作品、用戶贊過的作品、用戶收藏的作品，實現(xiàn)了用戶更換頭像、上傳作品、切換賬號等功能。

圖6 個人中心頁面

4.2 管理端關(guān)鍵模塊的實現(xiàn)

管理員登錄后審核被舉報視頻的實現(xiàn)方法：在管理員查看被舉報的視頻后，若視頻有問題、舉報問題屬實，則審核不通過、數(shù)據(jù)庫videos 表可見狀態(tài)列status 值繼續(xù)保持為0，即視頻對小程序用戶不可見；若舉報問題不實、視頻無問題，則審核通過、Vue 用axios 發(fā) 送post 請 求、Java 后 臺videoService 接 口 的updateVideoStatus()按視頻id 更新數(shù)據(jù)庫videos 表相關(guān)視頻的status 值為1，即該視頻對小程序端用戶可見、可出現(xiàn)在首頁視頻列表中被用戶瀏覽觀看。

結(jié)束語

本文以移動互聯(lián)網(wǎng)和京張體育文化旅游帶建設(shè)的融合技術(shù)研究為切入點、結(jié)合“互聯(lián)網(wǎng)+”思維，設(shè)計并實現(xiàn)了冰雪運動社區(qū)系統(tǒng)，用戶可發(fā)布與瀏覽短視頻、點贊與收藏短視頻，在評論區(qū)交流探討冰雪運動技巧等。本系統(tǒng)利用了微信小程序的便捷和跨平臺特性持續(xù)推進“全民上冰雪”惠民工程，向大眾普及冰雪運動、提高民眾參與率、提升民眾參與深度，推動張家口市經(jīng)濟轉(zhuǎn)型發(fā)展、推進京津冀協(xié)同發(fā)展。