《Dubbo 实现原理与源码解析 —— 精品合集》 《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》 《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》 《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》 《Java 面试题 + Java 学习指南》

1. 概述

本文,我们搭建 https://github.com/YunaiV/onemall 的调试环境。整个过程,会包括三个步骤:搭建「2. 基础设施」、启动 「3. 后端项目」、启动 「4. 前端项目」

2. 基础设施

onemall 使用到的基础设施比较多,是目前互联网公司的主流技术选型。

胖友需要耐心逐个搭建过去。不要担心有难度,每个基础设施的搭建非常长简单的,同时胖友在这个过程中也会逐步提升自己的广度。

2.1 MySQL

onemall 的数据主要存储在 MySQL 数据库中,所以需要进行安装,建议采用 5.7 版本

2.2 MongoDB

TODO 暂时忽略,V1.2.0 版本引入

2.3 Redis

TODO 暂时忽略,V1.2.0 版本引入

2.4 Elasticsearch

onemall 的搜索服务基于 Elasticsearch 实现,参考《芋道 Elasticsearch 极简入门》文章,进行安装。

注意,因为 Elasticsearch 各个版本的客户端兼容性不是很好,需要安装 6.X 版本

课后作业:胖友后续想学习 Nacos 的话,可以阅读如下文章:

2.5 Nacos

onemall 的注册中心配置中心采用 Nacos,参考《芋道 Nacos 极简入门》文章,进行安装,只需要看该文的「2. 单机部署(最简模式)」即可。

安装完成之后,需要创建 dev 命名空间,如下图所示:

创建 `dev` 命名空间

课后作业:胖友后续想学习 Nacos 的话,可以阅读如下文章:

2.6 Sentinel

TODO 暂时忽略,后续版本引入

2.7 RocketMQ

onemall 的消息队列采用 RocketMQ,参考《芋道 RocketMQ 极简入门》文章,进行安装,只需要看该文的「2. 单机部署」即可。

课后作业:胖友后续想学习 RocketMQ 的话,可以阅读如下文章:

2.8 XXL-Job

TODO 暂时忽略,后续版本引入

2.9 Seata

TODO 暂时忽略,后续版本引入

3. 后端项目

使用 IDEA 从 https://github.com/YunaiV/onemall 克隆最新的代码。克隆可能需要一点时间,胖友可以给 onemall 来一波一键三连,提升速度,嘿嘿。

一键三连

克隆完成后,耐心等待 Maven 下载完相关的依赖包。

友情提示:目前最新的代码在 master_new 分支下,请胖友注意切换下。

下面,我们逐个启动后端项目。

3.1 设置本地 hosts

在项目中,我们通过域名的方式,设置基础设施的 IP 地址。如下图所示:

基础设施

因此胖友使用的是本地自己搭建的基础设置,所以需要在本机的 hosts 文件,设置 400-infra.server.iocoder.cn 域名对应的 IP 为 127.0.0.1

3.2 启动 system-service-app 项目

system-service-app 项目是基于 Dubbo 实现的系统服务,提供管理员、权限、数据字典、错误码等等模块的 RPC 接口。如下图所示:

项目结构

① 在 MySQL 中,创建 mall_system 数据库,并执行 mall_system_schema.sql 脚本来创建表结构,执行 mall_system_data.sql 脚本来初始化数据。最终如下图所示:

mall_system 数据库

② 执行 SystemServiceApplication 类,启动 system-service-app 项目。看到如下 Spring Boot 日志,说明启动成功:

2020-08-01 18:06:49.525  INFO 22291 --- [           main] c.i.m.s.SystemServiceApplication         : Started SystemServiceApplication in 7.952 seconds (JVM running for 8.586)

3.3 启动 user-service-app 项目

user-service-app 项目是基于 Dubbo 实现的用户服务,提供用户、短信验证码、收获地址等等模块的 RPC 接口。如下图所示:

项目结构

① 在 MySQL 中,创建 mall_user 数据库,并执行 mall_user_schema.sql 脚本来创建表结构,执行 mall_user_data.sql 脚本来初始化数据。最终如下图所示:

`mall_user` 数据库

② 执行 UserServiceApplication 类,启动 user-service-app 项目。看到如下 Spring Boot 日志,说明启动成功:

2020-08-01 18:46:57.630  INFO 27264 --- [           main] c.i.m.u.UserServiceApplication           : Started UserServiceApplication in 4.506 seconds (JVM running for 5.51)

3.4 启动 product-service-app 项目

product-service-app 项目是基于 Dubbo 实现的商品服务,提供商品 SPU、SKU、规格、分类、品牌等等模块的 RPC 接口。如下图所示:

项目结构

① 在 MySQL 中,创建 mall_product 数据库,并执行 mall_product_schema.sql 脚本来创建表结构,执行 mall_product_data.sql 脚本来初始化数据。最终如下图所示:

`mall_product` 数据库

② 执行 ProductServiceApplication 类,启动 product-service-app 项目。看到如下 Spring Boot 日志,说明启动成功:

2020-08-01 18:56:03.980  INFO 28619 --- [           main] c.i.m.p.ProductServiceApplication        : Started ProductServiceApplication in 7.589 seconds (JVM running for 8.674)

3.5 启动 promotion-service-app 项目

TODO 项目迁移中

3.6 启动 pay-service-app 项目

TODO 项目迁移中

3.7 启动 order-service-app 项目

TODO 项目迁移中

3.8 启动 management-web-app 项目

management-web-app 项目,提供管理后台的 RESTful API 接口给前端,通过调用下层的 Dubbo 服务实现。如下图所示:

项目结构

① 执行 ManagementWebApplication 类,启动 management-web-app 项目。看到如下 Spring Boot 日志,说明启动成功:

2020-08-01 19:16:23.224  INFO 31622 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 18083 (http) with context path '/management-api'

② 使用浏览器,访问 http://127.0.0.1:18083/management-api/doc.html 地址,查看 Swagger 生成的接口文档。如下图所示:

Swagger 接口文档

课后作业:胖友后续想学习 Swagger 接口文档的话,可以阅读如下文章:

③ onemall 使用 IDEA 自带的 IDEA REST Client 插件,进行 RESTful API 的测试,如下图所示:

接口测试

3.9 启动 user-web-app 项目

user-web-app 项目,提供用户端会员中心的 RESTful API 接口给前端,通过调用下层的 Dubbo 服务实现。如下图所示:

项目结构

① 执行 UserWebApplication 类,启动 user-web-app 项目。看到如下 Spring Boot 日志,说明启动成功:

2020-08-01 20:06:38.074  INFO 39168 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 18082 (http) with context path '/user-api'

② 使用浏览器,访问 http://127.0.0.1:18082/user-api/doc.html 地址,查看 Swagger 生成的接口文档。如下图所示:

Swagger 接口文档

3.10 shop-web-app

TODO 项目迁移中

4. 前端项目

使用 IDEA 从 https://github.com/YunaiV/onemall-web 克隆最新的代码。克隆可能需要一点时间,胖友可以给 onemall 来一波一键三连,提升速度,嘿嘿。

一键三连

友情提示:目前前端项目的完善度有点低,有兴趣的胖友可以联系艿艿一起参与。

4.1 启动 admin-dashboard-vue 项目

admin-dashboard-vue 项目是基于 vue-element-admin 实现的管理后台,提供 onemall 芋道商城的管理功能。如下图所示:

项目结构

① 使用控制台打开 admin-dashboard-vue 目录,执行 npm i 命令,下载相关依赖。

② 继续执行 npm run dev 命令,启动管理后台。启动完成后,管理后台自动打开 http://localhost:9527/#/login 地址,进入登录界面。如下图所示:

登录界面

使用默认的账号密码「admin/buzhidao」进行登陆,进入首页。如下图所示:

首页

4.2 启动 user-h5-vue

TODO 正在迁移中

文章目录
  1. 1. 1. 概述
  2. 2. 2. 基础设施
    1. 2.1. 2.1 MySQL
    2. 2.2. 2.2 MongoDB
    3. 2.3. 2.3 Redis
    4. 2.4. 2.4 Elasticsearch
    5. 2.5. 2.5 Nacos
    6. 2.6. 2.6 Sentinel
    7. 2.7. 2.7 RocketMQ
    8. 2.8. 2.8 XXL-Job
    9. 2.9. 2.9 Seata
  3. 3. 3. 后端项目
    1. 3.1. 3.1 设置本地 hosts
    2. 3.2. 3.2 启动 system-service-app 项目
    3. 3.3. 3.3 启动 user-service-app 项目
    4. 3.4. 3.4 启动 product-service-app 项目
    5. 3.5. 3.5 启动 promotion-service-app 项目
    6. 3.6. 3.6 启动 pay-service-app 项目
    7. 3.7. 3.7 启动 order-service-app 项目
    8. 3.8. 3.8 启动 management-web-app 项目
    9. 3.9. 3.9 启动 user-web-app 项目
    10. 3.10. 3.10 shop-web-app
  4. 4. 4. 前端项目
    1. 4.1. 4.1 启动 admin-dashboard-vue 项目
    2. 4.2. 4.2 启动 user-h5-vue