基于微信小程序的潮流社区系统的设计与实现.doc

《基于微信小程序的潮流社区系统的设计与实现.doc》由会员分享，可在线阅读，更多相关《基于微信小程序的潮流社区系统的设计与实现.doc（35页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、摘要随着科技和Internet 井喷式的发展,互联网技术在我们的生活中无处不在，扮演着重要的角色。在中国一部手机可以解决你的衣食住行所有问题。国内经济和网络的高速发展，人们在着装上用的心思更多了，更加看重服装的外形，品牌价值和时尚潮流元素。所以推进了潮流社区和潮流文化的发展，开发一个基于微信小程序的潮流社区，希望能给用户提供方便的服务。基于微信小程序的潮流社区的开发使用java搭建后台，js，html5,css编写代码，采用微信开发者工具及MYSQL数据库进行开发；论文首先阐述了基于微信小程序的潮流社区的开发，并对该系统进行了较详细的需求分析，然后详细探讨了基于微信小程序的潮流社区的功能需求、

2、业务流程、数据流程、系统功能和系统设计等方面的问题。通过大学所学的专业知识，还有现在先进的计算机理念和技术希望能让基于微信小程序的潮流社区的信息管理可以便于操作，易于信息管理，满足管理人员的管理需求。关键字：基于微信小程序的潮流社区 java Mysql数据库IABSTRACTWith the rapid development of technology and Internet, Internet technology plays an important role in our life. In China, a mobile phone can solve all your probl

3、ems of food, clothing, housing and transportation. With the rapid development of domestic economy and network, people pay more attention to the appearance, brand value and fashion trend elements of clothing. Therefore, it promotes the development of trend community and trend culture, and develops a

4、trend community based on wechat small programs, hoping to provide users with convenient services.The development of the trend community based on wechat applets uses Java to build the background, JS, HTML5, CSS code, using wechat developer tools and MySQL database for development; firstly, this paper

5、 describes the development of the trend community based on wechat applet, and makes a detailed demand analysis of the system, then discusses the functional requirements, business process, data process, system function and system design of the trend community based on wechat applet in detail .Through

6、 the professional knowledge learned in the University, as well as the advanced computer concepts and technologies, we hope that the information management of the trend community based on wechat applet can be easy to operate, easy to manage information, and meet the management needs of managers.Key w

7、ords:Trendy community based on WeChat applet java Mysql databaseII目 录1.绪论11.1开发背景与意义11.2课题国内外研究现状11.3开发方法21.4论文结构22.系统开发技术与环境32.1 系统开发语言32.2 系统客户端技术32.3 系统网络架构32.4 系统数据库的选择42.5 系统的运行环境42.5.1 硬件环境42.5.2 软件环境43.系统分析53.1可行性分析53.1.1 经济可行性53.1.2 技术可行性53.1.3 操作可行性53.1.4 法律可行性53.2需求分析53.3.1 功能需求分析63.3.1 性能

8、需求分析73.3系统流程分析83.4数据流程分析104.系统设计概要114.1 系统开发软件的选择114.2 系统总体功能设计114.3 系统数据库设计114.3.1 概念模型设计114.3.2 数据库结构设计125.系统设计165.1 系统结构设计165.2.1客户端页面模块设计165.2.2 客户端购物车模块设计175.2.3 客户端商品评论模块设计175.2 管理员模块设计175.2.1 订单管理模块设计175.2.2 种类管理模块设计185.2.3 商品管理模块设计195.2.4 留言评论管理模块设计206.系统实现206.1 用户模块实现216.1.1 系统首页模块实现216.1.2

9、 系统商品信息模块实现216.1.3 系统商品购买模块实现226.1.4 系统评论模块实现236.2 管理员模块实现246.2.1 订单管理模块实现246.2.2 种类管理模块实现256.2.3 商品管理模块实现256.2.4 留言评论管理模块实现267.系统测试277.1 测试方法277.2 测试实例278.小程序发布288.1小程序发布流程28总结与展望29参考文献30致谢31IV第1章 绪论1.1开发背景与意义 现在全世界科技发展很快，尤其是互联网和手机行业基本上每年都会有新的进步和新的技术出现。现在在中国一部手机可以解决你的衣食住行问题。微信可以说是中国人最重要的移动软件。微信小程序可

