基于 Vue的购物商城设计与实现.docx

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

1、摘要随着网络信息化的发展，网上的交易平台日趋增多，也给大学生们提供了更多的便利。其中大部分大学生都会使用网上购物，因为这更能够给他们提供一个购买安全、便捷的一个渠道。而二手的交易平台也是如此，能够为大学生们提供物美价廉的交易平台，也能够将物品循环利用，而其核心也是商品的买卖。本购物商城平台，针对的是大学校内的群体，商城的商品属于二手交易，前台交易的实现了用户能够进行商品的浏览，也能对商品进行选购，更主要还是能够上传自己想要出售的商品，让其他用户能够购买。本购物商城采用了主流框架之一的使用Vue框架，简单易用，单页面应用让用户体验非常好，且减轻了对服务器的压力。它通过MVVM思想就使得开发中的数

2、据模型跟视图之间能够自主的转换，不需要开发人员一步一步的对底层代码进行对比，能够在开发的时候将注意力大部分集中在代码逻辑端，因此使得前端开发使用这个框架的企业越来越多。本交易平台就是利用了Vue在开发时的组件化思想，使得我们的页面可以被划分为一个个小组件，然后很多的组件构成这个页面。在开发中如果我们能将每一个小的功能划分为一个小组件，然后将这个可以被重复使用的组件在系统中被细分，那么整个系统就可以向着代码的美观、开发的效率高、运行的速度快、耦合性低的方向进行，由此开发出一个基于 Vue的网上购物商城平台关键词：前后端分离; Vue; 组件化; JavaScrip广东东软学院本科毕业设计（论文）

3、AbstractWith the development of network informatization, online trading platforms are increasing, which also provides more convenience for college students. Most of the college students will use online shopping because it can provide them with a safe and convenient way to purchase. The same is true

4、for second-hand trading platforms, which can provide college students with a good and cheap trading platform, and can also recycle items, and the core is also the sale of commodities.This shopping mall platform is aimed at groups in colleges and universities. The products of the mall are second-hand

5、 transactions. The front-end transactions enable users to browse and purchase goods, and more importantly, they can upload what they want to sell Commodities, so that other users can buy.This shopping mall uses one of the mainstream frameworks, the Vue framework, which is simple and easy to use. The

6、 single-page application makes the user experience very good and reduces the pressure on the server. Through the idea of MVVM, it enables the independent conversion between the data model and the view in development. It does not require developers to compare the underlying code step by step, and can

7、 focus most of the attention on the logical end of the code during development. More and more companies are using this framework for front-end development.This trading platform utilizes Vues component thinking during development, so that our page can be divided into small components, and then many c

8、omponents constitute this page. In development, if we can divide each small function into a small component, and then subdivide this reusable component in the system, then the entire system can be oriented towards the beautiful code, high development efficiency, and operation. The speed is fast and

9、the coupling is low, thus developing an online shopping mall platform based on VueKeywords: front-end separation; Vue; componentization; JavaScript目录1.绪论31.1研究背景31.2选题的意义与目的41.3研究现状51.4课题研究的内容51.5课题的开发目标52.系统相关技术和开发环境52.1前端相关技术62.1.1 HTML简介62.1.2 CSS简介62.1.3 JavaScript简介62.1.4Vue简介72.2 前端开发环境72.2.1V

10、Scode简介82.2.2Webpack简介82.2.3Vue-CLI简介82.2.4API简介83.系统分析93.1 系统可行性分析93.2 系统功能需求分析93.3 系统性能需求分析104.系统设计114.1 系统总体设计114.2系统模块设计124.2.1用户注册模块设计124.2.2用户登录模块设计124.2.3用户收藏模块设计134.2.4用户评论模块设计134.2.5用户上传商品模块设计144.2.6用户注销模块设计154.3数据库设计154.3.1数据库概念结构设计154.3.2数据库逻辑结构设计165.系统实现215.1用户注册登录界面功能215.2首页界面225.3商品详细信

