对象与常用内置 API
对象与常用内置 API这一篇分两块：对象（JS 的核心数据载体，与 Java 的”类”差异很大）和常用内置 API（String、Number/Math、Date、JSON、定时器、console、正则等日常工具箱）。 其中原型与 class、Date 的月份从 0 开始、JSON 序列化的坑是重点差异；Array、Set/Map 的方法已在第 2 篇覆盖，本篇不再重复。 一、对象基础1. 对象字面量与属性访问123456789const user = { name: "Tom", age: 18, "full-name": "Tom Hanks" // 含特殊字符的键要加引号};user.name; // 点访问user["name"]; // 方括号访问（键是变量时用这个）user["full-name"]; // 特殊键必须用方括号 与 Java 的差异：Java 要 new 类，JS 直接用...
函数
函数函数是 JavaScript 最核心的概念，也是与 Java 差异最大的部分。最根本的一点：JS 的函数是一等公民——函数是”值”，可以赋给变量、当参数传、当返回值返回；并且 this 是运行时动态绑定的，与 Java 的 this 含义完全不同。 这一篇覆盖函数从基础到进阶的全部常用知识点：函数声明/表达式、默认参数、rest 参数、箭头函数、IIFE、闭包、this、回调与高阶函数、call/apply/bind。 一、差异总览 维度 Java JavaScript 函数地位 方法，属于类 一等公民，是值 定义方式 返回值 方法名(参数) {} 声明式 / 表达式 / 箭头函数 返回类型 / 参数类型 必须声明 无类型声明 重载 支持 不支持（后定义覆盖前面的） 参数个数 固定（可变参数除外） 随意，多传少传都行 this 指向当前实例 运行时动态绑定 默认参数 无（靠重载） 支持 (a = 1) 二、函数基础1. 定义与调用（与 Java 对照）12...
流程控制、数组与集合
流程控制、数组与集合这一篇讲 JS 的流程控制（if / switch / 异常）、循环（for / while / for…in / for…of）、数组、Set 与 Map，以及各类遍历方式。 其中 for...in、for...of、数组的高阶方法（map/filter/reduce）是 JS 与 Java 差异最大的部分；if、for、switch 等基础语法与 Java 几乎一致，只做对照。 阅读方式：与 Java 相同的语法简单带过，重点看「差异」和「⚠️ 坑点」。 一、流程控制1. if / else if / else（与 Java 相同）1234567if (a > 0) { // ...} else if (a === 0) { // ...} else { // ...} 唯一差异：条件表达式不强制是 boolean，JS 会用 truthy/falsy 自动判断（0、"...
变量、数据类型与运算符
变量、数据类型与运算符这一篇把 JS 基础语法中的字面量与变量、数据类型、类型转换、运算符一口气讲完。JavaScript 是动态类型 + 弱类型语言：变量无类型前缀、类型运行期确定、运算时会自动隐式转换——这正是它与 Java 差异最集中的地方，也是坑最多的地方。 阅读方式：与 Java 相通的部分只做对照不展开，重点看「差异」和「⚠️ 坑点」。 一、差异总览 维度 Java JavaScript 类型系统 静态类型，编译期确定 动态类型，运行期确定 变量声明 int x = 1; let x = 1;（无类型前缀） 基本类型 8 种基本类型 7 种原始类型 空值 只有 null null 和 undefined 相等比较 ==（基本类型比值，引用比地址） == 和 === 两种 隐式转换 基本没有 到处都有 逻辑运算 &&/` 二、字面量与变量1. 字面量（literal）字面量就是直接写在代码里的值，Java 和 JS 概念相同，只是写法略有差异。 1234567891011121314151...
移动端与响应式
移动端适配与响应式开发同一个网页要在手机、平板、电脑上都显示得合理，需要解决两件事： 移动端适配：让页面在手机上按设计稿比例等比缩放，元素大小随屏幕宽度变化（用 rem、vw/vh、vmin 等单位）。 响应式开发：让页面在不同宽度下”换一种布局”，大屏多列、小屏单列（用媒体查询 @media 或栅格系统）。 两者常常配合使用：适配负责”大小”，响应式负责”布局”。 一句话记忆：适配是”同一套尺寸按比例缩放”，响应式是”不同宽度用不同布局”。 一、视口 viewport移动端浏览器默认会按”桌面宽度”渲染页面，导致页面在手机上被缩小、字看不清。需要用 meta 标签告诉浏览器按设备实际宽度渲染。 1<meta name="viewport" content="width=device-width, initial-scale=1.0"> 参数 作用 常用值 width 视口宽度 device-width（等于设备宽度） initial-scale 初始缩放比例 1.0（不缩放） maximum-...
交互动效设计
交互动效设计网页动效的核心是：让页面元素”动起来”，从而引导视线、反馈操作、增强体验。 动效本质上是改变元素的某个 CSS 属性，并控制它变化的节奏。实现手段主要有两条路线： 过渡 transition：由状态变化（如 :hover、:focus、类名切换）触发，平滑地从一个值过渡到另一个值。 动画 animation：定义好关键帧后自动播放，可以无限循环、延迟、反向等。 配合 transform 变换、filter 滤镜、clip-path 裁剪、SVG 描边动画、滚动驱动动画等，就能做出各类炫酷效果。 这篇笔记覆盖 2D/3D 变换、过渡、动画、逐帧动画、流光边框、3D 相册与导航、SVG 描边动画、裁剪、滤镜、CSS 变量与 calc、滚动时间线等动效相关知识点，适合快速复习。 一句话记忆：transition 是”从 A 过渡到 B”（需要触发），animation 是”自己会动”（自动播放）。 一、过渡 transition1. 基本语法12345.box { transition: 属性名 时长 速度曲线 延迟时间; /* 常用简写...
现代网页布局
现代网页布局现代网页布局的核心问题是：如何把一个个 HTML 元素稳定、整齐、可维护地摆到页面上。 这篇笔记包括显示模式转换、浮动、清除浮动、Flex 弹性布局、定位布局、Grid 网格布局、多栏布局、滚动容器、图片对齐与缩放，以及“小兔鲜首页项目”中的真实页面布局思路。 一、布局前的基础准备现代布局通常先做 CSS 初始化，减少浏览器默认样式干扰。 12345678910111213141516171819* { margin: 0; padding: 0; box-sizing: border-box;}ul,ol { list-style: none;}a { text-decoration: none; color: #333;}img { vertical-align: middle;} 常见作用： 代码 作用 margin: 0 清除默认外边距 padding: 0 清除默认内边距 box-sizing: border-box 让盒子宽高包含 pad...
CSS
CSSHTML 负责网页结构，CSS 负责网页样式。学习 CSS 的重点不是死记属性，而是理解“选中谁、改什么、改成什么样”。 这篇笔记覆盖 CSS 引入方式、选择器、文字样式、文本排版、继承与优先级、伪类伪元素、盒子模型、背景、阴影、过渡、文本省略、字体图标和精灵图等常用知识点。 一、CSS是什么CSS 全称是 Cascading Style Sheets，中文叫“层叠样式表”。 它主要解决这些问题： 文字显示成什么颜色、大小、字体。 盒子有多宽、多高、什么背景。 元素之间有多少间距。 鼠标移上去、输入框获得焦点时样式如何变化。 页面整体布局、卡片、按钮、导航栏、列表等如何呈现。 CSS 的基本语法如下： 1234选择器 { 属性名: 属性值; 属性名: 属性值;} 示例： 1234p { color: red; font-size: 16px;} 意思是：选中页面中所有 p 标签，把文字颜色设置为红色，字体大小设置为 16px。 二、CSS的三种引入方式1. 内联样式表直接写在 HTML 标签的 style 属性中，...
HTML
HTML基础知识HTML 是前端学习的第一块地基。它不负责“好不好看”，也不负责“能不能交互”，它最核心的任务是：用标签把网页内容组织成浏览器、人、搜索引擎、屏幕阅读器都能理解的结构。 这篇笔记覆盖基础结构、文本、图片、路径、音视频、链接、锚点、网页结构、列表、表格、表单和特殊字符等常见知识点。 一、HTML是什么HTML 全称是 HyperText Markup Language，中文叫“超文本标记语言”。 超文本：网页中不只有普通文字，还可以有图片、音频、视频、链接等内容。 标记语言：通过一对一对的标签告诉浏览器“这段内容是什么”。 HTML 文件通常以 .html 作为后缀，可以直接用浏览器打开。 一个最小的 HTML 页面如下： 1234567891011<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content=&quo...
FastAPI RBAC权限管理系统实战
FastAPI RBAC 权限管理系统实战本文记录一个基于 FastAPI 的 RBAC 用户权限管理系统从需求分析、架构设计、数据库建模、接口实现到前后端联调的完整开发过程。项目定位不是生产级后台模板，而是一个具备完整业务闭环的学习型工程：通过尽量小的系统边界覆盖 Web 后端开发中常见的核心主题，包括分层架构、ORM 关系建模、JWT 登录认证、接口级权限控制、统一响应、前端登录态管理和权限驱动的页面控制。 项目路径如下： 1D:\pycharm_workspace\python_code\FastAPI\fastapi-rbac-admin 技术栈如下： 后端：FastAPI、SQLAlchemy 2.x、Pydantic、JWT、SQLite 前端：Vue3、Vite、Element Plus、Pinia、Axios 权限模型：RBAC，即 User、Role、Permission 三层模型 文档：README、设计文档、Swagger 自动接口文档 初始化数据：admin、editor、viewer 三类演示账号 选择 RBAC 作为实战主题的原因在于，它比普通 ...
