接下来我将以：

1
2
3
4
5

n月份~6月份

7月份~9月份

以及最后考试前两个月的时间段来描述具体如何备考

6月份之前（基础阶段）：

这个时间段，是铁定的基础阶段，当然这个基础阶段是要打上引号的！所谓的基础阶段，并不是单纯地看本科阶段所学科目的书！而是从->本科书->到名师基础班的过渡。

也就是说，这个阶段最重要的事情就是：打好基础！越牢越好，切忌好高骛远，埋头苦干。

我复习的时候，看的老师：

高等数学：汤家凤（基础阶段）

线性代数：李永乐

基础阶段我建议，先看高等数学、线性代数的书，入门知识过一遍。能够掌握做课后习题的方法即可！不要做太难的题。

再看完高等数学、线性代数的书后，可以开始进入真正的考研数学基础班了。

还是建议数学汤家凤基础阶段紧跟！

值得一提的是，我非常建议

1
2
3
4
5

买汤家凤老师的《接力题集1800》

汤家凤老师的高等数学讲义

关注汤家凤老师的微信、微博（关注寒暑假等假期的的直播课程）

对的，必买！！！

汤老师在课程中，会讲数学一、数学二、数学三的公共部分！

对于数学科目的独属部分以及题集的部分讲解，会在公众号以直播的形式播出！

给出自己基础阶段的复习方法：

高等数学跟汤家凤老师，线性代数跟李永乐老师即可。

☆ 第一、看对应的汤老师视频课程，但不要看多了，建议是看数集视频（看自己的状态）然后立马投入到1800题集的题海中！

过完一章后，最好是看看这一章学到了什么？可不可以以笔记的形式过一遍。

☆ 第二、《接力题集1800》，一定要关注、标黑错题。错题是很有价值的，到底自己是错在哪里？

详细看看答案，为什么汤老师要这么写？

如果不知道，那么，看了答案后，下次是否能够同步汤老师的思维！ 看到该类型的题，就要想起：

1
2
3
4
5
6
7

这个题是涵盖哪些章节的知识（真正的考题都是综合题）

解该题的基本方法是什么？

在计算的过程：字迹工整！！思路清晰（对，恨不得给出注释那种）

为数不多还遗留下来的笔记了！

这个阶段不是很困难，但是一定要养成基本的解题素养！要知道常见的题型，以及常见的解法！

长时间的 Deliberate Practice（刻意练习） 即可！重复重复再重复。

第三、线性代数我想特别说明：

由于线性代数的抽象性！导致我们看了老师的课程内容 != 我们会做对应的题目，

这个时候我们要反复地看书、经典的例题！！！

• 重难点绝对是：向量，方程组以及特征值、特征方程~（大题就是这么来的）

7/8月份~9月份（强化阶段）：

高等数学：汤老师的1800题集、武忠祥老师的系统强化课

线性代数：李永乐老师的系统强化课

这个阶段就是决定自己到底能不能在数学科目有所突破！有所成长的关键时候了。

对，这个阶段要做大量的题，高难度的题，综合的题

请注意！我这里说的难题，是指贴合考研数学考场难度的题目

这个阶段我推荐：

1
2
3
4
5
6
7

汤老师的 《接力题集1800》强化篇 （除开基础篇即可）

武忠祥老师的《高等数学辅导讲义》

李永乐老师的《线性代数辅导讲义》

武忠祥、李永乐老师（好像今年他们去到不同的机构）的330重点题

☆ 强化班：听武忠祥老师的课程！！！

☆ 强化班：听线性代数，李永乐老师的课程！！

其他阶段的课程我不建议反复听，但是：

强化班的课程很有必要反复听！！！

听课的同时，一定要加强自己计算的能力！速度，准确度！

强化班不是基础班，是真正要上战场的预备课！练习的题目也都是大量高于考场的题目，不要畏难！

这个阶段是绝对适合做高难度的题目的。

• 同时！基础阶段的标黑题目、多次错误题目也不能落下他们，因为很有可能是因为自己的哪一部分的基础不扎实！

很有必要在这个阶段提一嘴！所谓的多种方法，其实在考场上是不适用的。

let’s put it another way，也就是说你会什么方法，就用什么方法解题。熟悉自己的解题方法，熟练自己的解题方法即可。

10月份国庆~12月份（冲刺阶段）

☆☆☆ 汤老师的套题

☆☆☆☆ 李永乐老师团队的套题

☆☆☆ 张宇老师的闭关修炼

☆☆☆☆☆ 李林老师的套题

在大量方法的灌输下，国庆节之后，我们可以开始做套题了！

☆☆☆☆☆ 李林老师的四套卷、八套卷

☆☆☆ 汤老师的卷子（不做参考，因为部分题源是1800题集上的题目）

其他的卷子没有做过..不予评价

请千万记住，不能按照自己做模块题目的思路去做题，一定要强迫自己在规定的时间2~2.5h内做完卷子！！

