基于vue的电子商务平台

基于vue的电子商务平台摘要计算机技术在很多行业都发展的很好，在不知不觉中人们的心里也有了网络的概念。网络在各个行业的发展战略中都占据了很重要的位置，特别是网络销售这一块，网络已经成为了商家不可分割的部分。很多商家宣传商品已经不只局限于电视、传单和报纸，他们还会在网上进行宣传，而且网络宣传更实惠。所以商家们开始建立网站，将商品各方面的宣传和服务在网络上呈现给大家，通过网站，人们可以进行网上购物、商品查询和信息查询等功能。网络在改变我们原来的经营理念和经营模式的同时，也给商家们带来了更多的利益。所以，对于商家们来说，都希望有一个自己的网站。本商务平台研究的是网上购物系统，它是基于BS结构的，也就是客户端浏览器、web服务器和数据库交互的结构。主要开发包括前端页面的一些Web设计和SQL数据库的建立以及维护。系统主要是用node.js为核心语言进行开发，再结合SQL建立数据连接关系，不断改进，直到功能系统的基本功能能够实现。本系统主要是有四个功能，分别是用户的管理、资料的管理、商品的管理和订单的管理。在用户管理中的注册模块，邮箱和昵称的唯一性性，加强了用户注册信息的严谨性。并且规定只有注册成功和登录成功的会员才能下订单，不是会员的用户只能够浏览商品。整个购物系统结构清晰，功能明确，易操作。这样使交易可以更加方便和便捷关键词：node；SQL；Web；网上购物系统E-commerceplatformbasedonVueAbstractComputertechnologyhasdevelopedwellinmanyindustries,andpeopleunconsciouslyhavetheconceptofnetworkintheirhearts.Thenetworkoccupiesaveryimportantpositioninthedevelopmentstrategyofvariousindustries,especiallyintheareaofnetworksales,thenetworkhasbecomeanintegralpartofbusinesses.ManybusinessespromotetheirproductsnotonlyonTV,flyersandnewspapers,butalsoontheInternet,whichismoreaffordable.Therefore,businessesbegantoestablishwebsitestopresentallaspectsofthepublicityandservicesofgoodstoeveryoneonthenetwork.Throughthewebsites,peoplecancarryoutonlineshopping,commodityqueryandinformationqueryfunctions.Thenetworknotonlychangesouroriginalbusinessphilosophyandbusinessmodel,butalsobringsmorebenefitstobusinesses.So,forbusinesses,theyallwanttohaveawebsiteoftheirown.Thisbusinessplatformstudiesonlineshoppingsystem,whichisbasedonBSstructure,thatis,thestructureofclientbrowser,webserveranddatabaseinteraction.Themaindevelopmentincludessomewebdesignoffront-endpageandtheestablishmentandmaintenanceofSQLdatabase.Thesystemismainlydevelopedwithnode.jsasthecorelanguage,andthencombinedwithSQLtoestablishdataconnectionrelationship,andconstantlyimproveuntilthebasicfunctionsofthefunctionalsystemcanbeachieved.Thissystemhasfourfunctions:usermanagement,datamanagement,commoditymanagementandordermanagement.Theuniquenessofregistrationmodule,mailboxandnicknameinusermanagementstrengthenstheprecisenessofuserregistrationinformation.Italsostipulatesthatonlymemberswhohavesuccessfullyregisteredandloggedincanplaceorders,anduserswhoarenotmemberscanonlybrowseproducts.Thewholeshoppingsystemhasclearstructure,clearfunctionandeasyoperation.Thismakesthetransactionmoreconvenientandconvenient.Keywords:Node;SQL;Web;onlineshoppingsystem目录1前言 11.1系统开发背景 11.2系统开发意义 22系统可行性分析 22.1技术可行性 32.2经济可行性 32.3社会可行性 33系统需求的分析 33.1系统介绍 33.2功能需求 33.3B/S结构 53.4其他要求 54总体设计 64.1总体结构和模块设计 65数据库设计 65.1数据库表格设计 66页面设计 86.1前台页面 86.1.1前台主页面 96.1.2购物车页面 96.1.3注册页面 96.2后台页面 106.2.1后台登录页面 106.2.2后台管理页面 117系统详细设计 117.1前台设计 117.1.1前台模块功能介绍 117.1.2用户注册模块 127.1.3商品浏览模块 147.1.4购物车模块 157.1.5我的订单模块 167.1.6修改资料模块 197.2后台设计 227.2.1后台模块功能介绍 227.2.2用户管理模块 227.2.3商品管理模块 237.2.4订单管理模块 247.2.5资料管理模块 288测试 298.1测试方法 298.2测试步骤 298.3测试报告 298.4结果评价 309使用说明 309.1系统环境要求 309.2系统运行 3010总结 31参考文献 32致谢 33附录 34电子商务网站的开发已有很长一段时间，而且有非常多成功的实例，所用的技术上也是很成熟的，所以技术上的准备是没有什么问题的。如果遇到不懂的或难以解决问题，可以多去网上学习一下，网上有很多案列的。现在网上流行的购物系统的页面都是比较简单和漂亮的，页面结构也是清晰简约的，而且逻辑上也是有严谨的规划，注重每一个小细节，在电子交易的时候避免一些不必要的错误。我们前端将会使用HTML来搭建页面结构、CSS和JS来填充页面。后端会使用Node搭建接口、Express框架和连接数据库等[2]。我也希望能从这开发系统中，深入学习一下JavaScript和Node语言。2.2经济可行性我设计的这个系统，主要是想锻炼和提升自己，所以要求不是很高，在一些方面也有瑕疵。在开发这个系统前我自学了Node、Javascript，MYSQL等知识，而且开发中用的软件都是免费的，如VScode、Navicat等，所以从各方面来说都没有花费太多的资金。2.3社会可行性社会对电子商务的发展是十分支持和认可的。电子商务运用网络技术给社会创造了很多经济收益，也在推着社会往前进。对于网络销售来说，本系统的效益是很可观的，人们和社会都是需要的。3系统需求的分析3.1系统介绍本系统是一个建立在Windows平台上，基于B/S结构的一个网上购物平台[1]。通过这个平台，可以更加方便的管理商品和销售商品。3.2功能需求我在设计次系统的时候，观察了淘宝、当当等网站，我觉得系统应该有以下的基本功能：注册登录管理：能够对用户名和密码进行简单验证，如果邮箱还没有注册会弹出一个弹框“该邮箱还没有注册，请前往注册”，如果输入的密码错误，会提示你“密码错误”。还可以对电子邮箱和昵称的唯一性进行验证，每一个Email和昵称都只能注册一次，如果邮箱重复会弹出“该邮箱已被注册”，昵称重复则会弹出“该昵称已被注册”。商品浏览：打开浏览器，默认会出现首页，也就是所有商品都会在首页中展示出来。分类显示商品，有首页、包包、鞋子、彩妆、护肤品、衣服，根据不同的分类会有不同的页面呈现。当我们点击商品的时候会出现商品详情，可以点击立即购买和加入购物车。可以对商品进行模糊查询，需要输入商品的名字就会出现所有符合的商品。所有人都可以浏览商品，但是只有登录的用户才能加入购物车。购物车管理：登录成功的用户可以把想要购买的商品添加到购物车，也就是点击“加入购物车”这个按钮的时候会出现“加入购物车成功！请前往个人中心->购物车结算”，然后我们就可以去个人中心查看商品了。用户可以对商品进行增加、减少和删除，按‘+’和‘-’按钮时，数量变化的单位是1，数量输入框中可以输入你想买的数量[2]。金额也是随着数量的改变而变化着。订单管理：只有登录成功的用户才可以在商品详情中点击“立即购买”的按钮，如果没有登录点击“立即购买”，会弹出一个“请先登录”。用户可以查看自己的订单，也可以删除自己的订单。在订单状态里：待付款对应的是“确认付款”按钮；已发货对应的是“确认收货”；已完成对应的是“评价”和“已评价”两个状态。管理员可以修改订单的数量和状态，也可以删除订单。商品评价：在商品详情的页面里，会显示评价的内容，所有人都是可以看见的。只有订单状态是已完成的时候，用户才可以对其进行评价。评价有两部分，第一部分是给商品打分（5颗星为满分100分，1颗星就代表20分），第二部分是输入文字评论，两个部分都不可以缺少，否者按“发表”按钮的时候会出现“评分和评价不能为空”的弹框。商品管理：管理员可以添加商品的分类，现在有：包包、鞋子、彩妆、护肤品、衣服。可以编辑修改商品的名称、选择类目、库存量、价格，上传照片等；根据自己的需求在不同类目中上传新的商品；可以删除商品。用户管理：管理员可以查看所有的用户。可以根据email和phone条件查询得到符合条件的用户，还可以根据nickname、recipient、address进行模糊查询得到符合条件的用户。还可以删除某个用户，删除后用户的名称是：该用户已注销，头像是灰白的默认头像。资料修改：管理员在修改资料模块只有一个权限，就是修改密码。用户在修改资料模块，修改昵称、收件人、收货地址、联系电话和密码等，但是不能修改账号（邮箱）。管理员和用户修改自己的密码时，都需要输入原密码、新密码、确认新密码，原密码必须正确并且新密码和确认新密码必须一致，填完后点击“确认修改”按钮。3.3B/S结构B/S结构（浏览器/服务器）。B/S架构有三层。第一层：浏览器，展示页面。它是一个面向客户的角色。用户不需要下载客户端，只需要有一个浏览器就可以上网浏览了。用户们在浏览器中进行操作时，如果需要访问数据库，浏览器就会生成HTTP报文，并向WEB服务器发送请求。第二层：WEB服务器，处理数据。它是一个传送信息的角色。当收到浏览器的请求后，WEB服务器根据请求和请求正文，处理业务逻辑转化成SQL语句，向数据库服务器发起访问请求。第三层：数据库服务器，存储数据。它是一个很重要的角色，因为它存放了大量的数据。当数据库服务器收到了来自WEB服务器的请求后，会对SQL语句进行处理，并将把返回的结果发送给WEB服务器，然后，WEB服务器将收到的数据结果并且转换为HTML文本形式发送给浏览器，浏览器接收响应，加载到页面展示。客户端浏览器客户端浏览器Web服务器应用服务器数据库服务器反馈页面HTTP请求事务逻辑请求结果图3.1B/S结构图3.4其他要求页面要求：页面内容要漂亮大方、页面结构要求清晰明了，页面整体要有自己的特色。跳转页面时有颜色变化或者弹框出现、好看的按钮小图标等会让浏览者喜欢和留下深刻的印象，也会增加一些购买几率。系统要求：系统要运行稳定。4总体设计4.1总体结构和模块设计用户部分有：用户注册、商品浏览、购物车、我的订单，资料修改等几个部分[3]。管理部分有：用户管理、商品管理、订单管理，修改资料等几个部分。功能结构图如下：购物系统购物系统系统用户部分系统管理部分用户注册购物车商品管理商品浏览我的订单用户管理订单管理修改资料修改资料图4.1功能结构图5数据库设计5.1数据库表格设计表5.1AdminModel列名说明类型备注id主键BIGINT自增account账号STRING（255）唯一name姓名STRING（64）不允许为nullpwd密码STRING（255）不允许为null表5.2CommentModel列名说明类型备注id主键BIGINT自增userId用户idBIGINT不允许为nullgoodsId商品idBIGINT不允许为nullgoodsDetailId页面详情idBIGINT不允许为nullorderId订单idBIGINT不允许为null表5.3GoodsDetailModel列名说明类型备注id主键BIGINT自增goodsId商品idBIGINT不允许为nullspecName商品规格名称STRING（500）不允许为nullstockNum商品存储量INTEGER不允许为nullunitPrice商品单价FLOAT不允许为null表5.4GoodsModel列名说明类型备注id主键BIGINT自增name商品名字STRING（500）不允许为nulltypeId类型idBIGINT不允许为nullimg商品图片STRING（500）允许为nulldesc商品描述TEXT允许为nullupdatetime修改时间DATE不允许为nullcreatetime创建时间DATE不允许为null表5.5OrderModel列名说明类型备注id主键BIGINT自增userId用户idBIGINT不允许为nullgoodsDetailId页面详情idBIGINT不允许为nullgoodsNum商品数量INTEGER不允许为nullamount商品总金额FLOAT不允许为nullcreatetime创建时间DATE不允许为nullupdatetime修改时间DATE不允许为nullstate商品详情TEXT不允许为null表5.6TypeModel列名说明类型备注id主键BIGINT自增name类名STRING（255）不允许为null表5.7UserModel列名说明类型备注id主键BIGINT自增email用户邮箱STRING（64）唯一的pwd用户密码STRING（255）不允许为nullsex用户性别INTEGER不允许为nullrecipient收件人STRING（64）允许为nulladdress收件地址STRING（500）允许为nullphone收货电话STRING（64）允许为nullheadimg用户头像STRING（500）不允许为nullcreatetime创建时间DATE不允许为nullupdatetime修改时间DATE不允许为nullnickname用户昵称STRING（64）不允许为null6页面设计6.1前台页面6.1.1前台主页面图6.1前台主页图6.1.2购物车页面图6.2购物车页面6.1.3注册页面图6.3注册页面6.2后台页面6.2.1后台登录页面图6.4后台登录页面6.2.2后台管理页面图6.5后台管理页面7系统详细设计7.1前台设计7.1.1用户模块功能介绍用户注册：用户可以注册一个属于自己的账号。需要输入自己的一些基本信息，如：邮箱、昵称、密码、收货地址，电话号码等。会对用户的注册进行了验证：邮箱用户名和昵称都必须是唯一的。如果其他用户注册了的邮箱或昵称，你都不能成功注册，会弹出：“该邮箱已被注册”或“该昵称已被注册”。商品浏览：没有登录的用户也可以浏览所有的商品，可以点击不同的类目（包包、鞋子等），呈现出不同的页面。点击商品后，出现商品详情还可以看到商品的评价。用户还可以根据商品的名字来查找商品，只要是符合规定的商品都会在页面上呈现。呈现有三种形式：一是默认形式，二是价格从高到低形式、三是价格从低到高形式。购物车管理：选购的商品点击添加“加入购物车”按钮以后，会出现一个弹框“请到个人中心去结算”，我们选购的商品就会出现在个人中心的购物车模块中。在购物车中我们，可以随时添加、减少、删除商品，也可以随时下单结账。我的订单：我的订单这个模块在个人中心中，可以查看全部订单和查看订单的状态。订单状态已完成的时候才可以对商品进行评论。修改资料：用户可以修改自己的基本信息，比如昵称、收件人、收货地址等。修改密码时候，需要输入正确的原密码，并且新密码和确认新密码的值是一样的，才能够修改成功。7.1.2用户注册模块用户注册的密码加密是用bcryp加密的，还有基于token的身份验证，这些使我们的系统更加的安全。我使用的是JWT（JSONWebToken），它由三部分组成，分别是jwt头、有效载荷、签名。JWT流程：一浏览器发起请求登陆。二服务端验证身份[4]。三验证成功后，根据算法，签发一个token（令牌）,在发送给浏览器。四浏览器接收到token以后，可以存储起来，我是存到LocalStorage中。五以后浏览器请求资源都需要带上token。六服务器端收到请求后，去验证token，如果正确就返回浏览器请求的数据，如果错误就不返回。1.邮箱和昵称的唯一性。主要代码如下：//注册exports.signup=async(ctx)=>{consthashPwd=bcrypt.hashSync(ctx.request.body.pwd,salt);//bcryptjs是一个第三方密码加密库 constuser={ email:ctx.request.body.email, pwd:hashPwd, nickname:ctx.request.body.nickname,recipient:ctx.request.body.recipient,address:ctx.request.body.address,phone:ctx.request.body.phone, createtime:newDate(),updatetime:newDate() }; //验证邮箱唯一性 constemailUniq=awaitUserModel.findOne({ where:{ email:ctx.request.body.email } }) //如果已经存在 if(emailUniq){ ctx.body={ code:10000, message:'该邮箱已被注册' }; return; } //验证昵称唯一性 constnicknameUniq=awaitUserModel.findOne({ where:{ nickname:ctx.request.body.nickname }}) //如果已经存在 if(nicknameUniq){ ctx.body={ code:10000, message:'该昵称已被注册'} return;} //插入数据 constres=awaitUserModel.create(user); consttoken=jwt.sign(res.id,'chambers'); ctx.body={ code:0, data:{name:res.nickname,token:token}}}图7.1注册页面7.1.3商品浏览模块一个好看的商品浏览页面的，会让人更有购买欲。如果主页都是乱糟糟的，我想很少有人会去买东西吧。我的浏览模块都是比较简单、大方的。1.根据商品名字来查找商品。是模糊查询，不需要输入商品的全部名字，都可以查到符合要求的商品。关键代码如下：exports.searchGoods=async(ctx)=>{ constkeyword=ctx.query.keyword; try{ letgoods; goods=awaitGoodsModel.findAll({ attributes:['id','name','img','typeId'], where:{ name:{ '$like':'%'+keyword+'%' }}, order:[ ['createtime','DESC'] ], }); if(goods.length===0){ ctx.body={ code:0, data:[] }; return; }}7.1.4购物车模块在现实生活中，如果我们去超市购物，我们会根据自己的需求把物品放到购物车篮中，这样就不用拿着大包小包的东西了，这样很方便。在网上购物，我们也用“购物车”来装载我们想买的物品。点击购物车就能看见我们加购的商品，还可以对商品进行增加、减少、删除和下单结账。当用户在商城首页中单击商品展示区的“加入购物车”按钮时，系统会将该商品放入到购物车中。数量加减逻辑和计算价格。关键代码如下：（1）数量加减methods:{minus(){if(this.num<=this.min){return;}this.num=Number(this.num)-1;},add(){if(this.num>=this.max){return;}this.num=Number(this.num)+1;},}（2）计算价格numberChange(orderId){this.orderList.map((item,index)=>{if(orderId===item.id){item.amount=item.temGoodsNum*item.goods.unitPrice;console.log(item.temGoodsNum,item.goods.unitPrice)}})},computed:{...mapState(['clientToken']),totalAmount(){letamount=0;this.orderList.map((item,index)=>{amount+=item.amount;//a+=b等效于a=a+b})returnamount;}},（3）删除订单deleteOrder(orderId){constres=deleteOrder(orderId);res.then(()=>{alert('删除订单成功！');this.orderList.map((item,index)=>{if(item.id===orderId){this.orderList.splice(index,1);}})}).catch((e)=>{alert(e);})}7.1.5我的订单模块购买商品以后，会产生订单。在我的订单中可以查看订单的状态，和订单的一些基本信息。订单有五种呈现方式，分别为：全部订单、待付款、待发货、已发货、已完成。（1）关于订单模块的页面图7.2我的订单2.待付款=>确认付款、已发货=>确认收货、已完成=>评价和已评价。主要代码如下：（1）页面（按钮确认付款、确认收货、评价、已评价）<buttonv-if="@click="confirmPay(item.id)">确认付款</button><buttonv-else-if="item.state===2"@click="confirmReceive(item.id)">确认收货</button><buttonv-else-if="item.state===3&&!item.hasComment"@click="showPopup(item.id,item.goods.id,item.goods.goodsDetailId)">评价</button><spanclass="hasComment"v-else-if="item.state===3&&item.hasComment">已评价</span>图7.3待付款和确认付款图7.4已发货和确认发货3.当商品已经完成的时候，点击“评论”按钮，会出现一个打分和评价的弹框。（1）评分（打星）和评价页面图7.5我的评价（2）关于点击“发表”按钮的逻辑showPopup(orderId,goodsId,goodsDetailId){this.curCommentGoodsId=goodsId;this.curOrderId=orderId;this.curCommentGoodsDetailId=goodsDetailId;this.popupShow=true;},sendComment(){if(this.curStar<=0||ment==''){alert('评分和评价不能为空！');return;}constres=sendComment({token:this.clientToken,orderId:this.curOrderId,goodsId:this.curCommentGoodsId,goodsDetailId:this.curCommentGoodsDetailId,content:ment,score:this.curStar*20});res.then(()=>{alert('评价成功！');for(letorderofthis.orderList){if(order.id===this.curOrderId){order.hasComment=true;}}this.closePopup();}).catch((e)=>{alert(e);})},7.1.6修改资料模块用户可以查看自己的信息，也可以修改自己的基本信息，但是用户账号（邮箱）是不允许修改的，修改密码之前需要输入原来的密码才可以修改。1.修改基本的个人信息。关键代码如下：exports.updateUserData=async(ctx)=>{constdata=ctx.request.body;try{constres=awaitUserModel.update({recipient:data.recipient,address:data.address,phone:data.phone,nickname:data.nickname},{where:{id:data.id}})//正常修改ctx.body={code:0,}}catch(e){//发生错误ctx.body={code:10000,message:'网络出错'}}}2.修改密码。关键代码如下：exports.updatePwd=async(ctx)=>{constdata=ctx.request.body;constaccount=awaitUserModel.findOne({where:{id:data.id}})if(!pareSync(data.oldPwd,account.pwd)){ctx.body={code:10000,message:'密码不正确'};return;}//密码正确else{try{consthashPwd=bcrypt.hashSync(data.newPwd,salt);constres=awaitUserModel.update({pwd:hashPwd},{where:{id:data.id}})//正常修改ctx.body={code:0}}catch(e){//发生错误ctx.body={code:10000,message:'修改密码出错'}}}}图7.6修改密码7.2后台设计7.2.1后台模块功能介绍：后台部分有：用户管理、商品管理、订单管理、修改资料。用户管理：管理者能够通过用户的账号（email）和昵称等搜索到符合要求的用户，并展现出来。管理者还可以删除用户，删除用户以后这个用户就不存在了，变成了“该用户已注销”。商品管理：管理者可以增加商品的分类。还可以在不同的分类中添加新的商品。也可以对原有的商品进行修改和删除该商品。订单管理：管理者可以看到所有的订单，可以对订单进行编辑和删除操作。在编辑操作中管理者可以修改订单的状态（未付款、未发货、已发货、已到货）和商品数量。修改资料：管理者可以修改自己的密码，但是需要正确输入原来的密码。7.2.2用户管理模块1.可以对昵称、地址、收货人进行模糊查询。邮箱和电话号码需要输入完整数据才能查询到符合要求的用户。//查询指定用户exports.searchUser=async(ctx)=>{constword=ctx.query.word;try{constusers=awaitUserModel.findAll({attributes:['id','email','nickname','sex','recipient','address','phone'],where:{//where是查询条件的意思'$or':[//或，只要其中一个条件成立就可以了{email:word},{phone:word},{nickname:{'$like':'%'+word+'%'}},//%是SQL的关键词.可以代替任意长度的字符.包括数字字符.(模糊查询){recipient:{'$like':'%'+word+'%'}},{address:{'$like':'%'+word+'%'}},]}});ctx.body={code:0,data:users}}2.删除用户exports.deleteUser=async(ctx)=>{constid=ctx.query.id;try{constres=awaitUserModel.destroy({where:{id:id}});ctx.body={code:0}}7.2.3商品管理模块管理员可以对商品进行添加，使商品更加丰富多彩；可以对商品进行编辑，使商品更加完善；可以对商品进行删除，使多余或者库存量不多的商品下架。1.编辑商品中，可以编辑商品名称、类目、图片、库存量、价格等。（1）编辑商品页面。图7.7编辑页面（2）添加和修改。主要代码如下：exports.updateGoods=async(ctx)=>{ constdata=ctx.request.body; try{ constres=awaitGoodsModel.update( { name:, typeId:data.typeId, img:data.img, desc:data.desc },{ where:{ id:data.id }}); for(letitemofdata.specList){ constres2=awaitGoodsDetailModel.update( { specName:item.specName, stockNum:item.stockNum, unitPrice:item.unitPrice, }, { where:{ id:item.id } });} ctx.body={ code:0 } }2.删除商品。主要代码如下：exports.deleteGoods=async(ctx)=>{ constid=ctx.query.id; try{ constres=awaitGoodsModel.destroy({ where:{ id:id } }); constres2=awaitGoodsDetailModel.destroy({ where:{ goodsId:id } })7.2.4订单管理模块管理员可以看到所有的订单，并且有权删除和编辑订单。1.编辑中可以修改订单中商品的数量和订单的状态（未付款、未发货、已发货、已到货）。（1）编辑的前端页面。图7.8订单管理编辑页面（2）修改订单。主要代码如下：exports.changeOrder=async(ctx)=>{ constorderObj=ctx.request.body; try{ constorder=awaitOrderModel.findOne({ attributes:['goodsNum'], where:{ id:orderObj.id } }); constspec=awaitGoodsDetailModel.findOne({ attributes:['unitPrice','stockNum'], where:{ id:orderObj.spec, } }); awaitGoodsDetailModel.update( { stockNum:spec.stockNum }, { where:{ id:orderObj.spec }}) constres=awaitOrderModel.update( { goodsNum:orderObj.num, goodsDetailId:orderObj.spec, state:orderObj.state, amount:spec.unitPrice*orderObj.num }, { where:{ id:orderObj.id } } ); ctx.body={ code:0, }}2.当订单的状态不是state===3，也就是订单状态不是已到货的时候，删除订单，库存量会增加。exports.deleteOrder=async(ctx)=>{constid=ctx.query.id;try{ constorder=awaitOrderModel.findOne({ attributes:['state','goodsNum'], where:{ id:id } }); //还没结束的订单，那就库存增加 if(order.state!==3){ constgoodsDetail=awaitGoodsDetailModel.findOne({ attributes:['stockNum'], where:{ id:id } }); awaitGoodsDetailModel.update( { stockNum:goodsDetail.stockNum+order.goodsNum }, { where:{ id:id }}); };constres=awaitOrderModel.destroy({where:{id:id}});ctx.body={code:0}}7.2.5修改资料模块管理员在修改资料模块可以修改自己的密码，但需要正确的原密码和两次一致的新密码。1.修改密码，主要代码如下：exports.changePwd=async(ctx)=>{constpwdObj=ctx.request.body;pwdObj.adminToken=jwt.decode(pwdObj.adminToken);try{constadminOldPwd=awaitAdminModel.findOne({attributes:['pwd'],where:{id:pwdObj.adminToken}});if(adminOldPwd.pwd!==pwdObj.oldPwd){ctx.body={code:10000,message:'旧密码错误'}return;}constres=awaitAdminModel.update({pwd:pwdObj.newPwd},{where:{id:pwdObj.adminToken}})ctx.body={code:0}}8测试8.1测试方法因为本系统针对的是网上用户，所以我会选择黑盒测试来检测每个功能是否都可以正常使用。8.2测试步骤分为了用户端测试和管理端测试。用户端测试：1是首页测试，2是登录、注册测试，3购物车测试。管理端测试：1是商品管理测试，2是订单管理测试，3是用户管理测试。8.3测试报告：表8.1测试报告模块预计测试功能是否正常首页测试可正常显示各种商品正常登录、注册测试注册时，邮箱唯一性。登陆时，跟数据库用户密码一致正常购物车测试修改商品数量时价格有相应变化正常商品管理测试可修改商品、添加商品正常订单管理测试可修改订单状态、删除订单正常用户管理测试可查找用户、删除用户正常8.4测试结果评价：系统基本达到设计要求，购物车、商品管理、订单管理等功能基本完整，用户界面良好。但是还存在一些需要改进的地方，如：订单管理中删除订单，不应该直接删除，应该在删除之前提示一下‘是否真的需要删除’。对于商品浏览，查找类型有点少，希望能增添一些高级查找，或多添加几种查找类型。希望以后能加以改进，让系统更完善。9使用说明9.1系统环境要求硬件环境：硬盘：10G+，内存：512M+9.2系统运行：启动“npmrunstart”、“npmrundev”、“npmrundev：admin”和XAMPPControlPanel。访问商城首页：http://localhost:8080访问后台管理页面：http://localhost:808110总结本系统是在陈文文老师的指导下和实习的空闲时间完成的，由于时间比较紧张可能很多问题我还没有考虑到。我写了电子商务系统从需求分析到开发实现的整个流程。用了4个月来做毕业设计，从题目选择到代码实现，我学到了很多知识，如node.js、Express框架、接口、数据库等。在实际的项目中，提高了自己的动手能力，也锻炼了自己独立解决问题的能力。在开发这个系统的时候，不知不觉中把以前学习的理论知识进行了实践，而且运用也更加熟练。以前一些理解不了的地方，在此次实践中也有了新的理解。而且也提高了理论联系实践的能力。我很感谢学校和学院给我们一个自己动手的机会，在这过程中我学习到了很多新的知识并且把理论知识和实践联系到一起，不懂的就百度或者问老师和同学们。有了一个小项目的经验，走向社会就不会那么手足无措了，至少知道了大体流程。以后面对困难和挑战，我相信我不会退缩的！但是，由于做毕业设计的时间较少和技术上的不成熟，系统还是有一些问题和不够完美的地方。比如在页面兼容性方面，ie、火狐、谷歌等浏览器对css的某些特的支持度是不一样的，所以页面的呈现会有些差别。在数据容量方面，只进行了很小量的数据测试，数据库能承受多少数据还是不能确定的。在页面比例和形象上，没有太多的实际经验，所以页面看上去不是那么漂亮。当然，作为毕业设计，我觉得这是一次很好的经历，从中学习到了如何把理论知识和实践相结合，也学习到了很多新的知识。虽然中途有很崩溃很难的时候，但是在老师和同学们的鼓励和帮助下我完成了这个系统，对我自己也是一种鼓舞，也给我带来了信心。参考文献［1］肖燕成.一个小型图书资料管理信息系统的设计[J].华中科技大学计算机科学与技术学院，2006，02期：4-5［2］张莉.电子商务中购物车的实现[J].福建电脑,2005，08期：28-37［3］零壹开发.Vue.js前端开发基础与项目实战[M]；人民邮电出版社，2020［4］杭州电子工业学院.网上购物系统若干关键技术研究[N]；中国知网2003年01期.11

