乐优商城项目---day04-项目搭建及es6语法

SpringCloud总结:

一、什么springCloud:

在springboot的基础上构建的微服务框架,

1.引入组件的启动器,2.覆盖默认配置,3.在引导类上添加相应的注解

二、eureka:

注册中心,服务的注册与发现

服务端:

1.引入服务端启动器:eureka-server,

2.添加了配置:spring.applicaiton.name,服务名

eureka.client.service-url.defaultZone,http://localhost:10086/eureka

eureka.server.eviction-interval-timer-in-ms 剔除无效连接的间隔时间,

eureka.server.enable-self-preservation,关闭自我保护

3.@EnableEurekaServer 开启eureka服务端功能

客户端:

1.引入启动器:eureka-client

2.添加配置: spring.application.name ,

eureka.client.service-url.defaultZone

eureka.instance.lease-renewal-interval-in-seconds,心跳时间

eureka.instance.lease-expiration-duration-in-seconds ,过期时间

eureka.client.register-with-eureka 是否注册给eureka容器, 默认true

eureka.client.fetch-registry 是否拉取服务列表,默认true

eureka.client.registry-fetch-interval-seconds 拉取服务的间隔时间

3.@EnableDiscoveryClient 启用eureka客户端

三、ribbon:

1.负载均衡组件

2.eureka、feign以及zuul已集成

3.配置负载均衡策略 <服务名>.ribbon.NFLoadBalancerRuleClassName 负载均衡策略的全路径

4.@LoadBalanced 在RestTemplate的@Bean方法上

四、hystrix:

1.容错组件

2.降级:1.引入hystrix的启动器,2.添加配置,超时时间的配置

3.@EnableCircuitBreaker 启用熔断组件 @SpringCloudApplication

4.代码:局部 返回值和参数列表和被熔断的方法一致 ,在被熔断的方法上@HystrixCommand(fallbackMethod="熔断方法名")

全局返回值和被熔断的方法返回值一致,不能有参数列表  在类上@DefaultProperties(defaultFallbck="全局熔断方法名") 在具体的被熔断方法上@HystrixCommand

3.熔断:close 关闭状态 所有请求都正常访问

 open 打开状态 所有请求都无法访问 触发:连续失败的比例大于50%或者失败次数不少于20

维持5s的休眠时间 

 half open 半开状态 释放部分请求通过 触发:休眠时间之后

五、feign

远程调用组件

1.引入feign的启动器 2.feign.hystrix.enable=true 3.@EnableFeignClients

 定义一个接口 方法上的注解使用的都是springMVC的注解 @FeignClient(value="服务名", fallback=实现类.class)

六、zuul

网关组件1.引入启动器 路由 过滤器

2.添加配置 路由的配置 zuul.prefix 四种路由配置方式 3.@EnableZuulProxy

自定义过滤器 filterType filterOrder shouldFilter run 四种执行顺序

------------------------------------------------------------------------------------------------

1.1.项目分类

主要从需求方、盈利模式、技术侧重点这三个方面来看它们的不同

1.了解电商行业

学习电商项目,自然要先了解这个行业,所以我们首先来聊聊电商行业

1.1.1.传统项目

各种企业里面用的管理系统(ERP、HR、OA、CRM、物流管理系统。。。。。。。)

  • 需求方:公司、企业内部

  • 盈利模式:项目本身卖钱

  • 技术侧重点:业务功能

1.1.2.互联网项目

门户网站、电商网站:baidu.com、qq.com、taobao.com、jd.com ......

  • 需求方:广大用户群体

  • 盈利模式:虚拟币、增值服务、广告收益......

  • 技术侧重点:网站性能、业务功能

而我们今天要聊的就是互联网项目中的重要角色:电商

1.2.电商行业的发展

1.2.1.钱景

