基于Vue框架积木网上商城的设计与实现.docx

《基于Vue框架积木网上商城的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于Vue框架积木网上商城的设计与实现.docx（56页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、基于Vue框架积木网上商城的设计与实现摘要：随着物资生活逐渐完善的今天，许多家庭越来越重视儿童的教育问题，儿童的智力发育问题渐渐受到大家的关注和重视，如何让儿童身心得到健康发展是很重要的社会问题。科学研究认为5-8岁是少儿的智力发展的重要阶段，在这个阶段之中益智玩具是儿童智力开发的手段之一，把游戏当做一种教育，将教育跟娱乐结合在一起，会有更好的效果。查看相关的网络调查报告和根据2017-2019年网购数据分析，积木类益智玩具成为了家长和少儿教育机构的首要选择对象，对儿童的智商能力开发上能起到很大的帮助作用，同时能增强家长或者少儿教育机构与儿童之间的互动。所以开发一个积木网上商城发展前景巨大，能

2、让社会上有需要的人带来很好的平台。使用2016年5月份发布的Vue.js2.0前端渐进式Javascript框架1加上elementUI框架来作为项目的开发平台。Vue框架针对如今多屏分辨率不统一的趋势下，能更有效率地响应不同设备之间分辨率的差异化适应，同时实现前端与后端的代码分离，大大地提高了前后端的开发速度和分清开发职责；elementUI框架是如今在Vue平台上支持度较高的UI框架，组件显示美观，同时使用方便。使用vscode作为本项目的开发工具，它的优点在于开发界面非常简洁、使用方便并且具有代码纠错提示。对本系统进行需求分析和详细设计，通过技术开发系统的功能和界面完成本项目的开发，最后

3、对各个功能模块进行测试和优化。基于Vue框架积木网上商城是针对儿童开发智力，方便家长和少儿教育机构挑选和购买积木玩具所开发的一套网上商城系统，本商城与现在网络上的商城具有特色的地方在于，积木网上商城专营各种积木类益智玩具，面对市面上参差不齐的积木商品，材质和安全性得不到保障的情况下，本商城专营积木玩具商品，最大的特点就是保障其商品安全性，经过人工筛选才会上架，提供适合不同年龄段的儿童的积木玩具商品。关键词：Vue框架，积木网上商城，开发智力 Design and implementation of building block online shopping mall based on Vue

4、 frameworkAbstract：With the gradual improvement of material life today, many families are paying more and more attention to childrens educational issues, and childrens intellectual development is gradually receiving everyones attention and attention. How to allow children to develop healthily is an

5、important social issue. Scientific research believes that 5-8 years old is an important stage of children s intellectual development. In this stage, educational toys are one of the means of children s intellectual development. Taking games as an education, combining education and entertainment, ther

6、e will be Better results. Viewing relevant online survey reports and analysis of online shopping data from 2017 to 2019, building block educational toys have become the primary choice for parents and children s educational institutions, which can greatly help children s IQ development. Can enhance t

7、he interaction between parents or childrens educational institutions and children. Therefore, the development of a building block online shopping mall has huge development prospects, which can bring a good platform to those in need in the society.The Vue.js2.0 front-end progressive Javascript framew

8、ork1 released in May 2016 plus the elementUI framework was used as the development platform for the project. The Vue framework is more responsive to the different resolutions of different devices in response to the trend of todays multi-screen resolution is not uniform, and at the same time realizes

9、 the separation of front-end and back-end code, greatly improving the development speed and separation of front-end and back-end Development responsibilities; elementUI framework is a UI framework with a high degree of support on the Vue platform. The components display beautifully and are easy to u

10、se. Using vscode as the development tool for this project, its advantage is that the development interface is very simple, easy to use and has code error correction prompts. Carry out the needs analysis and detailed design of the system, through the function and interface of the technology developme

11、nt system, and finally test and optimize each functional module to complete the development of this project.Building blocks online mall based on Vue framework is a set of online mall system developed for children to develop intelligence to facilitate parents and children s educational institutions t

12、o select and purchase building blocks toys. All kinds of building block educational toys, in the face of the uneven building blocks on the market, the material and safety can not be guaranteed, the mall specializes in building block toy products, the biggest feature is to ensure the safety of their

