基于vue的惠家购物商城app的设计与实现.docx

《基于vue的惠家购物商城app的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于vue的惠家购物商城app的设计与实现.docx（40页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、基于vue的惠家购物商城app的设计与实现摘要：21世纪进入了互联网的时代，是信息化的时代，随着互联网技术发展和普及,无处不在的网络时刻影响着我们的生活，为了人们在快节奏的生活中，能够更加方便和快捷进行购物，网上商城随之诞生。由于几乎每个人手中都有一部或几部智能手机，这为我们解决传统购物方式成为了可能。采用MVVM的开发模式，开发一个移动端购物商城app具有非常重要的意义。JavaScript语言将被作为购物商城app的开发语言，开发工具使用的是VSCode；用当前流行的Vue框架来搭建项目，采用基于node.js平台上的express后端框架来搭建简单的服务器，而数据库采用的是分布式文件存储

2、的MongoDB数据库，使用Axios.js技术来实现前后端的数据交互，以及Vant UI组件和Swiper组件等来完成项目的设计与开发，实现了用户注册、用户登录、商品展示、商品搜索、购买商品、收藏商品、管理收货地址等功能。基于vue的惠家购物商城项目的实现将会多一个购物商城app，对用户来说，可以不需要踏出门口便能买到自己所需的物品，能够有效的节省用户时间，让用户更好的安排和利用自己的时间；对于商家来说，经营成本能够大幅的节省，经营的规模页不用受到场地的限制，销售范围变广，利益有巨大的提高，对商家的经营带来巨大影响。关键词：商城；网上购物；电子商务Design and implementat

3、ion of Huijia shopping mall app based on VueAbstract：The 21st century has entered the era of the Internet, is the era of information technology, with the development and popularization of Internet technology, the ubiquitous network always affects our life, in order to people in the fast-paced life,

4、can be more convenient and fast shopping, online shopping mall is born.Since almost everyone has one or several smartphones in their hands, it is possible for us to solve the problem of traditional shopping. It is very important to develop a mobile shopping mall app with MVVM development mode. JavaS

5、cript language will be used as the development language of shopping mall app, and vscode is used as the development tool; the current popular Vue framework is used to build the project, and the express back-end framework based on node.js platform is used to build a simple server, while the database

6、uses mongodb database of distributed file storage, axios.js technology is used to realize the data interaction between the front and back ends, and Vant UI component and Swiper component are used to complete the design and development of the project, and realize the functions of user registration, u

7、ser login, commodity display, commodity search, purchase of commodities, collection of commodities, management of receiving address, etc.The realization of Huijia shopping mall project based on Vue will have one more shopping mall app. For users, they can buy what they need without stepping out of t

8、he door, which can effectively save users time and make users better arrange and use their time. For businesses, the operating cost can be greatly saved, and the operating scale page is not limited by the site , the scope of sales has become wider, the interests have been greatly improved, and the b

9、usiness operation has been greatly affected.Keywords: Shopping Mall; Online shopping; Electronic Commerce。目 录第1章 绪 论11.1系统的开发背景及意义11.2国内外研究现状2 1.3研究的目的2 1.4系统开发相关技术概述31.4.1 Vue.js的介绍3 1.4.2 MVVM开发模式的介绍31.4.3 MongoDB的介绍41.4.4 Axios的介绍4第2章 系统需求分析52.1可行性分析52.1.1 经济可行性52.1.2 技术可行性52.1.3 操作可行性52.2系统的业务需求

10、分析52.3系统功能的需求分析72.4 UML系统建模92.4.1用例图92.4.2用例图规约表92.5本章小结12第3章 系统设计133.1系统功能设计133.2 系统顺序图143.3 系统活动图203.4数据库设计223.5本章小结23第4章 系统实现244.1 惠家购物商城页面实现244.1.1 基本页面24 4.1.2 功能页面284.2 本章小结34第5章 系统测试355.1 系统测试的目的和意义355.2 测试用例及结果355.3 本章小结36第6章 结束语376.1 全文总结376.2 课题展望37参考文献：38致谢39第1章 绪 论1.1系统的开发背景及意义简单来说，电子商务就

