# 复习提纲


[toc]



## ES6

* 扩展运算符：数组、对象

  ```javascript
  const a1 = [1, 2, 3]
  const a2 = [4, 5, 6]
  const a = [...a1, ...a2, 7] // [1, 2, 3, 4, 5, 6, 7]

  const o1 = {i: 1, j: 2, k: 3}
  const o2 = {l: 4, m: 5, n: 6}
  const o = {...o1, ...o2, s: 7, n: 8}

解构运算符：数组、对象、参数

const [i, j, k] = [1, 2, 3]
const {i, j, k} = {i: 1, j: 2, k: 3}
const function f([i, j, k]) {
  // 使用 f([1, 2, 3]) 调用此函数
}
const f = ({i, j, k}) => {
  // 使用 f({i: 1, j: 2, k: 3}) 调用此函数
}

箭头函数

// const f = () => {}
const function f() {}
// const f = i => i + 1
const function f(i) { return i + 1; } 
// const f = (i, j) => { i = i + 1; return i * j}
const function f(i, j) { i = i + 1; return i * j; }

数组操作

const a = [1, 2, 3]
a.filter(value => value > 2) // [3]
a.map(value => value * value) // [1, 4, 9]

const b = [
  {id: 1, name: 'zhangsan', age: 10},
  {id: 2, name: 'lisi', age: 20},
  {id: 3, name: 'wangwu', age: 30}
]
b.filter(value => age > 18).map(value => value.name) // ['lisi', 'wangwu']

模板字符串、Fetch API

fetch(`http://localhost:8888/api/students/${id}`)
  .then(res => res.json())
  .then(json => { this.student = json})

fetch(`http://localhost:8888/api/students/${id}/name`)
  .then(res => res.text())   // 从 HTTP 响应中获取接口返回的名字
  .then(text => { this.name = text })  // 将返回的名字赋给本地变量

Vue

组件一般由<template>, <script>, <style>组成
- <template>：组件的内容
- <script>：组件的显示逻辑及交互
- <style>：组件的样式
- 这三部分都是可选的
属性、计算属性、插值

<template>
  <div>
    <p>message = {{ message }}</p>  <!-- 插值 -->
    <p>capitalized message = {{ uppercaseMessage }}</p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        message: 'hello'
      }
    },
    computed: {
      // 惰性计算：只有依赖的属性发生变化时，才会进行更新
      uppercaseMessage () {
        // 不要在计算属性中修改其依赖的属性，否则会导致计算属性的死循环
        // this.message += ' world';
        return this.message.toUpperCase();
      }
    }
  }
</script>

指令

<template>
  <div>
    <p v-if="false">P1</p>
    <p v-if="3 > 2">P2</p>
    <p v-if="value">P3</p>

    <!-- v-bind:name 可简写为 :name -->
    <!-- v-on:click 可简写为 @click -->
    <button v-bind:name="buttonName" v-on:click="toggle">Toggle P3</button>

    <p v-for="name in names" :key="name">{{ name }}</p>

    <input v-model="studentName" />
    <button @click="addStudent">添加学生</button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        value: true,
        buttonName: 'submit',
        studentName: ''
        students: [
          {id: 1, name: 'zhangsan', age: 10},
          {id: 2, name: 'lisi', age: 20},
          {id: 3, name: 'wangwu', age: 30},
        ]
      }
    },
    computed: {
      names () {
        return this.students.map(student => student.name);
      }
    },
    methods: {
      toggle () {
        this.value = !this.value
      },
      addStudent () {
        this.student.push({id: this.students.length + 1, 
                           name: this.studentName, 
                           age: 10});
      }
    }
  }
</script>

JDK8

函数式接口
- 除 Object 类包含的方法外，只有一个方法的接口
- @FunctionalInterface：用于声明函数式接口
  - 非必需
  - 如果接口有多个方法，编译时会出错
- java.utils.functions 提供的函数式接口
  - Supplier<T>：提供 T 类型的数据
  - Function<S, R>：提供 S -> R 的函数
  - Consumer<S>：消费类型为 S 的对象
  - Predicate<S>：测试类型为 S 的对象是否满足某种条件
lambda 表达式

public static void main(String[] args) {
  Function<String, Integer> counter = s -> s.length;
  System.out.Println(counter.apply("hello")); // 5

  Predicate<String> isTooLong = s -> s.length > 10;
  System.out.Println(isTooLong.test("hello")); // false

  Consumer<String> print = s -> System.out.println(s);
  print.accept("hello"); // hello

  Supplier<String> names = () -> {
    String[] names = ["zhangsan", "lisi", "wangwu"];
    int i = random.nextInt(3); // 随机生成一个 0 ~ 2 的整数
    return names[i];
  }
  System.out.Println(names.get()); // 三个名字中的一个
}

stream 流操作

