nodejs入门（1）：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请求。以下是它们的工作流程：

  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部分的案例，并执行出来。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

go语言闭包捕获的是变量的引用而不是变量的值

go语言闭包捕获的是变量的引用而不是变量的值

在 Go 语言中&#xff0c;闭包捕获的是变量的引用&#xff0c;而不是变量的值。这意味着闭包会引用循环变量或外部变量的实际内存位置&#xff0c;而不是在闭包创建时复制变量的值。这种行为有时会导致意外的结果&#xff0c;尤其是在循环中创建多个闭包时。 闭包捕获变量的引…
阅读更多...
记录eslint报错的情况

记录eslint报错的情况

这几天在调试vue的eslint&#xff0c;害&#xff0c;我领导说eslint要打开规范代码&#xff0c;顺带看了一下eslint的规则&#xff0c;并且研究一下报错。切记每次修改了.eslintrc配置文件&#xff0c;需要重启项目再查看控制台&#xff0c;否则之前的报错会一直存在。 第一个…
阅读更多...
Flink错误：一historyserver无法启动，二存在的文件会报错没有那个文件或目录

Flink错误：一historyserver无法启动，二存在的文件会报错没有那个文件或目录

一.historyserver无法启动 historyserver执行了启动命令后却没有启动&#xff0c;而且也没有报错&#xff0c;如果日志无法启动的话网页8082是无法访问的 只能去查看日志 去flink的log文件查看日志&#xff1a; 发现应该是缺包了&#xff0c;导入jar包后可以解决 &#xff1a…
阅读更多...
QT实操中遇到的一些（C++）疑惑点汇总

QT实操中遇到的一些（C++）疑惑点汇总

QT实操中 遇到的一些C疑惑点汇总 1.实例化对象的两种方法及其访问方式 1.1 示例 1.2 总结 2.基类成员的访问 2.1 直接访问继承的基类成员 2.1.1示例代码 2.1.2 输出结果 2.2 使用作用域解析符来显式调用基类成员函数 2.2.1 示例代码 2.2.2 输出结果 2.3 使用 this 指针访问基类…
阅读更多...
【运维自动化-作业平台】如何使用全局变量之数组类型？

【运维自动化-作业平台】如何使用全局变量之数组类型？

数组类型的全局变量也是作业平台里常用的&#xff0c;支持关联数组和索引数组&#xff0c;目前仅支持shell&#xff0c;语法跟shell一致。索引数组 语法 arry(1 2 3 a b c) ---定义一个数组arry ${arry[*]} ---获取所有数组元素 ${arry[]} ---获取所有数组元素 ${arry[0]} --…
阅读更多...
docker安装zabbix +grafana

docker安装zabbix +grafana

安装zabbix grafana 1、部署 mkdir -p /opt/zabbix/{data,backups}mkdir -p /opt/grafanasudo chown -R 472:472 /opt/grafanasudo chmod -R 755 /opt/grafanacat > docker-compose.yml <<-EOF version: 3.3services:mysql-server:image: mysql:8.1container_name: m…
阅读更多...
容器安全检测和渗透测试工具

容器安全检测和渗透测试工具

《Java代码审计》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484219&idx1&sn73564e316a4c9794019f15dd6b3ba9f6&chksmc0e47a67f793f371e9f6a4fbc06e7929cb1480b7320fae34c32563307df3a28aca49d1a4addd&scene21#wechat_redirect Docker-bench-…
阅读更多...
GB 35114-2017 学习笔记（规避版权阉割版）

GB 35114-2017 学习笔记（规避版权阉割版）

GB 35114-2017 学习笔记&#xff08;规避版权阉割版&#xff09; openstd.samr.gov.cn 国家标准全文公开系统 这个政府网站提供GB 35114-2017标准的的预览和下载&#xff0c;有需要的自行下载 GB 35114-2017作为一个国家强制标准&#xff0c;在国家标准全文公开系统 自己做个…
阅读更多...
高校企业数据挖掘平台推荐

高校企业数据挖掘平台推荐

TipDM数据挖掘建模平台是由广东泰迪智能科技股份有限公司自主研发打造的可视化、一站式、高性能的数据挖掘与人工智能建模服务平台&#xff0c;致力于为使用者打通从数据接入、数据预处理、模型开发训练、模型评估比较、模型应用部署到模型任务调度的全链路。平台内置丰富的机器…
阅读更多...
ROSSERIAL与Arduino IDE交叉开发（UBUNTU环境，包含ESP32、arduino nano）

ROSSERIAL与Arduino IDE交叉开发（UBUNTU环境，包含ESP32、arduino nano）