近年来,中国的电子商务快速发展,交易额连创新高,电子商务在各领域的应用不断拓展和深化、相关服务业蓬勃发展、支撑体系不断健全完善、创新的动力和能力不断增强。电子商务正在与实体经济深度融合,进入规模性发展阶段,对经济社会生活的影响不断增大,正成为我国经济发展的新引擎。

中国电子商务研究中心数据显示,截止到 2012 年底,中国电子商务市场交易规模达 7.85万亿人民币,同比增长 30.83%。其中,B2B 电子商务交易额达 6.25 万亿,同比增长 27%。而 2011 年全年,中国电子商务市场交易额达 6 万亿人民币,同比增长 33%,占 GDP 比重上升到 13%;2012 年,电子商务占 GDP 的比重已经高达 15%。

1.2.3.技术特点

从上面的数据我们不仅要看到钱,更要看到背后的技术实力。正是得益于电商行业的高强度并发压力,促使了BAT等巨头们的技术进步。电商行业有些什么特点呢?

  • 技术范围广

  • 技术新

  • 高并发(分布式、静态化技术、缓存技术、异步并发、池化、队列)

  • 高可用(集群、负载均衡、限流、降级、熔断)

  • 数据量大

  • 业务复杂

  • 数据安全

1.3.常见电商模式

电商行业的一些常见模式:

  • B2C:商家对个人,如:亚马逊、当当等

  • C2C平台:个人对个人,如:闲鱼、拍拍网、ebay

  • B2B平台:商家对商家,如:阿里巴巴、八方资源网等

  • O2O:线上和线下结合,如:饿了么、电影票、团购等

  • P2P:在线金融,贷款,如:网贷之家、人人聚财等。

  • B2C平台:天猫、京东、一号店等

1.4.一些专业术语

  • SaaS:软件即服务

  • SOA:面向服务

  • RPC:远程过程调用

  • RMI:远程方法调用

  • PV:(page view),即页面浏览量;

    用户每1次对网站中的每个网页访问均被记录1次。用户对同一页面的多次访问,访问量累计

  • UV:(unique visitor),独立访客

    指访问某个站点或点击某条新闻的不同IP地址的人数。在同一天内,uv只记录第一次进入网站的具有独立IP的访问者,在同一天内再次访问该网站则不计数。

  • PV与带宽:

    • 计算带宽大小需要关注两个指标:峰值流量和页面的平均大小。

    • 计算公式是:网站带宽= ( PV * 平均页面大小(单位MB)* 8 )/统计时间(换算到秒)

    • 为什么要乘以8?

      • 网站大小为单位是字节(Byte),而计算带宽的单位是bit,1Byte=8bit

    • 这个计算的是平均带宽,高峰期还需要扩大一定倍数

  • PV、QPS、并发

    • QPS:每秒处理的请求数量。

      • 比如你的程序处理一个请求平均需要0.1S,那么1秒就可以处理10个请求。QPS自然就是10,多线程情况下,这个数字可能就会有所增加。

    • 由PV和QPS如何需要部署的服务器数量?

      • 根据二八原则,80%的请求集中在20%的时间来计算峰值压力:

      • (每日PV * 80%) / (3600s * 24 * 20%) * 每个页面的请求数 = 每个页面每秒的请求数量

      • 然后除以服务器的QPS值,即可计算得出需要部署的服务器数量

1.5.项目开发流程

项目经理:管人

技术经理:

产品经理:设计需求原型

测试:

前端:大前端:UI 前端页面。

后端:

移动端:

项目开发流程图:

2.乐优商城介绍

2.1.项目介绍

  • 乐优商城是一个全品类的电商购物网站(B2C)。

  • 用户可以在线购买商品、加入购物车、下单

  • 可以评论已购买商品

  • 管理员可以在后台管理商品的上下架、促销活动

  • 管理员可以监控商品销售状况

  • 客服可以在后台处理退款操作

  • 希望未来3到5年可以支持千万用户的使用

2.2.系统架构

2.2.1.架构图

乐优商城架构缩略图,大图请参考课前资料:

