电商项目的介绍及其框架搭建

电商项目的介绍及其框架搭建

一、项目介绍

• 该电商购物网站是 B2C 模式。
• 用户可以在线购买商品、加入购物车、下单
• 可以评论已购买商品
• 管理员可以在后台管理商品的上下架、促销活动
• 管理员可以监控商品销售状况
• 客服可以在后台处理退款操作
• 希望未来3到5年可以支持千万用户的使用

二、项目架构缩略图

前端结构
使用 vue 架构
node.js ：相当于 jdk
webPack：用于热部署；类似于后台的 Tomcat
npm：相当于后台的 Maven
vuetify：提供了vue写的组件
nuxt：

静态资源CDN服务：可以通过 Nginx 直接进行调用。

系统门户 Portal ：通过 JWT 鉴权进行权限校验

通过 Nginx 调用后台接口，并进行负载均衡

后端结构
后台微服务和zuul都需要在 Eureka 中进行注册
Eureka 为了保证高可用可以进行集群部署
Zuul 在进行调用后台服务的时候，需要进行负载均衡、容错处理
服务间也可以进行通过 Feign 进行调用

数据存储
mysql：
redis：
elasticsearch：索引库，通过 RabbitMQ 和 MySQL进行数据同步

三、系统架构说明

商城可以分为两部分：后台管理系统、前台门户系统。

• 后台管理：
  • 后台系统主要包含以下功能：
    • 商品管理，包括商品分类、品牌、商品规格等信息的管理
    • 销售管理，包括订单统计、订单退款处理、促销活动生成等
    • 用户管理，包括用户控制、冻结、解锁等
    • 权限管理，整个网站的权限控制，采用JWT鉴权方案，对用户及 API 进行权限控制
    • 统计，各种数据的统计分析展示
  • 后台系统会采用前后端分离开发，而且整个后台管理系统会使用Vue.js框架搭建出单页应用（SPA）。

---

• 前台门户
  • 前台门户面向的是客户，包含与客户交互的一切功能。例如：
    • 搜索商品
    • 加入购物车
    • 下单
    • 评价商品等等

---

• 无论是前台还是后台系统，都共享相同的微服务集群，包括：
  • 商品微服务：商品及商品分类、品牌、库存等的服务
  • 搜索微服务：实现搜索功能
  • 订单微服务：实现订单相关
  • 购物车微服务：实现购物车相关功能
  • 用户中心：用户的登录注册等功能
  • Eureka注册中心
  • Zuul网关服务
  • …

---

四、项目搭建

4.1 技术选型

前端技术：

• 基础的HTML、CSS、JavaScript（基于ES6标准）
• JQuery
• Vue.js 2.0以及基于Vue的框架：Vuetify（UI框架）
• 前端构建工具：WebPack
• 前端安装包工具：NPM
• Vue脚手架：Vue-cli
• Vue路由：vue-router
• ajax框架：axios
• 基于Vue的富文本框架：quill-editor

后端技术：

• 基础的SpringMVC、Spring 5.x和MyBatis3
• Spring Boot 2.0.7版本
• Spring Cloud 最新版 Finchley.SR2
• Redis-4.0
• RabbitMQ-3.4
• Elasticsearch-6.3
• nginx-1.14.2
• FastDFS - 5.0.8 分布式文件系统
• MyCat 数据库中间件
• Thymeleaf
• mysql 5.6

4.2 开发环境

为了保证开发环境的统一，希望每个人都按照我的环境来配置：

• IDE：我们使用Idea 2017.3 版本
• JDK：统一使用JDK1.8
• 项目构建：maven3.3.9以上版本即可（3.5.2）
• 版本控制工具：git

idea大家可以在我的课前资料中找到。另外，使用帮助大家可以参考课前资料的《idea使用指南.md》

4.3 域名

我们在开发的过程中，为了保证以后的生产、测试环境统一。尽量都采用域名来访问项目。

一级域名：www.leyou.com，leyou.com leyou.cn

二级域名：manage.leyou.com/item , api.leyou.com

我们可以通过switchhost工具来修改自己的host对应的地址，只要把这些域名指向127.0.0.1，那么跟你用localhost的效果是完全一样的。

switchhost可以去课前资料寻找。

五、后台环境的搭建

5.1 创建统一的父工程：excellent

用来管理依赖及其版本，注意是创建project，而不是module

5.2 搭建 EurekaServer

1. 创建工程

我们的注册中心，起名为：excellent-registry

选择新建module：

2. 在 pom.xml 文件中添加依赖

	<dependencies>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-netflix-eureka-server</artifactId>
        </dependency>
    </dependencies>

3. 修改配置文件

server:
  port: 9090
spring:
  application:
    name: excellent-registry
eureka:
  client:
    service-url:
      defaultZone: http://127.0.0.1:${server.port}/eureka
    register-with-eureka: false # 把自己注册到 eureka 服务列表
    fetch-registry: false # 拉取eureka服务信息
  server:
    enable-self-preservation: false # 关闭自我保护
    eviction-interval-timer-in-ms: 5000 # 每隔5秒钟，进行一次服务列表的清理

4. 编写启动类
   

• 报错
• Failed to load property source from location 'classpath:/application.yml'
  原因：application.yml 文件有语法错误；
  解决方案：

解决办法：

• 1、改正文件中存在错误语法的地方。
• 2、File–>Settings–>File Encodings
  这三个地方设置成UTF-8格式。重启启动项目。