ROSSERIAL与Arduino IDE交叉开发 一、简介二、安装1、Ubuntu下的Arduino IDE安装 **针对ESP32报错问题原因溯源和修改**三、运行结点 一、简介 这个教程展示在ubuntu环境下如何利用Arduino IDE配合rosserial开发机器人部件。通过Arduino IDErosserial实现arduino/esp32开发板通…
阅读更多...
英语作文短句

英语作文短句

阅读更多...
word-毕业论文的每一章节的页眉单独设置为该章的题目怎么设置

word-毕业论文的每一章节的页眉单独设置为该章的题目怎么设置

在Microsoft Word中&#xff0c;为毕业论文的每个章节设置不同的页眉&#xff0c;通常需要使用“分节符”来分隔各个章节&#xff0c;然后在每个章节中单独设置页眉。以下是详细步骤&#xff1a; 使用分节符 插入分节符&#xff1a; 将光标放在每个章节的末尾&#xff08;注意…
阅读更多...
Flutter：SlideTransition位移动画，Interval动画延迟

Flutter：SlideTransition位移动画，Interval动画延迟

配置vsync&#xff0c;需要实现一下with SingleTickerProviderStateMixinclass _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{// 定义 AnimationControllerlate AnimationController _controller;overridevoid initState() {super.…
阅读更多...
H.265流媒体播放器EasyPlayer.js网页全终端安防视频流媒体播放器可以播放本地视频吗

H.265流媒体播放器EasyPlayer.js网页全终端安防视频流媒体播放器可以播放本地视频吗

H.264/H.265播放器EasyPlayer.js主要用于在网页上实现视频播放功能&#xff0c;特别是针对RTSP流的播放。它允许开发者在不需要安装额外插件或软件的情况下&#xff0c;直接在网页中嵌入和播放来自监控摄像头或其他RTSP源的视频流。 可以播放本地视频吗&#xff1f; 回答&…
阅读更多...
Linux: 任务的定时与延期

Linux: 任务的定时与延期

概述 ls 这种命令是立刻执行的命令&#xff0c;在linux中命令还可以延时执行&#xff0c;它们都涉及到时间的观念 常用命令 先来看下有关系统时间的规格 1 &#xff09; date 命令调节时间 $ date 显示当前时间还可以去定制 date 的一个输出, $ man date 可自定义输出 $ d…
阅读更多...
RBAC——基于角色的访问控制

RBAC——基于角色的访问控制

目录 一、RBAC核心概念 1. 角色&#xff08;Role&#xff09; 2. 用户&#xff08;User&#xff09; 3. 权限&#xff08;Permission&#xff09; 4. 会话&#xff08;Session&#xff09; 二、RBAC模型的演进 1. RBAC0&#xff1a;基本模型 2. RBAC1&#xff1a;角色…
阅读更多...
OceanBase V4.x应用实践：如何排查表被锁问题

OceanBase V4.x应用实践：如何排查表被锁问题

DBA在日常工作中常常会面临以下两种常见情况&#xff1a; 业务人员会提出问题&#xff1a;“表被锁了&#xff0c;导致业务受阻&#xff0c;请帮忙解决。” 业务人员还会反馈&#xff1a;“某个程序通常几秒内就能执行完毕&#xff0c;但现在却运行了好几分钟&#xff0c;不清楚…
阅读更多...
同三维T80003JEHS 4K/60帧HDMI/SDI超高清H.265解码器

同三维T80003JEHS 4K/60帧HDMI/SDI超高清H.265解码器

1路HDMI和1路SDI输出&#xff0c;1路3.5音频输入和1路3.5音频输出&#xff0c;1个USB2.0口1个USB3.0口&#xff0c;带1个RS232串口&#xff0c;2个网口&#xff0c;支持1路4K60或4路4K30或16路1080P或32路720P解码输出。4种画面分割显示模式。 产品简介&#xff1a; 同三维T80…
阅读更多...
【更新中】《硬件架构的艺术》笔记（五）：低功耗设计

【更新中】《硬件架构的艺术》笔记（五）：低功耗设计

介绍 能量以热量形式消耗&#xff0c;温度升高芯片失效率也会增加&#xff0c;增加散热片或风扇会增加整体重量和成本&#xff0c;在SoC级别对功耗进行控制就可以减少甚至可能消除掉这些开支&#xff0c;产品也更小更便宜更可靠。本章描述了减少动态功耗和静态功耗的各种技术。…
阅读更多...
网络安全审计概述与分类

网络安全审计概述与分类

目录 网络安全审计概述等保五个级别对审计要求网络安全审计系统组成网络安全审计系统类型 网络安全审计概述 4A分别是认证、授权、账号、审计 网络安全审计是指对网络信息系统的安全相关活动信息进行获取、记录、存储分析和利用的工作。 网络安全审计的作用在于建立“事后”…
阅读更多...
最新文章

Copyright @ 2022~2023