携程前端训练营Node.js入门与实践
Node.js作为基于V8引擎的JavaScript运行环境，打破了JavaScript仅能在浏览器端运行的局限，让其能够处理服务器端的输入输出、网络请求和数据库操作等任务，成为前端工程化、服务端开发、跨端应用开发的核心技术之一。本文基于相关技术文档梳理，涵盖Node.js基础概念、核心特性、常用模块、开发部署及运维监控，补充完整可运行的实践代码，兼顾知识点的系统性与实操性，既适合入门学习，也可作为后续复习、日常开发的参考文档，助力快速掌握Node.js从基础到企业级实践的全流程。 Node.js介绍什么是Node.jsNode.js是基于Chrome V8 JavaScript引擎构建的服务器端JavaScript运行环境，并非编程语言或框架。它允许开发者使用JavaScript编写服务器端代码，实现传统后端语言（如Java、Python）所能完成的功能，包括处理HTTP请求、操作文件系统、读写数据库、实现网络通信等。 Node.js的底层架构由多个核心部分组成，从上层到下层依次为：用户代码、Node.js核心（JavaScript层）、N-API、Node.js核心（C++...
携程前端训练营跨端开发
Taro作为一款高性能跨端开发框架，核心价值在于打破不同平台的技术壁垒，让开发者通过一套代码即可适配多端运行，大幅降低多平台开发的重复工作量与适配成本，同时保留主流前端框架的开发体验。本文基于相关技术内容整理，兼顾知识点梳理与实操落地，对所有提及的技术点、示例进行补充完善，提供完整可运行的实践代码，既适合日常开发查阅，也可作为后续知识复习、技术复盘的核心参考，助力快速掌握Taro开发的核心逻辑与实操技巧。 Taro介绍Taro的核心定位是“一次开发，多端部署”，无需为每个平台单独编写代码，即可实现多场景适配，同时兼容主流前端框架生态，降低学习与开发成本，适配从小型项目到大型企业级应用的各类开发需求。 多端转换能力Taro具备全面的多端转换能力，一套源码可直接编译为多种平台的运行产物，覆盖目前主流的前端运行场景，无需额外编写适配代码： 小程序平台：微信、支付宝、百度、字节跳动（抖音/今日头条）、快手、快应用等； 网页端：H5（兼容各类主流浏览器）； 原生应用端：React Native（支持Android、iOS双端原生应用）。 这种多端转换能力，彻底解决了传统多平台...
携程前端训练营小程序开发
在移动互联网流量格局中，小程序凭借免安装、近原生体验、平台流量扶持、开发成本可控的核心优势，成为企业级前端业务的重要载体。本文围绕微信原生小程序开发、Taro多端跨端方案、企业级小程序生态落地展开，从基础入门到工程化实践，完整覆盖小程序开发核心能力，兼顾知识点梳理、代码实操与企业实践，既可作为课堂学习笔记，也可用于后续复习、面试复盘与项目开发参考，所有示例均补充完整可运行代码，最大化落地价值。 小程序核心认知主流移动端方案对比小程序介于H5与原生App之间，兼顾开发效率与用户体验，是中低频业务、流量转化、端内服务的最优解，三者核心差异如下 方案 核心优势 核心劣势 适用场景 原生App 原生能力强，用户体验佳 开发成本高，双端需独立开发，发版需审核，平台依赖度高 核心高频业务 H5 无需安装，跨平台性强，开发成本低 依赖浏览器能力，用户体验一般，受WebView限制 活动页、营销页 小程序 原生体验佳，无需安装，跨平台性强，拥有良好的流量基础 受平台能力限制，多端适配存在一定成本 服务场景、中轻度交互、公域流量转化 小程序核心架构 小程序采用渲染层与逻辑层...
携程前端训练营App开发
在移动端应用开发的主流趋势下，跨端技术凭借一套代码多端运行的核心优势，成为企业降低开发成本、提升开发效率、实现动态能力的关键选择。React Native作为贴合前端开发者技术栈的跨端框架，以JavaScript/React为开发语言，兼顾原生体验与动态更新能力，是企业级移动端跨端开发的重要选型。 跨端技术选型移动端开发主要分为原生开发（Android/iOS）和跨端开发两类，跨端开发的核心价值在于一套代码多端运行，能有效降低开发成本、提升开发效率，部分方案还具备动态能力，可解决原生应用发版审核的痛点。目前主流的跨端技术方案主要有Web容器、React Native、Flutter三种，各方案的核心特性对比如下： 技术方案 Web容器 React Native Flutter 开发语言 html/css/javascript Javascript/React Dart 技术栈 前端 偏前端 偏客户端 动态能力 支持 支持 不支持 渲染能力 差 一般 好 社区生态 活跃 活跃 活跃 不同方案的适用场景...
携程前端训练营中后台开发
在中大型互联网企业中，中后台系统（Mid-end/Backend System）是支撑业务运转的核心骨架。无论是通过 SSO 实现多系统互通，还是利用 Ant Design Pro 快速构建高效的 Admin 界面，掌握这套技术栈对于前端开发者来说至关重要。 中台系统技术架构与安全在构建庞大的企业级应用群时，我们首先面临的是“孤岛问题”。如何让成百上千个子系统共享用户状态？如何统一权限管理？ SSO 单点登录设计单点登录（Single Sign-On, SSO）的核心目标是：一处登录，处处访问。 核心流程解析： 登录触发：用户访问业务系统（如人事系统），未登录时被拦截。 重定向：前端将用户重定向到 SSO 认证中心（SSO Server）。 身份验证：用户输入用户名/密码，SSO Server 验证通过后，生成一个加密凭据（Ticket/Token）。 凭据交换：SSO Server 将 Ticket 返回给前端（通常写入 Cookie 或 URL 参数）。 业务鉴权：前端携带 Ticket 再次访问业务系统，业务系统后端拿着 Ticket 去 S...
携程前端训练营PC/H5开发(React)
React 基础 Demo、手搓 SSR 同构项目、以及 Next.js 企业级框架应用，代码仓库Fork自上游 项目导航与启动本项目包含三个配套项目，分别对应不同的学习阶段，根据教程启动后可参照源码进行练习： react_study_demo: React 核心知识学习（Hooks, Router, Redux） react_ssr: 手动实现 React 服务端渲染（原理篇） react_ssr_next: 基于 Next.js 14 的企业级应用（实战篇） 快速启动12345678910# 1. React 基础学习cd react_study_demo && npm install && npm run dev# 2. 手搓 SSR 同构cd react_ssr && npm install && npm run build && npm start# 访问 http://localhost:3000# 3. Next.js 实战cd react_ssr_next &&...
携程前端训练营TypeScript
为什么选择 TypeScriptJavaScript 的痛点JavaScript 作为动态类型语言，在大型项目开发中存在明显短板： 作用域问题：ES5 及之前的var存在变量提升和函数级作用域隐患 类型安全缺失：无类型检测机制，错误只能在运行时发现 数组设计缺陷：早期 JS 数组内存空间不连续，影响性能 示例：JS 类型隐患的 TS 模拟（无类型约束场景） 12345// 模拟 JS 无类型检测的隐患（TS 中关闭类型检查的等效场景）function getStrLen(str: any) { // 用 any 模拟 JS 无类型约束 return str.length; // 若传入非字符串类型将报错}getStrLen(8); // 运行时错误：Cannot read properties of undefined (reading 'length') TypeScript 的核心价值TypeScript（简称 TS）是 JavaScript 的超集，官方定义为： “TypeScript = JavaScrip...
携程前端训练营JavaScript/ES6
JavaScript (简称 JS) 是前端开发“三件套”中至关重要的一环，三者各司其职，共同构建了现代 Web 的基石： HTML (结构)：定义网页的骨架和内容。 CSS (表现)：负责网页的美化和布局。 JavaScript (行为)：赋予网页灵魂，负责用户交互、动态渲染及逻辑处理。 正如 Jeff Atwood 提出的著名的 Atwood 定律 所言：“Any application that can be written in JavaScript, will eventually be written in JavaScript.” 如今的 JS 生态早已超越了浏览器的边界，它的触角延伸到了软件开发的各个领域： Web 前端：传统的网页开发核心。 移动端：借助 React Native、Weex、Uniapp 等框架实现跨平台 App 开发。 桌面端：利用 Electron 开发跨操作系统的桌面应用（如 VS Code, Slack）。 服务端：Node.js 让 JS 能够编写高性能的后端服务。 机器学习：TensorFlow.js 等库让浏览器也能进行 AI...
携程前端训练营CSS
CSS（Cascading Style Sheets，层叠样式表）是用于描述 HTML 元素在屏幕、纸张等媒体上显示样式的语言。它的核心优势在于层叠性（多个样式规则可叠加应用）和复用性（单个样式文件可控制多个网页），极大地简化了网页样式管理。与 HTML（结构）和 JS（交互）相比，CSS 的调试复杂度主要源于样式优先级和层叠规则，但掌握其核心知识点后，就能灵活实现各类网页布局与美化效果。 CSS 语法和选择器基本语法CSS 规则集（rule-set）由选择器和声明块组成，核心结构如下： 选择器：指定要设置样式的 HTML 元素 声明块：包含 1 条或多条声明，用花括号{}包裹 每条声明：由属性名: 属性值组成，多条声明用分号;分隔 123456789/* 选择器 { 声明1; 声明2; ... } */h1 { color: red; /* 文本颜色为红色 */ font-size: 14px; /* 字体大小14px */}p { color: blue; text-align: center; /...
携程前端训练营HTML
基于 Trip.com Group (携程集团) 前端训练营资料整理，适用对象：前端初学者、需要巩固 HTML5 基础的开发者 HTML（超文本标记语言）往往被认为是 Web 开发中最简单的部分，很多人认为“两三天就能学会”。但正如冰山理论所示，入门虽易，精通却难。HTML 涉及 Web 交互、SEO（搜索引擎优化）、安全、无障碍访问（A11y)等多个领域。 本文将梳理 HTML 的核心演进、关键元素、语义化结构以及表单交互，帮助你建立正确且专业的 HTML 认知体系。 Web 技术三大基石在深入 HTML 之前，我们需要明确它在 Web 技术栈中的定位： 技术 角色 比喻 HTML 结构骨架 人的骨骼，支撑起整个身体 CSS 视觉表现 人的皮肤和衣服，决定外观是否美观 JavaScript 行为交互 人的肌肉和神经，赋予页面动作和生命力 虽然 HTML 运行门槛低（改个后缀名就能跑），但要写出健壮、可维护、对机器（搜索引擎/屏幕阅读器）友好的代码，需要深厚的功底。 HTML 的演进：从 4.01 到 HTML5HTML5 不仅仅是一个版本的更...