【前端】入门指南：Vue中使用Node.js进行数据库CRUD操作的详细步骤

z千鑫2024-12-25 8:06

💥 欢迎来到我的博客！很高兴能在这里与您相遇！

💥 期待与您一起探索AI、共同成长。✨ 立即订阅本专栏，加入我们的旅程，共同发现更多精彩！🌟

在开始之前，我们先来看看为什么选择Vue.js和Node.js这对组合。Vue.js是一款轻量级的前端框架，具有响应式的数据绑定和组件化的开发方式，适合构建用户界面。而Node.js则是一个基于Chrome V8引擎的JavaScript运行环境，能够让你在服务器端使用JavaScript。两者结合，可以实现前后端的无缝对接，提升开发效率。

文章目录

1.1 Vue.js的优势

  • 易于上手：Vue.js的学习曲线相对平缓，适合新手。
  • 组件化开发：可以将UI拆分成独立的组件，便于管理和复用。
  • 强大的生态系统：丰富的插件和工具支持，能够快速构建复杂的应用。

1.2 Node.js的优势

  • 高性能：基于事件驱动的非阻塞I/O模型，适合处理高并发请求。
  • 统一的语言：前后端都使用JavaScript，降低了学习成本。
  • 丰富的模块：NPM（Node Package Manager）提供了大量的第三方模块，方便开发。

二、环境准备

在开始之前，我们需要确保你的开发环境已经准备好。以下是你需要安装的工具：

  1. Node.js ：可以通过命令node -v来检查版本。
  2. Vue CLI ：可以通过命令npm install -g @vue/cli来安装。
  3. 数据库：我这边使用MongoDB作为示例数据库

三、创建Vue项目

我们需要创建一个新的Vue项目。打开终端，输入以下命令：

bash 复制代码 
vue create my-vue-app

根据提示选择默认配置，等待项目创建完成后，进入项目目录：

bash 复制代码 
cd my-vue-app

四、搭建Node.js后端

接下来，我们需要在项目中搭建Node.js后端。我们将在项目根目录下创建一个新的文件夹，命名为server，并在其中初始化一个新的Node.js项目。

bash 复制代码 
mkdir server
cd server
npm init -y

安装必要的依赖：

bash 复制代码 
npm install express mongoose cors body-parser
  • express：用于创建服务器。
  • mongoose：用于与MongoDB进行交互。
  • cors：用于处理跨域请求。
  • body-parser：用于解析请求体。

4.1 创建服务器

在server文件夹中，创建一个名为index.js的文件，并添加以下代码：

javascript 复制代码 
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
const PORT = process.env.PORT || 5000;

// Middleware
app.use(cors());
app.use(bodyParser.json());

// MongoDB连接
mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('MongoDB connected'))
    .catch(err => console.log(err));

// 启动服务器
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

4.2 创建数据模型

在server文件夹中，创建一个名为models的文件夹，并在其中创建一个名为Item.js的文件，定义数据模型：

javascript 复制代码 
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);

4.3 创建CRUD接口

在index.js中添加CRUD操作的接口：

javascript 复制代码 
const Item = require('./models/Item');

// 创建新项目
app.post('/api/items', async (req, res) => {
    const newItem = new Item(req.body);
    try {
        const savedItem = await newItem.save();
        res.status(201).json(savedItem);
    } catch (err) {
        res.status(500).json(err);
    }
});

// 获取所有项目
app.get('/api/items', async (req, res) => {
    try {
        const items = await Item.find();
        res.status(200).json(items);
    } catch (err) {
        res.status(500).json(err);
    }
});

// 更新项目
app.put('/api/items/:id', async (req, res) => {
    try {
        const updatedItem = await Item.findByIdAndUpdate(req.params.id, req.body, { new: true });
        res.status(200).json(updatedItem);
    } catch (err) {
        res.status(500).json(err);
    }
});

// 删除项目
app.delete('/api/items/:id', async (req, res) => {
    try {
        await Item.findByIdAndDelete(req.params.id);
        res.status(200).json('Item deleted');
    } catch (err) {
        res.status(500).json(err);
    }
});

五、在Vue中调用API

现在我们已经搭建好了Node.js后端，接下来需要在Vue前端中调用这些API。打开src文件夹中的App.vue文件，添加以下代码：

html 复制代码 
<template>
  <div id="app">
    <h1>Item List</h1>
    <input v-model="newItem.name" placeholder="Item Name" />
    <input v-model="newItem.quantity" type="number" placeholder="Quantity" />
    <button @click="addItem">Add Item</button>
    <ul>
      <li v-for="item in items" :key="item._id">
        {{ item.name }} - {{ item.quantity }}
        <button @click="deleteItem(item._id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      newItem: {
        name: '',
        quantity: 0
      }
    };
  },
  methods: {
    async fetchItems() {
      const response = await axios.get('http://localhost:5000/api/items');
      this.items = response.data;
    },
    async addItem() {
      await axios.post('http://localhost:5000/api/items', this.newItem);
      this.newItem.name = '';
      this.newItem.quantity = 0;
      this.fetchItems();
    },
    async deleteItem(id) {
      await axios.delete(`http://localhost:5000/api/items/${id}`);
      this.fetchItems();
    }
  },
  mounted() {
    this.fetchItems();
  }
};
</script>

<style>
/* Add your styles here */
</style>

六、运行项目

现在一切准备就绪，我们可以启动Node.js服务器和Vue项目。首先，在server文件夹中启动Node.js服务器：

bash 复制代码 
node index.js

然后，在Vue项目根目录下启动Vue开发服务器：

bash 复制代码 
npm run serve

打开浏览器，访问http://localhost:8080，你将看到一个简单的界面，可以添加、查看和删除项目。

七、总结

希望这篇文章能帮助你更好地理解如何在Vue中使用Node.js进行数据库操作。如果你有任何问题或建议，欢迎在评论区留言！让我们一起探索更多的开发技巧吧！🚀

相关文章

【OpenAI】（一）获取OpenAI API Key的多种方式全攻略：从入门到精通，再到详解教程！！

【VScode】（二）VSCode中的智能AI-GPT编程利器，全面揭秘CodeMoss & ChatGPT中文版

【CodeMoss】（三）集成13种AI大模型（GPT4、o1等）、支持Open API调用、自定义助手、文件上传等强大功能，助您提升工作效率！ >>> - CodeMoss & ChatGPT-AI中文版

相关推荐
brrdg_sefg几秒前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww7 分钟前
【es6复习笔记】rest参数（7）
前端·笔记·es6·参数·rest
m0_748254888 分钟前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭1 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234521 小时前
前端Vue3字体优化三部曲（webFont、font-spider、spa-font-spider-webpack-plugin）
前端·webpack·node.js
Web阿成1 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript
苹果醋32 小时前
Golang的文件加密工具
运维·vue.js·spring boot·nginx·课程设计
jwensh2 小时前
【Jenkins】Declarative和Scripted两种脚本模式有什么具体的区别
运维·前端·jenkins
关你西红柿子2 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
益达是我2 小时前
【Chrome】浏览器提示警告Chrome is moving towards a new experience
前端·chrome
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明0719个Web前端交互式3D JavaScript框架和库08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO