谷粒商城基础班

2023-11-01

4、分布式组件-SpringCloud Alibaba简介

注册中心
配置中心
网关
在这里插入图片描述
结合SpringCloud Alibaba我们最终的技术搭配方案
SpringCloud Alibaba - Nacos：注册中心（服务发现/注册）
SpringCloud Alibaba - Nacos：配置中心（动态配置管理）
SpringCloud - Ribbon：负载均衡
SpringCloud - Feign：生声明式HTTP客户端（调用远程服务）
SpringCloud Alibab - Sentinel：服务容错（限流、降级、熔断）
SpringCloud - Gateway：API网关（webflux编程模式）
SpringCloud - Sleuth：调用链监控
SpringCloud Alibab - Seata：原 Fescar：即分布式事务解决方案

在common的pom.xml中加入

<dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-alibaba-dependencies</artifactId>
                <version>2021.0.1.0</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
 </dependencyManagement>

springBoot和springloud和springCloudAlibab版本号要对应上

4.1、Nacos注册中心

在common模块下pom里引入nacos注册中心依赖

<dependency>
    <groupId>com.alibaba.cloud</groupId>
    <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
</dependency>

下载nacos地址,可以选择版本

https://github.com/alibaba/nacos/releases

解压nacos
在这里插入图片描述
启动nacos
双击bin中的startup.cmd文件
访问http://localhost:8848/nacos
使用默认的nacos/nacos进行登陆
在需要注册nacos的模块yml下配置nacos和服务名称

spring:
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
  application:
    name: gulimall-product

在需要注册nacos的模块GulimallProductApplication启动类上加上注解

@EnableDiscoveryClient

nacos客户端上发现注册的服务
在这里插入图片描述

4.2、远程调用Feign

A调用B
在A和B的pom下引入依赖，在创建Springboot时可以选择feign

<dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-openfeign</artifactId>
 </dependency>

在被调用的服务B的controller中写一个RequestMapping(“/member/list”)方法

@RequestMapping("/member/list")
    public R membercoupons() {
        CouponEntity couponEntity = new CouponEntity();
        couponEntity.setCouponName("满100减10");
        return R.ok().put("coupons", Arrays.asList(couponEntity));
    }

A调用方创建一个feign的包，创建一个feignService接口，加入@FeignClient(“gulimall-coupon”)注解
gulimall-coupon：被调用服务name名称，如下

/**
 * 解释：
 * 当调用CouponFeignService下membercoupons这个方法时，
 * 会去注册中心找gulimall-coupon这个服务的/coupon/coupon/member/list这个方法
 */
@FeignClient("gulimall-coupon")
public interface CouponFeignService {

    @RequestMapping("/coupon/coupon/member/list")
    public R membercoupons();
}

A调用方的启动类中接入注解
作用：启动时扫描feign包

@EnableFeignClients("com.atguigu.gulimall.member.feign")

A调用方需要调用时调用接口下这个方法即可

couponFeignService.membercoupons();

因为版本问题如果不好使，需要在A调用方加入一下依赖

<dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-loadbalancer</artifactId>
</dependency>

4.3、nacos配置中心

1、在common通用服务下引入依赖，所有引入common的服务都可以使用nacos服务注册

<dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
</dependency>

2、在需要加入nacos配置中心的模块下创建bootstrap.properties文件

spring.application.name=gulimall-coupon   // 服务名称
spring.cloud.nacos.config.server-addr=127.0.0.1:8848	// nacso服务启动

3、在controller中加入nacos配置中心不用重启刷新注解

// 配置中心刷新注解
@RefreshScope

4、在nacos配置中心配置
在这里插入图片描述

5、访问测试

 	@Value("${aaa.user.name}")
    private String name;
    @Value("${aaa.user.age}")
    private Integer age;

    @RequestMapping("/test")
    public R test(){
        return R.ok().put("name",name).put("age",age);
    }

6、如果配置不成功需要在springboot加入以下依赖
解释：在SpringBoot 2.4.x的版本之后，对于bootstrap.properties/bootstrap.yaml配置文件(我们合起来成为Bootstrap配置文件)的支持，需要导入如下的依赖

<dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-bootstrap</artifactId>
            <version>3.1.0</version>
</dependency>

7、nacos命名空间
服务隔离
在这里插入图片描述
需要在bootstrap.properties下指定配置管理

spring.cloud.nacos.config.namespace=1b6e5cae-3994-4cba-af8d-fc372bf22a2a

服务下分组隔离
在这里插入图片描述
需要在bootstrap.properties下指定配置管理

spring.cloud.nacos.config.group=dev

总结：
1、nacos可以一个命名空间供所有的服务使用
2、nacos可以一个命名空间对应一个服务
3、nacos可以一个命名空间对应一个服务下多个分组，实现单个服务下环境隔离

4.4、Gateway网关

简介：网关作为流量的入口，常用功能包括路由转发、权限效验、限流控制等，而springCloud gateway作为springCloud官方推出的第二代网关框架，取代了Zuul网关。

