❌

阅读视图

发现新文章，点击刷新页面。

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

✇掘金 前端
温暖前端

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

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

项目截图

image.png

image.png

image.png

一、后端技术栈与实现

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/        // 路由配置

3. 主要知识点

a) 组件化开发

  • 复用性强，易于维护，如 TodoItem.vue、TodoList.vue。
  • 父子组件通信（props、emit）、兄弟组件通信（状态管理）。

b) 状态管理

  • store/todo.ts、store/user.ts 管理全局状态，避免多层组件传参。
  • 响应式数据驱动视图更新。

c) 路由管理

  • router/index.ts 配置页面路由，实现页面跳转与权限控制。

d) API 封装

  • api/request.ts 封装 axios/fetch，统一处理请求和响应。
  • api/todo.ts、api/user.ts 封装具体业务接口，便于维护。

e) 样式与动画

  • assets/animate.css 提供动画效果，提升用户体验。

三、项目运行以及MongoDB启动指南

项目运行

  1. 安装 Node.js、MongoDB
  2. 分别进入 backend、frontend 目录执行 npm install
  3. 启动 MongoDB 服务
  4. 启动后端：npm run dev
  5. 启动前端：npm run dev
  6. 访问前端页面（如 http://localhost:5173）

MongoDB启动指南

  • 访问 MongoDB 官方下载页面
  • 选择 Windows 平台，版本建议选择最新稳定版（如 6.0）
  • 下载 MSI 安装程序（64 位）

在mongodb官网安装mongodb后，启动命令行输入mongod，仍旧显示 image.png

打开电脑的高级系统设置，配置mongodb的环境变量，将mongodb的bin目录添加到环境变量中

image.pngimage.png

启动mongodb服务的时候提示

image.png

可以通过在mongod/bin目录下cmd，输入mongod --dbpath D:\app\MongoDB\data启动数据库服务

数据库启动后，可以通过mongodb compass进行数据库连接

image.png

数据库启动并连接成功后，再运行服务端代码，服务端代码运行端如下图所示，则代表服务端代码成功运行

image.png

❌