13、products, after manual The screening will be put on the shelf to provide building block toy products suitable for children of different ages.Keywords：Vue framework, Building block online shopping mall, Developing intelligence目 录第1章 绪 论11.1研究背景和意义11.1.1本课题背景分析11.1.2 本课题的研究意义11.2 文献综述21.2.1 国内现状21.2.2

14、 国外现状21.3课题研究方法和内容31.3.1 研究方法31.3.2 研究内容31.4 开发技术与开发工具41.4.1 Vue.js2.0前端框架41.4.2 Webpack14构建工具4第2章 系统需求分析52.1系统需求分析52.1.1 功能需求分析52.1.3 非功能需求分析102.1.4 技术可行性分析112.1.5 操作可行性分析112.2 系统用例图122.2.1 商品浏览模块用例图122.2.2 用户信息模块用例图122.2.3 社区谈论模块用例图132.2.4 购物车管理模块用例图132.3用例规约132.4本章总结21第3章 系统设计223.1 系统总体功能设计223.1.

15、1 系统总体设计223.2 系统类图233.3数据库设计233.3.1用户表设计233.3.2商品表设计243.4系统流程图253.4.1商品浏览流程图253.4.3订单管理流程图273.4.5购物车管理流程图283.5系统接口设计283.5.1 Axios请求接口库283.5.2 Api接口设计29第4章 系统实现334.1 商品浏览模块实现334.2 订单支付模块实现364.3 用户信息模块实现374.4 订单管理模块实现404.5 购物车管理模块实现42第5章 系统测试445.2 测试的目的445.3功能测试445.3.1商品浏览模块测试445.3.2用户信息模块测试455.3.3订单管

16、理模块测试455.3.5购物车管理模块测试46第6章 结论与展望476.1 结论476.2 展望47参考文献49致谢50第1章 绪 论1.1研究背景和意义1.1.1本课题背景分析自21世纪以来，青少年智力技能的发展已受到更多人的重视，对于儿童来说，在儿童年龄发展其大脑非常必要。对儿童智力调查表和玩具市场的综合研究表明，积木类益智玩具是父母和儿童教育机构的第一个解决方案，在促进儿童智力发展方面起着重要的作用。在线购物变得越来越流行，并且已经成为一种趋势。网络购物是网络发展的必然趋势，例如在线购物商城有每个人都熟悉淘宝，卓越网，当当网，eBay，拍拍网和一些较大的在线商城。随着这个时代的步伐，人们

17、生活质量的提高也促进了网上购物这一新的购物方式的成熟，越来越多的消费者正从传统购物转向网上购物。但是对于在线购物商城来说高质量和劣质产品的结合导致缺乏一个整理、值得消费者信赖的平台。因此，市场需要先进的直销理念和高效完善的购物系统，以便以便宜，快速和方便的方式为客户提供高质量的积木玩具和开发智力社区的网上商城。1.1.2 本课题的研究意义这个积木网上商店旨在为儿童开发智力，方便家长和少儿教育机构挑选和购买积木玩具所开发的一套网上商城系统，区别于现在网络上的商城，面对市面上参差不齐的积木商品，材质和安全性得不到保障的情况下，本商城专营积木玩具商品，最大的特点就是保障其商品安全性，经过人工筛选才会

18、上架，提供适合不同年龄段的儿童的积木玩具商品。1.2 文献综述1.2.1 国内现状根据中国心理卫生杂志2020年最新的儿童心理及智力开发的期刊2中指出，主题积木游戏对56岁儿童数学能力和空间技能发展的干预效果，能很好的促进儿童对于数学和空间上的大脑开发能力。从数据上看，目前，中国14岁以下的青少年、儿童和婴儿人口接近3亿，占全国人口的25%，8000万城市儿童构成了玩具消费者的一个大群体。有资料表明,中国目前有6,000家玩具制造商，其中79生产儿童玩具，56生产不同类型的积木玩具。据中国玩具协会估计，2018年中国积木玩具需求将达到300亿元左右。3。综合市场分析，在中国2017年双十一拼插

