基于Vue3和Node.js的完整增删改查项目实现教程：从后端封装到前端调用

在 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 的完整增删改查项目实现：从后端封装到前端调用》