前端开发培训课件

前端开发培训课件前端开发的定义与行业前景前端开发是指利用HTML、CSS和JavaScript等技术进行网站或应用程序用户界面和用户体验的创建过程它包括了从静态网页构建到复杂的单页应用程序SPA开发的全部内容，负责用户可以看到、操作的所有界面元素万20%¥42年增长率年中位薪资前端开发岗位需求连续5年保持20%以上的增长根据2024中国互联网人才报告显示，前端工程师速度，远高于IT行业平均水平年薪中位数已达42万元年3晋升周期前端开发人员平均晋升周期较短，从初级到高级工程师平均仅需3年时间前端与后端协作流程

1.产品需求分析与UI设计确认

2.前后端接口规范制定

3.前端页面开发与后端API并行实现

4.接口联调与问题修复培训目标与课程结构本培训旨在培养具备独立项目开发能力的全栈前端工程师，使学员能够应对各类企业的实际开发需求职业规划1求职准备、面试技巧、职业发展路径项目实战2完整商业项目从0到1实现，覆盖前后端技术栈进阶技术3框架深入、状态管理、性能优化、工程化、自动化测试实用技能4Vue/React框架、组件化开发、数据交互、路由管理基础知识5HTML5/CSS3/JavaScript/ES6+/DOM/BOM/Git前端岗位技能图谱必备语言主流框架•HTML5语义化标签•Vue.js全家桶•CSS3高级特性•React生态系统•JavaScript核心概念•小程序开发•TypeScript类型系统•Electron桌面应用实战能力工程化工具•独立项目开发•Webpack/Vite•团队协作能力•Git版本控制•问题排查解决•npm/yarn包管理•技术方案设计•ESLint代码规范进阶技能后端知识•性能优化•Node.js基础•安全防护•Express/Koa框架•自动化测试•RESTful API设计•微前端架构•数据库操作前端三大基础语言HTML构建网页结构的标记语言，定义内容的语义和层次关系CSS负责页面样式与布局的语言，实现视觉呈现和用户体验JavaScript实现页面交互与动态功能的脚本语言，赋予网页生命力核心知识HTML5HTML5新增语义化标签表单与多媒体元素header定义页面或区块的头部，通常包含网站标志、主导航、标题等footer定义页面或区块的底部，通常包含版权信息、联系方式等article定义独立的内容单元，如博客文章、新闻故事等section定义文档中的一个区域或一个章节，通常包含一个标题nav定义导航链接的部分，用于主要的导航栏或菜单HTML5大幅增强了表单与多媒体功能aside•新增表单输入类型email、url、date、number、range、search等•表单验证API required、pattern、min/max等属性实现客户端验证定义页面内容之外的内容，如侧边栏、广告等•原生音视频支持audio和video标签取代Flash•Canvas/SVG绘图支持动态图形和交互式图表创建•本地存储localStorage和sessionStorage提供客户端数据存储•地理位置API获取用户位置信息进行定位服务与现代页面样式CSS3Flexbox弹性布局Grid网格布局过渡与动画效果媒体查询与响应式设计Flexbox（弹性盒子）是CSS3引入的Grid（网格布局）是CSS3引入的二维CSS3提供了丰富的动效能力，无需媒体查询是实现响应式设计的核心技一维布局模型，专为构建灵活的响应式布局系统，可以同时控制行与列的布JavaScript即可实现复杂的视觉效果术，允许网页根据设备特性调整布局布局而设计局•grid-template-•transition平滑过渡属性变化•@media screen针对不同屏幕•主轴与交叉轴控制项目排列方向columns/rows定义列宽/行高•transform2D/3D变换（旋转、尺寸设置样式•flex-direction决定主轴方向•grid-gap设置网格间距缩放、移动）•max-width/min-width设置断点•justify-content主轴对齐方式•grid-template-areas命名网•animation关键帧动画定义•orientation横屏/竖屏适配格区域•align-items交叉轴对齐方式•@keyframes设置动画各阶段样•移动优先策略从小屏幕开始设计•flex-wrap控制项目是否换行•grid-column/row指定项目位置式•视口单位vw/vh/vmin/vmax•flex-grow/shrink/basis控制•fr单位按比例分配剩余空间•animation-timing-function控制动画速度曲线项目尺寸•minmax设置尺寸范围•动画事件监听animationstart/end/iterationJavaScript基础语法变量与数据类型函数与作用域//变量声明var name=张三;//函数作用域，有变量提升let age=25;//块级作用域，无变量提升const PI=