• 3、如第一步并未解决问题，则可以用第二步（终极杀招）。
  删除application.yml文件中所有中文注释。

5. 访问
   

5.3 搭建 Zuul 网关

1. 创建工程
   我们的Zuul网关，起名为：excellent-gateway
   选择新建module：
   
2. 在 pom.xml 中添加依赖

    <dependencies>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-netflix-zuul</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
        </dependency>
        <!-- springboot提供微服务检测接口，默认对外提供几个接口 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
    </dependencies>

3. 修改 application.yml 配置文件

server:
  port: 10010
spring:
  application:
    name: leyou-gateway
eureka:
  client:
    registry-fetch-interval-seconds: 5
    service-url:
      defaultZone: http://127.0.0.1:10086/eureka
zuul:
  prefix: /api # 路由路径前缀

4. 编写启动类

@SpringBootApplication
@EnableDiscoveryClient
@EnableZuulProxy
public class ExcellentGatewayApplication {
    public static void main(String[] args) {
        SpringApplication.run(ExcellentGatewayApplication.class, args);
        System.out.println("Gateway Startup success！！！");
    }
}

5. 访问
   

5.4 创建商品微服务

既然是一个全品类的电商购物平台，那么核心自然就是商品。因此我们要搭建的第一个服务，就是商品微服务。其中会包含对于商品相关的一系列内容的管理，包括：

• 商品分类管理
• 品牌管理
• 商品规格参数管理
• 商品管理
• 库存管理

5.4.1 微服务的结构

因为与商品的品类相关，工程命名为excellent-item.

需要注意的是，我们的excellent-item是一个微服务，那么将来肯定会有其它系统需要来调用服务中提供的接口，获取的接口数据，也需要对应的实体类来封装，因此肯定也会使用到接口中关联的实体类。

因此这里我们需要使用聚合工程，将要提供的接口及相关实体类放到独立子工程中，以后别人引用的时候，只需要知道坐标即可。

我们会在leyou-item中创建两个子工程：

• excellent-item-interface：主要是对外暴露的接口及相关实体类
• excellent-item-service：所有业务逻辑及内部使用接口

调用关系如图所示：

5.4.2 搭建商品微服务【聚合模块】

5.4.2.1 创建工程

起名为：excellent-item
选择新建module：（具体方式如上所示）

5.4.2.2 在pom.xml 文件中添加依赖

它是一个聚合模块，所以需要使用 pom.xml 中进行声明

    <!-- 打包方式为pom -->
    <packaging>pom</packaging>

5.4.2.3 在该模块中新建一个 Module

1. 在excellent-item工程上点击右键，选择new --> module:
   

5.4.2.4 在该模块中再新建一个 Module

1. 在excellent-item工程上点击右键，选择new --> module:
   

5.5 整个微服务的架构

此时可以删除 excellent-item 工程的 src 目录

5.5.1 添加依赖

接下来我们给excellent-item-service中添加依赖：
思考一下我们需要什么？

• Eureka客户端
• web启动器
• mybatis启动器
• 通用mapper启动器
• 分页助手启动器
• 连接池，我们用默认的Hykira
• mysql驱动
• 千万不能忘了，我们自己也需要excellent-item-interface中的实体类

	<dependencies>
        <!-- web启动器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- eureka客户端 -->
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
        </dependency>
        <!-- mybatis的启动器 -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
        </dependency>
        <!-- 通用mapper启动器 -->
        <dependency>
            <groupId>tk.mybatis</groupId>
            <artifactId>mapper-spring-boot-starter</artifactId>
        </dependency>
        <!-- 分页助手启动器 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
        </dependency>
        <!-- jdbc启动器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!-- mysql驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <dependency>
            <groupId>com.excellent.item</groupId>
            <artifactId>excellent-item-interface</artifactId>
            <version>1.0.0-SNAPSHOT</version>
        </dependency>
   
        <!-- springboot检测服务启动器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
        <!-- 单元测试类 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
        </dependency>
    </dependencies>

5.5.2. 在 application.yml

server:
  port: 8080
spring:
  application:
    name: item-service
  datasource:
    url: jdbc:mysql://localhost:3306/market
    username: root
    password: root
    hikari:
      max-lifetime: 28830000 # 一个连接的生命时长（毫秒），超时而且没被使用则被释放（retired），缺省:30分钟，建议设置比数据库超时时长少30秒，参考MySQL wait_timeout参数（show variables like '%timeout%';）
      maximum-pool-size: 9 # 连接池中允许的最大连接数。缺省值：10；推荐的公式：((core_count * 2) + effective_spindle_count)
eureka:
  client:
    service-url:
      defaultZone: http://127.0.0.1:9090/eureka
  instance:
    lease-renewal-interval-in-seconds: 5 # 5秒钟发送一次心跳
    lease-expiration-duration-in-seconds: 10 # 10秒不发送就过期
#添加 mybatis 的别名扫描
mybatis:
  type-aliases-package: com.excellent.item.pojo

5.5.3 新建包扫描路径下的目录

5.5.4 编写引导类

@SpringBootApplication
@EnableDiscoveryClient
public class ExcellentItemServiceApplication {
    public static void main(String[] args) {
        SpringApplication.run(ExcellentItemServiceApplication.class);
        System.out.println("Excellent-Item-ServiceApplication Startup success！！！");
    }
}

5.6 搭建一个通用的工具类模块 Module

1. 搭建通用工具模块
   

5.7 后台环境搭建完成：