入坑node.js全面指南（三）

最新推荐文章于 2026-08-18 16:00:00 发布

原创最新推荐文章于 2026-08-18 16:00:00 发布 · 837 阅读

本内容遵循CC 4.0 BY-SA版权协议

前两篇文章详细讲解了node.js的知识点，本篇文章来实现一个经典的全栈待办事项（Todo List）应用，采用前后端分离架构。后端基于 Node.js + Express + TypeScript，前端基于 Vue 3 + TypeScript，数据持久化采用 MongoDB。项目结构清晰，适合学习和实践全栈开发。

项目源码地址链接：
todolist-express: 一个基于 Vue3 + TypeScript + Node.js + Express + MongoDB 的全栈 ToDoList 项目。

项目截图

在这里插入图片描述

一、后端技术栈与实现

1. 技术选型

Node.js：高性能的 JavaScript 运行环境，适合 I/O 密集型应用。
Express：简洁灵活的 Web 框架，便于快速搭建 RESTful API。
TypeScript：为 JavaScript 提供类型系统，提升代码可维护性和可读性。
Mongoose：MongoDB 的对象建模工具，简化数据库操作。

2. 目录结构

backend/
  ├── src/
  │   ├── app.ts         // Express 应用主入口
  │   ├── index.ts       // 启动服务
  │   ├── models/        // Mongoose 数据模型
  │   └── routes/        // 路由模块

3. 主要知识点

a) TypeScript 在后端的应用

类型定义提升了开发效率，减少了运行时错误。
接口（interface）用于定义数据结构，如 Todo、User。

import mongoose, { Schema, Document } from 'mongoose';

export interface ITodo extends Document {
  content: string;
  status: 'active' | 'completed' | 'deleted';
  priority: number;
  tags: string[];
  category: string;
  user: mongoose.Types.ObjectId;
  createdAt: Date;
  completedAt?: Date;
}

b) 路由与中间件

路由模块化，routes/auth.ts 处理认证相关接口，routes/todo.ts 处理待办事项相关接口。
使用中间件进行请求体解析、鉴权等操作。

// 获取所有 ToDo
router.get('/', auth, async (req: AuthRequest, res: Response) => {
  const todos = await Todo.find({ user: req.user.id, status: { $ne: 'deleted' } }).sort({ createdAt: -1 });
  res.json(todos);
});

c) Mongoose 数据建模

models/Todo.ts、models/User.ts 定义了数据结构和约束。
通过 Schema 约束字段类型、必填项、默认值等。

d) 用户认证

通常采用 JWT（JSON Web Token）进行用户身份验证（可在 auth.ts 路由中实现）。
注意密码加密存储（如 bcrypt），避免明文存储。

// 鉴权中间件
function auth(req: AuthRequest, res: Response, next: NextFunction) {
  const token = req.headers['authorization']?.split(' ')[1];
  if (!token) return res.status(401).json({ msg: '未登录' });
  try {
    const decoded = jwt.verify(token, JWT_SECRET);
    req.user = decoded;
    next();
  } catch {
    res.status(401).json({ msg: '无效token' });
  }
}

e) 错误处理

统一的错误处理机制，保证接口返回一致的错误格式，便于前端处理。
Vue 3：响应式、组件化的前端框架。
TypeScript：提升代码可维护性。
Vite：新一代前端构建工具，极快的热更新体验。
Pinia/Vuex：状态管理。

二、前端技术栈与实现

2. 目录结构

frontend/
  ├── src/
  │   ├── api/           // 封装后端请求
  │   ├── components/    // 复用组件
  │   ├── store/         // 状态管理
  │   ├── views/         // 页面视图
  │   └── router/        // 路由配置