电商前后端联调课程笔记

一、项目启动与环境搭建

1.1 项目启动

在学习电商项目的前后端联调之前，需要先掌握如何启动项目。项目启动是整个开发流程的基础，只有成功启动项目，才能进行后续的开发与调试工作。

1.1.1 环境安装

环境安装是项目启动的前提条件，主要包括安装 Node.js 和 Yarn 两个重要的工具。Node.js 是一个 JavaScript 运行时环境，用于服务器端的 JavaScript 代码执行；Yarn 则是一个快速、可靠、安全的依赖管理工具，能够帮助开发者方便地安装、管理和更新项目所需的各类依赖包。

• Node.js 安装：推荐安装长期支持版（LTS），版本需与课程保持一致，以避免出现兼容性问题。安装过程中，要注意选择正确的操作系统版本，并按照安装向导逐步完成安装。Node.js 的安装较为简单，通常只需下载安装包并运行即可。

• Yarn 安装：Yarn 的安装同样需要根据操作系统选择合适的安装方式。对于 Mac OS 系统，可以使用 Homebrew 进行安装；对于 Windows 系统，可以从官网下载安装包并运行安装向导。安装完成后，可以通过在命令行输入 yarn --version 来验证 Yarn 是否安装成功。

1.1.2 项目启动流程

安装完环境后，接下来就可以启动项目。首先，需要在项目的根目录下运行 yarn install 命令来安装项目所需的依赖包。这一步骤会根据项目配置的 package.json 文件，自动下载并安装所列出的所有依赖。安装完成后，运行 yarn serve 命令即可启动项目。项目启动后，会在控制台输出本地和网络访问地址，通过浏览器访问这些地址，就可以查看项目的运行效果，确保项目能够正常启动和访问。

1.2 项目目录介绍

了解项目的目录结构对于开发和维护项目至关重要。一个清晰、合理的目录结构能够帮助开发者快速定位文件、理解项目架构，并提高开发效率。

• dist 文件夹：该文件夹是项目部署上线后生成的，包含经过压缩和优化的 CSS、图片、JS 文件等静态资源，用于服务器的部署和发布。这些文件是项目在生产环境中实际运行所使用的，经过了打包和优化，以提高加载速度和性能。

• node_modules 文件夹：存放项目所依赖的第三方模块和包，这些依赖通过 Yarn 安装。在开发过程中，这些模块为项目提供了丰富的功能支持，无需开发者从头编写所有代码，提高了开发效率。

• public 文件夹：用于存放公共静态资源文件，如 HTML 文件、图片、图标等。这些文件在项目运行时会直接被引用，不需要经过编译或处理。

• src 文件夹：这是项目的主要开发目录，包含了项目的源代码和核心文件。其中，assets 文件夹用于存放图片等资源；components 文件夹用于存放可复用的组件；pages 文件夹包含了各个页面的代码；router 文件夹用于配置项目的路由。

• package.json：该文件定义了项目的元数据，包括项目名称、版本、依赖关系等信息。在项目开发中，它起到了项目配置文件的作用，用于管理项目的依赖和脚本。

• readme：提供项目的操作说明，包括如何安装、启动、打包项目等命令。它是项目文档的一部分，帮助开发者快速了解和上手项目。

• yarn.lock：该文件用于锁定项目依赖的版本，确保在不同环境下安装的依赖版本一致，避免因版本差异导致的兼容性问题。

1.3 项目启动流程

项目启动流程是开发过程中的关键步骤，正确的启动流程能够确保项目顺利运行，为后续的开发和调试打下良好基础。

• 安装依赖：在项目根目录下运行 yarn install 命令，安装项目所需的依赖包。这一步骤会根据 package.json 文件中的配置，自动下载并安装所有依赖，确保项目能够正常运行。

• 启动项目：运行 yarn serve 命令启动项目。项目启动后，会在控制台输出本地和网络访问地址，如 http://localhost:8080。

• 访问项目：通过浏览器访问输出的地址，查看项目是否能够正常加载和显示。如果页面显示正常，说明项目启动成功；如果遇到问题，则需要根据错误信息进行排查和解决。

二、前台页面联调

2.1 跨域问题

跨域问题是前后端联调过程中常见的问题之一，它通常发生在前端请求后端接口时，由于域名、端口或协议不同，导致浏览器出于安全考虑拦截了请求。

2.1.1 问题现象

在实际操作中，可能会遇到部分接口请求成功，而部分接口请求失败的情况。这种情况下，通常会在浏览器的控制台中看到跨域错误提示，如 CORS 错误。这意味着前端发送的请求被浏览器拦截，无法正常到达后端服务器，导致页面数据无法加载或显示。

2.1.2 原因分析

跨域问题的根本原因在于浏览器的同源策略。同源策略限制了不同源的网页或应用程序之间相互访问对方的资源。当前端和后端的域名、端口或协议不同时，浏览器会认为它们属于不同的源，从而触发同源策略的限制，拦截跨域请求。

2.1.3 解决方案

解决跨域问题需要从后端进行配置，允许特定域名的跨域请求。具体步骤如下：

• 添加跨域配置类：在后端项目中，创建一个跨域配置类，并添加相应的注解和配置。例如，在 Spring Boot 项目中，可以通过实现 WebMvcConfigurer 接口，并重写 addCorsMappings 方法，来全局配置跨域允许的域名、方法等。

• 处理预检请求：浏览器在发送实际请求之前，会先发送一个预检请求（OPTIONS 方法），以判断后端是否允许跨域请求。在后端代码中，需要对 OPTIONS 请求进行特殊处理，直接放行，避免拦截影响后续的真实请求。

2.2 接口调用与数据处理

