前端学习规划

1.前端基础1月

力扣+面试题

vue3+vite不使用脚手架从0搭建项目

列表增删改/权限控制/表图/封装通用组件/写自定义hooks在项目中使用

前端工程化:

vite / webpack Dev Server(热更新 代理 sourcemap)

构建打包(tree-shaking 压缩 code split)

代码规范:ESLint Prettier EditorConfig husky提交卡口

版本与环境:git分支模型 .env多环境 changelog 语义化版本

自动化:lint test build deploy 流水线(gitee go)

vite bulid后看包体积(路由懒加载/ 三方库拆vendor manulChunks/开bulid.minify:esbuild,生产环境关sourcemap)

1. 项目概述

项目目标：开发一个轻量级的博客后台管理系统，支持博主进行文章内容的创作、发布、分类管理以及用户互动管理。
目标用户：

• 管理员/博主：拥有最高权限，负责内容创作、数据管理和系统维护。

• 普通访客：仅拥有前台页面的浏览、评论和点赞权限（前台功能可作为后续扩展）。

2. 核心角色与权限 (RBAC)

• 超级管理员：拥有所有模块的增删改查权限，包括用户管理、系统配置。

• 内容编辑：仅拥有文章的撰写、编辑、删除权限，以及媒体文件上传权限，不可管理用户和系统设置。

3. 核心功能模块需求

3.1 内容管理模块（核心）

• 文章发布与编辑：

  • 集成富文本编辑器（如 WangEditor / Quill），支持图文混排、代码高亮。

  • 支持设置文章标题、摘要、封面图、分类、标签。

  • 支持文章状态切换：草稿、已发布、下架。

• 文章列表管理：

  • 支持分页展示、按标题模糊搜索、按分类/标签筛选。

  • 支持快捷操作：编辑、删除（二次确认）、上架/下架。

• 分类与标签管理：

  • 分类：支持分类的增删改查，支持排序。

  • 标签：支持标签云管理，支持将同义标签合并。

3.2 互动管理模块

• 评论管理：

  • 展示所有文章下的评论列表（包含评论者、时间、内容）。

  • 支持审核机制：通过、拒绝、删除违规评论。

  • 支持查看嵌套回复（盖楼）。

3.3 媒体与文件管理

• 素材库：

  • 支持图片、附件的上传、重命名、删除。

  • 展示已上传文件的列表，支持按类型筛选。

  • 统计媒体库的存储使用情况。

3.4 系统与用户管理

• 用户管理：

  • 查看注册用户列表，支持封禁/解封账号。

  • 分配用户角色（管理员/编辑/普通用户）。

• 系统配置：

  • 博客基础信息设置（站点名称、SEO 描述、Logo 上传）。

  • 公告/轮播图管理（用于前台首页展示）。

4. 非功能性需求（前端进阶锻炼点）

• 性能要求：

  • 文章列表页加载时间 < 2秒。

  • 针对长文章列表，前端需实现虚拟列表或无限滚动优化。

• 安全要求：

  • 所有敏感接口需携带 Token 进行鉴权。

  • 前端需对富文本内容进行 XSS 过滤（防止恶意脚本注入）。

  • 密码等敏感信息不可明文传输。

• 用户体验：

  • 响应式设计：后台需适配 PC 端和平板端。

  • 全局状态反馈：网络请求需有 Loading 状态，操作成功/失败需有 Toast 提示。

  • 表单防抖：保存文章等高频操作需做防抖处理，防止重复提交。

1. 第一阶段（MVP）：先不要做用户管理和评论。只实现登录鉴权 + 文章的增删改查 + 富文本编辑器。跑通这个闭环，你的基本功就达标了。

2. 第二阶段（进阶）：引入分类/标签管理，实现文章与分类的联动筛选；引入媒体库，实现图片上传与富文本的联动。

3. 第三阶段（高阶）：加入数据看板（用 ECharts 统计文章阅读量趋势），加入WebSocket 实现评论实时提醒

