ssm基于WEB技术的在线商品交易平台的设计+vue

一、技术路线:

开发语言:Java

前端技术:JavaScript、VUE.js(2.X)、css3

数据库:MySQL 5.7

数据库管理工具:Navicat或sqlyog

开发工具:IDEA或Ecplise

二、项目介绍:


三、运行截图:


5系统实现

3.1管理员功能模块实现

3.1.1管理员登录

管理员可以选择任一浏览器打开网址,输入信息无误后,以管理员的身份行使相关的管理权限,管理员登录界面设计如图3-1所示。

82f07db0e8acd5d9dcd8763c99468b1d.jpeg

图3-1管理员登录界面

3.1.2个人中心

个人中心模块设计的主要目的是方便管理员对密码等个人信息进行管理,用户可以根据自己的实际需求,选择每隔一段时间,更新个人账户的用户名和密码,修改密码界面设计如图3-2所示,个人信息界面如图3-3所示。

38108c4826d501353cff7aa4457c2d15.jpeg

图3-2修改密码界面

18502c22c15c295422c8c30a3a8100cf.jpeg

图3-3个人信息界面

3.1.3用户管理

管理员可以通过选择用户管理,管理相关的用户信息记录,比如进行查看用户的联系电话、手机号、身份证等信息,修改用户的真实姓名,用户管理界面设计如图3-4所示

e54f4b4aca26d4c6d3a8acd375187d42.jpeg

图3-4用户管理界面

3.1.4商品管理

管理员可以通过选择商品管理,管理相关的商品信息记录,比如进行查看商品信息标题,修改商品信息来源等操作,商品管理界面设计如图3-5所示。

030de2524d6ce18ad250338a4dd506cf.jpeg

图3-5商品管理界面

3.1.5公告管理

管理员可以通过选择公告管理,管理相关的公告信息记录,比如进行查看公告详情,删除错误的公告信息,发布公告等操作,公告管理界面如图3-6所示。

9fd59e4609c1ea3198bbc9abbd3bfe45.jpeg

图3-6公告管理界面

3.1.6公告类型管理

管理员可以通过选择公告类型管理,管理相关的公告类型信息,比如查看所有公告类型,删除无用公告类型,修改公告类型,添加公告类型等操作,公告类型管理界面设计如图3-7所示。

a5dd6577a7c74e3f95825967392e5c28.jpeg

图3-7公告类型管理界面

3.1.7商品类型管理

管理员可以通过选择商品类型管理,管理相关的商品类型信息,比如查看所有商品类型,删除无用商品类型,修改商品类型,添加商品类型等操作,商品类型管理界面设计如图3-8所示。

fd913ef1d1035083addad91d959516cb.jpeg

图3-8公告类型管理界面

3.1.8商品评价管理

管理员可以通过选择商品评价管理,管理相关的商品评价信息,比如查看所有商品评价,删除无用商品评价,修改商品评价,添加商品评价等操作,商品评价管理界面设计如图3-9所示。

9d8df8f733783c2f30f3a96d628a6212.jpeg

图3-9商品评价管理界面

3.1.9商品收藏管理

管理员可以通过选择商品收藏管理,管理相关的商品收藏信息,比如查看所有商品收藏,删除无用商品收藏,修改商品收藏,添加商品收藏等操作,商品收藏管理界面设计如图3-10所示。

80004066160dd44e5a270e56c9e91788.jpeg

图3-10商品收藏管理界面

3.1.10商品订单管理

管理员可以通过选择商品订单管理,管理相关的商品订单信息,比如查看所有商品订单,删除无用商品订单,修改商品订单,添加商品订单等操作,商品订单管理界面设计如图3-11所示。

5f7c1f6b582816aee45e721e82bb4156.jpeg

图3-11商品订单管理界面

3.1.11轮播图管理

管理员可以通过选择轮播图管理,管理相关的轮播图信息,比如查看所有轮播图信息,删除无用轮播图,修改轮播图名称,添加轮播图等操作,轮播图管理界面设计如图3-12所示。

241635c966414fb693a37c11d86cfb86.jpeg

图3-12轮播图管理界面

3.2用户功能模块实现

3.2.1用户登录

用户可以选择任一浏览器打开网址,输入正确的账户和密码信息后,登录系统,根据自己的实际需要,选择相关的功能模块,进行操作和使用,用户登录界面设计如图3-13所示。