19、积木类玩具在天猫和京东平台的销售额分别是17亿和13亿元，而2018年两个平台的销售额分别增长了45.9%和34.6%；但是积木玩具本身的安全性、无毒性也引起来社会上各人士的高度重视，在没有专业人士的推荐下，如何选择合适的积木玩具成为一个令家长头痛的问题。在技术上，使用前后端分离驱动的前端框架是现在IT行业和互联网发展的趋势，加上B/S多层体系结构4、MVVM设计模式5使开发过程变得简单。根据网上的数据调查，如今Vue虽然市场使用率不如其他两大框架多约占15%，但近两年来的增长率非常高，已经成为国内互联网市场的新宠，而且Vue非常适合中小型项目的部署与开展。1.2.2 国外现状最初的积木玩具是

20、在国外兴起的，全球最大的积木公司乐高在2011年的销售额为185.07亿丹麦克朗，比2010年增长了约17%。据乐高美国总经理称，2011年，乐高在美国的销售额增长了45%。乐高今年第一季度的表现同比飙升60%。预计从2030年到2050年，美国将成为乐高世界最大的市场之一。6。根据该项目的技术分析，国外对Vue框架的使用与中国不同。 在国外使用React和Angular的原因更多是因为近年来开发的Vue前端框架尚未被外国开发人员使用。但是，其使用的增长速度是十分明显的。 根据 2019年JavaScript生态圈研究报告 7，未来60的外国受访者更愿意接受和使用Vue作为发展平台，而94的外

21、国受访者将使用官方文档了解了Vue。1.3课题研究方法和内容1.3.1 研究方法早期的网站大多数依赖于后台服务器，例如基于java语言开发的jsp页面、php语言的php伪静态页面，这种动态页面的优点在于页面直接在服务端运行，可以与后台数据库高度交互，数据更直接在页面上处理，而缺点在于开发重心在后台技术上，后台开发人员在处理逻辑业务的同时也要参与到页面开发的编程中，无疑加大了后端人员的工作分量；同时html页面中有很多后端语言代码，耦合性非常大，后期维护成本和难度都增大。所以这种网页开发的技术不适合做商城网站系统等面向公众的项目。本文研究方向是积木商城系统，面向对象的主要是父母和孩子，其界面美

22、观度和操作易用性是十分重要的，所以使用前后端分离8的方式把整个项目的开发权重往前移，平衡前后端模块的职责，前端的责任是负责页面的样式显示与优化并动态地处理从后端接口返回的数据，而后端只关注逻辑处理，这对项目开发是非常必要的。基于Vue框架积木网上商城的前期通过京东、淘宝等现有的大型电子商城的调查，针对积木类益智商品的销售量、营销手段以及用户评价分析数据总结如何为积木商城建立可靠的数据库。1.3.2 研究内容本文研究的目的主要是使用Vue前端框架来设计和开发一套主题是积木网上商城的系统。该系统主要针对15岁以下的儿童，提供了一个安全可靠的专营积木类益智商品线上商品平台，主要包括产品浏览模块，用户

23、信息模块，订单管理模块，社区谈论模块，购物车管理模块，还提供了对适合不同年龄儿童的玩具进行分类的推荐，并加入社区讨论功能，以便消费者能够了解更多商品并使用商品。凭借先进的直销理念，结合高效完善的购物系统，我们可以为消费者提供质优价廉、快捷方便的优质正品。研究的流程是首先了解用户对系统的产品需求，其中核心的需求是系统需求提供多样全面的积木玩具商品，能让用户有更多的选择；其次了解系统的操作流程，从浏览、选择商品，选择商品的产品规格，下单再到收货成功，在开始项目是需要制定完整的流程方案，才能更好地完成系统的实现。需要解决的主要问题是：在满足用户需求的前提下，该项目能否在稳定运行，信息安全，操作简便，

24、界面美观的前提下，履行积木商城系统所需的基本功能。1.4 开发技术与开发工具1.4.1 Vue.js2.0前端框架Vue前端框架在2016年“出生”，它是由数据驱动和组件组成的渐进式的、基于MVVM模式的Javascript库，虽然诞生至今只有四年时间，但它有着专注于View层，使开发者不必花过多时间去处理数据等优点，所以称为了前端开发的“新宠”。与原生的JQuery不同，Vue提供专门的周期函数，开发者根据自身项目需求在指定的函数内执行方法，配合v-model、v-bind等语法糖，能更有效地进行数据驱动和双向绑定，便于实现功能。同时使用组件化原则，开发者引入需要的组件，这样做的好处在于能更