11、是在互联网上以电子交易的方式进行交易活动和相关服务的活动。电子商务时代的到来，让人们能够在网上转账交易，让交易更加方便。无处不在的网络时刻影响着我们的生活，改变了我们的学习方式，生活方式，娱乐方式等方方面面，人们也意识到基于互联网技术的电子商务重要性，它对国家，社会和个人生活等方面都带来了巨大的影响。电子商务是以电脑为主要页面；移动电子商务是通过智能手机、平板为主要页面，是无线的电子商务。因为用户不可能随时随地带着一台联网的电脑，所以人们平时上网的主要工具是使用智能手机，正是智能手机用户的巨大市场需求量吸引了京东，淘宝等电子商务企业，纷纷进军到移动电子商务的行列中，这样更加促进了移动电子商务的

12、发展。对于智能手机用户来说，人们每天和手机在一起的时间和使用手机的时间超过了平板，电脑等任何设备。智能手机用户比PC端有更大的优势，如手机比电脑小，可以随身携带，可以随时上网查看信息，比PC端更为方便快捷。在信息化的大环境下，手机移动端购物商城的开发非常符合了人们追求便携舒适的购物要求，因此，手机移动端购物商城的开发是非常有必要。手机移动端购物商城的这种网上购物方式，突破了传统的上街购物方式，这对消费者、商家和市场都造成了巨大的影响。对用户来说，可以不用踏出门口便能够选择购买自己喜欢的物品，如喜欢的食品，喜欢的手机，喜欢的电脑等等，有效的节省用户的时间，让用户能更好的利用自己的时间；对于商家来

13、说，经营成本变低了，经营规模也不用受到场地的限制，销售范围广，可以遍布全国，对商家的成本有了大幅的节省，对商家利益也有巨大的提高，为每个商家的经营方式带来非同的影响。1.2国内外研究现状虽然不同国家的政治、经济、文化等方面的基本情况有所不同，但是各个国家的政府机构都很重视并积极地发展移动电子商务，因此移动电子商务得到了充分的发展。跨入到21世纪，由于互联网技术和手机普及率提高，现在几乎每个人都能够拥有一部智能手机，人们能够通过移动互联网进行网上交易。在欧洲、美国、日本等比较发达的国家和地区，在移动电子商务的发展上一直都是处于国际领先地位，在网络上开商店的发展速度迅猛，世界超一流的零售商，如沃尔

14、玛、亚马逊、家乐福、乐购等零售商大佬都纷纷加入网络经商的行列。在国内，网上商城起步相对于发达国家来说比较晚，但是发展速度非常迅速，获得的成果也远超国外。国内著名的网上商城有京东商城、淘宝网、拼多多、当当网、拍拍网、小米之家、华为商城等都加入到移动电子商务，这无疑都证明了移动电子商务拥有非常大发展优势和发展潜能。1.3研究的目的当今社会，随着互联网的普及，互联网已经遍布全国，乃至全球，网上购物已经成为一种常态，网上购物已经成为了普遍的购物方式。基于vue的移动购物商城，用户不需要被限制在电脑端才能登录商城进行购物，用户可以通过智能手机，能够进行登录商城，也能够进行对商品的浏览，查询，购买等功能，

15、同时用户也不需要特意找时间去上网查询商品，用户只需要拥有一台智能手机，就能够随时随地的购买增加所喜爱和所需要的商品，这样不仅节省了用户的时间，更打破了空间的限制，用户可以随时随地使用智能手机或平板来购物。总之，网上购物商城是大势所趋，是根据社会发展应运而生的，随着生活节奏的日益加快，对于用户来说时间就是金钱，网上购物能够为忙碌的人们节省时间。网上购物商城恰好为忙碌的人们节约了去线下商城购物的时间，让人们能够不必去逛大街就可以进行购物，让人们过足不出户就可以买尽天下物，让人们能够不用出去逛街也能够进行购物，同时，用户也能够通过移动端购物商城，在第一时间获取线下商城相关的优惠活动，让有空闲时间的用

16、户可以跟好友出去逛街。网上购物商城使得购物这件事变得更加方便，更加快捷，更加人性化了。1.4系统开发相关技术概述基于vue的惠家购物商城app的设计与实现采用的Javascript编程语言，前端部分是选用当前比较流行的、轻量级的Vue.js框架和Vant和Swiper等前端组件来搭建的，采用的开发模式是MVVM，通过MVVM架构来实现数据与视图的分离,客户端的开发工具采用的是Visual Studio Code，服务端采用基于node.js和express框架来搭建简单的服务器；数据库采用的是MongoDB，前后端的数据交互采用Axios.js技术来实现，开发环境是8GB的win 10 x64

