nodejs入门（1）：nodejs的前后端分离

🕗 发布于 2024-11-18 07:50 java javascript nodejs

一、引言

我关注nodejs还是从前几年做了的一个电力大数据展示系统开始的，当然，我肯定是很多年的计算机基础的，万变不离其宗。

现在web网站都流行所谓的前后端结构，不知不觉我也开始受到这个影响，以前都是前端直接操作ODBC、ADO等链接到数据库，不分什么前端后端的。现在大家都讲究了，一个后端web服务器来处理后台的数据库，格式化输出前端请求的数据；浏览器和前端web服务器交互，前端web服务器和后端web服务器进行交互，前端web服务器向后端的web服务器请求数据，对后端服务器得到请求后将数据传递给前端web服务器，格式化后由浏览器展示。

当然，这里是将前后端严格分离的一种状态。

二、案例

我们将按照前后端分离的要求，将项目分为两个目录：`server` 和 `client`。`server` 目录将包含后端代码，使用端口3000；`client` 目录将包含前端代码，使用端口80。以下是案例：

1、项目结构

my-web-app/
|-- server/
|   |-- node_modules/
|   |-- package.json
|   `-- app.js
`-- client/
    |-- node_modules/
    |-- package.json
    |-- public/
    |   |-- index.html
    |   `-- script.js
    `-- server.js

2、后端 (server/app.js)

1）.初始化后端项目:
在 `server` 目录中运行以下命令来初始化项目：
npm init -y
npm install express body-parser
2）创建后端服务器:
在 `server` 目录中创建 `app.js` 文件，并添加以下代码：

   const express = require('express');
   const bodyParser = require('body-parser');

   const app = express();
   const port = 3000;

   // 用于解析JSON格式的请求体
   app.use(bodyParser.json());

   // 用于解析application/x-www-form-urlencoded格式的请求体
   app.use(bodyParser.urlencoded({ extended: true }));

   // API路由
   app.get('/api/data', (req, res) => {
     res.json({ message: 'Hello from the server!' });
   });

   // 启动服务器
   app.listen(port, () => {
     console.log(`Server running on port ${port}`);
   });

3、前端 (client)

1）.初始化前端项目:
在 `client` 目录中运行以下命令来初始化项目：
npm init -y
npm install express
2）.创建前端服务器:
在 `client` 目录中创建 `server.js` 文件，并添加以下代码：

 const express = require('express');
   const app = express();
   const port = 80;

   // 静态文件服务
   app.use(express.static('public'));

   // 启动服务器
   app.listen(port, () => {
     console.log(`Client server running on port ${port}`);
   });

3）创建静态文件:
在 `client` 目录中创建 `public` 文件夹，并在其中创建 `index.html` 和 `script.js` 文件。 - public/index.html:

<!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Simple Web App</title>
     </head>
     <body>
       <h1>Simple Web App</h1>
       <button id="fetchData">Fetch Data from Server</button>
       <p id="data"></p>

       <script src="script.js"></script>
     </body>
     </html>

public/script.js:

document.getElementById('fetchData').addEventListener('click', function() {
  fetch('http://localhost:3000/api/data')
    .then(response => response.json())
    .then(data => {
      document.getElementById('data').textContent = data.message;
    })
    .catch(error => console.error('Error:', error));
});

4、运行项目

1）启动后端服务器: 在 server 目录下运行以下命令来启动后端服务器：

node app.js

2）启动前端服务器:

在 client 目录下运行以下命令来启动前端服务器：

npm run client

3）访问应用:

打开浏览器并访问 http://localhost，你将看到“Simple Web App”的标题和一个按钮。点击按钮，页面将通过JavaScript从后端API获取数据，并在页面上显示。

这样，我们就创建了一个简单的前后端分离的Web应用，其中后端使用Node.js和Express框架提供API，前端使用HTML和JavaScript来请求数据并显示在页面上。

三、nodejs简介

Node.js是一个开源且跨平台的JavaScript运行时环境，它几乎适用于任何类型的项目！

Node.js运行V8 JavaScript引擎，这是Google Chrome的核心，但脱离了浏览器环境。这使得Node.js性能非常出色。

Node.js应用在一个单一进程中运行，不会为每个请求创建新线程。Node.js在其标准库中提供了一组异步I/O原语，这些原语阻止了JavaScript代码的阻塞行为，通常，Node.js中的库都是使用非阻塞范式编写的，使得阻塞行为成为例外而非常态。

当Node.js执行I/O操作时，比如从网络读取、访问数据库或文件系统，它不会阻塞线程并浪费CPU周期等待，而是在响应回来时恢复操作。

这使得Node.js能够用单个服务器处理成千上万的并发连接，而不需要引入管理线程并发的负担，这可能是产生错误的一个重要源头。

Node.js有一个独特的优势，因为数百万为浏览器编写JavaScript的前端开发者现在也能够编写服务器端代码，而不需要学习完全不同的语言。

