Spring DIP 依赖倒置原则

springboot中文社区

一、java 基础

在Java中,定义方法返回值为接口类型,需要实现该接口的具体实现类,并在方法中返回该实现类的实例对象。

例如,定义一个方法返回值为List接口类型,可以通过以下方式实现:

public List<String> getList() {
    List<String> list = new ArrayList<>();
    // add elements to the list
    return list;
}

在这个例子中,实现了List接口的具体实现类ArrayList,并在getList方法中返回了ArrayList的实例对象。由于ArrayList实现了List接口,因此可以将其作为List类型的返回值。

当调用该方法时,可以使用List类型来接收返回值:

List<String> result = getList();

这样做的好处是,如果后续需要修改返回值的类型,只需要修改返回的实现类即可,而无需修改调用该方法的代码。同时,使用接口作为返回类型也符合面向对象编程的原则,提高了代码的可扩展性和可维护性。

二、Spring 中如何注入Bean

在Spring中,可以使用@Autowired或@Resource注解来注入返回值类型是接口的Bean。

例如,定义一个接口UserService:

    public interface UserService {
        void addUser(User user);
        User getUserById(int id);
    }

然后有一个实现类UserServiceImpl:

    @Service
    public class UserServiceImpl implements UserService {
        // ...
    }

使用@Autowired注解来注入UserService:

@Service
public class SomeService {
    @Autowired
    private UserService userService;
    // ...
}

使用@Resource注解来注入UserService:

@Service
public class SomeService {
    @Resource
    private UserService userService;
    // ...
}

需要注意的是,如果有多个实现类实现了同一个接口,需要使用@Qualifier注解来指定注入的实现类。例如:

@Service
public class SomeService {
    @Autowired
    @Qualifier("userServiceImpl2")
    private UserService userService;
    // ...
}

三、针对接口编程

针对接口编程而不是具体实现类,是一种编程思想,也是面向对象编程的核心原则之一——依赖倒置原则(DIP)。这种编程方式可以使代码更加灵活、可扩展、易于维护。

在 Java 中,可以使用接口作为方法参数、返回值或成员变量的类型,从而实现针对接口编程而不是具体实现类。下面是一个简单的例子:

假设有一个接口 Animal 和两个实现类 Dog 和 Cat:

public interface Animal {
    public void makeSound();
}

public class Dog implements Animal {
    @Override
    public void makeSound() {
        System.out.println("Wang Wang!");
    }
}

public class Cat implements Animal {
    @Override
    public void makeSound() {
        System.out.println("Miao Miao!");
    }
}

现在我们需要一个方法来处理动物的声音,但是我们不确定传入的具体是什么动物,这时候我们可以使用 Animal 接口来作为参数类型:

public class AnimalSound {
    public void makeSound(Animal animal) {
        animal.makeSound();
    }
}

这样,无论传入的是 Dog 还是 Cat,都可以正确输出声音。

使用接口编程还有一个好处是,可以方便地实现依赖注入。比如,我们有一个使用 Animal 接口作为参数类型的类:

public class AnimalService {
    private Animal animal;

    public AnimalService(Animal animal) {
        this.animal = animal;
    }

    public void makeSound() {
        animal.makeSound();
    }
}

使用 Spring 容器进行依赖注入时,只需要将具体的实现类配置为 Bean,然后在 AnimalService 中使用 @Autowired 注解注入即可:

@Configuration
public class AppConfig {
    @Bean
    public Animal dog() {
        return new Dog();
    }

    @Bean
    public AnimalService animalService(Animal animal) {
        return new AnimalService(animal);
    }
}

这样,无论是注入 Dog 还是 Cat,都可以正确输出声音。同时,如果需要新增一种动物实现,只需要实现 Animal 接口,并将其配置为 Bean 即可,不需要修改 AnimalService 类的代码。这就体现了针对接口编程而不是具体实现类的优势。

四、具体实例

有这样一个类

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;

@Configuration
public class MySecurity {
    @Bean
    public PasswordEncoder passwordEncoder(){
        return new BCryptPasswordEncoder();
    }
}

这段代码是一个Spring的配置类,使用@Configuration注解标记,表示这是一个Java配置文件。

