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

news2024/11/20 1:44:06

一、引言

我关注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.coloradmin.cn/o/2243738.html

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

相关文章

智能停车解决方案之停车场室内导航系统（二）：核心技术与系统架构构建

智能停车解决方案之停车场室内导航系统（二）：核心技术与系统架构构建

hello~这里是维小帮&#xff0c;如有项目需求和技术交流欢迎大家私聊我们&#xff01;点击文章最下方获取智慧停车场方案~撒花&#xff01; 随着城市化进程的加速&#xff0c;停车难问题日益凸显。智能停车系统作为缓解停车压力的有效手段&#xff0c;其核心技术与架构的构建至…
阅读更多...
Django5 2024全栈开发指南（三）：数据库模型与ORM操作

Django5 2024全栈开发指南（三）：数据库模型与ORM操作

目录 一、模型的定义二、数据迁移三、数据表关系四、数据表操作4.1 Shell工具4.2 数据新增4.3 数据修改4.4 数据删除4.5 数据查询4.6 多表查询4.7 执行SQL语句4.8 数据库事务 Django 对各种数据库提供了很好的支持&#xff0c;包括 PostgreSQL、MySQL、SQLite 和 Oracle&#x…
阅读更多...
中仕公考怎么样?事业编面试不去有影响吗?

中仕公考怎么样?事业编面试不去有影响吗?

事业编考试笔试已经通过&#xff0c;但是面试不去参加会有影响吗&#xff1f; 1. 自动放弃面试资格&#xff1a;未能按时出席事业单位的面试将被视为主动放弃该岗位的竞争机会。 2. 个人信誉问题&#xff1a;面试作为招聘流程的关键步骤&#xff0c;无故缺席可能被解释为诚信…
阅读更多...
MySql结合element-plus pagination的分页查询

MySql结合element-plus pagination的分页查询

实现效果如下&#xff1a; 重点&#xff1a;使用mysql查询的limit和offset 原生SQL写法&#xff1a; select c.id as deptid,c.name as department,position,a.name staffname,2024-11 as shijian ,CASE WHEN b.shijian IS NULL THEN no ELSE yes END AS submit from fa_wecom…
阅读更多...
学习笔记019——Ubuntu部署tomcat

学习笔记019——Ubuntu部署tomcat

1、下载Tomcat压缩包。本人下载的版本是&#xff1a;apache-tomcat-8.5.77.tar.gz 2、将压缩包上传到Ubuntu某个目录。 本人存放的目录是 /opt 目录下, 命令解压&#xff1a; ## 解压tomcat压缩包 tar -zxvf apache-tomcat-8.5.77.tar.gz 3、vim打开bin目录的setclasspath…
阅读更多...
【JavaSE】(6)抽象类和接口

【JavaSE】(6)抽象类和接口

目录 一、抽象类 1、什么是抽象类 2、抽象类的特点 3、抽象类的作用 4、抽象类示例代码 二、接口 1、什么是接口 2、接口的书写建议 3、接口的特点 4、实现多个接口 5、接口能“忘记类型” 6、接口间的继承 7、接口的应用 7.1、引用类型的比较--Comparable 和 Co…
阅读更多...
Git学习教程（更新中）

Git学习教程（更新中）

持续更新完善中… 1 Git简介 1.1 Git是什么&#xff1f; Git是一个开源的分布式版本控制系统&#xff0c;由Linus Torvalds创建&#xff0c;用于有效、高速地处理从小到大的项目版本管理。它能够记录项目文件的变更历史&#xff0c;让多个开发者可以协作开发同一个项目&#…
阅读更多...
TON商城与Telegram App：生态融合与去中心化未来的精彩碰撞

TON商城与Telegram App：生态融合与去中心化未来的精彩碰撞

随着区块链技术的快速发展&#xff0c;去中心化应用&#xff08;DApp&#xff09;逐渐成为了数字生态的重要组成部分。而Telegram作为全球领先的即时通讯应用&#xff0c;不仅仅满足于传统的社交功能&#xff0c;更在区块链领域大胆探索&#xff0c;推出了基于其去中心化网络的…
阅读更多...
〔 MySQL 〕数据类型

〔 MySQL 〕数据类型

目录 1.数据类型分类 2 数值类型 2.1 tinyint类型 2.2 bit类型 2.3 小数类型 2.3.1 float 2.3.2 decimal 3 字符串类型 3.1 char 3.2 varchar 3.3 char和varchar比较 4 日期和时间类型 5 enum和set mysql表中建立属性列&#xff1a; 列名称&#xff0c;类型在后 n…
阅读更多...
两行命令搭建深度学习环境（Docker/torch2.5.1+cu118/命令行美化+插件），含完整的 Docker 安装步骤

两行命令搭建深度学习环境（Docker/torch2.5.1+cu118/命令行美化+插件），含完整的 Docker 安装步骤

