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

ops/2024/12/25 11:41:52/

💥 欢迎来到我的博客!很高兴能在这里与您相遇!
请添加图片描述

  • 首页:GPT-千鑫 – 热爱AI、热爱Python的天选打工人,活到老学到老!!!
  • 导航
    - 人工智能系列:包含 OpenAI API Key教程, 50个Prompt指令, Midjourney生成攻略等更多教程…
    - 常用开发工具:包含 AI代码补全工具, Vscode-AI工具, IDER or Pycharm-AI工具, 如何使用Cursor等更多教程…
    - VScode-AI插件:集成13种AI大模型(GPT4、o1等)、支持Open API调用、自定义助手、文件上传等 >>> - CodeMoss & ChatGPT-AI中文版

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

请添加图片描述

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

文章目录

      • 1.1 Vue.js的优势
      • 1.2 Node.js的优势
    • 二、环境准备
    • 三、创建Vue项目
    • 四、搭建Node.js后端
      • 4.1 创建服务器
      • 4.2 创建数据模型
      • 4.3 创建CRUD接口
    • 五、在Vue中调用API
    • 六、运行项目
    • 七、总结
    • 相关文章

在这里插入图片描述

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项目。打开终端,输入以下命令:

vue create my-vue-app

在这里插入图片描述

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

cd my-vue-app

四、搭建Node.js后端

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

mkdir server
cd server
npm init -y

安装必要的依赖:

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

在这里插入图片描述

4.1 创建服务器

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

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的文件,定义数据模型:

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操作的接口:

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文件,添加以下代码:

<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服务器:

node index.js

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

npm run serve

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

七、总结

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

CSDN

相关文章

【OpenAI】(一)获取OpenAI API Key的多种方式全攻略:从入门到精通,再到详解教程!!

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

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


http://www.ppmy.cn/ops/144842.html

相关文章

ASP.NET Core Web API 控制器

文章目录 一、基类&#xff1a;ControllerBase二、API 控制器类属性三、使用 Get() 方法提供天气预报结果 在深入探讨如何编写自己的 PizzaController 类之前&#xff0c;让我们先看一下 WeatherController 示例中的代码&#xff0c;了解它的工作原理。 在本单元中&#xff0c…

数字逻辑(五)——用二进制来表示音频和视频

目录 1. 用二级制来表示音频 1.1 采样 1.2 量化 1.3 编码 2. 用二进制来表示视频 2.1 使用二进制来存储文件 2.2 使用二进制来采集视频 2.3 计算机如何播放视频 1. 用二级制来表示音频 声音是由物体的振动来表示的&#xff0c;振动是一种连续的波形&#xff0c;因此…

VS Code Copilot 与 Cursor 对比

选手简介 VS Code Copilot&#xff1a;算是“老牌”编程助手了&#xff0c;虽然Copilot在别的编辑器上也有扩展&#xff0c;不过体验最好的还是VS Code&#xff0c;毕竟都是微软家的所以功能集成更好一些&#xff1b;主要提供的是Complete和Chat能力&#xff0c;也就是代码补全…

AngularJS 入门01

AngularJS 扩展了 HTML AngularJS 通过 ng-directives 扩展了 HTML。 ng-app 指令定义一个 AngularJS 应用程序。 ng-model 指令把元素值&#xff08;比如输入域的值&#xff09;绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。 <!DOCTYPE html> &l…

Ubuntu重命名默认账户

Ubuntu重命名默认账户 用户管理常用命令 添加用户 useradd test设置密码 sudo passwd test删除用户 sudo userdel test开始进入步骤 一定&#xff01;一定&#xff01;一定&#xff01;一定要切到root 一定&#xff01;一定&#xff01;一定&#xff01;一定要切到root …

RustDesk远程及自建服务器搭建教程

要开始使用RustDesk远程和自建服务器&#xff0c;你需要遵循以下步骤&#xff1a; 下载和安装RustDesk&#xff1a;RustDesk是一款开源的远程支持应用程序。你可以在其官方网站&#xff08;https://rustdesk.com/&#xff09;上下载适用于你的操作系统的安装程序。安装过程非常…

图像处理-Ch6-彩色图像处理

Ch6 彩色图像处理 无广告更易阅读&#xff0c;个人博客点此进入<– 文章目录 Ch6 彩色图像处理彩色基础彩色模型(Color models)RGB(red, green, blue)CMY & CMYK(cyan, magenta, yellow/and black)HSI(hue, saturation, intensity)HSV(hue, saturation, value) 颜色空…

对安全的认知

班摸鱼&#xff0c;随性写的&#xff0c;原来对安全的看法真的很窄&#xff0c;就觉得网络安全&#xff0c;无非是攻防和研究&#xff0c;就相当于觉得数学是代数和几何&#xff0c;确实是无知和片面的&#xff0c;甲方和乙方&#xff0c;对于安全的定义也是不一样的&#xff0…