在 Node.js 中封装一个增删改查（CRUD）接口，并在 Vue 3 前端调用这些接口。整个过程包括后端 API 的创建和前端的调用。

一、安装 Node.js 和 Express 脚手架

1. 安装 Node.js

首先，你需要安装 Node.js。你可以通过以下步骤进行安装：

访问 Node.js 官网。

根据你的操作系统选择适合的安装包，并安装。

在安装完成后，你可以通过以下命令检查是否安装成功：

<code>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">code>

{ { item.name }} - { { item.quantity }}

<button @click="deleteItem(item._id)">Delete</button>code>

<button @click="editItem(item)">Edit</button>code>

</li>

</ul>

<div>

<input v-model="newItem.name" placeholder="Name" />code>

<input v-model="newItem.quantity" type="number" placeholder="Quantity" />code>

<button @click="addItem">Add Item</button>code>

</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