鞠宏軍 鐘超恒

摘要：《基于微信小程序的微型咨訊系統(tǒng)》采用了springboot+mybatis框架對(duì)系統(tǒng)進(jìn)行快速搭建，前臺(tái)頁(yè)面使用的是node.js編寫的，后臺(tái)業(yè)務(wù)邏輯使用JAVA語(yǔ)言編寫，采用的數(shù)據(jù)庫(kù)是mysql，結(jié)合mvc設(shè)計(jì)模式快速完成微型咨訊系統(tǒng)。該系統(tǒng)主要功能有：各用戶查看文章，發(fā)表文章;管理發(fā)表的文章，為文章進(jìn)行收藏還有評(píng)論回復(fù);管理用戶自身發(fā)表的文章;修改用戶信息;刪除文章，刪除用戶，上傳視頻圖片等。

關(guān)鍵詞：微信小程序;node.js;springboot;微型咨訊

中圖分類號(hào)：TP311.52

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009- 3044（2019）34-0093-04

1 背景

自改革開放以來，科技在日新月異的變化，國(guó)家也緊跟時(shí)代的進(jìn)步，快速地得到發(fā)展，計(jì)算機(jī)的各種行業(yè)不斷發(fā)展。從以前的滴滴響的尋呼機(jī)到霸氣厚重的大哥大，再到輕巧功能簡(jiǎn)單的小靈通再到加人多媒體的諾基亞手機(jī)，再到現(xiàn)在的集多元化功能于一身安卓蘋果智能手機(jī)，在它們的身影中無不看到了人們對(duì)社交的重視性，對(duì)外界通訊獲取外界信息的渴求。如今，無論是在地鐵或公交趕去上班的人，還是在家或?qū)W校的學(xué)生們都必須佩帶一臺(tái)手機(jī)，手機(jī)成了人們生活的必需品;與此同時(shí)，手機(jī)的app也不斷地得到多元化，但是隨著科技的進(jìn)步，人們對(duì)于app有了更高的要求，app體積越來越大使容量小的手機(jī)更加難以承受。因此，小程序應(yīng)運(yùn)而生了，人們不再需要為app體積過大而煩惱了，僅僅需要在小程序上授權(quán)一下就可以享受更輕便的體驗(yàn)。當(dāng)人們遇到有趣的事時(shí)，便可以拿起手機(jī)進(jìn)行隨性所欲的拍攝，分享給更多的人看，傳遞正能量，人們也可以在這小程序上各抒己見，暢所欲言。本文就是為此現(xiàn)象而開發(fā)的微信小程序，通過更輕便的小程序讓人們體現(xiàn)到無安裝的快感，使生活得快樂傳播得更廣，盡管小程序不能完全代替app，但是它在人們生活中也占有了重要的一席之地。

2 系統(tǒng)需求分析

2.1 用戶登陸授權(quán)功能需求

此功能是其他功能的基礎(chǔ)，需要通過授權(quán)獲取微信頭像用戶呢稱，從微信服務(wù)器端獲取openid作為唯一用戶的標(biāo)識(shí)，存人數(shù)據(jù)庫(kù)，以便創(chuàng)建新用戶或者檢查用戶是否是已存在的用戶等。

2.2 管理個(gè)人信息需求

當(dāng)用戶創(chuàng)建新用戶時(shí)，基本信息是空的，用戶可以查看信息，對(duì)于錯(cuò)誤的自身信息和想要修改的信息也可以點(diǎn)擊修改，但是對(duì)于用戶頭像，用戶的openid是不能修改的。

2.3 微型咨訊需求

此功能是系統(tǒng)的主要功能之一，主界面采用flex布局設(shè)計(jì)，對(duì)頁(yè)面加載不能過于慢，能夠展示用戶頭像姓名，文章基本內(nèi)容，并且能夠播放視頻，點(diǎn)擊圖片能夠放大預(yù)覽，對(duì)于發(fā)布的文章必須附帶視頻或者圖片其中一種，不能兩個(gè)同時(shí)存在。點(diǎn)擊發(fā)表按鈕時(shí)可以跳到發(fā)表的頁(yè)面，填寫內(nèi)容可以選著圖片或者視頻，圖片最多可以選擇九張，同時(shí)可以取消已經(jīng)選擇的視頻或者圖片;點(diǎn)擊按鈕能回到文章頂部;下拉操作時(shí)能夠?qū)ψ捎嵉恼故卷?yè)面進(jìn)行刷新，上拉時(shí)不斷加載文章，當(dāng)文章數(shù)到底時(shí)需要進(jìn)行提示，并且文章加載的順序是按最新發(fā)布的在前面。