17、操作系统。以下主要针对其中的几个比较重要的前端开发技术进行详细介绍。1.4.1 Vue.js的介绍Vue是基于MVVM模型实现的一套用于构建用户页面框架。一方面，Vue框架让开发人员只需要关注视图层即可，这样方便开发的项目和第三方库或已有的项目进行整合；另一方面，Vue还支持各种类库结合来使用,给相对复杂的单页应用程序提供驱动。Vue.js的显著特性有:轻量级的框架、双向数据绑定、组件化、指令系统。1.4.2 MVVM开发模式的介绍MVVM是模型-视图-视图模型的简写，英文翻译为Model-View-ViewModel，主要作用是将其中的视图层和模型层分开。视图(View)是展示给用户观看的内

18、容，它与ViewModel的数据是双向绑定，也就是ViewModel提供的数据能够插入View中；模型(Model)指的是后台传递过来给View的数据，视图模型(ViewModel)是MVVM模式的核心部分，是实现连接View和Model相互通讯的桥梁。MVVM开发模式的核心是数据绑定：当数据发生变化时，ViewModel能够实时监听到数据发生变化，然后告诉与之相对应的视图数据发生了变化，视图就会自动进行更新，当用户操作视图时，ViewModel也能够实时监听到视图发生的变化，然后告诉模型数据发生了变化，模型里的数据就会方式改变，这样就成功实现了数据的双向绑定。1.4.3 MongoDB的介绍

19、MongoDB是一个由C+语言编写的开源数据库，是分布式文件存储的数据库。它的出现是为了解决高性能数据存储的问题。MongoDB主要优点有：在程序高负荷运行时，能够为程序添加更多节点来确保服务器保持高性能；支持对数据建立索引；支持强大的查询，能够与关系型数据库一样，实现单表查询的大部分功能；1.4.4 Axios的介绍Axios是一个基于promise的易用、简洁且高效的HTTP库。它具备如下优点：同样的API能够流畅运用在浏览器和Node.js中，且能够无压力的在平台之间进行切换；支持ES6语法中Promise来管理异步；能够支持拦截器等多种配置；封装了Ajax技术，写法更加简洁等。第2章

20、系统需求分析2.1可行性分析2.1.1 经济可行性基于vue的惠家购物商城app的设计与实现从整个系统的设计到开发都由本人自己完成，在开发的过程使用的开发工具VSCode是免费的，数据库使用的是免费开源的MongoDB，实现零经费。2.1.2 技术可行性本人在校期间已修完所有在校课程，已经具备开发项目的基本技术。开发项目仅需要一台计算机，对计算机的配置要求不高，个人电脑能够满足开发项目的要求。对于软件技术也要求不高，会使用简单的ps技术对图形图像进行制作，有HTML+CSS+JS基础，会运用Node.js，Axios.js,MongoDB等技术即可。2.1.3 操作可行性基于vue的惠家购物商

21、城app的设计与实现拥有简明的页面UI、简单操作的方式，只要用户可以使用过网上购物商城或对网上购物商城有所了解，都能够行云流水地操作惠家购物商城。由此可见，操作方式和操作过程不会受到限制。2.2系统的业务需求分析以下是对惠家购物商城app的业务需求分析。用户在打开App之后有三个模块：首页、分类，购物车和我的。(1) 初始时选中是首页，首页显示是商品信息，点击商品，跳转到与之相对应的商品详情页面，该页面会显示相对应商品的详细信息，点击添加购物车按钮实现添加商品进购物车操作，点击购物车按钮，跳转到购物车页面，在此页面有加减号用来增加和减少商品数量，有删除按钮可以删除商品，有全选按钮可以全选商品；