11、息功能235.4个人信息界面245.5购物车功能255.6评论功能255.7上传商品功能256.系统测试266.1测试概述266.2测试环境266.3测试用例276.4测试分析307.总结31参考文献32致谢331.绪论1.1研究背景自21世纪以来，我们所熟知的电商，并不是简简单单的由旧事物被新事物所替代，而是在在互联网中不断的摸索、演变而来，就好比在03年的5月份，马云所在的阿里集团成立了，在其同年的12月份慧聪网也正式上市，次年1月份，京东也加入了电子商务这个领域。从04年开始，国家就陆续发布了针对网络商务的一系列准则，不同用户之间通过网络并遵守着网络规范准则进行信息交流和电商活动。近几年

12、来,随着信息化的不断发展，大学生在网上购物现在看起来也是十分的普遍，可以说网上购物是大学生校园生活的必要，因为在校园周围并不具备能够出售丰富商品的地方，也给大学生网上购物一个良好的契机。而网上购物商城就使得当前的购买方式多样化，不仅让人能足不出户便可以买到想要的商品，也能够更快地让人们得到需求，假如某种商品一个地方买不到，而另一个地方能买到，网上购物商城便能解决这种尴尬的问题，网上购物也推动了物流等行业的蓬勃发展，因此，网上购物商城是现在，也是未来购物的重要渠道。而现在市面上的二手交易平台更是为大学生提供很多的便利，相对于淘宝、京东等单方面购物平台，大学生们更喜欢能够在这种二手交易平台上进行商

13、品的购买，能让自己出售闲置的商品，也能买到想要的商品，其价格也是这种平台的一大优势。1.2选题的意义与目的现在是一个信息技术发达的时代，大部分的企业都有用自己的网页应用。而此次开发是设计并实现一个校内进行的能给大学生们提供的便利、安全、节源的二手交易平台，而本二手交易平台内可以给大学生们很多的商品，比如电器、运动产品、书籍等不同种类的商品交易，鼓励大学生们对资源的循环利用，能很好地进行二手商品交易。而现在市面上的咸鱼、58同城等之所以如此的火爆，也是因为它给用户提供了一个自由的二手交易平台，但它们都缺少第三方的校验，使得商品的质量得不到保障，还有一些交易平台没有明确的追责制度、细化质量的监控，

14、而对于大学生来说这些平台并不是很适合。因而能够开发出一个自由、信任度高、质量有所保障的二手交易平台对于大学生来说，就显得尤为重要。而本平台的开发，对于社会来说它也有着积极作用。它能够很好地推动着二手交易平台的发展，使得我们的身边的二手物品能够充分的被利用，也是环保的体现。而且二手商品物廉价美，通过二手交易平台也能让大学生们懂得节俭，而对于刚毕业的学生也是一笔收入。另一方面通过针对大学生平台交易，在一定程度上保证了质量和安全性，能更快速、更准确地将物品送到买家手上，而这种情况更加能推动二手交易的进行。而本平台意旨在能够给大学生们提供这样的一个平台，让大学生低价买到想要的商品，让卖家出售自己不要的

15、，提供一个更加快捷的方式。1.3研究现状我国的电子商务始于90年代，有了多年的发展。就目前而言，有90%以上的大学生会选择网上购买生活中需要的商品，极少数人会去实体店进行购买，因此推动了很多交易平台的发展，不仅仅是类似淘宝、京东这种大的交易平台，还有现在市面上最火的应是咸鱼交易平台，二这个平台之所以这么火，是因为它是从属于淘宝，所以它的优点就是用户数量一开始就比较大，但是缺点也因为物品的参差不齐，没有第三方的校验，并不能保证其百分百的质量。对于大学生来说，不能很好的把从学生中所不需要的一些物品交易给其他有需要的人，从而实现循环利用。所以能提供一个方便交易、面向大学生的交易平台是非常有前瞻性的。

