DSH 笔记

名词来自 glossary-data.js / 答疑来自 questions-data.js / 笔记来自 notes.jsonl

第1课

名词

端口

官方定义:端口(Port),TCP/IP 中用于区分同一主机上不同网络服务的 16 位数字编号,取值范围 0-65535。

大白话:同一台电脑上,不同程序靠这个数字各占一个「门」,互不打架。

类比:像一栋楼的门牌号:楼是同一栋,但 8080 室和 3306 室是不同的服务。

Spring Boot

官方定义:Spring Boot,基于 Spring 框架、遵循「约定优于配置」(convention over configuration)的快速应用开发脚手架。

大白话:Spring 的「免配置」版本:加好依赖就能跑,自带 Web 服务器。

类比:像成套家具:零件、螺丝、说明书都配齐,开箱就能装。

@SpringBootApplication

官方定义:@SpringBootApplication,Spring Boot 的组合注解,等价于 @SpringBootConfiguration、@EnableAutoConfiguration 与 @ComponentScan。

大白话:标在主类上的启动开关,一个注解顶三个:配置类 + 自动配置 + 组件扫描。

类比:像总电闸:推上去,整栋楼该亮的就都亮了。

规范写法:

// 只标在主类上,一个项目一个
@SpringBootApplication
public class HelloSpringBootApplication { … }
约定优于配置

官方定义:约定优于配置(Convention over Configuration),框架为常见情形提供默认约定,只有偏离约定时才需要显式配置。

大白话:大多数情况按框架默认来就行,不用写一堆配置;真要改的时候再写。

类比:像住酒店:标准间怎么摆是定好的,你只提「加张床」这种特殊要求。

自动配置

官方定义:自动配置(Auto-configuration),Spring Boot 依据类路径上的依赖与已注册的 Bean,自动完成常用组件装配的机制。

大白话:看你加了什么依赖,就自动帮你配好对应的组件。

类比:像酒店入住:你订了大床房,床、被子、毛巾就已经铺好了。

起步依赖 starter

官方定义:起步依赖(Starter),Spring Boot 提供的依赖描述符,一次性引入实现某项功能所需的全部依赖。

大白话:一把打包好的依赖集合,加一个 starter 就带来一整套相关库。

类比:像买「火锅套餐」:锅底、配菜、蘸料一次配齐,不用单点。

内嵌服务器

官方定义:内嵌服务器(Embedded Server),将 Servlet 容器(如 Tomcat)作为依赖打包进应用、由应用自身启动的运行方式。

大白话:Tomcat 这类服务器被直接打进应用里,运行 JAR 就等于启动网站。

类比:像自带厨房的餐车:车开到哪,哪就能开火做饭。

Bean

官方定义:Bean(Spring Bean),由 Spring IoC 容器负责实例化、装配与管理的对象,其创建与销毁由容器掌控。

大白话:Spring 启动时替你创建好、之后一直帮你保管的对象。

类比:像公司的固定资产:统一采购、登记入库、按需领用,坏了也有人管。

@RestController

官方定义:@RestController,Spring 的组合注解,等价于 @Controller 与 @ResponseBody,方法返回值直接写入响应体。

大白话:告诉 Spring:这个类处理网络请求,方法返回的内容直接当响应内容发回去。

类比:像前台接待员:问什么答什么,答案直接交给你。

规范写法:

// 类上:等于 @Controller + @ResponseBody
@RestController
public class HelloController { … }
@ResponseBody

官方定义:@ResponseBody,Spring MVC 注解,表示方法返回值经 HttpMessageConverter 转换后直接写入响应体,而不是解析为视图名。

大白话:告诉 Spring:这个方法返回的东西直接当响应内容发回去,别去找网页模板。

类比:像点餐时直接说「打包带走」,不用再摆盘上桌。

规范写法:

// 方法上:返回值直接写进响应体
@GetMapping("/hello")
@ResponseBody
public String hello() { return "Hello!"; }
@Configuration

官方定义:@Configuration,Spring 注解,标记一个类为配置类,其中的 @Bean 方法用于向容器注册 Bean 定义。

大白话:给类贴上「我是配置」的标签,告诉 Spring 这里写着怎么造对象。

类比:像工厂里的工艺文件:不生产零件,只写清楚零件怎么造。

规范写法:

// 类上:这里写「怎么造对象」
@Configuration
public class AppConfig {
    @Bean DataSource dataSource() { … }
}
@EnableAutoConfiguration

官方定义:@EnableAutoConfiguration,Spring Boot 注解,启用自动配置机制,依据类路径上的依赖推断并装配所需的 Bean。

大白话:打开「自动装配」的那个开关。

类比:像空调的自动模式:不用逐项设定,它按环境自己调好。

规范写法:

// 类上:按依赖自动装配
@EnableAutoConfiguration
// 已被 @SpringBootApplication 包含,
// 所以实际项目里通常不用单独写
@ComponentScan

官方定义:@ComponentScan,Spring 注解,指定要扫描的包路径,把标注了 @Component 及其派生注解的类注册为 Bean。

大白话:告诉 Spring 去哪些包里找它该管的类。

类比:像人事按楼层名单点名:名单上的人才会被登记在册。

规范写法:

// 指定从哪个包往下扫
@ComponentScan("com.sutrasky.hello_spring_boot")
@GetMapping

官方定义:@GetMapping,@RequestMapping 的快捷注解,等价于将 method 限定为 GET。

大白话:把方法绑定到「GET + 指定路径」的请求上。

类比:像给抽屉贴标签:只有对应的请求,才会拉开这个抽屉。

规范写法:

@GetMapping("/tasks")   // 只接 GET
public List<Task> list() { … }
Map

官方定义:Map,Java 集合框架中的接口,以键值对(key → value)保存元素,每个键最多映射一个值,键不可重复。

大白话:一本字典:给一个「键」,拿回对应的「值」。

类比:像超市的储物柜:柜门编号是键,柜子里的东西是值,凭编号取物。

规范写法:

Map<String, String> about = new HashMap<>();
about.put("course", "Spring Boot");  // 存
about.get("course");                 // 取
about.getOrDefault("k", "无");        // 没有就给默认值
about.containsKey("course");         // 有没有这个键

// 只读快捷写法(Java 9+):适合临时拼几个字段
Map<String, Object> m = Map.of("course", "Spring Boot");
Spring Initializr

官方定义:Spring Initializr,Spring 官方提供的项目脚手架生成器(start.spring.io),按所选依赖产出可直接运行的项目骨架。

大白话:一个网页生成器:勾几下,它就把能跑的项目骨架打包给你下载。

类比:像点套餐:选好主菜和配菜,厨房配齐一整套端上来。

Maven

官方定义:Apache Maven,基于项目对象模型(POM)的 Java 构建与依赖管理工具,用 pom.xml 描述依赖与构建过程。

大白话:管依赖、管编译打包的工具,读 pom.xml 去把需要的库下下来。

类比:像采购加仓库管理员:清单上写什么,它就买什么、摆好。

JAR

官方定义:JAR(Java Archive),Java 的归档文件格式,把编译产物与资源打包成一个可分发、可运行的压缩包。

大白话:把编译好的程序和相关文件打成一个包,一条命令就能跑。

类比:像把整套家具装进一个箱子,搬走就能用。

答疑

问: @PathVariable是什么意思,怎么使用

一句话:@PathVariable 是把 URL 路径里的一段「占位值」取出来,交给方法参数。

看第 1 题:GET /hello/{name} 里的 {name} 是一个占位符—— 它不匹配固定的字符串,而是匹配路径里的那一段。谁负责把这一段读出来?就是 @PathVariable

@GetMapping("/hello/{name}")                        // {name} 是占位符
public String hello(@PathVariable String name) {    // 参数名与占位符同名
    return "Hello, " + name + "!";
}

访问 http://localhost:8080/hello/张三 → 返回 Hello, 张三!

别和 @RequestParam 搞混(最常混的一对):

  • @PathVariableURL 路径里的一段/hello/张三 —— 这个值标识某个东西(某个人、某个 id)
  • @RequestParam? 后面的查询参数/hello?name=张三 —— 这个值是筛选条件,通常可选

三个坑,第 2 个几乎人人踩过:

  1. 名字要对上。占位符叫 {name},参数就叫 name。 想不一样必须显式写:@PathVariable("name") String who
  2. 忘记加注解 → 直接 404。路径写了 /hello/{name}, 参数却没加 @PathVariable,Spring 不把它当路径变量, 结果就是匹配不上。看到 404 先检查这里。
  3. 大小写敏感。{Name}{name} 是两个不同的东西。