10、以在微信上直接打开使用，不需要进行下载安装。而且操作简单快捷，用户可以扫描二维码或者搜索的方法打开微信小程序。现在微信小程序还在不断的更新和完善，小程序还有短信通知、扫描二维码、官方账号等功能。此外，微信应用程序是在微信平台上开发的。微信基本上拥有全中国的用户，人们可以在微信上使用各种功能性的小程序，真正用手机掌握衣食住行的日常生活。1.2课题国内外研究现状微信小程序的出现虽然不是很长时间，但是近年来发展非常迅速，现在已经有了很大的改进和完善。微信小程序可以像移动APP一样，可以通过各种小程序完成你需要的功能。与app相比，它有很多优点。1.它既方便又快捷，用完可以马上离开。2.它程序打开速度

11、很快，不需要占用内存。3.安全稳定，私密性强。4。4.开发成本低，维护不需要花费很多时间和精力。5.配件和众多入口的位置。总的来说，小程序还是有比较多优点，而且微信作为小程序平台，其发展潜力非常巨大。同时，它的程序设计和语言设计相对容易理解和掌握。小程序开发成本低，周期相对短，维护相对简单，市场前景很好，这是目前程序开发比较热门的一个方面。由于人们消费水平的提高，服装的消费也越来越高，不仅要满足普通服装的需求，更要注重其外观、品牌价值和时尚潮流元素。佛靠黄金，人靠衣服。这句谚语是真的。一个好的外表可以给很多分。如果您对运动鞋、时尚服装或时尚感兴趣，可以在上班途中或睡前打开并浏览这个关于时尚的小

12、程序，非常方便快捷。在这样一个小程序中，你可以满足你的爱好和对时尚的需求。这个应用程序主要面向年轻人。年轻人思想比较开放，去了解当下比较热门的潮流话题会比较感兴趣，因此这款时尚应用仍有相当大的前景。1.3开发方法该毕业设计主要使用的是web语言设计，通过建立后台搭建数据库，两者进行交互。我们可以在web页面上控制后台的查询，检索，表单和数据的验证等功能，同时还包括用户的使用权限功能。该小程序是在Mysql数据库后台的基础上实现和运行，然后再web和小程序上呈现。做好该小程序的需求分析后，然后写出该小程序各个功能实现和设计以及运行的过程。在小程序开发，调试和运行完成后，把这三方面相关的都要记录相

13、关记录。 1.4论文结构(1)绪论从开发小程序的背景、意义和发展现状出发，详细阐述了该小程序可以应用的方面，并对本章进行了总结。(2)系统分析概要、用户需求调研、系统业务流程分析、系统数据库的搭建、本章内容总结(3)系统设计小程序的网络结构搭建、小程序的客户端设计、小程序的功能设计、小程序功能设计要求、数据库后台的搭建、数据库概述、数据库概述结构设计、数据库结构设计。(4)系统开发环境介绍 使用技术简介、数据库概念和特点、本章小结。(5)系统的实现登录模块的实现、管理员模块实现、用户模块的实现、分类模块的实现、商品模块的实现。(6)系统测试小程序开发结束后，我们要对该小程序进行测试，测试分为两

14、种黑盒测试和白盒测试。我们小程序使用的是黑盒测试，通过输入不同的测试数据组对功能模块进行测试。31广东东软学院本科生毕业设计（论文）2系统开发技术与环境2.1 系统开发语言Java是一种非常流行的编程语言，尤其是在web开发和数据库后台搭建上，它比其他语言更容易使用。在许多商业性项目上，许多的公司都点名要java语言进行系统编程，就是看重了java编写的程序安全性更高且后期维护性更强，也由此可以得出，Java语言的前景十分好且前途不可估量。每一个语言都有着自己的优缺点，对于java语言来说，也是如此。java语言相对其他语言更简单易学，且编写的程序安全性更高，稳定性更强，兼容性也很强不同的平台