16、1.4课题研究的内容本商品共享与交易网站，用户可以自由地在平台中进行浏览商品，也能够在注册登录的界面点击注册，并且成为本交易平台的用户，在登录后成功便可以自由查看、交易商品，也能够将商品添加到购物车进行购买。用户也可以对自己的个人信息进行管理，比如修改个人信息等。最主要的还是二手交易这个主题，用户自己能够对商品进行购买，也能够上传并出售自己想卖的商品。1.5课题的开发目标每个项目都需要在开发前制定计划，于此本交易平台的开发期望有以下的几点：(1)能在网站上浏览商品。(2)用户能够查看个人信息。(3)用户能够修改个人信息。(4)用户能将需要购买的商品添加到用户的购物车。(5)用户能够将需要出售的

17、商品上传并出售。2.系统相关技术和开发环境2.1前端相关技术2.1.1 HTML简介HTML在我们的前端代码中最为基础的技术1，就像地基那般，只有将其稳稳定死，才能经历风吹雨打也能毫不动摇。在开发本交易平台中，HTML语言也是本交易平台开发的基础语言，用于搭建网页的基石。HTML的用法为英文尖括号包含的元素(标签)，而某种标签有着自己的意义，有的是划分大小段落、换行、插入图片、用于超链接等等。HTML可以嵌入一些属性，例如HTML本身固有的属性，以及CSS层叠样式表的属性，或者JavaScript的属性，它们都会影响HTML网页的行为，影响到元素的外观跟布局。但是大部分情况下则将HTML、CS

18、S、JavaScript分开编写，看起来更加简洁，也方便读取跟修改。2.1.2 CSS简介CSS是在最早的时候由于网站只有HTML这种来传递信息的形式，而网上在阅读新闻等信息时只能看到一大串的文字，而后来便为了美化这种枯燥的新闻格式，便衍生出了这种语言，它的存在就是给大楼刷漆、美化的功能。CSS不能单独使用6，必须与HTML一起协同作业，为HTML基本的框架起着修饰作用。如果说HTML负责网页的内容部分，那么CSS则这个网页的内容是以什么样的方式来呈现的，也不再是单调的文字内容。CSS也可以用来设置网页中内容的位置布局，比如：左右的浮动、内容的定位、文字的居中等等。CSS其中的用法有三类，第一

19、是将属性代码直接写到HTML的标签中，利用style属性对内容进行修饰；第二是在添加一个style类型的样式标签之后，在这个style标签中进行CSS的代码编写，此时需要用到一些构造器等方法来绑定到HTML的元素，从而修饰HTML的内容；第三也是在开发中所使用的一种，将一个集成的CSS文件引入到HTML中，在这个CSS文件中来进行代码编写，其同样也能对HTML内容进行修饰。有了CSS的引入，对于网页来说便是整个世界有了色彩，网页中也不仅仅是一堆毫无感情的内容，而这些修饰能给网页的内容添加了丰富的描述、这些样式布局也能给用户带来不一样的感受，使得网页的浏览更加有趣味性。2.1.3 JavaScr

20、ipt简介JavaScript是在极短的时间内被开发出来的编程语言，但是它被运用推广的时间却不短，而JavaScript让一个网页不再是毫无生命的内容展示，它将网页与用户的互动提升了一个等级，就像大楼的各个框架，使其更加健硕稳固。JavaScript通过外部引入到HTML的标签Script中，在外部文件中，通过绑定DOM的元素来进行逻辑的运算与编写。因为独立在一个文件中，也使得编写过程能更专注于逻辑的运算。而JavaScript的存在，就代表着网页中所存在的内容不仅仅是固定在那里的，HTML+CSS是静态的网页，那么加上JavaScript就是动态的了。它能够让网页跟用户之间的互动更加丰富有趣

21、。2.1.4Vue简介Vue是Vue.js的简称，它是一个渐进式的框架，渐进式就代表着可以把Vue，作为应用的一部分，给予用户更加丰富的交互感受。而Vue的很多特点和在网页应用的功能3，比如：解耦视图和数据，而Vue在使用的MVVM模式中，其双向数据绑定的特点也使得在开发时有更好的开发性；可复用的组件，指的是Vue在开发中，每一个小功能都可以被划分为一个模块，而一个模块中，又将每一个小功能划分为组件，而这些组件都能够独立，也能够被重复地使用，减少了代码量工作量；前端路由技术，指的是通过改变URL，但是网页不进行整体的刷新，即不再去静态资源服务器请求，而是在之前已经请求过的资源当中，抽取一些属于