4.4.1、创建Gateway网关服务
新建module
在这里插入图片描述

4.4.2、在pom文件里引入common服务
4.4.3、更改springboot和springcloud版本
4.4.4、开启服务注册发现，在启动类上加注解

@EnableDiscoveryClient

4.4.5、gateway网关不需要数据库，但是引入了common，需要在启动类注解上排除数据库相关配置
4.4.6、服务配置中心
创建bootstrap.properties文件，配置数据

spring.application.name=gulimall-gateway // 服务名称
spring.cloud.nacos.config.server-addr=127.0.0.1:8848 // nacos端口
spring.cloud.nacos.config.namespace=0a798bc0-9267-4676-bed1-4a6ef00911f2 // nacos的dataId

nacos客户端
在这里插入图片描述

5、前端知识

在这里插入图片描述

5.1、ES6

ECMAScript6.0（以下简称ES6，ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本），
是JavaScript语言的下一代标准，2015年6月正式发布，从ES6开始的版本号采用年号，如ES2015，就是ES6。ES2016就是ES7。
ECMAScript是规范，JS的规范的具体实现。

5.1.1、let和var和const

var在{}之外也起作用

 	{
        var a = 20;
 	}

      console.log(a); //20

let在{}之外不起作用

	  {
        let b = 22;
      }

      console.log(b); // 报错

var多次声明同一变量不会报错，let多次声明会报错，只能声明一次。

	var a = 10;
    var a = 20;
    let b = 15;
    let b = 25; // 报错

var 会变量提升（打印和定义可以顺序反）。let 不存在变量提升（顺序不能反）

	console.log(a);// undefined 未定义
    console.log(b);// Cannot access 'b' before initialization
    var a = 10;
    let b = 20;

const（常量）声明之后不允许改变

		const a = 10;
        a = 20;
        console.log(a); //报错 Assignment to constant variable.

5.1.2、结构表达式

1、数组结构

	// 数组结构 
    let arr = [1,2,3];
    let a = arr[0];
    let b = arr[1];
    let c = arr[2];

    let [q,w,e] = arr;

    console.log(q,w,e); // 1 2 3

2、对象结构

// 对象结构
    const person = {
        name:"jack",
        age:21,
        language:["java","js","css"]
    }

    const {name:abc,age,language} = person;
    console.log(abc,age,language); // jack 21 ['java', 'js', 'css']

3、字符串扩展

	// 字符串扩展
    let str = "hello.vue";

    // 是否以hello开头
    console.log(str.startsWith("hello")); //true
    // 是否以vue结尾
    console.log(str.endsWith("vue")); //true
    /// 是否包含e
    console.log(str.includes("e")); //true

3.1、对象

4、模块化
模块化就是把代码进行拆分，方便重复利用。类似于java中的导包，而JS换了个概念，是导模块。

模块功能主要有两个命令构成 export 和import

export用于规定模块的对外接口
import用于导入其他模块提供的功能

user.js
var name = "jack"
var age = 21
function add(a,b){
    return a + b;
}

让别人调用。类似java里的get和set
export {name,age,add}

分割线-----------------------------

hello.js
 export const util = {
     sum(a, b) {
         return a + b;
     }
 }

如果是default在导包调用的时候可以随意的起名字

export default {
    sum(a, b) {
        return a + b;
    }
}
 export {util}
分割线----------------------------

// `export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

main.js
import abc from "./hello.js"
import {name,add} from "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);

5、目录调用
./ ：表示引用当前同级目录下的文件

5.2、VUE

执行：npm init -y，让npm管理

npm init -y

执行npm install vue@2.6.10 ，执行版本
npm install vue，是直接执行最新版vue

npm install vue@2.6.10

vscond安装： Vue 2 Snippets：语法提示

vue指令

v-on:click ：单击事件
v-model ：赋值
{{name}} ：插值表达式
{{hello()}} ：方法的返回值

<div id="app">
        <input type="text" v-model="num">
        v-model实现双向绑定
        <button v-on:click="num++">点赞</button>
        v-on:click绑定事件，实现自增
        <button v-on:click="cancel">取消</button>
        回到自定义的方法
        
        <h1> {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}</h1>
    </div>

    <!-- 导入依赖 -->
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        //1、vue声明式渲染
        let vm = new Vue({ //生成vue对象
            el: "#app",//绑定元素 div id="app"
            data: {  //封装数据
                name: "李四",  // 也可以使用{} //表单中可以取出
                num: 1
            },
            methods:{  //封装方法
                cancel(){
                    this.num -- ;
                },
                hello(){
                    return "1"
                }
            }
        });
        // 还可以在html控制台vm.name

        //2、双向绑定,模型变化，视图变化。反之亦然。
        //3、事件处理

        //v-xx：指令

        //1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
        //2、指令来简化对dom的一些操作。
        //3、声明方法来做更复杂的操作。methods里面可以封装方法。

    </script>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)