基于B/S架构的太极拳社区微信小程序界面设计与实现

摘要：随着中国太极拳的成功申遗，太极拳文化以其丰富的内涵吸引了越来越多的爱好者。这也意味着太极拳的传承与保护在全国范围内上升到了新的高度。本文秉承着文化传播与保护的理念，基于B/S架构，主要使用SSM框架以及MySQL数据库，通过广泛搜集太极拳文化知识并深入分析实际需求，在微信开发者工具上进行系统建设，并对用户和管理员两个模块进行界面设计与实现。期望用大众喜闻乐见的微信小程序工具，实现太极拳社区微信小程序界面设计，为太极拳文化推广以及爱好者贡献自己的微薄力量。

关键词：B/S架构；微信小程序；太极拳

北京时间2020年12月17日，我国申报的“太极拳”被列入联合国教科文组织人类非物质文化遗产代表作名录。太极拳成为我国第41个、河南省唯一一个地域鲜明的人类非物质文化遗产代表作。

检索有关“太极拳”主题的论文会发现，不同年龄段的人练太极拳都有助于身体各方面的健康发展。保健时报的记者燕生报道，研究人员经过五年的研究发现，确诊了帕金森的患者如果长时间打太极拳，或可在一定程度上延缓症状与并发症的发展。多家杂志也显示，多多练习太极拳会对大学生的心理健康产生积极影响。同时，多家杂志与报纸也发布过报道，指出中小学生习练太极拳对于身体发展和实战技击有很大的价值。这些都充分说明了太极拳文化蕴含着博大精深的中国传统哲学思想和养生观念，能够为不同年龄段、不同人群提供修身养性、强身健体的价值。

为了宣传太极拳文化，我国各个地区举办了多种多样的活动，如修建中国太极拳博物馆、针对太极拳人才进行专门的人才认定、制定太极拳体验和红色研学之旅方案，以及举办各种主题的太极拳交流赛。这些举措充分展示了每个中华儿女对宣传太极拳文化、将太极拳文化推向世界的责任和担当。为此，本文怀揣着对太极拳文化的敬畏思想，主要基于B/S架构，使用SSM框架，后台搭建MySQL数据库，在微信开发者工具上进行系统建设。小程序主要分为用户和管理员两个模块，本文将对这两个模块进行详细的界面设计与实现。借助大众喜闻乐见的微信小程序工具，本文致力于在提升用户体验的基础上，实现太极拳社区的界面设计，为太极拳文化推广以及爱好者贡献自己的微薄力量。

一、关键技术概述

（一）B/S架构

Browser/Server模式是从传统的C/S发展起来的计算方式。基于B/S架构，可以非常简单地进行程序设计。对于处理量比较小，逻辑结构比较简单的设计需求，开发者只需要拥有一台能上网的计算机，就可以轻松实现自我需求。而基于B/S架构的太极拳社区微信小程序界面设计，正好符合这一特点。

本设计基于B/S架构，用户端可以实现输入内容的功能，比如用户发帖、将太极拳相关产品加入购物车等。用户提交请求后，客户端会发送这些请求信息至Web服务器，Web服务器通过访问数据库并执行服务端脚本，最终通过执行HTML代码展示用户请求结果。这样，用户就可以成功发布有关太极拳文化的相关帖子。

（二）微信开发者工具

小程序采用了类似React Native和Weex的解析技术，开发者可以编写一套程序在多种客户端运行。同时，相比于公众号和微商城，该程序具有更好的原生体验[[ ]]。微信小程序全面开放申请以来，作为开发者，可以申请并注册一个基于B/S架构的太极拳社区微信小程序。利用微信开发者工具设计、开发并发布的微信小程序，已成为当前备受欢迎的社交工具。随着互联网的发展，几乎人人都有一部智能手机，而微信是大部分人会下载的一个APP。微信小程序依托于微信这一平台，拥有庞大的用户群体，使用者无需额外下载任何内容，即可轻松浏览小程序里面提供的所有内容。通过检索“微信小程序”主题也会发现，搭载着微信小程序的系统研究与设计正如雨后春笋般层出不穷。这些都表明，基于微信小程序设计的太极拳社区作为重要的文化传播渠道，将对太极拳文化推广与保护产生一定的价值。

二、太极拳社区微信小程序界面系统设计与实现

（一）用户功能设计与实现

在太极拳社区微信小程序中，用户首先需要完成个人注册，然后登录太极拳社区微信小程序。一旦成功登录，用户即可访问用户端所有的功能，包括首页浏览、交流社区互动、购物车管理以及“我的”个人中心等。在“我的”这一界面，用户可以进行多样化的操作，如用户充值、收藏管理、发布帖子、查看自己发布的帖子、管理购物车以及查看订单等，以满足日常需求。太极拳爱好者可以在该小程序中进行方方面面的交流探讨，并且可以购买自己喜欢的太极拳相关文化周边产品。

