基于微信平台的花卉交易平台的设计与实现

PAGE32基于微信平台的花卉交易平台的设计与实现摘要:随着科学技术的不断发展，计算机网络技术日渐成熟，其强大的功能已为人们深刻认识，它已进入人类社会的各个领域并发挥着越来越重要的作用。在线交易平台也随着网络技术的发展日趋成熟，如今，消费者足不出户就能在网上交易平台选购自己心仪的商品。本课题基于微信小程序，借助Node.js后端语言和vue管理端语言开发了一款线上花卉交易平台。该小程序由用户端小程序界面和后台管理界面组成。可实现实时在线选购，交易记录查看，商品管理，销量统计等功能，旨在提高商家的服务能力以及方便顾客的选购，顾客足不出户就能选购自己心仪的花卉。系统主要由以下几个模块组成：微信小程序端，服务端，后台管理端。关键词：微信小程序；在线花卉交易平台；Vue；Node.js；DesignOnOnlineFlowerTradingPlatformAbstract:Withthedevelopmentofscienceandtechnology.Thetechnologyofcomputernetworksisincreasinglymature,whosepowerfulfunctionshaveenteredintoallkindsoffieldsofsocietyandithasplayedamoreandmoreimportantroleinthesefields.Onlinetradingplatformhasbecomematurewiththedevelopmentoftechnologyofnetwork.Nowadays,consumerscanchooseandbuytheirfavoriteproductsononlinetradingplatformswithoutleavingtheirhomes.ThistopicisbasedonappletofWechat,withthehelpofnode.jsback-endlanguageandvuemanagementlanguagetodevelopanonlineflowertradingplatform.Theappletconsistsoftheclientappletinterfaceandthebackgroundmanagementinterface.Itcanrealizethefunctionsofreal-timeonlinepurchasing,transactionrecordchecking,commoditymanagement,salesstatistics,etc.,aimingatimprovingtheserviceabilityofmerchantsandfacilitatingcustomers'purchasing.Customerscanchoosetheirfavoriteflowerswithoutleavinghome.Thesystemismainlycomposedofthefollowingmodules:WeChatsmallprogramend,serverend,backgroundmanagementend.Keywords：appletofWeChat;OnlineFlowerTradingPlatform;Vue;Node.js目录TOC\o"1-2"\h\z\u1绪论 11.1在线花卉交易平台研究背景 11.2在线花卉交易平台研究意义 12可行性分析 12.1技术可行性 12.2经济可行性 42.3开发人员可行性 52.4社会环境可行性 63需求分析 63.1设计思想 63.2功能分析 83.3数据流图 83.4数据字典 83.5系统E-R图 104概要设计 124.1方案设计 134.2功能分解 134.3接口设计 154.4数据库设计 155详细设计 175.1主要界面分析与设计 错误!未定义书签。5.2前台客户端功能模块 错误!未定义书签。5.3后台管理端功能模块 错误!未定义书签。6系统测试与维护 246.1系统测试 错误!未定义书签。6.2系统运行 错误!未定义书签。6.3站点发布与维护 错误!未定义书签。7结束语 29参考文献 31致谢 32附录 32附录1源程序清单 错误!未定义书签。附录1.1在线学习功能模块程序清单 错误!未定义书签。附录1.2考试系统功能模块程序清单 错误!未定义书签。附录1.3给我留言功能模块程序清单 错误!未定义书签。附录1.4用户管理功能模块程序清单 错误!未定义书签。附录1.5题库管理功能模块程序清单 错误!未定义书签。附录1.6留言管理功能模块程序清单 错误!未定义书签。PAGE33《操作系统》教学网站设计1绪论1.1在线花卉交易平台研究背景在这个信息飞快发展的时代，我国的通信技术，软件技术也在飞速发展，5G技术也应运而生。依赖于智能手机的微信已经成为最受欢迎的通信平台，同时基于微信平台的微信小程序也逐渐走进人们的视野。人们逐渐发现了微信小程序的便利，即开即用，即用即关，无需占用额外的内存。并且小程序有自己的开发框架，特色组件和API，开发人员也可以很方便地开发出属于自己的小程序。传统的线下交易平台已经不能满足人们快速的生活步调，并且还会耗费额外的人力物力，所以现在有必要开发一块省时省力的微信小程序以满足消费者线上购物的需求。1.2在线花卉交易平台研究意义本课题实现的线上花卉交易平台分为消费者小程序端和商家后台端。消费者可以通过打开微信直接进入到小程序端挑选自己喜欢的商品，同时在小程序端管理自己的个人信息以及完成商品的支付。本课题研发的系统相较于传统的线下购物和线上购物具有极大的便利性，因为此款小程序是基于微信客户端的，所以用户没有必要下载额外的软件，而且分类也相较于传统的线上的购物平台更为清楚。总而言之，此款小程序既具备了传统线上购物的优点，又增加了微信生态的便利性，能给消费者带来完全不一样的购物体验。同时此系统也为方便商家管理提供了更好的体验。商家登录到后台可以很方便地进行商品以及订单管理。使用界面十分友好，各种商品的参数都清楚地显现在后台管理系统的界面上。2可行性分析2.1技术可行性小程序前端用微信开发者工具开发，基于WXML+WXSS+JAVASCRIPT语言编写，微信小程序前端的语言和传统的H5，Javascript语言十分类似，而且有一整套详尽的开发文档，所以开发起来相对容易。服务端语言采用MYSQL+Node.js编写，管理端页面用VUE语言编写，管理员只需要在后台管理页面修改数据，数据库和小程序端就能及时收到数据反馈。a．微信开发者工具简介微信开发者工作是微信官方提供的针对微信小程序的开发工具，集中了开发，调试，预览，上传等功能。微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设计指南，全新的开发者工具，集成了开发调试、代码编辑及程序发布等功能，帮助开发者简单和高效地开发微信小程序。微信小程序包含了很多框架，以及很多方便的API，使用时只需调用即可。启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的操作都会基于这个微信的帐号。程序调试主要有三大功能区：模拟器、调试工具和小程序操作区。b．Node.js技术简介V8引擎本身使用了一些最新的编译技术。这使得用Javascript这类\t"/item/node.js/_blank"脚本语言编写出来的代码运行速度获得了极大提升，又节省了开发成本。对性能的苛求是Node的一个关键因素。Javascript是一个\t"/item/node.js/_blank"事件驱动语言，Node利用了这个优点，编写出可扩展性高的服务器。Node采用了一个称为“事件循环(eventloop）”的架构，使得编写可扩展性高的服务器变得既容易又安全。提高服务器性能的技巧有多种多样。Node选择了一种既能提高性能，又能减低开发复杂度的架构。这是一个非常重要的特性。并发编程通常很复杂且布满地雷。Node绕过了这些，但仍提供很好的性能。Node采用一系列“非阻塞”库来支持事件循环的方式。本质上就是为文件系统、数据库之类的资源提供接口。向文件系统发送一个请求时，无需等待硬盘（\t"/item/node.js/_blank"寻址并检索文件），硬盘准备好的时候非阻塞接口会通知Node。该模型以可扩展的方式简化了对慢资源的访问，直观，易懂。尤其是对于熟悉\t"/item/node.js/_blank"onmouseover、onclick等\t"/item/node.js/_blank"DOM事件的用户，更有一种似曾相识的感觉。虽然让Javascript运行于服务器端不是Node的独特之处，但却是其一强大功能。不得不承认，浏览器环境限制了我们选择编程语言的自由。任何服务器与日益复杂的浏览器客户端应用程序间共享代码的愿望只能通过Javascript来实现。虽然还存在其他一些支持Javascript在服务器端运行的平台，但因为上述特性，Node发展迅猛，成为事实上的平台。在Node启动的很短时间内，社区就已经贡献了大量的扩展库（模块）。其中很多是连接数据库或是其他软件的驱动，但还有很多是凭他们的实力制作出来的非常有用的软件。最后，不得不提到的是Node社区。虽然Node项目还非常年轻，但很少看到对一个项目如此狂热的社区。不管是新手，还是专家，大家都围绕着项目，使用并贡献自己的能力，致力于打造一个探索、支持、分享、听取建议的乐土。Node作为一个新兴的前端框架，后台语言，有很多吸引人的地方：RESTfulAPI；单线程；Node可以在不新增额外线程的情况下，依然可以对任务进行并发处理——Node.js是单线程的。它通过事件循环（eventloop）来实现并发操作，对此，我们应该要充分利用这一点——尽可能的避免阻塞操作，取而代之，多使用非阻塞操作;非阻塞IO；V8虚拟机；事件驱动。c．Vue.js开发语言简介Vue是一个渐进性轻量级框架，与其他框架不同，Vue采用自顶向上增量开发涉及。Vue本身是基于HTML，JS和CSS，所以相对于其他框架更容易上手。与其它框架不同，Vue的核心库只关注视图层，这更有利于与第三方和项目整合。Vue是一个MVVM模式的框架，MVVM是把MVC里的Controller和MVP里的Present改成了ViewModel。MVVM可拆分为View-viewModel-Model三部分View是HTML文本的js模板，ViewModel是业务逻辑层（一切js可视业务逻辑，比如表单按钮提交，自定义事件的注册和处理逻辑都在viewmodel里面负责监控俩边的数据），Model数据层对数据的处理（比如增删改查）。d．MYSQLMYSQL是一个关系型数据库管理系统，关系数据库将将数据存在不同的表中，而不是统一存放在数据库系统中，这样就更便于用户的增删改查，因此也提高了系统的灵活性。MYSQL具有以下的优点：用C和C++编写，并使用多个编译器进行测试，以确保源代码的可移植性;支持多个操作系统;api是为各种编程语言提供的;支持多线程，充分利用CPU资源;优化后的SQL查询算法可以有效提高查询速度;可以作为客户端服务器网络环境中的独立应用程序使用，也可以作为嵌入到其他软件中的库来提供多语言支持;提供TCP/IP、ODBC和JDBC等数据库连接通道;提供用于管理、检查和优化数据库操作的管理工具;它可以处理数千万条记录的大量数据。e．WXML语言(1)数据绑定在WXML中，通过数据绑定实现天气、股市等页面数据的动态更新。WXML中的数据来自js文件中的页面数据对象，数据绑定使用Mustache方法，Mustache是变量名和{{}}的语法，用于包装变量。注意，所有组件和属性都是小写的。数据绑定还可以执行一些操作符绑定，如下所示:taginthehidden属性来决定是否显示视图内的内容，我们可以设置Data中flag的Boolean值来设置hidden来动态隐藏内容。(2)列表呈现在一些网上购物网站，一个品牌的所有产品都需要展示。当数量小时，我们可以在WXML中逐行编写，但当数量大且不固定时，我们需要使用小程序的列表渲染功能。如下所示:我们在js中定义了一个item数组，并通过wx:for属性在WXML文件中的一个标签中绑定item，其中index变量指的是数组中当前元素对应的下标，item变量指的是数组中的当前元素。我们可以使用wx:for-item来指定我们想要的变量名。key属性表示列表中项目的唯一标识符。(3)条件呈现当我们需要在不同的条件下显示不同的内容时，就会使用条件呈现。我们通常通过属性wx:ifwx:elifwx:else来控制条件呈现。(4)模板引用

