软件设计毕业论文(前端+后端)

浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现PAGE\*ROMANPAGE\*ROMANII摘 要近几年来，随着互联网的发展，电子商务和网络技术也日新月异。由此也衍生除了许多不同的电子商务平台，而精准的乡村电子商务平台却少之又少，缺乏外销道路，缺乏宣传已然成为了制约乡村发展的最重要的两大制约因素。通过互联网技术建立精准的电子商务平台帮助乡村脱贫致富已刻不容缓。本文在参考了相关电子商务设计的系统上，确定了系统三个用户端：普通用户端，商家管理系统，网站管理系统；确定了普通用户端的产品展示，购物订单管理，活动管理三大功能模块；确定了网站管理系统的用户管理，商家管elementUI框架，结果表明，系统运行正常，满足用户其需求，创造了经济价值。关键词：电子商务；系统设计；模块开发AbstractInrecentyears,withthedevelopmentoftheInternet,e-commerceandnetworktechnologyhavealsochangedwitheachpassingday.Asaresult,manydifferente-commerceplatformshavebeenderived,andtherearefewaccuraterurale-commerceplatforms.Thelackofexportroadsandlackofpublicityhavebecomethetwomostimportantconstraintsthatrestrictruraldevelopment.Itisimperativetoestablishaprecisee-commerceplatformthroughInternettechnologytohelpcountrysidegetridofpovertyandgetrich.Thispaperreferstotherelevante-commercedesignsystem,determinesthethreeuserterminalsofthesystem:ordinaryuser,businessmanagementsystem,websitemanagementsystem;determinestheproductdisplayofordinaryuser,shoppingorder,sharingcenterandpersonalcenterfourFunctionmodule;threefunctionalmodulesofcommoditymanagement,ordermanagementandactivitymanagementofthemerchantmanagementsystemaredetermined;fourfunctionalmodulesofusermanagement,merchantmanagement,commoditymanagementandsharingmanagementofthewebsitemanagementsystemaredetermined.Atthetime,Vue,Axios,PHP,MySQLandotherelementsUIframeworkareapplied.Theresultsshowthatthesystemrunsnormally,meetstheneedsofusersandcreateseconomicvalue.Keywords:E-commerce;SystemDesign;Moduledevelopment;目 录系统概述 1研究背景 1研究目的与意义 1主要应用技术介绍 2系统架构 2开发工具 2关键技术 2系统需求分析 4系统捕获 4系统概念模型的建立 7系统用例模型的建立 8系统用例规格描述和交互模型的建立 10系统设计 22系统结构设计 22系统活动图 22系统顺序图 25系统类图 25功能模块设计 29商品模块 29订单模块 30用户模块 30分享模块 31数据库设计 32概念结构设计 32逻辑结构设计 32数据表设计 34系统实现 36登录注册 36商品模块 41用户界面 41商家页面 45浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现订单模块 50用户页面 50商家页面 51分享模块 52用户页面 52超级管理员页面 53系统测试 55系统测试方法 55白盒测试 55黑盒测试 55灰盒测试 55系统测试用例 55系统前台测试 56系统后台测试 56结 论 58参考文献 59致 谢 60IV浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现PAGEPAGE62018122018年中央一号文件，乡村振兴从此成平台也就由此出现了。1系统概述研究背景2018122018旅游景点逐渐成为班竹村发展的重点方式之一。研究目的与意义近年来，随着我国经济的迅速发展，我国互联网产业也随之突飞猛进。如今，电子商务的发展和普及已然成为了大趋势，人们的购物方式也随之发生巨大的变化，其中网络购物已成为目前购物方式中较为常见的方式，电子商务为网络购物提供平台，帮助消费者充分了解商品，通过对商品的对比让消费者选购到满意合适的商品。但乡村电子商务的发展依然寸步难进，大部分乡村产品难以通过互联网销售，难以让其转化为经济效益。据实地调研，斑竹村是一个积极响应乡村振兴的乡村，当地不仅仅办起了旅游振兴，还打造了文化振兴。吸引了部分大学生返乡创业，展开了青年旅社等方面创业。但在了解其实际情况后，总结了斑竹村发展的现状以及遇到的难在周末或者节假日有部分游客。但这些却也难以得到较好的经济效益，更不用说是振兴了。根据返乡大学生口述，对外宣传，以及整合乡村资源，通过互联网发展，才是解决难题的办法。文章通过研究国内外电子商务系统的发展情况，结合此次实地调研的结果，订单功能，个人页面功能，主要展示产品页面以及相对应的产品详情页面，同时通过详情页面购买产品，在订单页面查看详情，以及个人页面查看个人信息以及相关操作，同时后台对应商家的上下架产品以及管理产品的发货信息，超级管理员管理每个用户的权限等等。主要应用技术介绍系统架构B/SMVVM框架。B/S（Browser/Server）/服务器形式。浏览器主管页面的前端呈现，为客户供给人性化是WEBwww浏览器来达,model-view-viewmodelMVC模式的改进。ModelviewmodelMVVM的架构下，ViewModelViewModelViewModel之间ViewModelModel数据的View上。开发工具VisualStudio2015第三方扩展，方便开发者使用。关键技术本系统的开发采用的技术栈主要是 Vue+Vuex+vue-router+sass+php+axios等技术。VueVue是一个JavaScript框架，是一种渐进式的框架，采用的是MVVM的架构方式，同时也提供了组件的开发方式。Vue.js框架，主要是解决前端数据绑定的问题。他与传统的jQuerydom，而Vuedom，数据的渲染只需要映射到虚拟期。Vuex是Vuestoremutation改变其转态。Vue-router是由Vue官方发布的一款插件，解决了Vue项目不同组件之间的切换问题，通过history可以实现无刷新访问页面同时更改页面的url。AxiosAxiosHTTPAjaxpromise机制，同时也有拦截请求和响应，支持自动转换JSONXSRF。MySQLMySQLMySQLAB目前属于Oracle旗下的关系型数据库之一。一般个人或者中小型的企业，MySQL也是足够使用了。数据库的存储不仅仅是可以存文件等，同时还可以MySQLMySQL的负担。PHPPHPPHPCMySQL数据库，同时配合前端请求数据渲染页面。SassSass是“世界上最成熟、最稳定、最强大的专业级CSScssCSS样式程序化，更简单的实现样式的书写，可以继承，可遍历等等，SassCSS。2系统需求分析系统捕获在本系统的系统分析过程中，采用面向对象分析方法，首先要找到构成这个系统的对象，描述其它们的职责，确定它们之间的交互。斑竹村电子商务系统是根据斑竹村的实际需求来设计的，斑竹村电子商务系统的功能性需求包括以下内容：商品展示：本系统主要是展示商品，并提供购买支付等。所以商品考虑到用户会继续浏览喜爱的产品，设置了购物车的功能，可将喜欢的产品先发乳购物车，在选择喜爱的产品结束后，统一在购物车执行结算的操作，完成一次支付操作。当然也考虑到用户只购买一个产品，也可以选择直接购物，机会跳转至支付页面。当用户选择购买产品后，为了保证用户还可以再一次查看到自己购买的历史记录，本系统也提供了查看历史订单的功能模块，保证用户卡伊查询到一定时期内的购买产品详情等。加精的分享可以得到商家的补贴。同时也可以倒逼商家提高自己的产品质量和服务质量，如一旦确定分享的事情是真实的，将会对对象的商家进行一定的处罚，并给予用户补偿以及相应的奖励，达到一个良好的交易环境和氛围。时候需要选择收货地址，这就需要一个预设收货地址的功能，并且随时可以更改或者添加收货地址。在用户购买完毕产品后，有可能将其分享出去，就设置了分享中心的功能，而在个人中心当中，显示为本用户自从帐号创立开始到查看分享的这一时间段内的所有分享记录，并且以时间轴的方式记录，方便用户根据时间查看分享详情。对产品进行相应的促销等活动也是有必要的，这可以提升产品的销量以及相关的知名度，发布活动的功能就是按照这样设计的，同时在活动结束以后，也是可以对其进行删除操作，或者对某个活动执行编辑修改的操作，当活动时间过期后，会将过期的活动放在“过往活动”的页面之中，方便商家查看和管理以ID必不可少的同时也可以查询关键词找到目标商家。当然，当商家提供了入住申请后，对其资质进行分析以后，便可以对添加商家了，将商家的基本信息添加到数据中，然后商家便可以登录商家管理的后台了。当然在与商家合作的这段时间内，商家可能会违规或者其他原因，就需要对其进行停止合作的操作，这个时候的商家管理系统的部分操作是无法进行的。当处理完毕后续的任务后，便删除此账号。行适当的封禁操作，具体根据情况而定。管理员商品管理：对于商家发布的商品，平台也会对其进行一定的排查，不符合规定的产品，将会面临下架的处理，并且对相应的商家进行一定的处罚（视情节而定台会根据季节、产品质量等其他因素的综合考虑，对该产品进行推荐的操作，将其发布到首页，用户一进入平台即可看见。同时，也有订单详情的功能，主要是当用户和商家在订单产生了分歧时，平台会根据本次订单来仲裁。通过上述步骤的分析，捕获本系统的需求，如表1所示。表1需求特性表编号编号说明FEAT01 用户注册账号，包括性别、账号、姓名、登录密码、联系电话等FEAT02 用户可以登录账号，包括账号、密码FEAT03 用户可以购买产商品，将产品加入购物车FEAT04 用户可以下单，付款FEAT05 用户可以分享自己购买的商品FEAT06 用户可以注销自己的账户FEAT07 商家可以发布自己的商品，包括产品标题、类别、图片、数量等等FEAT08 商家可以修改自己发布的商品信息，以及更改其现有状态FEAT09 商家可以删除自己已经发布的商品FEAT10 商家可以根据用户的需求，在订单快递发货之前更改订单配送地址等信息FEAT11 商家可以删除已经完成或者无效的订单FEAT12 商家可以发布、修改、删除商品相应促销活FEAT13 超级管理员可以查看商家以及上架的产品FEAT14 超级管理员可以添加商家信息FEAT15 超级管理员可以更改商家信息FEAT16 超级管理员可以删除商家的信息，对其进行帐号注销FEAT17 超级管理员可以查看已经生成的订单信息，并通过此信息对相应的商家进行处理浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现续表FEAT18FEAT19FEAT20FEAT21FEAT22FEAT23FEAT24FEAT25