22、这个URL的代码，从而渲染到页面当中，这样就减少了请求资源的次数，减轻了服务器的压力；状态管理指的是有一个状态需要在多个页面中渲染，而多个组件共同来享用这个状态，便是状态的管理模式；虚拟DOM则是将网页的运行性能提升了一个档次，比如在运算中，有十次甚至上百次的计算，而这些计算会在虚拟的DOM上面操作，不会在真实的DOM中直接计算，而是计算完之后将对象再attch到真实DOM树上面，这就大大减少了对于计算内存的要求，速度也更快。而这些功能是Vue在前端框架中流行的一部分原因。如果说HTML、CSS、JavaScript是搭建一个房子，那么Vue的加入就是将这个房子交给了一个装修公司，而将这个房子

23、修饰得更加漂亮、便捷、完整、便是Vue这个框架的主要内容。2.2 前端开发环境2.2.1VScode简介VScode是一款由微软开发并支持多个操作系统的开源的编辑器。因为本身内置所支持的git，所以便于代码的版本管理，除去本身的文本编辑器，它还支持安装一些插件，因为它可以帮助程序员快速地编写代码，也有其他很多丰富的功能，因此选择了VScode编辑器。2.2.2Webpack简介相比于grunt跟gulp等非静态的打包工具4，它是属于开发时才用到的，在项目打包后就不需要用到了。而在打包过程中，会将各种代码和图片等进行压缩，然后放在一个js文件中，其内部会对这些代码进行空间的压缩、编程语言和其他格

24、式的转换等处理方式。2.2.3Vue-CLI简介Vue-CLI又称为命令行界面，又简称为脚手架。脚手架的具体功能是将本交易平台使用Vue开发时所需要的的目录文件等直接创建，使得我们的开发更加高效、稳定。2.2.4API简介API是一种用于本交易平台在开发时的应用程序接口，这种接口在本交易平台开发过程中，让开发人员能够获取到后台的具体数据，后台通过接口将数据封装到一个对象中，使得前端的开发人员能够对服务器的数据进行操作和开发。图2-1 系统相关技术图3.系统分析3.1 系统可行性分析1、 开发上的支出支出：由于该系统使用的大部分框架都是开源的，因而在搭建环境跟软件都不需要额外的费用。而其他的方面

25、就是需要一台电脑、网络、时间等，而这对于开发者来说，绝对不是一个难题。2、 资金上的收益而在本系统获得一定的浏览的数量之后，能使用接受用户的打赏、投放一些广告、还有收取一些支付的小费用。由于项目是针对于校园的大学生，而在本校运行成功的运作起来，推广到其他学校时，因为本系统的大量代码是可以复用的，则受到的收益将成线性增长，而使用本系统的学校越是多，则交易的流量就越大，受益就越多。3、 社会上的可行性而对于一些二手的物品，大学生们如果能在校内进行交易的话，相比于咸鱼等其他二手交易软件，会更加的感兴趣。相对于咸鱼、58同城等二手交易平台来说，本系统的手续就比较的简便，可以避免过于繁冗的步骤，轻松地进

26、行二手商品的交易。对于大学生来说，更喜欢选择一款相对可靠，相对简便的交易平台。另一个优点便是它使得我们的物品能够二次使用，不是用完不要了便扔，比如一些书籍、数码产品等，如果能够二次使用则是环保工作中很重要的一环，我们每一次的交易，都会使得身边能源的不必要消耗，也是为我们的环保做了一点小贡献。3.2 系统功能需求分析本交易平台在开发前期就要确定我们的具体功能是如何的，而经过分析并结合现在交易平台的参考，最终将功能归纳为以下几点：(1)用户功能：在本交易平台中未登陆只能浏览商品，经过登陆的用户在交易平台中可以进行更多的权限操作。(2)商品功能：在本交易平台中，能对商品的信息进行查看，也能在不同的分