3.14159;////函数声明function adda,b{return a+b;}//函数表达式const multiply=functiona,b{return a*b;};//默认参数与剩余参常量，不可重新赋值//基本数据类型let str=Hello;//字符串let num=100;//数字let bool=true;//布尔值let n数function greetname=访客,...titles{return`你好，${titles.join，}${name}`;}//作用域链let global=全局变量=null;//空值let u=undefined;//未定义let sym=Symbol;//符号ES6//引用数据类型let obj={name:李四,;function outer{let outer_var=外部函数变量;function inner{let inner_var=内部函数变量;age:30};//对象let arr=[1,2,3,4,5];//数组let func=function{};//函数console.logglobal,outer_var,inner_var;}inner;}流程控制//条件语句if age=18{console.log成年人;}else ifage=12{console.log青少年;}else{console.log儿童;}//三元运算符let status=age=18成年:未成年;//循环语句for leti=0;i5;i++{console.logi;}let fruits=[苹果,香蕉,橙子];for letfruit offruits{console.logfruit;}let person={name:王五,age:28};for letkey inperson{console.logkey+:+person[key];}//switch语句switch day{case0:console.log星期日;break;case1:console.log星期一;break;default:console.log其他日子;}事件处理ES6+新特性精讲变量声明与解构箭头函数与模板字符串//let与constlet counter=0;//块级作用域变量const API_URL=https://api.example.com;//解构赋值const person={name://箭头函数const add=a,b=a+b;//隐式返回const greet=name=`你好，${name}`;//单参数const process==张三,age:30};const{name,age}=person;//对象解构const colors=[红,绿,蓝];const[red,green,blue]={//多语句块const now=new Date;return`处理时间:${now.toLocaleString}`;};//模板字符串const user=李四;constcolors;//数组解构//函数参数解构function displayUser{name,age}{console.log`${name},${age}岁`;}message=`欢迎回来，${user}！今天是${new Date.toLocaleDateString}您有${5}条未读消息`;//标签模板functionhighlightstrings,...values{return strings.reduceresult,str,i=`${result}${str}${values[i]`${values[i]}`:}`,;}const name=王五;const html=highlight`用户${name}已登录系统`;Promise与异步编程模块化与其他新特性//Promise基本用法const fetchData=={return newPromiseresolve,reject={setTimeout={constsuccess=Math.random

0.3;if success{resolve{id:1,name:数据项};}else{rejectnewError获取数据失败;}},1000;};};//Promise链式调用fetchData.thendata={console.log数据获取成功:,data;return processdata;}.thenresult={console.log处理结果:,result;}.catcherror={console.error错误:,error;}.finally={console.log无论成功失败都会执行;};//async/await语法asyncfunction getData{try{const data=await fetchData;const result=await processdata;return result;}catch error{console.error错误:,error;}}DOM与BOM实操DOM操作BOM操作//元素选择const heading=document.getElementByIdtitle;const paragraphs=document.getElementsByTagNamep;consthighlights=document.getElementsByClassNamehighlight;const firstBtn=document.querySelector.btn;const allLinks=document.querySelectorAlla;//内容修改heading.textContent=新标题;//纯文本heading.innerHTML=em强调标题/em;//HTML内容//属性操作const link=document.querySelectora;link.getAttributehref;//获取属性link.setAttributehref,https://example.com;//设置属性link.hasAttributetarget;//检查属性link.removeAttributetarget;//移除属性//样式操作const box=document.querySelector.box;box.style.backgroundColor=#f0f0f0;//行内样式box.style.width=200px;box.style.padding=20px;//类名操作box.classList.addactive;//添加类box.classList.removehidden;//移除类box.classList.toggleselected;//切换类box.classList.containsactive;//检查类//元素创建与操作const newDiv=document.createElementdiv;newDiv.className=container;newDiv.textContent=新元素;document.body.appendChildnewDiv;//添加到末尾document.body.insertBeforenewDiv,heading;//插入到特定位置heading.parentNode.removeChildheading;//移除元素前端开发环境搭建VS Code安装与配置Chrome DevTools开发者工具Visual StudioCode是目前最流行的前端开发编辑器，拥有丰富的扩展和强大的功能从官网下载并安装VS Code:https://code.visualstudio.com/

2.安装中文语言包在扩展商店搜索Chinese并安装

3.调整基本设置字体、缩进、自动保存等必备VS Code插件推荐1Live Server提供实时预览功能，保存文件后自动刷新浏览器2ESLint代码质量检查工具，帮助发现并修复问题3Prettier代码格式化工具，统一团队代码风格4Chrome DevTools是前端开发者不可或缺的调试工具，包含以下主要功能区Elements（元素）检查和编辑DOM与CSSAuto RenameTagConsole（控制台）查看日志和执行JavaScript自动重命名配对的HTML/XML标签Sources（源代码）查看和调试源代码Network（网络）监控网络请求和性能5Performance（性能）分析运行时性能Memory（内存）分析内存问题和泄漏Path IntellisenseApplication（应用程序）管理本地存储和缓存自动补全文件路径，提高开发效率使用Chrome DevTools的快捷键•打开DevTools F12或Ctrl+Shift+I6•检查元素Ctrl+Shift+C•切换设备模拟Ctrl+Shift+MVetur/VolarVue.js开发工具，提供语法高亮和智能提示前端调试技巧元素审查技巧断点调试方法网络请求分析•使用元素面板观察页面结构和样式•在源代码面板中设置代码断点•监控XHR和Fetch请求响应情况•实时编辑HTML和CSS查看效果•使用console.log输出关键变量值•分析资源加载瀑布图和时间分布•使用DOM断点监控元素变化•利用条件断点针对特定条件停止•查看请求头和响应数据•模拟不同设备和屏幕尺寸•使用debugger语句在代码中设置断点•模拟不同网络速度测试性能•调整CSS盒模型查看布局问题•监视表达式观察变量变化•禁用缓存观察首次加载表现•使用颜色选择器精确调整颜色•调用栈分析函数调用过程•筛选请求类型快速定位问题•查看伪元素和计算样式•使用作用域窗格查看当前变量•导出HAR文件分享网络问题常见调试错误与解决方案错误类型常见原因调试方法解决方案SyntaxError代码语法错误查看控制台错误信息和行号检查括号、引号、分号等语法错误TypeError操作的值类型不符在错误位置前添加console.log检查类型确保变量存在且类型正确ReferenceError引用不存在的变量检查变量声明和作用域确保变量已定义并在正确作用域中访问CORS错误跨域资源共享问题查看网络面板中的失败请求配置服务器允许跨域或使用代理异步问题数据未加载时使用使用async/await或Promise断点GIT项目版本管理Git基础概念Git常用命令#初始化与配置git init#初始化仓库git config--global user.name姓名#设置用户名gitconfig--global user.email邮箱#设置邮箱#基本操作git status#查看状态git add文件名#添加文件到暂存区git add.#添加所有更改到暂存区git commit-m提交说明#提交更改gitlog#查看提交历史#分支操作git branch#查看分支git branch分支名#创建分支git checkout分支名#切换分支git checkout-b分支名#创建并切换分支git merge分支名#合并分支git branch-d分支名#删除分支#远程操作git clone仓库URL#克隆远程仓库git remoteaddorigin URL#添加远程仓库git pull#拉取远程更改git pushorigin分支名#推送到远程Git是目前最流行的分布式版本控制系统，通过三个区域管理代码工作区、暂存区和版本库工作区（Working Directory）Git冲突解决实际编辑代码的目录，对应项目文件夹冲突是多人协作开发中经常遇到的问题，主要发生在合并分支时两个分支修改了同一个文件的同一部分

1.冲突标记解读（当前分支内容）、=======（分隔符）、（要合并分支内容）暂存区（Staging Area）