22、点击结算时，如果用户已经进行过登录，则能够进行下一步的结算功能操作，否则会先跳转到登录页面，让用户先进行登录操作。(2) 点击底部导航栏的分类按钮，进入分类页面，在分类页面中商品按照不同种类划分，如手机数码，家用电器，男装，女装等；点击商品可以进行购物操作。(3) 点击底部导航栏的购物车按钮，进入购物车页面，在购物车页面中能够查看添加进购物车的所有商品，用户可以增加或减少商品数量，删除商品，全选商品等操作。(4) 点击底部导航栏的我的按钮，进入个人中心页面，用户能够查看收货地址，查看订单信息，查看我的收藏，并且能够管理用户的收货地址等操作。惠家购物商城app的业务流程图如图2.1所示。 图2.

23、1 惠家购物商城app的业务流程图2.3系统功能的需求分析惠家购物商城主要分为前端和后端两大模块：在前端模块中主要包括：首页，分类，购物车，个人中心；而在后端模块中主要包括：登录注册、商品管理。惠家购物商城功能模块图如图2.2。图2.2 惠家购物商城功能模块图(1) 首页：是展示商品第一个页面。主要用于商品的展示，商品的介绍，广告的展示，商品的推荐，搜索栏，以及导航栏(首页，分类，购物车，个人中心)，一个简洁，美观的使用能够吸引用户。(2) 分类页面：是商品的分类展示部分。用户可以可以根据自己商品的类型来快速寻找商品，能够帮助用户快速定位自己所需的商品。(3) 购物车页面：用户可以添加商品到购

24、物车。用户在挑选商品时，对商品的信息进行查看对比，觉得满意后可以添加商品进购物车，主要方便用户对添加进购物车的商品进行整理，如删除商品，添加商品，增加商品数量，减少商品数量，全选商品，以及计算勾选商品的总价格等操作。(4) 个人中心：是登录者的详细信息。是用户的用户名，昵称，地址管理，商品收藏，用户积分，优惠券，推荐，设置等重要信息集中地，用户可以查看商品收藏，收货地址等信息，方便用户查看资料，财产余额等信息。(5) 搜索页面：用于商品的搜索，用户可以输入框输入商品的名字进行搜索操作。(6) 商品详情页：提供给用户详细的商品信息，主要是在用户选择商品时，了解商品。用户通过图文信息，商品介绍，商

25、品价格，用户购买建议等详情介绍来了解商品详情。(7) 收藏夹：是用来收藏商品。用来收藏自己心怡的商品，用户能够在个人中心页面中的商品收藏中查看自己收藏的商品。(8) 收货地址：是用来管理我的收货地址。用户能够管理收货地址，能够对收货地址进行增删改操作。2.4 UML系统建模2.4.1用例图用例模型的基本组成部分有用例、角色（或参与者）和系统。用户业务如图2.3基于vue的惠家购物商城app用例图所示。 图2.3 基于vue的惠家购物商城app用例图所示2.4.2用例图规约表表2-1登录注册用例规约表用例编号2-1用例名称登录注册功能描述当游客注册或登录之后，身份变为用户。执行者游客前置条件惠家

26、购物商城app正常运行。后置条件如果是游客，游客身份变为用户。涉众利益游客登录注册之后，可以进行下单、管理收货地址和修改个人信息等操作。基本路径游客：1. 如果用户未注册，选择注册；2. 把注册信息按规则填写；3. 注册成功并转为用户身份；4. 如果用户已注册，则输入登录信息；5. 角色变为用户并成功进入系统。扩展无字段列表用户：1. 账号 2.密码 3. 联系电话；业务规则无备注无表2-2下单用例规约表用例编号2-2用例名称下单功能描述在用户进入某店铺，下单之后可以确认订单。执行者用户前置条件登录到惠家购物商城app。后置条件下单成功。涉众利益用户购买商品。基本路径1. 进入某家店铺；2.

27、把商品加入购物车；3. 确认订单；4. 支付。扩展 无字段列表1.商品编号；2.商品名称；3.商品说明；4.收货人；5.联系电话；6.收货地址；7.运费；8.价格。业务规则需要用户身份才能下单。备注无表2-3收货地址管理用例规约表用例编号2-3用例名称收货地址管理功能描述用户可以查看收货地址、新增收货地址、修改收货地址和删除收货地址。执行者用户前置条件登录惠家购物商城app。后置条件能对收货地址进行增删查改操作。涉众利益用户可以对地址进行查看、新增、修改和删除。基本路径1. 查看收货地址2. 删除收货地址2.1 选择新增收货地址；2.2 把正确的地址信息录入；2.3 提交地址信息；3. 修改收

