基于B/S架構的太極拳社區(qū)微信小程序界面設計與實現(xiàn)

摘要：隨著中國太極拳的成功申遺，太極拳文化以其豐富的內涵吸引了越來越多的愛好者。這也意味著太極拳的傳承與保護在全國范圍內上升到了新的高度。本文秉承著文化傳播與保護的理念，基于B/S架構，主要使用SSM框架以及MySQL數(shù)據(jù)庫，通過廣泛搜集太極拳文化知識并深入分析實際需求，在微信開發(fā)者工具上進行系統(tǒng)建設，并對用戶和管理員兩個模塊進行界面設計與實現(xiàn)。期望用大眾喜聞樂見的微信小程序工具，實現(xiàn)太極拳社區(qū)微信小程序界面設計，為太極拳文化推廣以及愛好者貢獻自己的微薄力量。

關鍵詞：B/S架構；微信小程序；太極拳

北京時間2020年12月17日，我國申報的“太極拳”被列入聯(lián)合國教科文組織人類非物質文化遺產代表作名錄。太極拳成為我國第41個、河南省唯一一個地域鮮明的人類非物質文化遺產代表作。

檢索有關“太極拳”主題的論文會發(fā)現(xiàn)，不同年齡段的人練太極拳都有助于身體各方面的健康發(fā)展。保健時報的記者燕生報道，研究人員經過五年的研究發(fā)現(xiàn)，確診了帕金森的患者如果長時間打太極拳，或可在一定程度上延緩癥狀與并發(fā)癥的發(fā)展。多家雜志也顯示，多多練習太極拳會對大學生的心理健康產生積極影響。同時，多家雜志與報紙也發(fā)布過報道，指出中小學生習練太極拳對于身體發(fā)展和實戰(zhàn)技擊有很大的價值。這些都充分說明了太極拳文化蘊含著博大精深的中國傳統(tǒng)哲學思想和養(yǎng)生觀念，能夠為不同年齡段、不同人群提供修身養(yǎng)性、強身健體的價值。

為了宣傳太極拳文化，我國各個地區(qū)舉辦了多種多樣的活動，如修建中國太極拳博物館、針對太極拳人才進行專門的人才認定、制定太極拳體驗和紅色研學之旅方案，以及舉辦各種主題的太極拳交流賽。這些舉措充分展示了每個中華兒女對宣傳太極拳文化、將太極拳文化推向世界的責任和擔當。為此，本文懷揣著對太極拳文化的敬畏思想，主要基于B/S架構，使用SSM框架，后臺搭建MySQL數(shù)據(jù)庫，在微信開發(fā)者工具上進行系統(tǒng)建設。小程序主要分為用戶和管理員兩個模塊，本文將對這兩個模塊進行詳細的界面設計與實現(xiàn)。借助大眾喜聞樂見的微信小程序工具，本文致力于在提升用戶體驗的基礎上，實現(xiàn)太極拳社區(qū)的界面設計，為太極拳文化推廣以及愛好者貢獻自己的微薄力量。

一、關鍵技術概述

（一）B/S架構

Browser/Server模式是從傳統(tǒng)的C/S發(fā)展起來的計算方式。基于B/S架構，可以非常簡單地進行程序設計。對于處理量比較小，邏輯結構比較簡單的設計需求，開發(fā)者只需要擁有一臺能上網的計算機，就可以輕松實現(xiàn)自我需求。而基于B/S架構的太極拳社區(qū)微信小程序界面設計，正好符合這一特點。

本設計基于B/S架構，用戶端可以實現(xiàn)輸入內容的功能，比如用戶發(fā)帖、將太極拳相關產品加入購物車等。用戶提交請求后，客戶端會發(fā)送這些請求信息至Web服務器，Web服務器通過訪問數(shù)據(jù)庫并執(zhí)行服務端腳本，最終通過執(zhí)行HTML代碼展示用戶請求結果。這樣，用戶就可以成功發(fā)布有關太極拳文化的相關帖子。

（二）微信開發(fā)者工具