请千万记住，做卷子的目的不是，所有的题目都要做出来！而是拿到对于这张卷子，自己能拿到的分数！

否则，只会懊悔自己，为什么自己的分数不如自己所愿！

就像我的好研友李总说的那样，你上岸又不是一定要数学150分！

说的很好，每个人对数学的理解能力不同，要求自己做对能做对的题目（这点很重要）

对于实在不会或者算不出来的题目，字迹要工整、思路要清晰，是老师给你评分，不是你自己的思路给你自己评分！

一定要老师知道，你每一步的意义。老师也是 按点给分，按步骤给分！

同时，如果有条件。可以看看数学张宇老师的《闭关修炼》，为的是拓展自己的数学思维！

注意！越是临近考试，越不能放弃考研数学的本质！刷题。结合强化阶段的题目以及做套题的错题

考研数学真题>模拟套题

刷题最开始的阶段，请选择 x年到2010年，x为自己决定起点年份的卷子！

对于近年的真题卷子，一定要珍惜不能浪费！

• 建议整理真题、部分精彩的模拟题的错题！反复阅读。

那么，到了最后的冲刺阶段：

是一定要多看李林老师的《四套卷》、《六套卷》

By the way 直到考试前的早上！我还在看六套卷的选择题。结果你懂的

上考场的具体答题顺序建议：高等数学、线性代数的顺序做题方式。

Ajax的Get与Post方法

请注意，必须引入JQuery

CDN代码如下：

1

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

Get方法

请注意GET方法一般用于从后台中获取数据，而不是提交数据

默认是GET方法，速度很快。但是由于数据将直接以localhost:8080?data1=111&data2=222的形式

出现在浏览器的地址栏中，

因而Get方法一般不用于：敏感、隐私的数据传输

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var id = $("input[name='editor']").val() 
$.ajax({	
	//后台的请求路径 一般在@Controller层中添加相关注解
	//注解一：@RequestMapping(value="/show_paper")或者指定@GetMapping(value="/show_paper")
	url:"show_paper", 
	data:{"Id":, id}, 
	type:"GET",
	//注解二：由于指定返回类型为JSON数据
	//@ResponseBody
	dataType:"JSON",
	success:function(result){
		//后台的回调函数中 result中可以找到 后台返回的JSON数据
		console.log(result);
	},
	error:function () {
		alert("抱歉，请求失败，请重新发出请求！")
	}
});

1. 在SpringBoot中，@RestController=@Controller+@ResponseBody

2. 使用Get方式请求时，后台SpringMVC用@RequestParam(“Id”)来获取

Post方法

与Get方法不同的是，Post方法一般用于向服务器提交数据。而不是获取数据！

因此，我们可以将需要隐私处理的数据以POST方式以服务器交互：比如账户密码，业务逻辑数据等等

1. 网页中没有form标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var username = $("input[name='username']").val() 
var password = $("input[name='password']").val() 
      $.ajax({
	//对应的Controller 指定登录
          url:"login",
	//字符串拼接的方式添加参数 后台可用MVC捕捉 或创建Bean对象
          data:{"username":username , "password":password}, 
          type:"POST",//HTTP请求方式
          dataType:"JSON",//返回值的类型。
          success:function(result){ //请求事件成功的回调函数
              console.log("JSON:"+result);
          },
          error:function(data){//处理页面出错以后执行的函数
              console.log(data);
              window.location.replace("./index.jsp");
          }
      });

1. 后台函数参数中可以使用与前端同名的变量

1

public void fun(String username, String password)

2. 后台可以使用Bean对象 User类 其中属性与前端参数同名

UserController.java

1

public void fun(User user)

User.java

1
2
3
4
5
6
7

public class User{
	private Integer id;
	private String username;
	pruvate String password;
	
	...省略GET、SET方法
}

2.网页中有form标签（更便捷）

关键代码

1

data:$("#form").serialize(),

解释：

1. 给网页中的form表单一个id=”form”

2. 在进行AJAX请求时 找到这个表单

3. 对这个表单中的数据进行序列化serialize()

注意：后台用对象User来接收，并且前端name中的值需要与Bean对象User中的private属性一一对应

1
2
3
4
5
6
7
8

$.ajax({
        url:"addUser",
        type:"POST",
        data:$("#form").serialize(),
        success:function (result) {
            showData(result);
        }
    });

原生VUE实战（查询数据）（含SpringBoot+Vue）

1.创建VUE项目

在命令行中输入

1

vue ui

2.进入dashboard中 创建项目

3.进入VUE 工程管家创建工程

修改以下参数



创建完之后就可以了。

4.从IDEA中导入项目编写前端代码

打开IDEA->导入项目….

1. 安装Vue.js插件
2. 修改JavaScript语言为ECMAScript 6
3. 在控制台中输入npm run serve来启动项目

*******************

（开发从这里开始）VUE前端项目的结构图

项目结构图如图所示：

