基于vue的电子商务平台.docx
《基于vue的电子商务平台.docx》由会员分享，可在线阅读，更多相关《基于vue的电子商务平台.docx（32页珍藏版）》请在冰豆网上搜索。
基于vue的电子商务平台
基于vue的电子商务平台
摘要
计算机技术在很多行业都发展的很好，在不知不觉中人们的心里也有了网络的概念。
网络在各个行业的发展战略中都占据了很重要的位置，特别是网络销售这一块，网络已经成为了商家不可分割的部分。
很多商家宣传商品已经不只局限于电视、传单和报纸，他们还会在网上进行宣传，而且网络宣传更实惠。
所以商家们开始建立网站，将商品各方面的宣传和服务在网络上呈现给大家，通过网站，人们可以进行网上购物、商品查询和信息查询等功能。
网络在改变我们原来的经营理念和经营模式的同时，也给商家们带来了更多的利益。
所以，对于商家们来说，都希望有一个自己的网站。
本商务平台研究的是网上购物系统，它是基于BS结构的，也就是客户端浏览器、web服务器和数据库交互的结构。
主要开发包括前端页面的一些Web设计和SQL数据库
的建立以及维护。
系统主要是用node.js为核心语言进行开发，再结合SQL建立数据连接关系，不断改进，直到功能系统的基本功能能够实现。
本系统主要是有四个功能，分别是用户的管理、资料的管理、商品的管理和订单的管理。
在用户管理中的注册模块，邮箱和昵称的唯一性性，加强了用户注册信息的严谨性。
并且规定只有注册成功和登录成功的会员才能下订单，不是会员的用户只能够浏览商品。
整个购物系统结构清晰，功能明确，易操作。
这样使交易可以更加方便和便捷
关键词：
node；SQL；Web；网上购物系统
1前言
近年来，网络在人们的工作和生活中已经日益盛行,大多数人已经离不开网络了。
人们已经不只是用网络来了解最新新闻、天气情况和查找资料等这些简单的操作。
而是已经过渡到娱乐、游戏、电子商务、购物、与人交流等新兴的网民生活。
电子商务，从字面上来讲就是在网络上开展商务活动。
什么是商务活动呢？
商务活动就是完成金融、商品、信息，服务等价值的交换。
电子商务就是用电子交易来完成商务活动。
电子商务是很方便的，它的出现，已经改变了传统的一手交钱一手交货的购物模式。
网购是电子商务的一部分，也是发展很好的一部分。
网上购物，现在已经是一种时尚了。
而商家，也看准了时机，开始进行网络建设，利用网络的优势，低成本、高效性来宣传企业的商品和形象。
在我们国家以前大部分的销售都需要面对面来交流的，如：
传统的店铺销售和上门推销东西等。
这些销售活动，大部分都会受到天气、地域和时间等方面的限制，所以公司和企业的销售金额也会跟着受限制，对于公司和企业来说是很不便的。
对于消费者来说，出门购物有时候也是挺麻烦的，不是每一次都有时间去的，而且有些东西可能会跨越一个城市才能够购买。
如果能足不出户就能买到东西，那真是太好了。
因为人们的需求，无论是国内还是国外电子商务的发展是十分迅速的。
很多国家都很重视电子商务，并且在积极的发展电子商务。
国家和人民的支持使电子商务发展的越来越快，从而产生了网上银行、网络营销、虚拟货币和网上购物等新的产业，从另一个角度看出了电子商务对经济和社会都有着深刻的影响。
所以我们要跟上国家和人民的步伐，一起发展电子商务。
因此我也想尝试一下构建一个网上商城系统。
1.1系统开发背景
随着越来越多的人开始使用网络和计算机，很多聪明的商家开始在网上发布产品，向顾客展示出崭新的购物模式。
在美国、瑞典等比较发达的国家，他们很重视网络的发展，所以网络商店发展很快。
如美国的沃尔玛、亚马逊，瑞典的宜家等都开始进行网络销售。
看报道上说很多美国家庭已经习惯了在网上购物了。
在我们国家，从面对面购物到网上购物也就几年的时间。
我国的第一笔网上交易是发生在1998年，后一年随着8848等B2C网站的正式开通，中国开始进
入网上购物的实际阶段。
随后几年中，许多著名的销售网站成立了，如阿里巴巴易趣和当当等。
如今在很多大城市，网店已经比较普遍了。
如深圳已有几十家商场开设了网上店铺，当然还有一些比较保守的商家正处于观望阶段。
2010年5月，深圳的天虹商场开办了深圳第一家网上商店，消费者只需要有农业银行的“一卡通”，就可以在网上买商场里的东西，如果地址在配送范围内，商家就会在24小时之内送货到家。
之后便有越来越多的商场来效仿了。
到现在美团上下单，只需几十分钟就可以把东西送到家里了。
真正意义上的网上购物，我国已实现了。
1.2系统开发意义
首先对于消费者来说，网上购物是很方便的。
可以不用出门就能“逛商店”，买东西不受时间限制，可以在白天也可以在夜晚，不会出现店铺关门的情况。
其次可以获得大量关于商品的信息，可以看人们对某个商品的评价，来选择购买或者不购买。
可以购买到当地没有的商品，假如你很喜欢吃某个地方的特产，没有网购的话，你可能需要花费很多时间才能买到，有了网购就很方便了，你可以吃遍全天下。
最后购买的商品快递会送货到家，非常节省时间和精力。
其次对于商家来说，网店投资比较少但回收是比较快的。
一般来说，开一家网店大概需要1500左右，流程也是比较简单的，店主只需要交一些保证金和进行实名认证就可以了，也不用去租店面和办营业执照。
一项针对中国小企业的情况调查显示，如果租房开店或办公平均费用至少在50000元。
两相比较，开网店投资真的是很少了。
其次营业时间和地点自由。
可以24小时营业，也可以根据自己时间安排营业。
无须专人值班看店，只要有一部手机即可和顾客交流，对地点没有限制。
其次不受店面空间的限制。
在你的网店里，只要你愿意，你想放多少商品就可以放多少商品。
最后网店还不受地理位置的限制。
在现实中，地理位置好、人流量多的地方生意大概率会很好，特别受地理位置的影响。
网上则没有这种影响，只要你会营销，有特色，有好的商品，销售量就会高，生意也会好。
而且无论顾客在什么地方，就算是在国外，都能在网上找到你的店铺并且购买你的商品。
这令消费群体们突破了地域限制，变的广阔了。
2系统可行性分析
2.1技术可行性
电子商务网站的开发已有很长一段时间，而且有非常多成功的实例，所用的技术上也是很成熟的，所以技术上的准备是没有什么问题的。
如果遇到不懂的或难以解决问题，可以多去网上学习一下，网上有很多案列的。
现在网上流行的购物系统的页面都是比较简单和漂亮的，页面结构也是清晰简约的，而且逻辑上也是有严谨的规划，注重每一个小细节，在电子交易的时候避免一些不必要的错误。
我们前端将会使用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功能需求
我在设计次系统的时候，观察了淘宝、当当等网站，我觉得系统应该有以下的基本功能：
（1）注册登录管理：
能够对用户名和密码进行简单验证，如果邮箱还没有注册会弹出一个弹框“该邮箱还没有注册，请前往注册”，如果输入的密码错误，会提示你“密码错误”。
还可以对电子邮箱和昵称的唯一性进行验证，每一个Email和昵称都只能注册一次，如果邮箱重复会弹出“该邮箱已被注册”，昵称重复则会弹出“该昵称已被注册”。
（2）商品浏览：
打开浏览器，默认会出现首页，也就是所有商品都会在首页中展示出来。
分类显示商品，有首页、包包、鞋子、彩妆、护肤品、衣服，根据不同的分类会有不同的页面呈现。
当我们点击商品的时候会出现商品详情，可以点击立即购买和加入购物车。
可以对商品进行模糊查询，需要输入商品的名字就会出现所有符合的商品。
所有人都可以浏览商品，但是只有登录的用户才能加入购物车。
（3）购物车管理：
登录成功的用户可以把想要购买的商品添加到购物车，也就是点击“加入购物车”这个按钮的时候会出现“加入购物车成功！
请前往个人中心->购物车结算”，然后我们就可以去个人中心查看商品了。
用户可以对商品进行增加、减少和删除，按‘+’和‘-’按钮时，数量变化的单位是1，数量输入框中可以输入你想买的数量[2]。
金额也是随着数量的改变而变化着。
（4）订单管理：
只有登录成功的用户才可以在商品详情中点击“立即购买”的按钮，如果没有登录点击“立即购买”，会弹出一个“请先登录”。
用户可以查看自己的订单，也可以删除自己的订单。
在订单状态里：
待付款对应的是“确认付款”按钮；已发货对应的是“确认收货”；已完成对应的是“评价”和“已评价”两个状态。
管理员可以修改订单的数量和状态，也可以删除订单。
（5）商品评价：
在商品详情的页面里，会显示评价的内容，所有人都是可以看见的。
只有订单状态是已完成的时候，用户才可以对其进行评价。
评价有两部分，第一部分是给商品打分（5颗星为满分100分，1颗星就代表20分），第二部分是输入文字评论，两个部分都不可以缺少，否者按“发表”按钮的时候会出现“评分和评价不能为空”的弹框。
（6）商品管理：
管理员可以添加商品的分类，现在有：
包包、鞋子、彩妆、护肤品、衣服。
可以编辑修改商品的名称、选择类目、库存量、价格，上传照片等；根据自己的需求在不同类目中上传新的商品；可以删除商品。
（7）用户管理：
管理员可以查看所有的用户。
可以根据email和phone条件查询得到符合条件的用户，还可以根据nickname、recipient、address进行模糊查询得到符合条件的用户。
还可以删除某个用户，删除后用户的名称是：
该用户已注销，头像是灰白的默认头像。
（8）资料修改：
管理员在修改资料模块只有一个权限，就是修改密码。
用户在修改资料模块，修改昵称、收件人、收货地址、联系电话和密码等，但是不能修改账号（邮箱）。
管理员和用户修改自己的密码时，都需要输入原密码、新密码、确认新密码，原密码必须正确并且新密码和确认新密码必须一致，填完后点击“确认修改”按钮。
3.3B/S结构
B/S结构（浏览器/服务器）。
B/S架构有三层。
第一层：
浏览器，展示页面。
它是一个面向客户的角色。
用户不需要下载客户端，只需要有一个浏览器就可以上网浏览了。
用户们在浏览器中进行操作时，如果需要访问数据库，浏览器就会生成HTTP报文，并向WEB服务器发送请求。
第二层：
WEB服务器，处理数据。
它是一个传送信息的角色。
当收到浏览器的请求后，WEB服务器根据请求和请求正文，处理业务逻辑转化成SQL语句，向数据库服务器发起访问请求。
第三层：
数据库服务器，存储数据。
它是一个很重要的角色，因为它存放了大量的数据。
当数据库服务器收到了来自WEB服务器的请求后，会对SQL语句进行处理，并将把返回的结果发送给WEB服务器，然后，WEB服务器将收到的数据结果并且转换为HTML文本形式发送给浏览器，浏览器接收响应，加载到页面展示。
客户端浏览器
Web服务器
应用服务器
数据库服务器
反馈页面
HTTP请求
事务逻辑请求
结果
图3.1B/S结构图
3.4其他要求
（1）页面要求：
页面内容要漂亮大方、页面结构要求清晰明了，页面整体要有自己的特色。
跳转页面时有颜色变化或者弹框出现、好看的按钮小图标等会让浏览者喜欢和留下深刻的印象，也会增加一些购买几率。
（2）系统要求：
系统要运行稳定。
4总体设计
4.1总体结构和模块设计
（1）用户部分有：
用户注册、商品浏览、购物车、我的订单，资料修改等几个部分[3]。
（2）管理部分有：
用户管理、商品管理、订单管理，修改资料等几个部分。
（3）功能结构图如下：
购物系统
系统用户部分
系统管理部分
用户注册
购物车
商品管理
商品浏览
我的订单
用户管理
订单管理
修改资料
修改资料
图4.1功能结构图
5数据库设计
5.1数据库表格设计
表5.1AdminModel
列名
说明
类型
备注
id
主键
BIGINT
自增
account
账号
STRING（255）
唯一
name
姓名
STRING（64）
不允许为null
pwd
密码
STRING（255）
不允许为null
表5.2CommentModel
列名
说明
类型
备注
id
主键
BIGINT
自增
userId
用户id
BIGINT
不允许为null
goodsId
商品id
BIGINT
不允许为null
goodsDetailId
页面详情id
BIGINT
不允许为null
orderId
订单id
BIGINT
不允许为null
表5.3GoodsDetailModel
列名
说明
类型
备注
id
主键
BIGINT
自增
goodsId
商品id
BIGINT
不允许为null
specName
商品规格名称
STRING（500）
不允许为null
stockNum
商品存储量
INTEGER
不允许为null
unitPrice
商品单价
FLOAT
不允许为null
表5.4GoodsModel
列名
说明
类型
备注
id
主键
BIGINT
自增
name
商品名字
STRING（500）
不允许为null
typeId
类型id
BIGINT
不允许为null
img
商品图片
STRING（500）
允许为null
desc
商品描述
TEXT
允许为null
updatetime
修改时间
DATE
不允许为null
createtime
创建时间
DATE
不允许为null
表5.5OrderModel
列名
说明
类型
备注
id
主键
BIGINT
自增
userId
用户id
BIGINT
不允许为null
goodsDetailId
页面详情id
BIGINT
不允许为null
goodsNum
商品数量
INTEGER
不允许为null
amount
商品总金额
FLOAT
不允许为null
createtime
创建时间
DATE
不允许为null
updatetime
修改时间
DATE
不允许为null
state
商品详情
TEXT
不允许为null
表5.6TypeModel
列名
说明
类型
备注
id
主键
BIGINT
自增
name
类名
STRING（255）
不允许为null
表5.7UserModel
列名
说明
类型
备注
id
主键
BIGINT
自增
email
用户邮箱
STRING（64）
唯一的
pwd
用户密码
STRING（255）
不允许为null
sex
用户性别
INTEGER
不允许为null
recipient
收件人
STRING（64）
允许为null
address
收件地址
STRING（500）
允许为null
phone
收货电话
STRING（64）
允许为null
headimg
用户头像
STRING（500）
不允许为null
createtime
创建时间
DATE
不允许为null
updatetime
修改时间
DATE
不允许为null
nickname
用户昵称
STRING（64）
不允许为null
6页面设计
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用户模块功能介绍
（1）用户注册：
用户可以注册一个属于自己的账号。
需要输入自己的一些基本信息，如：
邮箱、昵称、密码、收货地址，电话号码等。
会对用户的注册进行了验证：
邮箱用户名和昵称都必须是唯一的。
如果其他用户注册了的邮箱或昵称，你都不能成功注册，会弹出：
“该邮箱已被注册”或“该昵称已被注册”。
（2）商品浏览：
没有登录的用户也可以浏览所有的商品，可以点击不同的类目（包包、鞋子等），呈现出不同的页面。
点击商品后，出现商品详情还可以看到商品的评价。
用户还可以根据商品的名字来查找商品，只要是符合规定的商品都会在页面上呈现。
呈现有三种形式：
一是默认形式，二是价格从高到低形式、三是价格从低到高形式。
（3）购物车管理：
选购的商品点击添加“加入购物车”按钮以后，会出现一个弹框“请到个人中心去结算”，我们选购的商品就会出现在个人中心的购物车模块中。
在购物车中我们，可以随时添加、减少、删除商品，也可以随时下单结账。
（4）我的订单：
我的订单这个模块在个人中心中，可以查看全部订单和查看订单的状态。
订单状态已完成的时候才可以对商品进行评论。
（5）修改资料：
用户可以修改自己的基本信息，比如昵称、收件人、收货地址等。
修改密码时候，需要输入正确的原密码，并且新密码和确认新密码的值是一样的，才能够修改成功。
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.当用户在商城首页中单击商品展示区的“加入购物车”按钮时，系统会将该商品放入到购物车中。
数量加减逻辑和计算价格。
关键代码如下：
（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'
]
升级会员 