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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

前端开发之打印功的使用和实例（vue-print-nb）

前端开发之打印功的使用和实例（vue-print-nb）

通过插件来进行实现 前言效果图1、安装插件vue2vue32、 引入Vue项目2、 使用2.1、在项目中创建按钮并且使用v-print绑定绑定打印事件2.2、编写要打印的内容，给内容附加唯一的id2.3、绑定的时间的方法和参数3、整体代码（此代码是通过vue3来进行实现的但是逻辑都是一样的）前言…
阅读更多...
一文简单了解Android中的input流程

一文简单了解Android中的input流程

在 Android 中&#xff0c;输入事件&#xff08;例如触摸、按键&#xff09;从硬件传递到应用程序并最终由应用层消费。整个过程涉及多个系统层次&#xff0c;包括硬件层、Linux 内核、Native 层、Framework 层和应用层。我们将深入解析这一流程&#xff0c;并结合代码逐步了解…
阅读更多...
opencv kdtree pcl kdtree 效率对比

opencv kdtree pcl kdtree 效率对比

由于项目中以一个环节需要使用kdtree ,对性能要求比较严苛&#xff0c;所以看看那个kdtree效率高一些。对比了opencv和pcl。 #include <array> #include <deque> #include <fstream> #include <opencv2/highgui.hpp> #include <opencv2/imgproc.hpp…
阅读更多...
学习日志011--模块，迭代器与生成器，正则表达式

学习日志011--模块，迭代器与生成器，正则表达式

一、python模块 在之前学习c语言时&#xff0c;我们学了分文件编辑&#xff0c;那么在python中是否存在类似的编写方式&#xff1f;答案是肯定的。python中同样可以实现分文件编辑。甚至还有更多的好处&#xff1a; ‌提高代码的可维护性‌&#xff1a;当代码被分成多个文件时…
阅读更多...
idea 弹窗 delete remote branch origin/develop-deploy

idea 弹窗 delete remote branch origin/develop-deploy

想删除远程分支&#xff0c;就选delete&#xff0c;仅想删除本地分支&#xff0c;选cancel&#xff1b; 在 IntelliJ IDEA 中遇到弹窗提示删除远程分支 origin/develop-deploy&#xff0c;这通常是在 Git 操作过程中出现的情况&#xff0c;可能是在执行如 git branch -d 或其他…
阅读更多...
湘潭大学软件工程算法设计与分析考试复习笔记（一）

湘潭大学软件工程算法设计与分析考试复习笔记（一）

文章目录 前言随机类&#xff08;第七章&#xff09;随机概述数值随机化舍伍德拉斯维加斯蒙特卡罗 模拟退火遗传人工神经网络 回溯&#xff08;第五章&#xff09;动态规划&#xff08;第四章&#xff09;后记 前言 考试还剩十一天&#xff0c;现在准备开始复习这门课了。好像全…
阅读更多...
Linux性能优化之火焰图的起源

Linux性能优化之火焰图的起源

Linux火焰图的起源与性能优化专家 Brendan Gregg 密切相关&#xff0c;他在 2011 年首次提出这一工具&#xff0c;用于解决性能分析过程中可视化和数据解读的难题。 1. 背景&#xff1a;性能优化的需求 在现代计算中&#xff0c;性能优化往往需要对程序执行中的热点和瓶颈进行…
阅读更多...
【论文精读】GOT-OCR2.0源码论文——打破传统OCR流程的多模态视觉-语言大模型架构：预训练VitDet 视觉模型+ 阿里通义千问Qwen语言模型

【论文精读】GOT-OCR2.0源码论文——打破传统OCR流程的多模态视觉-语言大模型架构：预训练VitDet 视觉模型+ 阿里通义千问Qwen语言模型

作为本系列的开篇文章&#xff0c;首先定下本系列的整体基调。论文精读系列&#xff0c;旨在记录研读深度学习、强化学习相关论文的个人心得和理解&#xff0c;仅供参考&#xff0c;欢迎指正错误和研究探讨。 所有文章只会摘选论文部分进行分析&#xff0c;且不一定按原文行文顺…
阅读更多...
使用 Qt 实现基于海康相机的图像采集和显示系统（不使用外部视觉库，如Halcon\OpenCv）[工程源码联系博主索要]

使用 Qt 实现基于海康相机的图像采集和显示系统（不使用外部视觉库，如Halcon\OpenCv）[工程源码联系博主索要]

本文将梳理一个不借助外部视觉库&#xff08;如 OpenCV/Halcon&#xff09;的海康相机图像采集和显示 Demo。该程序直接使用 Qt GUI 来显示图像。通过海康 MVS SDK 实现相机的连接、参数设置、图像采集和异常处理等功能&#xff0c;并通过 Qt 界面展示操作结果。 1. 功能概述 …
阅读更多...
在Ubuntu22.04上源码构建ROS noetic环境