25、好地管理插件和代码，清晰地让开发者知道项目的组成。1.4.2 Webpack构建工具Webpack14构建工具的创立是为了更方便地管理依赖包、和代码，如今的Web前端应用变化多样，使用的语言和技术比后端的多，如果由人为地去管理代码和依赖包，随着后期项目的开展，代码会变得非常冗余且容易出错。Webpack构建工具被称为模块加载器（MODULE BUNDLER）,能够把页面中的依赖文件打包成静态资源，按需去加载这些资源，大大地减少了项目的体积以及更易管理文件。第2章 系统需求分析对该系统的需求进行分析，调查并了解父母购买儿童积木玩具的需求，分析市场上积木玩具的销量，并在收到此数据后进行分析。现在该

26、系统与市面上现有的网上商城不同之处在于，积木网上商城使用数据分析对积木商品进行分类和收集，从而形成一个只针对儿童人群的线上积木销售平台。对于功能性和非功能性需求，使用功能性分析方法、结构性分析方法、信息建模方法和面向对象的分析方法来识别、分析和综合问题，制定规范和评审过程。在竞争激烈的市场中，不仅内容应丰富多样，而且要提高核心竞争力，如果网站可以吸引更多的客户，则它应该在许多方面具有自己的特征，同时在页面美学方面也要吸引人。 特别是该系统属于特征人群访问网站，有必要开发一种符合儿童审美观的用户界面，并通过视觉效果吸引更多的顾客。使用HTML+ CSS9装饰Web界面，使网站摆脱旧的和丑陋的局面

27、，再加上千变万化的前端技术，通过前框架Vue前端和流行的UI框架element，显示网页的效果非常漂亮，开发一个用于积木主题商城的网站。2.1系统需求分析2.1.1 功能需求分析基于Vue框架积木网上商城的主要功能要五个功能模块：商品浏览模块、用户信息模块、订单管理模块、社区谈论模块、购物车管理模块。1 商品浏览模块功能需求图2-1商品浏览模块图1） 商品列表：无论是用户还是游客都可以在网站首页查看各种品牌的积木玩具商品、热门商品、导购指南；商品清单有两类:价格类和销售类。默认情况下，它按销售从高到低的顺序显示。 商品列表显示商品数据，例如商品照片，商品价格和商品销量。2）商品分类:系统根据品

28、牌、适用性别和适用年龄对商品进行分类，这三种分类可以联合筛选。3)展示商品详情:积木玩具商品明细、外观图片、价格、属性、库存数量等信息的显示；用户选择商品的规格(颜色、型号、数量)添加到购物车或购买中。如果用户未登录，在继续下一步之前，将提示用户登录。如果用户已登录，用户将直接进入下一步。选择产品规格后，用户点击添加购物车按钮，系统提示用户“添加购物车成功”，否则提示“添加购物车失败，请重试”；在用户选择商品规格并点击购买按钮后，他将跳转到提交订单的页面。4)搜索:搜索分为两种搜索方法，即模糊搜索和分类搜索。用户可以搜索商品的标题字段以找出匹配条件的积木商品；分类搜索是用户通过商品所属的类型进

29、行搜索，搜索结果以列表显示。2. 用户信息模块功能需求图2-2用户信息模块图1）个人基本信息：包括用户设置头像、昵称、邮箱、居住地区、购物爱好选择等个人信息。2）收货地址：填写收货人的名称、收货人的手机号码、所在地区、详细地址；其中，手机号码通过正则表达式验证，确保用户输入的手机号码是正确的；所在地区是通过匹配中国地区数据库获取地区信息供用户选择，保证地址正确；用户确认保存收货地址信息后，可以直接选择已经保存的收货地址信息，也可以通过下订单的方式创建新的收货地址信息；3）默认收货地址：用户可在已保存的收货信息列表中选择其中一个地址信息作为默认收货地址，默认收货地址是不会有重复的，设置后的默认收

