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

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

  • 首页: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.rhkb.cn/news/494860.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【网络安全产品大调研系列】1. 漏洞扫描

1. 为什么会出现漏扫技术&#xff1f; 每次黑客攻击事件进行追溯的时候&#xff0c;根据日志分析后&#xff0c;我们往往发现基本都是系统、Web、 弱口令、配置这四个方面中的其中一个出现的安全问题导致黑客可以轻松入侵的。 操作系统的版本滞后&#xff0c;没有更新补丁&am…

Java爬虫:速卖通(AliExpress)商品评论获取指南

引言 在当今的电商时代&#xff0c;商品评论对于消费者决策有着举足轻重的影响。速卖通&#xff08;AliExpress&#xff09;&#xff0c;作为全球知名的在线零售平台之一&#xff0c;拥有海量的商品评论数据。对于商家而言&#xff0c;能够高效地获取这些评论数据&#xff0c;…

AIDD - 探索语言模型在药物分子生成方面的应用

AIDD - 探索语言模型在药物分子生成方面的应用 今天给大家讲一篇2024年10月在nature communications上发表的一篇关于分子生成的文章。现有的分子生成方法中往往只关注药物的特定属性&#xff0c;导致其适用性受限。因此作者提出了TamGen方法&#xff0c;用于针对特定靶点的分子…

【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit

1、AVCodec 硬解咨询&#xff1f; 在做视频播放硬解适配&#xff0c;这是 demo&#xff1a;https://gitee.com/openharmony-sig/ohos_videocompressor/blob/master/videoCompressor/src/main/cpp/video/decoder/VideoDec.cpp 请问&#xff1a; int32_t VideoDec::SetOutputS…

怎么设置电脑密码?Windows和Mac设置密码的方法

为电脑设置密码是保护个人信息安全的重要措施。无论是Windows系统还是MacOS系统&#xff0c;设置密码的步骤都相对简单&#xff0c;但需要根据不同的操作系统选择不同的方法。 一、Windows系统电脑密码设置 方法一&#xff1a;通过控制面板设置账户密码 点击桌面左下角的“开…

谷歌浏览器的网络安全检测工具介绍

作为全球最受欢迎的浏览器之一&#xff0c;谷歌浏览器不仅提供了快速、便捷的浏览体验&#xff0c;还内置了一系列强大的网络安全检测工具&#xff0c;帮助用户识别潜在的网络威胁&#xff0c;保护个人隐私和数据安全。本文将详细介绍谷歌浏览器中的几项关键网络安全检测功能&a…

一个比RTK或redux更轻量级更易使用的 React 第三方状态管理工具库的配置与使用

本文由作者 Samdy_Chan 原创,未经作者同意,请勿随意转载! 使用轻量级第三方的 React 状态管理库 zustand 管理共享状态数据 在 react 框架应用中,开发者应该大多数都是采用 redux 状态管理工具库来管理应用的共享状态数据,但用过 redux 的人都知道,其配置和使用相当复杂…

菜鸟带新鸟——基于EPlan2022的部件库制作

首先&#xff0c;我们需要了解一些概念&#xff1a; Eplan的部件制作内容 以上内容是制作一个完整的部件所需要的。如果公司要求没有那么严格&#xff0c;我们就可以制作1-4级的内容就可以满足日常的使用啦&#xff01; 部件的创建方式 部件创建方式有4类&#xff1a; 1、单…

Charles安装证书过程(手机)

背景&#xff1a;使用模拟器抓包时&#xff0c;发现https请求无法抓取&#xff0c;需要安装相应证书。我自己是因为模拟器升级了安卓7&#xff0c;发现之前安装的证书无效了&#xff0c;需要重新安装。 参考博客&#xff1a;夜神模拟器12Charles进行Https抓包_模拟器抓包ssl-C…

Windows、CentOS环境下搭建自己的版本管理资料库:GitBlit

可以搭建属于公司内部或者个人的Git服务器&#xff0c;方便程序代码及文档版本管理。 官网&#xff1a;http://www.gitblit.com/ Windows环境下安装 提前已经安装好了JDK。 官网下载Windows版的GitBlit。 将zip包解压到自己想要放置的文件夹下。 建立版本库路径&#xff0c…