在Ubuntu22.04上源码构建ROS noetic环境

Ubuntu22.04上源码构建ROS noetic 起因准备环境创建工作目录并下载源码安装编译依赖包安装ros_comm和rosconsole包的两个补丁并修改pluginlib包的CMakeLists的编译器版本编译安装ROS noetic和ros_test验证 起因 最近在研究VINS-Mono从ROS移植到ROS2&#xff0c;发现在编写feat…
阅读更多...
C++——类和对象（part2）

C++——类和对象（part2）

前言 本篇博客继续为大家介绍类与对象的知识&#xff0c;承接part1的内容&#xff0c;本篇内容是类与对象的核心内容&#xff0c;稍微有些复杂&#xff0c;如果你对其感兴趣&#xff0c;请继续阅读&#xff0c;下面进入正文部分。 1. 类的默认成员函数 默认成员函数就是用户…
阅读更多...
matlab实现主成分分析方法图像压缩和传输重建

matlab实现主成分分析方法图像压缩和传输重建

原创 风一样的航哥 航哥小站 2024年11月12日 15:23 江苏 为了研究图像的渐进式传输技术&#xff0c;前文提到过小波变换&#xff0c;但是发现小波变换非常适合传输缩略图&#xff0c;实现渐进式传输每次传输的数据量不一样&#xff0c;这是因为每次变换之后低频成分大约是上一…
阅读更多...
【HarmonyOS】鸿蒙系统在租房项目中的项目实战（二）

【HarmonyOS】鸿蒙系统在租房项目中的项目实战（二）

从今天开始&#xff0c;博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”&#xff0c;对于刚接触这项技术的小伙伴在学习鸿蒙开发之前&#xff0c;有必要先了解一下鸿蒙&#xff0c;从你的角度来讲&#xff0c;你认为什么是鸿蒙呢&#xff1f;它出现的意义又是…
阅读更多...
Scala-字符串（拼接、printf格式化输出等）-用法详解

Scala-字符串（拼接、printf格式化输出等）-用法详解

Scala 一、 使用 号连接字符串 在 Scala 中&#xff0c; 运算符实际上会调用 String 类的 concat 方法或者使用字符串的加法操作&#xff0c;生成一个新的字符串。 字符串是不可变的&#xff0c;每次拼接都会创建一个新的字符串。 Mr. yuTips&#xff1a; 性能相对较差&…
阅读更多...
ISCTF2024

ISCTF2024

ezlogin 源码审计 先审源码,纯js题 const express require(express); const app express(); const bodyParser require(body-parser); var cookieParser require(cookie-parser); var serialize require(node-serialize); app.use(bodyParser.urlencoded({ e…
阅读更多...
使用真实 Elasticsearch 进行更快的集成测试

使用真实 Elasticsearch 进行更快的集成测试

作者&#xff1a;来自 Elastic Piotr Przybyl 了解如何使用各种数据初始化和性能改进技术加快 Elasticsearch 的自动化集成测试速度。 在本系列的第 1 部分中&#xff0c;我们探讨了如何编写集成测试&#xff0c;让我们能够在真实的 Elasticsearch 环境中测试软件&#xff0c;并…
阅读更多...
MySQL：联合查询(2)

MySQL：联合查询(2)

首先写一个三个表的联合查询 查询所有同学的每门课成绩&#xff0c;及同学的个人信息 1.我们首先要确定使用哪些表 学生表&#xff0c;课程表&#xff0c;成绩表 2.取笛卡尔积 select * from score,student,course; 3. 确定表与表之间的联合条件 select * from score,stud…
阅读更多...
Vue3学习笔记（下）

Vue3学习笔记（下）

文章目录 Vue3学习笔记&#xff08;下&#xff09;组合式API下的父子通信父传子子传父 模板引用defineExpose()provide和injectvue3新特性 - defineOptionsvue3新特性 - defineModelPiniaPinia异步写法 Vue3学习笔记&#xff08;下&#xff09; 组合式API下的父子通信 父传子…
阅读更多...
CNN神经网络

CNN神经网络

CNN 一 基本概述二 基础知识三 经典案例 今天和大家聊聊人工智能中的神经网络模型相关内容。神经网络内容庞大,篇幅有限本文主要讲述其中的CNN神经网络模型和一些基本的神经网络概念。 一 基本概述 深度学习(Deep Learning)特指基于深层神经网络模型和方法的机器学习。它是在…
阅读更多...
MySQL —— MySQL基础概念与常用功能介绍

MySQL —— MySQL基础概念与常用功能介绍

文章目录 基本概念数据类型数据类型分类 约束主键约束&#xff08;PRIMARY KEY&#xff09;外键约束&#xff08;FOREIGN KEY&#xff09;使用非空约束&#xff08;not null&#xff09;使用唯一性约束&#xff08;UNIQUE&#xff09;使用默认约束&#xff08;DEFAULT&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023