2.2.2.系统架构解读

整个乐优商城可以分为两部分:后台管理系统、前台门户系统。

  • 后台管理:

    • 后台系统主要包含以下功能:

      • 商品管理,包括商品分类、品牌、商品规格等信息的管理

      • 销售管理,包括订单统计、订单退款处理、促销活动生成等

      • 用户管理,包括用户控制、冻结、解锁等

      • 权限管理,整个网站的权限控制,采用JWT鉴权方案,对用户及API进行权限控制

      • 统计,各种数据的统计分析展示

    • 后台系统会采用前后端分离开发,而且整个后台管理系统会使用Vue.js框架搭建出单页应用(SPA)。

  • 前台门户

    • 前台门户面向的是客户,包含与客户交互的一切功能。例如:

      • 搜索商品

      • 加入购物车

      • 下单

      • 评价商品等等

    • 前台系统我们会使用Thymeleaf模板引擎技术来完成页面开发。出于SEO优化的考虑,我们将不采用单页应用。

无论是前台还是后台系统,都共享相同的微服务集群,包括:

  • 商品微服务:商品及商品分类、品牌、库存等的服务

  • 搜索微服务:实现搜索功能

  • 订单微服务:实现订单相关

  • 购物车微服务:实现购物车相关功能

  • 用户中心:用户的登录注册等功能

  • Eureka注册中心

  • Zuul网关服务

  • ...

3.项目搭建

3.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

项目环境搭建:

3.4.创建父工程

创建统一的父工程:leyou,用来管理依赖及其版本,注意是创建project,而不是module

添加POM依赖,这个依赖笔记里面都有。模仿复制就可以,如果出现依赖冲突,一定要看版本符合不符合当前得Cloud

3.5.创建EurekaServer

3.5.1.创建工程

我们的注册中心,起名为:leyou-registry

选择新建module:

 

3.5.2.添加依赖

添加EurekaServer的依赖:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>leyou</artifactId>
        <groupId>com.leyou.parent</groupId>
        <version>1.0.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.leyou.common</groupId>
    <artifactId>leyou-registry</artifactId>
    <version>1.0.0-SNAPSHOT</version>

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

    </dependencies>
</project>

3.5.3.编写启动类

@SpringBootApplication
@EnableEurekaServer
public class LeyouRegistryApplication {

    public static void main(String[] args) {
        SpringApplication.run(LeyouRegistryApplication.class, args);
    }
}

3.5.4.配置文件

server:
  port: 10086
spring:
  application:
    name: leyou-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秒钟,进行一次服务列表的清理

3.6.创建Zuul网关

3.6.1.创建工程

与上面类似,选择maven方式创建Module,然后填写项目名称,我们命名为:leyou-gateway

3.6.2.添加依赖

这里我们需要添加Zuul和EurekaClient的依赖:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>leyou</artifactId>
        <groupId>com.leyou.parent</groupId>
        <version>1.0.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.leyou.common</groupId>
    <artifactId>leyou-gateway</artifactId>
    <version>1.0.0-SNAPSHOT</version>

    <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>
</project>

3.6.3.编写启动类

@SpringBootApplication
@EnableDiscoveryClient
@EnableZuulProxy
public class LeyouGatewayApplication {
    public static void main(String[] args) {
        SpringApplication.run(LeyouGatewayApplication.class, args);
    }
}

3.6.4.配置文件

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 # 路由路径前缀

3.7.创建商品微服务

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

  • 商品分类管理

  • 品牌管理

  • 商品规格参数管理

  • 商品管理

  • 库存管理

3.7.1.微服务的结构

因为与商品的品类相关,我们的工程命名为leyou-item.

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

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

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

  • leyou-item-interface:主要是对外暴露的接口及相关实体类

  • leyou-item-service:所有业务逻辑及内部使用接口

调用关系如图所示:

3.7.2.leyou-item

依然是使用maven构建:

 

