基于Vue+Node的Sunload甜品网上商城.docx
《基于Vue+Node的Sunload甜品网上商城.docx》由会员分享，可在线阅读，更多相关《基于Vue+Node的Sunload甜品网上商城.docx（43页珍藏版）》请在冰豆网上搜索。
基于Vue+Node的Sunload甜品网上商城
基于Vue+Node的Sunload甜品网上商城
摘要：
随着社会的进步和发展，人们选择加快自己的生活节奏，从而创造出更多的社会价值。
也随着甜品种类的日益增长和互联网技术的发展，人们开始追求足不出户的购买自己想要的商品，从而享受快节奏生活中剩下的空闲时间。
互联网信息发达的今天每个人都拥有自己的电脑和手机，让我们实现在网上订购自己喜欢的甜品成为了可能，针对现在购买甜品还需要传统的电话和微信预约等效率不高方式的问题，分析了现存甜品商城的经营模式，采用了B/S开发模式，MVVM设计模式开发一个基于Vue+Node的Sunload甜品网上商城来满足人们快节奏生活有着非常重要的意义，解决了购买甜品还需要传统的电话和微信预约等效率低下的方式和满足不了当今社会人们快节奏生活等的问题，实现了用户们可以在Sunload甜品网上商城上选购自己喜欢的甜品，Sunload甜品网上商城管理者可以在线上接单，并处理用户们的订单信息，提高了用户们的空闲时间利用率和商城管理者的经济效益和管理成本。
B/S模式是Sunload甜品网上商城的实现模式，Sunload甜品网上商城分为客户端和管理服务端。
Vue.js将被作为客户端和管理服务端前端的开发语言，Node.js将被作为客户端和管理服务端后端的开发语言，数据库支持使用MySQL数据库，VisualStudioCode将被作为开发前端和后端的开发工具。
Sunload甜品网上商城的实现为广大互联网用户提供了一个新的选择。
对于用户来说，可以在互联网的基础上在商城选择自己喜欢的甜品，对于Sunload甜品网上商城的管理者来说，可以将自己所生产的多种商品放到商城供用户选择，并创造出更多的经济效益。
对于用户和Sunload甜品网上商城管理者来说，这将会对当今社会人们快节奏生活产生一定有益的影响。
关键词：
互联网，经济利益，网上商城，Vue，模式
第6章结束语43
第1章绪论
1.1开发的背景和意义
随着社会的进步和发展和随着互联网技术的日益发展和甜品种类的日益增长，人们对于互联网已经不再是单单的浏览网页来获取信息，而是通过互联网来在线购买自己喜欢的商品。
当今人们的生话是一个快节奏的生活，人们除了工作所剩下的空闲时间不多，日益忙碌的人们开始追求足不出户的购买自己想要的商品和自己想要的甜品，来享受工作中剩下的闲暇时间，虽然现在互联网发展势头很好，但是现在人们购买甜品最常用的方式还是去店铺和在电话上预约购买，这样大大浪费人们工作中所剩下的闲暇时间，现在的购买方式已经满足不了人们快节奏生活的需求了。
因此，建设一个甜品的网上商城是非常有必要的，这样人们传统的进店购买和电话预约存在的问题可以得到有效的解决，甜品的网上商城的实现条件以互联网技术的不断完善奠定了基础。
甜品的网上商城的建立，是为了满足日益忙碌的人们足不出户就可以挑选自己喜爱的甜品，在于给广大网上消费者提供一个方便、快捷、周到的购物环境和丰富的甜品信息资源，促进信息的交流，减少用户出门购物的不便，在商城上挑选甜品和交易大大提高了交易的成本和时间，能够及时的，准确的提高工作效率，取得经济利益和社会利益，所以急需设计一个甜品商城网站来满足人们的需求。
1.2国内外研究现状
从国内外发展的状况来看，有许多店家已经开始建设自己的甜品商城，比如昌吉甜品商城，又乐商城，BONCAKE商城等，但是这些商城发展的还不够充分，比如网上的用户在网络购物的心理需求，一是商品的质量，用户一般比较担心网上商品的质量问题，现在的甜品商城并没有注意到这个问题，二是保质期，保质期也是用户一直在担心的，但随着快递业和保鲜技术的发展，这个问题也就迎刃而解，三是甜品的种类，发现现在的甜品商城种类比较少，不能给用户提供更多的选择，如果我们要让商城充分发展，我们就要站在用户的角度思考，无论什么样的甜品网站，最终的目的都是要满足市场，满足用户，围绕着市场，围绕着用户，做出与市场和用户相关性极强的商品，商城才有可能取得成功。
1.3主要研究内容
Sunload甜品网上商城主要研究在pc端实现在线上选择自己喜欢的甜品并下单购买，主要解决两个方面，一方面解决了用户的精力和空闲时间，用户不会在以传统的方式购买甜品，另一方面商城管理者成本也会降低和利润都将会有所提高。
Sunload甜品网上商城是由客户端交互界面和管理端交互界面，后台服务器和数据库基本组成的，所以Sunload甜品网上商城的主要研究内容分为下面几步：
首先客户端交互界面和管理端交互界面如何设计出好的交互界面，因为一个网上商城必须要有良好的交互界面，这个样子用户用的去才会舒服，其次如何设计好商城的后台服务器，因为一个功能完整B/S架构系统需稳定的服务器；接着是如何设计数据库，因为数据库是服务器的支持和后盾。
1.4开发环境与开发工具
16GB的win10x64操作系统，Vue.js将被作为客户端和管理服务端前端的开发语言，Node.js的Express框架将被作为客户端和管理服务端后端的开发语言，数据库支持使用MySQL数据库，VisualStudioCode将被作为开发前端和后端的开发工具，以上是Sunload甜品网上商城的开发环境和开发工具。
第2章系统需求分析
2.1可行性分析
基于Vue+Node的Sunload甜品网上商城整个页面的交互，后台服务器接口和数据库的设计都是由个人完成，所以开发成本几乎是零成本，在网上商城开发完成后，将为用户节省更多空闲时间和精力和提高商家的利润。
个人在实习公司从事前端开发，已经具备开发网上商城的技术，采用的技术是Vue.js和Node.js的Express.js,数据库使用Mysql。
Sunload甜品网上商城是基于互联网，简明好看的UI、易于操作的方式和过程是Sunload甜品网上商城的巨大优点。
只要用户在家拥有网络和上网冲浪的经历，操作Sunload甜品网上商城不是问题。
2.2系统的总体需求
Sunload甜品网上商城是由客户端和服务管理端两个端组成的：
客户端可以浏览各种各样的甜品，并且在已经登录的情况下可以进行购买，收藏，进入个人中心等一系列操作；而服务管理端，是主要对商城的管理人员开放的，主要实现对甜品的管理以及订单管理和用户管理。
从而使整个甜品网上商城正常运转工作，实现用户和商城管理者互利共赢。
2.3系统的业务需求
以下是对商城客户端和服务管理端的业务需求分析。
2.3.1Sunload甜品网上商城客户端
图2.3.1客户端业务流程图
用户进入Sunload网上商城可以不用登录的情况下进行浏览商品的操作，如果用户想要进行收藏商品、购物车、查看个人信息和进行商品支付操作，这些必须在登录注册后才可以进行操作，如果登录注册失败后会跳回登录注册页面，登录注册成功后在购物车页面可以进行添加、修改、删除等购物车的一系列操作，在个人信息中可以查看自己注册的信息和新增、修改、删除收货地址的操作。
2.3.2Sunload甜品网上商城服务管理端
图2.3.2服务管理端业务流程图
商城管理者要进入商城的后台必须先进行登录操作，登录失败返回登录页面，登录成功后可进入商城的后台管理系统，商城的后台分为数据总览、注册用户管理、商品管理、订单交易管理，数据总览可以通过图表查看到商城的所有总览数据，注册用户管理可以进行添加、修改用户信息和用户角色、删除等操作，商品管理可以进行添加、修改、删除等商品信息的操作，订单交易管理可以进行修改和删除订单的操作。
2.4系统功能的需求分析
Sunload甜品网上商城主要分为客户端和服务管理端：
在客户端中主要包括：
登录注册、浏览商品、收藏商品、购物车、商品支付、个人信息等一系列功能；而服务管理端中主要包括：
登录注册、数据总览、注册用户管理、订单交易管理和商品管理等一系列功能。
图2.4客户端和服务管理端的功能
本商城网站分成两个系统：
（1）客户端系统：
①登录注册：
用户浏览商品后，如果想要购买，收藏商品和进入个人中心，需要登录注册来实现，客户端注册只能为注册者，没有管理后台的权限。
②浏览商品：
用户可以在客户端浏览商城上所有的商品。
③收藏商品：
用户对自己喜欢的商品可以进行收藏，但前提是要登录该商城账号，不然无法收藏。
④购物车：
用户可以对自己想要的商品添加到购物车，但前提是要登录该商城账号，不然无法添加到购物车，用户可以在删除购物车中的商品、清空购物车。
⑤商品支付：
用户可以将喜欢的商品加入购物车，勾选自己喜欢的商品加入购物车，并进行商品支付功能。
⑥个人信息：
用户可进入个人中心，但前提是要登录该商城账号，不然无法进入个人信息中心，个人中心里面有个人信息和个人地址，个人收藏的商品和个人的交易订单记录。
（2）服务管理端：
①数据总览：
管理员可以在数据总览中根据图表数据看到下面三个模块的各种数据信息。
②注册用户管理：
管理员可以在注册用户管理中，对已经注册过的用户进行增加、删除、修改、查看操作，可以设置管理员和注册者的身份。
③订单交易管理：
管理员可以在订单交易管理中看到所有用户购买的所有订单，修改用户填写错误的订单，并根据订单的收获地方进行发货。
④商品管理：
管理员可以在商品管理中，对商品进行增删改查的操作，并将商品设置不同的分类，给用户提供多种多样的商品。
2.5UML系统建模
2.5.1用例图
以下是对商城客户端和商城服务管理端的用例图。
图2.5.1Sunload甜品网上商城客户端用例图
图2.5.2Sunload甜品网上商城服务管理端用例图
2.5.2用例图规约表
用户和商城管理者用例规约表：
表2-1登录注册用例
用例编号
2-1
用例名称
登录注册
功能描述
当用户登录注册后可以访问更多商城信息，比如个人中心和购物车
执行者
用户
前置条件
Sunload甜品网上商城正常运行，有网络接入。
后置条件
如果是用户，用户可以访问更多商城信息；
如果是商城管理者，可以进入商城的后台管理。
涉众利益
用户登录注册之后，可以进行下单、管理地址和收藏商品、商品放入购物车等操作；
商城管理者登录后，可以进行注册用户管理、商品管理和订单交易信息管理等操作。
基本路径
用户：
1.如果用户还未注册，选择注册；
2.把注册信息按规则填写；
3.注册成功并转登录页面；
4.如果用户已经注册，可输入登录信息；
5.登录后访问更多商城信息。
管理者：
1.如果管理者用户登录账号，则输入登录信息；
2.登录成功并进入商城后台管理系统。
扩展
无
字段列表
用户：
1.邮箱；2.密码；3.验证码
管理者：
1.邮箱；2.密码；3.验证码
业务规则
无
备注
无
表2-2收藏商品用例
用例编号
2-2
用例名称
收藏商品
功能描述
当用户登录后，可以进去商品的详细页面并点击收藏商品
执行者
用户
前置条件
进入Sunload甜品网上商城，并登录。
后置条件
显示商城商品的详细信息。
涉众利益
用户可以根据自己的喜爱，收藏自己喜欢的商品。
基本路径
1.进入商品的详细页面
2.点击收藏按钮，收藏自己喜爱的商品。
扩展
无
字段列表
1.商品名称；2.商店价格；3.商品分类；4.logo;
业务规则
无
备注
无
表2-3购物车用例
用例编号
2-3
用例名称
购物车
功能描述
当用户登录后，可以进去商品的详细页面并点击加入购物车
执行者
用户
前置条件
进入Sunload甜品网上商城，并登录。
后置条件
显示商城商品的详细信息。
涉众利益
用户根据自己的喜爱，用户可以将自己喜欢想要购买的商品加入购物车，在购物车页面可以进行删除操作。
基本路径
1.进入商品的详细页面
2.点击加入购物车，商品会在购物车列表中。
扩展
无
字段列表
1.商品名称；2.商店价格；3.商品属性；4.logo;5.商品数量；6.商品总价
业务规则
无
备注
无
表2-4个人信息用例
用例编号
2-4
用例名称
个人信息
功能描述
当用户登录后，可以进入个人信息查看自己的信息并管理收货地址
执行者
用户
前置条件
进入Sunload甜品网上商城，并登录。
后置条件
显示个人信息、收货地址和自己收藏的商品。
涉众利益
用户可以对自己的收货地址，进行增加、修改、删除，并可以查看到自己收藏的商品。
基本路径
1.进入网上商城的个人信息
2.对自己的收货地址，进行增加、修改、删除。
3.查看自己收藏的商品
扩展
无
字段列表
1.邮箱；2.密码；3.用户名；4.角色;5.商品名称；6.商店价格；7.商品分类；8.logo;9.收货人；10.收货地址；11.手机号码
业务规则
无
备注
无
表2-5商品管理用例
用例编号
2-5
用例名称
商品管理
功能描述
当商城管理者登录后，可以进入后台管理系统的商品管理，可以对商品进行查看、新增、修改和删除操作
执行者
商城管理者
前置条件
进入Sunload甜品网上商城管理端，并登录。
后置条件
对商品管理进行管理
涉众利益
商城管理者可以根据用户需求，对商品进行新增、修改和删除以优化商品，吸引更多的用户
基本路径
1.选择商品管理，显示商品列表；
2.在商品列表右上角有一个添加按钮，点击它可以进入新增商品弹窗，填写完添加商品信息并提交完成新增商品；
3.选择进入商品编辑界面
3.1修改完商品信息并提交完成修改商品操作；
4.在商品列表有一个删除按钮，点击它会提示是否删除，如果是则删除会重新刷新商品列表，否则关闭提示框。
扩展
1.搜索商品
在商品列表的搜索栏中输入商品的关键字，就会显示相应商品信息；
字段列表
1.商品名称；2.商品数量；3.商品价格；4.商品轮播图;5.商品属性；6.商店分类；7.logo；
业务规则
无
备注
无
表2-6注册用户管理用例
用例编号
2-6
用例名称
注册用户管理
功能描述
当商城管理者登录后，可以进入后台管理系统的注册用户管理，可以对注册用户进行查看、新增、修改和删除操作
执行者
商城管理者
前置条件
进入Sunload甜品网上商城管理端，并登录。
后置条件
对注册用户管理进行管理
涉众利益
商城管理者可以管理全部注册Sunload网上商城的用户，有利于用户的统计和管理
基本路径
1.选择注册用户管理，显示注册用户列表信息；
2.在注册用户列表右上角有一个添加按钮，点击它可以进入新增注册用户弹窗，填写完添加注册用户信息并提交完成新增注册用户；
3.选择进入注册用户编辑界面
3.2修改完注册用户信息并提交完成修改注册用户操作；
4.在注册用户列表有一个删除按钮，点击它会提示是否删除，如果是则删除会重新刷新注册用户列表，否则关闭提示框。
扩展
1.搜索注册用户
在注册用户列表的搜索栏中输入注册用户的关键字，显示相应注册用户信息；
字段列表
1.邮箱；2.密码；3.用户名；4.角色;
业务规则
无
备注
无
2.6本章小结
本章首先主要总体分析出Sunload甜品网上商城有客户端和服务管理端；然后对客户端和服务管理端两个端的业务需求进行分析且用业务流程图分别展示了客户端和服务管理端的业务流程，通过功能模块图展示了客户端和服务管理端的功能需求，接下来对Sunload甜品网上商城各方面的可行性进行了分析；最后，向用户展示Sunload甜品网上商城的功能，Sunload甜品网上商城给出了用例图并对各个用例用表格进行了说明。
第3章系统设计
3.1系统功能设计
本系统由客户端和服务管理端组成。
3.1.1客户端
（1）登录注册功能：
用户进入Sunload甜品网上商城后，顶部的导航栏有登录、注册两个栏目，点击注册这个导航栏，进入客户端的注册页面，输入账号、昵称、密码、确认密码进行注册，如果注册的账号有相同，则不能注册，注册成功后跳转到登录页面，根据注册的账号输入账号、密码、验证码进行登录，登录不成功会提示账号或者密码不正确，登录成功后进入商城首页。
（2）浏览商品功能：
用户可以进入商城后查看首页和所有网上上的商品，并有权访问除购物车、个人中心以外的导航栏，这个功能不用登录。
（3）收藏商品功能：
用户要在登录的前提写才可以进入收藏商品的操作，在进入网上商城后，点击商品的卡片，然后进入商品的查看详情页面，商品的查看详情页面里面有收藏按钮，点击收藏按钮，如果登录成功则会提示收藏成功，用户收藏的商品可以在个人中心查看，如果没有登录则会提示收藏商品前需登录。
（4）购物车功能：
用户要在登录的前提写才可以进入购物车的页面，在进入网上商城后，点击商品的卡片，然后进入商品的查看详情页面，商品的查看详情页面里面有加入购物车的按钮，点击购物车按钮前，需要选择购买的尺寸和购买的数量，如果登录成功则会提示加入购物车成功，用户加入购物车的商品可以在购物车这个页面中查看，如果没有登录则会直接跳到登录页面。
（5）商品支付功能：
用户要在登录的前提写才可以进入购物车的页面，在购物车页面有自己加入购物车的商品列表，用户可以删除商品页面上的商品信息，当用户勾选自己喜欢的商品后，点击结算按钮后会出现一个结算的弹窗页面，支付成功后，支付的订单信息会在后台的订单交易管理中生成订单列表。
（6）个人信息功能：
用户要在登录的前提写才可以进行个人信息的页面，在个人信息的页面中可以查看用户的个人信息，可以设置用户的收货地址，可以查看用户自己喜欢的收藏商品。
3.1.2服务管理端
（1）登录功能：
商城管理者进入Sunload甜品网上商城后，顶部的导航栏有登录栏目，进入登录页面后，左下方下面有一个管理端的按钮，点击后进入管理后台的登录页面，根据输入账号、密码、验证码进行登录，登录不成功会提示账号或者密码不正确，登录成功后进入管理后台首页。
（2）数据总览功能：
数据总览为管理后台的首页，数据总览页面的内容是图表数据，主要是用来统计注册用户、订单交易、商品的全部数据。
（3）注册用户管理功能：
商城管理者要在登录的前提下才可以进入注册用户管理页面，管理员可以在注册用户管理中，对已经注册的用户进行增加、删除、修改、查看等操作，可以设置管理员和注册者的身份，在修改中不可以修改用户的登录密码，保护用户的密码隐私。
（4）商品管理功能：
商城管理者要在登录的前提写才可以进入商品管理页面，管理员可以在商品管理中，对商城中所有的商品进行管理，可以搜索查看、添加，修改、删除、设置商品的分类。
（5）订单交易管理：
商城管理者要在登录的前提写才可以进入订单交易管理页面，管理员可以在订单交易管理中，查看用户所有的订单信息，并根据订单中的订单信息，用户提供的收货地址和挑选的商品，联系快递将商品寄到用户的手中，管理员还可以进行查看、修改、删除订单的操作。
3.2Sunload甜品网上商城类图
以下是Sunload甜品网上商城的类图。
图3.2.1Sunload甜品网上商城类图
3.3Sunload甜品网上商城顺序图
3.3.1客户端顺序图
1.用户注册顺序图
（1）用户进入商城的注册页面输入用户注册的账号、昵称和密码等信息；
（2）用户输入完毕后点击注册按钮，发送请求到服务器；
（3）服务器会判断账号是否存在；
（4）如果账号已经存在，服务器会返回账号已存在的提示信息，客户端页面会将提示语展示给用户，提醒用户；
（5）如果账号不存在，服务器开始注册账号；
（6）服务器注册账号成功；
图3.3.1用户注册顺序图
2.用户登录顺序图
（1）用户进入商城登录页面输入登录信息；
（2）用户输入完毕后点击登录按钮，发送请求到服务器；
（3）服务器会登录信息是否正确；
（4）如果登录信息错误，服务器会返回账号密码不正确，客户端页面会将提示语展示给用户；
（5）如果登录信息正确，服务器会返回登录成功；
图3.3.2用户登录顺序图
3.用户添加购物车顺序图
（1）用户在商城网站进中入商品详细界面并点击加入购物车；
（2）商城网站提示用户选择商品的尺寸和数量；
（3）用户选择商品的尺寸和数量并提交给服务器；
（4）服务器返回提示给用户端；
图3.3.3用户添加购物车顺序图
4.用户删除购物车顺序图
（1）用户在商城网站进中入购物车也买你并点击删除按钮；
（2）商城网站提示用户是否删除；
（3）如果用户点击了否，则关闭提示；
（4）如果用户点击了是，发送请求到服务器;
（5）服务器删除该购物车商品信息并返回删除的结果；
图3.3.4用户删除购物车顺序图
3.3.2服务管理端顺序图
1.商城管理者登录顺序图
（1）商城管理者进入后台登录页面输入登录信息；
（2）用户输入完毕后点击登录按钮，发送请求到服务器；
（3）服务器会登录信息是否正确；
（4）如果登录信息错误，服务器会返回账号密码不正确，服务管理端端页面会将提示语展示给用户；
（5）如果登录信息正确，服务器会返回登录成功；
图3.3.5商城管理者登录顺序图
2.商城管理者添加商品顺序图
（1）商城管理者在服务管理端中进入商品管理列表并点击添加商品；
（2）服务管理端提示商城管理者输入商品信息；
（3）商城管理者输入商品信息并提交给服务器；
（4）服务器判断添加的商品是否存在；
（5）如果商品已经存在，服务器返回商品已存在；
（6）如果商城不存在，服务器返回添加成功；
图3.3.6商城管理者添加商品顺序图
3.商城管理者修改商品顺序图
（1）商城管理者在服务管理端中进入商品管理列表并点击修改商品按钮；
（2）服务管理端提示商城管理者输入商品信息；
（3）商城管理者输入商品信息并提交给服务器；
（4）服务器判断添加的商品是否存在；
（5）如果商品已经存在，服务器返回商品已存在；
（6）如果商城不存在，服务器返回修改成功；
图3.3.7商城管理者修改商品顺序图
4.商城管理者删除商品顺序图
（1）商城管理者在服务管理端中进入商品列表并点击删除按钮；
（2）服务管理端提示商城管理者是否删除；
（3）如果商城管理者点击了否，则关闭提示；
（4）如果商城管理者点击了是，发送请求到服务器;
（5）服务器删除该商品并返回删除的结果；
图3.3.8商城管理者删除商品顺序图
3.4sunload甜品网上商城活动图
3.4.1用户购物车功能活动图
用户进入Sunload甜品网上商城客户端的商城页面，进入商品的详情页，点击加入购物车，当选择了商品尺寸和数量后，点击加入购物车按钮，会提示添加购物车商品成功，当用户进入商城的购物车页面，可以看到购物车列表，你可以勾选自己想要删除的商品，点击删除按钮后会弹出一个提示是否删除该商品，选择确认，服务器会进行删除，删除成功后页面会自动刷新，选择取消则关闭提示。
图3.4.1用户购物车功能活动图
3.4.2商城管理者商品管理活动图
商城管理者进入Sunload甜品网上商城服务管理端的后台页面，进入商品管理页面，点击添加商品，会出现一个弹窗，填写商品的信息后点击确认则可以添加商品，商品管理列表自动刷新，点击修改商品，会出现一个弹窗，填写修改的商品的信息后点击确认则可以修改商品，商品管理列表自动刷新，点击删除商品，会出现一个提示，选择确认则删除商品，商品管理列表自动刷新，选择否则关闭提示。
图3.4.2商城管理者
升级会员 