小程序支持在模板中定义自己的代码片段，然后在不同的地方调用或引入。在wxml里我们定义一个tempItem的模板，在<template>标签里定义，name属性是模板名称。使用的时候通过is属性来声明我们使用的是哪个模板，data属性来传入我们想要的数据。模板有自己的作用域，我们只能通过data属性来传入。注意import的作用域，如果import的目标文件嵌套了其他文件的template模板,则嵌套的不会被应用。如index.wxml引入了a.wxml目标文件，而a.wxml文件中又引入了b.wxml文件内的模板。最终显示的只有a.wxml文件里的模板内容，而不会显示b.wxml的模板内容。这样可以避免引用模板死循环的问题，如果在a.wxml中引用b.wxml，在b.xwml中引用a.wxml文件，就会造成死循环。include则是把目标文件内除了模板代码块之外的所有内容都引入进来。如下：在index.wxml文件里我们引入了a.wxml目标文件，a.wxml文件包含了一个name属性是a的template模板以及一个内容时helloworld的view标签。最后经过include引入渲染的只有helloworld，并没有显示template模板内容。f．JavaScriptJavaScript是一种通用的脚本语言，也是一种具有安全功能的基于对象和事件驱动的脚本语言。JavaScript代码嵌入到HTML页面中，将静态页面转换成活页页面，允许用户交互和响应事件。现在，很难找到不包含JavaScript代码的商业站点页面。向Web添加JavaScript允许您在数据发送到服务器之前对其进行处理和验证，创建新的Web内容，甚至编写完全在客户端运行的应用程序(如计算器和游戏用户)，并扩展客户端功能。JavaScript是一种面向对象的编程语言，而不是一种面向对象的语言。原因是JavaScript不支持其他面向对象语言支持的一些面向对象特性。例如，JavaScript不支持类的继承机制，也没有私有、受保护和公共等概念，这些概念是面向对象语言c++和JAVA的基本元素。JavaScript程序用于检测用户活动并对用户操作作出反应，例如当光标经过一个链接时，该链接会更改为不同的颜色，这是用户操作的反映。JavaScript程序为Web站点、滚动消息、对话框、动态图像、购物车等提供导航帮助。因此，使用JavaScript程序，您可以控制Web程序的外观并评估用户输入的有效性，而无需与服务器交互，从而减少了服务器上的工作负载。JavaScript程序还可以检测用户的计算机上是否安装了某些插件，并在需要时从适当的站点下载它们。d.WXSSWXSS是一套样式语言，用于描述WXML的组件样式。它将决定WXML的组件应该怎么显示。好在微信团队提供的WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，微信团队对CSS进行了扩充以及修改。与CSS相比，WXSS扩展的特性有：尺寸单位,样式导入.1.尺寸单位WXSS新增了针对移动端屏幕的两种尺寸单位：rpx与rem。rpx（responsivepixel）：可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。\t"/art/201704/_blank"rem（rootem）：规定屏幕宽度为20rem；1rem=（750/20）rpx。因此建议，开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。注意在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。2.导入样式可以使用@import语句来导入外联样式表。@import后跟需要导入的外联样式表的相对路径，并用；表示语句结束。3.内联样式内联样式指的是框架组件上支持使用style、class属性来控制组件的样式：style：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度.\t"/art/201704/_blank"4.全局样式和局部样式定义在app.wxss中的样式为全局样式，作用于每一个页面。在page的.wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的选择器。5.WXSS与CSS开发的差异WXSS刚开始时并不能适配各种设备，虽然支持rem，但是并不能改变HTML的属性，这使得HTML5中的rem适配方案失效。最终微信团队推出了rpx（responsivepixel）这个新的计量单位，它规定屏幕宽度为750rpx，从而可以依据屏幕宽度进行自适应。rpx的实现原理跟rem很相似，而且最终也是换算成rem。rpx计量***的优势在于750设计稿不需要进行任何转换即可适配。750设计稿量是多少就是多少，如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。但是目前的方案还存在一定的问题，那就是非750的设计稿则需要进行一次换算，如640的设计稿就需要进行一次换算在640设计稿中的1rpx=640/750rpx，而在WXSS中并不支持算术运算符，所以小程序的视觉设计稿尽量使用750来给出。如"elementelement"，微信团队回复说“级联会破坏掉组件的结构，级联最终会取消”，因此推荐使用BEM，即Block（块）、Element（元素）、Modifier（修饰符），是由Yandex团队提出的一种CSSClass命名方法。后续会提供另外的一种层级关系来解决依赖层级的情况。虽然现在还能使用级联的写法，但是最终可能会废弃，所以建议大家尽量不要使用级联，相信未来微信团队会尽快推出新的级联方案。2.2经济可行性由于小程序的开发很多项目都是开源的，并且有丰富的组件和API，所以前期开发并不需要任何资金支持。一旦投入使用，只需要支付云服务器的费用即可。2.3开发人员可行性有了可以开发的工具，开发的人员也是必不可少的。因为开发微信小程序所必备的HTML语言和JS语言已经在大二的开发过程中学习过，所以上手开发问题不是很大，另外Vue语言也都是基于HTML，JavaScript，所以上手起来也相对较容易。2.4社会环境可行性现在消费者购物越来越趋向于线上购物。线下购物需要额外的人力物力，相较于线上购物已没有竞争优势。而传统的线上购物，比如淘宝，京东等，但是这些传统购物平台对于花卉的分类不够明确，用户搜索起来非常困难。所以一款专门针对消费者花卉购买需求的小程序是非常有市场的。微信小程序有着即用即开的特点，无需占用额外的内存，用户体验会比一般的app好很多。3需求分析在这个信息飞快发展的时代，我国的通信技术，软件技术也在飞速发展，5G技术也应运而生。依赖于智能手机的微信已经成为最受欢迎的通信平台，同时基于微信平台的微信小程序也逐渐走进人们的视野。人们逐渐发现了微信小程序的便利，即开即用，即用即关，无需占用额外的内存。并且小程序有自己的开发框架，特色组件和API，开发人员也可以很方便地开发出属于自己的小程序。传统的线下交易平台已经不能满足人们快速的生活步调，并且还会耗费额外的人力物力，所以现在有必要开发一块省时省力的微信小程序以满足消费者线上购物的需求。本课题实现的线上花卉交易平台分为消费者小程序端和商家后台端。消费者可以通过打开微信直接进入到小程序端挑选自己喜欢的商品，同时在小程序端管理自己的个人信息以及完成商品的支付。本课题研发的系统相较于传统的线下购物和线上购物具有极大的便利性，因为此款小程序是基于微信客户端的，所以用户没有必要下载额外的软件，而且分类也相较于传统的线上的购物平台更为清楚。总而言之，此款小程序既具备了传统线上购物的优点，又增加了微信生态的便利性，能给消费者带来完全不一样的购物体验。同时此系统也为方便商家管理提供了更好的体验。商家登录到后台可以很方便地进行商品以及订单管理。使用界面十分友好，各种商品的参数都清楚地显现在后台管理系统的界面上。原先消费者选择花卉的方式不外乎去花鸟市场或者淘宝京东等线上交易平台。然而这两种方式都有它一定的缺点。去线下花鸟市场耗时耗力，而且价格一般都偏贵；淘宝京东等线上平台则种类过于繁多，没有细则的分类，消费者也很难选择到自己心仪的花卉。而本课题开发的“花楹物语”线上花卉交易平台是基于微信小程序平台开发的，无需占用额外的内存，用户想使用的时候打开微信平台即可，这对不想安装多余软件的消费者来说十分友好。其次“花楹物语”对花卉的种类分的很清楚，不懂花卉品种的消费者也能很容易挑选到自己喜欢的花卉，并且每个花卉单品都有其详细介绍，消费者通过浏览商品页就能了解到这款花卉基本习性。消费者选择到自己的心仪花卉后，再完善收货地址等个人信息之后完成付款即可。整个过程省时省力，用户体验好。3.1设计思想a．功能需求“花楹物语”在线交易平台系统可以分为两大部分：一是消费者小程序模块，在这里消费者可以通过分类浏览商品，管理收货地址，管理购物车，查看订单信息；二是商家管理模块，在这里商家可以管理商品，查看浏览量，管理订单。消费者模块包括：首页商品预览，商品分类，购物车，个人信息管理。首页商品浏览子模块消费者可以在首页浏览商家挂在首页的商品。b）商品分类子模块消费者可以通过不同的花卉种类浏览商品。c)购物车子模块消费者可以在此模块管理购物车。d)个人信息管理模块消费者可以在个人信息管理页面管理订单，管理收货地址等。商家管理模块包括：订单列表，商品列表。订单列表商家可以在此模块管理订单，查看订单状态。b)商品列表商家可以在商品列表添加商品，删除商品，管理商品。b．性能需求a)精度需求当用户搜索商品时，输入的商品名进。进入到后台能够精确被识别，并给出及时反馈，输出正确的搜索结果。b)时间需求小程序的响应速度要快，点开商品详情页加载时间要短。微信授权登录响应时间也要快。c)灵活性当用户需求改变时，该系统能及时被调整。这就要求后台管理系统要做的足够灵活，如果有新的需求只需要在后台管理界面修改即可。c．环境需求本系统的开发需要应用到python环境和windows的环境，同时也要微信开发者环境，可以尽量使用开源的资源。d．可靠性需求系统要达到操作过程中的直观、方便、实用、安全等要求。e．用户界面需求本系统要求用户界面美观，整齐化一，颜色搭配合理。f．目标需求系统具备强大的数据库维护功能。即根据管理员用户需求进行数据的添加、删除、修改、备份等操作，也便于未参与开发的技术人员进行补充和维护。3.2功能分析在线花卉交易平台的主要功能模块分析如下：微信小程序端微信小程序端的主要功能模块分析如下：A．商品首页预览显示所有的首页商品B．商品分类浏览a．显示所有的分类。b．通过分类浏览商品。C．商品购买功能a．进行商品购买。D．个人信息管理功能a.管理收货地址。b.订单管理。商家管理系统A．商家的登录功能商家可以通过其用户名和密码登录管理。B．商品管理功能商品的添加、删除及修改。C．商品分类管理a．添加分类，删除分类。3.3数据流图数据流程图，又称数据流图，它是以图形的方式来表示数据处理系统中信息变换和传递过程。作为一种描述手段，可以模拟手工的、自动的以及两者兼而有之混合的数据过程。通过对在线花卉交易平台的描述,可以进一步明确业务流程及相关数据的流动转换,同时为下一步进行系统设计奠定基础。用户管理员用户管理员浏览查询商品系统信息维护登录商品下架商品上架生成订单用户清单商品详情维护信息权限验证信息权限验证信息维护信息维护请求维护信息维护请求货品管理权限及请求货品管理权限及请求上架信息登录信息上架信息登录信息货品管理权限及请求浏览查询请求货品管理权限及请求浏览查询请求下架权限下架权限订单内容订单内容下架信息用户浏览查询下架信息用户浏览查询购买请求购买请求3-1消费者购物过程管理员管理员商品判断增加商品删除商品删除商品商品数据删除商品商品数据商品库3-2商品管理过程3.4数据字典数据字典是关于数据的信息集合，也就是对数据流图中包含的所有元素的定义的集合。任何字典最主要的用途都是供人查阅对不了解的条目的解释，数据字典的作用也正是在软件分析和设计的过程中给人提供关于数据的描述信息。数据流图和数据字典共同构成系统的逻辑模型，没有数据字典数据流图就不严格，然而没有数据流图数据字典也难欲发挥作用。只有数据流图和对数据流图中每个元素的精确定义放在一起，才能共同构成系统的规格说明。数据字典是结构化分析方法的一个有力工具，它对数据流图中出现的所有数据元素给出逻辑定义。有了数据字典，使得数据流图上的数据加工和文件能得到确切的解释。下面的数据字典是经过分析以上数据流图而得来的。图3-3消费者购物过程数据流字典描述了这一数据流的来源，去向和元素组成。数据流名称：购物过程信息数据流名称：购物过程信息描述：选购花卉时的信息数据来源：由消费者选购商品时生成数据去向：交易平台后台管理程序数据流组成：商品编号+商品价格+商品数量3-4购物过程数据流字典3-3购物过程数据流字典图3-3订单信息数据流字典描述了这一数据流的来源，去向和元素组成。数据流名称：订单信息数据流名称：订单信息描述：选购花卉时的信息数据来源：由消费者选购商品时生成数据去向：交易平台后台管理程序数据流组成：订单编号+商品价格+下单时间3-4订单信息数据流字典3.5系统E-R图P.P.S.Chen提出的E-R模型是用E-R图是用来描述现实世界的概念模型。E-R模型包括实体，属性，实体之间的联系。（1）实体型用矩形表示，矩形框内写明实体名。（2）属性用椭圆形表示，并用无向边将其与相应的实体型连接起来。（3）联系用菱形表示，菱形框内写明联系名，并用无向边分别与有关实体连接起来，同时在无向边旁边标上联系的类型（1:1,1:n或m:n）。usernameusernamepasswordpassworduseruserWeixin-openidWeixin-openidididcitycity图3-3用户属性图ordersordersaddressidPrint-infopricemobile图3-4用户属性图4概要设计在完成了需求分析阶段之后，系统必须“做”什么就很清楚了，现在是决定如何做的时候了。总体设计的基本目的是回答“简而言之，系统应该如何实施?”通过这一阶段的设计，构成系统的物理元素被划分为:程序、文件、数据库、人工流程、文档等，但每个物理元素仍处于黑盒级，这些黑盒的具体内容将在未来被精心设计。总体设计阶段的另一个重要任务是设计软件的结构，即确定系统中的每个程序由哪些模块组成以及它们之间的关系。整个设计过程首先寻找各种方案来实现目标系统，需求分析阶段得到的数据流程图是构思各种可能方案的基础。然后分析人员从这些选项中选择几个合理的选项，为每个合理的选项准备一个系统流程图，列出组成系统的所有物理元素，执行成本/收益分析，并为实现该选项制定一个时间表。分析人员应该对这些合理的解决方案进行全面的分析和比较，选择最佳的解决方案推荐给用户和部门负责人。如果用户和使用部门主管接受推荐的方案,分析员应该进一步优化设计软件结构,一般来说,设计初步软件结构改进后,以得到一个更为合理的结构,进行必要的数据库设计、确定测试需求和测试计划。从上面不难看出,在详细设计:一般设计的必要性可以站在全球层面,花更少的成本,从抽象层次上的分析比较几种可能的系统实现方案和软件结构,选择最佳的解决方案和最合理的软件结构,开发利用低成本和高质量的软件系统。4.1方案设计在进行的需求分析的基础上，设计的体系结构如图4-1所示。图4-1为在线花卉交易平台的初级层次图，它从总体上初步地分析了该系统可划分的模块。在线花卉交易平台在线花卉交易平台商家管理模块消费者模块商家管理模块消费者模块图4-1初级层次图图4-2为在线花卉交易平台消费者模块的层次图，通过对消费者模块的进一步分解划分为如下几个方面。消费者模块消费者模块个人信息管理商品购买商品浏览个人信息管理商品购买商品浏览图4-2消费者模块层次图图4-3为在线花卉交易平台商家模块的层次图，通过对商家模块的进一步分解划分为如下几个方面。商家模块商家模块订单管理商品管理订单管理商品管理图4-3商家模块层次图4.3接口设计通过上一节的功能分解，各个模块之间的层次关系已经非常明了。但是如何将这些模块组合起来，如何成为一个完整的系统，即模块之间的接口设计就是一个主要问题。4.3.1消费者接口设计方案消费者在进入到微信小程序端口，进行商品浏览，商品购买，要将订单数据传到数据库和服务端。4.3.2商家接口设计方案商家在进入到后台管理系统后，可以对商品进行增删改查，改过的商品数据要及时传到小程序端供消费者浏览。4.4数据库设计系统各功能的实现，归根到底是通过对数据库进行各项操作来完成的，因此要实现系统规划的目标，提高系统的性能，首先需要有一个设计合理、功能完善的数据库。在设计数据库时，首先必须考虑的数据库的设计目标，对一个好的数据库来说，应当没有冗余数据，能够迅速的定位某个记录，并易于维护。本网站的主要数据库的逻辑表设计如下。表3.6.1用户表列名数据类型长度允许空id(主键)varchar10不允许nicknamevarchar16usernamevarchar16passwordvarchar10Weixin-openidvarchar12cityvarchar10表3.6.2商品表列名数据类型长度允许空id(主键)varchar10不允许namevarchar16goodsnumbervarchar16Retail-pricevarchar10Goods-briefvarchar12Sort-ordervarchar10表3.6.3订单表列名数据类型长度允许空id(主键)varchar10不允许addressvarchar16cityvarchar16Print_infovarchar10mobilevarchar12Pay-idvarchar10表3.6.4购物车表列名数据类型长度允许空id(主键)varchar10不允许user_idvarchar16Goods_idvarchar16Goods_namevarchar10Retail_pricevarchar125详细设计详细设计的目标是确定应该怎样具体实现所要求的系统，简而言之就是处理“怎样做”的问题。经过这个阶段的设计工作，应该就可以得出对目标程序的精确描述。详细设计阶段不是具体地编写程序，而是要设计出程序的“蓝图”，以后的程序员就根据这些“蓝图”写出具体的程序。所以详细设计的结果基本决定了最后程序设计的质量。5.1系统主页面系统主页面上提供了一些花卉的预览，以及花卉的分类，消费者可以在首页先简单预览一下商品，挑选自己喜欢的花卉。基于小程序端的花卉交易平台不需要注册用户，如需购买商品，直接点击微信授权登录即可。之后支付成功生成的订单信息会直接随着微信id进入到后台管理系统。系统主页面如图5-1所示：图5-1系统主页面5.2小程序消费者模块5.2.1消费者首页浏览消费者一进入到首页，就能浏览商家已经上架的商品，点击商品图片就能进入到商品详情页。然后消费者可以选择加入购物车或者立即购买，通过bindtap绑定响应跳转事件。5.2.1消费者分类浏览消费者点击下方的tapbar中的分类即可跳转到分类页，消费者可以在此通过分类浏览花卉。在此分类页消费者可以通过对不同种类花卉浏览，更有指向性地选择到自己心仪的花卉。5.2.1购物车此模块显示了消费者添加到购物车中的商品，消费者可以在此进行购物车商品管理，进行结账或者删除已添加的商品。5.2.1个人信息管理接下来到了个人信息管理模块，在此消费者可以查询自己的订单状态，管理收货地址，查看自己的浏览足迹。在此处消费者可以直接点击微信授权进行登录，此行为由微信自带的getUserInfo实现，无需注册新的账号以及不必要的开销。订单状态有全部订单预览，待付款订单，待发货订单，待收货订单。在地址管理界面可以新增自己的收货地址。5.3商家管理模块5.3.1商品管理商家可以在此界面添加售卖的商品。点击上方“添加商品按钮”即可进入到添加商品页面。在此页面商家可以上传商品图片，规定商品价格以及一些规格参数。5.3.2购物车管理商家可以在购物车管理模块查看购物车中的订单状态。一些订单信息，以及是否删除在此都能浏览到。5.3.3商品分类管理商家可以在此添加新的商品分类。点击“添加分类”按钮进去详情页。6编码与测试6.1编码接下来到了编码阶段，所谓编码，就是选择合适的程序设计语言将前期的软件设计结果编写成可运行的程序。由于高级语言的可阅读性，容易测试，书写简单，所以现在大部分程序开发人员都是选择高级程序语言。本次系统的微信小程序前端用的是WXML+WXSS+JS语言，后端用的是ThinkJS+MySQL语言，后端管理界面用的是VUE语言。这几种语言都是当下新兴的高级语言，网上有很多开源的代码，编写和后期维护都相对容易。6.1.1微信小程序功能模块a.商品购买界面