15、大多数都可以进行编译。Java语言可以只需编写一次然后可以在不同的平台实现和运行，这也大大的说明它具有更大的伸缩性。java语言最大的优势就是它的开源性，它同时具备很多强大的开发工具。但是java语言需要运行环境且框架极多，这就需要编程者去了解这些，也就相应的会延缓编程者的开发时间。2.2 系统客户端技术客户端的开发环境我使用的是微信开发者工具，微信开发者工具可以进行调试、预览、上传等功能，非常方便快捷。在微信开发者工具官网上有关于微信开发者工具使用说明，微信小程序的开发和设计的案例，可以让我进行参考。同时还有其他的插件和API的使用，可以提高技术人员的开发效率和缩短开发时间。使用开发者工具必

16、须进行实名认证登录，测试的时候可以使用测试号进行测试。微信开发者工具分为三个主要的功能区：模拟器，调试工具和小程序操作区。2.3 系统网络架构我开发该小程序选择的网络结构是服务器-客户机，即Client/Server结构。C/S系统结构经过几十年的发展现在已经非常完善了，它的特点是交互性强，接入方式具有安全性高、反馈速度快、对大量数据处理方便快捷等优点。服务器主要负责数据管理，客户端负责与用户的交互。分工与合作的同时信息资源共享，非常适合该微信小程序的运行。在Client/Server结构系统中，应用程序分为客户端和服务器两个部分。客户端主要完成用户界面的显示，数据输入，数据有效性的验证，处理

17、应用逻辑等功能。服务端的部分负责运行后台服务，比如控制外部设置管理和一些数据库操作等，这些系统结构由多台计算机组成，它们有机结合，协作完成整个系统的应用，使系统的软硬件资源的使用达到最大限度。2.4 系统数据库的选择MySQL是搭建后台最经常使用的关系型数据库管理系统，现在很多web和小程序开发使用的也是这个数据管理系统其中之一。由于在网络应用领域的成果，受到很多大型物联网公司的喜爱。MySQL是将所有数据储存在后头服务器理。所以，速度和灵活性都有很大的提升，并且My SQL可以在多种系统中运行，可以跨越平台有比较好的兼容性。MySQL的语句比较通俗易懂，还可以精准查找和访问数据库的数据库。M

18、ySQL体积小，速度快，所有成本都很低，而且很容易查询到相关源代码可以缩短我们的开发时间，所以我便于开发小程序选择使用MySQL作为网站后台的数据库。2.5 系统的运行环境2.5.1 硬件环境处理器：Intercorei5内存：最低4GB硬盘空间50GB以上2.5.2 软件环境开发环境对开发人员是很重要的，开发人员若是对此系统软件开发极为熟悉，那便大大的节约了系统的开发时间，人工精力投入，开发成本。选择自己熟悉的软件环境进行系统开发能达到事半功倍的效果，所以选择自己熟悉的开发环境是很重要的。操作系统：Windows数据库：MySQL系统开发工具：eclipse，微信开发者工具软件开发语言： J

19、ava 结合微信服务器：Tomcat使用的软件都是容易操作，运行安全稳定。3系统分析3.1可行性分析3.1.1 经济可行性开发该小程序使用的软件平台是eclipse，微信开发者平台和MySQL数据库，这三者都可以免费使用的，所以并不需要很大的投入，所以在经济上是完全可行的。查阅资料和信息，还有一些所需物品的花费都是很少的。我分析过该小程序长期看来还是有很大的发展潜力，虽然我做这个项目花费的时间会比较长，但是可以给一些喜欢该小程序的用户有一个这样的平台，长期来看还是比较成功的，经济上应该也会有不错的回报。3.1.2 技术可行性微信小程序发展很快也很完善了，而且微信小程序开发的平台也有很大，受到很

20、多研发工作人员的欢迎。我使用的开发环境和编程语言能够完成我制定的功能实现，所以我能成功的开发该微信小程序。3.1.3 操作可行性我开发的微信小程序的操作十分简单，用户可以直接上手操作。用户可以在手机上直接打开使用，该微信小程序的系统是非常容易操作的，用户可以很自然的使用，所以在设计该小程序的时候没有提示和使用说明的功能，但是不影响用户使用该小程序的正常功能。3.1.4 法律可行性我在设计该小程序的时候记录各种有可能发生的问题，所以我做了很详细的规划，技术上，法律上都有。我是完全合法的进行该小程序的开发，所以该小程序我们是能够正常进行开发的。3.2需求分析我本身是对潮流文化是很感兴趣，大概的了解