通过结构图我们可以知道：

• App.vue 是网页的主界面，页面中包括许多组件 component
• 其中Home、About都是导航栏，但注意我们导航至Home与About并不代表像传统意义那样，我们去打开一个新的页面。而是说，我们在页面上加载不同来源的内容

具体含义，如图所示：

1
2
3
4
5
6
7

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

在上述代码中，我们可以看出router-link标签负责导航栏 to表示导航路径
而具体的路径配置是交给项目结构中的
router下的index.js来配置

index.js中的关键代码如图

import代表从那个vue页面中导入相关组件

而在routes中具体配置相应的路径，名字，以及组件的名字

1. 这里的path需要与前端页面vue中router-link中的to属性参数一一对应
2. name可以不填写，但最好与组件名一致
3. component代表组件 这里的component需要与import导入语句后面一致

而对于VUE3.0，我们建立导航可以用新的写法：

import语句可以省略，除了写path与name参数之外，
我们的component参数可以变成：

1

component:()=>import('../views/About.vue)

创建SpringBoot项目

添加以下依赖：



1. Lombok
2. Spring Web
3. Spring Data JPA
4. MySQL Driver

以上四个依赖

1.资源文件中添加数据库文件连接信息：

1
2
3
4
5
6
7
8
9
10
11
12
13

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/vuetest?characterEncoding=utf-8&serverTimezone=GMT%2B8
    username: root
    password: 123456

  jpa:
    show-sql: true
    properties:
      hibernate:
        format_sql:true
server:
  port: 8181

1. 连接数据库信息
2. JPA打印SQL 格式化SQL
3. 端口8181 避免占用（vue的端口与后台的端口占用）

建立实体类

User类（注意使用@Entity @Data注解 @Id放在主键属性上）

值得注意的是，类中的每个属性，在首字母小写后-必须等于数据库表中的字段名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import lombok.Data;
import javax.persistence.Entity;
import javax.persistence.Id;

@Entity
@Data
public class User {
    //默认是类名首字母小写 与数据库中的表进行对应

    @Id
    private Integer id;
    private String username;
    private String password;
    private String email;

}

ApiResponse 后端前台通用-交互类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import lombok.Data;

@Data
public class ApiResponse{

    private int code;
    private String message;
    private Object data;

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

建立Repository层或称DAO层

UserRepository类 extends JpaRepository<User, Integer>

（其中User是对应的类 Integer是主键）利用这种方法，可以避免写一些比如1.查询一条数据2.查询全部数据3.根据主键查询数据…
已经封装好了 常见的DAO层操作

1
2
3
4
5
6
7
8

import com.example.demo.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;

//继承已经封装好了的 JPA不用自己去写简单的 增删改查接口
public interface UserRepositery extends JpaRepository<User, Integer> {

}

建立RepositoryTest测试类 先看看能不能获得到数据库的数据！

1. 在类名上右键
2. Goto中选择test
   
3. 命名UserRepositeryTest

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; @SpringBootTest class UserRepositeryTest { @Autowired private UserRepositery userRepositery; @Test void findAll(){ System.out.println(userRepositery.findAll()); } }

4. 点击函数名左边的运行！测试看控制台能否读取数据库数据。

建立Service层以及对应的Impl实现类

值得注意的是 注解@Service应加在实现类上

UserService接口

1
2
3
4
5
6
7
8

import com.example.demo.entity.User;
import org.springframework.stereotype.Service;

import java.util.List;
public interface UserService {
    List<User> showAllTheUsers();
}

UserServiceImpl实现类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import com.example.demo.entity.User;
import com.example.demo.repository.UserRepositery;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserRepositery userRepositery;

    @Override
    public List<User> showAllTheUsers() {
        return userRepositery.findAll();
    }
}

建立Controller层

UserController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import com.example.demo.entity.ApiResponse;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping(value = "/user")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping("/show")
    public ApiResponse showAll(){
        ApiResponse apiResponse = new ApiResponse();
        List<User> users = userService.showAllTheUsers();
        apiResponse.setData(users);
        apiResponse.setMessage("返回成功！");
        return apiResponse;
    }
}

值得注意的是：@RestController = @Controller + @ResponseBody后台从数据库中查询到的数据
以XML或者JSON的格式，返回给前端。

解决端口跨域的问题

由于我们修改了SPRINGBOOT的端口为8181 而VUE默认是8080因此，我们需要对SpringBoot做一个配置！

新建config.CorsConfig类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOriginPattern("*");
        config.setAllowCredentials(true);
        // 允许服务端访问的客户端请求头
        config.addAllowedHeader("*");
        // 允许访问的方法名,GET POST等
        config.addAllowedMethod("*");
        // 对接口配置跨域设置
        source.registerCorsConfiguration("/**" , config);
        return new CorsFilter(source);
    }
}

到此为止，后台的代码基本算是完成了！
接下来开始编写

*******************

(前端代码开始)User导航栏