de3594e13f97409413cff0a902b32719.jpeg

图3-13用户登录界面

3.2.2个人中心

个人中心模块设计的主要目的是方便用户对密码等个人信息进行管理,用户可以选择查看用户姓名、手机号、头像、身份证号、电子邮箱、余额等信息,也可以选择修改个人信息资料,更新个人密码信息,修改密码界面设计如图3-14所示,个人信息界面如图3-15所示。

4b6f0418ed57b3d80e99c0e5b8db5047.jpeg

图3-14修改密码界面

10956d595e6f5cceef9381c8408fe286.jpeg

图3-15个人中心界面

3.1.3公告管理

用户可以通过选择公告管理,查看详细的公告信息记录,比如进行查看公告名称、公告图片、公告类型、公告发布实际等信息,公告管理界面如图3-16所示。

12aa34475d5f70e405dca8561da35e08.jpeg

图3-16公告管理界面

3.1.4商品评价管理

用户可以通过选择商品评价管理,查看详细的商品评价信息记录,比如进行查看商品名称、用户姓名、评价内容、评价时间、回复内容、回复时间等信息,商品评价管理界面如图3-17所示。

2cfe801f187fbe1ef2135db985cf6a56.jpeg

图3-17商品评价管理界面

3.1.5商品收藏管理

用户可以通过选择商品收藏管理,查看详细的商品收藏信息记录,比如进行查看商品名称、商品照片、商品类型、用户姓名、收藏时间等信息,商品收藏管理界面如图3-18所示。

934fefaf286cf8834674224c6bb19bb9.jpeg

图3-18商品收藏管理界面

3.1.6商品订单管理

用户可以通过选择商品订单管理,查看详细的商品订单信息记录,比如进行查看收货人、电话、地址、商品名称、商品照片、商品类型、用户姓名、订单号、购买数量、实付价格、快递公司等信息,商品订单管理界面如图3-19所示。

544b7f12396badca861dc4dc32d07b8f.jpeg

图3-19商品订单管理界面

3.3系统测试

3.3.1测试概述

在系统将要投入使用前,需要进行的一个必不可少的工作环节就是系统测试。测试人员通过系统测试工作,验证在系统的使用过程中,界面环境是否整洁友好,用户账号信息是否安全可靠,性能方面是否稳定健壮,功能方面是否符合用户需要等。系统测试不仅需要找出系统运行中会出现的问题,还需要分析产生这些问题的原因,并且找到解决这些问题的方法[21]。

系统测试主要分为黑盒测试和白盒测试[22]。黑盒测试即功能测试,其主要是站在使用者的角度对系统进行测试。在黑盒测试过程中,测试人员无需关注和了解系统内部的代码等内容,根据系统的程序接口,运行和检测系统功能。白盒测试即结构测试,其主要是站在程序员的角度对系统进行测试。与黑盒测试不同,白盒是一种基于代码的测试过程,测试人员需要了解系统内部的代码等内容,通过检测实际的系统程序状态、逻辑路径等情况与预期达到的结果是否一致,确认系统的设计内容是否符合规范。

3.3.2测试流程

测试环境是使用一台配置不高的电脑或者笔记本,配置Windows 7或者更高版本的操作系统环境,在浏览器中输入本系统网址,如果能正常访问本系统的首页,说明本系统可以成功的进行测试。

本系统主要使用功能测试的方法,测试系统功能效果。测试流程图如图6-1所示。

9bcc8fc26f936b61f2208f9aa52b77e2.jpeg

图6-1测试流程图

3.3.3商品信息管理模块测试

商品信息管理模块测试如表6-1所示。

表6-1商品信息管理模块测试表

测试项目编号

001

测试项目名称

商品信息管理模块

测试用例编号:001

(1) 输入:商品名称:商品名称1

(2) 输出:操作成功,页面自动跳转到商品信息管理相应的商品信息成功查询界面

(3) 步骤及操作:在浏览器中输入网站,点击商品信息管理按钮,输入商品名称信息,对相关商品信息进行查询

商品信息管理模块测试的实现界面如图6-2,图6-3所示。

d16aff33a7183c1486d20f82c8a81a3f.jpeg

图6-2图书信息管理测试界面1

c686821b92370afe906ed60e27b06310.jpeg

图6-3商品信息管理测试界面2

3.3.4商品订单管理模块测试

商品订单管理模块测试如表6-2所示。

