当前位置: 首页 > news >正文

Node.js 入门指南:从零开始构建全栈应用

​🌈个人主页:前端青山
🔥系列专栏:node.js篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来node.js篇专栏内容:node.js-入门指南:从零开始构建全栈应用

前言

大家好,我是青山。作为一名前端开发工程师,我一直在寻找一种能够让我同时掌握前后端开发的技术栈。Node.js 的出现,无疑为我打开了新的大门。通过 Node.js,我们不仅可以在后端编写 JavaScript 代码,还可以轻松地与前端进行联调。本文将带你从零开始学习 Node.js,并结合 MongoDB 数据库,构建一个简单的全栈应用。

目录

前言

一、Node.js 简介

1.1 什么是 Node.js?

1.2 Node.js 的优势

1.3 安装 Node.js

二、创建第一个 Node.js 应用

2.1 初始化项目

2.2 编写第一个 Node.js 代码

2.3 代码解释

三、连接 MongoDB 数据库

3.1 什么是 MongoDB?

3.2 安装 MongoDB

3.3 安装 MongoDB 驱动

3.4 连接 MongoDB

3.5 代码解释

四、前端联调

4.1 创建 Vue.js 项目

4.2 调用 Node.js API

4.3 代码解释

五、总结

一、Node.js 简介

1.1 什么是 Node.js?

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。它允许开发者在服务器端运行 JavaScript 代码,从而实现全栈开发。Node.js 采用事件驱动、非阻塞 I/O 模型,使其非常适合处理高并发的网络应用。

1.2 Node.js 的优势

  • 高性能:Node.js 使用 V8 引擎,性能非常出色。
  • 异步 I/O:Node.js 采用事件驱动的非阻塞 I/O 模型,适合处理大量并发请求。
  • 生态系统丰富:Node.js 拥有庞大的 npm 包管理器,提供了丰富的第三方库。
  • 跨平台:Node.js 支持 Windows、Linux 和 macOS 等多种操作系统。

1.3 安装 Node.js

  1. 访问 Node.js 官网,下载最新版本的 Node.js。
  2. 按照安装向导完成安装。
  3. 打开命令行工具,输入 node -v 和 npm -v,检查 Node.js 和 npm 是否安装成功。
node -v v14.17.0 $ npm -v 6.14.13

二、创建第一个 Node.js 应用

2.1 初始化项目

  1. 创建一个新的项目目录:
mkdir my-first-node-app $ cd my-first-node-app
  1. 初始化项目,生成 package.json 文件:
npm init -y

2.2 编写第一个 Node.js 代码

  1. 在项目根目录下创建一个 index.js 文件,编写以下代码:
// index.js
const http = require('http');const hostname = '127.0.0.1';
const port = 3000;const server = http.createServer((req, res) => {res.statusCode = 200;res.setHeader('Content-Type', 'text/plain');res.end('Hello, World!\n');
});server.listen(port, hostname, () => {console.log(`Server running at http://${hostname}:${port}/`);
});
  1. 运行项目:
node index.js
  1. 打开浏览器,访问 http://127.0.0.1:3000,你会看到 "Hello, World!" 的输出。

2.3 代码解释

  • require('http'):引入 Node.js 内置的 HTTP 模块。
  • http.createServer:创建一个 HTTP 服务器。
  • server.listen:启动服务器,监听指定的主机和端口。
  • res.end:发送响应内容。

三、连接 MongoDB 数据库

3.1 什么是 MongoDB?

MongoDB 是一个基于分布式文件存储的开源数据库系统。它支持动态查询,可以存储结构化、半结构化和非结构化的数据。MongoDB 使用 BSON(Binary JSON)格式存储数据,支持丰富的查询语言和索引。

3.2 安装 MongoDB

  1. 访问 MongoDB 官网,下载并安装 MongoDB。
  2. 启动 MongoDB 服务:
mongod

3.3 安装 MongoDB 驱动

  1. 在项目根目录下安装 MongoDB 驱动:
npm install mongodb