修改App.vue文件中的template标签为

1
2
3
4
5
6
7
8

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>|
    <router-link to="/user">User</router-link>
  </div>
  <router-view/>
</template>

同时在router文件夹中的index.js文件中 配置router导航映射（见文章前部分内容！）

第一种方式：适用于VUE2（显式声明）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import User from '../views/User.vue' //建立VUE页面与组件的映射

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About  
  },
  {
    path: '/user',
    name: 'User',
    component: User //从上方的import User中建立映射
  }
]

第二种方式：建立隐式映射

1
2
3
4
5
6
7
8

//注释掉上方的import User from '../views/User.vue' 

//但是下方变成：
{
    path: '/user',
    name: 'User',
    component: ()=>import('../views/User.vue') //边声明组件 边建立映射
  }

创建User.vue 具体显示内容

在views文件夹下创建User.vue文件：

Style CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style scoped>
    table{
        font-size:25px;
    }
    table{
        table-layout:fixed;
        empty-cells:show;
        border-collapse: collapse;
        margin:0 auto;
    }
    td{
        height:20px;
    }
</style>

JavaScript 利用axios与后台交互

第一步、添加axios插件（并修改一些内容）

首先，在命令行中输入

1

vue add axios

然后找到项目结构图中的plugins文件夹下面的axios.js
粘贴以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

"use strict";

import Vue from 'vue';
import axios from "axios"

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function(response) {
    // Do something with response data
    return response;
  },
  function(error) {
    // Do something with response error
    return Promise.reject(error);
  }
);
export default _axios

第二步、引用axios并发起get请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script>
    import axios from "../plugins/axios"; //引用axios 
    
    export default {
        name: "User",
        data(){
            return{
                // 具体的变量
                msg: 'Hello, Vue!',
                users:[]
            }
        },
        created(){  //当网页准备就绪时
            const _data = this //利用这个this好使得在回调函数中 调用回调函数外的data中的数据
            axios('http://localhost:8181/user/show').then(function (response) {
                _data.users = response.data.data //将controller返回给后台的data 赋给data中的数组
            }) //跟ajax一样 直接请求8181端口下的请求路径 注意 已经配置了跨域！不用担心
        }
    }
</script>

第三步、将数据显示在网页中

template HTML内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<template>
    <!--template中写html代码 且只能有一个根div节点-->
    <div>
        <table>
            <tr>
                <td>id</td>
                <td>用户名</td>
                <td>密码</td>
                <td>邮箱</td>
            </tr>
            <tr v-for="user of users"> 
            <!--利用for循环 加载data中users数组中数据-->
                <td >{{user.id}}</td>
                <td >{{user.username}}</td>
                <td >{{user.password}}</td>
                <td >{{user.email}}</td>
            </tr>
        </table>
    </div>
</template>

到此为止。一个简单的查询数据库所有数据的请求就完成了

项目效果图如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({
        template: '<div>Hello World</div>'
    }).mount("#app")
</script>
</html>

面向数据编程->实现计时器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>

<script>
    Vue.createApp({
        data(){
            return {
                counter:1 
            }
        }, //需要一个mounted方法 自动执行
        mounted(){ //页面渲染完 就自动执行
            setInterval(()=>{
                this.$data.counter += 1
            }, 1000) //周期执行
        },
        template: '<div>{{counter}}</div>' //字面量 双括号 放JS表达式或者变量
    }).mount("#app")
</script>
</html>

mounted()表示当文档加载时 就执行该函数

data(){}中存放类似 全局数据

template:放入全局数据 取值

绑定数据&事件->编写方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>象牙山洗脚城</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>

<script>
    Vue.createApp({
        data(){
            return {
                content:"", 
                num:0, 
                Menu:'真空套餐 帝王套餐 夏日套餐 学生套餐',
                isShowMenu: false //标志不展示
            }
        },
        methods:{
            welcomeBtnClick(){
                this.content = "欢迎光临, 贵宾" + ++this.num + "位"
            },
            byeBtnClick(){
                if(parseInt(this.num) == 0){
                    alert("操作有误，无人可离.")
                    return;
                }
                this.content = "还剩贵宾" + --this.num + "位, "+"欢迎下次光临!"
            },
            hideBtnClick(){
                this.isShowMenu = !this.isShowMenu
            }
        },
        template: //波浪 代表多行 v-on:click="" 表示对某个标签绑定某个函数 
                  //{{content可以看做是数据绑定 从data中取出的数据}}
        `   
            <div>
                <div>{{content}}</div> 
                <button v-on:click="welcomeBtnClick">有顾客来</button> &nbsp; 
                <button v-on:click="byeBtnClick">顾客离开</button>
                <div>
                    <div v-if="isShowMenu">{{Menu}}</div>    
                    <button v-on:click="hideBtnClick">显示/隐藏套餐</button>
                </div>
            </div>
        ` //字面量 双括号 放JS表达式或者变量
    }).mount("#app")
