在 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-app
cd my-express-app
npm 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 item
router.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 items
router.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 item
router.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 item
router.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/cli
vue create my-vue-app
cd 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 的完整增删改查项目实现：从后端封装到前端调用》
