18+网站推广,网站禁止ping,北辰苏州网站建设,直播开放平台机构版一、引言
我关注nodejs还是从前几年做了的一个电力大数据展示系统开始的#xff0c;当然#xff0c;我肯定是很多年的计算机基础的#xff0c;万变不离其宗。
现在web网站都流行所谓的前后端结构#xff0c;不知不觉我也开始受到这个影响#xff0c;以前都是前端直接操作…一、引言
我关注nodejs还是从前几年做了的一个电力大数据展示系统开始的当然我肯定是很多年的计算机基础的万变不离其宗。
现在web网站都流行所谓的前后端结构不知不觉我也开始受到这个影响以前都是前端直接操作ODBC、ADO等链接到数据库不分什么前端后端的。现在大家都讲究了一个后端web服务器来处理后台的数据库格式化输出前端请求的数据浏览器和前端web服务器交互前端web服务器和后端web服务器进行交互前端web服务器向后端的web服务器请求数据对后端服务器得到请求后将数据传递给前端web服务器格式化后由浏览器展示。 当然这里是将前后端严格分离的一种状态。
二、案例
我们将按照前后端分离的要求将项目分为两个目录server 和 client。server 目录将包含后端代码使用端口3000client 目录将包含前端代码使用端口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 htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleSimple Web App/title/headbodyh1Simple Web App/h1button idfetchDataFetch Data from Server/buttonp iddata/pscript srcscript.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 Routerrouter用于控制页面路由和导航。在后端框架中如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
作用AJAXAsynchronous 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.下载nodejsNode.js — 在任何地方运行 JavaScript
2. 安装完毕后在终端中输入node -v 能显示正确的版本表示安装成功。
3. 安装npm中文镜像cnpm npm install -g cnpm --registryhttps://registry.npm.taobao.org 4. 如果更新或者安装包出现证书失效可以临时绕过 SSL 验证
npm config set strict-ssl false
5. 在一个新的目录下新建一个nodejs项目使用 npm init。并创建一个package.json文件。这个文件记录了项目的元数据和配置信息包括项目的依赖关系、脚本、版本号等。 npm init 会提示你输入一些信息包括项目名称、版本、描述、入口点、测试命令等。对于一个名为 test 的项目你可能需要回答以下问题
name: 默认是当前目录的名字testversion: 默认是 1.0.0description: 你的项目描述entry point: 默认是 index.jstest command: 测试脚本命令git repository: git 仓库地址keywords: 关键词author: 作者信息license: 许可证类型
你可以按回车键接受默认值或者输入新的值。
6. 安装一个新矿建express.js npm install express。
7.完成第2部分的案例并执行出来。