</script>
</html>

data(){} 中可以放多个数据

template: ``波浪中可以放多行的 前端代码

v-on:click=”function” 指定点击事件

当变量boolData为真时 变量data才会显示出来

parseInt(val) 可以将val值转换为数值型数据

for循环增加佳丽（技师）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for循环遍历佳丽</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>

<script>
    Vue.createApp({
        data(){
            return {
                waitresses: ['小红', '小丽', '小芳']
            }
        },
        methods:{

        },
        template: 
        `   
            <div>
                <div>
                    <ul>
                        <li v-for="(waitress, index) of waitresses">[{{index}}]{{waitress}}</li>
                    </ul>    
                </div>
            </div>
        ` 
    }).mount("#app")
</script>
</html>

v-for=”(item, index) of list” 属性 代表从数组list中遍历每个item且附上索引 index

将手动输入的值 添加佳丽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手动输入增加佳丽数据</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>

<script>
    Vue.createApp({
        data(){
            return {
                waitresses: ['小红', '小丽', '小芳'],
                inputWaitress:''
            }
        },
        methods:{
            addWaitress(){
                this.waitresses.push(this.inputWaitress)                
				this.inputWaitress = ''
            }
        },
        template: //波浪 代表多行 v-on:click="" 表示对某个标签绑定某个函数 
                  //{{content可以看做是数据绑定 从data中取出的数据}}
        `   
            <div>
                <div>
                    <input v-model="inputWaitress" /> <button v-on:click="addWaitress">增加技师</button>
                </div>

                <div>
                    <ul>
                        <li v-for="(waitress, index) of waitresses">[{{index}}]{{waitress}}</li>
                    </ul>    
                </div>
            </div>
        ` //字面量 双括号 放JS表达式或者变量
    }).mount("#app")
</script>
</html>

v-model=”stringVal” 定义输入的值 传给变量stringVal

同时给按钮绑定函数 将对应输入的值 尾添至数组中（同时输入框值清空）

Vue重要概念：组件式开发

什么是组件？组件就像是 “网页窗体中-一个又一个不同的Section” 网页上所看到的任何东西 都可以写成组件

比如在上个例子中的->增加佳丽 就可以利用这种思想来-> 组件式开发

把可以抽出来或者说可能重复被用到的代码块 抽离出来

小案例：组件式开发-洗脚城系统

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手动输入增加佳丽数据</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>

<script>
    //app是一个可以将自己的内容 挂载在id为app区域上的变量
    const app = Vue.createApp({
        data(){
            return {
                waitresses:['小红', '小芳', '小丽'],
                inputValue:' '
            }
        },
        methods:{
            add(){
                this.waitresses.push(this.inputValue)
                this.inputValue = ' '
            }
        },
        template: `
            <my-title/>   

            <input v-model="inputWaitress"/>
            <button v-on:click="add">添加佳丽</button>

            <div>
                <ul>
                    <my-waitress 
                        v-for="(item, index) of waitresses"
                        v-bind:item="item"
                        v-bind:index="index"
                    />
                </ul>    
            </div>
        `
    })
 
    app.component('my-title',{
        template:'<h1 style="text-align=center">洗脚城</h1>'
    })

    //抽离出上个例子中 动态地渲染 参数为props列表中的值
    app.component('my-waitress', {
        props:['item', 'index'],
        template:`<li>[{{index}}] {{item}}</li>`
    })

    app.mount("#app")
</script>
</html>

VUE的组件式开发之总结：

1. 在代码中，首先将app作为一个const常量（不可更改） 创建出来-> const app = Vue.createApp({})
2. 然后编写这个app常量的各个组件- app.component(‘name’,{data})
3. ….重复编写组件
4. 最后选择把这个app挂载在 网页中的某个区域（可以id选择器，class选择器等..) app.mount(“#id_name”)

重要属性:

1.组件中的template:’’/ ``分别填写单行、多行HTML

2.v-on:click=”fun_name” 绑定单击事件

3.v-for=”(item, index) of list” 利用for循环遍历数组

4.v.bind->绑定这个自定义组件中的props参数数组中的参数

VUE的createApp()方法 与 mount()方法讲解

1
2

const app = Vue.createApp({})
app.mount("#app")

1. createApp就是Vue创建一个应用
2. mount方法就是挂载到某一个DOM节点上

VUE的设计模式：mvvm->model, view, viewModel

Vue的编程设计模式应该叫做mvvm的设计模式。什么叫做mvvm？它首先是面向数据的编程，程序中定义了数据，然后定义了模板，Vue就可以把数据和模板自动进行关联。最后挂载到真实的DOM上，展示给用户。

1

mvvm解释: 第一个m代表model数据，第一个v代表view视图，最后两个字幕vm代表viewModel视图数据连接层。

小案例认识 “数据” “模板” “数据视图连接层”

1
2
3
4
5
6
7
8
9
10
11
12

<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'vincent99013.github.io'   //1.在这里定义了数据，也就是`model`数据
            }
        },
        template: "<h2>{{message}}</h2>" //2.在这里定义了模板，也就是`view`，
        //定义后的自动关联，就叫做`vm`，viewModel数据视图连接层。
    })
    const vm = app.mount("#app")
