最近在帮学弟学妹们看毕业设计，发现一个挺普遍的现象：很多同学的项目功能是有的，但代码结构一团乱麻，没有路由，没有错误处理，所有逻辑都堆在一个文件里。这样的项目虽然“能跑”，但很难体现出作为计算机专业学生应有的工程化思维和技术深度。今天，我们就以最经典的Todo 应用为例，聊聊如何从零开始，做一个结构清晰、代码规范、可部署的 Web 前端毕业设计，让它不再“简单”。
1. 为什么你的毕业设计看起来“不专业”？
很多同学上手就用最原始的 HTML/CSS/JS 三件套，把所有代码写在一个index.html里。初期确实快，但随着功能增加，问题就来了：
- 代码高度耦合：修改一个地方的样式，可能影响整个页面；动一个函数，整个应用都可能崩溃。
- 毫无结构可言：成百上千行代码挤在一起，没有模块划分，自己一周后都看不懂。
- 缺乏状态管理：数据流混乱，一个操作后，界面状态难以预测和追踪。
- 无法应对复杂交互：一旦需要添加路由（比如“已完成”和“未完成”列表切换）、异步数据请求，代码复杂度会急剧上升，难以维护。
所以，我们的目标不是做一个“能跑”的 Todo，而是做一个体现现代前端工程实践的 Todo。
2. 技术选型：为什么是 React + Vite + TypeScript？
面对琳琅满目的框架和工具，毕业设计选型的原则是：主流、高效、能展示技术栈广度。
- React：社区最庞大，生态最丰富，企业使用率极高。学习 React 能让你理解组件化、声明式 UI 和状态驱动的核心理念，这是现代前端开发的基石。
- Vite：相比传统的 Webpack，Vite 的启动速度和热更新快得惊人，开发体验极佳。它配置简单，能让你更专注于代码本身，而不是折腾构建工具。
- TypeScript：这是让你的项目脱颖而出的关键。TS 提供了静态类型检查，能在编码阶段就发现潜在错误，极大提升了代码的健壮性和可维护性。在简历上写上“熟练使用 TypeScript”是个很大的加分项。
相比之下，纯原生开发在工程化、团队协作和项目可扩展性上劣势明显。我们这个组合，既能高效完成开发，又能充分展示你对现代前端工具链的理解。
3. 核心实现：拆解一个规范的 Todo 应用
我们采用“自顶向下，逐步细化”的思路来构建应用。
3.1 项目初始化与结构设计
首先，使用 Vite 快速搭建一个 TypeScript 版本的 React 项目：
npm create vite@latest my-todo-app -- --template react-ts cd my-todo-app npm install建立清晰的项目目录结构，这是良好工程习惯的开始：
src/ ├── components/ # 可复用UI组件 │ ├── TodoItem.tsx │ ├── TodoInput.tsx │ └── TodoFilter.tsx ├── hooks/ # 自定义Hook，封装业务逻辑 │ └── useTodos.ts ├── types/ # TypeScript类型定义 │ └── todo.ts ├── utils/ # 工具函数 │ └── storage.ts ├── App.tsx └── main.tsx3.2 状态逻辑封装：自定义 HookuseTodos
这是整个应用的大脑。我们将所有与 Todo 相关的状态（列表、过滤条件）和操作（增、删、改、查、切换状态）都封装在一个自定义 Hook 里。这实现了逻辑与 UI 的分离，使得useTodos可以在任何组件中复用，且易于测试。
// src/hooks/useTodos.ts import { useState, useEffect } from 'react'; import { Todo, FilterType } from '../types/todo'; import { loadTodos, saveTodos } from '../utils/storage'; export const useTodos = () => { // 从本地存储初始化数据 const [todos, setTodos] = useState<Todo[]>(() => loadTodos()); const [filter, setFilter] = useState<FilterType>('all'); // 当todos变化时，自动持久化到本地存储 useEffect(() => { saveTodos(todos); }, [todos]); // 添加Todo const addTodo = (text: string) => { if (!text.trim()) return; const newTodo: Todo = { id: Date.now(), // 简单使用时间戳作为ID text: text.trim(), completed: false, createdAt: new Date().toISOString(), }; setTodos((prev) => [newTodo, ...prev]); }; // 切换Todo完成状态 const toggleTodo = (id: number) => { setTodos((prev) => prev.map((todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo ) ); }; // 删除Todo const deleteTodo = (id: number) => { setTodos((prev) => prev.filter((todo) => todo.id !== id)); }; // 根据过滤条件获取当前显示的Todos const getFilteredTodos = () => { switch (filter) { case 'active': return todos.filter((todo) => !todo.completed); case 'completed': return todos.filter((todo) => todo.completed); default: return todos; } }; // 计算未完成项数量 const activeTodoCount = todos.filter((t) => !t.completed).length; return { todos: getFilteredTodos(), activeTodoCount, filter, setFilter, addTodo, toggleTodo, deleteTodo, }; };3.3 组件拆分与实现
有了状态逻辑，UI 组件就变得非常“薄”，它们只负责渲染和触发动作。
TodoInput：一个受控组件，负责接收用户输入。
// src/components/TodoInput.tsx import { useState, KeyboardEvent } from 'react'; interface TodoInputProps { onAdd: (text: string) => void; } export const TodoInput = ({ onAdd }: TodoInputProps) => { const [inputText, setInputText] = useState(''); const handleSubmit = () => { onAdd(inputText); setInputText(''); // 清空输入框 }; const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => { if (e.key === 'Enter') { handleSubmit(); } }; return ( <div className="todo-input"> <input type="text" placeholder="What needs to be done?" value={inputText} onChange={(e) => setInputText(e.target.value)} onKeyDown={handleKeyDown} /> <button onClick={handleSubmit}>Add</button> </div> ); };TodoItem：展示单个 Todo 项，包含完成状态切换和删除按钮。
// src/components/TodoItem.tsx import { Todo } from '../types/todo'; interface TodoItemProps { todo: Todo; onToggle: (id: number) => void; onDelete: (id: number) => void; } export const TodoItem = ({ todo, onToggle, onDelete }: TodoItemProps) => { return ( <div className={`todo-item ${todo.completed ? 'completed' : ''}`}> <input type="checkbox" checked={todo.completed} onChange={() => onToggle(todo.id)} /> <span className="todo-text">{todo.text}</span> <button className="delete-btn" onClick={() => onDelete(todo.id)}> × </button> </div> ); };TodoFilter和App组件：将它们组合起来，形成完整的应用视图。
4. 安全性与性能考量：容易被忽略的细节
一个专业的项目，必须考虑这些非功能性需求。
- XSS 防护：我们的应用从
input接收用户输入，并直接渲染到页面上。虽然 React 默认会对渲染的内容进行转义，防止大部分 XSS 攻击，但这是一个很好的切入点。你可以在报告里提到：“本应用利用 React 的内置转义机制防范 XSS，若未来接入后端 API，将对所有用户输入进行验证和清洗。” - 避免内存泄漏：注意在
useEffect中清理副作用（如事件监听器、定时器）。虽然我们这个简单应用没有，但这是一个重要的编程习惯。 - 首屏加载优化：Vite 已经帮我们做了代码分割。我们可以进一步考虑：
- 使用
React.lazy和Suspense对非核心组件进行懒加载。 - 确保图片等静态资源经过压缩。
- 在
index.html中合理设置meta标签和预加载关键资源。
- 使用
5. 生产环境避坑指南
从开发到上线，还有几个坑要避开。
.env文件切勿提交：如果未来接入真实的 API，API 密钥、数据库连接字符串等敏感信息必须放在.env文件中，并且务必在.gitignore里忽略它。提交到代码仓库是严重的安全事故。- CORS 调试技巧：开发时，前端（
localhost:5173）请求后端（localhost:3000）会遇到跨域问题。后端需要正确配置 CORS 头。在前端，可以使用 Vite 的代理功能来绕过此问题，在vite.config.ts中配置：
export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, }, });- 移动端适配要点：在
index.html的head中加入视口标签<meta name="viewport" content="width=device-width, initial-scale=1.0">。CSS 使用相对单位（rem,%,vw/vh）和 Flexbox/Grid 布局，确保在不同屏幕尺寸下都能良好显示。
6. 一键部署：让项目真正上线
使用 Vercel 或 Netlify 等平台，部署变得极其简单。将代码推送到 GitHub 后，只需在 Vercel 上导入你的仓库，它会自动识别为 Vite + React 项目，完成构建和部署。几分钟后，你就获得了一个可以分享给导师的线上访问链接。这个过程本身，就是 CI/CD（持续集成/持续部署）的初体验。
总结与扩展
至此，一个具备工程化雏形的 Todo 应用就完成了。它包含了组件化设计、状态逻辑封装、TypeScript 类型安全、本地数据持久化和基本的项目结构。
如何让它成为一份优秀的毕业设计？
功能扩展：不要止步于此。尝试添加以下功能，展示你的学习能力：
- 用户登录：接入一个 Mock API 或 Firebase Auth，实现简单的注册登录。
- 数据同步：将本地存储替换为调用 RESTful API，与一个简单的后端（如 Node.js + Express 或 Python Flask）交互。
- 数据统计：增加一个面板，用图表（如 Recharts）展示任务完成趋势、每日新增等。
- 路由：使用 React Router，增加“关于”、“设置”等页面。
体现工程素养：在项目文档和答辩中，重点阐述你的设计决策：
- 为什么选择这样的项目结构？
- 自定义 Hook 带来了什么好处？（逻辑复用、可测试性）
- TypeScript 在实际开发中帮你避免了哪些潜在错误？
- 你考虑了哪些安全性和性能问题？
毕业设计不仅是功能的堆砌，更是你工程思维、解决问题能力和技术选型眼光的集中展示。从这个“简单”的 Todo 应用出发，深入思考每一个环节，你一定能做出让导师眼前一亮、为简历增色的优秀作品。赶紧动手试试吧！