2.4 互動(dòng)需求

用戶可以對(duì)喜歡的文章進(jìn)行點(diǎn)贊收藏，點(diǎn)贊收藏后該文章的數(shù)量需要發(fā)生改變，狀態(tài)也需要發(fā)生變化，同時(shí)用戶對(duì)于自己點(diǎn)贊收藏的文章也可以進(jìn)行查看，或者取消收藏。在微訊主界面瀏覽文章時(shí)，點(diǎn)擊某一篇文章時(shí)可以進(jìn)入文章查看詳細(xì)文章信息，查看詳細(xì)的用戶評(píng)論和回復(fù);點(diǎn)擊輸入框時(shí)能夠出現(xiàn)蒙板層，遮擋部分文章內(nèi)容，彈出鍵盤對(duì)文章進(jìn)行評(píng)論發(fā)表;當(dāng)點(diǎn)擊回復(fù)時(shí)也能彈出蒙板層，在輸入框內(nèi)對(duì)文章的某條評(píng)論進(jìn)行回復(fù)，同時(shí)文章相應(yīng)的評(píng)論數(shù)目也要發(fā)生相應(yīng)的變化。

2.5 管理用戶和文章需求

管理員通過密碼登陸可以進(jìn)入管理界面，進(jìn)入管理界面后能對(duì)用戶進(jìn)行查看，并且可以修改所有用戶信息，點(diǎn)擊刪除用戶按鈕，會(huì)提示是否刪除該用戶，點(diǎn)擊確定時(shí)可以刪除該用戶，同時(shí)該用戶的所有文章基本資料等都會(huì)被刪除;管理文章功能，管理員可以查看所有文章，對(duì)有非法內(nèi)容的文章可以進(jìn)行刪除，同時(shí)點(diǎn)擊刪除所有文章按鈕時(shí)可以刪除所有文章，并且把所有文章信息刪除。

3 系統(tǒng)設(shè)計(jì)

3.1 功能設(shè)計(jì)

1）實(shí)現(xiàn)管理員登錄的功能。

2）實(shí)現(xiàn)管理員對(duì)文章還有用戶進(jìn)行管理的功能。

3）實(shí)現(xiàn)文章能夠清晰展示，圖片預(yù)覽，視頻播放，分頁(yè)加載等功能。

4）實(shí)現(xiàn)文章能上傳視頻圖片功能。

5）實(shí)現(xiàn)用戶能查看評(píng)論，發(fā)表評(píng)論和回復(fù)，點(diǎn)贊收藏功能。

6）實(shí)現(xiàn)用戶能查看用戶信息并且修改個(gè)人信息功能。

7）實(shí)現(xiàn)用戶能管理自己發(fā)表的文章還有自己收藏的文章功能。

具體功能結(jié)構(gòu)如圖1所示：

3.2 系統(tǒng)總E-R圖

系統(tǒng)總E-R圖如圖2所示。

4 系統(tǒng)實(shí)現(xiàn)

4.1 系統(tǒng)關(guān)鍵技術(shù)分析

本系統(tǒng)采用了springboot+mybatis框架搭建快速部署，通過springboot的輕量級(jí)框架，使用注解開發(fā)可以降低開發(fā)配置的復(fù)雜度，同時(shí)springboot自帶服務(wù)器，對(duì)于程序的運(yùn)行調(diào)試提供了極大的幫助。持久化層使用mybatis，框架內(nèi)置的大量sql語(yǔ)句可以省去大部分編寫sql語(yǔ)句的麻煩，同時(shí)也使用了動(dòng)態(tài)sql提升系統(tǒng)的安全性。對(duì)于各種Jar包管理使用的是maven進(jìn)行管理，不用像以前一樣因?yàn)槿笔О鴮?dǎo)致程序報(bào)錯(cuò)等?？蛻舳耸褂玫氖俏⑿判〕绦?，比APP更加的輕便.同時(shí)適配機(jī)型調(diào)整難度也降低。

