计算机科学与技术-基于Vue+node的网上书店销售系统

基于Vue+Node框架的网上书店销售系统的设计与实现摘要：随着国内互联网规模的迅速发展，以及人民生活水平和生活方式的改变，网购在我们的生活中占的分量越来越重要。在传统方式下，由于网络的局限和技术的缺陷，买家只能通过线下实体店购买，这种销售模式在当今网络发达的时代显得有点落后，相对于到实体店购买，人们往往更喜欢足不出户就能浏览到各种各样的书籍并且购买。因此，网上书店是随着计算机技术和网络技术发展起来的一种新型销售图书系统，这对于传统的实体书店具有一定的优越性，人们可以足不出门就可以购买到喜欢的书籍，还能省去了查找的时间，基于可以实现商家和卖家双赢的基础上，网上书店销售系统便应运而生。本课题首先分析了网上购书的背景和给人民生活带去了哪些便利性，充分体现了网上书店销售系统设计和实现的社会可实行性，其次对系统进行可需求的分析，充分了解系统的具体需求，为后期的设计做铺垫。接着分析了系统如何实现，本书店销售系统采用了B/S架构，采用了Vue+Node+Mysql开发体系,Vue+Element作为前端框架，对构建渐进式视图具有非常好的优势，Vue具有非常强大的api，能为书店系统提供良好的支持，而Node作为后端语言，在书写服务器的时候，因其轻量级的语言，在写中小系统非常方便。最后在上线部署之前对系统采用了严格的测试，保证其安全性。网上书店销售系统的实现，既能为商家拓展客户渠道，减少实体店的租金压力，也能为买家提供便利的服务，例如送货上门，实现共赢。关键词：Node，电子商务，电子书店，图书，VUE框架

DesignandImplementationofonlinebookstoresalessystembaseonVue+NodeframeworkAbstract：WiththerapiddevelopmentofdomesticInternetscaleandthechangeofpeople'slivingstandardandlifestyle,onlineshoppingplaysanincreasinglyimportantroleinourlife.Inthetraditionalway,duetothelimitationsofthenetworkandtechnicaldefects,buyerscanonlybuythroughofflinephysicalstores.Thissalesmodeisabitbackwardintheeraofthedevelopednetwork.Comparedwiththephysicalstore,peopletendtoprefertobrowseallkindsofbooksandbuythemwithoutleavinghome.Therefore,withthedevelopmentofcomputertechnologyandnetworktechnology,onlinebookstoreisanewtypeofbooksalessystem,whichhascertainadvantagesfortraditionalphysicalbookstores.Peoplecanbuythebookstheylikewithoutgoingoutofthehouse,andalsosavethetimeofsearching.Basedonthewin-winsituationbetweenbusinessesandsellers,theonlinebookstoresalessystemwillbereadyLife.Thistopicfirstanalyzesthebackgroundofonlinebookpurchaseandwhatconveniencesitbringstopeople'slife,whichfullyembodiesthesocialfeasibilityofthedesignandimplementationofonlinebookstoresalessystem.Secondly,itanalyzesthesystemrequirements,fullyunderstandsthespecificneedsofthesystem,andpavesthewayforthelaterdesign.Thenitanalyzeshowtorealizethesystem.ThebookstoresalessystemadoptsB/SarchitectureandVue+node+MySQLdevelopmentsystem,Asafront-endframework,Vue+elementhasaverygoodadvantageinbuildingprogressiveviews.VuehasaverypowerfulAPI,whichcanprovidegoodsupportforthebookstoresystem.Asaback-endlanguage,nodeisveryconvenientforwritingsmallandmedium-sizedsystemsbecauseofitslightweightlanguagewhenwritingservers.Atlast,thesystemistestedstrictlybeforedeploymenttoensureitssecurity.Therealizationofonlinebookstoresalessystemcannotonlyexpandcustomerchannelsforbusinesses,reducetherentpressureofphysicalstores,butalsoprovideconvenientservicesforbuyers,suchasdeliverytohome,toachievewin-win.Keywords:Node，E-commerce,E-bookstore，Book，VUE目录TOC\o"1-3"\h\u第1章绪论 第1章绪论1.1系统开发的背景及意义在互联网的急速发展下，单纯的线下销售已经无法满足客户的购买需求，加上实体店的高额租金让商家承担了很大的压力，而技术上的发展和来自电商对实体店的冲击，于是网上书店销售系统应运而生。通过这个系统，客户可以在网上浏览商品概括，了解商家信息，省去繁琐的线下消费环节，并可以节约时间，买到物美价廉的书本，商家则可以通过此网上销售系统上线自家产品，面向互联网，增大客户流，减少实体店的花销成本，得到更多的利润。网上书店销售系统开发的意义在于既可以给商家带来利益减少支出，又可以给用户带来便利和实惠的商品，在如今基本是网络至上的社会，相对于以往，现做用户几乎很少想去实体店买书，这对于实体店开拓客源就带来了很大的难度。然而，随着网上书店的出现，用户可以享受动动手就能买到喜欢的书，不得不说，这样的方式能给用户节约很多的时间，由此可见，该系统的开发给用户和商家带来了共赢，这就是意义所在。1.2国内外网上书店研究现状根据调查报告显示，国外的电子商务发展一直处于世界的领先，各类电商琳琅满目，成立于1995年的亚马逊，一开始就选择图书作为网上销售的商品之一，根据多年的发展，亚马逊的网上书店已经在全世界互联网平台建立了35万家网上书店，2018年的总规模突破2千亿，同比增长36%。国外其他的网上销售书店，例如美国的巴诺书店和其他出版商、批发商以及众多的实体书店，也开始纷纷效仿网上书店销售的模式，一时间使得国外的网上书店数量激增，长期以来，网上书店的势头发展良好。1.2.1国外网上书店发展状况1.2.2国内网上书店发展状况近年来我国图书零售市场不断增长，但新书品种继续缩减。数据显示，截止到2019年，我国图书零售市场码洋规模突破千亿，达到

