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,开启你的全栈开发之旅。

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


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/59247.shtml

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

相关文章

WordPress网站添加嵌入B站视频,自适应屏幕大小,取消自动播放

结合bv号 改成以下嵌入式代码&#xff08;自适应屏幕大小,取消自动播放&#xff09; <iframe style"width: 100%; aspect-ratio: 16/9;" src"//player.bilibili.com/player.html?isOutsidetrue&bvidBV13CSVYREpr&p1&autoplay0" scrolling…

大模型应用系列:Query 变换的示例浅析

【引】NLP中的经典组件在大模型应用中还有效么&#xff1f;大模型对自然语言处理中的典型任务有什么影响么&#xff1f; RAG应用通过分割文档、嵌入向量化并检索高语义相似性的块来响应用户问题&#xff0c;但面临文档块不相关、用户用词不当及结构化查询需求等问题。若RAG无法…

【Oracle】空格单字符通配符查询匹配失败

问题 在进行模糊查询的时候&#xff0c;通过全局任意字符串匹配出含有两个字刘姓的人&#xff0c;但是通过刘_不能匹配出结果。 解决 检查后发现&#xff0c;姓名中包含空格 SELECT * FROM student WHERE TRIM(sname) LIKE 刘_;第一种解决方案就是查询的时候进行去空格处理&a…

讲讲⾼并发的原则?

大家好&#xff0c;我是锋哥。今天分享关于【讲讲⾼并发的原则&#xff1f;】面试题。希望对大家有帮助&#xff1b; 讲讲⾼并发的原则&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 高并发是指系统在同一时间内能够处理大量请求的能力。要有效地管理…

鸿蒙进阶-AlphabetIndexer组件

大家好&#xff0c;这里是鸿蒙开天组&#xff0c;今天我们来学习AlphabetIndexer组件&#xff0c;喜欢就点点关注吧&#xff01; 通过 AlphabetIndexer 组件可以与容器组件结合&#xff0c;实现导航联动&#xff0c;以及快速定位的效果 核心用法 AlphabetIndexer不是容器组件…

WebGL(Web Graphics Library)

WebGL&#xff08;Web Graphics Library&#xff09;是一种基于 JavaScript 的 API&#xff0c;允许在网页上渲染高性能的 2D 和 3D 图形。它利用计算机的 GPU 来实现硬件加速&#xff0c;因此适合创建游戏、数据可视化和交互式应用程序。 WebGL 的基本概念&#xff1a; 上下文…

nvm使用的方法

nvm——Node版本管理工具_node管理工具-CSDN博客

第四部分 可扩展的架构实践

第四部分 可扩展的架构实践 19. 第19章 对架构影响重大的需求20. 第20章 设计架构21. 第21章 评估架构22. 第22章 记录架构23. 第23章 管理架构债

ubuntu交叉编译expat库给arm平台使用

1.下载expat库源码: https://github.com/libexpat/libexpat/release?page=2 wget https://github.com/libexpat/libexpat/release/download/R_2_3_0/expat-2.3.0.tar.bz2 下载成功: 2.解压expat库,并进入解压后的目录: tar xjf expat-2.3.0.tar.bz2 cd expat-2.3.0 <…

Python中的PDF处理工具:PyPDF2和ReportLab使用指南

Python中的PDF处理工具&#xff1a;PyPDF2和ReportLab使用指南 在日常工作和项目中&#xff0c;PDF 文件处理是个常见需求&#xff0c;不论是合并报告、加密文档、填充表单&#xff0c;还是生成发票。Python 中有许多用于操作 PDF 文件的库&#xff0c;其中 PyPDF2 和 ReportL…

【系统面试篇】进程和线程类(1)(笔记)——区别、通讯方式、同步、互斥、锁分类

目录 一、问题综述 1. 进程和线程的区别&#xff1f; 2. 进程的状态有哪些&#xff1f; 3. 进程之间的通信方式? &#xff08;1&#xff09;管道 &#xff08;2&#xff09;消息队列 &#xff08;3&#xff09;共享内存 &#xff08;4&#xff09;信号量 &#xff08…

