在现代Web开发中,后端分离的架构已经成为一种流行的开发模式。这种模式不仅提高了开发展示组件(前端)和业务逻辑(后端)的灵活性,还易于维护和扩展。在本文中,我们将使用Node.js作为后端,构建一个简单的Todo List应用,其中前端使用Vue.js框架以及setup语法糖。
目录
-
项目结构
-
创建Node.js后端
-
创建Vue.js前端
-
实现功能
-
完成应用
-
总结
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的功能,并且结构清晰,有助于后续扩展功能。前后端分离的架构为我们带来了更高的开发效率和灵活性。