2.解决步骤编辑冲突文件→移除冲突标记→保留正确代码→git add→git commit临时存储区域，使用git add命令将修改添加到此处版本库（Repository）NPM与包管理工具NPM基础NPM常用命令NPM（Node PackageManager）是Node.js的默认包管理工具，用于安装和管理JavaScript包安装NPM安装Node.js时会自动安装NPM，可通过以下命令检查版本node-vnpm-vpackage.json文件项目的配置文件，包含项目的元数据和依赖信息{name:my-project,//项目名称version:

1.

0.0,//项目版本description:项目描述,//项目描述main:index.js,//入口文件scripts:{//脚本命令start:node index.js,build:webpack},dependencies:{//生产依赖react:^

17.

0.2,react-dom:^

17.

0.2},devDependencies:{//开发依赖webpack:^

5.

52.0,babel:^

7.

15.5}}#初始化项目npm init#创建package.jsonnpm init-y#快速创建默认配置#安装依赖npm install包名#安装并添加到dependenciesnpm install包名--save-dev#安装并添加到devDependenciesnpm install#安装package.json中所有依赖npm install--production#只安装生产依赖#更新与删除npm update包名#更新指定包npm update#更新所有包npm uninstall包名#卸载指定包#运行脚本npm runstart#运行package.json中的start脚本npm start#start脚本的快捷方式npm runbuild#运行build脚本#全局操作npm install-g包名#全局安装包npm list-g--depth=0#查看全局安装的包依赖版本规则NPM使用语义化版本控制（Semantic Versioning）固定版本react:

17.

0.2-只使用指定版本补丁更新react:~

17.

0.2-接受

17.

0.x的更新次要版本更新react:^

17.

0.2-接受

17.x.x的更新最新版本react:latest-始终使用最新版本Webpack项目打包与工程化Webpack核心概念Webpack基本配置Webpack是一个现代JavaScript应用程序的静态模块打包工具，将各种资源处理成适合生产环境的静态资源入口Entry指定Webpack从哪个模块开始构建依赖图，默认为./src/index.js输出Output指定打包后的资源输出位置和命名方式，默认为./dist加载器LoaderAjax与异步数据交互XMLHttpRequest Fetch APIXMLHttpRequest（XHR）是早期实现Ajax的核心对象，虽然有些老旧但仍被广泛使用FetchAPI是现代浏览器提供的用于替代XMLHttpRequest的接口，基于Promise设计//创建XHR对象const xhr=new XMLHttpRequest;//配置请求xhr.openGET,https://api.example.com/data,true;//设置响应类型//基本GET请求fetchhttps://api.example.com/data.thenresponse={if!response.ok{throw newError`HTTP错误:xhr.responseType=json;//设置请求头xhr.setRequestHeaderContent-Type,application/json;//监听状态变化${response.status}`;}return response.json;//解析JSON响应}.thendata={console.log数据获取成功:,xhr.onreadystatechange=function{if xhr.readyState===4{//请求完成if xhr.status===200{//请求成功data;}.catcherror={console.error请求失败:,error;};//配置请求选项fetchhttps://api.example.com/users,console.log数据获取成功:,xhr.response;}else{console.error请求失败:,xhr.status;}}};//监听进度{method:POST,//请求方法headers:{//请求头Content-Type:application/json,Authorization:Bearerxhr.onprogress=functionevent{if event.lengthComputable{const percentComplete=event.loaded/event.total*token123},body:JSON.stringify{name:李四,age:25},//请求体credentials:include,//包含凭证cookies mode:100;console.log`加载进度:${percentComplete}%`;}};//发送请求xhr.send;//发送POST请求带数据const data=cors,//跨域模式cache:no-cache//缓存策略}.thenresponse=response.json.thendata=console.log用户创建成JSON.stringify{name:张三,age:30};xhr.openPOST,https://api.example.com/users,功:,data;//使用async/await简化代码async functionfetchData{try{const response=awaittrue;xhr.setRequestHeaderContent-Type,application/json;xhr.senddata;fetchhttps://api.example.com/data;if!response.ok{throw newError`HTTP错误:${response.status}`;}const data=await response.json;console.log数据获取成功:,data;return data;}catch error{console.error请求失败:,error;}}RESTful API全栈对接RESTful API基本概念常见身份验证方式RESTful API是一种软件架构风格，以资源为中心，使用HTTP标准方法表示操作JWT令牌认证HTTP方法对应操作示例URL用途JSON WebToken是目前流行的无状态认证方式，客户端存储令牌并在每次请求中发送GET查询/api/users获取用户列表//登录获取令牌async functionloginusername,password{try{const response=await axios.post/api/auth/login,GET查询/api/users/1获取特定用户{username,password};const{token}=response.data;//存储令牌localStorage.setItemtoken,token;//设置全局请求头axios.defaults.headers.common[Authorization]=POST创建/api/users创建新用户`Bearer${token}`;return true;}catch error{console.error登录失败:,error;return false;}}//请求拦截器自动添加令牌axios.interceptors.request.useconfig={const token=localStorage.getItemtoken;if tokenPUT完全更新/api/users/1更新整个用户资料{config.headers.Authorization=`Bearer${token}`;}return config;};//响应拦截器处理身份验证错误axios.interceptors.response.use response=response,error={if error.responseerror.response.status===PATCH部分更新/api/users/1更新部分用户资料401{//令牌过期，跳转到登录页localStorage.removeItemtoken;window.location=/login;}return Promise.rejecterror;};DELETE删除/api/users/1删除用户API交互流程前端页面性能优化85%53%16%用户体验提升放弃率降低客户满意度提升良好的性能可使用户留存率提高85%，减少跳出率并提升转化加载时间超过3秒的网站有53%的用户会放弃浏览每秒减少的加载时间可使用户满意度平均提升16%关键性能优化技术Lighthouse性能检测1懒加载资源推迟非关键资源的加载，只在需要时才加载//图片懒加载//组件懒加载Vue constLazyComponent==import./LazyComponent.vue//路由懒加载React constDashboard=React.lazy=import./Dashboard;2代码分割将大型JavaScript包分割成更小的块，按需加载//Webpack动态导入import/*webpackChunkName:chart*/./chart.thenmodule={//使用加载的模块};//入口点分割module.exports={entry:{app:./src/app.js,vendor:./src/vendor.js}};Lighthouse是Google开发的自动化工具，用于改进网页质量，提供了五个方面的评分性能页面加载速度和响应性可访问性对残障人士的友好程度最佳实践遵循网络标准的程度SEO搜索引擎优化程度PWA渐进式Web应用程序标准符合度关键性能指标3缓存优化FCP首次内容绘制首次显示DOM内容的时间利用浏览器缓存和服务工作线程减少网络请求LCP最大内容绘制最大内容元素显示的时间TTI可交互时间页面完全可交互的时间//内容哈希文件名webpackoutput:{filename:[name].[contenthash].js}//注册Service WorkerifserviceWorker inTBT总阻塞时间主线程被阻塞的总时间navigator{navigator.serviceWorker.register/sw.js.thenreg=console.logSW注册成功.catcherr=console.logSW注册失败,err;}移动端适配与响应式开发响应式布局方案移动端特有问题与解决方案视口配置121px边框问题/*解决高清屏1px线显示过粗问题*/.border-1px确保网页在移动设备上以正确的比例显示，禁用缩放以提供应用般体{position:relative;}.border-1px::after验{content:;position:absolute;left:0;bottom:0;width:100%;height:1px;background:#000;transform:scaleY