小程序采用了類似React Native和Weex的解析技術，開發(fā)者可以編寫一套程序在多種客戶端運行。同時，相比于公眾號和微商城，該程序具有更好的原生體驗[[ ]]。微信小程序全面開放申請以來，作為開發(fā)者，可以申請并注冊一個基于B/S架構的太極拳社區(qū)微信小程序。利用微信開發(fā)者工具設計、開發(fā)并發(fā)布的微信小程序，已成為當前備受歡迎的社交工具。隨著互聯(lián)網的發(fā)展，幾乎人人都有一部智能手機，而微信是大部分人會下載的一個APP。微信小程序依托于微信這一平臺，擁有龐大的用戶群體，使用者無需額外下載任何內容，即可輕松瀏覽小程序里面提供的所有內容。通過檢索“微信小程序”主題也會發(fā)現(xiàn)，搭載著微信小程序的系統(tǒng)研究與設計正如雨后春筍般層出不窮。這些都表明，基于微信小程序設計的太極拳社區(qū)作為重要的文化傳播渠道，將對太極拳文化推廣與保護產生一定的價值。

二、太極拳社區(qū)微信小程序界面系統(tǒng)設計與實現(xiàn)

（一）用戶功能設計與實現(xiàn)

在太極拳社區(qū)微信小程序中，用戶首先需要完成個人注冊，然后登錄太極拳社區(qū)微信小程序。一旦成功登錄，用戶即可訪問用戶端所有的功能，包括首頁瀏覽、交流社區(qū)互動、購物車管理以及“我的”個人中心等。在“我的”這一界面，用戶可以進行多樣化的操作，如用戶充值、收藏管理、發(fā)布帖子、查看自己發(fā)布的帖子、管理購物車以及查看訂單等，以滿足日常需求。太極拳愛好者可以在該小程序中進行方方面面的交流探討，并且可以購買自己喜歡的太極拳相關文化周邊產品。

1.用戶登錄界面設計與實現(xiàn)

像所有的系統(tǒng)一樣，太極拳社區(qū)微信小程序界面也需要登錄功能。用戶登錄需要填寫自己的賬號和密碼，如沒有賬號則需要注冊新賬號方可進入系統(tǒng)。注冊時需要填寫用戶名和密碼，并確認密碼，還需要進行上傳頭像的操作。若有相同的用戶名，系統(tǒng)會提示“用戶名已存在”，請用戶更換名稱；若沒有相同的用戶名，則可以繼續(xù)進行賬號注冊，注冊成功之后，用戶即可登錄該程序。

用戶實體包含多個屬性，如創(chuàng)建時間、余額、姓名、性別、頭像、用戶名、密碼、郵箱、手機號碼等。這些屬性可以存儲用戶的創(chuàng)建時間、獨特的姓名、性別等基礎信息，以及充值的商城余額等附屬信息。其中，創(chuàng)建時間的默認值為CURRENT_TIMESTAMP，余額的默認值為0。

2.首頁功能界面設計與實現(xiàn)

在太極拳社區(qū)微信小程序的首頁，實時更新與太極拳相關的資訊和視頻等內容。在首頁界面，用戶可以隨時瀏覽與太極拳文化相關的資訊、視頻等內容，并且可以觀看各式太極拳的教學視頻，領略太極拳大家風采。例如，2023年在河南溫縣陳家溝舉辦的“天才杯”太極拳交流大賽，小程序首頁會實時更新這一太極盛會的圖片與文字內容，用戶可以在視頻信息中查看精彩回顧視頻與現(xiàn)場訪談。該頁面還包含許多實體屬性，比如太極拳文章信息實體有更新時間、創(chuàng)建時間、贊、踩、文章標題、圖片、簡述、文章類型、作者、文章內容、最近點擊時間等屬性。其中，點贊數(shù)和踩數(shù)的默認值為0。

3.“我的”功能界面設計與實現(xiàn)

在太極拳社區(qū)微信小程序“我的”界面上，用戶可以執(zhí)行多項操作：對自己收藏的文章進行查看和取消收藏；進行用戶充值，用于購買太極拳周邊物品；通過“我的發(fā)帖”發(fā)布自己的各種正能量觀點；通過“我的發(fā)帖”查看或者刪除自己曾經發(fā)布的帖子；在“購物車”功能中查看、刪除或支付已加入購物車的物品；在“我的訂單”中查看歷史訂單及其詳細信息，如物流消息等。