21、该类型用户的需求。我有查阅资料还有分析我做的这款的小程序在功能还是排版等方面要满足用户的要求。另外，为了确保软件设计的品质，便于软件功能的休息和验证，软件要求的表现没有任何的偏差，有可追溯性和可修正性。3.3.1 功能需求分析确定题目后,首先进行需求分析，根据我们该类型小程序的需要和要求,进行需求分析和是否可行性的分析，所有功能要求及操作介绍如下：商品有推送文章的页面商品：创建编辑、上架下架、删除、搜索，商品分类，商品库存，商品文化和历史，新品发售时间。订单：创建订单、查看订单优惠券：按物品范围、金额门槛使用购物车：添加商品到购物车、购物车的商品删除用户：查看用户资料商品：编辑商品、上架下架、

22、删除商品类别管理：增加、修改、删除类别订单管理：查看订单、订单发货。优惠券：批量发送优惠券，设置注册时赠送优惠券。后台管理：简单的权限管理用户用例图如图所示：图3.1 用户用例图管理员用例图如图所示：图3.2 管理员用例图3.3.1 性能需求分析本系统在性能和功能有以下的标准：1.可扩展性系统的设计是基于现阶段的功能需求。为了适应未来实际需求的变化，方便未来功能的扩展和维护，需要考虑系统的可扩展性，以便在根据实际需要增加新的功能模块时，采用原有的系统架构功能模块没有受到明显影响。2.稳定性系统的运行应该稳定的、高效的和可靠的。系统功能比较多，我们按照系统功能进行模块划分时，要尽量做到有交互但是

23、代码互相不要有太多的影响，不要产生强依赖，提高其独立性，以保证系统的稳定性。3.易用性系统的使用是为了方便用户，节省用户时间精力，实现高效管理，因此，系统为用户提供实用功能的同时，还要界面美观，操作简单，使用方便，用户体验良好。4.流畅性为提升用户体验感，系统的使用过程中应该加载流畅、响应快速，尽量避免用户等待时间。通过提升代码质量、建立高效的刷新机制、合理优化布局和内存等来提高响应速度，避免使用时出现程序卡顿，减少等待时间。界面设计时，通过减少层级、提高布局复用，删除控件无用属性，优化界面从而提高页面加载速度。可以通过线程初始化、异步延期加载等方法来优化闪屏页布局和启动逻辑，提高启动速度。5

24、.安全性系统存储了大量的个人信息数据，因此系统必须建立安全机制和权限设置，保证操作用户身份的合法性，防止未经授权的操作。3.3系统流程分析1.系统开发流程在整个项目开发过程中，根据需求分析和系统来选择开发模式，使用了相关的工具和技术依次进行数据库设计和功能实现，系统开发完成后，通过黑盒测试进行系统调试，完善系统，系统开发步骤具体如图3.3所示。图3.3 系统开发流程图2.登录流程图本系统有两个登录界面，一个是用户端登录界面，一个是后台管理系统管理员登录端，但不管登录对象是管理员还是用户，登录流程都一样，登录系统会动态判断登录者的角色，并赋予其相应的权限。具体登录流程如图3.4所示。图3.4 登

25、录流程图3.系统核心业务流程图用户端主要业务包括登陆登记注册、使用者信息修正、信息查询、商品信息、商品购买、订购信息等。对于用户而言，最重要的是商品的购买，其业务处理的流程如图3.5所示。图3.5 商品购买流程图4.数据操作流程图本系统需要从数据库中进行读取的数据有用户信息、商品信息、交流信息、订单信息、资讯信息，其数据读取的操作流程如图3.6所示。图3.6 数据读取流程图用户、商品、订单、资讯等信息需要写入数据库，其数据存储的操作流程如图3.7所示。图3.7 数据存储流程图3.4数据流程分析通过以上系统功能的分析可知，用户登录系统或管理员登录系统背景管理等都需要通过账号和密码进行身份检查。通

26、过数据验证后系统会自动进行权限验证，判断登录用户的角色。若为用户，只能对个人信息、留言信息、交易信息进行存储，对商品信息、资讯信息只能读取；如果是管理员，则有权管理和审核所有数据。所以系统的数据处理过程如图3.8所示。图3.8 系统数据流程图4系统设计概要4.1 系统开发软件的选择本系统使用的是Java语言进行后台web的编写，系统和web的前端使用的是css,js,html5语言进行编写。在开发过程中，系统采用的eclipse，微信开发者工具和MySQL数据库开发，这三者都是可以免费使用的。4.2 系统总体功能设计做好需求分析，对该系统的功能做好划分和设计如图4.1所示：图4-1系统功能图4

