Node 应用基础及教程 1

综合性Web项目开发与分布式架构CONTENTS目录01前后端数据交互02Web项目架构设计03应用集成04系统安全管理跨域处理出于安全考虑，浏览器默认禁止网页向非同源（域名、端口、协议任意一项不同）的服务器发送请求，称为“跨域”。1．CORS配置（服务器端解决方案）CORS是现代Web开发中跨域通信的基础机制，它是一种基于HTTP头的安全机制，合理配置可兼顾功能与安全，用于允许或限制网页从不同源请求资源。浏览器默认禁止跨域请求（如不能直接访问的数据）。CORS的作用是通过服务器声明允许的跨域来源，绕过同源策略的限制，安全地实现跨域数据交互。1.前后端数据交互Web应用开发的前后端数据交互主要通过HTTP/HTTPS实现，前端通过异步JavaScript和XML（AsynchronousJavaScriptandXML，AJAX）、Fetch或WebSocket技术发送请求，后端响应并返回JSON/XML格式数据，涉及跨域时需配置CORS或代理服务器。1.前后端数据交互【操作要求】在文件夹Unit08中创建文件case0801.js，实现在Node.js（Express）中配置CORS。【实现过程】在文件夹Unit08中创建子文件夹case0801。在Node.js（Express）中配置CORS【训练实例8-1】

0102路径处理执行以下命令初始化package.json：npminit-y#-y表示默认配置执行以下命令安装express和cors模块：npminstallexpresscorsnodecase0801.js{message:'CORS配置成功！'}1.前后端数据交互1.前后端数据交互前端向本地代理（如http://localhost:8080/api/user）发送请求，代理服务器将请求转发至目标地址（:8080/user），规避浏览器跨域限制。在Vue项目中通过vue.config.js配置代理的示例代码如下：代理服务器（前端开发时解决方案）1.前后端数据交互1．服务器端渲染服务器直接生成HTML页面，返回给浏览器直接渲染。首屏加载快，利于SEO，适用于内容型网站（如新闻、博客）。【操作要求】在文件夹Unit08中创建Next.js项目并正确组织文件结构，实现基于Next.js框架的服务器端渲染。【实现过程】在终端执行以下命令创建Next.js项目：npxcreate-next-appcase0802如果命令行窗口中出现以下信息，表示Next.js项目创建成功。Success!Createdcase0802atD:\NodeCases\Unit08\case0802在项目文件夹case0801中创建子文件夹pages。服务器端渲染与客户端渲染1.前后端数据交互浏览器先加载JavaScript框架，再通过AJAX请求数据并渲染页面。交互体验好（局部更新无须刷新页面），适用于复杂交互应用（如电商、后台系统）。【验证示例8-1】（1）创建Vue3项目demo0801。在终端执行以下命令创建Vue3项目demo0801：npmcreatevite@latestdemo0801----templatevuecddemo0801npminstall（2）替换文件夹src中的文件App.vue中的代码。将以下代码复制到App.vue文件中：客户端渲染1.前后端数据交互在文件夹pages中创建index.js文件，在该文件中输入以上代码。在终端执行以下命令启动Next.js开发服务器：npmrundev#启动Next.js开发服务器打开浏览器，访问http://localhost:3000。右击打开的HTML页面，在弹出的快捷菜单中选择“查看源代码”命令或按【Ctrl+U】组合键，如果打开的HTML页面的源代码中已包含文章标题（而非空容器），说明服务器端渲染生效。1.前后端数据交互浏览器先加载JavaScript框架，再通过AJAX请求数据并渲染页面。交互体验好（局部更新无须刷新页面），适用于复杂交互应用（如电商、后台系统）。【验证示例8-1】（1）创建Vue3项目demo0801。在终端执行以下命令创建Vue3项目demo0801：npmcreatevite@latestdemo0801----templatevuecddemo0801npminstall（2）替换文件夹src中的文件App.vue中的代码。将以下代码复制到App.vue文件中：（3）运行程序与查看结果。在终端执行以下命令启动开发服务器：npmrundev打开浏览器，访问http://localhost:5173即可查看结果。客户端渲染1.前后端数据交互（1）使用FormData上传前端文件。FormData是一个用于处理表单数据的JavaScriptAPI，它会自动处理Content-Type为multipart/form-data，无须手动设置。需要注意的是，直接使用

