Yang's Blog

Vuex 状态管理与项目实战Vuex 是 Vue 的状态管理库，集中管理多个组件共享的数据，解决”跨组件传值太麻烦”的问题。 这一篇讲 Vuex 的五个核心概念、模块化、辅助函数，以及项目实战中的 axios 封装、api 模块化、移动端 vant、mixins 等工程化要点。 Java 对照：Vuex ≈ 一个”全局共享的内存数据容器”，类似后端的单例 Service + 缓存；mutations 像”同步 setter”，actions 像”异步业务方法”。 一、为什么需要 Vuex 多组件共享同一份状态（如登录用户、购物车），用 props/$emit 层层传递太繁琐。 Vuex 把共享状态集中到一个 store，任何组件都能访问和修改。 二、Vuex 五个核心概念 概念 作用 特点 state 数据源（共享数据） 只读 getters 派生数据（类似 computed） 有缓存 mutations 修改 state 的唯一途径 必须同步 actions 处理异步，再提交 mutation 可异步 modules 模块化拆分 s...

vue-router 路由路由是 SPA（单页应用）的核心：根据 URL 的变化，切换显示不同的组件，页面不刷新。 这一篇讲 vue-router 的基本使用、路由高亮、导航传参、重定向与 404、路由模式、编程式导航。 Java 对照：路由 ≈ 后端 Controller 的 URL 映射（@RequestMapping），但作用在前端，切换的是组件而不是后端接口。 一、路由基本使用（5+2 步骤）安装：npm install vue-router@3（Vue2 用 3.x）。 1234567891011121314151617181920// main.jsimport Vue from "vue";import VueRouter from "vue-router";import App from "./App.vue";import Find from "./views/Find.vue";import My from "./views/My.vue";Vue.us...

组件化开发组件是 Vue 最重要的概念——把页面拆成一块块**可复用的”积木”**，每个组件有自己的模板、数据、样式和逻辑。 这一篇讲组件的基础（注册、scoped、data 函数）和进阶（组件通信、v-model 原理、$refs、插槽、自定义指令）。其中组件通信是 Vue 的绝对重点。 Java 对照：组件 ≈ 一个”封装了 UI + 逻辑的类”，props 类似构造参数（只读传入），$emit 类似回调通知父组件。 一、组件基础1. 单文件组件 .vue 三段式123456789101112131415<template> <div class="box">{{ msg }}</div></template><script>export default { data() { return { msg: "hello" }; }};</script>...

变量、数据类型与运算符这一篇把 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...

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 全称是 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 用户权限管理系统从需求分析、架构设计、数据库建模、接口实现到前后端联调的完整开发过程。项目定位不是生产级后台模板，而是一个具备完整业务闭环的学习型工程：通过尽量小的系统边界覆盖 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 作为实战主题的原因在于，它比普通 ...