表6-2商品订单管理模块测试表

测试项目编号

002

测试项目名称

商品订单管理模块

测试用例编号:002

(1) 输入:订单号:1648617876894

(2) 输出:操作成功,页面自动跳转到商品订单管理相应的商品订单信息成功查询界面

(3) 步骤及操作:在浏览器中输入网站,点击商品订单管理按钮,输入订单号信息,对相关商品订单信息进行查询

商品订单管理模块测试的实现界面如图6-4,图6-5所示。

cf2a52836c91ac6a3f2ebe4ecebe2bf3.jpeg

图6-4商品订单管理测试界面1

8094a493ac44804822a2ce3738d5a225.jpeg

图6-5商品订单管理测试界面2

3.3.5商品评价管理模块测试

商品评价管理模块测试如表6-3所示。

表6-3商品评价管理模块测试表

测试项目编号

003

测试项目名称

商品评价管理模块

测试用例编号:003

(1) 输入:商品名称:商品名称1

(2) 输出:操作成功,页面自动跳转到商品评价管理相应的商品评价信息成功查询界面

(3) 步骤及操作:在浏览器中输入网站,点击商品评价管理按钮,输入商品名称信息,对相关商品评价信息进行查询

商品评价管理模块测试的实现界面如图6-6,图6-7所示。

4982cb57083643e0c74957c77dfa880c.jpeg

图6-6商品评价管理测试界面1

913f6464cce71c024a866580b7babeb8.jpeg

图6-7商品评价管理测试界面2

3.3.6商品收藏管理模块测试

商品收藏管理模块测试如表6-4所示。

表6-4商品收藏管理模块测试表

测试项目编号

004

测试项目名称

商品收藏管理模块

测试用例编号:004

(1) 输入:商品名称:商品名称2

(2) 输出:操作成功,页面自动跳转到商品收藏管理相应的商品收藏信息成功查询界面

(3) 步骤及操作:在浏览器中输入网站,点击商品收藏管理按钮,输入商品名称信息,对相关商品收藏信息进行查询

商品收藏管理模块测试的实现界面如图6-8,图6-9所示。

adca384b62394aa11567a00bde449bc7.jpeg

图6-8商品收藏管理测试界面1

d1a02e8a46ab4849aafc5fe9bc9fc9cb.jpeg

图6-9商品收藏管理测试界面2

3.3.7公告信息管理模块测试

公告信息管理模块测试如表6-5所示。

表6-5公告信息管理模块测试表

测试项目编号

005

测试项目名称

公告信息管理模块

测试用例编号:005

(1) 输入:公告名称:公告名称1

(2) 输出:操作成功,页面自动跳转到公告信息管理相应的公告信息成功查询界面

(3) 步骤及操作:在浏览器中输入网站,点击公告信息管理按钮,输入公告名称信息,对相关公告信息进行查询

公告信息管理模块测试的实现界面如图6-10,图6-11所示。

fdf0155d933f5a667d88f7d77189783b.jpeg

图6-10公告信息管理测试界面1

69fcf66400d830264b831172122e76af.jpeg

图6-11公告信息管理测试界面2

3.3.8测试结果

在一定程度上,系统会因为测试环境的不同,进而使得产生的测试结果也不同。通过在不同类型的浏览器上运行本系统,不断地查找出系统可能存在的问题,再对相关的代码进行修改,改进和完善系统设计,进而达到提高系统的适用性的目的。通过在一台装有Windows10操作系统的计算机上,使用IE、谷歌等浏览器,对系统的主要功能模块进行了测试。本文主要对系统进行了商品信息管理、商品订单管理、商品评价管理等功能模块测试。综合上述的测试结果分析可知,本系统的界面设计、数据安全、功能实现等方面是比较理想的,能够满足使用者的现实使用需求,在有效性和稳定性也是有所保障的,所以基于WEB技术的在线商品交易平台的实现基本上是比较成功的。

3.4本章小结

本章通过展示系统相关的功能模块运行图,介绍系统主要功能模块的操作流程。系统使用者角色主要分为管理员和用户,管理员角色功能设计主要包括商品等模块。通过运行系统功能模块,展示操作界面,让用户更好的了解和使用本系统。最后,根据以上相关的系统测试内容显示,本系统的测试结果比较顺利,系统性能比较稳定,基本上没有出现问题。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

huida_kaifa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值