List<String> names = new ArrayList<>();
// 添加名字：zhangsan, lisi, wangwu, zhaoliu
names.stream()
  .filter(name -> name.length() > 4)
  .map(name -> name.length())
  .collect(Collectors.toList())
  .forEach(number -> System.out.println(number)); // [8, 6, 7]

HTTP协议

特点
- 请求-响应式
- 无状态性
请求方式
- GET
- POST
- PUT
- DELETE
内容类型
- application/x-www-form-urlencoded
- application/json
状态码：20X、30X、40X、50X

依赖注入

三种配置方式：XML、Java源代码、注解

// 基于注解
@Component
public class B {
  // ...
}
@Component("aaa") // 默认情况下，对象的名字为类名首字母小写
public class A {
  private B b;
  private C c;

  // 基于构造函数的注入方式
  @Autowired   // 当只存在一个构造函数时，可以被省略
  public A(B b) {
    this.b = b;
  }

  // 基于属性的依赖注入方式
  public void setC(C c) {
    this.c = c;
  }
}

// Java 源代码配置
@Configuration
public class AppConfiguration {
  @Bean
  public B b() {
    return new B();
  }

  @Bean
  public C c() {
    return new C();
  }

  @Bean("aaa")
  public A a(B b, C c) {
    A a = new A(b);
    a.setC(c);  // 可选
    return a;
  }
}

两种依赖注入方式：构造函数，属性
- 构造函数注入：
  - 在创建对象时依赖被注入
  - 如果只有一个构造函数，会自动被使用
  - 如果存在多个构造函数，需要在自动装配的构造函数上添加 @Autowired
- 属性：setter 方法
Spring 容器是依赖注入模式的具体实现
- 主要接口是 BeanFactory 和 ApplicationContext
```
@SpringBootApplication
```

public class Application { public static void main(String[] args) { ApplicationContext container = SpringApplication.run(Application.class); BookService service = container.getBean(BookService.class); // ... } } ```

当出现多个匹配的依赖时，解决方式：
- @Qualifier：选择其中一个依赖的名字进行限定
- @Primary：选择其中一个依赖作为主要依赖

Web API 开发

MVC 模式：
- M（model 模型）：用于业务逻辑处理，接收控制器发送的数据进行计算，并将结果返回给 C
- V（View 视图）：用于接收 C 返回的数据并显示用户界面，另一方面，用于向 C 发送请求
- C（Controller 控制器）：用于接收请求，解析请求参数，调用 M并返回响应给客户端
增删改查 API 的开发

@RestController
public class BookController {
  private final BookService bookService;

  public BookController(BookService service) {
    this.bookService = service;
  }

  @GetMapping("/api/books")
  public List<Book> list(@RequestParam String title) {
    return this.bookService.findByTitle(title);
  }

  @PostMapping("/api/books")
  public void create(@RequestBody Book book) {
    this.bookService.add(book);
  }

  @GetMapping("/api/books/{id}")
  public Book get(@PathVariable String id) {
    return this.bookService.findById(id);
  }

  // @PutMapping @DeleteMapping 略
}

Spring Data JDBC

定义实体类

@Table("books")
public class Book {
  @Id
  private String id;

  @Column("name")
  private String title;

  private double price;

  // setter/getter 略
}

定义 Service

@Service
@Transactional // 使用事务
public class BookService {
  private final BookRepository repository;

  public BookService(BookRepository repository) {
    this.repository = repository;
  }

  public void add(Book book) {
    this.repository.save(book);
  }

  // ...
}

定义 Repository 接口

public interface BookRepository extends CrudRepository<Book, String> {
  // findAll / findById / findAllById
  // save / saveAll
  // deleteById / delete / deleteAll()
  // count
  // existsById

  // 根据属性定义自己的查询方法
  List<Book> findByTitle(String title);
  List<Book> findByTitleLike(String title);
  List<Book> findFirstByTitle(String title);
  List<Book> findTop10ByTitle(String title);
  List<Book> findByTitleContaining(String title);
  List<Book> findByTitleContainingAndPriceBetween(String title, double min, double max);
  long countByTitle(String title);
}

Spring Boot

@SpringBootApplication：标识 Spring Boot 应用
配置文件：src/main/resources/application.properties

server.port=9999
spring.datasource.url=jdbc:mysql:///localhost:3306/db
spring.datasource.username=root
spring.datasource.password=root

CommandLineRunner：应用启动以后要立即执行的操作，一般为初始化环境或数据操作等

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

提纲.md

提纲.md

Vue

JDK8

HTTP协议

依赖注入

Web API 开发

Spring Data JDBC

Spring Boot

Files

提纲.md

Latest commit

History

提纲.md

File metadata and controls

Vue

JDK8

HTTP协议

依赖注入

Web API 开发

Spring Data JDBC

Spring Boot