超级管理员可以删除无效的订单超级管理员可以修改订单的部分信息，如配送地址、收件人信息等超级管理员可以查看普通用户的注册信息超级管理员可以对普通用户的帐号进行状态分类超级管理员可以查看用户分享的商品评论等超级管理员可以对用户分享的商品评论进行加精处理超级管理员可以对用户分享的商品评论进行删除处理系统概念模型的建立对系统的各个模块进行了需求分析以后，进行类图建模。类图创建工作包括创建类，其次确定属性和操作；最终将类与类之间的关联、依赖、继承、聚合关系在图中表示出来，就得到类图。系统的总类图如图1所示。图1系统总类图7浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现系统用例模型的建立构建了概念模型之后，需要通过用例分析描述类之间的交互关系，即创建系统的用例模型，为描述系统的用户或参与者所能操作的模型，它在需求分析阶段有着重要的作用，整个开发过程都围绕系统的需求用例表述的问题和问题接下来就是仔细得检查参与者，为每一个参与者确定用例（特性合并用例，见2。其中的依据主要可以来源于已经获得的需求特征表。表2特性合并成用例参与特性者FEAT01.用户注册账号，包括性别、账号、姓名、登录密码、联系电话等FEAT02.用户可以登录账号，包括账号、密码

用例UC01登录系统普通 FEAT03.用户可以注销自己的账用户FEAT04.用户可以购买产商品，将产品加入购物车FEAT05.用户可以下单，付款FEAT06.FEAT07.商家可以发布自己的商品，包括产品标题、类别、图片、数量等等FEAT08.商家可以修改自己发布的商品信息，以及更改其现有状态FEAT09.商家可以删除自己已经发布的商品商家 FEAT010.商家可以根据用户的需求，在订单快递发货之前改订单配送地址等信息FEAT11.商家可以删除已经完成或者无效的订单FEAT12.商家可以发布、修改、删除商品相应促销活动FEAT13.超级管理员可以查看商家以及上架的产品超级 FEAT14.超级管理员可以添加商家信管理员 FEAT15.超级管理员可以更改商家信息FEAT16.超级管理员可以删除商家的信息，对其进行帐号注销