……谢辞四个月的用心准备，毕业论文终于完成了。我要感谢我的指导老师陈文文老师。陈老师不厌其烦的发布各种通知各种要求，对我们的论文也是一审再审，大到文章的布局，小到语句格式的瑕疵，都会一一给我们指出来。同时，我也要感谢所有给我上过课的老师。老师们严谨的治学态度、渊博的学术知识以及宽容待人的风范使我受益良多。你们传授给我们知识是我不断成长的源泉，也是完成此次论文的基础。同时，我也要感谢我的父母。他们永远是我成长路上最无私的奉献者。在外地读书的时候，他们总是给予我最温暖的鼓励和关怀。在精神上和经济上都给了我很大的支持！期末的临近、论文的完成也就意味着我在北京理工大学珠海学院的大学四年的旅途也即将结束。这四年过得很快也很幸福。和同学们一起上课下课、一起写作业、一起吃零食。和室友们一起玩闹、一起欢声笑语。遇到不懂的知识都可以问老师，老师也会很快回答你。生活中遇到一些困难，辅导员也会很快帮忙解决。遇到不开心的事，可以跟朋友们一起聊天。遇到学习上的小麻烦也可以向同学们请教。最后衷心的感谢母校、父母、老师、辅导员、同学、朋友、室友们！附录goods.jsconstGoodsDetailModel=require('../models/GoodsDetailModel.js');constGoodsModel=require('../models/GoodsModel.js');constTypeModel=require('../models/TypeModel.js');constUserModel=require('../models/UserModel.js');constOrderModel=require('../models/OrderModel.js');constCommentModel=require('../models/CommentModel.js');constjwt=require('jsonwebtoken');constmoment=require('moment');//得到不同类目的商品exports.getGoodsByType=async(ctx)=>{ consttypeId=ctx.query.typeId; try{ letgoods; //查全部 if(typeId==='-1'){ goods=awaitGoodsModel.findAll({ attributes:['id','name','img','typeId'], order:[ ['createtime','DESC']//从大到小 ], }); }else{ goods=awaitGoodsModel.findAll({ attributes:['id','name','img','typeId'], where:{ typeId:typeId }, order:[ ['createtime','DESC'] ], }); } if(goods.length===0){ ctx.body={ code:0, data:[] }; return; } letgoodsList=[]; for(letitemofgoods){ constspec=awaitGoodsDetailModel.findOne({ attributes:['unitPrice'], where:{ goodsId:item.dataValues.id } }); goodsList.push({ id:item.dataValues.id, img:item.dataValues.img, name:item.dataV, price:spec.unitPrice, typeId:item.dataValues.typeId }) }; ctx.body={ code:0, data:goodsList } } catch(e){ ctx.body={ code:10000, message:'网络错误' } }}//得到商品详情页信息exports.getGoodsInfo=async(ctx)=>{ constid=ctx.query.id; try{ constgoods=awaitGoodsModel.findOne({ attributes:['id','name','img','desc','typeId'], where:{ id:id }, }); if(!goods){ ctx.body={ code:0, data:{ img:'', name:'', desc:'', specs:[], typeId:'' } }; return; } constspecs=awaitGoodsDetailModel.findAll({ attributes:['id','specName','stockNum','unitPrice'], where:{ goodsId:id } }); ctx.body={ code:0, data:{ img:goods.img, name:, desc:goods.desc, typeId:goods.typeId, specs:specs } } } catch(e){ ctx.body={ code:10000, message:'网络错误' } }}//加入购物车或立即购买exports.addOrder=async(ctx)=>{ consttoken=ctx.request.body.token; try{ constres=OrderModel.create({ userId:jwt.verify(token,'chambers'), goodsDetailId:ctx.request.body.goodsDetailId, goodsNum:ctx.request.body.num, amount:ctx.request.body.amount, state:ctx.request.body.state, updatetime:newDate(), createtime:newDate() }); //如果是立即购买的话，库存要马上变动 if(ctx.request.body.state===1){ constspec=awaitGoodsDetailModel.findOne({ attributes:['stockNum'], where:{ id:ctx.request.body.goodsDetailId } }); letnewNum=spec.stockNum-ctx.request.body.num; awaitGoodsDetailModel.update( { stockNum:newNum }, { where:{ id:ctx.request.body.goodsDetailId } } ); }; ctx.body={ code:0 } } catch(e){ ctx.body={ code:10000, message:'网络出错' } }}//获得用户订单exports.getOrderByState=async(ctx)=>{//以上案例，获取订单详情信息，要查询出订单详情里面每条商品的数据， //先查询出来该订单的数据，然后循环订单数据里面商品数组，再根据数组去根据每一个id去获取对应的商品数据。 conststate=Number(ctx.query.state); constuserId=jwt.verify(ctx.query.token,'chambers');//验证token try{ letorders; //查全部的 if(state===-1){ orders=awaitOrderModel.findAll({ where:{ userId:userId,//WHERE子句用于提取那些满足指定条件的记录。 }, order:[ ['createtime','DESC'] ], }); }else{ orders=awaitOrderModel.findAll({ where:{ userId:userId, state:state }, order:[ ['createtime','DESC'] ], }); }; letorderList=[]; for(letorderoforders){ constspec=awaitGoodsDetailModel.findOne({ attributes:['id','goodsId','specName','unitPrice'],//attributes可以获取一个对象中的一个属性，并且作为对象来调用，注意在这里要使用“[]” where:{ id:order.dataValues.goodsDetailId } }); if(!spec){ continue; } constgoods=awaitGoodsModel.findOne({ attributes:['id','name','img'], where:{ id:spec.goodsId } }); if(!goods){ continue; } //如果是已完成订单，那就看看评价过没有 lethasComment=false; if(order.dataValues.state===3){ letcomment=awaitCommentModel.findOne({ where:{ orderId:order.dataValues.id } }); if(comment){ hasComment=true; } } orderList.push({ id:order.dataValues.id, createtime:moment(order.dataValues.createtime).add('hours',8).format('MM-DDHH:mm'), goods:{ img:goods.img, id:goods.id, goodsDetailId:spec.id, name:, spec:spec.specName, unitPrice:spec.unitPrice, }, goodsNum:order.dataValues.goodsNum, amount:order.dataValues.amount, state:order.dataValues.state, hasComment:hasComment }) } ctx.body={ code:0, data:orderList } } catch(e){ console.log(e); ctx.body={ code:10000, message:'网络出错' } }}//确认收货exports.confirmReceive=async(ctx)=>{ constorderId=ctx.query.id; try{ awaitOrderModel.update( { state:3 }, { where:{ id:orderId } } ); ctx.body={ code:0 } } catch(e){ ctx.body={ code:10000, message:'网络出错' } }}//确认付款exports.pay=async(ctx)=>{ constorderId=ctx.query.id; try{ awaitOrderModel.update( { state:1 }, { where:{ id:orderId } } ); ctx.body={ code:0 } } catch(e){ ctx.body={ code:10000, message:'网络出错' } }}//购物车结算exports.settleAccounts=async(ctx)=>{ letcartList=ctx.request.body.cartList; try{ for(letitemofcartList){ letorder=awaitOrderModel.findOne({ attributes:['goodsDetailId'], where:{ id:item.id } }); awaitOrderModel.update( { state:1, goodsNum:item.goodsNum, amount:item.amount },{ where:{ id:item.id } } ); //更新库存 letspec=awaitGoodsDetailModel.findOne({ attributes:['stockNum'], where:{ id:order.goodsDetailId } }); letnewNum=spec.stockNum-item.goodsNum; awaitGoodsDetailModel.update( { stockNum:newNum },{ where:{ id:order.goodsDetailId } } ) }; ctx.body={ code:0 } } catch(e){ ctx.body={ code:10000, message:'网络出错' } }}//发送评价exports.sendComment=async(ctx)=>{ try{ constres=awaitCommentModel.create({ userId:jwt.verify(ctx.request.body.token,'chambers'), goodsId:ctx.request.body.goodsId, goodsDetailId:ctx.request.body.goodsDetailId, orderId:ctx.request.body.orderId, content:ctx.request.body.content, score:ctx.request.body.score, createtime:newDate() }); ctx.body={ code:0 } } catch(e){ ctx.body={ code:10000, message:'网络出错' } }}//获得商品评论exports.getGoodsComment=async(ctx)=>{ constgoodsId=ctx.query.goodsId; try{ constcomments=awaitCommentModel.findAll({ where:{ goodsId:goodsId }, order:[ ['createtime','DESC'] ], }); if(comments.length<=0){ ctx.body={ code:0, data:{} }; return; } //分数累加 letsum=0; letcommentList=[]; for(letcommentofcomments){ sum+=comment.score; letuser=awaitUserModel.findOne({ attributes:['nickname','headimg'], where:{ id:comment.dataValues.userId } }); if(!user){ user={ nickname:'该用户已注销',