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

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

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

前言

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

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

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

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