springcloud商项目：Vue + SpringCloud + Maven + Mybatis + redis

仿天猫 分布式电商项目

使用技术：Vue + SpringCloud + Maven + Mybatis + redis

项目描述:

项目采用前后端分离技术，前端通过vue、BootStrap进行用户交互和数据展示，后台通过SpringCloud 对项目按功能模块进行划分，并通过Feign实现服务交互与负载均衡。前后端使用http协议进行数据交互，共同完成 用户身份验证、商品信息可视化、金融交易，等业务流程处理。
作品用时一个半月，用于近期的校招和几个月后的毕业设计

>>效果展示<<

源码： https://github.com/cxp-Git/TianGou

项目结构:

端口	应用	说明	数据表
3306	mysql	用户： root , 密码： 123456
6379	redis	key=> token , value=> userId
	shop_api	公共实体类 Maven项目
80	shop_vue	vue前端
7000	shop_eureka	eureka注册中心
7010	shop_zuul	zuul网关
7020	shop_user	用户_微服务	user （账号）
7030	shop_store	店铺_微服务	store （店铺）
7040	shop_commodity	商品_微服务	commodity（商品），sort （种类）
7050	shop_order	订单_微服务	order_parent（订单父表），order_son（订单子表）
7060	shop_car	购物车_微服务	shop_car（购物车）
7070	shop_favorite	收藏夹_微服务	favorite（收藏夹）

数据表

• user ====>用户(用户Id，用户名，密码，头像图片名字，余额)
• store ===> 店铺(店铺Id，店铺名，省，市，评分如实描述，评分服务态度，评分发货速度)
• sort ====>种类(种类Id，种类名字)
• commodity>商品(商品Id，店铺Id，种类Id，商品名，包邮，商品描述，商品图片名字，商品视频名字，单价，销量，人气，库存)
• order_parent > 订单父表（订单Id，用户Id，下单时间，支付状态）
• order_son ==> 订单子表(订单Id，商品Id，店铺Id，选购数量，商品单价，该子订单总金额)
• shop_car => 购物车(购物车Id，用户Id，商品Id，选购数量)
• favorite ==>收藏夹(用户Id，商品Id，加入时间)

项目要点：

• 通过SpringCloud 对项目按功能模块进行划分，并通过Feign实现服务交互与负载均衡
• 建立shop_api Maven项目编写公共实体类，通过其他项目聚合以保证一致性
• 用户身份验证：
  1、vue axios设置拦截器请求头添加token 信息
  2、zuul 网关设置过滤器对指定uri进行token验证，并添加userId参数
  3、redis 保存 Key=> token ， Value=> userId 键值对
• 购物：
  
• 后台统一返回一定格式数据

public class ResultBean {
    private boolean success;    //操作是否成功
    private int status;         //操作失败对应的类型
    private Object data;        //操作成功后台返回的响应数据
}

前端先判断success， 如果为true则获取data，如果为false则根据status对不同类型错误进行响应

效果展示

关于我们

主页：

搜索页：

右侧可以简略的查看购物车和收藏夹

搜索页进行了分页处理，下拉 搜索框会划出来

商品页

商品图片可以放大

购物车

收藏夹

卖家中心

更换头像

查看订单

订单详细内容

卖家中心

卖家出售的商品

添加、修改商品

登录页面

注册页面

错误信息处理