28、货地址；3.1 点击某条地址信息的编辑图标；3.2 编辑需要修改的地址信息；3.3 提交修改；4. 删除收货地址；4.1 点击某条地址信息的编辑图标；4.2 点击删除图标；4.3 确认删除某条地址信息。扩展无字段列表1.用户编号；2.收货人姓名；3.联系电话；4.详细地址;业务规则无备注无表2-4购物车用例规约表用例编号2-4用例名称个人信息管理功能描述用户可以查看添加进购物车的商品、增加商品数量，减少商品数量和删除商品。执行者用户前置条件惠家购物商城app正常运行。后置条件能对购物车里的商品进行增删查操作。涉众利益用户可以对购物车里的商品进行查看、新增、删除。基本路径1. 查看购物车里的商品

29、；2. 增加商品数量； 2.1 点击数量右边的”+“；3. 减少商品数量; 3.1 点击数量右边的”-“;4. 删除商品; 4.1点击某条商品信息右下角的删除按钮；5. 全选商品； 5.1 点击左边的勾选按钮；扩展无字段列表1.商品编号;2.商品名称;3.商品说明;4.商品价格;5.商品数量;6店铺名称;业务规则无备注无2.5本章小结本章首先对惠家购物商城app各方面的可行性进行了分析；接下来对惠家购物商城app的业务需求进行分析，并且用业务流程图展示；之后通过功能模块图展示了前端和后端的功能需求，以及对非功能性需求进行简单明了的说明；最后，为了更加直截了当向用户展示惠家购物商城app的功能，

30、给出了用例图并对各个用例用表格进行简单明了的说明。第3章 系统设计3.1系统功能设计(1) 登录注册功能：在主页面(首页)中有登录组件，点击登录按钮后跳转到登录注册页面，输入有效账号和密码登进行登录，如果账号和密码正确，则进入个人中心页面；如果此前用户从没注册过账号，可以在登录页面中，点击手机号注册按钮，跳转到注册页面，注册使用用户名和密码，如果注册失败，弹出注册失败信息，如果注册成功，则会自动跳转到登录页面。(2) 添加商品到购物车功能：用户进入app之后，在首页中便可以浏览商品，点击商品之后，将跳转到与之相对应的商品详情页，此时，用户可以点击添加购物车按钮来选择想购买的物品，点击购物车按钮

31、，跳转到购物车页面并显示已添加进购物车的所有商品，用户可以进行删除商品，增加和减少商品数量，全选商品操作，点击结算按钮，如果用户还未进行登录的话，将会先跳转到登录注册页面，如果用户没有账号，则可以进行注册操作；如果用户已登录，则进入到确认订单页面，点击在线支付按钮，跳转到收银台页面，支付后跳转到我的订单页面。(3) 收货地址功能：在我的页面(个人中心页面)中有收货地址，用户点击收货地址管理按钮，跳转到我的收货地址页面。在我的收货地址页面，如果没有收货地址，则显示空，如果有收货地址，则会显示用户所有的收货地址。在收货地址页面的底部有新增地址按钮，用户点击新增地址按钮时，会跳转到新增收货地址页面，

32、此时，用户可以进行增加新的收货地址操作。在我的收货地址页面，每个收货地址列表项的右边有一个编辑按钮，用户点击编辑按钮时，会跳转到修改和删除收货地址页面，点击修改按钮，则进行修改该条收货地址操作，点击删除按钮，则进行删除该条收货地址操作。(4) 收藏商品功能：点击商品，会跳转到与之相对应的商品详情页面，在价格右边有一个收藏按钮，点击收藏按钮，可以实现收藏商品的操作，再一次点击收藏按钮时，则会取消收藏商品，用户可以在个人中心的商品收藏中查看自己收藏的商品。(5) 查看订单功能：在我的页面中有全部订单按钮，点击按钮，则会进入我的订单页面，如果有订单，则会展示所有订单，如果没有订单，则显示空。3.2