3.4 连接 MongoDB

  1. 修改 index.js 文件,添加连接 MongoDB 的代码:
// index.js
const http = require('http');
const { MongoClient } = require('mongodb');const hostname = '127.0.0.1';
const port = 3000;
const uri = 'mongodb://127.0.0.1:27017';
const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });const server = http.createServer(async (req, res) => {try {await client.connect();console.log('Connected to MongoDB');const database = client.db('myFirstDatabase');const collection = database.collection('items');const query = {};const cursor = collection.find(query);if ((await cursor.count()) === 0) {res.statusCode = 200;res.setHeader('Content-Type', 'text/plain');res.end('No items found\n');} else {const items = await cursor.toArray();res.statusCode = 200;res.setHeader('Content-Type', 'application/json');res.end(JSON.stringify(items));}} catch (err) {console.error(err);res.statusCode = 500;res.setHeader('Content-Type', 'text/plain');res.end('Internal Server Error\n');} finally {await client.close();}
});server.listen(port, hostname, () => {console.log(`Server running at http://${hostname}:${port}/`);
});
  1. 运行项目:
node index.js
  1. 打开浏览器,访问 http://127.0.0.1:3000,你会看到从 MongoDB 中获取的数据。

3.5 代码解释

  • MongoClient:MongoDB 的客户端类,用于连接 MongoDB 服务器。
  • client.connect():连接到 MongoDB 服务器。
  • client.db('myFirstDatabase'):选择数据库。
  • database.collection('items'):选择集合。
  • collection.find(query):查询集合中的文档。
  • cursor.toArray():将查询结果转换为数组。

四、前端联调

4.1 创建 Vue.js 项目

  1. 安装 Vue CLI:
npm install -g @vue/cli
  1. 创建一个新的 Vue 项目:
vue create my-first-vue-app
  1. 进入项目目录:
cd my-first-vue-app
  1. 启动项目:
npm run serve

4.2 调用 Node.js API

  1. 在 src/components 目录下创建一个 HelloWorld.vue 组件:
<template><div class="hello"><h1>{{ msg }}</h1><ul><li v-for="item in items" :key="item._id">{{ item.name }}</li></ul></div>
</template><script>
import axios from 'axios';export default {name: 'HelloWorld',props: {msg: String,},data() {return {items: [],};},async created() {try {const response = await axios.get('http://127.0.0.1:3000');this.items = response.data;} catch (error) {console.error(error);}},
};
</script><style scoped>
.hello {text-align: center;
}
</style>
  1. 在 src/App.vue 中使用 HelloWorld 组件:
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js + Node.js App"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue';export default {name: 'App',components: {HelloWorld,},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
  1. 安装 axios
npm install axios
  1. 重启 Vue 项目:
npm run serve
  1. 打开浏览器,访问 http://localhost:8080,你会看到从 Node.js 后端获取的数据。

4.3 代码解释

  • axios.get:发送 GET 请求到 Node.js 后端。
  • v-for:循环渲染列表。
  • created:组件创建完成后执行的生命周期钩子。

五、总结

通过本文,我们从零开始学习了 Node.js 和 MongoDB 的基本概念,并构建了一个简单的全栈应用。我们学会了如何创建一个 Node.js 服务器,连接 MongoDB 数据库,以及如何在 Vue.js 前端项目中调用 Node.js API。

Node.js 和 MongoDB 的结合,为我们提供了强大的全栈开发能力。希望本文能帮助你快速上手 Node.js 和 MongoDB,开启你的全栈开发之旅。

如果你有任何问题或建议,欢迎留言交流。期待在未来的文章中继续与你分享更多技术知识。


希望这篇文章对你有所帮助!如果有任何疑问或需要进一步的解释,请随时联系我。祝你在全栈开发的道路上越走越远!

相关文章:

Node.js 入门指南:从零开始构建全栈应用

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;node.js篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来node.js篇专栏内容:node.js-入门指南&#xff1a;从零开始构建全栈应用 前言 大家好&#xff0c;我是青山。作…...

