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

news2024/11/5 21:59:10

​🌈个人主页:前端青山
🔥系列专栏: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.coloradmin.cn/o/2233846.html

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

相关文章

favicon是什么文件?如何制作网站ico图标?

一般我们做网站的话&#xff0c;都会制作一个独特的ico图标&#xff0c;命名为favicon.ico。这个ico图标一般会出现在浏览器网页标题前面。如下图红色箭头所示&#xff1a; 部分博客导航大全也会用到所收录网站的ico图标。比如boke123导航新收录的网站就不再使用网站首页缩略图…

“大跳水”的全新奥迪A3,精准狙击年轻人的心

文/王俣祺 导语&#xff1a;随着传统豪华品牌在国内市场的全面崩盘&#xff0c;奥迪再一次坐不住了。这次&#xff0c;奥迪“割肉”的目标瞄准了被称为“年轻人第一台豪车”的奥迪A3&#xff0c;这款车问世以来&#xff0c;就凭借出色的性能与品质收获了一大批年轻粉丝。如今&a…

两台手机如何提词呢,一台手机后置高清摄像一台手机前置提词+实时监测状态的解决方案来喽

拍视频只会用前置摄像头可不行啊&#xff0c; 后置高清才会更有流量&#xff0c; 你看哦&#xff0c;我用的是后置摄像头拍摄&#xff0c; 然后前面就用来提词&#xff0c; 它不光能提词&#xff0c; 和其他家不一样的是&#xff0c; 还能把后面手机画面投影到前面手机 这样呀&…

[SWPUCTF 2021 新生赛]easy_sql的write up

开启NSSCTF靶场&#xff0c;在浏览器中访问链接&#xff0c;看到让我们输入点什么还有标签页名字提示&#xff1a; "参数是wllm" 直接/?wllm1访问一下&#xff1a; 这里就直接用sqlmap直接爆破了&#xff1a; 查看数据库有哪些&#xff1a; python sqlmap.py -u …

Tr2 CYT2B75使用记录(二):GPIO、串口、CAN(FD)和busoff检测、看门狗和复位原因

目录 概述GPIO串口1.FIFO2.中断 CANFDRX Buffer and FIFO ElementTX Buffer Elementbusoff 检测 看门狗复位原因 待梳理 概述 GPIO 1.如何定位IO的作用 2.读取电平必须为输入模式 串口 熟悉手册串口特性如下&#xff1a; ■ 数据帧大小可从4位编程到16位 ■ STOP位的可编程…

Android13 系统/用户证书安装相关分析总结(二) 如何增加一个安装系统证书的接口

一、前言 接着上回说&#xff0c;最初是为了写一个SDK的接口&#xff0c;需求大致是增加证书安装卸载的接口&#xff08;系统、用户&#xff09;。于是了解了一下证书相关的处理逻辑&#xff0c;在了解了功能和流程之后&#xff0c;发现settings中支持安装的证书&#xff0c;只…

【Java语言】继承和多态(一)

继承 继承就是实现代码的复用&#xff1b;简而言之就是重复的代码作为父类&#xff08;基类或超类&#xff09;&#xff0c;而不同的可以作为子类&#xff08;派生类&#xff09;。如果子类想要继承父类的成员就一定需要extends进行修饰&#xff08;如&#xff1a;&#xff08;…

04_CC2530+Uart串口通信

04_CC2530UART串口通信 串口通信基本概念 串行通信: 数据字节一位位地依次传送的通信方式, 串行通信的速度慢, 但用的传输线条数少, 成本低&#xff0c;适用于远距离的数据传送并行通信: 数据字节的各位同事传送的通信方式, 优点是数据传送速度快, 缺点是占用的传输线条数多,…

【计算机网络安全】湖北大学–DNS欺骗实验

目录 0x00 ettercap-原理 0x01 ettercap-arp欺骗 0x02 ettercap-dns劫持 0x00 ettercap-原理 攻击者冒充域名服务器&#xff0c;然后把查询的IP地址设为攻击者的IP地址。这样的话&#xff0c;用户上网就只能看到攻击者的主页&#xff0c;而不是用户想要取得的网站。 首先&…

