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

相关推荐
鑫宝Code12 分钟前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh1 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜7 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点7 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow7 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o7 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app