UC02购买商品UC03分享商品UC04管理UC05管理UC05管理UC06品管理UC07家管理8浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现续表FEAT17超级管理员可以查看已经生成的订单信息，并通过此信息对相应的商家进行处理FEAT18.超级管理员可以删除无效的订单FEAT19超级管理员可以修改订单的部分信息，如配送地址、收件人信息等FEAT20.超级管理员可以查看普通用户的注册信息FEAT21.超级管理员可以对普通用户的帐号进行状态分类FEAT22.FEAT23.超级管理员可以查看用户分享的商品评论等FEAT24.理FEAT25.理

UC08单管理UC09户管理UC10享管理19与参与者之间的关系，可以绘制出用例模型，斑竹村电子商务系统用例图（2。9浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现图2斑竹村电子商务系统用例图系统用例规格描述和交互模型的建立当完成用例图后，在需求建模的初期阶段还应该对每一个用例编写一个规格描述，说明该用例的功能，然后根据用例规格描述画出活动图。下面就分析该系统的用例规格描述及交互模型。登录系统（3）表3用例“登录系统”规格描述

UC01登录系统用户需填写信息进行注册登录操作，获得相应的权限后才能访问系统。首次使用系统的用户须进行注册操作。所有用户系统运行正常系统保存用户的账号信息，不同的用户进入不同的页面基本事件流 步1234扩展事件流 1a1a11a21a31a3a3a规则与约束 无

活动用户进入系统的首页，输入用户名、账号点击“登录”按钮系统通过登录许可审核系统页面显示相对应的操作页面用户点击“注册”按钮系统跳出注册页面填写注册信息，并提交信息；系统通过注册许可审核注册失败，显示失败原因，返回1a1定”按钮，返回重新输入账号密码，转向1UC01登录系统：活动图中用户可发送登录注册请求，在注册过程中需填写注册信息，若注册信息有误，系统会显示注册失败，须重新注册直至成功。在登录过程中，输入正确的用户名、密码。用户在注册成功后，系统会添加用户的信息；如果注册失败，系统管理员会填写审核失败原因。如果用户注册成则无法获取权限以及操作。以下是登录系统的活动图（3。10浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现图3登录系统活动图购买商品（4）表4用例“购买商品”规格描述

UC02购买商品用户在浏览商品后，可以选择直接购买然后付款，同时也可以先将商品加入购物车，然后在购物车对选中的商品进行下单付款。所有用户系统运行正常系统将用户的订单存入数据库，方便用户、商家以及管理员查看基本事件流 步12

活动用户浏览商品选择商品1浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现续表3添加订单4付款扩展事件流1a1a1用户点击“立即购买”按钮系统跳入订单页面1a2在选择配送信息后选择付款1b1b1用户点击”加入购物车”按钮用户到购物车页面选择购买的商品1b3系统跳转1a1规则与约束无UC02单页面，同样选择地址等，提交订单，支付金额。以下是购买商品活动图（3：图3购买商品活动图12浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现分享商品

表4用例“分享商品”规格描述用例编号用例名称用例概述主参与者前置条件后置条件

UC03分享商品所有用户系统运行正常用户分享的内容会在”分享中心”显示基本事件流 步123扩展事件流 1a1a11a21a3规则与约束 无

活动输入评价的内容发送至分享中心用户选择已收货的商品，点击“评价”系统跳转是输入评价内容页面填写评价内容，点击“确认评价”系统将评价的内容发送至分享中心UC03以下是分享商品的活动图（4：图4分享商品活动图13浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现

表5用例“商家商品管理”规格描述

UC04商家商品管理商家在登录后，可以上架新的商品、下架商品以及执行删除商品、修改商品等操作。所有用户系统运行正常当商家执行了上下架商品等操作以后会重新刷新全部商品列表基本事件流 步1234扩展事件流 1a1b1b11b21b31b41c规则与约束 无