</script>

1. data(){} 中放数据
2. template:”” 中放模板view 即HTML代码
3. 使得数据与视图之间得以连接

model数据，是我们自己定义的，view模板也是我们自己定义的，但是vm是Vue自动给我们关联的。

当我们明白了什么是mvvm后，你就知道为什么我们给根组件起名vm了。

当我们获取了vm根节点后，其实就可以操作里边的数据了。比如在控制台中输入下面的代码：

1

vm.$data.message = 'vincent'

如果在app里 我们使用this指针操作data数组中某个变量

自动执行函数的理解

说起自动执行函数，还要从被动执行函数说起。比如给网页某一个元素一个点击事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo7</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '弹窗成功'
            }
        },
        methods: {
            clickFun() {
                alert(this.message)
            }
        },
        template: `<div>
                        <button v-on:click="clickFun">点击我弹窗（被动事件）</button>
                   </div>`
    })
	app.mount("#app")
</script>
</html>

在面向数据编程中，此时给该按钮加入点击事件。只有当该按钮被点击时，事件才会被触发。这就是被动函数的概念！

而对于自动执行函数..不需要相应的点击事件才触发

自动执行函数-> mounted()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo7</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '弹窗成功'
            }
        },
		mounted(){
			alert('自动弹出的内容')
		},
        methods: {
			
        },
        template: `<div>
						<h1>不用点击 自动弹窗</h1>
                   </div>`
    })
	app.mount("#app")
</script>
</html>

在网页加载完成后，自动进入mounted函数中，即自动执行里面的代码块。

（很重要！）VUE的所有生命周期

重要的四个基本生命周期函数

1. beforeCreate(): 在实例生成之前会自动执行的函数
2. created(): 在实例生成之后会自动执行的函数
3. beforeMount(): 在模板渲染完成之前执行的函数
4. mounted(): 在模板渲染完成之后执行的函数

那么，现在用具体的例子来演示一下这四个基本周期函数吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo7</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '弹窗成功'
            }
        },
		beforeCreate() {
			console.log('beforeCreate')
		},
		created() {
			console.log('created')
		},
		beforeMount() {
			console.log('beforeMount')
		},
		mounted() {
			console.log('mounted')
		},
        methods: {
			
        },
        template: `<div>
						<h1>不用点击 自动弹窗</h1>
                   </div>`
    })
	app.mount("#app")
</script>
</html>

浏览器的控制台：

可以看到：执行流程是: beforeCreate -> created -> beforeMount -> mounted

beforeUpdate和updated生命周期函数

这两个周期函数是在VUE中的data数据发生变化时，才会被执行，一个是在变化之前，一个是在变化之后。

用一个改变data中变量message的值的例子来说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo7</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '初始值'
            }
        },
		beforeUpdate(){
			console.log('当前的值未被改变！')
		},
		updated(){
			console.log('当前的值已被改变!')
		},
		methods: {
			clickFun(){
				this.message = '恭喜您，成功更改message的值！'		
			}
		},
        template: `<div>
						<div>{{message}}</div>
						<div>
							<button v-on:click="clickFun">点击改变data中的数据值</button>
						</div>
                   </div>`
    })
	app.mount("#app")
</script>
</html>

beforeUnmount和unmounted周期函数

这两个生命周期函数是在VUE销毁时自动执行的函数，一个是销毁前执行，一个是销毁后执行。
beforeUnmount(): 当VUE应用失效时，会自动执行。
unmounted():当VUE应用失效，且DOM完全销毁之后，会自动执行。

代码演示如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '初始值'
            }
        },
		beforeUnmount(){
			console.log('beforeUnmount！')
		},
		unmounted(){
			console.log('unmounted!')
		},
		methods: {
			clickFun(){
				this.message = '恭喜您，成功更改message的值！'		
			}
		},
        template: `<div>
						
                   </div>`
    })
	app.mount("#app")
	app.unmount()
</script>

可以看到，页面在调用unmount函数前后，控制台会打印：

在app.unmount()函数执行后，在beforeUnmount()方法里，DOM还是有内容的，然后到了unmounted方法中，就已经没有任何的DOM内容了。

VUE中最重要的概念-八大生命周期

创建，挂载，更改，非挂载

记住八大生命周期，可回想安卓中的生命周期函数！
各有两个un-XX与xx-ed

如图所示：

插值表达式与v-bind数据绑定

在之前的代码类似 content 这种，正确叫法是 插值表达式 当然也可以叫做 字面量

JSP中从后台SpringMVC中的ModelAndView中存储的数据 利用EL表示JSP网页取值一样