添加依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>leyou</artifactId>
        <groupId>com.leyou.parent</groupId>
        <version>1.0.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.leyou.item</groupId>
    <artifactId>leyou-item</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <!-- 打包方式为pom -->
    <packaging>pom</packaging>

</project>

 

3.7.3.leyou-item-interface

在leyou-item工程上点击右键,选择new --> module:

3.7.4.leyou-item-service

leyou-item-interface类似,我们选择在leyou-item上右键,新建module,然后填写项目信息:

3.7.6.添加依赖

接下来我们给leyou-item-service中添加依赖:

思考一下我们需要什么?

  • Eureka客户端

  • web启动器

  • mybatis启动器

  • 通用mapper启动器

  • 分页助手启动器

  • 连接池,我们用默认的Hykira

  • mysql驱动

  • 千万不能忘了,我们自己也需要ly-item-interface中的实体类

这些依赖,我们在顶级父工程:leyou中已经添加好了。所以直接引入即可:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>leyou-item</artifactId>
        <groupId>com.leyou.item</groupId>
        <version>1.0.0-SNAPSHOT</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.leyou.item</groupId>
    <artifactId>leyou-item-service</artifactId>
    <version>1.0.0-SNAPSHOT</version>

    <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.leyou.item</groupId>
            <artifactId>leyou-item-interface</artifactId>
            <version>1.0.0-SNAPSHOT</version>
        </dependency>
        <!-- springboot检测服务启动器 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
    </dependencies>

</project>

leyou-item-interface中需要什么我们暂时不清楚,所以先不管。以后需要什么依赖,再引入。

3.7.7.编写启动和配置

在整个leyou-item工程中,只有leyou-item-service是需要启动的。因此在其中编写启动类即可:

@SpringBootApplication
@EnableDiscoveryClient
public class LeyouItemServiceApplication {

    public static void main(String[] args) {
        SpringApplication.run(LeyouItemServiceApplication.class, args);
    }
}
server:
  port: 8081
spring:
  application:
    name: item-service
  datasource:
    url: jdbc:mysql://localhost:3306/leyou
    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:10086/eureka
  instance:
    lease-renewal-interval-in-seconds: 5 # 5秒钟发送一次心跳
    lease-expiration-duration-in-seconds: 10 # 10秒不发送就过期

3.9.启动测试

我们分别启动:leyou-registry,leyou-gateway,leyou-item-service

3.11.通用工具模块

有些工具或通用的约定内容,我们希望各个服务共享,因此需要创建一个工具模块:leyou-common

右键leyou工程,使用maven来构建module:

至此项目初始化完成!

4.ES6语法指南

后端项目搭建完毕,接下来就是前端页面了。不过在这之前需要一些准备工作。我们需要学习ES6的语法标准。

什么是ES6?就是ECMAScript第6版标准。

 1.let:声明一个变量,不会越界 const:声明一个常量
2.字符串
    includes
    startsWith
    endsWith
    const ss = ``
3.解构表达式
    数组:let [x,y,z]=arr
    对象: let {name:a, age:b}=person
4.函数
    赋默认值:方法参数列表赋默认值 (a, b=1)=>{}
    箭头函数:()=>{}
    对象中定义函数:
        传统 eat:function(){}
        箭头 eat:()=>{}
        简写 eat(){}
    箭头函数结合结构表达式:({name})=>{}
5.map和reduce
    map(fun):处理一个数组,遍历数组中的每一个元素用fun处理,把处理结果放入新的数组
    reduce(fun(a, b)[, 100]):没有初始值(1. a=10 b=20  2. a=30 b=30) 有初始值(1.a=100 b=10  2.a=110 b=20)
6.对象的扩展
    keys
    values
    entries:二维数组
    assign(dest, ...src)
7.数组扩展
    find findIndex includes

发布了88 篇原创文章 · 获赞 13 · 访问量 9693

猜你喜欢

转载自blog.csdn.net/zgz102928/article/details/104323959