33、系统顺序图1.用户注册顺序图，如图3.1所示。用户点击注册按钮，进入注册页面；显示注册页面给用户；用户在注册界面中填写注册信息；用户点击提交按钮；信息错误，则在注册页面会提示注册失败；重新填写注册信息；信息正确，则在注册页面会提示注册成功；注册成功，进入到登录页面。图3.1 注册顺序图2. 用户登录顺序图，如图3.2所示。用户点击登录按钮，进入登录页面；显示登录页面给用户；用户在登录界面中填写登录信息；用户点击提交按钮；如果信息错误，则在登录页面会提示登录失败；重新填写登录信息；如果信息正确，则在登录页面会提示登录成功；登录成功，进入到个人中心页面。图3.2登录顺序图3. 用户购物顺序图，如图

34、3.3所示。用户点击商品，进入商品详情页面；显示商品详情页面给用户；用户点击加入购物车按钮；用户在购物车页面点击结算按钮；判断用户是否登录；如果用户已经登录成功，则结算成功；如果用户未登录，则跳转到登录页面。图3.3购物顺序图4. 用户添加收货地址顺序图，如图3.4所示。用户在个人中心页面点击我的收货地址，进入我的收货地址界面并点击添加地址按钮；用户填写收货地址信息；用户点击提交按钮；如果信息错误，则显示添加失败；重新填写信息提交；如果信息正确，则显示添加成功。图3.4添加地址顺序图5. 用户修改收货地址顺序图，如图3.5所示。用户在个人中心页面点击我的收货地址，进入我的收货地址界面并点击修改

35、地址按钮；用户填写收货地址信息；用户点击提交按钮；如果信息错误，则显示修改失败；重新填写信息提交；如果信息正确，则显示修改成功。图3.5修改地址顺序图6. 用户删除收货地址顺序图，如图3.6所示。用户在个人中心页面点击我的收货地址，进入我的收货地址界面并点击编辑按钮；显示收货地址页面给用户；用户点击删除按钮；删除成功，跳转并显示收货地址页面给用户。图3.6删除地址顺序图7. 用户收藏商品顺序图，如图3.7所示。用户点击商品，进入商品详情页面；显示商品详情页面给用户；用户点击收藏按钮；显示收藏商品成功；用户再一次点击收藏按钮；显示取消收藏商品。图3.7收藏商品顺序图3.3 系统活动图1.收货地址

36、管理活动图用户进入我的收货地址页面，用户点击底部的新增收货地址按钮，跳转到添加收货地址页面，用户填写并提交地址信息实现添加地址功能；点击某条地址信息右边的编辑按钮，进入编辑该条地址信息的页面，用户填写并提交地址信息之后便可以更新地址信息，点击删除按钮，则删除该条地址信息，则如图3.8收货地址管理活动图所示。图3.8收货地址管理活动图2.购物活动图用户进入商品详情页面，点击加入购物车按钮，实现添加商品进购物车功能，点击购物车按钮，跳转到购物车页面，点击结算按钮时，如果用户已经登录了，则结算成功，如果用户还未进行登录，则结算失败，则如图3.9购物活动图所示。 图3.9购物活动图3.4数据库设计一个

37、完整的购物商城app必须有一个良好的数据库支持作为数据来源，基于vue的惠家购物商城app所采用的是分布式文件存储的数据库MongoDB，以下是对用户信息表、商品分类表、商品详情表、购物车表、商品为你推荐表、商品秒杀表的设计。1、 users(用户信息表),表的详细数据见下表3-1用户信息表：表3-1用户信息表列名数据类型是否为空主外键描述_idObjectIdNot null主键用户idusernameStringNot null用户名passwordvarchar(10)Not null用户登录密码iphonevarchar(256)Not null用户头像2、 wntjarr(商品为你推

38、荐表)，表的详细的数据见下表3-2商品为你推荐表：表3-2商品为你推荐表列名数据类型是否为空主外键描述_idObjectIdNot null主键商品idm1StringNot null商品名称m2StringNot null商品价格imgStringNot null商品图片3、 msarrs（商品秒杀表），表的详细数据见下表3-3商品秒杀表：表3-3商品秒杀表列名数据类型是否为空主外键描述_idObjectIdNot null主键商品idm1StringNot null商品名称m2StringNot null商品价格imgStringNot null商品图片4、 flarrs（商品分类表），表

39、的详细数据见表3-4商品分类表：表3-4商品分类表列名数据类型是否为空主外键描述_idObjectIdNot null主键商品idm1StringNot null商品名称imgStringNot null商品图片5、 ajaxgoodslists（商品详情表），表的详细数据见下表3-5商品详情表：表3-5商品详情表列名数据类型是否为空主外键描述_idObjectIdNot null主键商品idtitleStringNot null商品名称title1StringNot null商品说明priceInt32Not null商品价格expressStringNot null运费remainInt3