console.log(formData)无法查看其内容，需通过迭代器或

get()查看。FormData

适用于需要异步提交表单或处理复杂表单数据的场景，尤其是前后端分离开发场景。（2）使用Node.js+Multer方式实现服务器端流处理。Multer是一个强大且实用的Node.js中间件，能够有效地简化文件上传的开发过程，主要用于处理multipart/form-data类型的表单数据，这类表单数据常用于文件上传操作。执行以下命令安装Multer：文件上传与CDN集成

1.前后端数据交互【操作要求】编写程序，前端使用FormData上传文件至服务器，后端使用Node.js和Express框架，结合使用Multer中间件和CDN进行文件上传。【实现过程】（1）创建前端页面。在文件夹Unit08中创建子文件夹case0803，在该文件夹中创建网页文件case0803.html，在该文件中编写代码。从本书配套的教学资源中打开“验证示例8-3”对应的网页文件case0803.html，浏览相应代码。（2）启动一个本地服务器。为了避免浏览器的安全限制问题（如跨域问题），需要启动一个本地服务器来运行HTML文件。在终端将当前文件夹切换为

case0803，如果安装了

Python3，使用以下命令启动一个简单的HTTP服务器：使用FormData上传图片至服务器1.前后端数据交互在文件夹case0803中创建JavaScript文件server0803.js，在该文件中编写以下代码：1.前后端数据交互1．RESTfulAPIRESTfulAPI基于URL定义资源，遵循HTTP方法（GET/POST/PUT/DELETE）定义操作，适用于简单CRUD操作、客户端需求明确、数据结构稳定的场景或者无须频繁调整接口的项目，如博客系统、电商系统的商品接口。获取商品列表与详情及新增商品的示例代码如下：GET/api/products?category=clothes&page=1//获取列表GET/api/products/123//获取详情POST/api/products//新增商品RESTfulAPI与GraphQL的选择

2．GraphQLGraphQL在客户端自定义查询所需字段，采用声明式数据获取方式，一次请求获取多源关联数据，适用于前端需求多变，需灵活获取数据、复杂关联查询的场景，如复杂社交平台数据查询、复杂移动端应用，可有效减少网络请求次数，显著提升性能。1.前后端数据交互1．MVC架构模式MVC是一种经典的软件设计模式，它将应用程序分为以下3个主要组件。（1）Model（模型）。Model负责处理数据和业务逻辑，可以包含数据验证、计算、数据库操作等，不依赖视图和控制器。（2）View（视图）。View负责为用户呈现数据，通常以HTML、XML或其他格式呈现，不涉及业务逻辑。（3）Controller（控制器）。Controller接收用户输入并调用模型和视图、协调模型和视图之间的交互，是模型和视图之间的2.Web项目架构设计MVC与MVVM架构模式

【操作要求】编写程序，基于MVC架构模式实现用户登录。【实现过程】（1）创建文件夹。在文件夹Unit08中创建子文件夹case0804，在文件夹case0804中创建子文件夹views。将当前文件夹切换为case0804。（2）安装必要的依赖。在终端执行以下命令安装必要的依赖：npminstallexpressejsmysql2（3）创建JavaScript文件server0804.js。在文件夹case0804中创建JavaScript文件server0804.js，在该文件中编写代码。从本书配套的教学资源中打开“训练实例8-4”对应的程序文件server0804.js，浏览相应代码。（4）创建视图文件。

2.Web项目架构设计基于MVC架构模式实现用户登录2.Web项目架构设计①

创建登录表单页面。在文件夹views中创建登录表单页面login.ejs，在该文件中编写以下主体代码：PuppeteerE2E测试②