27、类区查找不同的商品。(3)收藏功能：可以在本交易平台中有想要的商品却不想立刻购买，则可以将商品加入收藏、以便下次能够快速找到这个商品(4)购物车功能：可以在本交易平台对商品进行添加到购物车、删除购物车、交易等操作。(5)交易查询功能：可以在本交易平台查看已经进行购买过的商品(6)出售商品功能：可以在本交易平台上传封面、填写商品信息等操作后，出售商品3.3 系统性能需求分析(1)注册界面：如果想要拥有购买商品的权利，第一步则是要注册成为商城的用户，根据注册的规范，账号为11位学号或者是邮箱，密码则不为空。(2)登录界面：根据注册过的账号密码进行登录，如果账号密码、验证码其中有一项出错，都会提示错

28、误登陆失败。(3)用户个人信息界面：该功能仅登录过的用户才有权限使用。可以修改用户的昵称，用户在学校的学号，用户自己的联系方式，住址等等。(4)收藏界面：该功能仅登录过的用户才有权限使用。在浏览商品时，可以将需要但暂时不需要购买的商品进行收藏。(5)购物车界面：在本平台中，与其他交易平台的功能类似，将商品放到购物车可以一并购买。(6)我的交易界面：该功能仅登录过的用户才有权限使用。购买过商品之后，能够查看交易的信息。(7)我的评论界面：该功能仅登录过的用户才有权限使用。可以对商品进行评价，然后在我的评论界面看到你对商品的评价。(8)上传商品界面：该功能仅登录过的用户才有权限使用。可以进行输入商

29、品名称、上传商品的封面(图片)、输入商品出售价格、选择出售的商品种类、输入商品介绍和售后保障等信息，点击立即创建就可以出售商品。4.系统设计4.1 系统总体设计本交易平台的的模式为B/S，即浏览器端跟服务器端两方面，从前端获取到后端的接口，最后将数据传到前端中，由前端人员对网页数据的插入分布。本交易平台的应用模式也极为简单，基本上依靠用户本身就能够进行管理，在交易方面实现一对一的交接。用户在交易平台中必须经过注册才能进行商品的交易，而未注册的用户仅仅只能浏览商品，其总体的功能设计如下图所示：图4-1 系统流程图4.2系统模块设计4.2.1用户注册模块设计在开发时对于安全性的考究，注册的账号为1

30、1位学号或者是邮箱，密码则不为空。如果经过后台对用户输入的账号密码等验证成功之后，则将信息记录，即注册成功。若是违反了注册规则，则系统会提示错误，让用户重新进行注册。图4-2 注册流程图4.2.2用户登录模块设计如果用户输入的账号密码还有验证码也均为正确，经过后台验证成功，则登录成功进入到首页。如果输入的账号信息不正确，则系统会提示用户信息的错误4-3 登录流程图4.2.3用户收藏模块设计用户在浏览商品时，可以将需要但暂时不需要购买的商品进行收藏。在用户点击了收藏的按钮之后，如果收藏成功则会提示用户成功的信息，会提示错误的信息。图4-4 收藏流程图4.2.4用户评论模块设计用户在查看了商品的信

31、息之后，可以对商品进行评价或者留言，然后在我的评论界面看到你对这款商品的评价，评价成功则提示成功信息。图4-5 评论流程图4.2.5用户上传商品模块设计在用户想要出售商品时可以在个人信息界面下拉，在上传商品界面，然后可以进行输入商品名称、上传商品的封面(图片)、输入商品出售价格、选择出售的商品种类、输入商品介绍和售后保障等信息，点击立即创建就可以出售商品。如果上传商品成功的话则提示创建成功，如果上传的封面图片大于2M或者图片格式不为JPG，则会提示上传失败。图4-6 创建商品流程图4.2.6用户注销模块设计在用户想要因登录超时、切换账号等因素需要退出登录时，可以点击退出按钮。然后在登录界面重新