第 4 题(进阶)里的 /api/tasks/{id} 也是同一个用法——那个 id 同样靠 @PathVariable 取。第2课会正式讲它。

三段式解释(官方定义 / 一句话大白话 / 生活类比)见 名词速查笔记 · @PathVariable

问: map的使用方法

一句话:Map 是「键 → 值」的字典——给一个键,拿回对应的值。

两个类型参数:Map<键类型, 值类型>。键不能重复,后来的 put 会覆盖前面的。

最常用的几个操作:

Map<String, String> about = new HashMap<>();

about.put("course", "Spring Boot");   // 存
about.get("course");                  // 取 → "Spring Boot"
about.get("nope");                    // 取不到 → null
about.getOrDefault("nope", "无");      // 取不到就给默认值
about.containsKey("course");          // 有没有这个键 → true
about.remove("course");               // 删掉这个键

它正好是你第 2 题里那个「想一想」的答案。 你现在返回的是 String,所以 Content-Typetext/plain。 如果把返回值换成一个 Map,Spring 会自动把它序列化成 JSONContent-Type 就变成 application/json 了:

@GetMapping("/about")
public Map<String, Object> about() {
    return Map.of(
        "course", "Spring Boot",
        "lesson", 1,
        "author", "你的名字"
    );
}

对比一下:返回 String 时,那段 JSON 只是「一串普通文本」; 返回 Map 时,Spring 才知道「这是一份结构化数据」,于是连同响应头一起给对。 这就是第2课所有接口的写法基础。

第2课还会再用到它:那里用 HashMap 当「内存数据库」, Map<Long, Task> 就是这个用法——任务 id 是键,任务对象是值。 重启就没了,这也正是第3课要换成真数据库的原因。

一个坑:Map.of(...) 建出来的是只读的, 往里 put 会抛 UnsupportedOperationException。 要能改就用 new HashMap<>()

三段式 + 规范写法见 名词速查笔记 · Map

问: 写完了about,返回的json在哪里

它就是你请求的那个网址本身——不在文件里,也不用去哪里"取"。 接口 return 什么,那段内容就随 HTTP 响应直接发回给你, 落在 响应体 里。所以:

在浏览器地址栏访问 http://localhost:8080/about, 页面上显示的那段文字就是返回的 JSON。

{"course":"Spring Boot","lesson":1,"author":"你的名字"}

想看得更清楚,有三个地方:

  1. 浏览器地址栏(最快):直接访问 http://localhost:8080/about
  2. curl(课里「三个必做的验证」用的就是它): curl http://localhost:8080/about
  3. 开发者工具 Network(最清楚):按 F12Network 标签 → 刷新页面 → 点列表里的 about → 看 Response 面板。 那一栏就是服务器原样返回的内容。

为什么你可能觉得"没找到":如果方法返回的是 String, 浏览器把它当成纯文本铺在白页上,一行字很容易被忽略—— 用 Network 面板看 Response 就不会漏。