创建登录成功信息页面。在文件夹views中创建登录成功信息页面dashboard.ejs，在该文件中编写以下主体代码：<p>用户成功登录</p><h3>欢迎,<%=%>!</h3><ahref="/login">退出登录</a>2.Web项目架构设计MVVM架构模式MVVM是MVC的一种变体，它引入了ViewModel组件。（1）Model（模型）。与MVC中的模型相同，负责处理数据和业务逻辑。（2）View（视图）。负责UI展示，通常绑定到ViewModel。（3）ViewModel（视图模型）。暴露模型数据供视图使用，包含视图特定的逻辑，通过数据绑定和命令绑定与视图交互。2.Web项目架构设计【操作要求】编写程序，基于MVVM架构模式实现购物车数量更新。【实现过程】（1）创建文件夹。在文件夹Unit08中创建子文件夹case0805，在文件夹case0805中创建子文件夹server0805。（2）创建后端程序。在终端执行以下命令安装必要的依赖：cdserver0805npminit-ynpminstallexpresscors基于MVVM架构模式实现购物车数量更新2.Web项目架构设计在文件夹client0805\src的文件App.vue中编写以下代码：2.Web项目架构设计分层设计是一种将应用程序划分为不同功能层次架构模式的设计方法。这种分层设计使代码更加模块化，易于测试和维护。（1）路由层。路由层（RoutingLayer）负责接收和分发请求、将URL映射到对应的处理函数、处理请求参数和HTTP方法，通常包含路由配置和中间件。（2）服务层。服务层（ServiceLayer）实现封装业务逻辑、协调数据访问层的操作、处理事务和业务规则、对领域模型进行操作。（3）数据访问层。数据访问层（DataAccessLayer）负责与数据存储交互、提供数据持久化功能、隐藏数据存储的具体实现、处理数据库查询和缓存等。三层结构的依赖方向：路由层→服务层→数据访问层，禁止反向依赖。通过分层设计，代码可维护性和可测试性能得到大幅提升。分层设计

3.应用集成通过RESTfulAPI或WebSocket可实现前后端通信。关键点如下。①

跨域处理：后端需配置CORS，如Express的CORS中间件。②

认证方案：JWT通过Authorization头传递。③

错误处理：统一拦截HTTP错误码，如401跳转登录。与前端框架集成方案3.应用集成【操作要求】编写程序，使用CompositionAPI，用于从后端API获取与显示用户数据。【实现过程】（1）创建Vue3项目。将当前文件夹切换为Unit08，在终端执行以下命令创建Vue+Vite的项目：npminitvite@latestcase0806----templatevuecdcase0806npminstall（2）安装必要的依赖。在终端执行以下命令安装必要的依赖：#前端依赖npminstallvue@vitejs/plugin-vue#后端依赖npminstallexpresscors从后端API获取与显示用户数据3.应用集成从后端API获取与显示用户数据的工作流程如图8-7所示。3.应用集成【验证示例8-2】（1）下载并安装RabbitMQ官方安装包。RabbitMQ安装包下载完成后，运行rabbitmq-server-4.1.1.exe文件，按照向导的提示一步一步进行安装即可。（2）在Unit08文件夹中创建子文件夹demo0802，并将当前文件夹切换为demo0802。（3）安装Node.js依赖。执行以下命令安装依赖：npminstallamqplib（4）在文件夹demo0802中创建文件producer0802.js，编写生产者代码，实现生产者发送消息功能。

消息队列实现异步通信3.应用集成微服务架构中的服务注册与发现是保障服务动态通信的核心机制。（1）服务注册：服务启动时向注册中心（如Eureka、Consul、Nacos）注册自身信息（IP地址、端口、健康状态）。（2）服务发现：消费者通过注册中心获取可用服务实例列表，并结合负载均衡（如Ribbon）调用目标服务。（3）健康检查：注册中心定期检测服务活性，自动剔除故障节点，确保流量仅路由至健康实例。服务注册与发现的主要优势包括高可用性（故障自动转移）、弹性伸缩（无缝扩缩容）和松耦合（服务位置透明）。微服务基础3.应用集成（1）下载与安装Consul服务。（2）安装Node.js依赖。执行以下命令安装依赖：npminstallconsul（3）在文件夹Unit08中创建子文件夹demo0803。（4）在文件夹demo0803中创建文件service_register0803.js，在该文件中编写代码实现基于Consul的服务注册。【验证示例8-3】