1022.7

亿元，同比增长

14.40%。其中新书品种为

19.4

万种，同比减少

6.70%，

降幅较

2018

年的

0.49%明显扩大。从渠道方面来看，网店渠道占比不断扩大，实体书店与网络书店的差异愈加凸显。根据北京开卷数据显示，2019年，我国网店渠道的码洋规模达到

715.1

亿元，同比增长

24.90%，占整体市场码洋规模近

70%；而实体书店码洋规模为

307.6

亿元，同比减少

4.24%。从渠道折扣上也进一步说明实体书店与网络书店的差异明显，根据北京开卷数据显示2019年线上图书销售折扣率为59折，较2018年64折进一步降低；而实体渠道的销售折扣则为89折。从不同细分品类来看，心理自助折扣最低，仅为4折；其次为学术文化与少儿类、自然科学、教辅、经济与管理等多数品类，其折扣分别为5-6折、6-7折。1.3论文的主要研究内容本论文主要介绍了在Vscode平台上用当前流行的Express框架开发一个便于用户在网上购书的系统过程。论文的主要研究内容如下：（1）利用Vscode平台、B/S多层体系结构、MVVC设计模式和Vue+Node开源框架实现一个用户和商家交互良好的书店销售系统。（2）介绍了系统实现的主要技术，包括了MVVC设计模式和Vue+Node框架的开发流程。（3）首先大量收集了周边大部分消费者对网上书店的需求，进行了可行性分析，最终得出该系统具有可实行性。其次，在需求分析的研究基础下，做了详细的系统设计，其中包括系统总价架构、数据库设计和系统模块的设计。（4）详细讲述了如何利用黑盒测试对系统进行严格性的检测。第2章系统需求分析2.1系统总体需求通过走访各大商家和查询了大量的资料，根据实际出发，本系统为用户提供了前台商城系统，主要用于浏览商品、购买图书；为商家提供了书店后台管理系统，主要用于对商品的添加和更新，对人员进行管理和进行客户的订单进行管理。2.2系统的业务需求分析根据研究的得出书店销售系统的需求如下：用户需求：（1）书籍的浏览和搜索。用户能进入书店网站能够清晰地浏览不同分类的书籍、热销的书籍和全部商品等，也可以在头部的通过关键字(图书名称)进行全局搜索到相关商品。（2）购物车。用户在登录的前提下能够使用购物车功能，例如在商品详情页面加入购物车和立即购买商品。也可以在进入购物车查看自己的商品信息并进行结算购买。（3）收货地址管理。进入个人主页选择地址列表能查看所有的收货地址，还可以进行收货地址的添加、删除和修改。（4）留言建议。用户可以通过留言建议模块对商家进行留言，用户可以提议商家对哪些书籍进货。商家需求：（1）人员管理：管理员可以定期对人员进行更新管理，包括管理员和用户管理。（2）商品管理：商家可以对商品进行管理，例如增加商品、更新商品(3)订单管理：商家可以登录后台管理系统查看用户的所有订单并进行管理(4)图书分类：分类是绝大多数商城系统所必须的，因为涉及的商品种类众多，因此分类功能变得十分重要，商家能在添加商品的时候选择图书的分类2.3系统的功能需求分析2.3.1后台管理系统功能需求分析图书管理模块(1)添加图书添加图书是指商家对书店的书籍进行上架，让用户可以浏览和购买。添加图书需要填写图书的详细信息。例如图书名、作者和价格等信息(2)删除图书删除图书的功能是在商家不再销售这种图书的时候，在书店后台系统把该图书删除，不再渲染在客户端页面,在执行删除操作之前弹出删除的确认提示框。(3)修改图书修改图书是指对上架的图书进行信息的修改。受市场或者商家的影响，管理员需要根据实际情况对上架的图书的信息进行修改，首先点击需要修改的图书，通过调用服务器接口拿到图书信息，然后渲染在修改的页面，管理员修改需要改动的信息，修改完成提交给服务器，验证通过之后返回修改成功提示消息,否则返回修改失败的信息，最后重新刷新商品列表信息(4)查询图书查询图书是指可以查看所有的图书列表信息(5)图书上下架图书上下架功能是指是否在书店商城的展示。改功能设置了一个开关的状态按钮，当点击打开按钮默认为上架功能,这样会把图书展示在商城页面,当点击关闭按钮默认为下架,该图书就商城页面就会不再展示。订单管理进入订单列表能显示所有用户的订单信息，还可以对已付款但未发货的订单发货请求。登录/注册模块登录注册是一个网站必不可少的功能，也是衡量网站是否安全的重要标准。登录注册分为客户端的管理员端，其中管理员只有登录功能，拥有唯一固定的账号。2.3.2商城系统功能需求分析浏览商品通过进入商城可以浏览所有的商品列表，包括详细信息购物车用户能进通过商品详情把商品加入购物车，可以进入购物车查看商品并且能在选择的时候进行结算。个人主页用户进入个人主页可以对收货地址进行管理，例如增加收货地址、查看收货地址；可以查看个人订单信息。2.4数据流图用户登录数据流图用户登录数据流的过程：用户进入登录界面，输入账号和密码，数据发送到后端进行处理，验证成功则跳到商城首页。用户登录DFD如图2-1所示：图2-1用户登录DFD用户注册数据流图用户注册数据流的过程：用户进入注册。用户登录DFD如图2-2所示：图2-2用户注册DFD用户查询/浏览数据流图用户查询/浏览数据流的过程：用户进入商城页面，可以任意浏览商品信息，也可以通过搜索关键字，数据发送到后端进行处理，搜索成功则跳到商城首页。用户查询/浏览DFD如图2-3所示：图2-3用户查询/浏览DFD用户收货地址数据流图用户收货地址数据流的过程：用户个人主页的收获地址栏，对地址信息进行增删改查，数据发送到后端进行处理，成功后返回地址列表。用户收货地址DFD如图2-4所示：图2-4用户收货地址DFD购物车数据流图购物车数据流的过程：用户在商品详情加入购物车，商品信息会保存到购物车中，数据发送到后端进行处理，可以进入购物车查看加入的商品的信息。购物车DFD如图2-5所示：图2-5购物车DFD商品结算数据流图商品结算数据流的过程：用户进入购物车或者立即购买，选择要结算的商品，前端把结算的商品信息发送到订单页面，并把订单订单信息显示给用户。商品结算DFD如图2-6所示：图2-6商品结算DFD添加商品数据流图添加商品数据流的过程：用户进入添加商品界面，输入要添加的商品信息，数据发送到后端进行处理，添加成功则返回最新的商品列表给管理员。用添加商品DFD如图2-7所示：图2-7添加商品DFD编辑商品数据流图编辑商品数据流的过程：管理员进入商品编辑页面，输入要修改的图书信息(图书名称，价格，作者等)，数据发送到后端进行处理，编辑成功则把商品列表返回给管理员。编辑商品DFD如图2-8所示：图2-8编辑商品DFD订单管理数据流图订单管理流的过程：管理员进入订单列表，后端给管理员所有的订单数据，通过编辑订单信息，数据发送到后端进行处理，编辑成功返回最近的订单数据给管理员。订单管理DFD如图2-9所示：图2-9订单管理DFD分页数据流图分页数据流的过程：管理员进入商品列表，输入pagesize，数据发送到后端进行处理，改变当前页码显示的商品数量。分页DFD如图2-1所示：图2-1分页DFD2.5本章小结本章给出了整个系统的需求分析，其中包括系统总体需求、业务需求和功能需求分析，总分阐述了用户和商家的需求，让接下来的系统设计做了要求。同时还给出了数据流图，充分展示了系统数据的流向。第3章系统设计3.1系统设计3.1.1系统总体架构设计系统的架构设计是在业务需求已经清晰的前提下进行的，数据架构模型一般放在数据库中进行设计，运行架构和物理架构基本相近，只是在物理架构中加了数据的流向，因此一些系统设计使用物理架构代替了运行架构。开发架构模型图给出了技术体系是B/S结构，开发框架选择MVVC，开发语言是Node。业务逻辑层是Express的service，实体层是Express的model。数据层由Mysql数据库管理，以下图3-1是系统的总体架构图：3.1.2模块HIPO关系图HIPO是用来描述书店销售系统的层次关系的图形，可以清晰地看到系统之间各个层次的关联。如下图3-2所示：3.1.3数据库设计根据用户和系统需求分析，可以得知数据库的设计应该要符合以下要求：数据库需求分析：网上书店销售系统是个典型的电销系统，因此针对他要实现的业务功能，数据库中应该有以下实体：用户：包括用户ID、账号、密码、地址、联系电话等管理员：包括用户ID、账号、密码、地址、联系电话等订单：有关的图书信息和数量等图书：包括图书ID、图书名称、图书价格、类别等逻辑结构设计：本系统设计了8个表，主要的表是用户信息表User、管理员信息表Admin、商品信息表GoodInfoList、订单列表Order、商品类别表Catetory、购物车表ShopCart。具体表结构的设计如下：User（用户信息）表表3-1User表列名字段类型是否为空字段说明useridVARCHAR(30)NOTNULL用户IdusernameVARCHAR2(30)NOTNULL用户名passwordVARCHAR2(20)NOTNULL密码ageINT(20)NULL年龄mobileNUMBER(1)NULL电话addressVARCHAR2(20)NULL地址emailVARCHAR2(30)NULL电子邮箱表3-1给出了存放用户信息的数据库表结构，表中各字段代表的含义在第五列“注释”中有具体描述，该表的主键为userid。(2)建议表该表为建议表，用于收集用户提交的建议信息。表结构如表3-2所示：表3-2建议表列名字段类型是否为空字段说明suggestidNUMBER(15)NOTNULLidcontengVARCHAR2(30)NOTNULL建议内容usernameVARCHAR2(30)NOTNULL用户名称(3)订单表该表为订单表，用于收集用户要购买图书的基本信息(如订单ID、图书名称、图书价格、图书数量、是否付款、收货地址、用户名称、订单日期等），表结构如表3-3所示：表3-3订单表列名字段类型是否为空字段说明orderidNUMBER(15)NOTNULLidbooknameVARCHAR(30)NOTNULL图书名称priceVARCHAR(20)NOTNULL图书价格amoutVARCHAR(20)NULL图书数量addressDATENULL收货地址orderdateDATENULL订单日期usernameNUMBER(3)NOTNULL收货人is_payNUMBER(1)NOTNULL支付状态(0未付，1已付)(4)图书表该表为图书数据表，用于保存商品的基本信息（如图书ID、图书名称、图书价格、图书作者、图书分类等），表结构如表3-4所示：表3-4图书表列名字段类型是否为空字段说明bookidNUMBER(15)NOTNULL图书id(主键)booknameVARCHAR2(30)NOTNULL图书名称priceVARCHAR2(20)NOTNULL图书现价oldpriceVARCHAR2(20)NULL图书原价authorVARCHAR2(20)NULL图书作者categoryVARCHAR2(20)NULL图书分类is_sellVARCHAR2(20)NULL是否上架0是下架1是上架descVARCHAR2(20)NULL图书描述bookImgVARCHAR2(20)NOTNULL图书图片cateidVARCHAR2(20)NULL分类idhot_sellVARCHAR2(20)NULL是否热销商品0为不热销(5)管理员表该表为管理员信息表，用于保存管理员的基本信息（如管理员ID、管理员名称、管理员电话、管理员地址、管理员角色等），表结构如表3-4所示：表3-5管理员表列名字段类型是否为空字段说明adminidNUMBER(15)NOTNULLidusernameVARCHAR2(30)NOTNULL管理员名称mobileVARCHAR2(20)NOTNULL管理员电话addressVARCHAR2(20)NULL管理员地址roleVARCHAR2(20)NULL管理员角色passwordVARCHAR2(20)NOTNULL管理员密码ageVARCHAR2(20)NOTNULL年龄(6)图书分类表该表为图书分类，用于保存图书分类的基本信息（如分类id、分类名称等），表结构如表3-4所示：表3-6图书分类表列名字段类型是否为空字段说明cateidNUMBER(15)NOTNULL分类id(主键)categoryVARCHAR2(30)NOTNULL分类名称(7)购物车表该表为购物车，在用户添加购物车时要保存的的基本信息（如图书id、用户id、订购数量、图书名称、图书单价、图书总价和图书照片等），表结构如表3-4所示：表3-7图书分类表列名字段类型是否为空字段说明idInt(15)NOTNULL购物车iduseridVARCHAR2(30)NOTNULL用户idcountINT(15)NOTNULL购物车图书数量singlepriceINT(15)NULL图书单价SumpriceINT(15)NULL图书总价bookImgVARCHAR2(30)NULL图书照片收货地址表该表为购物车，在用户添加购物车时要保存的的基本信息（如图书id、用户id、订购数量、图书名称、图书单价、图书总价和图书照片等），表结构如表3-4所示：表3-7图书分类表列名字段类型是否为空字段说明idInt(15)NOTNULL购物车iduseridVARCHAR2(30)NOTNULL用户idcountINT(15)NOTNULL购物车图书数量singlepriceINT(15)NULL图书单价SumpriceINT(15)NULL图书总价bookImgVARCHAR2(30)NULL图书照片3.2前台商城功能详细设计3.2.1用户登录功能商城的很多操作都要在登录之后才能操作，例如购物车。顾客可以点击商城头部的登录跳转到登录页面，此时页面显示两个form表单的文本输入框，一个用来输入账号，另一个用来输入密码，底部有一个登录的按钮。顾客可以输入自己的账号和密码进行登录，如果输入信息有误，可以一键删除，这里用的是表单的cleared属性。当输入完整的信息，点击登录按钮前端即可通过axios发送请求到后端，后端接收到账号和密码，会立即到数据库进行查询，查询完毕将返回相应的数据给前端。前端根据后端返回的数据进行判断，如果账号和密码正确，则提示登录成功并跳转到商城首页，否则将提示登录失败，请重新输入。根据以上分析，用户登录流程图如下图3-3所示：图3-3用户登录流程图3.2.2用户注册功能用户可以通过点击注册账号进行注册，填入账号和密码，这两项为必填项，不能为空。输入完之后点击注册按钮发送axios请求到后端，后端接收请求，并将请求的数据去数据进行查询，接着给前端响应结果。前端根据返回的数据进行判断，如果已存在该账号，会提示账号已存在，否则会提示注册成功，并跳转到登录页面。根据以上分析，用户注册流程图如下图所示：图3-4用户注册流程图3.2.3商品浏览功能用户进入商城，可以对商品进行浏览，在商城的首页展示的是部分商品，例如热销商品和分类的商品，用户也可以点击头部的全部商品，进入全部商品的页面进行全面的浏览。用户也可以点击任意商品的图标进入商品详情页面进行浏览。但是购物车的商品信息只有在用户登录的状态才能浏览。根据以上分析，商品浏览流程图如下图3-5所示：图3-5商品浏览流程图3.2.4商品搜索功能为了方便用户精确找到所需的商品，用户可以通过搜索栏输入要查询的商品名称，输入完之后点击搜索按钮，将会发送请求到后端，后端接收到搜索的关键字(图书名)，然后去数据库查询相关数据，接着给前端响应结果，如果查询有相关图书，就会给用户显示出来，否则提示查无此书。根据以上分析，用户搜索商品流程图如下图3-7所示：图3-7搜索商品流程图3.2.5购物车功能购物车只有用户在登录的状态才能使用，如果在未登录的时候点击购物车或者加入购物车，会提示用户登录才能使用购物车。用户在浏览商品详情的时候，可以点击加入购物车按钮把商品添加到购物车。用户还可以点击购物车查询购物车所有的商品信息，也可以删除购物车的某个商品，并且可以选中想要结算的商品，此时会计算选中商品的总金额，接着点击结算按钮，会跳转到订单页面。根据以上分析，购物车流程图如下图3-8所示：图3-8购物车流程图3.2.6收货地址功能用户可以点击个人主页栏目进入个人主页，然后点击收货地址下面的添加收货地址，需要输入收货人名字、电话和收货地址，输入完成点击添加地址按钮发送请求到后端，后端接收请求并把数据保存到数据库。前端成功添加地址自动跳转到收货地址的列表。用户也可以对现有的收货地址进行删除或者修改。根据以上分析，收获地址流程图如下图3-9所示：图3-9收获地址流程图3.3后台管理系统功能详细设计根据需求分析，为了方便商家对书店的管理，需要一个对书店管理的后台系统，由此得出后台管理系统大致需要具有以下一些功能模块，例如登录功能，人员管理功能、商品管理功能、商品分类功能和订单管理功能。下面是对后台管理系统的详细设计。3.3.1登录功能管理员登录后台系统会强制跳转到登录页面，这是因为后台管理系统加了路由守卫功能，当客户尚未登录的时候，不能访问其他页面，这极大提高了系统的安全性。用户在登录界面输入个人的账号和密码，前端会对输入的格式进行校验，如果不符合要求的，点击登录按钮会失败。如果符合格式，则发送请求到后端，后端接收请求并且查询数据库。登录成功则会自动跳转到管理系统的首页，否则提示登陆失败。3.3.2商品管理功能（1）浏览/搜索商品功能：商家可以在首页中点击商品管理栏目，然后点击商品列表就可以进入商品列表界面，此时Vue中的Created生命周期函数会立即发送请求到后端，后端接收请求并到数据库查询商品数据。前端接收后端响应的数据，把商品的的信息(图书缩略图、书名、作者、价格)等显示到界面。管理员也可以通过搜索图书名字查询相关的图书信息，支持模糊查询。（2）添加商品功能：商家可以点击商品列表中的添加图书按钮，会弹出添加图书的窗口，管理员需要填写需要添加的图书的信息，这里每一个文本框都做了输入校验，格式不正确将会提示错误信息。当管理员确认提交时，此时会对所有的文本框进行检测，格式无误后提示添加图书成功并跳转到最新的商品列表，否则提示格式错误。（3）编辑商品功能：管理员可以在商品列表界面点击编辑按钮，在弹出的窗口修改商品信息，点击取消可以放弃编辑，点击确认可以发送请求到后端，修改成功跳转到商品列表页面。（4）删除商品功能：在商品列表页面，管理员点击删除按钮，会弹出是否删除的提示框，如果点击取消则不会删除商品，点击确认这时前端会携带要删除的商品ID到后端，后端根据id去数据库删除数据。成功删除会重新刷新商品列表。3.3.3订单管理功能管理员点击订单管理-订单列表进入订单列表界面，可以查询所有用户的订单信息(订单状态、是否付款、收货人、联系电话、订单编号)等,管理员可以对所有的订单信息进行管理。例如查看用户付款状态，如果显示已付款，并且尚未发货，可以点击发货按钮，对客户订单进行发货，此时订单状态就会从未发货变成已发货状态。管理员在点击删除按钮可以对订单进行删除，也可以对订单进行编辑。3.3.4分页功能如果要显示的数据有很多，这就需要用到分页功能，可以指定页面请求多少数据，每一页显示多少条数据，也能跳转到指定页。这里用到的是ElementUI的一个分页组件Pagination，可以对返回的数据进行分页。在请求数据的时候，携带PageSize和PageIndex参数，这两个参数分别代表了请求的数量和每页显示多少条数据。在后端接收到请求时，会把前端传过来的参数接收，然后查询数据库。接着给前端返回结果。分页功能可以通过切换PageSize来显示多少数据。3.2本章小结本章节对系统做总体架构做了细致的说明，并给出了数据库的结构设计，详细地说明了系统模块间的充分满足了前面需求分析所需要的一切要求，为了后面的详细设计做好了铺垫

第4章系统实现根据上一章的系统模块的设计，本章给出了它们的实现。下面分别是它们实现的界面效果。4.1管理员登陆功能的实现后台管理登录界面显示登陆的账号名和密码，如下图所示：图4-1用户登陆界面成功登陆后进入首页，左边显示Tab栏目，右边为主体区域，如下图所示：图4-2后台主页界面4.2删除管理员功能的实现下图是删除管理员的实现图，如下图所示：图4-3删除管理员界面4.3添加管理员功能的实现下图是添加管理员实现的界面图，如下图所示：图4-4添加管理员的界面4.4订单管理功能的实现订单管理效果图，如下图所示：图4-5订单管理的界面4.5商品管理功能的实现4.5.1增加商品功能下图是显示所有商品的界面，管理员登录成功之后，点击左边的菜单栏中的商品列表，就会显示以下界面，界面包含了一些功能按钮，如下图所示：图4-6商品列表界面当管理员需要添加图书，在上图书列表界面点击添加图书的按钮，会弹出填写图书信息的窗口，如下图所示：图4-7添加商品界面4.5.2删除商品功能的实现图4-8删除商品界面4.5.3修改商品功能的实现修改商品效果图，如下图所示：4.5.4查询/搜索商品功能的实现查询/搜索商品效果图，如下图所示：图4-9查询/搜索商品界面4.6分页功能的实现分页功能效果图，如下图所示：图4-10分页功能界面4.7用户登录/注册的实现用户登录/注册效果图，如下图所示：图4-11用户登陆界面4.8商城首页的实现用户成功登录后进入商城首页，如下图所示：图4-12商城首页界面4.9查询图书的实现4.9.1查询全部图书用户点击头部的全部商品即可查询到所有的图书，如下图所示：图4-13查询全部图书界面4.9.2搜索图书用户可以在利用搜索，查询自己要找的图书，如果存在图书就会跳转到以下页面，否则返回查询不到该图书的提示信息，如下图所示：图4-14搜索图书界面4.9.3查询商品详情点击相关的图书信息即可跳转到商品详情页面，包含了图书的基本信息，如下图所示：图4-15商品详情界面4.10购物车的实现用户可以在商城看到喜欢的图书，可以点击加入购物车，并且可以在个人主页选择我的购物车查询所选的图书，如下图所示：图4-16购物车界面4.11订单页面的实现用户可以进入个人主页，然后点击我的订单即可查询所有的个人订单信息，如下图所示：图4-17订单界面4.12结算页面的实现下图是进入结算页面，如下图所示：图4-18结算界面4.13反馈信息的实现用户可以点击头部的反馈进入反馈页面，用户可以把个人的意见提交给商家，输入内容后即可提交到后台处理，如下图所示：图4-19客户反馈界面4.14收货地址的实现用户可以进入个人主页，点击收货地址，对其进行管理，可以新增收货地址、修改收货地址和删除收货地址，如下图所示：图4-20收货地址界面4.15本章小结本章分别给出了前台商城和后台管理系统主要功能实现的效果图，能够清楚地展示该系统的真实展示效果。

第5章系统测试5.1系统测试5.1.1测试的意义测试作为系统开发的最后一项工作，在整个开发中占很重要的地位，通过测试，往往开发人员在开发系统的时候，因为存在主观性，无法发现系统存在的一些问题，导致后期交互给客户可能出现问题，因此在交互系统最后做测试，是非常必要的。一款软件或者网站如果不加以测试就提交给用户，出现BUG会大大影响用户的体验感，因此测试在软件设计中具有很重要的意义。5.1.2测试的目的测试的的最终目的是找出系统的Bug以及存在的缺陷，而不是为了修改错误。图书销售系统作为商城系统，测试是必不可少的任务，因为系统可能存在登录异常、商品显示失效和无法加入购物车这些在开发设计无法发现的问题。系统测试并不能找到所有的Bug，但是却可以减少系统的问题，给商家的利益损失减到最小化。总而言之，测试的目的是做Bug，为完善系统做好了铺垫。5.1.3软件测试方法软件测试有各种各样的方式，可以根据不同的标准划分为不同的类型。例如在测试中是否需要查看内部结构划分为黑盒测试和白盒测试，黑盒测试不用查看系统的内部结构和代码，只需要测试功能是否能正常运行即可。而白盒测试需要查看系统的内部结构，对测试人员的要求较高。本系统采用的是黑盒测试，测试系统的各种功能是否能像用户需求那样正常运行。下面给出了一部分的系统测试用例和结果。5.2测试计划黑盒测试是在已知产品所应具有的功能上，经过测试来检测每个功能是否都能正常使用。本系统的测试采用黑盒测试，整个过程采用自顶向下，逐个集成的方法，依次对各主要功能进行测试。测试所采用的用例分别是合理和不合理的条件。具体的测试计划如下所示：1.前台商城测试：测试1：名称：登录测试目的：测试用户登录功能内容：用户名和密码输入，验证是否能登录，是否存储token和userid到SessionStorage测试2：名称：注册测试目的：测试能否正常注册内容：非空校验，输入错误格式验证，输入正确的账号和密码测试3：名称：购物车测试目的：测试购物车是否能实现内容：验证加入购物车和立即购买按钮，验证能否查看购物车的全部商品信息，点击购物车结算按钮测试4：名称：搜索商品测试目的：测试搜索商品功能内容：输入关键字搜索能显示商品信息或者查无此书测试5：名称：商品详情测试目的：测试商品详情功能内容：点击商品能显示商品详情页面测试6：名称：收货地址测试目的：测试收货地址功能内容：能正常显示收货地址列表，包括收货人名称，收货人电话，收货地址；测7：名称：查询订单测试目的：测试查询订单功能内容：进入订单页面能正常显示详细的个人订单信息，例如订单编号、订单数量、订单总价、订单状态、收货地址、联系电话等信息测试8：名称：计算商品总价测试目的：测试计算总价功能内容：在勾选商品和改变数量的时候可以实现总价的计算求和2.后台管理测试：测试9：名称：添加商品测试目的：测试添加商品功能内容：点击添加商品按钮能显示添加商品的窗口，显示要添加的图书名称、图书类型下拉框、图书价格、作者、图片。验证添加信息的格式合法性，点击取消能返回商品列表并清空之前填写的信息，点击确定能成功添加图书。测试10：名称：编辑商品测试目的：测试编辑商品功能内容：在商品列表页点击编辑按钮能弹出窗口并商品的基本信息，修改其中的信息，验证格式，能提交成功测试11：名称：删除商品测试目的：测试删除功能内容：在商品列表页点击删除按钮能弹出是否删除的提示框，点击确定能删除商品并刷新返回商品列表页面测试12：名称：发货测试目的：测试发货功能内容：在订单列表里订单，如果订单的付款状态是显示未付款和未发货的时候，操作列有一个发货的按钮，如果显示已付款和已发货则没有发货的按钮。管理员点击发货会改变订单的状态，改为已发货。测试13：名称：分页测试目的：测试分页功能内容：分页能显示一共有多少条数据，能通过下拉选择每页显示多少条数据，能实现点击页码跳转具体的页面测试14：名称：商品分类测试目的：测试商品分类功能内容：通过点击商品管理下的商品分类，可以显示所有的分类，也可以通过添加按钮增加新的图书分类、编辑图书分类和删除图书分类。5.3测试用例及测试结果 5.3.1登录测试测试描述：登录测试分为前台用户登录测试和后台管理员登录测试，表5-1用户/管理员登录测试用例表序列测试目的测试输入输出结果测试说明用户名密码空用户名（为空）123456账号不能为空请输入账号空密码user（为空）密码不能为空，请重新输入请输入密码空用户名、空密码（为空）（为空）账号和密码不能为空请输入账号和密码用户名、密码错误输入user123用户名或密码不正确用户名或密码错误用户名、密码错误输入zhangsan123456用户名或密码错误用户名或密码错误用户名、密码正确输入adminadmin登陆成功进入商城主界面5.3.2注册测试表5-2用户注册测试用例表序列测试目的测试输入输出结果测试说明用户名密码空用户名（为空）123456账号不能为空请输入账号空密码user（为空）密码不能为空，请重新输入请输入密码空用户名、空密码（为空）（为空）账号和密码不能为空请输入账号和密码验证是否存在user123456该用户已存在用户存在验证账号、密码格式zhangsan123密码必须在6到10位数密码格式不正确用户名、密码正确输入zhangsan123456注册成功成功跳转到登录页面5.3.3购物车测试表5-3购物车测试用例表序列前置条件内容结果1进入商品详情页面点击加入购物车商品能加入购物车2进入商品详情页面点击“+”“-”能更改商品数量3进入商品详情页面点击立即购买能跳转到订单支付页面4当月没有账单记录选择“月度账单”列表显示为空5进入购物车点击删除可以删除具体的购物车商品6进入购物车勾选购物车的商品可以自动算出商品总价7进入购物车点击结算按钮可以把选中的商品信息传到订单页面5.3.4搜索商品测试表5-4搜索商品测试用例表序列前置条件内容结果1在搜索框输入完整书名输入“十年”搜索页面能显示出相关的图书信息2在搜索框输入不完整书名输入“十”能通过模糊查询搜索到商品3搜索框不输入信息点击搜索显示查无此书4搜索框输入不存在的书名输入“是多少大”显示查无此书5.3.5商品详情测试表5-5商品详情测试用例表序列前置条件内容结果1在商城首页的任意图书界面点击商品封面能跳转到商品详情页面2进入到商品详情界面可以显示商品的详细信息显示成功5.3.6收货地址测试表5-6收货地址测试用例表序列前置条件内容结果1进入个人主页点击收货地址列表能显示收货地址2在地址列表点击删除按钮弹出“是否删除该收货地址”的提示删除收货地址成功3进入删除提示框点击取消取消删除，返回地址列表4进入地址列表点击修改地址按钮弹出原本的收货地址信息窗口5进入修改地址窗口修改地址信息修改成功5.3.7查看订单测试表5-7查看订单测试用例表序列前置条件内容结果1进入个人主页点击个人订单能显示所有订单列表信息2进入订单列表显示完整的订单信息正常3进入订单列表发货状态显示已发货或者是未发货显示正常5.3.8计算商品总价测试表5-8计算商品总价测试用例表序列前置条件内容结果1进入购物车选择“+”或者“-”改变商品数量能计算单个商品的总价2选中购物车的商品改变数量底下结算总价会随着改变3进入购物车在购物车全选中商品结算总结可以正确得出4进入支付订单统计选中的订单总价支付订单正常显示5.3.9添加商品测试表5-9添加商品测试用例表序列前置条件内容结果1进入商品列表界面点击添加商品按钮显示添加商品的窗口2输入图书名称“三国演义”输入正常3输入图书名称不输入任何内容提示“请输入图书名称”4未输入添加的完整信息，例如图书价格点击确定添加按钮弹出“请完善添加信息再提交”的提示5已经输入了部分商品信息点击取消按钮返回商品列表页面，重新进入会清除原本输入的信息6填写完整的商品信息点击确定按钮添加商品成功5.3.10编辑商品测试表5-10编辑商品测试用例表序列前置条件内容结果1进入商品列表界面点击修改按钮显示原商品信息的窗口2清空任意的图书信息，例如价格鼠标离开文本框弹出请输入商品价格3修改完整的商品信息点击确定提示修改成功并返回商品列表页4未输入完整的修改信息，例如作者名点击确定添加按钮弹出“请完善添加信息再提交”的提示5.3.11删除商品测试表5-10删除商品测试用例表序列前置条件内容结果1进入商品列表界面点击删除按钮显示“是否删除该图书”提示框2点击删除按钮点击取消提示取消删除并返回商品列表3点击删除点击确定提示成功并返回商品列表5.3.12发货测试表5-10发货测试用例表序列前置条件内容结果1进入订单列表页面订单状态是未发货和付款状态已付款操作列显示发货按钮2进入订单列表页面订单状态是未发货和付款状态未付款没有显示发货的按钮3进入订单列表页面已发货和已付款隐藏发货按钮4付款状态是已付款和订单状态未发货点击发货按钮提示发货成功，订单状态改为已发货状态5.3.13分页测试表5-10添加商品测试用例表序列前置条件内容结果1进入订单列表界面分