Vue 和 Node.js 的 RESTful API 集成案例

Vue 和 Node.js 的 RESTful API 集成案例

在现代Web开发中，前后端分离已成为一种趋势。本文将介绍如何利用Vue.js作为前端框架，与Node.js构建的RESTful API进行集成。我们将通过一个简单的示例来演示如何实现这一过程。

前言

Vue.js是一个渐进式的JavaScript框架，适合用于构建用户界面。它的设计理念使得构建复杂的前端应用变得简单而高效。而Node.js则是基于Chrome V8引擎的JavaScript运行环境，适合构建高性能的网络应用。两者结合，能为开发者提供一个强大的开发平台。

在本文中，我们将通过创建一个简单的待办事项（To-Do）应用，演示Vue与Node.js的RESTful API的集成过程。

项目结构

在开始之前，我们需要搭建一个项目结构，如下所示：

my-todo-app/
├── server/
│   ├── package.json
│   ├── index.js
│   └── db.js
└── client/
    ├── package.json
    ├── src/
    │   ├── App.vue
    │   ├── main.js
    │   └── components/
    │       ├── TodoList.vue
    │       └── TodoItem.vue

1. 创建Node.js服务器

首先，我们在server目录中创建一个简单的Node.js应用。

安装依赖

在server目录下，运行以下命令以初始化项目并安装所需依赖：

npm init -y
npm install express cors body-parser

编写服务器代码

server/index.js文件的代码如下：

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const { getTodos, addTodo, deleteTodo } = require('./db');

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

app.use(cors());
app.use(bodyParser.json());

// 获取待办事项
app.get('/api/todos', (req, res) => {
    res.json(getTodos());
});

// 添加待办事项
app.post('/api/todos', (req, res) => {
    const { text } = req.body;
    addTodo(text);
    res.status(201).json({ message: 'Todo added.' });
});

// 删除待办事项
app.delete('/api/todos/:id', (req, res) => {
    const { id } = req.params;
    deleteTodo(id);
    res.json({ message: 'Todo deleted.' });
});

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

编写数据库代码

接下来，在server/db.js文件中编写简单的内存数据库代码：

let todos = [
    { id: 1, text: 'Learn JavaScript' },
    { id: 2, text: 'Learn Vue.js' },
    { id: 3, text: 'Build a To-Do App' }
];

let nextId = 4;

const getTodos = () => {
    return todos;
};

const addTodo = (text) => {
    todos.push({ id: nextId++, text });
};

const deleteTodo = (id) => {
    todos = todos.filter(todo => todo.id !== parseInt(id));
};

module.exports = { getTodos, addTodo, deleteTodo };

2. 创建Vue.js前端

接下来，我们来创建Vue.js前端。在client目录下运行以下命令：

npm init vue@latest

跟随提示完成初始化。选择适合的选项后，安装依赖：

cd client
npm install axios

编写Vue组件

在client/src/components目录下创建两个文件：TodoList.vue以及TodoItem.vue。

TodoItem.vue

<template>
  <li>
    {{ todo.text }}
    <button @click="deleteTodo">Delete</button>
  </li>
</template>

<script setup>
import { defineProps } from 'vue';
import axios from 'axios';

const props = defineProps(['todo']);

const deleteTodo = async () => {
  await axios.delete(`http://localhost:3000/api/todos/${props.todo.id}`);
  location.reload();  // 刷新页面以获取最新的待办事项
};
</script>

TodoList.vue

<template>
  <div>
    <h1>My To-Do List</h1>
    <input v-model="newTodo" placeholder="Add a new todo" />
    <button @click="addTodo">Add</button>
    <ul>
      <TodoItem v-for="todo in todos" :key="todo.id" :todo="todo" />
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import TodoItem from './TodoItem.vue';

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

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

const addTodo = async () => {
  if (newTodo.value.trim()) {
    await axios.post('http://localhost:3000/api/todos', { text: newTodo.value });
    newTodo.value = '';
    fetchTodos();
  }
};

onMounted(fetchTodos);
</script>

编写主组件

在client/src/App.vue中做如下修改：

<template>
  <TodoList />
</template>

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

3. 启动项目

在server目录下，启动Node.js服务器：

node index.js

然后在client目录下，启动Vue应用：

npm run dev

4. 访问应用

打开浏览器，访问http://localhost:5173（Vue应用默认端口为5173），你将看到一个简单的待办事项应用。你可以添加新的待办事项，并删除已有的待办事项，所有操作都能够通过Node.js提供的RESTful API进行。

总结

通过以上步骤，我们创建了一个简单的待办事项应用，展示了如何将Vue.js与Node.js的RESTful API进行集成。这样的架构不仅能让我们把前端与后端解耦，也为日后的扩展和维护提供了便利。

无论是学习Vue.js或Node.js，只要掌握了API的基本用法，就能轻松构建出跨平台的全栈应用。希望本文能够让你对Vue和Node.js的结合有更深的了解，并激发你尝试构建自己的应用！

---

更多面试题请点击：web前端高频面试题_在线视频教程-CSDN程序员研修院

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