1.用户登录界面设计与实现

像所有的系统一样，太极拳社区微信小程序界面也需要登录功能。用户登录需要填写自己的账号和密码，如没有账号则需要注册新账号方可进入系统。注册时需要填写用户名和密码，并确认密码，还需要进行上传头像的操作。若有相同的用户名，系统会提示“用户名已存在”，请用户更换名称；若没有相同的用户名，则可以继续进行账号注册，注册成功之后，用户即可登录该程序。

用户实体包含多个属性，如创建时间、余额、姓名、性别、头像、用户名、密码、邮箱、手机号码等。这些属性可以存储用户的创建时间、独特的姓名、性别等基础信息，以及充值的商城余额等附属信息。其中，创建时间的默认值为CURRENT_TIMESTAMP，余额的默认值为0。

2.首页功能界面设计与实现

在太极拳社区微信小程序的首页，实时更新与太极拳相关的资讯和视频等内容。在首页界面，用户可以随时浏览与太极拳文化相关的资讯、视频等内容，并且可以观看各式太极拳的教学视频，领略太极拳大家风采。例如，2023年在河南温县陈家沟举办的“天才杯”太极拳交流大赛，小程序首页会实时更新这一太极盛会的图片与文字内容，用户可以在视频信息中查看精彩回顾视频与现场访谈。该页面还包含许多实体属性，比如太极拳文章信息实体有更新时间、创建时间、赞、踩、文章标题、图片、简述、文章类型、作者、文章内容、最近点击时间等属性。其中，点赞数和踩数的默认值为0。

3.“我的”功能界面设计与实现

在太极拳社区微信小程序“我的”界面上，用户可以执行多项操作：对自己收藏的文章进行查看和取消收藏；进行用户充值，用于购买太极拳周边物品；通过“我的发帖”发布自己的各种正能量观点；通过“我的发帖”查看或者删除自己曾经发布的帖子；在“购物车”功能中查看、删除或支付已加入购物车的物品；在“我的订单”中查看历史订单及其详细信息，如物流消息等。

太极拳社区微信小程序“我的”界面，可以实现用户在小程序上的多样化操作。在该页面有很多实体属性，比如购物车实体属性有创建时间、商品表名、用户id、商品id、商品名称、图片、购买数量、单价、会员价、商品类型。收货地址实体属性有创建时间、用户id、地址、收货人、电话、是否默认地址。其中，创建时间的默认值为CURRENT_TIMESTAMP，商品列表的默认值为shangpinxinxi。

（二）管理员功能设计与实现

在太极拳社区微信小程序中，管理员通过账号密码登录以后，可以查看以下模块：个人中心、用户管理、公告信息管理、文章类型管理、文章信息管理、视频信息管理、订单管理等。

1.用户管理界面设计与实现

在太极拳社区微信小程序的用户管理界面上，管理员具备丰富的用户管理功能。管理员可以新增和删除小程序的用户，还可以根据用户名、姓名、性别等条件有针对性地快速检索出用户。此外，管理员可以查看每一个用户的详情页面，并且对用户的个人信息进行修改和调整。同时，该界面支持多选操作，方便管理员对多个用户进行批量管理。例如，当用户忘记密保问题时，可以联系管理员修改其密保问题。管理员只需在用户管理界面搜索该用户名，检索出该用户后，点击修改，进入修改密保信息的界面，进行相应的修改并保存即可。之后，用户便可通过回答密保问题完成身份验证。

2.公告信息管理界面设计与实现

在太极拳社区微信小程序的公告信息管理界面上，管理员可以轻松管理该小程序的公告信息。管理员可以新增和删除公告，查看每一个公告的详情页面，并且对公告的信息进行修改和调整。此外，管理员还可以根据公告的标题或类型进行有针对性地快速查询，以便找到相对应的公告信息。同时，该界面支持多选操作，方便管理员对多个公告进行批量处理。例如，管理员可以根据点击次数对公告进行排序，将最受欢迎的公告设置为热门。

3.文章类型管理界面设计与实现

在太极拳社区微信小程序的文章类型界面上，管理员可以方便地管理太极拳社区微信小程序的文章类型。管理员可以新增和删除该小程序的文章类型，并根据文章类型有针对性地快速检索。此外，管理员还可以查看每一个文章类型的详情页面，并且对文章类型信息进行修改和调整。同时，支持多选操作，方便管理员对多个文章类型进行批量管理。

4.文章信息管理界面设计与实现