雷池社区版新版本功能防绕过人机验证解析

前两天&#xff0c;2024.10.31&#xff0c;雷池社区版更新7.1版本&#xff0c;其中有一个功能&#xff0c;新增请求防重放 更新记录&#xff1a;hhttps://docs.waf-ce.chaitin.cn/zh/%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95 仔细研究了这个需求&#xff0c;…

【深度学习基础】深入理解 卷积与卷积核

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;深度学习_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 卷积 1.1 …

SpringBoot集成Shiro+Jwt+Redis

1. 概述 首先需要知道为什么使用 ShiroJwtRedis 进行登录认证和权限控制。 1. 为什么用Shiro&#xff1f; 主要用的是 shiro 的登录认证和权限控制功能。 Shiro 参见本栏目文章 &#x1f343;《Shiro实战》 2. 为什么用Jwt&#xff1f; Shiro 默认的 Session 机制来帮助实现…

基于Python的乡村居民信息管理系统【附源码】

基于Python的乡村居民信息管理系统 效果如下&#xff1a; 系统主页面 系统登录页面 管理员主页面 居民管理页面 政务学习页面 土地信息管理页面 个人信息管理页面 居民登陆页面 村委人员主页面 研究背景 随着信息技术的飞速发展和乡村振兴战略的深入实施&#xff0c;传统的乡…

HTML 基础标签——表单标签<form>

文章目录 1. `<form>` 标签:定义表单容器2. `<input>` 标签:多用途输入控件3. `<textarea>` 标签:多行文本输入框4. `<select>` 标签:下拉选择框5. `<option>` 标签:下拉菜单选项6. `<button>` 标签:按钮元素7. `<label>` 标签…

Debian的基本使用

前言 本人撰写的相关文档中&#xff0c;部分技术已经不再提供支持了&#xff08;不得不感慨&#xff0c;菜鸡的个人进步追不上技术更新啊&#xff09;&#xff0c;比如Centos、EasyExcel&#xff0c;虽然说目前仅使用还没有什么问题&#xff0c;但是还是要了解一下备用方案。 …

比亚迪能不能打败特斯拉?

文/孔文清 比亚迪在第三季度的财报发布后&#xff0c;首次在营收上超越了特斯拉&#xff0c;这是电动汽车行业的重要时刻&#xff0c;也反映了中国产业在全球市场中的崛起。 比亚迪在其2024年第三季度财报中首次实现了2011.2亿元的营业收入&#xff0c;相比特斯拉的1793亿元&a…

什么情况下,不推荐建立索引?

一般有以下几种情况不推荐建立索引&#xff1a; 1&#xff09;对于数据量很小的表 当表的数据量很小&#xff08;如几百条记录&#xff09;时&#xff0c;建立索引并不会显著提高查询性能&#xff0c;反而可能增加管理的复杂性&#xff1b; 2&#xff09;频繁更新的表 对于…

深度学习基础知识-残差网络ResNet

目录 一、ResNet 的核心思想&#xff1a;残差学习&#xff08;Residual Learning&#xff09; 二、ResNet 的基本原理 三、ResNet 网络结构 1. 残差块&#xff08;Residual Block&#xff09; ResNet 的跳跃连接类型 2. 网络结构图示 四、ResNet 的特点和优势 五、ResNe…

做反向代购没货源,也能靠“东方玄学”风生水起?

在全球化日益加深的今天&#xff0c;文化的交流与碰撞愈发频繁。近年来&#xff0c;一股神秘的东方力量——风水玄学&#xff0c;在海外社交媒体上悄然走红&#xff0c;成为众多外国友人追捧的新风尚。从TikTok到Instagram&#xff0c;无数华人博主通过分享风水知识、解读玄学饰…

新闻稿件管理:SpringBoot框架实战指南

3系统分析 3.1可行性分析 通过对本新闻稿件管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本新闻稿件管理系统采用SSM框架&#xff0c;JAVA作为开发语…