在前台页面联调过程中，除了解决跨域问题，还需要正确调用后端接口，并处理返回的数据，以确保页面能够正常显示。

2.2.1 修改项目配置

在项目中，需要将配置的 IP 地址修改为本地 IP（127.0.0.1），以确保前后端在同一本地环境运行。这样可以避免因网络问题或外部服务器配置导致的请求失败，提高开发效率和调试的准确性。

2.2.2 数据处理

前端在接收到后端返回的数据后，可能需要进行一定的处理和格式化，以满足页面展示的需求。例如，对于时间数据，可能需要截取特定的部分进行显示；对于数值数据，可能需要进行单位转换或格式化等操作。

三、后台页面联调

3.1 ECharts 图表工具

ECharts 是一个广泛使用的开源可视化图表库，支持多种图表类型，如柱状图、折线图、饼图等，能够帮助开发者以直观的方式展示数据。

3.1.1 简介

ECharts 提供了丰富的图表类型和强大的配置选项，能够满足大多数数据可视化的需求。它具有以下特点：一是支持多种图表类型，包括常见的柱状图、折线图、饼图，以及复杂的地图、热力图等；二是高度可定制化，开发者可以通过丰富的配置项，调整图表的外观、样式、交互等；三是兼容性好，能够在主流的浏览器和移动设备上正常运行。

3.1.2 使用方法

使用 ECharts 需要先通过 npm 安装，然后在项目中导入 ECharts 组件。在代码中，初始化 ECharts 实例，设置配置项，如标题、坐标轴、数据系列等，即可绘制出所需的图表。在开发过程中，可以根据实际需求，灵活调整图表的配置，实现丰富的可视化效果。

3.2 后端接口格式调整

为了确保前后端数据交互的顺利进行，后端接口的返回格式需要严格按照接口文档规范，包括状态码、消息和数据等信息。

3.2.1 接口格式规范

后端接口在返回数据时，应包含统一的格式，通常包括状态码（status）、消息（message）和数据（data）三个部分。状态码用于标识请求是否成功，消息用于提供额外的信息，数据则包含具体的业务数据。这种规范化的接口格式，能够帮助前端更好地理解和处理返回的数据。

3.2.2 数据处理与包装

在实际开发中，后端需要对返回的数据进行必要的处理和包装，确保数据的完整性和正确性。例如，对于查询请求，后端需要将查询结果进行格式化，按照接口规范返回；对于修改请求，后端需要在执行操作后，返回相应的状态码和消息，告知前端操作结果。

3.3 前端数据处理与展示

前端在接收到后端返回的数据后，需要进行进一步的处理和展示，以满足用户的视觉和交互需求。

3.3.1 数据截取与格式化

对于后端返回的时间等数据，前端可能需要进行截取和格式化，以满足页面展示的简洁性和美观性。例如，对于包含年月日时分秒的时间字符串，可能只需要截取年月日部分进行显示。

3.3.2 图表样式配置

使用 ECharts 等图表工具时，可以通过配置项调整图表的样式，如颜色、渐变效果、坐标轴等，提升数据可视化的美观度和可读性。开发者可以根据实际需求，灵活设置图表的样式，实现个性化的数据展示效果。

四、项目部署

4.1 打包流程

项目部署的第一步是进行打包，将开发环境中的项目转换为生产环境可用的静态资源。

4.1.1 运行打包命令

在项目根目录下运行 yarn build 命令，启动项目的打包流程。打包过程中，Webpack 等工具会对项目中的代码进行优化、压缩和整合，生成适合生产环境的静态文件。

4.1.2 打包结果

打包完成后，项目会生成一个 dist 文件夹，其中包含了经过优化和压缩的 HTML、CSS、JS 等静态资源文件。这些文件是项目在服务器上运行所必需的，可以直接部署到生产环境中。

4.2 服务器部署

将打包后的文件部署到服务器上，并进行相应的配置，使项目能够正常运行和访问。

4.2.1 上传文件

将 dist 文件夹中的文件上传至服务器的指定目录。可以使用 FTP、SCP 等工具进行文件传输，确保文件完整性和权限正确。

4.2.2 服务器配置

在服务器上，需要配置相应的 Web 服务器软件，如 Nginx，以指向上传的文件目录，并设置静态资源的访问路径。同时，还需要配置相关的环境变量、安全设置等，确保项目的稳定运行。

4.2.3 环境配置

根据项目的实际需求，配置线上环境，包括数据库连接、API 地址等参数。确保项目在服务器上能够正确访问后端服务和数据。

五、总结

5.1 关键知识点回顾

通过对电商项目前后端联调课程的学习，掌握了多个关键知识点，这些知识点对于实际开发工作具有重要的指导意义。

• 项目启动：包括环境安装、依赖管理和项目启动流程，能够熟练启动和运行项目。

• 联调问题：深入理解了跨域问题的原因和解决方案，以及接口格式调整和前后端数据交互处理的方法。

• 图表工具：学会了使用 ECharts 进行数据可视化，包括图表的绘制、样式配置和数据处理。

• 项目部署：掌握了项目打包、服务器部署和环境配置的流程，能够将项目成功部署到生产环境。

5.2 实际开发中的注意事项

在实际的开发过程中，需要注意以下几点，以提高开发效率和代码质量。

• 严格按照接口文档规范开发：避免因格式不匹配导致的联调问题，确保前后端数据交互的顺利进行。

• 遇到问题时，通过分析现象、对比差异、尝试解决方案等步骤逐步排查：培养良好的问题解决能力，能够快速定位和解决问题。

• 实际开发中，联调过程可能涉及更多细节问题：如字段缺失、请求方法错误等，需与团队成员密切沟通协作解决。保持团队之间的良好沟通，及时发现和解决问题，确保项目的顺利推进。