在Node.js中，可以无障碍地使用新的ECMAScript标准，因为你不需要等待所有用户更新他们的浏览器——你可以通过更改Node.js版本来决定使用哪个ECMAScript版本，也可以通过运行带有标志的Node.js来启用特定的实验性功能。

一个Node.js应用示例
Node.js最常见的示例“Hello World”是一个Web服务器：

const { createServer } = require('node:http');
const hostname = '127.0.0.1';
const port = 3000;
const server = createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

要运行这段代码，请将其保存为server.js文件，并在终端中运行node server.js。

这段代码首先引入了Node.js的http模块。
Node.js拥有一个出色的标准库，包括对网络的一级支持。
http的createServer()方法创建了一个新的HTTP服务器并返回它。
服务器被设置为监听指定的端口和主机名。当服务器准备好时，回调函数被调用，在这种情况下是通知我们服务器正在运行。
每当收到新的请求时，会触发请求事件，提供两个对象：一个请求（一个http.IncomingMessage对象）和一个响应（一个http.ServerResponse对象）。
这两个对象对于处理HTTP调用至关重要。
第一个对象提供了请求详情。在这个简单的例子中，这个对象没有被使用，但你可以通过它访问请求头和请求数据。
第二个对象用于向调用者返回数据。

在这个例子中：

res.statusCode = 200;
我们将statusCode属性设置为200，表示成功响应。

我们设置Content-Type头部：

res.setHeader('Content-Type', 'text/plain');
然后我们结束响应，在end()方法的参数中添加内容：

res.end('Hello World\n');

四、几个常见的概念

在基于Node.js的应用中，前端、后端、router（路由器）、API接口、AJAX各自扮演着不同的角色，并且它们之间有着紧密的联系。下面我将解释每个概念的作用，并举例说明它们是如何相互联系的。

1. 前端（Frontend）

作用：前端指的是用户直接与之交互的应用程序部分，通常是通过Web浏览器访问的。它负责展示用户界面（UI）和用户体验（UX）。

在Node.js中：虽然Node.js主要用于后端开发，但你可以利用Node.js的http模块或express框架来提供前端资源（如HTML、CSS、JavaScript文件），或者作为前端构建工具（如Webpack）的服务器。

举例：在一个基于Node.js的电商网站中，前端页面会展示商品列表、购物车、用户登录界面等。

2. 后端（Backend）

作用：后端是指服务器端的应用程序，处理业务逻辑、数据库交互、身份验证等。它为前端提供API接口，处理前端发送的请求，并返回数据。

在Node.js中：Node.js作为后端平台，使用JavaScript来编写服务器端代码。你可以使用Express框架来简化HTTP请求的处理。

举例：在上述电商网站中，后端会处理用户登录、商品信息的检索、订单处理等。

3. Router（路由器）

定义：在Web开发中，router通常指的是一个组件或服务，它负责根据请求的URL和HTTP方法（如GET、POST等）将请求路由到相应的处理函数或控制器。
作用：router的主要作用是决定如何处理进入应用的请求，并将其分发到正确的处理逻辑。
位置：在前端框架中（如React Router、Vue Router），router用于控制页面路由和导航。在后端框架中（如Express中的路由器），它用于处理服务器端的请求路由。

举例：在Express中，你可能会有如下的路由定义：

app.get('/api/users', function(req, res) {
  res.send('用户列表');
});

4. API接口

定义：API接口（Application Programming Interface）是指一组预定义的函数、协议和工具，用于构建软件应用。在Web开发中，API接口通常指的是后端系统对外提供服务的端点（Endpoint）。
作用：API接口允许不同的软件应用之间进行交互，它定义了请求的格式、预期的响应以及可能的错误代码。它使得前端应用能够与后端服务进行通信。
位置：API接口是后端系统的一部分，它们定义了后端服务的功能和数据交换的规则。

举例：一个RESTful API接口可能看起来像这样：

GET /api/users => 获取用户列表
POST /api/users => 创建新用户
PUT /api/users/:id => 更新指定ID的用户
DELETE /api/users/:id => 删除指定ID的用户

5. Router和API接口的关系

联系：在后端应用中，router用于定义API接口的路由规则，即哪个URL对应哪个API接口。router处理的是HTTP请求的分发，而API接口定义了请求和响应的具体格式。
区别：router关注的是请求如何被分配到不同的处理函数，而API接口关注的是如何处理这些请求以及如何响应。
协同工作：在实际应用中，router和API接口是协同工作的。router根据请求的URL和方法将请求路由到对应的API接口处理函数，然后API接口执行具体的业务逻辑，并返回相应的数据。

6. AJAX

作用：AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

在Node.js中：虽然AJAX主要在客户端使用，但在基于Node.js的应用中，AJAX请求会被后端的Express应用接收和处理。Node.js后端可以响应这些异步请求，并返回JSON或XML数据。