MYSQL 真实高并发下的死锁

https://pan.baidu.com/s/1nM3VQdbkNZhnK-wWboEYxA?pwdvwu6 下面是风控更新语句 ------------------------ LATEST DETECTED DEADLOCK ------------------------ 2023-08-04 01:00:10 140188779017984 *** (1) TRANSACTION: TRANSACTION 895271870, ACTIVE 0 sec starting …...

Zookeeper 简介 | 特点 | 数据存储

1、简介 zk就是一个分布式文件系统&#xff0c;不过存储数据的量极小。 1. zookeeper是一个为分布式应用程序提供的一个分布式开源协调服务框架。是Google的Chubby的一个开源实现&#xff0c;是Hadoop和Hbase的重要组件。主要用于解决分布式集群中应用系统的一致性问题。 2. 提…...

设计模式之结构型模式---装饰器模式

目录 1.概述2.类图3.应用场景及优缺点3.1 应用场景3.2 优缺点3.2.1 优点3.2.2 缺点 4.实现4.1 案例类图4.2 代码实现4.2.1 定义抽象构建角色4.2.2 定义具体构建角色4.2.3 定义抽象装饰器角色4.2.4 定义具体装饰角色4.2.5 装饰器模式的使用 1.概述 装饰器模式是指在不改变现有对…...

Android Pair

Pair在Android中是一种轻量级的工具类&#xff0c;并不是严格意义上的数据结构。 数据结构是一组有组织的方式来存储和管理数据的方式&#xff0c;如数组、链表、栈、队列、树、图等&#xff0c;它们有自己的特性和操作规则。而Pair更像是一个简单的封装&#xff0c;用于在需要…...

华为荣耀曲面屏手机下面空白部分设置颜色的方法

荣耀部分机型下面有一块空白区域&#xff0c;如下图红框部分 设置这部分的颜色需要在themes.xml里面设置navigationBarColor属性 <item name"android:navigationBarColor">android:color/white</item>...

《C#语法一篇通》,有20万字,需8MB字节,宜48小时阅读,没准会继续完善

本文摘录了C#语法的主要内容&#xff0c;接近20万字。 所有鸡汤的味道都等于马尿&#xff01; 如果你相信任何所谓的鸡汤文章&#xff0c;智商堪忧。 计算机语言没有”好不好“之说&#xff0c;骗子才会告诉你哪个语言好&#xff0c;学好任何一本基础语言&#xff08;C&#…...

嵌入式硬件工程师的职业发展规划

嵌入式硬件工程师可以按照以下阶段进行职业发展规划&#xff1a; 1. **初级阶段&#xff08;1-3 年&#xff09; ** - **技术学习与积累**&#xff1a; **电路基础强化**&#xff1a; 深入学习模拟电路和数字电路知识&#xff0c;能够熟练分析和设计基本的电路&#xff0c;…...

QT for android 问题总结(QT 5.15.2)

1.配置好的sdk&#xff0c;显示设置失败 Android SDK Command-line Tools run. Android Platform-Tools installed. Command-line Tools (latest) 版本过高导致报错 &#xff0c;下载一个低版本的latest &#xff0c;替换掉之前latest中的文件。即可&#xff0c;latest 路径如…...

PyTorch实战-手写数字识别-MLP模型

1 需求 包懂&#xff0c;40分钟掌握PyTorch深度学习框架&#xff0c;对应神经网络算法理论逐行讲解用PyTorch实现图像分类代码_哔哩哔哩_bilibili 10分钟入门神经网络 PyTorch 手写数字识别_哔哩哔哩_bilibili pytorch tutorial: PyTorch 手写数字识别 教程代码 从零设计并训…...

(附项目源码)Java开发语言,基于Java的高校实验室教学管理系统的设计与开发 50,计算机毕设程序开发+文案(LW+PPT)

摘 要 随着高校实验室教学与管理的复杂性增加&#xff0c;传统的手动管理系统已经无法满足日益增长的需求。实验室教学不仅涉及到学生的教学安排和管理&#xff0c;还需要对实验设备、实验材料、实验室资源等进行有效的调配和管理。而目前实验室教学管理的各项工作&#xff0c;…...