顺手把第 2 题那个「想一想」做掉:把返回值换成 Map(写法见旁边的 #0002),再访问一次同一个地址。 这次 Content-Type 会变成 application/json, Chrome / Firefox 会自动把它排版成带缩进的 JSON 树。 同一份数据、两种完全不同的"看起来"——区别就在这里。

如果根本打不开: 404 = 路径没对上(检查 @GetMapping("/about") 和有没有拼错); 连不上 = 应用没起来或端口不对(看启动日志里那句 Tomcat started on port ...)。

我的笔记

第2课

名词

HTTP

官方定义:超文本传输协议(HyperText Transfer Protocol),应用层协议,规定了请求报文与响应报文的格式以及客户端与服务端的交互方式。

大白话:浏览器和服务器之间「说话的规则」:怎么问、怎么答,都有固定格式。

类比:像寄快递的通用面单:寄件人、收件人、物品各写哪一栏,全世界都一样。

URL

官方定义:统一资源定位符(Uniform Resource Locator),用于标识并定位网络资源位置的字符串。

大白话:网络上某个资源的「门牌地址」。

类比:像快递收货地址:写清楚,请求才能送到正确的地方。

状态码

官方定义:HTTP 状态码(Status Code),服务端在响应行中返回的三位数字,表示本次请求的处理结果。

大白话:服务器回话时附带的数字,一眼告诉你成功还是失败、失败在哪。

类比:像外卖订单状态:已送达、地址错误、商家出餐失败,各有各的编号。

幂等性

官方定义:幂等性(Idempotence),指同一请求执行一次与执行多次,对服务端状态产生的效果相同。

大白话:同一个请求做 1 次和做 100 次,对数据的结果完全一样。

类比:像按电梯按钮:按一次和按十次,电梯都只来一趟。

JSON

官方定义:JavaScript 对象表示法(JavaScript Object Notation),一种轻量级、与语言无关的结构化数据交换格式。

大白话:一种人和机器都容易读的数据格式,用大括号装「字段: 值」。

类比:像标准化的快递面单:每个格子写什么,都有规定。

GET

官方定义:HTTP GET 方法,语义为安全且幂等地获取目标资源的当前表示,不应产生副作用。

大白话:我要看,不要改。浏览器地址栏输入网址回车,发出去的就是 GET,它只读取数据。

类比:像隔着玻璃看展品:看多少遍,展品都不会变。

POST

官方定义:HTTP POST 方法,语义为向目标资源提交数据,通常用于创建从属资源或触发处理,不具备幂等性。

大白话:我要新建一条数据,交给你保存。

类比:像往意见箱投纸条:投一次多一张,投十次就多十张。

PUT

官方定义:HTTP PUT 方法,语义为用请求载荷完整替换目标资源的当前表示,是幂等的。

大白话:我要把这条数据整份替换掉,你没给的字段就当作清空。

类比:像撕掉整页笔记重写一遍:写完就是最终版。

PATCH

官方定义:HTTP PATCH 方法,语义为对目标资源施加部分修改,只需提交发生变化的字段。

大白话:我只改这条数据的其中一小块,其他字段别动。

类比:像只给笔记改一个字,其余内容原样保留。

DELETE

官方定义:HTTP DELETE 方法,语义为删除目标资源,是幂等的。

大白话:我要删掉这条数据。

类比:像从名单上划掉一个名字:划一次和划三次,结果都是没这个人。

200 OK

官方定义:HTTP 200 OK,表示请求已成功,响应中包含所请求的结果。

大白话:成功,你要的数据已经在响应里了。

类比:像取件成功:东西已经拿到手。

201 Created

官方定义:HTTP 201 Created,表示请求已导致新资源被创建,通常在 Location 响应头中给出其 URI。

大白话:创建成功,新数据已经生成。

类比:像开户成功:不但办成了,还多了一个新账号。

204 No Content

官方定义:HTTP 204 No Content,表示请求已成功处理,但响应中不包含实体内容。

大白话:操作成功,但没有什么内容要返回给你。

类比:像退掉一件衣服:办完了,不需要给你新东西。

400 Bad Request

官方定义:HTTP 400 Bad Request,表示服务端因请求语法错误或参数不合法而拒绝处理该请求。

大白话:你发来的请求有问题,比如缺字段、格式不对。

类比:像表格填错:工作人员没法受理,得你先改。

404 Not Found

官方定义:HTTP 404 Not Found,表示服务端找不到与请求 URI 相匹配的资源。

大白话:你找的东西不存在。

类比:像按门牌号找过去,发现根本没有这个房间。

500 Internal Server Error

官方定义:HTTP 500 Internal Server Error,表示服务端遇到未预期的错误而无法完成请求。

大白话:服务器自己出错了,不是你请求写错。

类比:像餐厅后厨着火:菜单没错,是店里出了问题。

REST / RESTful

官方定义:REST(Representational State Transfer,表述性状态转移),一种以资源为中心、通过统一接口对资源表述进行操作的架构风格。

大白话:URL 只表示「资源」,动作交给 HTTP 方法来表达。

类比:像餐厅菜单:菜名(URL)固定不变,点菜、加菜、退菜(GET/POST/DELETE)是不同的动作。

CRUD

官方定义:CRUD,指对持久化数据的四个基本操作:创建 Create、读取 Read、更新 Update、删除 Delete。

大白话:增、查、改、删四类最基本的操作。

类比:像通讯录的四个动作:加人、看人、改人、删人。

三层架构

官方定义:分层架构(Layered Architecture),按职责将系统垂直划分为若干层,每层只依赖其下层,以隔离关注点。

大白话:把请求处理拆成 Controller → Service → Repository 三段,各管一段。

类比:像流水线:每道工序只做一件事,坏了也只换那一段。

Controller 控制器层

官方定义:控制器(Controller),MVC 模式中负责接收请求、调用业务逻辑并生成响应的组件。

大白话:站在最外层接待 HTTP 请求的那一层,只负责收请求、给响应。

类比:像餐厅服务员:负责点单和上菜,不进厨房炒菜。

Service 服务层

官方定义:服务层(Service Layer),位于控制器与数据访问层之间,承载业务规则与用例编排的组件。

大白话:放业务规则的那一层,决定「这件事该怎么办」。

类比:像餐厅厨师:怎么配菜、火候多大,全在这一层决定。

Repository 数据层

官方定义:仓储(Repository),领域驱动设计中封装数据持久化与查询访问、向业务层隐藏存储细节的抽象。

大白话:只负责跟数据库或存储打交道的那一层。

类比:像餐厅仓库管理员:只负责取料放料,不管菜怎么做。

依赖注入 DI

官方定义:依赖注入(Dependency Injection),由容器负责创建对象并把其依赖对象传入,而非由对象自行创建,是控制反转的一种实现。

大白话:类不自己 new 依赖对象,而是让 Spring 把需要的东西递进来。

类比:像点外卖:你不用自己买菜,后厨按订单把料送到手边。

构造函数注入

官方定义:构造函数注入(Constructor Injection),通过构造函数参数提供依赖的注入方式,可保证依赖不可变且非空,为 Spring 官方推荐。

大白话:把依赖写在构造函数参数里,Spring 创建对象时自动传入。

类比:像入职时 HR 一次把工牌、电脑都交到你手上,之后不用再逐个申请。

ResponseEntity

官方定义:ResponseEntity,Spring MVC 中表示完整 HTTP 响应的对象,包含状态码、响应头与响应体三部分。

大白话:一个能同时装「状态码 + 响应头 + 响应体」的容器,让你精确控制返回什么。

类比:像快递包裹:装什么、贴什么面单、要不要加急,你都能定。

@RequestMapping

官方定义:@RequestMapping,Spring MVC 注解,用于将请求映射到类或方法,可按路径、HTTP 方法、参数、请求头等条件限定。

大白话:给整个类设定统一的 URL 前缀,类里所有接口都带上它。

类比:像给部门挂上「3 楼市场部」的牌子:找这个部门的人都走同一个入口。

规范写法:

// 类上:给类里所有方法加统一前缀
@RequestMapping("/api/tasks")
public class TaskController {
    @GetMapping("/{id}")  // 完整路径 /api/tasks/{id}
    public Task get(...) { … }
}
@PostMapping

官方定义:@PostMapping,@RequestMapping 的快捷注解,等价于将 method 限定为 POST。

大白话:把方法绑定到「POST + 指定路径」的请求上。

类比:像意见箱的投递口:只有投递这个动作,才会走这条通道。

规范写法:

@PostMapping("/tasks")  // 只接 POST:新建
public Task create(@RequestBody Task t) { … }
@PutMapping

官方定义:@PutMapping,@RequestMapping 的快捷注解,等价于将 method 限定为 PUT。

大白话:把方法绑定到「PUT + 指定路径」的请求上。

类比:像「整页重写」专用窗口:只接整份替换的活。

规范写法:

@PutMapping("/tasks/{id}")  // 只接 PUT:整份替换
public Task replace(@PathVariable Long id,
                    @RequestBody Task t) { … }
@DeleteMapping

官方定义:@DeleteMapping,@RequestMapping 的快捷注解,等价于将 method 限定为 DELETE。

大白话:把方法绑定到「DELETE + 指定路径」的请求上。

类比:像碎纸机入口:只有销毁这个动作,才会走这条通道。

规范写法:

@DeleteMapping("/tasks/{id}")  // 只接 DELETE
public void delete(@PathVariable Long id) { … }
@PathVariable

官方定义:@PathVariable,Spring MVC 注解,用于将 URI 模板变量(如 /tasks/{id} 中的 id)绑定到方法参数。

大白话:从 URL 路径里挖出一段文字,当作方法参数。

类比:像从「3 号楼 502 室」这个地址里,单独取出「502」。

规范写法:

// {name} 是占位符;参数名与它同名即可拿到值
@GetMapping("/hello/{name}")
public String hello(@PathVariable String name) {
    return "Hello, " + name + "!";
}
@RequestParam

官方定义:@RequestParam,Spring MVC 注解,用于将请求参数(查询串、表单数据)绑定到方法参数。

大白话:从 URL 问号后面的查询串里取值,比如 ?completed=true。

类比:像筛选表单上的小格子:勾了什么,就按什么筛。

规范写法:

@GetMapping("/tasks")
public List<Task> list(@RequestParam boolean done) { … }
// 访问 /tasks?done=true
@RequestBody

官方定义:@RequestBody,Spring MVC 注解,通过 HttpMessageConverter 将请求体反序列化为方法参数对象。

大白话:把请求体里的 JSON 自动翻译成 Java 对象,交给方法直接用。

类比:像拆快递:箱子里的东西自动摆到桌上,还分好了类。

规范写法:

@PostMapping("/tasks")
public Task create(@RequestBody Task task) { … }
// 请求体 {"title":"买菜"} 自动变成 Task 对象
Bean Validation

官方定义:Bean Validation(Jakarta Validation,原 JSR 380),Java 标准的数据校验规范,以注解声明约束并由校验器统一执行。

大白话:把校验规则写在字段上,由框架统一检查。

类比:像产品上的合格标签:规则写在标签里,检查时照着看就行。

@Valid

官方定义:@Valid,Jakarta Bean Validation 注解,用于触发对被标注对象的约束校验,支持级联验证。

大白话:加在方法参数上,才会真正执行字段上写好的校验规则。

类比:像门口安检机:开了机,行李才会被检查。

规范写法:

@PostMapping("/tasks")
public Task create(@Valid @RequestBody Task task) { … }
// 校验失败 → 400,方法体根本不会执行
@NotBlank

官方定义:@NotBlank,Jakarta Bean Validation 约束,要求被标注的字符串非 null,且去除首尾空白后长度大于 0。

大白话:这个字符串必须有实际内容,不能是 null、空串或只有空格。

类比:像必填栏:留空或只敲空格,都不算填。

规范写法:

public record Task(@NotBlank String title) { }
// null、""、"   " 都会校验失败
@Size

官方定义:@Size,Jakarta Bean Validation 约束,要求被标注的字符串长度或集合大小落在指定的 min 与 max 区间内。

大白话:限定字符串长度或集合大小,必须落在指定范围内。

类比:像行李箱尺寸规定:太大太小都不能带上飞机。

规范写法:

public record Task(
        @Size(min = 1, max = 50) String title) { }
// 长度不在 1~50 之间就失败
@RestControllerAdvice

官方定义:@RestControllerAdvice,Spring 的组合注解(@ControllerAdvice 与 @ResponseBody),用于对多个控制器提供全局异常处理。

大白话:全局的「异常值班经理」:所有控制器抛出的异常都汇总到这里统一处理。

类比:像客服总台:哪个柜台出问题,都由总台统一对外答复。

规范写法:

// 类上:全局异常总台,管所有 Controller
@RestControllerAdvice
public class GlobalExceptionHandler { … }
@ExceptionHandler

官方定义:@ExceptionHandler,Spring 注解,用于声明处理特定异常类型的方法,可限定生效的控制器范围。

大白话:贴在方法上,声明「哪种异常由我来处理」。

类比:像医院分诊:骨折去骨科,发烧去内科,各有人管。

规范写法:

// 方法上:声明这个异常由我处理
@ExceptionHandler(TaskNotFoundException.class)
public ResponseEntity<String> handle(
        TaskNotFoundException e) { … }
record

官方定义:record,Java 16 正式引入的类声明形式,用一行声明不可变的数据载体类,并自动生成构造器、访问器与 equals/hashCode。

大白话:定义不可变数据类的简写语法,一行顶几十行。

类比:像印好的表格模板:填上值就完事,格式不能改。

cURL

官方定义:cURL(Client URL),使用 URL 语法在命令行传输数据的开源工具,支持 HTTP、HTTPS、FTP 等多种协议。

大白话:命令行里发 HTTP 请求的小工具,用来快速验证接口。

类比:像手动拨号打电话:想测哪个号,直接拨过去听回应。

HTTPie

官方定义:HTTPie,基于 Python 的命令行 HTTP 客户端,提供更贴近自然语言的语法与彩色格式化输出。

大白话:比 cURL 更好读的命令行 HTTP 客户端,输出带颜色和高亮。

类比:像把拨号换成触屏:做的事一样,界面顺眼多了。

Postman

官方定义:Postman,用于设计、调试、测试与协作维护 HTTP API 的图形化平台。

大白话:图形界面测试 API 的工具,点按钮就能发请求、看响应。

类比:像把命令行换成遥控器:不用记语法,按按钮就行。

答疑

本课暂无答疑。

我的笔记

Vue 第1课

名词

Vue

官方定义:Vue.js,一款用于构建用户界面的渐进式 JavaScript 框架,采用自底向上增量开发的设计。

大白话:让你用模板语法把数据变成页面,数据变了页面自动更新。

类比:像智能填空题:你定义好空格(模板),填上数据(响应式变量),页面就自动生成。

模板

官方定义:模板(Template),Vue 中用于声明式地将数据渲染到 DOM 的 HTML 扩展语法。

大白话:带占位符的 HTML,数据来了自动填进去。

类比:像填空题试卷:题目已经出好,你只需要填答案。

响应式

官方定义:响应式(Reactivity),Vue 的核心机制,当数据变化时,视图会自动更新。

大白话:数据变了,页面不用手动刷新,自动跟着变。

类比:像自动调温的空调:温度变了,它自己调整,不用你动手。

ref

官方定义:ref(),Vue 3 中创建响应式基本类型数据的 API,返回一个包含 .value 属性的响应式引用。

大白话:创建一个能被 Vue 追踪的变量,改了它页面就更新。

类比:像一个有通知功能的记事本:你改了内容,看的人自动收到更新。

规范写法:

import { ref } from 'vue';
const count = ref(0);
// 读:count.value
// 写:count.value++
// 模板中直接用 {{ count }}
v-for

官方定义:v-for,Vue 的列表渲染指令,基于源数据多次渲染一个元素或模板块。

大白话:循环渲染列表,数组有几项就生成几个元素。

类比:像点名册:名单上有谁,就给谁发一张座位卡。

规范写法:

&lt;li v-for="item in items"
    :key="item.id"&gt;
  {{ item.name }}
&lt;/li&gt;
v-if

官方定义:v-if,Vue 的条件渲染指令,根据表达式的真假值有条件地渲染元素。

大白话:条件为真才显示,否则整个元素从 DOM 移除。

类比:像门禁卡:刷卡了门才开,没刷卡门都不出现。

规范写法:

&lt;div v-if="loading"&gt;
  加载中...
&lt;/div&gt;
&lt;div v-else&gt;
  {{ data }}
&lt;/div&gt;
v-model

官方定义:v-model,Vue 的双向绑定指令,在表单元素上创建双向数据绑定。

大白话:输入框和变量双向同步:改输入框变量变,改变量输入框也变。

类比:像对讲机:两边都能说话,都能听到。

规范写法:

&lt;input v-model="name" /&gt;
&lt;p&gt;你好,{{ name }}&lt;/p&gt;
mount

官方定义:mount(),Vue 应用实例的方法,将应用挂载到指定的 DOM 元素上。

大白话:把 Vue 应用"安装"到页面上的某个元素里。

类比:像把画挂到墙上:画(应用)准备好了,挂到墙(DOM)上才能看到。

规范写法:

const app = createApp({ /* ... */ });
app.mount('#app');
// 应用挂载到 id="app" 的元素
importmap

官方定义:导入映射(Import Map),浏览器原生支持的模块说明符重映射机制,允许在不使用构建工具的情况下使用裸模块说明符。

大白话:告诉浏览器 "import vue 从哪里下载",不用打包工具也能用 ES Module。

类比:像快递代收点:你写 "vue",浏览器知道去 unpkg.com 取。

规范写法:

&lt;script type="importmap"&gt;
{
  "imports": {
    "vue": "https://unpkg.com/
      vue@3/dist/vue.esm-browser.js"
  }
}
&lt;/script&gt;

答疑

本课暂无答疑。

我的笔记

回到顶部