活动商家登录商后台管理系统选择商品管理执行上下架、删除、修改商品等操作系统刷新商品列表点击商品管理UC04所以商家在商家管理后台可以进行商品的上架、下架、删除、修改等操作。当执行相应的操作以后，前台用户页面查询到的商品也会进行相应的变化。以下商家商品管理活动图（5：14浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现

图5商家商品管理活动图表6用例“商家订单管理”规格描述

UC05登录系统用户需填写信息进行注册登录操作，获得相应的权限后才能访问系统。首次使用系统的用户须进行注册操作。所有用户系统运行正常系统保存用户的账号信息，不同的用户进入不同的页面基本事件流 步123

活动用户进入系统的首页，输入用户名、账号点击“登录”按钮系统通过登录许可审核15浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现续表4 系统页面显示相对应的操作页面扩展事件流 1a1a11a21a31a3a3a规则与约束 无

用户点击“注册”按钮系统跳出注册页面填写注册信息，并提交信息；系统通过注册许可审核注册失败，显示失败原因，返回1a1定”按钮，返回重新输入账号密码，转向1UC05（图6商家订单管理活动图16浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现

表6用例“商家活动管理”规格描述

UC06商家活动管理删除等操作。所有用户系统运行正常商家活动操作完成后，会刷新活动列表，同时在前台显示活动基本事件流 步123扩展事件流 1a1a11a21a31b规则与约束 无

活动点击活动管理刷新活动列表商家点击“活动管理”点击“全部活动”，刷新活动信息UC06售，同时可以修改和删除活动。以下是商家活动管理活动图（7：17浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现管理员商家管理表7用例“管理员商家管理”规格描述

UC07管理员商家管理管理员通过商家管理，可以添加商家信息，修改商家信息，同时还可以删除商家。所有用户系统运行正常商家可以登录商家后台，发布商品基本事件流 步1234扩展事件流 1a1a11a21a31b1c规则与约束 无

活动管理员登录后，点击“商家管理”管理员进行添加、删除、修改商家信息的操作商家列表刷新商家登录商家后台管理员点击“商家管理”管理员修改商家信息管理员删除商家信息管理员点击“商家管理”，刷新商家信息商家在后台登录页面输入登录信息，进入商家管理后台页面UC07以下是管理员商家管理活动图（8：图8管理员商家管理活动图18浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现管理员订单管理表8用例“管理员订单管理”规格描述

UC08管理员订单管理或者删除订单。所有用户系统运行正常显示更改完毕后的订单信息基本事件流 步123扩展事件流 1a1a11a1a1a21b规则与约束 无

活动管理员点击“订单管理”管理员执行修改或者删除等操作管理员点击“订单管理”管理员点击“修改”按钮管理员输入修改的内容刷新订单页面UC08理员订单管理活动图（9：图9管理员订单管理活动图19浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现管理员用户管理表9用例“管理员用户管理”规格描述用例编号用例名称用例概述主参与者前置条件后置条件

UC09管理员用户管理管理员对注册的用户进行修改、删除、更改状态等操作所有用户系统运行正常基本事件流 步123扩展事件流 1a1a11a1a1a21a31a3a1b规则与约束 无

活动管理员点击“用户管理”管理员进行修改、删除、更改状态等操作用户页面刷新用户信息管理员点击“删除”按钮管理员点击“更改状态”按钮刷新用户信息UC09根据用户的使用记录，可以对用户进行操作，例如注销，修改信息，修改状态等等。以下是管理员用户管理活动图（10：图10管理员用户管理活动图20浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现管理员分享管理表10用例“管理员分享管理”规格描述用例编号用例名称用例概述主参与者前置条件后置条件

UC10管理员分享管理管理员可以对用的分享进行删除、加精等操作所有用户系统运行正常基本事件流 步123扩展事件流 1a1a11a21a3规则与约束 无

活动点击“分享管理”刷新分享列表刷新分享列表UC10精处理。以下是管理员分享管理活动图（1：图11管理员分享管理活动图21浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现3系统设计系统结构设计根据需求分析，对本系统进行了系统结构分析。系统活动图根据系统需求分析，对系统做了以下的系统活动图：订单管理活动图用户在购买商品后，生成相应的订单，商家可以通过后台修改用户的订单那么商家在修改用户信息后，用户的页面会显示修改完成后的订单信息。用户在确认自己的订单信息后，商家才会选择发货，在发货以后，商家会更新物流信息或者用户也可以凭借订单的物流快递号自行查询（5。图5订单管理活动图2浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现商品管理活动图已经上架的产品（6。图6商品管理活动图23浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现用户登录注册活动图成功，如果不正确则提示错误信息（7。图7用户登录注册活动图24浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现PAGEPAGE26系统顺序图用户登录顺序图"tor心诅叩鲨录口 三 芒;.i;：1:_';.i;：1:_'111l;I隘柔共!!!I

: 3吐录弓 ··;话西..．::::::荼6五回登柔纬呆

红（豁号王码）图8用户登录顺序图用户注册顺序图:i<:::·········一．．．一一血...一．一一:i<:::·········一．．．一一血...一．一一2显示注册函口

主景富口 二［这扭共ill]

.J莹

4：好·密码，用

l;．了雪...雪雪...匡雪._._. 霄..雪1．罚注册结帛

B返回迁丹结果，！图9用户注册顺序图订单管理顺序图； 三

