Roy's Cafe

Node.js_Kimi

5分钟阅读

好的！接下来，我将详细说明如何从头到尾创建一个使用 SQLite 的 Todo List 项目，包括项目初始化、代码编写、VSCode 配置以及运行调试等步骤。这个项目将帮助你熟悉 TypeScript、Node.js、Express 和 SQLite 的开发流程。

1. 初始化项目

1.1 创建项目文件夹

在终端中运行以下命令，创建一个新的项目文件夹并进入该文件夹：

mkdir todo-app
cd todo-app

1.2 初始化 npm 项目

运行以下命令，初始化 npm 项目：

npm init -y

1.3 安装依赖

安装项目所需的依赖包：

npm install express sqlite3
npm install --save-dev typescript ts-node @types/node @types/express @types/sqlite3

1.4 创建 TypeScript 配置文件

运行以下命令，生成 tsconfig.json 文件：

npx tsc --init

编辑生成的 tsconfig.json 文件，确保包含以下配置：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

2. 创建项目文件结构

在项目根目录下创建以下文件夹和文件：

todo-app/
├── src/
│   ├── index.ts
│   ├── models/
│   │   └── Todo.ts
│   └── routes/
│       └── todos.ts
├── package.json
├── tsconfig.json
└── .vscode/
    └── launch.json

3. 编写代码

3.1 定义 Todo 模型

在 src/models/Todo.ts 文件中，定义一个简单的 Todo 模型，并实现 SQLite 数据库操作：

// src/models/Todo.ts
import sqlite3 from 'sqlite3';
import { open } from 'sqlite';
 
class TodoModel {
  private db: sqlite3.Database;
 
  constructor() {
    this.initDatabase();
  }
 
  private async initDatabase() {
    this.db = await open({
      filename: './database.sqlite',
      driver: sqlite3.Database
    });
 
    await this.db.run(`
      CREATE TABLE IF NOT EXISTS todos (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        text TEXT NOT NULL,
        completed BOOLEAN DEFAULT 0
      )
    `);
  }
 
  async getAllTodos() {
    return await this.db.all('SELECT * FROM todos');
  }
 
  async addTodo(text: string) {
    const info = await this.db.run('INSERT INTO todos (text) VALUES (?)', [text]);
    return { id: info.lastID, text, completed: false };
  }
 
  async deleteTodo(id: number) {
    await this.db.run('DELETE FROM todos WHERE id = ?', [id]);
  }
}
 
export default new TodoModel();

3.2 创建路由

在 src/routes/todos.ts 文件中，定义 Todo 的路由：

// src/routes/todos.ts
import { Router } from 'express';
import TodoModel from '../models/Todo';
 
const router = Router();
 
// 获取所有待办事项
router.get('/', async (req, res) => {
  try {
    const todos = await TodoModel.getAllTodos();
    res.json(todos);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});
 
// 添加新的待办事项
router.post('/', async (req, res) => {
  const { text } = req.body;
  try {
    const newTodo = await TodoModel.addTodo(text);
    res.status(201).json(newTodo);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});
 
// 删除待办事项
router.delete('/:id', async (req, res) => {
  try {
    await TodoModel.deleteTodo(parseInt(req.params.id, 10));
    res.json({ message: 'Todo deleted' });
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});
 
export default router;

3.3 创建主入口文件

在 src/index.ts 文件中，设置 Express 服务器并加载路由：

// src/index.ts
import * as express from 'express';
import todoRoutes from './routes/todos';
 
const app = express();
const port = 3000;
 
// 中间件
app.use(express.json());
app.use('/todos', todoRoutes);
 
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

4. 配置 VSCode

4.1 配置 launch.json

在 .vscode/launch.json 文件中，配置调试环境：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

4.2 安装推荐的扩展

在 VSCode 中，安装以下扩展：

  • TypeScript and JavaScript Language Features（默认自带）
  • Prettier - Code formatter
  • ESLint
  • TypeScript Hero

5. 编译和运行项目

5.1 编译项目

在终端中运行以下命令，将 TypeScript 文件编译为 JavaScript 文件：

npx tsc

5.2 启动服务器

运行以下命令启动 Node.js 服务器：

node dist/index.js

6. 测试 API

你可以使用 Postman 或其他工具测试以下 API：

  • 获取所有待办事项：
    • 方法：GET
    • URL：http://localhost:3000/todos
  • 添加新的待办事项：
    • 方法：POST
    • URL：http://localhost:3000/todos
    • Body（JSON）：{ "text": "Learn TypeScript" }
  • 删除待办事项：
    • 方法：DELETE
    • URL：http://localhost:3000/todos/:id

7. 调试项目

在 VSCode 中，你可以通过以下步骤进行调试：

  1. 打开 src/index.ts 文件，设置断点。
  2. 点击 VSCode 左侧的“调试”图标，选择“Launch Program”。
  3. 按下 F5 或点击“开始调试”按钮。

8. 总结

通过这个项目，你将学习到以下内容：

  • 如何使用 TypeScript 编写 Node.js 代码。
  • 如何使用 Express 框架创建 RESTful API。
  • 如何使用 SQLite 数据库进行数据存储和操作。
  • 如何在 VSCode 中配置和调试 TypeScript 项目。

这个项目是一个很好的起点，你可以在此基础上添加更多功能，例如用户认证、分页、搜索等。希望这个项目能帮助你更好地掌握 TypeScript 和 Node.js 的开发！

关系图谱

反向链接