2.node1月

1.基础与核心模块3-5天

环境搭建与运行：掌握 Node.js 运行环境部署，熟练使用node命令运行代码，学会看报错信息。

模块化开发：吃透 CommonJS 规范（module.exports/require），了解 ES Modules 的演进。

包管理：熟练使用npm/yarn，看懂package.json核心配置，掌握依赖管理。

三大核心内置模块：

• fs模块：掌握文件读写（注意处理 Buffer 与字符串的转换，以及fs/promises的 async/await 写法）。

• path模块：掌握跨平台的路径拼接与处理，杜绝硬编码路径。

• http模块：理解 HTTP 协议，能独立手写一个简单的 Web 服务器。

• 练习题	核心知识点	验收标准
  1. 命令行日记本	fs模块、path模块、process.argv	在终端输入node diary.js write "今天学了Node"，内容追加到diary.txt；输入node diary.js read，打印最新一条日记。
  2. 批量重命名工具	fs.readdir、path.extname、异步循环	扫描指定文件夹，将所有.jpg文件重命名为图片_时间戳.jpg，并打印处理结果。
  3. 简易文件服务器	http模块、fs.createReadStream	启动服务后，访问localhost:3000/index.html返回 HTML，访问/logo.png返回图片。禁止使用readFileSync，必须用流（Stream）防止大文件撑爆内存。
  4. 异步地狱逃生	Promise、async/await、错误捕获	写一个函数，依次读取a.txt、b.txt、c.txt的内容并拼接。如果任一文件不存在，捕获错误并返回“文件缺失”，而不是让程序崩溃。

在 Node.js 中处理文件路径时，务必使用path.join(__dirname, '文件名')来拼接绝对路径。千万不要用相对路径（如'./text.txt'），否则当你从不同目录执行node src/index.js时，程序会报ENOENT找不到文件的错误。

2.实战巩固与本地接口服务2-3天

不要急着学数据库，先用 Node.js 解决前端日常开发中的“痛点”。

• Express 框架入门：掌握路由配置、请求与响应处理、中间件（Middleware）的核心原理。

• 本地 Mock 服务：用 Express 搭建一个本地接口服务器，结合fs模块读取本地 JSON 文件模拟数据库返回，解决前端独立开发和接口调试的需求。

• 前后端联调：结合你熟悉的 Vue3/React 项目，请求本地 Node.js 接口，打通数据交互闭环。

• 开发体验优化：熟练使用nodemon实现代码修改后自动重启，掌握cors模块解决跨域问题。

3.进阶全栈与工程化深化5-7天

数据库基础：学习 MySQL 或 MongoDB 的基本操作（CRUD），掌握 ORM 工具（如 Sequelize 或 Prisma）。

TypeScript + Node.js：将 TS 引入 Node.js 后端开发，这是当前全栈开发的主流趋势，能大幅提升代码质量。

前端工程化底层：理解前端构建工具（Webpack/Vite）的底层逻辑，学会编写自定义 Babel 插件、Webpack Loader/Plugin，甚至手写简单的 CLI 脚手架工具。

进阶框架（可选）：了解 Koa 或 NestJS（NestJS 的架构与 Java Spring Boot 极其相似，是未来转 Java 的绝佳跳板）。

4.项目部署与生产环境2-3天

把项目真正“跑”起来，补齐服务端交付能力。

• 进程管理：学习使用 PM2 进行项目的部署、日志管理和进程守护，告别终端一关服务就挂的窘境。

• 容器化部署：了解 Docker 的基本使用，编写 Dockerfile 将 Node.js 项目容器化。

• 工程实践规范：参考Node.js Best Practices清单，学习如何在生产环境中处理错误、隔离配置、保障安全。

常用工具整理

3.Java5月

1.Java 语言核心与基础4 周

目标：掌握 Java 语法，理解面向对象思想，不纠结于底层原理，以“够用”为标准。

