1. 作业拆解与目标定位“第二次作业”这四个字乍一看平淡无奇但凡是认真做过课程项目的人都知道第一次作业是热身第二次作业才是真正开始拉开差距的分水岭。第一次往往是把环境搭好、跑通一个Hello World、熟悉一下工具链属于“只要照着文档做就不会出大错”的环节。而第二次作业一般会要求你做一个完整的、能交互的、有业务逻辑的小系统。换句话说第一次证明你会安装工具第二次才真正检验你会不会用工具干活。我接到的这份“第二次作业”从题目表述来看属于Web开发入门阶段的典型综合练习——要求实现一个功能完整的任务管理系统待办事项管理。这类作业在各大高校的Web开发课、软件工程课、甚至Python/Java实训课里出现频率极高。核心考察点并不是某个高深算法而是你对后端路由、前端交互、数据持久化这三块基础能力的综合运用能力。很多人拿到这种作业的第一反应是“这有什么难的”结果真正动手之后才发现问题一个接一个页面刷新后数据丢失、表单提交后跳转逻辑混乱、点击删除按钮没反应、字典数据写死导致后期维护想骂人。这些坑我在带项目、改作业、帮人debug的过程中见过太多次了。把这篇文章写出来就是要把这类作业背后真正需要掌握的东西讲透——不是帮你交一份作业了事而是让你搞清楚一个勉强能跑的demo和一个经得起推敲的小系统之间到底差在哪里。这个作业适合谁参考如果你是刚学完HTML/CSS/JavaScript基础、正准备迎接第一次完整项目实战的初学者这篇文章可以帮你建立一个完整的项目认知框架。如果你已经写完了作业但觉得自己的代码有点“飘”——能跑但说不清楚为什么这么写——那这篇文章能帮你补上那些缺失的逻辑链条。2. 技术选型与方案权衡2.1 为什么我不建议用“纯前端写死数据”的方案很多第一次做这类作业的同学第一版代码会写成这样把所有任务数据放在一个JavaScript数组里增删改查操作都在浏览器端完成。这个方案在演示的时候确实能跑看起来功能齐全老师验收时也不会说啥。但它的致命问题是——一刷新页面所有数据全部归零。这不是“演示效果差”的问题而是你根本没做对。一个任务管理系统数据存储是最基础的需求如果你把数据放在前端内存里那这个系统的数据生命周期就只有一次页面会话那么长。往深了说这暴露的是对“数据持久化”这个核心概念的理解缺失。所以我建议的最小可行方案是后端用Node.js或者Python写一个简单的HTTP服务提供增删改查接口数据存在本地数据库或者JSON文件里。前端页面通过fetch或axios调用这些接口完成操作。这个方案的架构清晰每一层职责明确一旦你理解了这个结构后面无论换什么技术栈——Java Spring Boot、Python Flask/Django、Node Express——都只是换皮不换骨。2.2 技术栈选择的细节考量具体到这次作业我用的技术栈是后端Node.js Express框架。选它的原因不是因为它比Python“高级”而是因为Express的路由写法非常直观app.get、app.post这样的定义方式对新手来说几乎是零门槛。而且前后端都用JavaScript语言统一不用在两种语法之间来回切换。数据库SQLite better-sqlite3库。选SQLite而不是MySQL是因为这个作业的规模用MySQL纯属杀鸡用牛刀——SQLite是一个文件型数据库不需要额外安装数据库服务启动即用数据存在一个本地.db文件里打包交作业也方便。前端原生HTML/CSS/JavaScript不引入Vue、React这种框架。我知道很多人想用框架写觉得拖拽组件、双向绑定很爽。但我强烈建议这一阶段不要用框架——框架替你做了太多事情你根本不知道自己写的代码在干什么。等这个作业用原生JS写明白了再上框架你会理解每一行代码的意义。这个选型组合的另一个好处是环境依赖极少。Node.js装上之后npm install两个包就能跑起来不会有任何环境兼容问题。对于需要交作业、演示、让别人在自己电脑上跑起来的场景这种“开箱即用”的体验极其重要。3. 核心功能实现与关键细节3.1 需求拆解任务管理系统的边界动手写代码之前先把需求边界划清楚。这也是我在实际开发中反复强调的习惯——先想清楚做什么再想怎么做。这个作业的核心功能就是四件事任务的创建add输入标题、描述、截止日期写入数据库。任务的查询list进入页面时从数据库读取全部任务按状态或时间排序展示。任务的更新update勾选完成、修改标题、调整截止日期。任务的删除delete删除单个任务或者清空全部已完成任务。在这个基础上可以加一些锦上添花的功能比如按状态筛选、统计完成率、任务数量角标。但核心必须先保证否则就是本末倒置。我把这些功能整理成了一张接口表后端的每个路由都对应一个明确的操作接口路径方法参数格式功能说明/api/tasksGET无获取全部任务/api/tasksPOSTJSON {title, description, deadline}新建任务/api/tasks/:idPUTJSON {title, status, description}更新任务信息/api/tasks/:idDELETE无删除指定任务/api/tasks/completed/clearDELETE无清空已完成任务3.2 后端路由与服务端校验的实现服务端的代码结构我分成三层路由层、逻辑层、数据层。路由层只负责接收请求和返回响应逻辑层处理业务规则数据层操作数据库。这个分层看起来很“工程化”但对于一个课程作业来说并不复杂反而能让你的代码显得特别有条理。以新增任务这个功能为例路由层的代码是这样app.post(/api/tasks, (req, res) { const { title, description, deadline } req.body; // 参数校验 if (!title || title.trim() ) { return res.status(400).json({ error: 任务标题不能为空 }); } const newTask taskService.createTask({ title: title.trim(), description: description || , deadline: deadline || null, status: pending, createdAt: new Date().toISOString() }); res.status(201).json(newTask); });这里有个细节很多人会漏掉——参数校验必须放在服务端做不能只依赖前端的表单校验。前端校验只是用户体验层面的优化本质上任何人都可以绕过浏览器直接向后端接口发请求。如果后端不做校验脏数据就会进入数据库以后查数据时各种问题都会冒出来。我在改作业时看到过有人把任务标题存成一段HTML代码页面上直接渲染导致样式错乱——这就是不做服务端校验的后果。再说到数据层我用的是better-sqlite3这个库它是同步API写起来比异步的sqlite3要直观得多const db require(better-sqlite3)(tasks.db); db.exec( CREATE TABLE IF NOT EXISTS tasks ( id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL, description TEXT, deadline TEXT, status TEXT DEFAULT pending, created_at TEXT DEFAULT CURRENT_TIMESTAMP ) );这里要注意一个坑数据库字段名如果用camelCase比如createdAt查询时要用反引号或者双引号包起来否则SQLite会把它当成关键字。我习惯直接用snake_case命名数据库字段然后在返回给前端时再做一次格式转换。虽然只是一个小习惯但它能省掉很多无谓的debug时间。3.3 前端交互表单提交、动态渲染与状态管理前端部分我分成了两块静态页面骨架和动态交互逻辑。页面骨架很简单——一个输入区、一个过滤栏、一个任务列表容器。div classtask-input-area input typetext idtaskTitle placeholder任务标题 input typedate idtaskDeadline button idaddTaskBtn添加任务/button /div div classtask-filter-area button>function renderTasks(filter all) { fetch(/api/tasks) .then(res res.json()) .then(tasks { const filteredTasks tasks.filter(task { if (filter completed) return task.status completed; if (filter pending) return task.status pending; return true; }); const listEl document.getElementById(taskList); listEl.innerHTML ; filteredTasks.forEach(task { const li document.createElement(li); li.className task-item ${task.status completed ? completed : }; li.innerHTML input typecheckbox ${task.status completed ? checked : } onchangetoggleTask(${task.id}) div classtask-content span classtask-title${escapeHtml(task.title)}/span span classtask-date${task.deadline || }/span /div button classdelete-btn onclickdeleteTask(${task.id})删除/button ; listEl.appendChild(li); }); }) .catch(err console.error(加载任务失败:, err)); }注意我在渲染时用了escapeHtml这个函数这是另一个很多人容易忽略的细节。如果用户输入的任务标题里包含了script标签或者HTML特殊字符直接用innerHTML拼接会被浏览器解析执行这既是安全问题也是显示问题。一个小小的转义函数就能解决function escapeHtml(str) { const div document.createElement(div); div.appendChild(document.createTextNode(str)); return div.innerHTML; }4. 实操过程中的典型问题与排查方法4.1 接口联调阶段的经典错误我在写这个作业时遇到的第一类问题是前后端接口连通问题。前端页面能打开但一调用接口就报404或者跨域错误。这里给新手一个建议写完一个后端接口后先用浏览器的地址栏直接访问GET接口或者用Postman/Apifox这样的工具测试一下确认接口本身没问题再去连前端。不要同时写完全部代码再一起调试那样出了问题你根本不知道是前端还是后端的锅。另外一个高频率问题是跨域。如果前端页面是用file://协议直接打开的HTML文件而后端跑在http://localhost:3000那么浏览器的同源策略就会拦截所有跨域请求。解决办法有两个一是让前端页面也由Express静态托管这样前后端同源二是在后端加CORS中间件。// 方案一静态托管前端页面 app.use(express.static(public)); // 方案二启用CORS const cors require(cors); app.use(cors());我推荐方案一。课程作业的场景下前后端同源部署是最简单也最接近生产环境的做法。而且交作业时只需要一个压缩包别人拿到手npm install npm start就能跑体验好得多。4.2 数据持久化的致命陷阱第二类是数据丢失问题。有同学把数据存在一个全局变量里每次重启服务器数据就没了然后来问我“为什么我的数据保存不了”。这个问题的根源在于对“存储”这个概念的理解偏差——你存在内存里的数据进程一结束就被系统回收了这不叫存储叫缓存。使用SQLite后还有一个隐蔽的坑better-sqlite3的API是同步的但Express的请求处理是异步的如果在多个请求之间交叉操作同一个数据库连接偶尔会出现“database is locked”的错误。解决这个问题的方法很简单——每个请求都使用独立的连接或者干脆在应用启动时创建连接后全局复用同时用db.pragma(journal_mode WAL)开启SQLite的WAL模式可以大幅减少锁冲突。4.3 前端交互的隐性问题第三类是渲染相关的问题。常见表现是Ajax请求返回的数据是正确的但页面不刷新或者刷新后数据不一致。这通常是因为你在请求成功回调里没有重新调用渲染函数或者在渲染函数中使用了过期的局部变量。我踩过的另一个小坑是用innerHTML重新渲染后之前绑定在元素上的事件监听全部失效了。这是新手特别容易困惑的问题——你觉得明明绑定过onclick了为什么点两下就没了原因在于innerHTML替换了DOM元素旧元素被销毁了事件绑定也跟着没了。解决方案有两个要么用事件委托将监听器绑定在父容器上要么在渲染函数里用行内onclick属性绑定——虽然不太优雅但对于小项目来说最直接有效。我在上面的代码里使用了行内绑定的方式就是在项目规模不大时图它简单可靠。5. 体验优化与工程化细节5.1 用户体验层面的加分项作业如果只做到“能跑”那确实完成了但如果你想在这份作业上拿高分或者让代码看起来像一个正经的项目有几个体验细节值得花点时间做空状态提示当任务列表为空时页面显示“暂无任务先添加一个吧”而不是一块白屏。这只需要在渲染函数里加一个判断即可。操作反馈点击添加按钮后输入框清空并给出一个短暂的视觉反馈比如按钮文字变成“已添加”然后1秒后恢复。这个用JavaScript的三行代码就能实现但会让整体使用体验舒服很多。加载状态请求进行中时显示一个半透明的遮罩层或者简单的loading文字避免用户因为无反馈而重复点击按钮重复提交数据。这些细节不属于功能需求但它们体现的是你是否具备“为用户考虑”的工程素养。而这一点恰恰是很多课程作业评分标准里隐含的加分项。5.2 前端状态管理的小技巧项目规模小不需要引入状态管理库但依然可以用一个简单的全局对象管理页面状态避免在多个函数之间传参传得晕头转向const state { tasks: [], currentFilter: all, isLoading: false }; function refreshAll() { state.isLoading true; fetch(/api/tasks) .then(res res.json()) .then(tasks { state.tasks tasks; renderTasks(state.currentFilter); updateStats(); }) .finally(() { state.isLoading false; }); }这个state对象把所有可变数据集中管理任何函数需要数据时都从state里拿改数据时也统一改state再触发渲染。这个模式其实就是简化版的“单向数据流”有了这一点认知以后学Vue的data、Redux的store时会非常轻松。5.3 代码结构与可读性我还想提一个很多人忽略的问题代码风格的一致性。变量命名用驼峰就全部驼峰函数名用动词开头就全部动词开头缩进统一两个空格还是四个空格都行但不要混用。这看起来是“强迫症”范畴的事但在团队协作和代码维护中极其重要。我见过太多同学的代码变量名有的是taskName、有的是task_name、有的是tname这种代码三天后自己都看不懂。我习惯把前端代码拆成三个文件index.html放结构、style.css放样式、app.js放逻辑。后端代码拆成server.js入口、routes.js放路由定义、database.js放数据库操作。这个结构虽然简单但已经是一个小型的分层架构了。老师看到这样的代码结构会不自觉地认为你的工程素养比同课程的同学高一个档次。6. 从第二次作业到真实项目的思考写完了这次作业我想说点题外话。很多人把课程作业当成一种“应付差事”觉得只要运行通过、演示没问题、老师不扣分就万事大吉。但如果你真正想把编程学好每一次作业都应该被当成一次微型的项目实战。第二次作业这个阶段恰好是最适合“拔高”自己的黄金时期——基础语法已经学了工具链已经通了项目规模又小到不会让你淹没在复杂性里。在这样一个阶段养成好习惯比到了大项目里再回头看要轻松得多。我在写这个作业的过程中有几点个人体会特别深刻第一不要追求一步到位。先把最核心的增删改查跑通再一个一个加辅助功能。很多人喜欢一口气把所有功能写完再调试结果问题一多就不知道从哪查起。小步迭代、频繁运行、随时验证这份作业顶多两三个小时就能完成主体功能。第二多读自己的代码。写完一部分代码从头到尾通读一遍问自己“这个变量为什么叫这个名字”“这个函数为什么放在这里”。能答上来的说明你真的懂了答不上来的趁现在赶紧搞清楚别让它成为以后的隐患。第三把作业当成作品来做。哪怕只是一次作业给它加一个好看的样式、写一个清晰的README、做一个简单的使用说明这些额外的付出会潜移默化地塑造你对“交付物”的标准。这个标准一旦建立你以后的每一个项目都会不一样。最后分享一个小技巧写代码的时候顺手把API接口的测试记录下来。比如每写一个接口就在项目的README.md里加一行接口说明和curl示例。事后你会发现这不仅是交作业时的文档素材更是你复习和排障时最宝贵的第一手资料。