其中@Bean注解用于声明一个方法,这个方法返回一个PasswordEncoder类型的对象,并且这个对象会交给Spring容器管理,可以被其他组件注入使用。

具体来说,这段代码中声明了一个名为passwordEncoder的Bean,这个Bean的类型是PasswordEncoder,返回的是一个BCryptPasswordEncoder对象。BCryptPasswordEncoder是Spring Security提供的一种密码加密工具,用于对用户密码进行加密处理。

这个Bean的作用是在Spring Security中使用加密功能时提供PasswordEncoder实例,可以通过在其他组件中使用@Autowired注解来引用这个Bean,从而使用BCryptPasswordEncoder对密码进行加密处理。

假设我们需要在一个服务类中使用 PasswordEncoder 接口,可以使用 Spring 的依赖注入来获取该接口的实例。假设服务类的名称为 MyService,注入过程如下:

import org.springframework.security.crypto.password.PasswordEncoder;

@Service
public class MyService {
    @Autowired
    private PasswordEncoder passwordEncoder;

    // 其他代码
}

已经在Spring容器中定义了一个实现PasswordEncoder接口的Bean。在代码中使用@Autowired注解进行自动注入时,Spring会自动查找容器中是否有符合类型的Bean,然后注入到对应的字段中。因此,如果MySecurity配置类中定义了一个返回值类型为PasswordEncoder的Bean,并且该类被正确扫描到并加载到Spring容器中,那么在其他需要使用该Bean的地方,可以使用@Autowired进行自动注入。

虽然PasswordEncoder是一个接口,但是在MySecurity配置类中,使用@Bean注解定义了一个passwordEncoder()方法并返回了一个实现了PasswordEncoder接口的BCryptPasswordEncoder对象。这样在Spring容器启动时会创建该对象并将其注册到容器中,因此在其他需要使用PasswordEncoder的地方,可以通过@Autowired注解将其注入进去,实际上注入的是BCryptPasswordEncoder对象。这也是Spring中面向接口编程的一个重要原则:针对接口编程而不是具体实现类。

CSS3 3D转换

1 .三维坐标系

三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。

x轴:水平向右 注意: x 右边是正值,左边是负值 \n  y轴:垂直向下 注意: y 下面是正值,上面是负值\n  z轴:垂直屏幕 注意: 往外面是正值,往里面是负值

3D 转换主要学习工作中最常用的 3D 位移 和 3D 旋转

主要知识点

  • 3D位移: translate3d(x,y,z)
  • 3D旋转: rotate3d(x,y,z)
  • 透视: perspective
  • 3D呈现 transfrom-style

1.2 3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。

1>translform:translateX(100px):仅仅是在x轴上移动\n    2>translform:translateY(100px):仅仅是在Y轴上移动\n  3>translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)

4>transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离

因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动

1.3 透视 perspective

在2D平面产生近大远小视觉立体,但是只是效果二维的

1>如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内)。

2>模拟人类的视觉位置,可认为安排一只眼睛去看

3>透视我们也称为视距:视距就是人的眼睛到屏幕的距离

4>距离视觉点越近的在电脑平面成像越大,越远成像越小

5>透视的单位是像素

透视写在被观察元素的父盒子上面的

d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。

z:就是 z轴,物体距离屏幕的距离,z轴越大(正值) 我们看到的物体就越大。

1 .4 translateZ

translform:translateZ(100px):仅仅是在Z轴上移动。\n   有了透视,就能看到translateZ 引起的变化了

1>translateZ:近大远小

2>translateZ:往外是正值

3>translateZ:往里是负值

1.5 3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转。

语法

  1. transform:rotateX(45deg):沿着x轴正方向旋转 45度
  2. transform:rotateY(45deg) :沿着y轴正方向旋转 45deg\n
  3. transform:rotateZ(45deg) :沿着Z轴正方向旋转 45deg
  4. transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)

左手准则

判断X轴正负值

左手的手拇指指向 x轴的正方向\n  其余手指的弯曲方向就是该元素沿着x轴旋转的方向

判断Y轴正负值

左手的手拇指指向 y轴的正方向\n  其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)

transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)\nxyz是表示旋转轴的矢量,是标示你是否希望沿着该轴旋转,最后一个标示旋转的角度。