30、货地址会一直显示在收货地址列表的第一位，并加上“默认”标签。3.订单管理模块功能需求图2-3订单管理模块图1）检查订单状态:订单状态有五种状态:“全部”、“待支付”、“待接收”、“已完成”和“已取消”。“全部”状态显示用户的所有订单；“待定付款”状态显示用户提交订单，系统将检查商品是否有货。如果没有库存，系统会提示用户商品缺货。否则，系统将锁定订单信息10分钟。“待接收”状态显示系统执行的操作，如发货单；“完成”状态表示用户已经收到货物，并且确认订单没有问题；“已取消”状态表示用户提交订单，但在10分钟内还没有支付成功的订单，或者订单被用户取消；2)订单管理:用户可以在五种状态下查看明细和删除

31、订单；3)支付方式:用户提交订单时，选择支付方式，包括支付宝和微信；4）送货时间：用户在提交订单时选择适合的送货时间，系统会安排送货员在制定时间段内送货上门；如果用户没有选择送货时间，则系统默认支付订单成功后安排配送积木商品。4.社区管理模块功能需求图2-4社区管理模块图1）商品谈论：用户进入商城社区交流平台，用户可发布相关商品的提问，所有用户都可以评论该用户提出的问题，同时标识出购买过和未购买过的评论用户，同时系统筛选出用户提问的相似问题进行汇合处理，以使用户更清晰地了解该商品。5.购物车管理模块功能需求图2-5购物车管理模块图1)购物车列表:用户在商品详细信息页中选择商品规格，并向购物车中

32、添加。这个清单显示了购物车中的货物和货物的存储状态。如果商品无效，则表示该商品无法购买，用户需要清除该商品信息。2)购物车管理:管理购物车中的商品，并快速删除无效商品;删除选定的商品;货物结算和货物数量操作。3)购物车结算:用户管理购物车中有效商品的结算。待结算商品进入订单管理，用户可以查看订单。2.1.2 非功能需求分析基于本系统是面向家长、儿童使用的，所以保证前端界面用户体验是必要的，所以会考虑下面几个非功能性需求：（1） 兼容性需求自从HTML5协议问世以来，由于IE浏览器对HTML5的支持度不如其他的浏览器，IE浏览器一统天下的局面已不复存在，如今成为了谷歌公司的Chrome浏览器，火

33、狐公司的FireFox浏览器、和微软公司的IE浏览器三足鼎立。不同浏览器的面世，他们基本上使用自家公司制定的协议标准，此外，不同的浏览器使用不同的内核，因此它们对HTML5和CSS3的分析和支持将会不同，尤其是IE9以下的版本，只能尽可能地兼容这些浏览器的显示效果以及交互功能，例如在Chrome浏览器下自定义的一些原生控件样式，但在火狐浏览器却不能正常显示，这给前端开发带来一定的难度。（2） 性能需求前端拥有良好的性能将有效改善系统的用户体验,所以在前端编程时进行优化将是系统开发的重要工作。以下几点则是主要优化工作。a)减少HTTP请求次数与频率浏览器在加载和刷新页面的时候，每次都会发送HTT

34、P请求到后台获取数据，这个过程会消耗大量的时间，导致页面在首次加载的时候都会有段时间的空白，当网络不佳的时候这种情况会更明显。而请求耗时除了取决于网络就是网页资源加载,因此我们将主要优化网页资源。主要方法就是合并图片,合并JS文件与CSS文件。b)减少DOM操作操作DOM将会严重消耗页面性能,所以尽量避免操作DOM,本文选用 Vue.js框架,将有效避免直接操作DOM这一问题，因为他使用的是双向绑定来进行对样式和功能的操作，在前端框架出现之前，网页的功能基本上是使用Javascript对DOM元素进行操作以获得需要的功能，但Vue.js能有效的减少直接对DOM元素的操作，进而更有效的提高网页性

35、能。（3） 响应式多屏自适应需求10在4G时代的带领下，多终端成为了普遍现象，一个网页响应不同设备的分辨率显示是十分必要的，这样子能解决程序员一套代码多端使用的情况，很大程度上提高的开发效率。严格定义的响应式一般是指响应式Web设计、而Web凭借其特有的灵活性和可塑性，在网页中使用rem和百分比的形式，获取浏览器的宽高，对齐进行自适应，从而响应不同尺寸、不同分辨率下的设备。2.1.3 技术可行性分析整个系统使用的技术以Vue2.0作为前端开发框架，实现前后端分离，由于本人在公司担任前端开发的职位，知道Vue.js的语法糖、周期函数以及路由处理等操作；HTML+CSS的网页界面开发语言能满足我们