32、登录。图4-7 注销流程图4.3数据库设计4.3.1数据库概念结构设计(1) 表单表图4-8 表单E-R图(2)用户表图4-9 用户E-R图(3)商品表图4-10 商品E-R图4.3.2数据库逻辑结构设计每一个功能都要有数据表将其数据一一对应，使得数据完整性，而本系统开发所用到的几个重要的表单如下：(1)表单表表单表s_base_form，在后台中如果创建了一个表，则会将这个表的表单名等信息记录到这个表单表中，其的主要信息如下面表中内容所示。表4-1 表单表字段id类型字节长度是否为主键说明idbigint20y表单idtitlevarchar128n表单标题collectionvarchar

33、128n表单名(2)用户表用户表s_base_user，如果用户创建了一个账号，那么这个账号信息将会在这用户表中记录下来。其主要的信息如下面表中内容所示。表4-2 用户表字段id类型字节长度是否为主键说明idbigint20y用户idavatartext-n头像accountvarchar128n账号passwordvarchar128n密码user_namevarchar128n名字sexbigint20n性别emailvarchar128n邮箱phonevarchar128n手机typebigint20n类型school_addressbigint20n住址(3)图书表图书表c_busin

34、ess_book_library，该表主要的是记录商品的标题、商品价格、商品封面等等。其主要的信息如下面表中内容所示。表4-3 图书表字段id类型字节大小是否为主键说明idbigint20Yes商品idtitlevarchar128no商品标题covertext-n商品封面pricefloat-n商品价格starfloat-n商品星级评价comment_numint11n商品评论人数user_idbigint20n所属的用户authorvarchar128n商品的作者publishing_housevarchar128n商品出版社published_timedatetime-n商品出版的时间f

35、ormatvarchar128n商品开本papervarchar128n商品纸张enfoldvarchar128n商品包装suitedbit1n商品是否套装detailslongtext-n商品详情back_check_timedatetime-n后台审核时间not_pass_reasontext-n不能通过的理由back_check_statusbigint20n后台的审核状态deletedbit1n是否已经被删除created_attimestamp-n创建书籍的时间(4)电器表电器表c_business_electric_appliance，这个表是用户上传的电器所包含的信息。其主要的信

36、息如下面表中内容所示。表4-4 电器表字段id类型字节大小是否为主键说明idbigint20y商品的idtitlevarchar128n商品标题covertext-n商品封面pricefloat-n商品价格starfloat-n商品星级comment_numint11n商品评论数user_idbigint20n商品所属用户brandvarchar128n商品品牌modelvarchar128n商品型号powervarchar128n商品功率typevarchar128n商品类型detailslongtext-n详情back_check_timedatetime-n后台的审核时间not_pass

37、_reasontext-n不能通过的理由back_check_statusbigint20n后台的审核状态(5)运动商品表运动商品表c_business_sports_special，这个表是运动商品的标题、商品价格、商品的封面等等。其主要的信息如表4-5所示。表4-5 运动商品表字段id类型字节大小是否为主键说明idbigint20y商品idtitlevarchar128n商品标题covertext-n商品封面pricefloat-n商品价格starfloat-n商品星级comment_numint11n商品评论数user_idbigint20n商品所属用户brandvarchar128n商

38、品品牌patternvarchar128n商品型号detailslongtext-n商品详情back_check_timedatetime-n后台的审核时间not_pass_reasontext-n不能通过的理由back_check_statusbigint20n后台的审核状态(6)数码产品表数码产品表c_business_digital_square，该表主要的是记录商品的标题、商品价格、商品封面等等。其主要的信息如表4-6所示。表4-6 数码产品表字段id类型字节大小是否为主键说明idbigint20y商品idtitlevarchar128n商品标题covertext-n商品封面price

