在 Node.js 中封装一个增删改查（CRUD）接口，并在 Vue 3 前端调用这些接口。整个过程包括后端 API 的创建和前端的调用。
一、安装 Node.js 和 Express 脚手架
1. 安装 Node.js
首先，你需要安装 Node.js。你可以通过以下步骤进行安装：
访问 Node.js 官网。
根据你的操作系统选择适合的安装包，并安装。
在安装完成后，你可以通过以下命令检查是否安装成功：
node -v
如果成功安装，终端会显示 Node.js 的版本号。
2. 使用 Express 脚手架创建项目
接下来，我们将使用 Express 脚手架创建一个新的项目。
npx express-generator my-express-appcd my-express-appnpm install
这会创建一个名为 my-express-app 的项目，并安装所有依赖。
二、搭建 MongoDB 数据库
1. 安装 MongoDB
首先，你需要安装 MongoDB。你可以通过以下步骤进行安装：
访问 MongoDB 官网。
根据你的操作系统选择适合的版本，并安装。
安装完成后，启动 MongoDB：
mongod --dbpath <your-data-path>
2. 连接 MongoDB 与 Node.js
在 my-express-app 目录中，我们需要安装 mongoose 以便与 MongoDB 交互：
npm install mongoose
接下来，在项目的 app.js 中添加以下代码，连接到 MongoDB：
const mongoose = require('mongoose');mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true,});mongoose.connection.on('connected', () => { console.log('Connected to MongoDB');});mongoose.connection.on('error', (err) => { console.log('Failed to connect to MongoDB', err);});
三、封装 CRUD 操作
1. 创建 Mongoose 模型
在项目的 models 目录下创建一个 Item.js 文件，用于定义数据模型：
const mongoose = require('mongoose');const itemSchema = new mongoose.Schema({ name: { type: String, required: true, }, quantity: { type: Number, required: true, },});module.exports = mongoose.model('Item', itemSchema);
2. 封装 CRUD 操作
在 routes 目录下创建一个 items.js 文件，用于处理增删改查请求：
const express = require('express');const router = express.Router();const Item = require('../models/Item');// Create an itemrouter.post('/items', async (req, res) => { try { const newItem = new Item(req.body); const savedItem = await newItem.save(); res.status(201).json(savedItem); } catch (error) { res.status(400).json({ message: error.message }); }});// Get all itemsrouter.get('/items', async (req, res) => { try { const items = await Item.find(); res.json(items); } catch (error) { res.status(500).json({ message: error.message }); }});// Update an itemrouter.put('/items/:id', async (req, res) => { try { const updatedItem = await Item.findByIdAndUpdate(req.params.id, req.body, { new: true }); res.json(updatedItem); } catch (error) { res.status(400).json({ message: error.message }); }});// Delete an itemrouter.delete('/items/:id', async (req, res) => { try { await Item.findByIdAndDelete(req.params.id); res.json({ message: 'Item deleted' }); } catch (error) { res.status(500).json({ message: error.message }); }});module.exports = router;
然后在 app.js 中引入并使用这个路由：
const itemsRouter = require('./routes/items');app.use('/api', itemsRouter);
四、前端：使用 Vue 3 实现接口调用
1. 创建 Vue 3 项目
首先，使用 Vue CLI 创建一个新的 Vue 3 项目：
npm install -g @vue/clivue create my-vue-appcd my-vue-app
2. 创建 API 服务文件
在 src 目录下创建一个 api.js 文件，用于封装 API 请求：
import axios from 'axios';const apiClient = axios.create({ baseURL: 'http://localhost:3000/api', headers: { 'Content-Type': 'application/json', },});export default { getItems() { return apiClient.get('/items'); }, createItem(item) { return apiClient.post('/items', item); }, updateItem(id, item) { return apiClient.put(`/items/${id}`, item); }, deleteItem(id) { return apiClient.delete(`/items/${id}`); },};
3. 使用 setup 语法编写 Vue 组件
在 src/components 目录下创建一个 ItemList.vue 组件，用于展示和操作数据：
<template> <div> <h1>Item List</h1> <ul> <li v-for="item in items" :key="item._id"> {{ item.name }} - {{ item.quantity }} <button @click="deleteItem(item._id)">Delete</button> <button @click="editItem(item)">Edit</button> </li> </ul> <div> <input v-model="newItem.name" placeholder="Name" /> <input v-model="newItem.quantity" type="number" placeholder="Quantity" /> <button @click="addItem">Add Item</button> </div> </div></template><script setup>import { ref, onMounted } from 'vue';import api from '@/api';const items = ref([]);const newItem = ref({ name: '', quantity: null,});const fetchItems = async () => { const response = await api.getItems(); items.value = response.data;};const addItem = async () => { const response = await api.createItem(newItem.value); items.value.push(response.data); newItem.value.name = ''; newItem.value.quantity = null;};const deleteItem = async (id) => { await api.deleteItem(id); items.value = items.value.filter(item => item._id !== id);};const editItem = (item) => { newItem.value = { ...item };};onMounted(() => { fetchItems();});</script>
4. 在 App.vue 中使用 ItemList.vue
修改 App.vue 来包含 ItemList.vue 组件：
<template> <div id="app"> <ItemList /> </div></template><script setup>import ItemList from './components/ItemList.vue';</script>
5. 运行项目
确保你在运行后端的同时，在 my-vue-app 目录下运行前端项目：
npm run serve
现在，你应该可以在浏览器中访问 Vue 3 应用，并执行增删改查操作，这些操作将与后端的 Node.js 和 MongoDB 进行交互。
五、总结
这篇教程涵盖了以下内容：
如何安装和配置 Node.js 和 Express。
使用 Mongoose 连接和操作 MongoDB。
如何封装 CRUD 操作并与前端 Vue 3 结合。
使用 Vue 3 的 setup 语法糖编写组件，并通过 Axios 调用后端 API。
标题可以是： 《基于 Vue 3 和 Express 的完整增删改查项目实现：从后端封装到前端调用》