3.应用集成微服务架构通过将单体应用拆分为松耦合、独立部署的小型服务来提升系统的弹性和可维护性，其核心特性如下。（1）模块化设计：使用@Module组织代码，每个服务可独立开发、测试和部署，如用户模块与订单模块分离。（2）开箱即用的微服务工具：集成TCP、gRPC、RabbitMQ等传输层，支持跨服务通信，如通过@ClientTransport调用远程服务。（3）依赖注入（DependencyInjection，DI）：通过构造函数自动注入依赖（如数据库连接），提升代码可测试性和复用性。（4）与云原生生态兼容：结合Docker容器化和Kubernetes编排，实现自动化扩缩容。微服务架构的典型场景包括：电商平台中，订单服务通过NestJS的gRPC模块调用库存服务，同时通过网关聚合API；微服务架构简介3.应用集成【操作要求】编写程序，基于NestJS构建微服务。【实现过程】（1）创建文件夹case0807。（2）安装NestJSCLI。执行以下命令安装NestJSCLI：npminstall-g@nestjs/cli（3）创建新项目my-project0807。执行以下命令创建新项目my-project0807：nestnewmy-project0807cdmy-project0807【训练实例8-7】基于NestJS构建微服务3.应用集成关键代码解读如下。①

控制层（user.controller.ts）。@Controller('users')：定义路由前缀/users。@Get(':id')：处理GET/users/1请求。@Param('id')：提取路径参数。②

服务层（user.service.ts）。@Injectable()：标记为可注入的Provider。findById()：业务逻辑（模拟数据库查询）。③

视图层（user.module.ts）。@Module：将控制器和服务组装成模块。providers：注册服务（自动依赖注入）。基于NestJS构建微服务的调用流程如图所示。【训练实例8-7】基于NestJS构建微服务①

过滤非法输入：如限制评论只能包含字母、数字和部分符号。②

转义特殊字符：将<转为<，>转为>，防止脚本被解析。针对用户输入可能包含恶意脚本（如<script>alert('hack')</script>），导致其他用户浏览时被执行的问题，Web项目开发时的解决方案如下。（1）输入验证。检查输入格式，如邮箱、电话等。验证邮箱格式的Python示例代码如下：（2）输出转义。将特殊字符转换为HTML实体。转义输出的PHP示例代码如下：4.系统安全管理输入验证与防XSS针对明文存储用户的注册密码，数据库泄露时用户密码直接暴露的问题，解决方案为“哈希处理+加盐方案”。（1）哈希处理。哈希处理：用不可逆算法（如bcrypt、Argon2）将密码转为不可逆的字符串，如$2y$10$eZ6……（2）加盐方案。加盐（Salt）：为每个密码生成随机字符串，在密码前/后添加随机字符串（盐），避免相同密码生成相同哈希，防止彩虹表攻击。加盐由password_hash自动处理，无须手动拼接，哈希结果已包含盐和算法信息。使用bcrypt库（安装命令：pipinstallbcrypt）的Python示例代码：4.系统安全管理密码哈希与加盐4.系统安全管理安全头信息配置针对浏览器缺乏安全约束，导致单击劫持、XSS等问题，解决方案为通过HTTP安全头强制浏览器策略。常用的HTTP安全头及其作用如表8-1所示。4.系统安全管理CPU性能瓶颈定位ChromeDevTools是一个功能强大的性能调试工具，适用于实时监控与快速诊断，尤其适合前端开发者进行初级性能优化。火焰图作为其内置功能，适用于深度函数级分析，尤其适合后端开发者进行复杂性能问题定位。实际工作中可结合使用：先用ChromeDevTools定位问题方向，再用火焰图深入分析具体函数的性能瓶颈。任务8-1模拟异步数据流处理创建JavaScript文件server0801.js，实现完整的任务管理API，支持任务的增删改查，使用SQLite3存储数据。任务描述1．创建文件夹与JavaScript文件在文件夹Unit08中创建子文件夹task0801，在该子文件夹中创建JavaScript文件server0801.js，在该文件中编写代码。从本书配套的教学资源中打开“实战任务8-1”对应的程序文件server0801.js，浏览相应代码。2．安装依赖3．使用curl命令测试API任务实施任务8-1模拟异步数据流处理【任务实施】（1）测试登录并保存cookie。（2）测试创建任务。（3）测试获取所有任务。（4）测试删除指定任务。（5）测试登录用户退出。任务8-2构建实时聊天系统创建一个实时聊天室系统，支持多用户连接、消息广播和历史消息存储。任务描述1．创建项目结构在文件夹Unit08中创建子文件夹task0802，在文件夹task0802中创建子文件夹public，在文件夹public中创建子文件夹css，完整