当前位置： 首页 > article >正文

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

article 2024/11/19 5:28:02

一、引言

我关注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请求。以下是它们的工作流程：

  1. 用户交互：用户在前端页面上进行操作，如点击按钮或提交表单。
  2. AJAX请求：前端JavaScript捕获这些操作并发起AJAX请求到后端。
  3. 路由处理：后端的Express应用使用router来接收AJAX请求，并根据请求的URL和方法将请求路由到相应的处理函数。
  4. 业务逻辑：后端处理函数执行业务逻辑，如查询数据库或执行计算。
  5. 响应返回：后端将处理结果以JSON或XML的形式返回给前端。
  6. 页面更新：前端接收到后端的响应后，使用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部分的案例，并执行出来。


http://www.kler.cn/a/399676.html

相关文章：

  • 浅谈数据仓库的架构及其演变
  • resnet50,clip，Faiss+Flask简易图文搜索服务
  • RabbitMQ-死信队列(golang)
  • Restful API接⼝简介及为什么要进⾏接⼝压测
  • Flutter中的Material Theme完全指南：从入门到实战
  • 使用Web Animations API实现复杂的网页动画效果
  • ✅DAY27贪心算法 | 455.分发饼干 | 376. 摆动序列 | 53. 最大子序和
  • 认证鉴权框架SpringSecurity-6--6.x版本升级篇
  • IQ Offset之工厂实例分析
  • 一文简单了解Android中的input流程
  • QT5.14*解决QSslSocket::connectToHostEncrypted: TLS initialization faile
  • 网络常用特殊地址-127.0.0.1
  • SRP 实现 Cook-Torrance BRDF
  • 网络物理隔离技术
  • 一文了解清楚oracle数据库undo表空间
  • 前端人之网络通信概述
  • 重构Action-cli前端脚手架
  • 【jvm】如何判断一个对象是否可以回收
  • 力扣经典面试题
  • 【原创】java+ssm+mysql商品库存管理系统（进销存）设计与实现
  • Springboot如何打包部署服务器
  • matlab的函数名和函数文件名的关系（编程注意事项）
  • 深入解析 Vue 3 中的 watch 和 watchEffect
  • 基于Lora通讯加STM32空气质量检测WIFI通讯
  • 一个简单的图像分类项目（九）并行训练的学习：多GPU的DP（DataParallel数据并行）
  • 删除缓存之后，浏览器显示登录新设备