【日常问题排查小技巧-连载】

线上服务CPU飙高排查 先执行 top&#xff0c;找到CPU占用比较高的进程 id&#xff0c;&#xff08;比如 21448&#xff09; jstack 进程 id > show.txt&#xff08;jstack 21448 > show.txt&#xff09; 找到进程中CPU占用比较高的线程&#xff0c;线程 id 转换为 16 进…...

elastic search查找字段的方法

一,比如:elastic search 查找id为“ien9292voewew”的方法 此id为主键id,意思就是唯一id,在ES中是_id, 在 Elasticsearch 中,如果你想要查找特定 ID 的文档,可以使用 _get API。以下是如何通过 RESTful 请求或使用 Python 客户端来查找 ID 为 ien9292voewew 的文档的方…...

MATLAB下的四个模型的IMM例程(CV、CT左转、CT右转、CA四个模型),附下载链接

基于IMM算法的目标跟踪。利用卡尔曼滤波和多模型融合技术&#xff0c;能够在含噪声的环境中提高估计精度&#xff0c;带图像输出 文章目录 概述源代码运行结果代码结构与功能1. 初始化2. 仿真参数设置3. 模型参数设置4. 生成量测数据5. IMM算法初始化6. IMM迭代7. 绘图8. 辅助函…...

无人机之中继通信技术篇

一、定义与原理 无人机中继通信技术是指通过无人机搭载中继设备&#xff0c;将信号从一个地点传输到另一个地点&#xff0c;从而延长通信距离并保持较好的通信质量。其原理类似于传统的中继通信&#xff0c;即在两个终端站之间设置若干中继站&#xff0c;中继站将前站送来的信号…...

阳光保险隐忧浮现:业绩与股价双双而下,张维功能否力挽狂澜?

10月28日晚间&#xff0c;作为国内新生代险企&#xff0c;也是一家赴港上市的保险集团——阳光保险&#xff08;HK:06963&#xff09;一口气对外正式披露了三则财务报告&#xff0c;分别是集团旗下阳光人寿和阳光财险今年前三季度未经审议的财务数据&#xff0c;以及截至三季度…...

【OJ题解】在字符串中查找第一个不重复字符的索引

&#x1f4b5;个人主页: 起名字真南 &#x1f4b5;个人专栏:【数据结构初阶】 【C语言】 【C】 【OJ题解】 目录 1. 引言2. 题目分析示例&#xff1a; 3. 解题思路思路一&#xff1a;双重循环思路二&#xff1a;哈希表 4. C代码实现5. 代码详解6. 时间和空间复杂度分析7. 优化方…...

处理配对和拆分内容 |【python技能树知识点1~2 习题分析】

目录 一、编程语言简史&#xff08;配对&#xff09;题目要求&#xff1a;程序设计&#xff1a; 二、 编程语言发明家&#xff08;拆分&#xff09;题目要求程序实现while和for循环 python技能树知识点中的一些习题练习和分析。熟悉python编程模式和逻辑。 一、编程语言简史&am…...

HBuilderX自定义Vue3页面模版

HBuilderX自定义Vue3页面模版 首先在HBuilderX工具下的任意一个项目添加新建自定义页面模版 新建模版文件&#xff0c;并打开进行编辑 vue3-setup-js.vue文件里填写样式模版&#xff08;根据自己的需要进行修改&#xff09; <template><view class"">&…...

计算机网络——TCP中的流量控制和拥塞控制

TCP中的流量控制和拥塞控制 流量控制 什么是流量控制 如果发送者发送数据过快&#xff0c;接收者来不及接收&#xff0c;那么就会出现分组丢失&#xff0c;为了避免分组丢失&#xff0c;控制发送者的发送速度&#xff0c;使得接收者来得及接收&#xff0c;这就是流量控制。 …...

UE5 学习系列(二)用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

SpringAI实战:ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...