4.2 用戶授權(quán)和管理員登陸

管理員登陸界面比較簡(jiǎn)潔，此頁(yè)面作為小程序的首頁(yè)，首要用戶授權(quán)獲取頭像信息才能進(jìn)入小程序。輸入賬戶和密碼，當(dāng)點(diǎn)擊登陸按鈕之后會(huì)首先進(jìn)行前端的校驗(yàn)，如果校驗(yàn)出現(xiàn)內(nèi)容為空，則給出提示，并要求重新輸入。如果輸入結(jié)果不為空，則向服務(wù)器發(fā)送請(qǐng)求查詢是否有該用戶與對(duì)應(yīng)的密碼，如果成功返回success，提示登錄成功;如果沒有找到對(duì)應(yīng)賬戶則提示用戶名或密碼錯(cuò)誤。

4.3 管理員管理文章和用戶模塊

在本模塊中，分為管理文章模塊和管理用戶模塊;文章管理模塊以列表的形式展示文章的簡(jiǎn)單信息，包括發(fā)表人頭像，名字發(fā)表文章的內(nèi)容部分，文章內(nèi)容長(zhǎng)度過長(zhǎng)時(shí)會(huì)自動(dòng)進(jìn)行隱藏用省略號(hào)代替，點(diǎn)擊文章可以進(jìn)入文章內(nèi)部查看詳細(xì)信息;在每個(gè)文章列表的右邊會(huì)有一個(gè)刪除按鈕，點(diǎn)擊刪除按鈕會(huì)彈出提示框提示是否刪除，點(diǎn)擊確定文章就會(huì)刪除，同時(shí)為了方便操作，在文章列表的最下方也設(shè)計(jì)了一個(gè)刪除所有文章的按鈕，為了避免誤觸，該按鈕設(shè)置了隱藏，點(diǎn)擊向上按鈕時(shí)才會(huì)顯示;并且文章設(shè)置了下拉刷新加載，文章不會(huì)一次性地把所有文章加載出來，采用了分頁(yè)加載。

4.4 文章展示模塊

文章的內(nèi)容不能超過255個(gè)字，當(dāng)點(diǎn)擊圖片時(shí)圖片便可以放大預(yù)覽，圖片最多可以附帶九張，點(diǎn)擊視頻時(shí)視頻能夠流暢播放，但是視頻的長(zhǎng)度不能超過15秒;在視頻下方設(shè)置了評(píng)論數(shù)顯示，點(diǎn)擊評(píng)論圖標(biāo)或者點(diǎn)擊文章的頭部可以進(jìn)入文章的詳細(xì)內(nèi)容，查看文章的所有信息;視頻下方還設(shè)置了收藏按鈕，點(diǎn)擊收藏按鈕，收藏顯示發(fā)生變化，同時(shí)收藏?cái)?shù)量也會(huì)發(fā)生變化，并且也會(huì)記錄到個(gè)人的收藏里面。

4.5 微訊主界面模塊

在本模塊中主要涉及多個(gè)文章的布局，及多個(gè)文章加載，還有用戶如何發(fā)表。因?yàn)椴捎昧朔猪?yè)加載的原理，加載速度比較快，下拉時(shí)刷新文章列表，重新加載文章，點(diǎn)擊視頻播放時(shí)也能達(dá)到流暢播放效果;由于文章列表可能會(huì)過長(zhǎng)，所以設(shè)計(jì)了一個(gè)回到頂部的按鈕，用于快速跳到頭部給用戶更好的體驗(yàn);同時(shí)把發(fā)表按鈕設(shè)置成半透明顏色避免遮擋用戶視線。

4.6 評(píng)論回復(fù)模塊

