构建一个前后端分离的Todo List，使用Node.js作为后端

构建一个前后端分离的Todo List，使用Node.js作为后端

在现代Web开发中，后端分离的架构已经成为一种流行的开发模式。这种模式不仅提高了开发展示组件（前端）和业务逻辑（后端）的灵活性，还易于维护和扩展。在本文中，我们将使用Node.js作为后端，构建一个简单的Todo List应用，其中前端使用Vue.js框架以及setup语法糖。

目录

1. 项目结构
2. 创建Node.js后端
3. 创建Vue.js前端
4. 实现功能
5. 完成应用
6. 总结

1. 项目结构

首先，让我们明确整个项目的结构。项目大致会分为以下几个部分：

todo-app/
├── backend/
│   ├── server.js
│   └── routes/
│       └── todo.js
└── frontend/
    ├── src    │   ├── components/
    │   │   └── TodoList.vue
    │   └── App.vue
    └── main.js

2. 创建Node.js后端

首先安装Express框架，并创建基本的后端结构。

后端安装

在backend目录下创建一个新的Node.js项目，并安装必要的依赖：

mkdir backend
cd backend
npm init -y
npm install express cors body-parser

创建服务器

接下来，在backend目录下创建一个server.js文件，设置基本的Express服务器和路由：

// backend/server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const todoRoutes = require('./routes/todo');

const app = express();
const port = 3000;

app.use(cors());
app.use(bodyParser.json());
app.use('/api/todos', todoRoutes);

app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

创建Todo路由

在backend/routes中创建todo.js文件以处理Todo的相关操作。

// backend/routes/todo.js
const express = require('express');
const router = express.Router();

let todos = [];

// 获取所有Todo
router.get('/', (req, res) => {
    res.json(todos);
});

// 添加Todo
router.post('/', (req, res) => {
    const { text } = req.body;
    const newTodo = { id: todos.length + 1, text, completed: false };
    todos.push(newTodo);
    res.status(201).json(newTodo);
});

// 删除Todo
router.delete('/:id', (req, res) => {
    const { id } = req.params;
    todos = todos.filter(todo => todo.id != id);
    res.status(204).send();
});

module.exports = router;

3. 创建Vue.js前端

接下来创建前端部分，使用Vue CLI创建一个新的Vue项目。

前端安装

在项目根目录下运行以下命令：

npm install -g @vue/cli
vue create frontend

（选择默认配置）

创建TodoList组件

在frontend/src/components目录下创建TodoList.vue文件：

<template  <div>
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo"/>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }} <button @click="removeTodo(todo.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const todos = ref([]);
const newTodo = ref('');

const fetchTodos = async () => {
  const response = await fetch('http://localhost:3000/api/todos  todos.value = await response.json();
};

const addTodo = async () => {
  if (newTodo.value.trim()) {
    const response = await fetch('http://localhost:3000/api/todos', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ text: newTodo.value })
    });
    const todo = await response.json();
    todos.value.push(todo);
    newTodo.value = '';
  }
};

const removeTodo = async (id) => {
  await fetch(`http://localhost:3000/api/todos/${id}`, {
    method: 'DELETE'
  });
  todos.value = todos.value.filter(todo => todo.id != id);
};

onMounted(fetchTodos);
</script>

<style scoped>
/* 样式可以在这里添加 */
</style>

修改主组件

接着在frontend/src/App.vue中引用TodoList`组件：

<template>
  <div idapp">
    <TodoList />
  </div>
</template>

<script setup>
import TodoList from './components/TodoList.vue';
</script>

启动前端

确保frontend目录下，运行以下命令启动Vue应用：

npm run serve

4. 实现功能

现在，我们的Todo List应用基本已经实现！我们可以通过输入框添加Todo，并在列表中显示出来。每个Todo旁边都有一个删除按钮，可以删除对应的Todo。

5. 完成应用

您可以通过访问http://localhost:8080查看我们的Todo List应用，默认情况下，Vue CLI 使用8080端口，而Node.js使用3000。

6. 总结

在本篇博客中，我们建了一个前后端分离的Todo List应用，使用Node.js作为后端服务。这个应用基本实现了添加和删除Todo的功能，并且结构清晰，有助于后续扩展功能。前后端分离的架构为我们带来了更高的开发效率和灵活性。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

书籍详情