0.5;}点击延迟3/*解决300ms点击延迟*/html{touch-action:manipulation;}//或使用fastclick库ifaddEventListener indocument{document.addEventListenerDOMContentLoaded,function{FastClick.attachdocument.body;},false;}4键盘弹出问题//监听键盘事件window.addEventListenerresize,function{if document.activeElement.tagName===INPUT||document.activeElement.tagName===TEXTAREA{window.setTimeoutfunction{document.activeElement.scrollIntoViewIfNeeded;},0;}};Vant组件库移动端UIVant是有赞前端团队开源的移动端组件库，基于Vue.js开发，提供了60多个高质量组件Vue.js

2.x基本应用Vue核心概念组件通信与生命周期数据绑定计算属性与侦听器创建前/后beforeCreate:实例初始化后，数据观测和事件配置前created:数据观测、计算属性、方法和事件配置完成挂载前/后beforeMount:编译模板，生成虚拟DOMmounted:挂载到实际DOM，可操作DOM元素Vue.js

3.x与进阶特性Composition APIPinia状态管理Vue3最显著的特性是Composition API，它提供了更灵活的逻辑组织方式和更好的类型推断支持Pinia是Vue官方推荐的状态管理库，相比Vuex更轻量、类型安全，支持Composition API//使用Composition API的组件示例//store/counter.jsimport{defineStore}from piniaexportconst useCounterStore=defineStorecounter,{//状态state:={count:0,name:计数器},//相当于计算属性getters:{doubleCount:state=state.count*2,formattedCount{return`当前值:${this.count}`}},//相当于方法，可以包含异步逻辑actions:{increment{this.count++},async fetchInitialCount{const data=await api.getCount this.count=data.count}}}//在组件中使用Teleport组件Vite开发体验微前端框架（qiankun）微前端原理及优势qiankun微前端框架qiankun是蚂蚁金服开源的基于single-spa的微前端解决方案，提供了一套完整的微前端治理方案主应用配置//安装qiankunnpm iqiankun-S//主应用入口文件main.jsimport{registerMicroApps,start}from qiankun;//注册微应用registerMicroApps[{name:vue-app,//应用名称entry://localhost:8081,//微应用入口container:#vue-container,//容器节点activeRule:/vue-app,//激活规则//传递给微应用的数据props:{shared:{getGlobalState:getGlobalState}}},{name:react-app,entry://localhost:8082,container:#react-container,activeRule:/react-app}];//启动qiankunstart{sandbox:{strictStyleIsolation:true,//严格样式隔离experimentalStyleIsolation:true//实验性样式隔离},prefetch:true//预加载微应用资源};//主应用HTML微前端是一种将前端应用分解成更小、更易管理的独立部分的架构风格，类似于微服务在后端的应用独立开发部署Vue应用React应用Three.js3D可视化开发Three.js基础概念大屏数据可视化案例Three.js是一个基于WebGL的JavaScript3D库，使开发者能够在浏览器中创建和展示3D内容场景Scene容纳所有3D对象、灯光和摄像机的空间容器const scene=new THREE.Scene;//设置背景scene.background=new THREE.Color0x000000;//设置雾效果scene.fog=newTHREE.Fog0xffffff,0,750;摄像机Camera决定观察场景的视角，常用透视摄像机模拟人眼//透视摄像机视场角度,宽高比,近裁剪面,远裁剪面const camera=new THREE.PerspectiveCamera75,window.innerWidth/window.innerHeight,