<view

class="left-icon"

bindtap='openCartPage'>

<text

class="cart-count">{{cartGoodsCount}}</text>

<image

class='icon'

src='/images/nav/icon-cart-b.png'></image>

<view

class='icon-text'>购物车</view>

</view>

</view>

<block

wx:if="{{goods.goods_number

>

0

&&

goods.is_on_sale

==

1}}">

<block

wx:if="{{goodsNumber

>

0}}">

<view

class="to-cart-btn"

bindtap='addToCart'>加入购物车</view>

<view

class="to-pay-btn"

bindtap='fastToCart'>立即购买</view>

</block>

<block

wx:if="{{goodsNumber

<=

0

}}">

<view

class="cart-empty">商品已售罄</view>

</block>

</block>

<block

wx:elif="{{goods.goods_number

<=

0}}">

<view

class="cart-empty">商品已售罄</view>

</block>

<block

wx:elif="{{goods.is_on_sale

==

0}}">

<view

class="cart-empty">商品已下架</view>

</block>

</view>b.商品购买数量对应的方法

getGoodsInfo:

function()

{

let

that

=

this;

util.request(api.GoodsDetail,

{

id:

that.data.id

}).then(function(res)

{

if

(res.errno

===

0)

{

let

_specificationList

=

res.data.specificationList;

//

如果仅仅存在一种货品，那么商品页面初始化时默认checked

if

(_specificationList.valueList.length

==

1)

{

_specificationList.valueList[0].checked

=

true

that.setData({

checkedSpecText:

'已选择：'

+

_specificationList.valueList[0].value,

tmpSpecText:

'已选择：'

+

_specificationList.valueList[0].value,

});

}

else

{

that.setData({

checkedSpecText:

'请选择规格和数量'

});

}

let

galleryImages

=

[];

for

(const

item

of

res.data.gallery)

{

galleryImages.push(item.img_url);

}

that.setData({

goods:

,

goodsNumber:

.goods_number,

gallery:

res.data.gallery,

specificationList:

res.data.specificationList,

productList:

ductList,

checkedSpecPrice:

.retail_price,

galleryImages:

galleryImages,

loading:1

});

wx.setStorageSync('goodsImage',

.https_pic_url);

}

else{

util.showErrorToast(res.errmsg)

}

});

},6.1.2后端功能模块a.商品详情页数据detailAction()