太極拳社區(qū)微信小程序“我的”界面，可以實現(xiàn)用戶在小程序上的多樣化操作。在該頁面有很多實體屬性，比如購物車實體屬性有創(chuàng)建時間、商品表名、用戶id、商品id、商品名稱、圖片、購買數(shù)量、單價、會員價、商品類型。收貨地址實體屬性有創(chuàng)建時間、用戶id、地址、收貨人、電話、是否默認地址。其中，創(chuàng)建時間的默認值為CURRENT_TIMESTAMP，商品列表的默認值為shangpinxinxi。

（二）管理員功能設計與實現(xiàn)

在太極拳社區(qū)微信小程序中，管理員通過賬號密碼登錄以后，可以查看以下模塊：個人中心、用戶管理、公告信息管理、文章類型管理、文章信息管理、視頻信息管理、訂單管理等。

1.用戶管理界面設計與實現(xiàn)

在太極拳社區(qū)微信小程序的用戶管理界面上，管理員具備豐富的用戶管理功能。管理員可以新增和刪除小程序的用戶，還可以根據(jù)用戶名、姓名、性別等條件有針對性地快速檢索出用戶。此外，管理員可以查看每一個用戶的詳情頁面，并且對用戶的個人信息進行修改和調整。同時，該界面支持多選操作，方便管理員對多個用戶進行批量管理。例如，當用戶忘記密保問題時，可以聯(lián)系管理員修改其密保問題。管理員只需在用戶管理界面搜索該用戶名，檢索出該用戶后，點擊修改，進入修改密保信息的界面，進行相應的修改并保存即可。之后，用戶便可通過回答密保問題完成身份驗證。

2.公告信息管理界面設計與實現(xiàn)

在太極拳社區(qū)微信小程序的公告信息管理界面上，管理員可以輕松管理該小程序的公告信息。管理員可以新增和刪除公告，查看每一個公告的詳情頁面，并且對公告的信息進行修改和調整。此外，管理員還可以根據(jù)公告的標題或類型進行有針對性地快速查詢，以便找到相對應的公告信息。同時，該界面支持多選操作，方便管理員對多個公告進行批量處理。例如，管理員可以根據(jù)點擊次數(shù)對公告進行排序，將最受歡迎的公告設置為熱門。

3.文章類型管理界面設計與實現(xiàn)

在太極拳社區(qū)微信小程序的文章類型界面上，管理員可以方便地管理太極拳社區(qū)微信小程序的文章類型。管理員可以新增和刪除該小程序的文章類型，并根據(jù)文章類型有針對性地快速檢索。此外，管理員還可以查看每一個文章類型的詳情頁面，并且對文章類型信息進行修改和調整。同時，支持多選操作，方便管理員對多個文章類型進行批量管理。

4.文章信息管理界面設計與實現(xiàn)

在太極拳社區(qū)微信小程序的文章信息管理界面上，管理員可以全面掌控該小程序的文章信息。管理員可以新增和刪除該小程序的文章信息，還可以根據(jù)文章標題或作者有針對性地快速檢索出文章信息。此外，管理員還可以查看每篇文章的詳情頁面，并且對文章信息進行修改和調整。同時，為了方便管理員進行批量操作，該界面還支持多選功能。例如，管理員需要修改某個公告的標題信息時，可以通過標題快速檢索出具體的文章，再對其進行修改和完善。又如，如果文章發(fā)布后發(fā)現(xiàn)簡述部分存在問題，管理員同樣可以通過文章類型管理界面快速檢索到該文章，對該文章的簡述進行修改并保存。

5.視頻信息管理界面設計與實現(xiàn)

在太極拳社區(qū)微信小程序的視頻信息界面上，管理員可以高效管理該小程序的視頻信息。管理員可以新增和刪除視頻信息，還可以根據(jù)視頻名稱或類型進行有針對性地快速檢索。此外，管理員還可以查看每一個視頻的詳情頁面，并對視頻信息進行修改和調整。該界面支持多選操作，方便管理員對多個視頻進行批量處理。

6.訂單管理界面設計與實現(xiàn)