40、2Not null商品剩余数量thumbArrayNot null商品图片shopnameStringNot null店铺名称6、 goods（购物车表），表达详细数据见下表3-6购物车表： 表3-6购物车表列名数据类型是否为空主外键描述_idObjectIdNot null主键商品idtitleStringNot null商品名称descStringNot null商品说明priceInt32Not null商品价格numStringNot null商品数量thumbArrayNot null商品图片shopnameStringNot null店铺名称3.5本章小结 本章首先对惠家购物商城a

41、pp的前端和后端进行了系统功能的详细设计，然后画出了惠家购物商城app的顺序图、和部分的活动图，更加直观地展示了惠家购物商城app的各个功能；接下来是对惠家购物商城app的数据库进行设计。第4章 系统实现4.1 惠家购物商城页面实现4.1.1 基本页面1. 用户第一次进入惠家购物商城app之后向右滑动依次可以看到4张引导页，点击立即体验按钮进入到首页。如图4.1引导页所示。 图4.1引导页2.如果用户不是第一次进入惠家购物商城app之后会看到广告页，等待5秒或点击跳过按钮进入首页。如图4.2广告页所示。图4.2广告页3.用户进入惠家购物商城app之后，映入眼帘的是首页，包括了搜索框，轮播图，滑

42、块等。如图4.3首页所示。图4.3 首页4.用户点击分类按钮，跳转到分类页面，如图4.4分类页面所示。 图4.4 分类页面 5.用户点击购物车按钮，跳转到购物车页面，如图4.5购物车页面所示。 图4.5 购物车页面 6.用户点击我的按钮，跳转到用户个人中心页面，如图4.6 个人中心页面所示。 图4.6 个人中心页面 4.1.2 功能页面1.用户点击登录按钮，跳转到登录注册页面，页面上包含了两个文本框：用户名和密码，用户输入账号和密码后，点击登录按钮进行登陆操作；当用户单击注册按钮后，将跳转到用户注册页面，如图4.7登录注册页面所示。 图4.7登录注册页面 2. 图4.8是用户注册实现的页面，页

43、面上包含的是用户注册时需要填写的基本信息，如：用户名、密码、确认密码和手机号，点击注册按钮，将进行注册操作；如果用户注册成功，将跳转到登陆注册页面进行登录，如果用户注册失败，则不会跳转页面，同时会提示错误信息。 图4.8注册页面3. 点击商品时，会跳转到与之相对应的商品详情页面，点击添加购物车按钮，商品会添加进购物车，点击购物车按钮，跳转到购物车页面；点击数字旁边的加号时，可以增加商品数量，点击减号可以减少商品数量，点击删除按钮可以删除商品，点击全选按钮可以全部勾选商品，如图4.9商品详情页、图4.10全选商品页面和图4.11删除商品页面所示。 图4.9 商品详情页 图4.10 全选商品页面

44、图4.11删除商品页面 4. 点击结算按钮的时候，如果用户还未进行过登录，会先跳转到登录注册页面，如果用户已经登录，则会跳转到确认订单页面，点击在线支付按钮，跳转到收银台页面，点击支付完成订单按钮，跳转到我的订单页面。如图4.12确认订单页面，图4.13收银台页面，图4.14我的订单页面所示。 图4.12 确认订单页面 图4.13收银台页面 图4.14我的订单页面 5. 在已经登录的个人中心页面，如图4.15个人中心页面所示，点击我的收货地址管理，跳转到我的收货地址页面，用户可以对我的收货地址进行增删改操作。如图4.16我的收货地址页面和图4.17新增收货地址页面所示。图4.15个人中心页面 图4.16我的收货地址页面 图4.17 新增收货地址页面6. 点击商品时，会跳转到与之相对应的商品详情页面，点击收藏按钮，可以对商品进行收藏，再一次点击收藏按钮，能够取消对该商品的收藏，在个人中心页面，点击商品收藏，跳转到我的收藏页面，用户可以查看收藏的商品。如图4.18我的收藏所示。 图4.18我的收藏页面 4.2 本章小结本章主要是对惠家购物商城