0.1,1000;camera.position.z=5;//轨道控制器让用户可以旋转和缩放视图const controls=newTHREE.OrbitControlscamera,renderer.domElement;controls.enableDamping=true;//添加阻尼效果//创建大屏数据可视化场景import*as THREEfrom three;import{OrbitControls}fromthree/examples/jsm/controls/OrbitControls.js;import{CSS2DRenderer,CSS2DObject}fromthree/examples/jsm/renderers/CSS2DRenderer.js;//初始化场景、相机、渲染器const scene=new THREE.Scene;scene.background=渲染器Renderer new THREE.Color0x0a0a1a;const camera=new THREE.PerspectiveCamera60,window.innerWidth/window.innerHeight,

0.1,1000;camera.position.set0,20,100;//WebGL渲染器const renderer=new THREE.WebGLRenderer{antialias:负责将场景绘制到屏幕上，通常使用WebGL渲染器true};renderer.setSizewindow.innerWidth,window.innerHeight;renderer.setPixelRatiowindow.devicePixelRatio;renderer.shadowMap.enabled=const renderer=new THREE.WebGLRenderer{antialias:true};renderer.setSizewindow.innerWidth,true;document.body.appendChildrenderer.domElement;//CSS2D渲染器用于添加HTML标签const labelRenderer=newwindow.innerHeight;renderer.setPixelRatiowindow.devicePixelRatio;document.body.appendChildrenderer.domElement;//渲CSS2DRenderer;labelRenderer.setSizewindow.innerWidth,window.innerHeight;labelRenderer.domElement.style.position=染循环function animate{requestAnimationFrameanimate;controls.update;//更新控制器renderer.renderscene,absolute;labelRenderer.domElement.style.top=0px;document.body.appendChildlabelRenderer.domElement;//添加控制器constcamera;}animate;controls=new OrbitControlscamera,renderer.domElement;controls.enableDamping=true;//创建地球const earthGeometry=newTHREE.SphereGeometry20,64,64;const earthMaterial=new THREE.MeshStandardMaterial{map:newTHREE.TextureLoader.loadearth_texture.jpg,bumpMap:new THREE.TextureLoader.loadearth_bump.jpg,bumpScale:

0.5,specularMap:new THREE.TextureLoader.loadearth_specular.jpg,};const earth=new THREE.MeshearthGeometry,earthMaterial;scene.addearth;//添加大气层效果const atmosphereGeometry=new THREE.SphereGeometry