在太極拳社區(qū)微信小程序的訂單管理界面上，管理員可以清晰掌握該小程序的訂單情況。管理員可以新增和刪除訂單，還可以根據(jù)訂單標號或商品名稱進行有針對性地快速檢索。此外，管理員可以查看每一個訂單的詳情頁面，并對訂單信息進行修改和調整。同時，該界面支持多選操作，方便管理員對多個訂單進行批量處理。例如，如果要下架某一個商品，管理員可以通過商品名稱和訂單編號快速檢索出相關訂單，再進行刪除。再比如，用戶提交訂單后發(fā)現(xiàn)訂單收貨地址有誤，用戶可以聯(lián)系管理員修改地址。管理員可以在訂單管理界面點擊修改按鈕，對該訂單的收貨地址進行修改。

三、系統(tǒng)測試

為保證計算機應用系統(tǒng)性能的穩(wěn)定性，系統(tǒng)研發(fā)人員在系統(tǒng)正式投用前應開展完善的性能檢測工作[[]]。經過幾個階段的測試，本設計經過了多次修改，成功通過了所有測試用例。本次用戶系統(tǒng)測試對多項內容進行了測試。

（一）測試新用戶注冊功能

對于用戶寫入相同的用戶名，測試是否提示該用戶已存在。在其他個人信息都填寫正確的情況下，輸入已有的用戶名并點擊“注冊”按鈕，顯示無法注冊成功并提示“用戶名”已存在。隨后輸入不同的用戶名，提示注冊成功，檢測用戶名功能可正常運行。

（二）測試密碼輸入功能

針對用戶寫入兩次不同的密碼，測試是否提示兩次密碼輸入不一致。在其他個人信息都填寫正確的情況下，兩次密碼輸入不一致并點擊“注冊”按鈕，顯示無法注冊成功并提示“密碼不一致”。隨后輸入相同的密碼，提示注冊成功，檢測密碼功能可正常運行。

（三）測試手機號輸入功能

針對寫入錯誤格式的手機號，測試是否提示輸入的手機號格式不正確。在其他個人信息都填寫正確的情況下，輸入錯誤格式手機號并按下“注冊”按鈕，顯示無法注冊成功并提示“手機號格式不正確”。隨后輸入正確格式手機號，提示注冊成功，檢測手機號功能可正常運行。

（四）測試老用戶登錄功能

本次測試對老用戶登錄功能也做了針對性的系統(tǒng)測試：比如測試是否提示賬號或密碼錯誤，故意輸入錯誤的用戶名和正確的密碼，按下登錄按鈕，登錄界無法成功登錄，并提示“用戶名或密碼錯誤”。隨后輸入正確用戶名再按下登錄按鈕，那么就會顯示登錄成功。再比如，測試老用戶能否正常登錄時，在所有信息都填寫正確的情況下，點擊“登錄”按鈕，系統(tǒng)提示登錄成功。反之，如果任一信息填寫錯誤，那么系統(tǒng)都會有相對應的提示，比如“用戶名或密碼錯誤”。

四、結束語

太極拳社區(qū)微信小程序通過B/S結構、SSM框架和MySQL技術，實現(xiàn)了具體的界面設計。通過對實際需求的分析以及廣泛搜集相關的太極拳文化知識，實現(xiàn)了用戶注冊、登錄、閱讀文章、發(fā)表文章和評論、購物車、訂單管理等功能，以及管理員對用戶、公告信息、文章類型和信息、視頻信息、商品分類及商品信息、系統(tǒng)信息、訂單信息等的增刪改查的管理功能。在系統(tǒng)的開發(fā)中使用B/S結構設計并實現(xiàn)該程序，確保系統(tǒng)之間邏輯分層清晰明確，使系統(tǒng)更加合理可靠?；陂_發(fā)者工具，使用大眾喜聞樂見的微信小程序工具，依托微信巨大的用戶基數(shù)，竭盡全力宣傳太極拳文化的深厚內涵。希望在提升用戶體驗的基礎上，為太極拳文化推廣以及愛好者貢獻自己的微薄力量。

作者單位：王艷飛 劉甜甜 黃河交通學院

參考文獻

[1]李書杰，李志剛.B/S三層體系結構模式[J].河北理工學院學報，2002（S1）：25-28+34.

[2]武思怡，解佺，張雨，等.微信小程序開發(fā)研究[J].無線互聯(lián)科技，2018，15（11）：52-54.

[3]王曉蓉.計算機應用系統(tǒng)集成測試技術分析與探究[J].衛(wèi)星電視與寬帶多媒體，2019，（20）：61-62.