1
2
3
4
5
6
7
8
9

<script>
	const app = Vue.createApp({
        data() {
            return {message: '数据'}
        },
        template: "<div>{{message}}</div>"
    })
	app.mount("#app")
</script>

在以上代码中，我们利用面向数据编程的插值表达式 在模板template当中显示出data数组中的数据。

但有时可能我们需要显示的一些数据变量，中含有HTML标签，我们想在网页中以标签的形式显示出来而不是字符串的内容（即不会把<>这样的内容也显示出来），这样我们就需要用到 v-html=”message” ，需要注意的是，我们需要用多行代码块`而不是单行代码块”

具体代码如下：

1
2
3
4
5
6
7
8
9
10
11

<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '<i>斜体的内容（不含标签）<i>'
            }
        },
        template: `<div v-html="message"></div>`
    })
	app.mount("#app")
</script>

VUE中的数据双向绑定

在模板template中引用的data数据，被绑定到模板对应mount挂载的网页区域中。当data中的数据发生改变时，对应网页中显示出来的内容也会发生改变。这就是双向数据绑定，而有时我们只需要这样的数据，让它只在第一次渲染出来，而之后不再跟随data中的数据的值变化而变化。这样的思想，我们可以用v-once属性完成！

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script>
	const app = Vue.createApp({
        data() {
            return {
				message: 'message数据的初始内容'
            }
        },
		methods:{
			fun(){
				this.message = '更改数据中...'
			}
		},
        template: `
		<div>
			<div v-once>只会显示初始数据：{{message}}</div>
			<div><button v-on:click="fun">点击我但不会改变message的初始值</button>					</div>
		</div>`
    })
	app.mount("#app")
</script>

在上述代码中，我们无论点击多少次按钮，带有v-once属性的div中的字面量数据，绝对不会再次渲染新值

插值表达式中-使用JS代码（三目运算）

比如我们要实现这么一个功能：这里有一个灯（不是开着的，就是关着的），我们利用嵌入JS代码至插值表达式中，实现开关灯。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script>
	const app = Vue.createApp({
        data() {
            return {
				Switch: true //我们默认灯是开着的
            }
        },
		methods:{
			fun(){
				this.Switch = !this.Switch //点击一下 就改变一下灯的状态
			}
		},
        template: `
		<div>
			<div>状态：{{Switch? '灯已关闭': '灯已打开'}}</div>
			<div><button v-on:click="fun">开关灯</button></div>
		</div>`
    })
	app.mount("#app")
</script>

在某些情况下，我们需要这种“非真即假”的场景，来为我们改变一些元素的状态！

v-bind 给某个元素绑定属性

假设我们data数组中有message这个数据，而我们想要某个元素有一个title属性，同时这个title的值为message的值。（联想我们插入HTML标签，而不是标签变成了字符串）

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12

<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '数据内容'
            }
        },
        template: `
		<div v-bind:title = "message" > {{message}} </div>`
    })
	app.mount("#app")
</script>

此时我们将鼠标移到对应的数据内容上，悬停出来的内容即为title，而title的值也是数据内容。说明，我们利用v-bind属性给这个元素赋值了message变量中的内容。

v-on 的基本用法及简写

v-on 是用来绑定响应事件的，在之前提到：

1
2
3
4

methods:{
	alert('显示数据中...')
},
template:" <button v-on:click="fun">点击我弹窗显示数据</button> "

现在可以利用@click来代替：v-on:click事件

也就是说 @事件=v-on:事件

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '数据内容'
            }
        },
		methods: {
			fun(){
				alert(this.message)
			}
		},
        template: 
		`
			<button @click="fun">点击我弹窗显示数据</button>
		`
    })
	app.mount("#app")
</script>

效果图如下：

v-bind绑定的基本用法及简写

与v-on一样，v-bind也可以用来绑定属性。基本用法是：

:title=”val_name(变量名)”，即绑定title为data中的变量名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '数据内容',
				title: ':title生成的按钮标题'
            }
        },
		methods: {
			fun(){
				alert(this.message)
			}
		},
        template: 
		`
			<button @click="fun" :title="title">点击我弹窗显示数据</button>
		`
    })
	app.mount("#app")
</script>

效果图如下：

模板动态参数

属性动态参数

对于绑定的title属性，我们可以看成是一个动态变量parameter里面，赋值为title，title的值为相应的变量名。

所以我们可以利用这样的形式来写：
简写bind函数时，我们不用title（:title），我们把title抽离出来，看成是一个parameter变量的值

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '数据内容',
				name: 'title',
				val: '标题值'
            }
        },
		methods: {
			fun(){
				alert(this.message)
			}
		},
        template: 
		`
			<button @click="fun" :[name]="val">点击我弹窗显示数据</button>
		`
    })
	app.mount("#app")
</script>

事件动态绑定

与属性动态绑定一样，我们可以将点击这个动作抽象成一个变量event，其值为click作为参数。对应的值不变！仍为data中的变量。

1

<button @[event]="fun" :[name]="val">点击我弹窗显示数据</button> 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '数据内容',
				name: 'title',
				val: '标题值',
				event: 'click'
            }
        },
		methods: {
			fun(){
				alert(this.message)
			}
		},
        template: 
		`
			<button @[event]="fun" :[name]="val">点击我弹窗显示数据</button>
		`
    })
	app.mount("#app")
</script>

通过事件绑定，属性绑定，这样我们可以动态切换对应的事件。只需要更改this.event以及this.parameter的值

VUE阻止默认事件（比如表单的默认提交）

最常见的事件就是阻止表单的默认提交，比如在表单的数据还没有完全验证成功情况下。是必须阻止表单默认提交的！

通常我们的代码会像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '数据内容',
				name: 'title',
				val: '标题值',
				event: 'click'
            }
        },
		methods: {
			handleButton(e){
				e.preventDefault()
			}
		},
        template: 
		`
			<form action="https://www.baidu.com">
				<button type="submit" @click="handleButton">提交数据</button>
			</form>
		`
    })
	app.mount("#app")
</script>

1. 我们给一个自定义的阻止事件handleButton(e)
2. 这个e看做是触发事件的源按钮 看做是哪一个按钮触发了这个事件，就指哪一个按钮
3. 调用**e.preventDefault()**函数以阻止默认事件

对于那些经常要做的阻止操作而言，这种方法太低效了。

因而，VUE给我们提供了一个模板修饰符，直接可以阻止默认行为，写法如下：

1
2
3

<form action="https://www.baidu.com" @click.prevent="handleButton">
	<button type="submit">提交<button>
</form>

上述代码中:@click.prevent=”阻止之后 转而进入的事件
完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script>
	const app = Vue.createApp({
        data() {
            return {
				message: '数据内容',
				name: 'title',
				val: '标题值',
				event: 'click'
            }
        },
		methods: {
			handleButton(){
				alert('拦截成功...')
			}
		},
        template: 
		`
			<form action="https://www.baidu.com" @click.prevent="handleButton">
				<button type="submit" >提交数据</button>
			</form>
		`
    })
	app.mount("#app")
</script>

VUE中模板的条件判断 v-if

前面我们提到了三目运算符，结合例子说明：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script>
	const app = Vue.createApp({
        data() {
            return {
				num: 10,
				inputNum:'',
				flag: false,
				message: ''
            }
        },
		methods: {
			handleButton(){
				this.message = (parseInt(this.inputNum)>this.num)? '你输入的数比10大': '并没有比10大'
			}
		},
        template: 
		`
			<input v-model="inputNum"/>
			<button @click="handleButton">查询</button>
			<div>{{message}}</div>
		`
    })
	app.mount("#app")
</script>

当输入的数字大于10或者小于10时 都会提示

现在从这种三目运算符到v-if的过渡：

如果有这么一个场景，当输入的值为“蓝色”时，标签的背景是蓝色，如果是红色，背景是红色。

代码实现如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<script>
	const app = Vue.createApp({
        data() {
            return {
				num: 10,
				inputValue:'',
				flag: false,
				message: ''
            }
        },
		methods: {
			handleButton(){
				this.message = this.inputValue
			}
		},
        template: 
		`
			<input v-model="inputValue"/>
			<button @click="handleButton">查询</button>
			<div v-if="message=='红色'" class="red">这片区域是红色</div>
			<div v-if="message=='蓝色'" class="blue">这片区域是蓝色</div>			
		`
    })
	app.mount("#app")
</script>

<style type="text/css">
	.red{color:red}
	.blue{color:blue}
</style>

VUE中的computed域

对应一般的方法而言，若页面重新渲染；则相应需要计算的方法，会再进行一次计算。

比如，现data数据中有val，和content两个变量；
有一个涉及val变量的方法，计算val*10的值。

现在若在普通方法中，更改同在data中的变量content，那么val变量会重新计算一遍。

现在将代码放入computed域中，现在更改content的值时涉及val的方法不会再执行

VUE中的watch域

Watch译为监听，则我们可以将一些需要监听数据变化，并对这些变化作出一些操作的数据源，
放在Watch域中。而且可以获取到 改变前的值&改变后的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<script>
    const app = Vue.createApp({
        data(){
            return{
                num: 1
            }
        },
        computed:{
            
        },
        methods:{
            fun(){
                this.num--;
            }
        },
        watch:{
            num(current, prev){
                alert("你的num数据从" + prev + "变化到了" + current)
            }
        },
        template:`
            <div>{{num}}</div>
            <div><button @click="fun">点我减一</button></div>
        `
    })
    const vm = app.mount("#app")
</script>

VUE中的模板样式绑定详细讲解

单个样式动态绑定

现有三种样式，我们动态地引用这三个样式：

1
2
3

.red{color:red}
.green{color:green}
.back{background-color:orange}

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21