• Java 基础语法：环境搭建（JDK 17+）、IDE（IntelliJ IDEA）使用。重点掌握数据类型、控制流、异常处理。

• 面向对象编程（核心）：类与对象、封装、继承、多态、接口与抽象类。这部分是 Java 的灵魂，必须扎实。

• 核心类库：集合框架（List、Map、Set 及其实现类如 ArrayList、HashMap）、String 操作、日期时间 API。

• 进阶特性：泛型、Lambda 表达式与函数式接口、多线程基础（了解 Thread、线程池概念即可）。

• 前端思维映射：

  • TypeScript interface️ Javainterface与class

  • npm/yarn依赖管理 ️Maven与pom.xml

  • console.log️ 日志框架（如 SLF4J）

2.数据库与 Java Web 基础3 周

掌握数据存储与接口开发，打通前后端数据交互的闭环。

• MySQL 数据库：建表规范、基础 SQL 增删改查、多表联查、索引基础与事务概念。

• ORM 框架：重点学习 MyBatis 或 MyBatis-Plus（国内企业主流），理解对象与关系型数据库的映射。

• Web 基础：HTTP 协议、RESTful API 设计规范、Tomcat 容器基础。

• 前端思维映射：

  • Axios 发请求️@RestController接收请求

  • Vue Router️@RequestMapping路由注解

  • LocalStorage️MySQL数据持久化

3.Spring Boot 核心与工程化 4 周

企业级后端开发标准，能够独立开发完整的后台接口

• Spring Boot 核心：IoC（依赖注入）、AOP（面向切面编程）、自动配置原理。

• 接口开发实战：统一响应格式、全局异常处理、参数校验（Validation）、Swagger/OpenAPI 接口文档。

• 安全与认证：JWT 鉴权、Spring Security 或 Sa-Token 权限控制（RBAC 模型）。

• 前端思维映射：

  • Vuex/Pinia 状态管理️Service 层业务逻辑

  • 路由守卫/请求拦截️Filter/Interceptor 过滤器与拦截器

4.主流中间件与微服务入门4 周

补齐企业级高并发、高可用场景下的必备技能。

• Redis 缓存：基本数据类型、缓存穿透/击穿/雪崩解决方案、分布式锁。

• 消息队列（可选）：了解 RabbitMQ 或 Kafka 的基本使用，用于异步解耦。

• 微服务基础：了解 Spring Cloud Alibaba 生态（Nacos 注册中心/配置中心、Gateway 网关、Feign 远程调用）。

• 前端思维映射：

  • 全局缓存/防抖️Redis 缓存

  • 微前端 (qiankun)️Spring Cloud 微服务架构

5.容器化部署与 AI 辅助开发2 周

掌握从开发到上线的全链路，并利用 AI 工具大幅提升学习效率。

• Docker 容器化：Dockerfile 编写、Docker Compose 编排部署。

• CI/CD：GitLab CI 或 GitHub Actions 自动化构建与部署。

• AI 赋能：熟练使用 Claude Code / Codex 辅助生成 Java 样板代码、编写单元测试、排查 Spring 报错、解释复杂源码。

• 前端思维映射：

  • Vercel/Netlify 部署️Docker + Nginx 反向代理部署

6.全栈实战项目（贯穿始终）

将所学技术串联，形成简历上的核心竞争力。

• 项目推荐：企业级任务协作与项目管理系统（结合你之前的需求）。

• 技术栈：Vue3/React + TS + Spring Boot + MyBatis-Plus + MySQL + Redis + Docker。

• 核心亮点：

  • 前后端分离架构，RESTful API 规范。

  • RBAC 权限控制（用户-角色-菜单-按钮）。

  • 复杂业务逻辑（任务状态流转、看板拖拽排序的数据同步）。

  • 性能优化（虚拟列表、Redis 缓存热点数据）。

  • 容器化部署（Docker Compose 一键启动）。