36、对主题显示预期的效果，适当的使用JQuery11帮助补充Vue中的功能不足；后台方面使用集成度很高的thinkPhp5.0后台开发框架，技术方面一般能满足。2.1.4 操作可行性分析由于本系统是面向于家长和儿童，所以我们对系统目标是简单易用的，就好像中国伟大的企业家马云说过，一个好的产品是让任何人学会如何使用，尽可能的降低学习成本，所以在商城系统的操作方面没有要求，用户只要学会一般的网购流程即可。2.2 系统用例图2.2.1 商品浏览模块用例图图2-1 商品浏览模块用例图2.2.2 用户信息模块用例图图2-2 用户管理子系统用例图2.2.3 社区谈论模块用例图图2-3 社区谈论模块用例图2.2

37、.4 购物车管理模块用例图图2-4 购物车管理模块用例图 2.3用例规约1. 商品浏览1) 查看商品列表用例规约表2-1查看商品列表用例规约表用例编号SB011用例名称查看商品列表功能描述游客或用户查看商品列表，列表默认以销量最高到低排序，其中包括关键字模糊搜索和分类搜索；执行者用户、游客、系统前置条件网络正常； 后置条件用户或游客查看条件筛选后的商品列表涉众利益用户、游客基本路径1、 用户/游客查看商品；2、 用户/游客根据商品标题模糊查询商品；3、 用户/游客根据商品分类查询商品；4、 系统获取商品数据后展示；5、 用户/游客查看商品。扩展1、用户没有对商品查询进行操作1.1、系统以默认条

38、件显示商品；2、用户搜索没有结果2.1、系统提示搜索结果为空，并要求用户重新搜索；字段列表商品信息；商品分类；业务规则预定业务规则：1、用户/游客搜索的结果为空，则在页面中提示搜索结果为空，请重新搜索；2、系统默认列表以销量最高到低排序；备注2) 查看商品详情用例规约表2-2查看商品详情用例规约表用例编号SB012用例名称查看商品详情功能描述游客或用户查看商品详情； 执行者用户、游客、系统前置条件网络正常；后置条件用户或游客可以查看商品的详细信息，用户可以将商品添加到购物车，进入社区谈论或购买商品。涉众利益用户、游客续表2-2 基本路径1、 用户/游客查看商品详情；2、 判断该角色是商城用户还

39、是游客；提示游客登录；3、 允许用户将商品放入购物车中、进入社区谈论或购买；游客只能查看商品详情；扩展1、游客进行加入购物车、进入社区谈论或购买操作1.1、系统提示游客进行登录；2、用户将商品提交到购物车2.1、加入成功；2.2、库存为空，加入失败；3、用户购买商品3.1、提交订单；3.2、库存为零，购买失败；字段列表商品名称；商品编号；商品数量；售价；规格；商品分类；库存业务规则预定业务规则：1、当商品库存不为零时，用户才能加入购物车或购买； 备注2.用户信息1）填写个人基础信息表2-3 填写个人基础信息用例规约用例编号SB003用例名称填写个人基础信息功能描述已登录的用户填写和完善个人基础

40、信息执行者用户、系统前置条件网络正常；用户已登录；用户打开个人信息页后置条件用户保存个人基础信息成功涉众利益用户填写完个人基本信息后，系统可以获取该信息基本路径1、用户设置头像、昵称、邮箱、居住地区、个人爱好选择、购物爱好等个人基础信息；。2、系统判断邮箱、居住地址是否正确；3、用户提交个人基础信息；4、点击提交，个人基础信息已完善；扩展1、用户取消填写个人基础信息1.1、结束流程； 2、用户没有填写必填项2.1、系统提示用户填写必填项，并禁止提交。3、系统错误3.1、用户再次填写个人基本信息续表2-3 字段列表头像；昵称；邮箱；居住地区，购物爱好选择；生日；身份证号业务规则预定业务规则：1、