此功能模塊主要涉及評(píng)論和回復(fù)，其中細(xì)節(jié)比較多。細(xì)節(jié)之一：當(dāng)用戶點(diǎn)擊輸入框時(shí)，此時(shí)便會(huì)彈起輸入框蒙版層，半透明遮住文章內(nèi)容，同時(shí)會(huì)觸發(fā)輸入框聚焦事件，設(shè)置輸入標(biāo)志為評(píng)論，調(diào)用鍵盤進(jìn)行輸入，此時(shí)輸入的內(nèi)容為評(píng)論內(nèi)容;當(dāng)用戶想取消輸入評(píng)論，點(diǎn)擊蒙版層的灰暗透明處，蒙版顯示標(biāo)志改變?yōu)閒alse，蒙版便會(huì)消失，輸入框關(guān)閉。細(xì)節(jié)之二：當(dāng)用戶想對(duì)某條評(píng)論進(jìn)行回復(fù)時(shí)，只需要點(diǎn)擊該條評(píng)論，就會(huì)觸發(fā)聚焦事件，設(shè)置輸入標(biāo)志為回復(fù)，改變蒙版顯示標(biāo)志喚起輸入框，此時(shí)輸入的內(nèi)容為回復(fù)。

4.7 個(gè)人管理模塊

此模塊主要是供用戶個(gè)人管理自身信息的模塊，主要設(shè)計(jì)對(duì)用戶收藏的整理，對(duì)用戶所發(fā)表的文章進(jìn)行整理。對(duì)于自己的收藏可以進(jìn)行查看詳細(xì)內(nèi)容，同時(shí)可以取消收藏;對(duì)于白己發(fā)表過的文章可以進(jìn)行刪除，點(diǎn)擊文章列表可以查看詳細(xì)的內(nèi)容評(píng)論。并且可以對(duì)用戶信息進(jìn)行修改，對(duì)于填入的必要部分信息會(huì)進(jìn)行非空校驗(yàn)，并且電話號(hào)碼格式也能進(jìn)行校驗(yàn)是否是真正的電話。圖8為個(gè)人管理模塊。

5 結(jié)束語(yǔ)

本小程序的主要目的是為了讓人們更方便的分享生活中的趣味事情，了解更多的咨訊，發(fā)表白己的看法，展現(xiàn)更好的自我，暢所欲言，無拘無束。在節(jié)奏緊張的時(shí)代中，這些信息快餐已經(jīng)越來越受到人們的追捧，短小而精悍的微訊帶來了更多的收獲。盡管小程序不能完全代替app，但是它在人們生活中也占有了重要的一席之地。本系統(tǒng)基于微信小程序的平臺(tái)，開發(fā)了一款微型咨訊系統(tǒng)，實(shí)現(xiàn)了讓用戶體會(huì)到更簡(jiǎn)短輕便的咨訊，同時(shí)通過微信小程序的平臺(tái)讓用戶體驗(yàn)到免安裝的快感，對(duì)于個(gè)人管理，以及管理員管理端也更加的輕便快捷，為其他類似的系統(tǒng)提供良好的思路。

參考文獻(xiàn)：

[1]張帆.微信小程序開發(fā)零基礎(chǔ)入門[M].北京：電子工業(yè)出版社.2017.

[2]李剛.輕量級(jí)Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)[M].北京：電子工業(yè)出版社.2017.

[3]阮一峰.ES6標(biāo)準(zhǔn)入門[M].3版.北京：電子工業(yè)出版社，2017.

[4]?？藸?Java編程思想[M].4版.北京：機(jī)械工業(yè)出版社，2007.

[5]周力.UML建模圖解教程[M].北京：人民郵電大學(xué)出版社，2009.

[6]王延平.21天精通微信小程序開發(fā)[M].北京：電子工業(yè)出版社，2017.

[7]扎卡斯.JavaScript高級(jí)程序設(shè)計(jì)[M].北京：人民郵電出版社，2006.

[8]高洪濤.從零開始學(xué)微信小程序開發(fā)[M].北京：電子工業(yè)出版社，2017.

【通聯(lián)編輯：謝媛媛】

收稿日期：2019-10-08

基金項(xiàng)目：華北科技學(xué)院教研基金資助項(xiàng)目（項(xiàng)目編號(hào)：JYGH201704）

作者簡(jiǎn)介：鞠宏軍（1973-），男，吉林遼源人，華北科技學(xué)院計(jì)算機(jī)學(xué)院教授，碩士，研究方向?yàn)橛?jì)算機(jī)應(yīng)用;鐘超恒（1997-），男，廣東肇慶人，華北科技學(xué)院計(jì)算機(jī)學(xué)院學(xué)生，計(jì)算機(jī)科學(xué)與技術(shù)。