在太极拳社区微信小程序的文章信息管理界面上，管理员可以全面掌控该小程序的文章信息。管理员可以新增和删除该小程序的文章信息，还可以根据文章标题或作者有针对性地快速检索出文章信息。此外，管理员还可以查看每篇文章的详情页面，并且对文章信息进行修改和调整。同时，为了方便管理员进行批量操作，该界面还支持多选功能。例如，管理员需要修改某个公告的标题信息时，可以通过标题快速检索出具体的文章，再对其进行修改和完善。又如，如果文章发布后发现简述部分存在问题，管理员同样可以通过文章类型管理界面快速检索到该文章，对该文章的简述进行修改并保存。

5.视频信息管理界面设计与实现

在太极拳社区微信小程序的视频信息界面上，管理员可以高效管理该小程序的视频信息。管理员可以新增和删除视频信息，还可以根据视频名称或类型进行有针对性地快速检索。此外，管理员还可以查看每一个视频的详情页面，并对视频信息进行修改和调整。该界面支持多选操作，方便管理员对多个视频进行批量处理。

6.订单管理界面设计与实现

在太极拳社区微信小程序的订单管理界面上，管理员可以清晰掌握该小程序的订单情况。管理员可以新增和删除订单，还可以根据订单标号或商品名称进行有针对性地快速检索。此外，管理员可以查看每一个订单的详情页面，并对订单信息进行修改和调整。同时，该界面支持多选操作，方便管理员对多个订单进行批量处理。例如，如果要下架某一个商品，管理员可以通过商品名称和订单编号快速检索出相关订单，再进行删除。再比如，用户提交订单后发现订单收货地址有误，用户可以联系管理员修改地址。管理员可以在订单管理界面点击修改按钮，对该订单的收货地址进行修改。

三、系统测试

为保证计算机应用系统性能的稳定性，系统研发人员在系统正式投用前应开展完善的性能检测工作[[]]。经过几个阶段的测试，本设计经过了多次修改，成功通过了所有测试用例。本次用户系统测试对多项内容进行了测试。

（一）测试新用户注册功能

对于用户写入相同的用户名，测试是否提示该用户已存在。在其他个人信息都填写正确的情况下，输入已有的用户名并点击“注册”按钮，显示无法注册成功并提示“用户名”已存在。随后输入不同的用户名，提示注册成功，检测用户名功能可正常运行。

（二）测试密码输入功能

针对用户写入两次不同的密码，测试是否提示两次密码输入不一致。在其他个人信息都填写正确的情况下，两次密码输入不一致并点击“注册”按钮，显示无法注册成功并提示“密码不一致”。随后输入相同的密码，提示注册成功，检测密码功能可正常运行。

（三）测试手机号输入功能

针对写入错误格式的手机号，测试是否提示输入的手机号格式不正确。在其他个人信息都填写正确的情况下，输入错误格式手机号并按下“注册”按钮，显示无法注册成功并提示“手机号格式不正确”。随后输入正确格式手机号，提示注册成功，检测手机号功能可正常运行。

（四）测试老用户登录功能

本次测试对老用户登录功能也做了针对性的系统测试：比如测试是否提示账号或密码错误，故意输入错误的用户名和正确的密码，按下登录按钮，登录界无法成功登录，并提示“用户名或密码错误”。随后输入正确用户名再按下登录按钮，那么就会显示登录成功。再比如，测试老用户能否正常登录时，在所有信息都填写正确的情况下，点击“登录”按钮，系统提示登录成功。反之，如果任一信息填写错误，那么系统都会有相对应的提示，比如“用户名或密码错误”。

四、结束语

太极拳社区微信小程序通过B/S结构、SSM框架和MySQL技术，实现了具体的界面设计。通过对实际需求的分析以及广泛搜集相关的太极拳文化知识，实现了用户注册、登录、阅读文章、发表文章和评论、购物车、订单管理等功能，以及管理员对用户、公告信息、文章类型和信息、视频信息、商品分类及商品信息、系统信息、订单信息等的增删改查的管理功能。在系统的开发中使用B/S结构设计并实现该程序，确保系统之间逻辑分层清晰明确，使系统更加合理可靠。基于开发者工具，使用大众喜闻乐见的微信小程序工具，依托微信巨大的用户基数，竭尽全力宣传太极拳文化的深厚内涵。希望在提升用户体验的基础上，为太极拳文化推广以及爱好者贡献自己的微薄力量。

作者单位：王艳飞 刘甜甜 黄河交通学院

参考文献

[1]李书杰，李志刚.B/S三层体系结构模式[J].河北理工学院学报，2002（S1）：25-28+34.

[2]武思怡，解佺，张雨，等.微信小程序开发研究[J].无线互联科技，2018，15（11）：52-54.

[3]王晓蓉.计算机应用系统集成测试技术分析与探究[J].卫星电视与宽带多媒体，2019，（20）：61-62.