Node.js增删改查列表的功能实现指南

2023-10-06 13:49:57

掌握Node.js构建一个简单的待办事项应用程序：从入门到实践

在这个数字时代，待办事项应用程序已经成为我们生活中不可或缺的一部分，帮助我们保持条理和高效。如果你是一个初学者，想要学习如何使用Node.js构建自己的待办事项应用程序，那么这份循序渐进的指南将为你提供所需的所有信息。

1. Node.js入坑指南

首先，让我们从Node.js开始。它是JavaScript的运行时环境，允许我们编写服务器端应用程序。访问Node.js官方网站下载并安装它。完成后，在终端中运行以下命令检查安装是否成功：

node -v

如果你看到一个类似“v18.12.1”的版本号，就说明你已经成功安装了Node.js。

2. 安装所需依赖项

为了使用Express.js和MongoDB，我们需要安装它们的依赖项。在终端中运行以下命令：

npm install express mongodb

这将安装Express.js和MongoDB的最新稳定版本。

3. 项目结构

现在，让我们创建一个项目结构来组织我们的代码。创建一个名为“todo-app”的文件夹，并在其中创建以下文件：

app.js：我们的主应用程序文件
models/todo.js：数据模型文件
routes/todos.js：路由文件
views/index.ejs：视图文件

4. 设置Express.js

Express.js是一个用于构建Web应用程序的流行Node.js框架。在app.js文件中，我们需要设置Express.js：

const express = require('express');
const app = express();

app.set('view engine', 'ejs');
app.set('views', './views');

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

这将Express.js设置为我们的视图引擎，并设置视图文件所在的目录。我们还启用了JSON解析和URL编码解析中间件。

5. 连接MongoDB

MongoDB是一个流行的文档数据库，用于存储和检索数据。在app.js文件中，我们需要连接到MongoDB：

const MongoClient = require('mongodb').MongoClient;
const mongoURL = 'mongodb://localhost:27017';

MongoClient.connect(mongoURL, { useNewUrlParser: true, useUnifiedTopology: true }, (err, client) => {
  if (err) {
    console.error('Error connecting to MongoDB:', err);
    return;
  }

  db = client.db('todo-app');
  console.log('Connected to MongoDB');
});

这将连接到名为“todo-app”的MongoDB数据库。

6. 定义数据模型

在models/todo.js文件中，我们需要定义我们的数据模型。数据模型用于在我们的应用程序中表示数据：

const mongoose = require('mongoose');

const todoSchema = new mongoose.Schema({
  title: String,
  description: String,
  completed: Boolean
});

const Todo = mongoose.model('Todo', todoSchema);

module.exports = Todo;

这将创建一个名为“Todo”的模型，它具有“标题”、“”和“已完成”属性。

7. 定义路由

在routes/todos.js文件中，我们需要定义我们的路由。路由用于处理客户端请求：

const express = require('express');
const router = express.Router();
const Todo = require('../models/todo');

router.get('/', async (req, res) => {
  const todos = await Todo.find();
  res.render('index', { todos });
});

router.post('/', async (req, res) => {
  const todo = new Todo(req.body);
  await todo.save();
  res.redirect('/');
});

router.put('/:id', async (req, res) => {
  const todo = await Todo.findByIdAndUpdate(req.params.id, req.body);
  res.redirect('/');
});

router.delete('/:id', async (req, res) => {
  await Todo.findByIdAndDelete(req.params.id);
  res.redirect('/');
});

module.exports = router;

这将定义四个路由：

GET /：获取所有待办事项。
POST /：创建一个新的待办事项。
PUT /:id：更新一个待办事项。
DELETE /:id：删除一个待办事项。

8. 定义视图

在views/index.ejs文件中，我们需要定义我们的视图。视图用于在客户端显示数据：

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <h1>Todo App</h1>

    <ul>
      <% todos.forEach((todo) => { %>
        <li>
          <%= todo.title %>
          <a href="/todos/<%= todo._id %>/edit">Edit</a>
          <form action="/todos/<%= todo._id %>" method="POST">
            <input type="hidden" name="_method" value="DELETE">
            <button type="submit">Delete</button>
          </form>
        </li>
      <% }); %>
    </ul>

    <form action="/todos" method="POST">
      <input type="text" name="title" placeholder="Title">
      <input type="text" name="description" placeholder="Description">
      <button type="submit">Create</button>
    </form>
  </body>
</html>