数据库操作【JDBC HIbernate Mybatis】

JDBC JDBC编程 在java开发中&#xff0c;以前都是通过JDBC&#xff08;Java Data Base Connectivity&#xff09;与数据库打交道的&#xff0c;至少在ORM&#xff08;Object Relational Mapping&#xff09;框架没出现之前是这样&#xff0c;目前常用的ORM框架有JPA、hibernat…

Linux 常见用例汇总

注&#xff1a;本文为 Linux 常见用例文章合辑。 部分内容已过时&#xff0c;未更新整理。 检查 Linux 上的 glibc 版本 译者&#xff1a;joeren | 2014-11-27 21:33 问&#xff1a;检查 Linux 系统上的 GNU C 库&#xff08;glibc&#xff09;的版本&#xff1f; GNU C 库&…

web-密码安全口令

目录 一、密码安全概述 二、密码安全现状 三、破解方式 四、暴力破解 五、字典破解 六、密码字典 学习心得&#xff1a; 一、密码安全概述 现在很多地方都是以用户名&#xff08;账号&#xff09;和口令&#xff08;密码&#xff09;作为鉴权的方式&#xff0c;口令&am…

工控触摸屏用winForms来构建框架,效果还是很不错的

工控触摸屏采用 winForms 构建框架具有诸多优势。winForms 提供了丰富的控件和强大的开发工具&#xff0c;使得界面设计更加高效。它具有良好的稳定性和兼容性&#xff0c;能够适应工控环境的复杂要求。通过 winForms 可以实现直观的操作界面&#xff0c;方便操作人员进行监控和…

开发一个DApp项目:DeFi、DApp开发与公链DApp开发

随着区块链技术的快速发展&#xff0c;去中心化应用&#xff08;DApp&#xff09;逐渐成为创新技术的核心之一。DApp能够利用区块链去中心化的特点&#xff0c;提供更高的安全性、透明性和效率&#xff0c;吸引了越来越多的开发者和投资者关注。本文将围绕如何开发一个DApp项目…

网络下载ts流媒体

网络下载ts流媒体 查看下载排序合并 很多视频网站&#xff0c;尤其是微信小程序中的长视频无法获取到准确视频地址&#xff0c;只能抓取到.ts片段地址&#xff0c;下载后发现基本都是5~8秒时长。 例如&#xff1a; 我们需要将以上地址片段全部下载后排序后再合成新的长视频。 …

性能优化!突破性能瓶颈的尖兵CPU Cache

缓存这个专业术语&#xff0c;在计算机世界中是经常使用到的。它并不是CPU所独有的&#xff0c;比如cdn缓存网站信息&#xff0c;浏览器缓存网页的图像视频等&#xff0c;但本文讲述的是狭义Cache&#xff0c;主要指的是CPU Cache&#xff0c;本文将其简称为"缓存"或…

Redis+注解实现限流机制(IP、自定义等)

简介 在项目的使用过程中&#xff0c;限流的场景是很多的&#xff0c;尤其是要提供接口给外部使用的时候&#xff0c;但是自己去封装的话&#xff0c;相对比较耗时。 本方式可以使用默认&#xff08;方法&#xff09;&#xff0c;ip、自定义参数进行限流&#xff0c;根据时间…

010 Qt_输入类控件(LineEdit、TextEdit、ComboBox、SpinBox、DateTimeEdit、Dial、Slider)

文章目录 前言一、QLineEdit1.简介2.常见属性及说明3.重要信号及说明4.示例一&#xff1a;用户登录界面5.示例二&#xff1a;验证两次输入的密码是否一致显示密码 二、TextEdit1.简介2.常见属性及说明3.重要信号及说明4.示例一&#xff1a;获取多行输入框的内容5.示例二&#x…

RabbitMQ 的7种工作模式

RabbitMQ 共提供了7种⼯作模式,进⾏消息传递,. 官⽅⽂档:RabbitMQ Tutorials | RabbitMQ 1.Simple(简单模式) P:⽣产者,也就是要发送消息的程序 C:消费者,消息的接收者 Queue:消息队列,图中⻩⾊背景部分.类似⼀个邮箱,可以缓存消息;⽣产者向其中投递消息,消费者从其中取出消息…