Java · 项目 · mall

发表于 | 更新于 | 分类于 | 阅读次数：

后端

项目简介

mall 项目是一套电商系统，包括前台商城系统及后台管理系统，基于 SpringBoot + MyBatis 实现。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。

后端 | 前端 | 学习教程

项目演示

技术选型

后端

技术 说明
Spring Boot 容器 + MVC 框架
Spring Security 认证和授权框架
MyBatis ORM 框架
MyBatis Generator 数据层代码生成
PageHelper MyBatis 物理分页插件
Swagger UI 文档生产工具
Elasticsearch 搜索引擎
RabbitMQ 消息队列
Redis 分布式缓存
MongoDB NoSQL 数据库
Docker 应用容器引擎
Druid 数据库连接池
OSS 对象存储
JWT JWT 登录支持
Lombok 简化对象封装工具
Hibernator-Validator 验证框架
LogStash 日志收集工具
Kibana 为 Elasticsearch 设计的开源分析和可视化平台

前端

技术 说明
Vue 前端框架
Vue-router 路由框架
Vuex 全局状态管理框架
Element 前端 UI 框架
Axios 前端 HTTP 框架
v-charts 基于 Echarts 的图表框架
Js-cookie cookie 管理工具
nprogress 进度条控件
vue-element-admin 项目脚手架参考

功能概览

  • 商品模块
    • 商品管理
    • 商品分类管理
    • 商品类型管理
    • 品牌管理
  • 订单模块
    • 订单管理
    • 订单设置
    • 退货申请处理
    • 退货原因设置
  • 营销模块
    • 秒杀活动管理
    • 优惠价管理
    • 品牌推荐管理
    • 新品推荐管理
    • 人气推荐管理
    • 专题推荐管理
    • 首页广告管理

数据库表

  • cms_*：内容管理模块相关表
  • oms_*：订单管理模块相关表
  • pms_*：商品模块相关表
  • sms_*：营销模块相关表
  • ums_*：会员模块相关表

工具篇

工具 说明
IDEA 开发 IDE
Redis Desktop Redis 客户端连接工具
Robomongo MongoDB 客户端连接工具
XShell Linux 远程连接工具
Navicat 数据库连接工具
Power Designer 数据库设计工具
Axure 原型设计工具
XMind 思维导图设计工具
ScreenToGif gif 录制工具
ProcessOn 流程图绘制工具
PicPick 图片处理工具
Snipaste 屏幕截图工具

架构篇

系统微服务架构图

mall_micro_service_arch.jpg

业务篇

mall_business_arch.png

代码篇

1
2
3
4
5
6
7
8
mall
├── mall-common   -- 工具类及通用代码
├── mall-mbg      -- MyBatis Generator 生成的数据库操作代码
├── mall-security -- Spring Security 封装公用模块
├── mall-admin    -- 后台商城管理系统接口
├── mall-search   -- 基于 Elasticsearch 的商品搜索系统
├── mall-portal   -- 前台商城系统接口
└── mall-demo     -- 框架搭建时的测试代码

前端

技术选型

技术 说明 官网
Vue 前端框架 https://vuejs.org/
Vue-router 路由框架 https://router.vuejs.org/
Vuex 全局状态管理框架 https://vuex.vuejs.org/
Element 前端 UI 框架 https://element.eleme.io/
Axios 前端 HTTP 框架 https://github.com/axios/axios
v-charts 基于 Echarts 的图表框架 https://v-charts.js.org/
Js-cookie cookie 管理工具 https://github.com/js-cookie/js-cookie
nprogress 进度条控件 https://github.com/rstacruz/nprogress
vue-element-admin 项目脚手架参考 https://github.com/PanJiaChen/vue-element-admin

工程目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
src -- 源码目录
├── api -- axios网络请求定义
├── assets -- 静态图片资源文件
├── components -- 通用组件封装
├── icons -- svg矢量图片文件
├── router -- vue-router路由配置
├── store -- vuex的状态管理
├── styles -- 全局css样式
├── utils -- 工具类
└── views -- 前端页面
    ├── home -- 首页
    ├── layout -- 通用页面加载框架
    ├── login -- 登录页
    ├── oms -- 订单模块页面
    ├── pms -- 商品模块页面
    └── sms -- 营销模块页面

打包部署

前端项目部署：

1、下载前端代码 mall-admin-web

2、VS Code 打开代码

3、打开控制台，通过 npm install 命令安装相关依赖

4、修改 dev.env.js 文件中 BASE_API，使用线上 API 进行访问，线上地址为：http://120.27.63.9:8080

1
2
3
4
5
6
7
8
9
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  // 后台API地址：BASE_API: '"http://10.133.0.53:8080"'
  BASE_API: '"http://120.27.63.9:8080"'
})

5、通过 npm run dev 命令，启动 mall-admin-web

6、访问地址 http://localhost:8090 查看效果

后端项目部署

1
2
3
4
# 构建镜像
docker build -t mall/mall-admin:1.0-SNAPSHOT .
docker build -t mall/mall-portal:1.0-SNAPSHOT .
docker build -t mall/mall-search:1.0-SNAPSHOT .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 删除镜像
docker rmi registry.cn-qingdao.aliyuncs.com/raoo/images:v1.0.0

# 拉取镜像
docker pull registry.cn-qingdao.aliyuncs.com/raoo/images:v1.0.0

# 启动镜像
docker run -p 8080:8080 --name mall-admin \
--link mysql:db \
-v /etc/localtime:/etc/localtime \
-v /mydata/app/admin/logs:/var/logs \
-d mall/mall-admin:1.0-SNAPSHOT

# 移除容器
docker rm xx

常用命令

1
2
3
4
5
6
docker search java：在 Docker Hub（或阿里镜像）仓库中搜索关键字（如java）的镜像
docker pull java:8：从仓库中下载镜像，若要指定版本，则要在冒号后指定
docker images：列出已经下载的镜像
docker rmi java：删除本地镜像
docker build：构建镜像
docker tag 0ead9e3f95d6 mall/mall-admin:1.0-SNAPSHOT：修改镜像

Dockerfile

1
2
3
FROM java:8
ADD /mall-search-1.0-SNAPSHOT.jar //
ENTRYPOINT ["java", "-jar", "-Dspring.profiles.active=prod","/mall-search-1.0-SNAPSHOT.jar"]