基于Vue的多端电商平台的设计与实现

1 绪论

本系统为基于Vue的移动端电商购物平台，供广大消费者在线购物。手机App端具备较好的表现力与用户体验，但需要安装，在对其公司产品不了解的情况下，会有一些人嫌麻烦或对产品的不信任不愿意下载app，他们会更倾向于选择网页端或小程序使用，看看这个平台提供的产品、服务是否符合他们的预期，如果仅仅使用App，那么可能就会失去这部分用户。本系统整合了各类用户的使用习惯，同时提供App、小程序、网页端三种接入方式，相较于传统APP更能抓住用户。用户可以随时随地以任意方式浏览、比较商品，并进行购买。

2 需求分析

2.1 系统需求

平台系统主要面向用户群体，用户可以登录，或者以游客身份访问，是否登录能访问到的页面不同。用户登录后可以浏览或购买商品、查看浏览记录、参与团购、添加心愿单、关注店铺、参加平台日常活动等。基本内容按划分模块及功能如下：

（1）注册/登录

（2）浏览商品

（3）管理购物车

（4）订单

（5）付款

（6）参与团购

（7）其他功能

（8）修改设置

（9）管理员/商家后台管理

2.2 数据流分析

以下为电商交易平台系统的数据流的分析：

 除了顶层数据流分析，在设计系统时对于每个模块也应有详细的1层数据流分析。以下以管理员模块为例：

 2.3 数据字典

应从对数据项的描述、对数据结构的描述和对数据流的描述三方面介绍系统的数据元素。

结构名	组成	含义
用户表	用户号，用户名，密码，手机号，邮箱，头像，地址等	用于用户注册、登录和修改个人资料
商品表	商品号，价格，商品品名，展示图，详情图，类型，参数，店铺号等	用于用户浏览或购买、商家展示的商品信息
活动表	活动号，标题，活动图片，活动板块等	用于展示某类店铺商品
店铺表	店铺号，店铺logo，店铺名，店铺背景等	用于展示店铺
购物车表	购物车号，用户电话号码，商品，数量等	用于用户暂存商品或购买商品时使用
订单表	订单号,商品,电话,收货地址,订单金额 ,收货地址,创建时间,付款信息等	用于用户购买商品、商家处理发货的凭证

此处的数据项、数据流描述表格可以按照上表中对数据结构的描述尝试设计。

2.4 数据概念模型设计

 根据上述的需求分析，系统需要进行如下几个E-R图绘制。

用户-用户信息的E-R图、用户-订单的E-R图、商品-商品分类的E-R图、商品-商品评价的E-R图、商家-商品的E-R图、商品-订单的E-R图、商家-活动的E-R图、用户-购物车的E-R图、管理员的E-R图。

以用户-订单的E-R图为例，其余的E-R图也代表了系统不可或缺的功能，请自行完成设计。

 3 系统设计

3.1 总体结构设计

根据需求分析按功能得出如下层图

 3.2 数据库设计

根据总体结构框架，该系统需要对用户表user、订单表order、管理员表admin、商品分类表category、商品表good、店铺表merchant、活动表act、商品评价表goodComment、用户信息表user_info、购物车表cart进行设计。（天呐，实在太多了）

这边需要说明一下，这么多数据表可以分成关系数据表与非关系数据表两类。其中也只有user、order、admin是关系数据表。其余属于非关系数据表。关系数据表以user为例展示：

字段	注解	类型	长度	是否可以为空	是否为主键	是否为外键	是否为索引
id	用户ID	int		否	是	否	是
username	用户名	varchar	32	否	否	否	否
password	密码	varchar	100	是	否	否	否
phoneNum	电话号码	int		否	否	否	是
birth	生日	int		是	否	否	否
header	头像	varchar	256	是	否	否	否
discount	地区	varchar	32	是	否	否	否
slogon	签名	varchar	32	是	否	否	否
token	验证值	varchar	50	是	否	否	否

非关系数据库主要使用了MongoDB，在很多地方应用内嵌的形式，即字段的值也可以是一个BSON类型的数据，类似于树状结构。下表为数据表的主要存储内容，Object类型代表内嵌的内容。以category为例展示：