20.5,64,64;constatmosphereMaterial=new THREE.MeshLambertMaterial{color:0x4ca6ff,transparent:true,opacity:

0.2,side:THREE.BackSide};const atmosphere=new THREE.MeshatmosphereGeometry,atmosphereMaterial;scene.addatmosphere;//添加数据点function addDataPointlat,lng,data{//将经纬度转换为3D坐标const phi=90-lat*Math.PI/180;const theta=lng+180*Math.PI/180;const radius=

20.1;const x=-radius*Math.sinphi*Math.costheta;const y=radius*Math.cosphi;const z=radius*Math.sinphi*Math.sintheta;//创建标记点const markerGeometry=newTHREE.SphereGeometry

0.2,16,16;const markerMaterial=new THREE.MeshBasicMaterial{color:0xff4500,transparent:true,opacity:

0.8};const marker=new THREE.MeshmarkerGeometry,markerMaterial;marker.position.setx,y,z;scene.addmarker;//创建浮动文本标签const div=document.createElementdiv;div.className=data-label;div.textContent=data.name;div.style.backgroundColor=rgba0,0,0,

0.7;div.style.color=white;div.style.padding=2px6px;div.style.borderRadius=3px;div.style.fontSize=12px;div.style.pointerEvents=none;const label=newCSS2DObjectdiv;label.position.setx,y,z;scene.addlabel;//添加连接主体的光线const lineGeometry=newTHREE.BufferGeometry.setFromPoints[new THREE.Vector3x,y,z,new THREE.Vector3x*

1.5,y*

1.5,z*

1.5];constlineMaterial=new THREE.LineBasicMaterial{color:0xff4500,transparent:true,opacity:

0.5};const line=newTHREE.LinelineGeometry,lineMaterial;scene.addline;return{marker,label,line};}//添加示例数据点const dataPoints=[{lat:

39.9,lng:

116.4,name:北京:2854万},{lat:

31.2,lng:

121.5,name:上海:2487万},{lat:

22.5,lng:

114.1,name:深圳:1756万},{lat:

23.1,lng:

113.3,name:广州:1883万},{lat:

30.3,lng:

120.2,name:杭州:1180万}];dataPoints.forEachpoint={addDataPointpoint.lat,point.lng,point;};//添加光照const ambientLight=newTHREE.AmbientLight0x404040,1;scene.addambientLight;const directionalLight=newTHREE.DirectionalLight0xffffff,1;directionalLight.position.set-50,50,50;scene.adddirectionalLight;//渲染循环function animate{requestAnimationFrameanimate;//缓慢旋转地球earth.rotation.y+=

0.001;atmosphere.rotation.y+=

0.001;controls.update;renderer.renderscene,camera;labelRenderer.renderscene,camera;}animate;//响应窗口调整window.addEventListenerresize,={camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix;renderer.setSizewindow.innerWidth,window.innerHeight;labelRenderer.setSizewindow.innerWidth,window.innerHeight;};前端安全基础XSS攻击与防御CSRF攻击与防御跨站脚本攻击Cross-Site Scripting,XSS是指攻击者在网页中注入恶意脚本，当用户浏览页面时执行跨站请求伪造Cross-Site RequestForgery,CSRF是指攻击者诱导用户在已登录的网站上执行非本意的操作XSS类型防御措施存储型XSS恶意代码存储在服务器，访问页面时触发输入过滤验证并清理用户输入反射型XSS恶意代码包含在URL中，诱导用户点击输出编码HTML实体编码敏感字符DOM型XSS利用JavaScript动态操作DOM引发的安CSP策略内容安全策略限制资源加载全问题HttpOnly防止JavaScript访问Cookie1234攻击示例代码示例//评论框中输入恶意脚本//URL参数注入//前端防御XSSfunction encodeHTMLstrhttps://example.com/searchq={return str.replace//g,.replace//g,.replace//g,.replace//g,;}//使用DOMPurify库import DOMPurifyfromdompurify;const clean=DOMPurify.sanitizeuserInput;//设置CSP头后端Content-Security-Policy:default-srcself;script-src selfhttps://trusted.com;CSRF攻击原理攻击者利用用户已登录的身份，在不同网站上构造请求，骗取用户点击或自动发起请求CSRF防御措施CSRF Token在表单中嵌入随机生成的令牌，服务器验证。