39、float-n商品价格starfloat-n商品星级comment_numint11n商品评论数user_idbigint20n所属用户brandvarchar128n商品品牌patternvarchar128n商品型号detailslongtext-n商品详情back_check_timedatetime-n后台审核时间not_pass_reasontext-n不能通过的理由back_check_statusbigint20n后台的审核状态5.系统实现5.1用户注册登录界面功能该页面在本交易平台中进入首页后，通过点击网页的右上角进入注册页面，注册时则应遵守注册规则，用户名为学号或邮箱、密码则

40、不为空，确认密码时两次的密码必须相同。注册的具体界面如图5.1.1所示：图5-1 注册界面进入到本交易平台之后，首先可以看到右上角的登录字样，点击就能进入到登录的界面，然后输入账号密码，经过后台验证后成功登录。登录的具体界面如图5.1.2所示：图5-2 登录界面5.2首页界面本交易平台即使没有通过注册账号进行登录也能进入，并且可以看到上面有许多分类，点击不同的分类能看到不同种类的商品。具体的界面如图5.2.1、图5.2.2所示：图5-3 首页界面图5-4 分类界面5.3商品详细信息功能在进入到本交易平台的首页后，可以点击商品查看其相关的信息，而更多的操作，比如以及使用加入购物车等功能，则需要通

41、过登录才能使用。界面如图5.3.1所示：图5-5 商品详细信息界面5.4个人信息界面这个功能本交易平台只对登陆过的用户进行开发，而没有进行登录的用于必须进行登录之后才能进入到这个页面。其界面如下图所示：图5-6 个人信息界面5.5购物车功能在本交易平台中，使用购物车这个功能，能方便用户对多个商品一起购买。其具体的界面如图5.5.1所示：图5-7 购物车界面5.6评论功能对于任何类型的用户，都可以使用评价这个功能，在商品信息的下方评论区进行评价留言，而评论的历史记录会被记录。具体的界面如图5.6.1所示： 图5-8 评论功能界面5.7上传商品功能本系统的用户们可以将自己想要出手的商品进行上传出售

42、。可以输入名称、上传封面、输入商品出售价、选择商品种类、输入商品介绍、售后保障等信息，然后会对上传的商品会通过验证上架到该平台。界面如图5.7.1所示：图5-9 上传商品功能界面6.系统测试6.1测试概述在这个21世纪中，社会是一个信息化时代，而随着网络不断的优化迭代，对于网站的安全也是开发中的重要一环，而为了让开发的网站，能够持续地按照预期的运行，就需要定期和持续的维护8。具有良好功能的计算机软件，能让使用人员在使用软件的同时，能拥有更好的用户体验，进而能保证软件的使用人员的操作正确，完成所预期的功能7。所以，我们做好了软件测试就是代码的维护中的一个重要环节，可以检测到代码是不是有错误、是不

43、是能在原代码上有所更新，对于我们开发的效率影响极大。而测试是开发的收尾工作，但也是最重要的工作之一，如果在上线后仍检测出了问题，那么成本相比开发时的费用要多得多，这样就能或多或少的降低我们开发的成本，避免一些不必要的风险。6.2测试环境下面为开发本交易平台所使用的的电脑测试的环境：(1) CPU：Intel(R)Core(TM)i7-3630QM CPU 2.40GHz(2) RAM：12G(3) OS：Windows 10 x64(4) DB：MySql (5) Browser：Google Chrome6.3测试用例表6-1 测试用例表用例编号功能概述操作条件预计结果01注册账号输入账号为邮箱或者为学号、密码不为空注册成功02登录账号是否注册过、账号密码的正确性登录成功03收藏车将商品收藏到收藏车添加成功04购物车将商品添加到购物车添加成功05上传出售商品上传添加封面等信息上传成功图6-1 注册成功图6-2 登录成功图6-3 添加收藏车图6-4 添加收藏车成功图6-5 添加购物车图6-6 添加购物车成功图6-7 上传商品图6-8 上传商品成功图6-9 查看上传商品6.4测试分析在经过一系列的测试后，可以知道的是本系统在API接口上没有出问题，而这也是我们预期的。而在测试的目的还是让开发人员发