delphi 编译多语言工程 error RC2104 : undefined keyword or key name:

Delphi 10.3中建立多语言工程&#xff0c;编译时出现错误&#xff1a;error RC2104 : undefined keyword or key name: 出现错误的的文件是.rc文件&#xff0c;出现错误的位置是 System_JSONConsts_SInvalidJavascriptQuote, L"Invalid JavaScript string quote character…

vue 禁用element-ui calendar 取消非本月日期的点击事件

需求描述&#xff1a;原本的日历组件不是本月的日期是灰色的&#xff0c;且点击后会跳转到对应的月份&#xff0c;现在不想它跳转&#xff0c;需要禁用它的点击事件 方法&#xff1a;使用css的pointer-events:none属性即可&#xff0c;把不是当前月份的日历表格的td属性修改 :…

nginx(四):如何在 Nginx 中配置以保留真实 IP 地址

如何在 Nginx 中配置以保留真实 IP 地址 1、概述2、nginx配置示例2.1、配置说明2.2、客户端获取真实IP2.2.1、代码说明 3、插曲4、总结 大家好&#xff0c;我是欧阳方超&#xff0c;可以我的公众号“欧阳方超”&#xff0c;后续内容将在公众号首发。 1、概述 当使用nginx作为…

传统的自然语言处理评估指标

目录 传统的自然语言处理评估指标 EM(Exact Match) BLEU(Bilingual Evaluation Understudy) 传统的自然语言处理评估指标 传统评估指标 EM(Exact Match) 计算方式:如果生成的答案与参考答案完全相同(字符级完全匹配),则 EM 得分为 1,否则为 0。这是一种比较严格的…

DiskGenius工具扩容Mac OS X Apple APFS分区

DiskGenius是一款功能强大的磁盘分区工具&#xff0c;它支持Windows和Mac OS X系统&#xff0c;可以用于管理硬盘分区&#xff0c;包括扩容Mac OS X的Apple APFS分区。然而&#xff0c;直接使用DiskGenius来扩容Mac OS X的APFS分区可能存在一定的风险&#xff0c;因为不是专门为…

C++《list的模拟实现》

在上一篇C《list》专题当中我们了解了STL当中list类当中的各个成员函数该如何使用&#xff0c;接下来在本篇当中我们将试着模拟实现list&#xff0c;在本篇当中我们将通过模拟实现list过程中深入理解list迭代器和之前学习的vector和string迭代器的不同&#xff0c;接下来就开始…

【Python基础】第02节课:数字与盒子的奇妙冒险

数字与盒子的奇妙冒险 1. 引言2. 算术运算符探险3. 运算顺序小挑战4. 计算小能手5 生活中的数学:帮妈妈买鸡蛋6. 变量小盒子6.1 变量的小故事:小猴子的果园探险1. 引言 想象一下,你手里有一个神秘的盒子,里面藏着数学和编程的秘密!你知道吗?在我们的日常生活中,尤其是玩…

本篇万字,博客最细,oled多级菜单代码解析,与实现教程,指针实现(含源码)!!!

目录 教程前言 多级菜单基本知识 驱动文件创建 ​编辑 ​编辑 ​编辑 定义菜单数据类型代码解析 按键代码解析 菜单数据赋值代码解析 菜单按键切换显示代码解析 项目工程移植地址 教程前言 前言&#xff1a;编写不易&#xf…

华为HarmonyOS打造开放、合规的广告生态 - 贴片广告

场景介绍 贴片广告是一种在视频播放前、视频播放中或视频播放结束后插入的视频或图片广告。 接口说明 接口名 描述 loadAd(adParam: AdRequestParams, adOptions: AdOptions, listener: AdLoadListener): void 请求单广告位广告&#xff0c;通过AdRequestParams、AdOptions…