三 三 口;!气;2示订垃护召口，:1 i＇； ＇I．3也正單七 iI即订单鲨司嘘;··;;;;;;』9至 111| B凹宜呻

一，_＿＿＿＿＿＿＿＿＿+--－"：!，！ ： ： 妇 岫删肛咙:l : :！ ： ： 勹 2叩柄气 ，;1，谕I勹 2叩柄气 ，：1貊订单喇院』叩劂叩忭 迳I吐：1貊订单喇院』叩劂叩忭 迳I吐;眨 预』：i i：：图10订单管理顺序图商品管理顺序图

·「""'．l | -·

．；l，Il, 1入“心I•，l，

';- - u.- -,...．-··一...一·一·········-····L ·. 一; 1 · 1

1 1, ：,·霞··霞·阖；一一一一一一一一一一一一一一 一一一一一一一一一一一一 一一 一－－－－－－－－－－－－－－－－－ －－－－－－－－－－－

：． ：i:已、一已

，伈扣叮“`'， 文·如虹

;..一图11商品管理顺序图浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现购物车顺序图图12购物车顺序图支付顺序图图13支付顺序图系统类图根据系统设计分析，系统基本需求有以下几个类（14：brithday，mail，phone，IDcard，age，address，createtime，Identity，以及下面几个共有方法：submitFormd，loginOut。（2）gl_table,管理员类。拥有以下几个私有属性：id,name,pwd,datestart,dataend,phone,以及下面几个共有方法：insert，remove，updata，search，description，addcar，submitFormd，loginOut，add。sj_table,商家类。拥有以下几个私有属性：id，name，pwd，phone，27浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现datestart,dateend,name_fz，address，以及下面几个共有方法：insert，remove，updata，search，description，addcar，submitFormd，loginOut，add。rbigimg,specifiption,descriptiongoodsSttupdat，searc，description，addca。createtime,img,state，以及下面几个共有方法：add，delete，updata，searchrecommend,recommend_cancel。，name,img,price，goods_id,createtime,state,以及下面几个共有方法：add，deleteupdata，search。图14类图28浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现PAGEPAGE32功能模块设计根据系统功能结构设计，可以对本系统进行一定的功能模块设计。商品模块用户页面本功能在用户页面分为两个页面，一个是首页，首页是对部分产品进行一swiper（轮播，显示一个产品，当然还有其相应的部分详细说明以及参数；最后是小图，推荐3个产品，可根据显示器的分辨率显示其每个产品所占据位置的大小。其次就是产品搜索页面，在这个页面，你可以通过顶部菜单栏的分类到达这个页面，也可以是直接在首页输入想要搜索的内容到达这个页面，此页面可比如，根据价格升序或者降序、销量或者发布时间来排序，或者用户想要的结销量等相关信息。同时使用户懒加载的方式渲染页面，当搜索的结果大于此页面的显示结果超，便会选择分页，点击页数或者下一页便可以查看相应页数的产品了。商家管理后台在商家管理后台中，商品功能主要为添加商品，下架商品，搜索商品以及修改商品。采用elementui框架，动态添加商品信息到数据库中，在前端刷新即可拿到新的数据。下架商品是将在售的商品添加到未上架商品的功能当中，当然在添加商品的时候，也会有相应的操作，选择是否是立即上架商品，选择否的时候，会将产品放入未上架商品的功能当中。而搜索商品，在在售商品或者是未上架商品都可以使用，在input输入框中输入自己想要查询的关键词，通过判断是否匹配数据库中的相应字节，返回匹配的数据显示在页面当中。而修改商品则是只能对未上架的商品进行相应的相关信息修改，已经上架的商品不能进行相应的修改商品属性等相关信息。网站管理后台网站管理后台的商品模块主要为查看商品列表以及详情，查询商品，下架商品，推荐商品到首页以及订单详情。商品的显示以及订单页面的显示都是通品到首页都是对应商品的操作栏进行操作的，而这个操作的事件是用buttonIDID的商品进行相应的进入相应的订单详情页面。订单模块用户页面用户页面的订单功能分为两个部分，一个是用户在购买商品的时候选择商品，支付的时候的页面，这个时候需要用户填写送货地址，送货时间，签收人等基本信息，同时也需要用户确认其购买的商品的详情信息，比如价格，数量等等。整个页面以简约风格为主，同时配合相应的按钮风格，凸显明亮轻快的视觉风格。tab选项卡的方式实现页面的几个页面，显示订单的几个详细状态。商家管理后台针对商家的订单模块，商家在点击进入订单页面的时候，第一时间显示的就是所有的订单情况，按照时间的顺序来显示，订单生成的越晚，显示的越前面。针对商家想要查找的订单，同样可以在input框输入想要查询的文字，然后在数据库匹配相应的数据，显示在页面。在每一个订单的后面都会有一个操作的板块，可以对相应的订单进行操作，删除订单以及修改订单，同样是用button按钮来实现点击事件。用户模块用户页面tab选项卡的方式实现页面input填写文本，将新的文本覆盖就的文本即可，修改个人资料也是如此。网站管理后台这里的用户模块分为两个部分，第一个就是对整个系统的普通用户进行管理。可以查看现有的用户数量，查看用户的基本信息。同样也可以修改用户的某些基本信息，也可以对用户执行一定的操作，比如用户在违规之后，会对用户的操作进行限制，部分功能暂停使用，当封禁的时间过去了以后，才允许用户使用被暂停的功能。其次就是整个系统的商家用户进行管理，和普通用户一样，可以之间查看所有的商家用户的数量以及基本信息，同时也可以对其详细信息进行修改，当然查询指定的商家也是可以得。同时还有添加商家信息的功能，这同样也是采forminput标签，使用submit候即可查询到新增加的商家。在商家的合作时间到期或者商家违反了相关的条约，平台会对商家实行一定的封禁或者直接停止合作，将其说有的产品全部下架处理，同时删除其帐号。分享模块用户页面用户页面的分享功能主要也是分为两个部分，其中一个部分就是专门开设的分享功能中心，所有人发布分享信息都将会显示在这里，供大家观看以及评论参考。这里的布局使用的是双飞翼布局，中间是主要的内容页面，左边是推荐的分享内容，右边是个人信息等等。用户发表自己的分享时，所用到的编辑器是富文本编辑器，同时还可以上传图片等功能。另外一个就是个人中心里面的按照时间顺序实现的时间树分享。这里可以查看自己所有发布的分享文章，根据时间进行筛选。通过时间树来显示，显得更为直观。网站管理后台在用户页面有分享功能，当然在后台管理的时候也需要对其进行管理。和商品订单等都是一样的通过表格和栅格化布局实现的显示，显示主要的基本信息，同时在最后面还有操作的选项，可以对其进行删除或者加精等操作。同时点击分享的标题还可以进入分享文章的详情页，可以正式的浏览文章的主要内容，从而判断文章是否符合标准，从而进一步对文章进行操作。数据库设计每一个系统都会有一个详细数据库，用于存储数据，前端的数据显示就是通过请求链接，通过后端的数据库连接，拿到数据库的数据，从而对前端的页面进行刷新渲染显示的。概念结构设计通过对用户的需求分析，以及电子商务系统的设计蓝图，主要有以下数据项：普通用户表（用户编号、用户名称、用户密码、创建日期、性别、出生日期、年龄、身份证号、手机号、E-mail、头像，配送地址）商家用户表（商家编号、商家名称、商家密码、合作开始日期、合作结束日期、商家负责人、商家负责人联系方式、商家地址）分享文章表（文章编号、文章标题、文章投稿人、文章创建时间、文章正文、文章图片、文章状态）商品表（商品编号、商品对应商家编号、商品标题、商品图片、商品价格、商品详细描述、商品规格、库存、商品状态）订单表（订单编号、订单对应商家编号、订单详情、配送地址、收货人、联系方式、订单日期，订单状态）逻辑结构设计E-R图：在本电子商务系统当中，用户可以浏览商品以及购买商品，在购买商品后会生成相应的订单。各实体之间的关系如下：每个用户可以浏览多个商品，同一个商品也可以被多个用户浏览。每个用户可以购买多个商品，同一个商品也可以被多个用户购买。每个用户可以拥有多个商品，但是一个订单只能属于一个用户。E-R图如下图所示（15：浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现15普通用户—商品—订单的E-R图E-R图：在本电子商务系统当中，每个用户可以拥有多个收货地址，每一个订单也会配送到相应的收货地址。各实体之间的关系如下：每个用户可以拥有多个收货地址，但是一个收货地址对应一个用户。每个用户可以拥有多个订单，但是一笔订单只能是属于一个用户。E-R图如下图所示（16：16普通用户—商品—订单的E-R图3浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现PAGEPAGE35数据表设计根据本系统的需求分析，部分功能所涉及的数据表如下：（1）普通用户表设计如表1所示：表1普通用户表序号名称 类型允许为空描述1id int否ID2name varchar否用户昵称3pwd varchar否用户密码4sex varchar是用户性别5birthday varchar是用户出生年月6mail varchar否用户邮箱7phone varchar否用户手机号8IDcard varchar否用户身份证号9age int是用户年龄10head varchar是用户头像11address varchar是用户收货地址12（2）createtime datetime商家用户表设计如表2所示：否用户创立时间表2商家用户表序号名称 类型允许为空描述1id int否商家编号2name varchar否商家名称3pwd varchar否商家登录密码4datestart varchar否开始合作时间5dataend varchar否截止合作时间6name_fz varchar否负责人姓名7phone varchar否负责人手机号8address varchar否商家地址（3）分享文章表设计如3所示：表3分享文章表序号名称 类型允许为空描述1id int否文章编号2title varchar否文章标题3author varchar否文章作者4createtime datetime否文章创建时间5content varchar否文章正文6img varchar是文章图片7（4）state varchar商品表设计如4所示：否文章状态表4商品表序号名称 类型允许为空描述1id int否商品编号2title varchar否商品标题3price int否商品价格4number int否商品库存5bigimg varchar否商品图片6specification varchar否商品规格7description varchar否商品描述8（5）goodsStr varchar订单表设计如5所示：否商品类别表5订单表序号名称 类型允许为空描述1id int否订单编号2address varchar否订单送货地址3phone varchar否联系方式4createtime datetime否订单创建时间5name varchar否收货人6goods_id varchar否商品编号7state varchar否订单状态浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现系统实现登录注册功，即可登录（17。图17用户登录图实现登录的关键代码如下：importQsfromexportdefault{name:"login",data(){varcheckPwd=(rule,value,callback)=>if(value===""){callback(newError("请输入密码"));console.log(this.ruleForm);}else{if(this.ruleForm.pwd.length<6){callback(newError("密码长度应大于6位数"));}callback();}};return{radio:"1",36浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现nameorange",ruleForm:{usernamepwd:""},rules:{username:[{required:true,message:"请输入用户昵称",trigger:"blur"}],pwd:[{required:true,validator:checkPwd,trigger:"blur"}]}};},methods:{toindex(){this.$route.push{pat:/"});location.reload();//this.$router.go(0);},submitForm(formName){this.$refs[formName].validate(valid=>{letdata={username:this.ruleForm.username,pwd:this.ruleForm.pwd};if(valid){this.$axios({url:"/php/login.php",method:"post",data:Qs.stringify(data)}).then(res=>{console.log(res);if(res.data==true)this.$messag({showClose:true,messag:欢迎${this.ruleFor.usernam}成功登录！`,type:"success"});//将用户名放入sessionStoragelocalStorage.setItem("username",this.ruleForm.username);//将用户名放入vuex中37浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现this.$mit("userStatus",this.ruleForm.username);setTimeout(this.toindex,3000);}else{this.$message({showClose:true,message:`用户昵称或者密码输入错误！`,type:"error"});console.log("登录失败");}}).catch(error=>{console.log(error);});}else{returnfalse;}});},resetForm(formName){this.$refs[formName].resetFields();}}};当用户没有用户名和密码的时候，需要注册，同时也会在输入信息的时候用户便可以登录系统（18。图18用户注册图38浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现PAGEPAGE40实现注册的关键代码如下：exportdefault{name:"login",data(){varcheckPwd=(rule,value,callback)=>if(value===""){callback(newError("请输入密码"));}else{if(this.ruleForm.pwd.length<6){callback(newError("密码长度应大于6位数"));}elseif(this.ruleForm.checkPwd!==""){}callback();}};varcheckPwd2=(rule,value,callback)=>if(value===""){callback(newError("请再次输入密码"));}elseif(value!==this.ruleForm.pwd){callback(newError("两次输入密码不一致!"));}else{callback();}};varcheckPhone=(rule,value,callback)=>if(value===""){callback(newError("请输入手机号"));}elseif!^345678\{9/tesvalu)&&valu.length!=1){callback(newError("请输入正确的手机号，手机号开头为1，第二位不能为2，总长度为11位"));}else{callback();}};return{radio:"1",name:"橘子orange",ruleForm:{username:"",pwd:"",checkPwd:"",sex:"男",birthday:"",phone:""},rules:{username:[{required:true,message:"请输入用户昵称",trigger:"blur"}],pw:{require:tru,validato:checkPwd,trigge:blu",checkPw:{require:tru,validato:checkPwd,trigge:blur",se:{require:tru,messag:",trigge:blu",birthday[{required:true,message:"请选择出生日期！",trigger:"blur"}],phone:[{required:true,validator:checkPhone,trigger:"blur"}]}};},methods:{toindex(){thi.$route.pus{pat:"});},submitForm(formName){this.$refs[formName].validate(valid=>{if(valid){thi.$axio{url:"/login.php",method:"post",data:{username:this.ruleForm.username,pwd:this.ruleForm.pwd}}).then(()=>{this.$message({showClose:true,message:`注册成功`,type:"success"});setTimeout(this.toindex,3000);});}else{浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现this.$message({showClose:true,message:`请填写完毕注册信息！`,type:"error"});returnfalse;}});},resetForm(formName){this.$refs[formName].resetFields();}}};商品模块用户界面品均为推荐的商品，用户可在首页查看商品（1920。图19首页产品图141浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现图20首页产品图2实现关键代码如下：exportdefault{name:"goods",data(){return{radio1:radio2:"1",radio3:"2",activeNames:["1"],dynamicTags:[],inputVisible:false,inputValue:"",goodsName:"",goodsData:""};},42浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现mounted(){if(this.$store.state.havegoods==false){this.$axios({url:"/php/indexSearch.php",method:"get",params:{goodsStr:localStorage.getItem("goodsName")}.theres=>{this.goodsName=localStorage.getItem("goodsName");localStorage.setItem(this.goodsName,JSON.stringify(res.data.data));this.goodsData=JSON.parse(localStorage.getItem(this.goodsName));});this.$mit("goodsStatus",true);}else{this.goodsData=JSON.parse(localStorage.getItem(localStorage.getItem("goodsName")));console.log(this.goodsData);}},methods:{handleClick(e){if(e.target.nodeName.toLowerCase()==="span"){consttext=e.target.innerText;console.log(text);this.dynamicTags.push(text)this.dynamicTags=Array.from(newSet(this.dynamicTags))}},handleClose(tag){this.dynamicTags.splice(this.dynamicTags.indexOf(tag),1);},handleInputConfirm(){letinputValue=this.inputValue;if(inputValue){this.dynamicTags.push(inputValue);}this.inputVisible=false;this.inputValue="";}}}分类商品页面是根据不同的商品进行分类的，方便用户查看，当然用户在点击搜索商品的时候，搜索结果也是呈现在这个页面的，页面只有一个，但是43浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现不同，显示的结果也不同（21。图21产品分类页面实现关键代码如下：exportdefault{name:"goods",data(){return{radio1:"1",radio2:"1",radio3:"2",activeNames:["1"],dynamicTags:[],inputVisible:false,inputValue:"",goodsName:"",goodsData:"",url:"http://localhost:8080/"};},mounted(){if(this.$store.state.havegoods==false){this.$axios({url:"/php/indexSearch.php",method:"get",params:{goodsStr:localStorage.getItem("goodsName")}.theres=>{console.log(res);this.goodsName=localStorage.getItem("goodsName");localStorage.setItem(this.goodsName,JSON.stringify(res.data.data));4浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现thisthis.goodsData=JSON.parse(localStorage.getItem(this.goodsName));});this.$mit("goodsStatus",true);}else{this.goodsData=JSON.parse(localStorage.getItem(localStorage.getItem("goodsName")));console.log(this.goodsData);}},methods:{handleClick(e){if(e.target.nodeName.toLowerCase()==="span"){consttext=e.target.innerText;console.log(text);this.dynamicTags.push(text);this.dynamicTags=Array.from(newSet(this.dynamicTags));}},handleClose(tag){this.dynamicTags.splice(this.dynamicTags.indexOf(tag),1);},handleInputConfirm(){letinputValue=this.inputValue;if(inputValue){this.dynamicTags.push(inputValue);}this.inputVisible=false;this.inputValue="";}}}商家页面商家页面的商品模块主要为商品的发布和查看两个功能。商家通过发布商会通过基本的验证，当验证成功后，才可以发布商品（22。45浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现图22发布商品图关键代码如下：importEditorfrom"@/universalComponents/editor.vue";exportdefault{name:"releaseproduction",data(){return{ruleForm:{title//商品名称specification//num1//商品数量price0//商品价格dialogImageUrl//dialogVisiblefalse,delivery:false,type:[],resource:"",desc:""},rules:{name:[{required:true,message:"请输入商品名称",trigger:"blur"},{min:3,max:5,message:"长度在3到5个字符",trigger:"blur"}],region:[{required:true,message:"请选择活动区域",trigger:"change"}],date1:[{type:"date",46浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现浙江万里学院物流与电子商务学院斑竹村电子商务系统设计与实现PAGEPAGE48required:true,message:"请选择日期",trigger:"change"}],date2:[{type:"date",required:true,message:"请选择时间",trigger:"change"}],type:[{type:"array",required:true,message:"请至少选择一个活动性质",trigger:"change"}],resource:[{required:true,message:"请选择活动资源",trigger:"change"}],desc:[{required:true,message:"请填写活动形式",trigger:"blur"}]}};},components:{Editor},methods:{handleRemove(file,fileList){this.fileList=fileList;//console.log(fileList);this.$message({type:"info",message:"已删除原有图片",duration:1000});},handlePictureCardPreview(file){this.dialogVisible=true;this.dialogImageUrl=file.url;consoleconsole.log(this.dialogImageUrl);console.log(this.dialogVisible);},handleChange(file,fileList){this.fileList=fileList;},submitForm(formName){this.$refs[formName].validate(valid=>{console.log(valid);if(valid){alert("submit!");}else{console.log("errorsubmit!!");returnfalse;}});},resetForm(formName){this.$refs[formName].resetFields();}}};商家在发布商品以后，根据商家的具体操作，商品会显示在未上架或者已进行商品信息的修改（23。浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现图23全部商品图关键代码如下：import{scrollTo}from"@/utils/scroll-to";exportdefault{name:"allGoods",data(){return{search:"",tableData:[],total:1000,//默认数据总数pagesize10//每页的数据条数currentPage:1//默认开始页面};},//components:{Pagination},created(){this.$axios({url:"/php/allGoodsSearch.php",method:"get"}).then(res=>{console.log(res);this.tableData=res.data.data;this.total=res.data.data.length;});},methods:{current_change:function(currentPage){this.currentPage=currentPage;if(this.autoScroll){scrollTo(0,800);}49浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现}}};订单模块用户页面单的情况（24。图24订单图关键代码如下：this.$axios({method:"get",url:"/php/orderSearch.php".theres=>{constdata=res.data.data;for(leti=0;i<data.length;i++){constdataItem=data[i];conststate=dataItem.state;if(state==0){this.firstOrder.push(data[i]);//console.log(this.firstOrder);}elseif(state==1){this.secondOrder.push(data[i]);//console.log(this.secondOrder)}elseif(state==2){this.thirdOrder.push(data[i]);50浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现}else{this.fourthOrder.push(data[i]);}}});商家页面意后，可以修改其基本信息，比如帮助用户修改配送地址（25。图25订单图关键代码如下：import{scrollTo}from"@/utils/scroll-to";exportdefault{name:"allOrder",data(){return{search:"",tableData1:[],total:1000,//默认数据总数pagesize10//每页的数据条数currentPage:1//默认开始页面};},//components:{Pagination},created(){this.getList();},methods:{51浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现getList(){this.$axios({url:"/php/orderSearch.php",method:"get",}).then(res=>{console.log(res);this.tableData1=res.data.data;this.total=res.data.data.length;});},current_change:function(currentPage){this.currentPage=currentPage;if(this.autoScroll){scrollTo(0,800);}}}};分享模块用户页面用户在购买商品之后，可以在系统平台上发布有关购买商品的实际体验的户自己至今发布的分享帖子，同样也可以在分享中心看到全部的分享帖子（26。图26个人分享中心关键代码如下：52浙江万里学院物流与电子商务学院 斑竹村电子商务系统设计与实现this.$axios({method:"get",url:"/php/articleSearch.php".theres=>{//console.log(res)this.shareData=res.data.data;console.log(this.shareData);});超级管理员页面用户群体，管理员对每一个分享帖子的仔细分析是十分有必要的（27。图27管理员分享图关键代码如下：import{scrollTo}from"@/utils/scroll-to";exportdefault{name:"allShare",data(){return{search:"",tableData1:[],total:1000,//默认数据总数pagesize10//每页的数据条数currentPage:1//默认开始页面};},//component