1>transform:rotate3d(1,0,0,45deg) 就是沿着x轴旋转 45deg

2>transform:rotate3d(1,1,0,45deg) 就是沿着对角线旋转 45deg

1.6 3D呈现 transfrom-style

控制子元素是否开启三维立体环境。。

  • transform-style: flat 子元素不开启3d立体空间 默认的
  • transform-style: preserve-3d; 子元素开启立体空间
  • 代码写给父级,但是影响的是子盒子\n  这个属性很重要,后面必用

案例:两面翻转的盒子

<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    <title>Document</title>\n    <style>\n        body {\n            perspective: 400px;\n        }\n        \n        .box {\n            position: relative;\n            width: 300px;\n            height: 300px;\n            margin: 100px auto;\n            transition: all .4s;\n            /* 让背面的紫色盒子保留立体空间 给父级添加的 */\n            transform-style: preserve-3d;\n        }\n        \n        .box:hover {\n            transform: rotateY(180deg);\n        }\n        \n        .front,\n        .back {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            border-radius: 50%;\n            font-size: 30px;\n            color: #fff;\n            text-align: center;\n            line-height: 300px;\n        }\n        \n        .front {\n            background-color: pink;\n            z-index: 1;\n        }\n        \n        .back {\n            background-color: purple;\n            /* 像手机一样 背靠背 旋转 */\n            transform: rotateY(180deg);\n        }\n    </style>\n</head>\n\n<body>\n    <div class=\"box\">\n        <div class=\"front\">快乐是我的</div>\n        <div class=\"back\">也是你的</div>\n    </div>\n</body>\n\n</html>

案例:3D导航栏

<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    <title>Document</title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n        }\n        \n        ul {\n            margin: 100px;\n        }\n        \n        ul li {\n            float: left;\n            margin: 0 5px;\n            width: 120px;\n            height: 35px;\n            list-style: none;\n            /* 一会我们需要给box 旋转 也需要透视 干脆给li加 里面的子盒子都有透视效果 */\n            perspective: 500px;\n        }\n        \n        .box {\n            position: relative;\n            width: 100%;\n            height: 100%;\n            transform-style: preserve-3d;\n            transition: all .4s;\n        }\n        \n        .box:hover {\n            transform: rotateX(90deg);\n        }\n        \n        .front,\n        .bottom {\n            position: absolute;\n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%;\n        }\n        \n        .front {\n            background-color: pink;\n            z-index: 1;\n            transform: translateZ(17.5px);\n        }\n        \n        .bottom {\n            background-color: purple;\n            /* 这个x轴一定是负值 */\n            /* 我们如果有移动 或者其他样式,必须先写我们的移动 */\n            transform: translateY(17.5px) rotateX(-90deg);\n        }\n    </style>\n</head>\n\n<body>\n    <ul>\n        <li>\n            <div class=\"box\">\n                <div class=\"front\">快乐是我的</div>\n                <div class=\"bottom\">也是你的</div>\n            </div>\n        </li>\n        <li>\n            <div class=\"box\">\n                <div class=\"front\">快乐是我的</div>\n                <div class=\"bottom\">也是你的</div>\n            </div>\n        </li>\n        <li>\n            <div class=\"box\">\n                <div class=\"front\">快乐是我的</div>\n                <div class=\"bottom\">也是你的</div>\n            </div>\n        </li>\n        <li>\n            <div class=\"box\">\n                <div class=\"front\">快乐是我的</div>\n                <div class=\"bottom\"也是你的</div>\n            </div>\n        </li>\n        <li>\n            <div class=\"box\">\n                <div class=\"front\">快乐是我的</div>\n                <div class=\"bottom\">也是你的</div>\n            </div>\n        </li>\n        <li>\n            <div class=\"box\">\n                <div class=\"front\">快乐是我的</div>\n                <div class=\"bottom\">也是你的</div>\n            </div>\n        </li>\n    </ul>\n</body>\n\n</html>

前端成神之路-CSS初识

css

CSS层叠样式表

学习目标

  • 理解
  • css的目的作用
  • css的三种引入方式
  • 应用
  • css三种引用方式的书写
  • 通过样式规则给标签添加简单的样式
 

