仿天猫 分布式电商项目
使用技术: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对不同类型错误进行响应
效果展示
关于我们
主页:
搜索页:
右侧可以简略的查看购物车和收藏夹
搜索页进行了分页处理,下拉 搜索框会划出来
商品页
商品图片可以放大