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

NMY1122024-08-28 9:04

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

相关推荐
小小竹子1 分钟前
前端vue-实现富文本组件
前端·vue.js·富文本
小白小白从不日白10 分钟前
react hooks--useReducer
前端·javascript·react.js
下雪天的夏风22 分钟前
TS - tsconfig.json 和 tsconfig.node.json 的关系，如何在TS 中使用 JS 不报错
前端·javascript·typescript
danplus23 分钟前
node发送邮件：如何实现Node.js发信功能？
服务器·node.js·外贸开发信·邮件群发·蜂邮edm邮件营销·邮件接口·营销邮件
青稞儿27 分钟前
面试题高频之token无感刷新（vue3+node.js）
vue.js·node.js
diygwcom34 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
Hello-Mr.Wang1 小时前
vue3中开发引导页的方法
开发语言·前端·javascript
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法，亲测有效！！！
前端·javascript·vue.js
编程零零七5 小时前
Python数据分析工具(三)：pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
(⊙o⊙)~哦7 小时前
JavaScript substring() 方法
前端
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习