举例：在电商网站的购物车页面，用户可以点击一个按钮来更新购物车中的商品数量。这个按钮的点击事件会触发一个AJAX请求到后端的/api/cart/update路由，后端处理这个请求并更新数据库中的购物车信息，然后返回更新后的结果。

7. 相互联系

在一个基于Node.js的Web应用中，前端通过AJAX与后端通信，后端使用router来处理这些AJAX请求。以下是它们的工作流程：

用户交互：用户在前端页面上进行操作，如点击按钮或提交表单。
AJAX请求：前端JavaScript捕获这些操作并发起AJAX请求到后端。
路由处理：后端的Express应用使用router来接收AJAX请求，并根据请求的URL和方法将请求路由到相应的处理函数。
业务逻辑：后端处理函数执行业务逻辑，如查询数据库或执行计算。
响应返回：后端将处理结果以JSON或XML的形式返回给前端。
页面更新：前端接收到后端的响应后，使用JavaScript更新页面的相应部分，而不需要重新加载整个页面。

这个流程展示了前端、后端、router和AJAX如何在基于Node.js的应用中协同工作，以提供流畅的用户体验。

五、练习

1.下载nodejs：Node.js — 在任何地方运行 JavaScript

2. 安装完毕后，在终端中输入：node -v，能显示正确的版本，表示安装成功。

3. 安装npm中文镜像cnpm： npm install -g cnpm --registry=https://registry.npm.taobao.org

4. 如果更新或者安装包出现证书失效，可以临时绕过 SSL 验证：

npm config set strict-ssl false

5. 在一个新的目录下新建一个nodejs项目，使用： npm init。并创建一个package.json文件。这个文件记录了项目的元数据和配置信息，包括项目的依赖关系、脚本、版本号等。 npm init 会提示你输入一些信息，包括项目名称、版本、描述、入口点、测试命令等。对于一个名为 "test" 的项目，你可能需要回答以下问题：

name: （默认是当前目录的名字）test
version: （默认是 1.0.0）
description: 你的项目描述
entry point: （默认是 index.js）
test command: 测试脚本命令
git repository: git 仓库地址
keywords: 关键词
author: 作者信息
license: 许可证类型

你可以按回车键接受默认值，或者输入新的值。

6. 安装一个新矿建express.js： npm install express。

7.完成第2部分的案例，并执行出来。

原文地址：https://blog.csdn.net/caridle/article/details/143833727

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【字符串】给定一个字符串 text 和字符串列表 words，返回 words 中每个单词在 text 中的位置（要求最终的位置从小到大进行排序）
下一篇：wife_wife

[产品管理-85]：《产品经理从入门到精通》- 创业公司的产品经理
目录一、概述1、创业公司产品经理的角色与定位2、创业公司产品经理的核心能力3、创业公司产品经理的实战技巧4、创业公司产品经理的挑战与应对策略二、创业公司的产品经理与大公司产品经理的比较1、工作环境与资
阅读更多2024-11-18
《TCP/IP网络编程》学习笔记 | Chapter 13：多种 I/O 函数
《TCP/IP网络编程》学习笔记 | Chapter 13：多种 I/O 函数
阅读更多2024-11-18
解决IntelliJ IDEA的Plugins无法访问Marketplace去下载插件
勾选并填入代理URL，可以先做检查连接：
阅读更多2024-11-18
STM32读写内部FLASH
本文是学习野火的指南针开发板过程的学习笔记，可能有误，详细请看B站野火官方配套视频教程（这个教程真的讲的很详细，请给官方三连吧）在STM32芯片内部有一个FLASH存储器，它主要用于存储代码，我们在电
阅读更多2024-11-18
【STM32】基于SPI协议读写SD，详解！
因为项目需要，使用stm32读写sd卡，这一块网上的资料很多，但是比较杂乱。有些是不能跑，有些是代码可以跑，但是相关的注释或者配置方法、流程不够清晰明确，于是花了几天时间，研究了几个成功案例之后，总结
阅读更多2024-11-18
Java基础（9）本地API
哈喽大家好啊，Java基础的学习马上就要告一段落了，今儿分享的是一些Java常用的本地API，让我们开始吧。
阅读更多2024-11-18
Spring gateway 路由配置在数据库
#spring gateway ServerRoute实体类。##spring gateway 查询动态路由mapper。##Spring gateway 动态路由Service。##spring g
阅读更多2024-11-18
i春秋-FUZZ（python模板注入、base64编码命令执行）
i春秋-FUZZ（python模板注入、base64编码命令执行）
阅读更多2024-11-18
Spring 4.3 源码导读
Spring 4 是一个功能强大的 Java 应用程序框架，广泛用于企业级应用开发。理解其核心代码有助于开发者更好地使用和优化 Spring 框架。
阅读更多2024-11-18
【Rabbitmq篇】RabbitMQ⾼级特性----消息确认
介绍RabbitMQ⾼级特性----消息确认
阅读更多2024-11-18