27、.3 系统数据库设计4.3.1 概念模型设计数据库设计就是根据业务系统的需要和所选择的数据库管理系统来设计最优的数据存储模型。同时，建立了表的结构和表之间的关系。最终的效果是：有效地存储数据，并能有效地从数据库中提取存储的数据。需求分析逻辑设计物理设计维护优化需求分析：数据是什么；数据有哪些属性；数据和属性都有哪些特点。逻辑设计：使用ER图对数据库进行逻辑建模。物理设计：根据数据库自身的特点把逻辑设计转换为物理设计。维护优化：新的需求进行建表；索引优化；大表拆分。实体：实体是具有区别可触摸的存在的其他实体的特性和属性，并且与其他实体相关联的实体。例如，老师可以是实体，逛街也可以是实体。属性可以

28、理解为实体的特征。以下为实体介绍。 4.2商品实体图 4.3订单实体图 图4.4 管理员实体图 图4.5 资讯实体图4.3.2 数据库结构设计数据库设计我们要从数据分析和系统分析的基础上进行设计，同时要从用户的角度出发，将整体的设计理念统筹兼顾完成合并。然后完成系统的结构分析和整体的优化设计。数据库结构的正常意义是实体与属性的关系模型。E-R模型通常包含有关实体、属性和连接的信息。E-R模型使用E-R图表示需要提示用户工作的事物，属性是实体信息的显示。概念设计的目标是反映系统所需的数据库概念的结构，即概念模型。 概念架构独立于数据库的逻辑结构，是一个独立的DBMS，不需要依靠计算机系统。以下为

29、系统中使用的数据库表信息；表名：wct_notice序号列名数据类型长度小数位标识主键外键允许空默认值说明1idint11是是否auto_increment2titlevarchar50是3notevarchar500是4ndatevarchar50是5typevarchar50是6imgvarchar200是表名：wct_bill序号列名数据类型长度小数位标识主键外键允许空默认值说明1idint11是是否auto_increment2gidsvarchar100是3pricevarchar100是4uservarchar100是5uidvarchar100是6shopvarchar100是7

30、billvarchar2000是8openidvarchar255是9ndatevarchar255是10totalvarchar255是11wayvarchar50是12gnamesvarchar500是13sidvarchar10是14telvarchar50是15addressvarchar50是16notevarchar200是17statevarchar10是18statecnvarchar50是19cuidanvarchar255是表名：wct_type序号列名数据类型长度小数位标识主键外键允许空默认值说明1idint11是是否auto_increment2titlevarchar

31、500是3ownidvarchar10是表名：wct_youhuijuan序号列名数据类型长度小数位标识主键外键允许空默认值说明1idint11是是否auto_increment2totalint11是3extimeint11是4sidint11是5uidint11是6typeidint11是7fulluseint11是8ndatevarchar255是9extimestrvarchar255是10usernamevarchar255是11statecnvarchar255是表名：wct_line序号列名数据类型长度小数位标识主键外键允许空默认值说明1idint11是是否auto_increm

32、ent2bidint11是3uidint11是表名：wct_shop序号列名数据类型长度小数位标识主键外键允许空默认值说明1idint11是是否auto_increment2snamevarchar100是3imgvarchar500是4notevarchar500是5addressvarchar500是6longitudevarchar100是7latitudevarchar100是8telvarchar100是9ownidvarchar10是10passwdvarchar50是5 系统设计5.1 系统结构设计 我的小程序采用的是客户端，服务端，加数据端三种结构互相结合和交换，系统具体结构如

33、图5-1所示 图5-1系统结构设计图5.2 客户端功能模块设计5.2.1客户端页面模块设计 前端的页面我使用的是htlm5和css的布局格式，图标使用的是从网上下载的easy ui。首页的顶端是一个轮播图，可以播放一些比较火爆的文章或者是一些时尚单品。然后有一个搜索窗口，可以搜索小程序的相关内容。中间是一些商品信息，下面有首页，分类，购物车，我的四个页面，可以点击进入查看。 分类子页面还有手表，眼镜，玩具，穿搭，配饰，其他的子页面，这些子页面里都是分类好的商品信息。购物车页面，可以显示你购买的商品，可以增加或者删除。我的页面里可以显示我的优惠卷、我的订单、地址管理、注销登录等选项。商品页面里显