{

var

_this3

=

this;

return

_asyncToGenerator(function*

()

{

const

goodsId

=

_this3.get('id');

const

model

=

_this3.model('goods');

let

info

=

yield

model.where({

id:

goodsId,

is_delete:

0

}).find();

if

(think.isEmpty(info))

{

return

_this3.fail('该商品不存在或已下架');

}

const

gallery

=

yield

_this3.model('goods_gallery').where({

goods_id:

goodsId,

is_delete:

0

}).order('sort_order').limit(6).select();

yield

_this3.model('footprint').addFootprint(think.userId,

goodsId);

let

productList

=

yield

model.getProductList(goodsId);

let

goodsNumber

=

0;

for

(const

item

of

productList)

{

if

(item.goods_number

>

0)

{

goodsNumber

=

goodsNumber

+

item.goods_number;

}

}

let

specificationList

=

yield

model.getSpecificationList(goodsId);

info.goods_number

=

goodsNumber;

return

_this3.success({

info:

info,

gallery:

gallery,

specificationList:

specificationList,

productList:

productList

});

})();

}6.1.3商家管理功能模块a.订单管理界面<div

class="content-nav">

<el-breadcrumb

class="breadcrumb"

separator="/">

<!--<el-breadcrumb-item

:to="{

name:

'dashboard'

}">首页</el-breadcrumb-item>-->