字段	注解	类型	是否可以为空	是否为索引
category_id	分类id	Integer	否	是
name	分类名	String	否	否
sub_categories	子分类	Object	否	否
_id	数据id	ObjectId	否	是

3.3 分模块详细设计

由上文归纳的总体结构设计可以分为登录/注册模块、首页、团购模块、商品详情模块、浏览记录模块、查看订单模块进行设计。登录/注册模块比较基础，这里就不赘述，以浏览记录模块为例进行展示说明：

用户在登录的情况下进入商品详情页时，系统会将该次浏览记录记录，在浏览记录的页面中可以查看浏览过的商品。

对浏览记录设计如下规则：按商品的浏览时间进行倒序排序；每个商品至多在一个用户的浏览记录中出现一次；每个商品记录最多保存60天，超过60天的记录将被系统删除；每个用户最多拥有60条商品记录。

浏览记录使用队列的思想，依赖redis的list类型实现。lsit的left与 right分别为队头和队尾。用户浏览商品时，系统查询队列中是否存在该条商品，如果存在，将该商品的位置移至队头，修改时间戳；如果不存在，将该商品数据添加到队头，并添加时间戳，设置过期时间为60天，若队列中商品数量大于60，将队尾的商品出队。

用户查看浏览记录时，依靠队列中的商品ID查询对应商品信息，按时间戳排序展示给用户。

 PS：建议大家在设计的时候都做一个像上面这样的界面设计框架简图。真的会让思路清晰很多。

流程图也是必不可少的！ 

4 系统实现

4.2 模块功能实现

首先是页面，通过页面草图抽象出以下组件：登录表单(LoginForm)、快捷登录(LoginType)，将组件分别开发以便复用。登录页面嵌入两个表单，一个是手机号+验证码登录，另一个是密码登录，两个表单复用LoginFrom组件得到。用户通过选择选项卡，告知系统显示哪个表单。

以下以短信验证码登录为例作为展示：

LoginForm组件的部分模板代码：

 登陆表单组件JS处理：

验证通过后，LoginForm组件将form传递给其父组件Login，由Login向服务器发送网络请求：

 系统底层对axios框架进行了封装，登录使用封装后的post请求：

 发送短信验证码的网络请求：

 后端处理方面，我在底层封装了几个基类，参数解析、加密、解密、用户验证等都在底层类中实现。后面的视图类只需要继承基类，专注于数据的处理，不需要关心其他的细节问题。登录处理类继承了BasePost类，通过设置类变量token_verify关闭了用户token验证。具体代码见材料。

完成后页面效果如图：

与一开始的界面设计图对比：

还是不错滴~ 

 4.3 操作界面展示

根据上述操作，把各个模块设计完成后，成品图展示如下：

像模像样的。

PS：这里支付界面也只是完成一个样例出来哈，不能真的进行支付操作等。如果要实现这部分内容还需要更深的技术。

后台管理界面：

 订单管理：

 5 系统测试

选取修改用户名功能为单元测试对象，修改用户名主要检测用户输入的新用户名是否规范，有些测试路径不会出现，故不使用路径覆盖，使用条件覆盖测试该功能。

修改用户名单元测试的流程图如下所示：

输入	过程	结果
空	a-b-c-c2-a	修改失败
测试	a-b-c-c1-d-d2-a	修改失败
测试用户名测试用户名测试用户名测	a-b-c-c1-d-d1-e-e2-a	修改失败
测试用户名	a-b-c-c1-d-d1-e-e1-f	修改成功

总结

相比于其他创业方式，开网店只需要少量的启动资金，却拥有着较高的投资回报率，适合初期创业者加入。本系统设计且实现了一个完整的电商购物平台，为买家提供了App、小程序、H5端三种接入方式，便于不同习惯的用户使用。

本系统前端依赖Vue开发，Web端（包括后台管理）使用vue-cli打包，App通过HBuildX打包工具云打包，小程序端通过wpvue移植。后端基于flask开发，并部署在阿里云上。系统保留了用户的网购习惯，界面参考各购物网站和APP设计，流程与传统网上购物相同。

 

更详细的内容欢迎共同交流学习。包含该电商平台的具体文字说明和程序。