一次电商系统的实践2019/03

从二月七日到三月二十一日，花费四十多天时间，基本完成了一个电商系统的设计。从原型设计、前端页面搭建，到数据库设计、编写后端中间件，再到前后端联调，部署打包，一路走来进步了许多。

整个系统包括用户管理、商城、购物结算、地图定位、三维展示、智能客服、分类检索、订单管理、库存管理、物流查询等模块。下面我分别介绍一下

下载地址：点击下载

技术栈：
框架：nuxt，前端：vue+less+element，后端：koa，数据库：mongodb+redis，云端：阿里云OSS，三维模块：echarts-gl

商城具备基本功能

-用户管理模块

• 注册时自动验证重名 详细 填写用户名时会自动验证是否存在重名

• 验证密码 注册时会自动校验两次密码的一致性

• 邮件发送 详细

  系统会向指定邮箱发送一封包含验证码的邮件
• 验证码判别 打开邮箱，复制验证码完成注册，注意验证码有效期只有10分钟
  • 完善信息 注册成功后来到完善信息页面
  • 上传头像 拖拽图片到上传框，即可设置个性头像
• 权限分组 在用户名前添加 gly 或 管理员 前缀，将注册为管理员，额外拥有卖家发货权限
• 登录功能 登录界面，如勾选 [记住我] 选项，以后每次登录，系统将自动为您填写账号密码
• 社交账号绑定 登陆之后能查看个人信息，可随时点击 [更改资料] 按钮，解绑或绑定社交账号
• 签到打卡 每天签到能获得经验和积分，但当日内的多次签到将被系统拒绝
• 等级积分 签到前，用户的等级、金币、经验 签到之后用户等级、金币、经验都做出了更新

-商城功能

• 分类推荐 商城会根据浏览分类推荐商品，点击可看商品详情
• 影视资讯 影视去会抓取豆瓣电影最新的数据，点击可看电影详情
• 商品详情 商品详情

• 放大镜 详细

  鼠标移动到图片上会显示放大
• 多图预览 点击大图下方的图片可进行大图浏览

• 折扣系统
  参加折扣促销的商品，进入页面后会自动开始倒计时

• 智能仓库 点选商品规格后，系统会自动匹配出最近有货的仓库，和库存数量

• 收藏夹
  对于喜欢的商品可以点击收藏按钮，之后在个人收藏夹中进行管理

-定位功能

• 自动定位
  加载页面之后，用户城市位置会在顶部自动加载出现

• 城市检索 用户也可自行更改显示城市
• 省市联动 选取省份后，市区选项被激活，可以点选该省下辖的地级市
• 搜索功能 搜索框内输入中文或字母缩写可以检索出对应城市

-球面展示

• 三维地球 点击 [查找门店] 按钮系统会把显示在球体上，球体可旋转缩放
• 定位功能 点击坐标，会显示店铺相关信息，可点击链接直达店铺页面

-查看店铺

• 店铺信息 首页会自动显示店铺位置、仓库位置以及热卖商品 在数据库中，以店铺为中心，将商品与库存做了映射

-购物功能

• 最近添加 鼠标悬浮于购物袋按钮，会显示最近添加入购物车的两件商品
• 购物车界面 同一商品的不同型号会被当做不同商品，若实时库存低于15会显示紧张
• 结账系统 选取需要结算的商品，点击结算按钮

-订单功能

• 订单管理 结算后默认为未付款状态，需要手动点击付款

• 提醒发货 付款后，买家可选择提醒卖家发货
• 卖家登录 使用管理员权限登录卖家系统，可以发货，管理员注册时须要有gly或管理员前缀
• 卖家发货 发货成功后，买家的订单将会得到更新

• 实时物流 买家可在物流信息中得到距离，预计时长等信息

-智慧客服

• 智能陪聊 点击 [智慧客服] 按钮，客服小茉会与您进行智能陪聊
• 斗图 聊不下去了？那就来一发斗图吧
• 快捷输入 点击发送按钮时，若输入框无信息，会出现默认快捷短语
• 转接人工 转接人工

• 聊天记录
  点击右上角的 x 号，将保存聊天记录，没聊尽兴的话，可以来日再聊

• 清空记录
  点击清空按钮，将清空聊天记录，慎点

-榜单热卖

• 搜索功能 输入内容为空时会显示热门搜索和历史搜索
• 自动完成 输入内容不为空时会显示自动完成词汇

• 历史搜索
  历史搜索将在输入时以下拉框形式呈现

• 热词搜索
  热词搜索将在输入时以下拉框形式呈现

• 排序
  点击开关可以进行排序