<el-breadcrumb-item

:to="{

name:

'order'

}">订单管理</el-breadcrumb-item>

<el-breadcrumb-item>{{infoForm.order_sn

?

'订单详情'

:

'添加订单'}}</el-breadcrumb-item>

</el-breadcrumb>

<div

class="operation-nav">

<el-button

type="primary"

@click="goBackPage"

size="small"

icon="arrow-left">返回列表</el-button>

<!--<el-button

type="primary"

@click="test"

size="small"

icon="arrow-left">test</el-button>-->

</div>

</div>

<div

class="order-status-text">

<label>{{infoForm.order_status_text}}</label>

<div>

<el-button

type="danger"

plain

@click="changeStatus">变更状态</el-button>

<!--<el-button

v-if="infoForm.order_status

==

201"

type="danger"

@click="goPackage">备货</el-button>-->

<!--<el-button

v-if="infoForm.order_status

==

300"

type="primary"

@click="goPackage">发货</el-button>-->

</div>

</div>b.实现方法

methods:

{

changeStatus(){

this.statusVisible

=

true;

},

statusConfirm(){

this.axios.post('order/changeStatus',

{status:

this.statusValue,orderSn:Form.order_sn}).then((response)

=>

{//

console.log(response.data);

this.getInfo();

this.statusVisible

=

false;

})

},

handleClick(tab,

event)

{

let

pindex

=

tab._data.index;

if

(pindex

==

1)

{

if

(this.is_finish

==

0)

{

this.on_posting

=

1;

this.axios.post('order/getOrderExpress',

{orderId:

Form.id}).then((response)

=>

{

this.expressData

=

response.data.data;

this.expressData.traces

=

JSON.parse(this.expressData.traces);

this.is_finish

=

response.data.data.is_finish;

this.on_posting

=

0;

})

}

}

},6.2测试方案6.2.1测试总体方案本次测试采用黑盒测试和白盒测试。白盒测试主要测试程序结构，黑盒测试则是侧重于测试程序的功能。本课题是一个面向用户需求开发的小程序，所以本课题主要用黑盒测试测试系统的功能能否到达预期。如果黑盒测试不通过则采用白盒测试检测程序结构的问题。黑盒测试试图发现以下的错误：功能无法实行，界面出错，数据结构错误和数据库访问错误，无法初始化。白盒测试一般在程序设计的初期阶段实行，而黑盒测试一般在后期实行，在进行黑盒测试时，应考虑以下问题：1.怎样测试功能的有效性？2.哪些输入用例可以可以划分数据类的边界值？3.系统是否对特定的值比较敏感？4.系统最大能承受的数据量是多少？接下来我将分模块测试，同时将以上问题考虑进去。6.2.2测试步骤微信小程序功能模块A.测试微信授权登录功能如图所示，微信授权能成功登