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

相关推荐
我要洋人死39 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#