34、示了商品的信息，价格。同时可以加入购物车，收藏，提交订单，留言评价等功能。5.2.2 客户端购物车模块设计。我们要分析好购物车的有可能出现的情况。要考虑到单选、全选和取消，购物车里的商品选中的才进行购买结算。商品的购买可以进行单个购买或者是多个购买进行结算，还有删除的时候进行单个删除还是多个删除商品，这些都是考虑的。还有当购物车清零的时候，购物车界面变空的布局。当我们分析好购物车会出现的各种情况，我们开始设计购物车。首先要制作一个商品列表，列表里的单品需要：商品图，商品名，单价，数量，是否选中，商品id。然后右上角提交订单，需要一个字段表示是否全选了商品然后计算出的总价，当我们每次进入购物车的

35、同时，购物车要进行刷新然后获取当前购物车的最新状态，但是onLoad和onReady只会在初始化的时候执行一次，因此我需要把请求放在 onShow 函数里。购物车的数据通常是我们在前端进行购买操作后，然后反馈给后台的服务器，因此我把购物车的函数赋值放在了生命周期函数里。5.2.3 客户端商品评论模块设计 我们可以在商品底部对商品进行评价和点赞。在商品的页面的底部用html和css设计一个评论区，添加了一个大拇指的点赞图片，点击大拇指点赞次数会增加。评价实现具体函数如下代码所示： function pingjia() var id = focusobj.id; var statecn=已评价;

36、ajaxCallback(billState,id:id,statecn:statecn,function(data) showTipTimer(操作成功!,function() billDetail(data); ); );5.2 管理员模块设计5.2.1 订单管理模块设计 管理员操作需要登陆web后台才可以进行操作。在订单管理模块中，我们可以看到所有订单的消息，有订单编号，订单购买的商品，总价，用户的id，电话，时间，客户是否催单，订单备注，订单的状态。还可以显示历史订单的收益，也可以按照日期寻找订单。订单太多了，可以选中订单然后删除。5.2.2 种类管理模块设计 我们可以对商品进行分类，

37、当你想添加新的商品类型可以点击+号键进行添加，或者选中商品类型点击-号键进行删除。也可以进行搜索商品类型。 在这里种类的排序使用的是Field，获取当前对象的成员变量的类型，对成员变量重新设值。当我们想添加一个新的商品类型，点击+号进行添加，填写好新的种类进行保持。如果要删除的话，要先选中一个种类再点击-号键，然后再次确认删除才可以删除。如果直接点击-号键，会有提示你要选中商品类型才可以删除。这部分使用的if语句进行完成，具体代码如下所示： id: tooldel, disabled: false, iconCls: icon-remove, handler: function () var

38、rows = $(#grid1).datagrid(getSelections); if (rows.length) var ids = ; for (var i = 0; i rows.length; i+) ids += rowsi.id + ,; ids = ids.substr(0, (ids.length - 1); $.messager.confirm(提示, 确定要删除吗？, function (r) if (r) deleteItem(ids); ); else $.messager.alert(提示, 请选择一条记录进行操作); 5.2.3 商品管理模块设计 在这模块中我们可

39、以看到商品的配图，名称，价格。添加新的商品可以点击+号键，添加新的商品需要填写商品名称，种类，配图，价格和备注信息。要删除和下架商品点击-号键。在这个页面也可以进行商品搜索。 在这模块中是使用Field和column进行目录排序。+号键的具体代码实现如下所示： columns: /field: ck, checkbox: true, title: 配图, width: 200, field: img,formatter:function(v) return ; , sortable: true, title: 名称, width: 100, field: gname, sortable: true, title: 价格(￥), width: 100, field: price,sortable: true , toolbar: text: , id: tooladd, disabled: false, iconCls: icon-add, handler: function () $(#action).val(add); $(#managerDialog).dialog(open); managForm.reset(); , -号键具体代码实现如下所