1.HTML的局限性

说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义,

比如:表明这是一个大标题,用 表明这是一个段落,用 表明这儿有一个图片, 用 表示此处有链接。很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点:

HTML说,我试试…

如果要改变下 高度或者变一个颜色,就需要大量重复操作

 

总结:

  • HTML满足不了设计者的需求
  • 操作html属性不方便
  • HTML里面添加样式带来的是无尽的臃肿和繁琐

2.CSS 网页的美容师

  • 让我们的网页更加丰富多彩,布局更加灵活自如。
  • CSS的最大贡献就是: 让 HTML 从样式中脱离, 实现了 HTML 专注去做 结构呈现,样式交给css

我们理想中的结果: 结构(html)与样式(css)相分离 这句话要记住

而且。。。。。 CSS 做的很出色,如果JavaScript是网页的魔法师,那么CSS它是我们网页的美容师,不信,你看:

3.CSS初识

  • 概念: CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级联样式表)
  • 作用:主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
  • CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

4. 引入CSS样式表(书写位置)

要书写css样式,那css样式书写的位置在哪呢?

4.1 行内式(内联样式)

  • 概念:称行内样式、行间样式. ​ 是通过标签的style属性来设置元素的样式\n
  • 其基本语法格式如下:
<标签名 style=\"属性1:属性值1; 属性2:属性值2; 属性3:属性值3;\"> 内容 </标签名>

实际上任何HTML标签都拥有style属性,用来设置行内式。

  • 案例:
<div style=\"color: red; font-size: 12px;\">青春不常在,抓紧谈恋爱</div>

注意:

  • style其实就是标签的属性
  • 样式属性和值中间是:
  • 多组属性值之间用;隔开。
  • 只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余
  • 缺点: 没有实现样式和结构相分离

4.2 内部样式表(内嵌样式表)

  • 概念: ​ 称内嵌式\n ​ 是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
  • 其基本语法格式如下:
<head>\n<style type=\"text/CSS\">\n    选择器(选择的标签) { \n      属性1: 属性值1;\n      属性2: 属性值2; \n      属性3: 属性值3;\n    }\n</style>\n</head>
<style>\n     div {\n        color: red;\n       font-size: 12px;\n   }\n</style>

注意:

  • style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。
  • type=“text/css” 在html5中可以省略。
  • 只能控制当前的页面
  • 缺点:没有彻底分离

综合案例

<style>\n   /选择器{属性:值;}/\n   p {\n        color:#06C; \n      font-size:14px;  \n       }  /文字的颜色是 蓝色/\n   h4 {\n      color:#900;\n   }\n   h1 {\n        color:#090; \n      font-size:16px; \n     }\n   body { \n      background:url(bg2.jpg);\n   }\n</style>
思考:\n 1. 如何实现结构与样式完全分离?\n 2. 如何实现css样式共享?

4.3 外部样式表(外链式)

  • 概念:\n ​ 称链入式\n ​ 是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,\n ​ 通过link标签将外部样式表文件链接到HTML文档中
  • 其基本语法格式如下:
<head>\n  <link rel=\"stylesheet\" type=\"text/css\" href=\"css文件路径\">\n</head>

注意:

  • link 是个单标签
  • link标签需要放在head头部标签中,并且指定link标签的三个属性

属性作用 :定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。我们都可以省略

 

定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

团队约定-代码风格

样式书写一般有两种:

  • 一种是紧凑格式 (Compact)
h3 { color: deeppink;font-size: 20px;}
  • 一种是展开格式(推荐)
h3 {\n   color: deeppink;\n    font-size: 20px;    \n}

团队约定-代码大小写

样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。

/ 推荐 /\nh3{\n   color: pink;\n}\n   \n/ 不推荐 /\nH3{\n  COLOR: PINK;\n}

5. 总结CSS样式规则

使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,

具体格式如下:

 

总结:

  • 选择器用于指定CSS样式作用的HTML标签,花括号内是对该对象设置的具体样式。
  • 属性和属性值以“键值对”的形式出现。
  • 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
  • 属性和属性值之间用英文“:”连接。
  • 多个“键值对”之间用英文“;”进行区分。