1.前端基础1月力扣面试题vue3vite不使用脚手架从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 提示。表单防抖保存文章等高频操作需做防抖处理防止重复提交。第一阶段MVP先不要做用户管理和评论。只实现登录鉴权 文章的增删改查 富文本编辑器。跑通这个闭环你的基本功就达标了。第二阶段进阶引入分类/标签管理实现文章与分类的联动筛选引入媒体库实现图片上传与富文本的联动。第三阶段高阶加入数据看板用 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 或 NestJSNestJS 的架构与 Java Spring Boot 极其相似是未来转 Java 的绝佳跳板。4.项目部署与生产环境2-3天把项目真正“跑”起来补齐服务端交付能力。进程管理学习使用 PM2 进行项目的部署、日志管理和进程守护告别终端一关服务就挂的窘境。容器化部署了解 Docker 的基本使用编写 Dockerfile 将 Node.js 项目容器化。工程实践规范参考Node.js Best Practices清单学习如何在生产环境中处理错误、隔离配置、保障安全。常用工具整理Snipaste截图后可将图片悬浮置顶在任何窗口上方macfnf0后截图截图后选择【贴到屏幕上】悬浮在窗口上再次双击截图或esc可以去除截图scrcpyandroid投屏brew install scrcpy安装数据线链接手机和电脑打开手机开发者模式开发人员选项开启USB调试传输文件允许终端执行scrcpy命令开始投屏VsCode常用插件:gitLensBracket Pair Colorizer 括号高亮Auto Close Tag——自动闭合尾部的标签Chinese SimplifiedLanguage Pack for Visual Studio Code——汉化VsCodeCode Spell Checker——代码拼写检查器Path Intellisense 为文件路径提供自动补全功能Prettier - Code formatter 代码格式化工具CodeGeeX基于人工智能驱动的快速编写代码的免费代码生成工具常用快捷键:同时操作多光标:AltWindows/Linux/OptionMac将代码向下复制一行:AltShift↓ / OptionShift↓Mac删除整行:CtrlShiftK / CmdShiftK搜索文件:Ctrl PWindows/Linux/Cmd PMac在vscode中输入lorem60回车会输入60个单词组成的一段文字在终端中展示分支名字sh -c $(curl -fsSL https://gitee.com/shmhlsy/oh-my-zsh-install.sh/raw/master/install.sh)3.Java5月1.Java 语言核心与基础4 周目标掌握 Java 语法理解面向对象思想不纠结于底层原理以“够用”为标准。Java 基础语法环境搭建JDK 17、IDEIntelliJ IDEA使用。重点掌握数据类型、控制流、异常处理。面向对象编程核心类与对象、封装、继承、多态、接口与抽象类。这部分是 Java 的灵魂必须扎实。核心类库集合框架List、Map、Set 及其实现类如 ArrayList、HashMap、String 操作、日期时间 API。进阶特性泛型、Lambda 表达式与函数式接口、多线程基础了解 Thread、线程池概念即可。前端思维映射TypeScript interface️ Javainterface与classnpm/yarn依赖管理 ️Maven与pom.xmlconsole.log️ 日志框架如 SLF4J2.数据库与 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/CDGitLab 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 一键启动。 
长河君 · 2026/8/10 14:29:05 · 阅读 1.2k 前端学习规划
1.前端基础1月力扣面试题vue3vite不使用脚手架从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 提示。表单防抖保存文章等高频操作需做防抖处理防止重复提交。第一阶段MVP先不要做用户管理和评论。只实现登录鉴权 文章的增删改查 富文本编辑器。跑通这个闭环你的基本功就达标了。第二阶段进阶引入分类/标签管理实现文章与分类的联动筛选引入媒体库实现图片上传与富文本的联动。第三阶段高阶加入数据看板用 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 或 NestJSNestJS 的架构与 Java Spring Boot 极其相似是未来转 Java 的绝佳跳板。4.项目部署与生产环境2-3天把项目真正“跑”起来补齐服务端交付能力。进程管理学习使用 PM2 进行项目的部署、日志管理和进程守护告别终端一关服务就挂的窘境。容器化部署了解 Docker 的基本使用编写 Dockerfile 将 Node.js 项目容器化。工程实践规范参考Node.js Best Practices清单学习如何在生产环境中处理错误、隔离配置、保障安全。常用工具整理Snipaste截图后可将图片悬浮置顶在任何窗口上方macfnf0后截图截图后选择【贴到屏幕上】悬浮在窗口上再次双击截图或esc可以去除截图scrcpyandroid投屏brew install scrcpy安装数据线链接手机和电脑打开手机开发者模式开发人员选项开启USB调试传输文件允许终端执行scrcpy命令开始投屏VsCode常用插件:gitLensBracket Pair Colorizer 括号高亮Auto Close Tag——自动闭合尾部的标签Chinese SimplifiedLanguage Pack for Visual Studio Code——汉化VsCodeCode Spell Checker——代码拼写检查器Path Intellisense 为文件路径提供自动补全功能Prettier - Code formatter 代码格式化工具CodeGeeX基于人工智能驱动的快速编写代码的免费代码生成工具常用快捷键:同时操作多光标:AltWindows/Linux/OptionMac将代码向下复制一行:AltShift↓ / OptionShift↓Mac删除整行:CtrlShiftK / CmdShiftK搜索文件:Ctrl PWindows/Linux/Cmd PMac在vscode中输入lorem60回车会输入60个单词组成的一段文字在终端中展示分支名字sh -c $(curl -fsSL https://gitee.com/shmhlsy/oh-my-zsh-install.sh/raw/master/install.sh)3.Java5月1.Java 语言核心与基础4 周目标掌握 Java 语法理解面向对象思想不纠结于底层原理以“够用”为标准。Java 基础语法环境搭建JDK 17、IDEIntelliJ IDEA使用。重点掌握数据类型、控制流、异常处理。面向对象编程核心类与对象、封装、继承、多态、接口与抽象类。这部分是 Java 的灵魂必须扎实。核心类库集合框架List、Map、Set 及其实现类如 ArrayList、HashMap、String 操作、日期时间 API。进阶特性泛型、Lambda 表达式与函数式接口、多线程基础了解 Thread、线程池概念即可。前端思维映射TypeScript interface️ Javainterface与classnpm/yarn依赖管理 ️Maven与pom.xmlconsole.log️ 日志框架如 SLF4J2.数据库与 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/CDGitLab 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 一键启动。