深度学习环境的配置过于繁琐&#xff0c;所以我制作了两个基础的镜像&#xff0c;希望可以帮助大家节省时间&#xff0c;你可以选择其中一种进行安装&#xff0c;版本说明&#xff1a; base 版本基于 pytorch/pytorch:2.5.1-cuda11.8-cudnn9-devel&#xff0c;默认 python 版本…
阅读更多...
免费实时图片编辑工具：MagicQuill

免费实时图片编辑工具：MagicQuill

参看&#xff1a; https://huggingface.co/spaces/AI4Editing/MagicQuill 人工智能交互式图像编辑&#xff1a;可以制定涂改增加删除
阅读更多...
前端学习八股资料CSS（五）

前端学习八股资料CSS（五）

更多详情&#xff1a;爱米的前端小笔记&#xff0c;更多前端内容&#xff0c;等你来看&#xff01;这些都是利用下班时间整理的&#xff0c;整理不易&#xff0c;大家多多&#x1f44d;&#x1f49b;➕&#x1f914;哦&#xff01;你们的支持才是我不断更新的动力&#xff01;找…
阅读更多...
翼鸥教育：从OceanBase V3.1.4 到 V4.2.1，8套核心集群升级实践

翼鸥教育：从OceanBase V3.1.4 到 V4.2.1，8套核心集群升级实践

引言&#xff1a;自2021年起&#xff0c;翼鸥教育便开始应用OceanBase社区版&#xff0c;两年间&#xff0c;先后部署了总计12套生产集群&#xff0c;其中核心集群占比超过四分之三&#xff0c;所承载的数据量已突破30TB。自2022年10月&#xff0c;OceanBase 社区发布了4.2.x 版…
阅读更多...
如何在 Ubuntu 22.04 上安装 ownCloud

如何在 Ubuntu 22.04 上安装 ownCloud

简介 ownCloud 是一个开源的个人云存储平台&#xff0c;它允许用户在本地服务器上存储和同步文件&#xff0c;提供了一个类似于 Dropbox 或 Google Drive 的服务&#xff0c;但是更加注重隐私和数据控制。以下是 ownCloud 的一些基础使用简介&#xff1a; 文件存储&#xff1…
阅读更多...
使用Mybatis向Mysql中的插入Point类型的数据全方位解析

使用Mybatis向Mysql中的插入Point类型的数据全方位解析

1. 结果 希望每一个能够看到结果的人都能自己装载进去&#xff01;加油&#xff01; 2.代码 2.1TestMapper import org.apache.ibatis.annotations.*; import java.util.Date; import java.util.List;/*** author Administrator*/ Mapper public interface TestMapper {/*…
阅读更多...
web——sqliabs靶场——第六关——报错注入和布尔盲注

web——sqliabs靶场——第六关——报错注入和布尔盲注

这一关还是使用报错注入和布尔盲注 一. 判断是否有sql注入 二. 判断注入的类型 是双引号的注入类型。 3.报错注入的检测 可以使用sql报错注入 4.查看库名 5. 查看表名 6.查看字段名 7. 查具体字段的内容 结束 布尔盲注 结束
阅读更多...
鸿蒙实战：页面跳转传参

鸿蒙实战：页面跳转传参

文章目录 1. 实战概述2. 实现步骤2.1 创建鸿蒙项目2.2 编写首页代码2.3 新建第二个页面 3. 测试效果4. 实战总结 1. 实战概述 本次实战&#xff0c;学习如何在HarmonyOS应用中实现页面间参数传递。首先创建项目&#xff0c;编写首页代码&#xff0c;实现按钮跳转至第二个页面并…
阅读更多...
数据结构（基本概念及顺序表——c语言实现）

数据结构（基本概念及顺序表——c语言实现）

基本概念&#xff1a; 1、引入 程序数据结构算法 数据&#xff1a; 数值数据&#xff1a;能够直接参加运算的数据&#xff08;数值&#xff0c;字符&#xff09; 非数值数据&#xff1a;不能够直接参加运算的数据&#xff08;字符串、图片等&#xff09; 数据即是信息的载…
阅读更多...
一.安装版本为19c的Oracle数据库管理系统（Oracle系列）

一.安装版本为19c的Oracle数据库管理系统（Oracle系列）

1.数据库版本信息&#xff1a; 版本信息&#xff1a; 或者直接由命令查出来&#xff1a; 2.操作系统的版本信息 3.安装包下载与上传 可以去oracle官网下载也可以从其他人的百度网盘链接中下载&#xff1a; 使用xftp工具或者其他的工具&#xff08;mobaxterm&#xff09;上传到l…
阅读更多...
从 IDC 到云原生：稳定性提升 100%，成本下降 50%，热联集团的数字化转型与未来展望

从 IDC 到云原生：稳定性提升 100%，成本下降 50%，热联集团的数字化转型与未来展望

作者&#xff1a;金峰&#xff08;项良&#xff09;、朱永林、赵世振&#xff08;寰奕&#xff09; 公司简介 杭州热联集团股份有限公司成立于 1997 年 10 月&#xff0c;是隶属杭州市实业投资集团的国有控股公司。公司专业从事国际、国内钢铁贸易黑色大宗商品及产业服务&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023