41、邮箱、购物爱好选择、生日为必填。2、居住地区具体到市/县，下拉选择框； 3、邮箱必须是正确的邮箱格式。备注2）收货地址用例规约表2-4收货地址用例规约表用例编号SB004用例名称填写收货地址功能描述用户在提交订单或个人信息中填写收货地址执行者用户、系统前置条件网络正常；用户已登录后置条件用户已填写收货地址，系统保存收货地址成功涉众利益用户可以在提交订单时选择已经存在的收货地址信息，或者直接创建新的收货地址信息。基本路径1、 用户打开个人信息页，进入收货地址列表页；2、 创建或编辑、删除收货地址；3、 用户必须填写详细收货地址、收货人、手机号码；4、 用户也可以在提交订单时新建收货地址；5、 系

42、统成功保存收货地址信息；6、用户管理收货地址。扩展1、用户取消填写收货地址信息1.1、结束流程； 2、用户没有填写必填项2.1、系统提示用户填写必填项，并禁止提交。3、系统出错3.1、用户重新填写个人基础信息4、提交订单时没有需要的收货地址 4.1、新建收货地址字段列表详细收货地址；收货人；手机号码业务规则预定业务规则：1、所有表单字段为必填。2、详细收货地址由省市区+详细地区组成； 备注3）默认收货地址用例规约表2-5默认收货地址用例规约表用例编号SB005用例名称设置默认收货地址功能描述用户在收货地址列表设置收货地址执行者用户、系统前置条件网络正常；用户已登录；有一个以上的收货地址信息后置

43、条件默认收货地址设置成功涉众利益用户基本路径4、 用户打开收货地址页；5、 用户设置一条收货地址为默认收货地址；6、 系统数据更新；7、 默认收货地址显示在列表第一条；8、 设置成功；扩展1、用户取消设置默认收货地址1.1、结束流程； 2、系统出错2.1、用户重新设置默认收货地址字段列表默认收货地址业务规则预定业务规则：1、用户收货地址列表中必要有一条以上的收货地址信息才能设置默认收货地址。2、默认收货地址显示在列表的首位，并带有“默认”标签； 备注3.订单管理1）查看订单状态表2-6 查看订单状态用例规约表用例编号SB031用例名称查看订单状态功能描述用户创建了订单，进行订单操作并查看订单状

44、态执行者用户、系统前置条件网络正常；用户创建了订单后置条件用户查看订单列表和状态涉众利益用户基本路径1、 用户创建订单；2、 用户查看订单的状态，分别是“全部”、“待付款”、“待收货”、“已完成”、“已取消”；3、用户切换tab栏选择查看订单的状态续表2-6 扩展1、用户没有创建和提交订单1.1、五个状态均为空数据；2、系统出错2.1、系统显示数据有问题，提示用户刷新；字段列表状态；订单商品规格；订单商品数量；业务规则预定业务规则：1、五个状态的type从1到5排序；备注2）管理订单表2-7 管理订单用例规约表用例编号SB031用例名称管理订单功能描述用户对订单进行支付、删除、收货等操作执行者

45、用户、系统前置条件网络正常；用户创建了订单后置条件用户修改订单的状态涉众利益用户基本路径1、 用户创建并提交订单；2、 十分钟内未支付，订单状态为“待支付”；3、 系统监听用户的支付情况，十分钟内未支付。系统自动把订单修改成为“已取消”状态；用户也可自行取消订单的支付；4、 用户支付成功，订单状态从“待支付”变为“待收货”；5、 用户点击收货，订单状态从“待收货”变为“已完成”；6、 用户查看所有状态下订单的详情；7、 用户可以删除已完成的订单；扩展1、 用户支付失败 1.1更换支付方式； 1.2 取消支付；字段列表订单状态；订单详情信息；是否删除；业务规则预定业务规则：1、用户只能对“已完成”和“已取消”的订单进行删除操作；备注3）支付方式表2-8 支付方式用例规约表用例编号SB033用例名称选择支付方式功能描述用户在支付订单时选择支付方式执行者用户、系统前置条件网络正常；用户创建了订单，还没支付后置条件用户选择支付方式并以这种方式支付金额涉众利益用户基本路径1、用户选择商品并提交订单；2、系统提示选择支付方式；3、用户选择一种支付方式；扩展无字段列表支付方式；业务规则预定业务规则：1、支付方式有支付宝、微信支付、货到付款等三种方式；备注4）选择送货时间表2-9 选择送货时间用例规约表用例编号SB034用例名称选择送货时间功能描述用户在支付订单时选