[页面加载 ]的搜索结果

... 功能。你可以在文档加载完毕后通过调用 bootstrap.Dropdown.getInstance 或 bootstrap.Dropdown.getOrCreateInstance 方法来初始化下拉菜单： javascript document.addEventListener('DOMContentLoaded', function () { var dropdowns = document.querySelectorAll('.dropdown-toggle') Array.from(dropdowns).forEach(function (dropdown) { bootstrap.Dropdown.getOrCreateInstance(dropdown) }) }) 上述代码会在页面加载完成后对所有带有 .dropdown-toggle 类名的元素进行下拉菜单初始化操作，这样一来，下拉菜单就可以正常地展开和收回了。 总结 通过上面的示例代码和解析，我们可以看到，使用 Bootstrap 创建下拉菜单时，不仅需要注意 HTML 结构，还需正确引入并初始化相关的 JavaScript 插件。当碰到“下拉菜单顽固不肯收回去”的状况时，咱们得淡定地、一步步地审查脚本的引用情况和初始化步骤，这样才能准确无误地找到问题的藏身之处。在编程这个领域里，每一个小细节都像一块积木一样重要，你可别小瞧了那些看似不起眼的小问题，它们就像隐藏在机器王国里的捣蛋鬼，随时可能给你惹出大乱子来。因此，让我们在探索与实践中，不断积累经验，提升技能，享受解决问题的乐趣吧！

...定事件（如鼠标点击、页面加载完成、键盘按键等）发生时执行的代码块。例如，在文中，通过addEventListener方法给按钮元素添加了 click 事件监听器，当用户单击该按钮时，预设的回调函数会被触发并执行相应的操作。 Pointer Events , Pointer Events是W3C提出的一种新的浏览器标准，旨在提供一个统一的API来处理所有类型的指针输入设备事件，包括鼠标、触摸屏、触控笔等。通过支持Pointer Events，开发者可以更轻松地编写跨平台、跨设备兼容的交互代码，无需针对不同类型的输入设备分别处理mousemove、touchstart、mousedown等不同的事件。虽然在本文中未详细展开，但其作为未来Web开发领域一个重要趋势和补充，能够简化JavaScript对各类指针输入事件的监听与处理逻辑。

...初次接触Vue的启动加载可能会有些许困惑。今天，伙计们，咱们来一场说走就走的Vue之旅，揭开它启动时的小秘密，看看它究竟是怎么一步步运作起来的。而且，别急，咱们不仅要懂，还要学会怎么让它跑得更快，让用户的感受就像坐上了风火轮一样顺滑！ 二、Vue的初始化过程 1. 引入Vue 首先，让我们从最基础的开始。在HTML中引入Vue.js库，这通常通过 2. 创建Vue实例 在页面中创建一个Vue实例，这是启动加载的核心。例如： javascript new Vue({ el: 'app', data: { message: 'Hello Vue!' } }) 在这个例子中，我们告诉Vue将应用挂载到id为'app'的元素上，并初始化了一个简单的数据对象。 三、编译与渲染 1. 模板编译 Vue会将我们的模板（如 { { message } } ）编译成可执行的JavaScript函数。这个过程是异步的，不会阻塞浏览器，确保了流畅的用户体验： javascript new Vue({ template: ' { { message } } ', data: { message: 'Hello Vue!' } }) 2. 渲染过程 当数据发生变化时，Vue会自动更新视图，这就是著名的“响应式”特性。当你初次启动Vue，就像个好奇宝宝一样，它会把整个网页的结构从头到尾摸一遍，然后把它那些虚拟的HTML元素一点一点地转变成真实的DOM小家伙。 四、性能优化 懒加载与异步组件 1. 懒加载 对于大型应用，我们可以利用Vue的懒加载特性，只在需要时才加载组件。比如，使用async属性： javascript const AsyncComponent = () => import('./AsyncComponent.vue') new Vue({ components: { AsyncComponent }, template: }) 2. 异步组件 对于更复杂的组件，可以使用异步组件。这样，Vue会在首次加载时只解析组件定义，而实际加载则在需要时触发： javascript const AsyncComponent = () => ({ component: () => import('./AsyncComponent.vue'), resolve: component => { component.default = component } }) 五、总结 Vue的启动加载过程看似简单，实则包含了许多细节和优化策略。掌握这些奥秘，就像解锁了提升项目表现的魔法，让用户体验那顺滑如丝般流畅，简直就是个小确幸！记住，一个好的开发者不仅关注代码的运行，更关心用户的感受。在Vue的世界里，每一次页面加载变得更快，就像是我们对用户的贴心问候和无声的保证，告诉他们：“你的等待，我们懂，速度就是我们的诚意！” 最后，让我们继续探索Vue的更多奥秘，享受开发的乐趣吧！

如何优化字体加载的性能？ 1. 引言 嘿，各位开发者们！今天我们要聊一聊如何在Vue项目中优化字体加载的性能。这个问题听起来可能有点儿玄乎，但实际上它对咱们网站的打开速度影响可大了。我之前也被这问题搞得头大，但经过一阵子的摸索，还真让我找到了一些不错的解决办法。现在，就让我来分享一下我的经验和见解吧！ 2. 字体加载的常见问题 在我们开始优化之前，先来看看字体加载可能会带来哪些问题。 - 阻塞渲染：浏览器在解析HTML时，如果遇到需要加载的字体，会暂停渲染页面，直到字体加载完成。 - 延迟体验：用户打开网页后，虽然能看到页面内容，但由于字体未加载完毕，文本内容会闪烁或改变样式，影响用户体验。 - 增加请求次数：如果每种字体都需要单独加载，会增加HTTP请求次数，进一步拖慢页面加载速度。 3. 解决方案 3.1 使用字体加载策略 首先，我们需要考虑字体加载策略。一种常见的方法是使用font-display属性，它能帮助我们控制字体的加载行为。例如： html 这里，font-display: swap;表示如果字体还在加载中，浏览器会立即使用备用字体显示文本，等到自定义字体加载完毕再替换。这样可以避免阻塞渲染，提升用户体验。 3.2 延迟加载字体 接下来，我们可以尝试延迟加载字体。这意味着当页面加载到一定程度后再加载字体文件。在Vue中，可以利用IntersectionObserver来实现这一点。以下是一个简单的示例： javascript // 在Vue组件中 export default { mounted() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { // 当字体所在的元素进入视口时，动态加载字体 import('./assets/fonts/myfont.woff2').then(() => { document.fonts.load('1em MyFont', 'Hello world') .then(() => { console.log('Font loaded!'); }) .catch(() => { console.error('Font failed to load.'); }); }); observer.unobserve(entry.target); } }); }); // 监听需要延迟加载字体的元素 observer.observe(this.$refs.myElement); }, }; 在这个示例中，我们创建了一个IntersectionObserver实例，当字体所在的元素进入视口时，动态加载字体文件，并且在字体加载完成后进行相应的处理。 3.3 使用Web字体服务 如果你不想自己管理字体文件，还可以考虑使用一些流行的Web字体服务，如Google Fonts或Adobe Fonts。这些服务通常会提供经过优化的字体文件和聪明的加载方式，这样就能让我们的工作轻松不少。例如： html 然后在CSS中直接引用： css body { font-family: 'Roboto', sans-serif; } 这种方式不仅方便快捷，还能确保字体加载的性能优化。 4. 总结与反思 通过上述几种方法，我们可以有效地优化字体加载的性能，提升用户体验。当然，实际应用中还需要根据具体情况灵活选择合适的策略。希望能帮到你，如果有啥问题或想法，尽管留言，咱们聊一聊！我们一起学习，一起进步！

...最常见的一个问题就是页面无法正常加载。对于这种现象，我们通常会检查我们的HTML、CSS以及JavaScript文件是否有误。然而，有一种常见的问题常常被忽视，那就是路由配置错误。 在ReactJS中，路由是我们应用的重要组成部分，它决定了用户可以访问哪些页面。假如路由器配置出了岔子，用户的请求就找不到该去的正确目的地——也就是对应的组件啦，这样一来，页面自然也就没法正常显示出来。 序号二：路由配置错误的症状 让我们来看一个简单的例子。假设我们有一个名为"Home"的组件，我们在App.js文件中定义了如下路由： javascript import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; import Home from './Home'; function App() { return ( ); } export default App; 在这个例子中，当用户访问网站的根路径（即"/"）时，他们应该看到我们的"Home"组件。不过呢，假如我们对这个路由的设定动了手脚，比如把exact属性给删掉了，或者路径给改了，这时候可能就不太好使啦，会出些小岔子。 序号三：路由配置错误的原因 那么为什么路由配置错误会导致页面无法正常加载呢？这是因为ReactJS依赖于路由配置来确定哪个组件应该渲染。如果路由配置没整对，ReactJS这位家伙就懵圈了，不知道该显示哪个组件才对劲儿，这样一来，页面自然也就没法正常蹦出来给你瞧了。 序号四：如何解决路由配置错误？ 解决路由配置错误的方法其实很简单。首先，我们需要确保我们的路由配置是正确的。这也就是说，你得确保每一步都用对了地方，就像走迷宫一样，要踏上正确的路径模式。组件的选择也得恰到好处，就像拼图游戏里找准每一个零部件一样重要。还有那些属性，像是exact、component这些小家伙，它们各自有各自的职责，一个都不能乱来，必须放在正确的位置上才能发挥出应有的作用。接着呢，咱们得动手测一下咱的路由配置，瞧瞧它能不能准确无误地把请求送到对应的组件那里去。最后，假如碰到了问题，咱就得动手调整一下路由配置，让它们回归正常运作哈。 例如，在上面的例子中，如果我们删除了exact属性，那么用户访问任何以"/"开头的路径都会显示我们的"Home"组件，这显然是不合适的。所以，我们需要加上exact属性，以确保只有当路径为"/"时才会显示"Home"组件。 总结 总的来说，路由配置错误是ReactJS开发中的一个重要问题，我们应该给予足够的重视。只要把路由配置整对了，咱们的应用就能妥妥地跑起来，带给用户棒棒的体验。此外，咱们也得学一手处理路由配置出错的招儿，这样万一碰上问题了，就能立马把它给捯饬好。

...a Discover页面加载数据慢或空白：深度解析与优化策略 1. 引言 在大数据时代，Elasticsearch 作为一款强大的实时分布式搜索分析引擎备受瞩目，而Kibana则是其可视化界面的重要组成部分。在实际操作中，咱们可能会遇到这么个情况：打开Kibana的Discover页面加载数据时，那速度慢得简直能让人急出白头发，更糟的是，有时候它还可能调皮地给你来个大空白，真叫人摸不着头脑。这种问题不仅影响数据分析效率，也给用户带来困扰。本文将带您一同探寻这个问题的背后原因，并通过实例和解决方案来解决这一痛点。 2. Kibana Discover页面的基本工作原理 Kibana Discover页面主要用于交互式地探索Elasticsearch中的索引数据。当你点开Discover页面，选好一个索引后，Kibana就像个贴心的小助手，会悄悄地向Elasticsearch发出查询请求，然后把那些符合你条件的数据给挖出来，以一种可视化的方式展示给你看，就像变魔术一样。如果这个过程耗时较长或者返回为空，通常涉及到以下几个可能因素： - 查询语句过于复杂或宽泛 - Elasticsearch集群性能瓶颈 - 网络延迟或带宽限制 - Kibana自身的配置问题 3. 深入排查原因（举例说明） 示例1：查询语句分析 json GET /my_index/_search { "query": { "match_all": {} }, "size": 5000 } 上述代码是一个简单的match_all查询，试图从my_index中获取5000条记录。如果您的索引数据量巨大，这样的查询将会消耗大量资源，导致Discover页面加载缓慢。此时，可以尝试优化查询条件，比如添加时间范围过滤、字段筛选等。 示例2：检查Elasticsearch性能指标 借助Elasticsearch的监控API，我们可以获取节点、索引及查询的性能指标： bash curl -X GET 'localhost:9200/_nodes/stats/indices,query_cache?human&pretty' 通过观察查询缓存命中率、分片分配状态以及CPU、内存使用情况，可以帮助我们判断是否因ES集群性能瓶颈导致Discover加载慢。 4. 解决策略与实践 策略1：优化查询条件与DSL 确保在Discover页面使用的查询语句高效且有针对性。例如，使用range查询限定时间范围，使用term或match精确匹配特定字段，或利用bool查询进行复杂的组合条件过滤。 策略2：调整Elasticsearch集群配置 - 增加硬件资源，如提升CPU核数、增加内存大小。 - 调整索引设置，如合理设置分片数量和副本数量，优化refresh interval以平衡写入性能与实时性需求。 - 启用并适当调整查询缓存大小。 策略3：优化Kibana配置 在Kibana.yml配置文件中，可以对discover页面的默认查询参数进行调整，如设置默认时间范围、最大返回文档数等，以降低一次性加载数据量。 5. 结论与探讨 解决Kibana Discover页面加载数据慢或空白的问题，需要结合实际情况，从查询语句优化、Elasticsearch集群调优以及Kibana自身配置多方面着手。在实际操作的过程中，我们得像个福尔摩斯那样，一探究竟，把问题的根源挖个底朝天。然后，咱们得冷静分析，理性思考，不断尝试各种可能的优化方案，这样才能够让咱们的数据分析之路走得更加顺风顺水，畅通无阻。记住，每一次的成功优化都是对我们技术理解与应用能力的一次锤炼和提升！

...进行重绘工作，从而让页面加载、滚动时更加流畅顺滑，速度嗖嗖地提升。同时，我们也可以避免因为频繁的数据请求而带来的网络延迟。 另外，我们还可以考虑优化后端的服务。比如，想象一下我们把滑块的数值放在一个中心仓库里，这个仓库对所有人都开放，每次用户调皮地拽动滑块的时候，我们就只需要把这个仓库里的数值更新一下。接下来，就舒舒服服地等待后端服务大哥给咱们回个“收到，一切OK”的消息就行啦。这样不仅可以减少网络请求的次数，也可以降低服务器的压力。 四、实例演示 下面，我将以一个具体的例子来演示上述解决方案。 html 在这个例子中，我们使用了一个定时器来模拟后端服务的响应时间。当用户手指一滑，动了那个滑块，我们立马就会给滑块的数值来个刷新。然后呢，咱也不急不躁，等个大概200毫秒的样子，再悠哉悠哉地给后端发送一个“一切OK”的确认消息哈。这样就可以避免出现滑块值的实时更新延迟的问题了。 五、结论 总的来说，滑块值的实时更新延迟是一个常见的问题，但只要我们采取正确的策略，就完全可以解决这个问题。我们得把前端和后端的技术两手抓，联手优化咱们的代码和服务，这样一来，就能让用户享受到更上一层楼的体验。同时呢，咱们也得时刻保持对问题的敏锐洞察力和满满的好奇心，这样才能够不断发现那些藏起来的问题，解决它们，从而让我们的技术噌噌噌地进步！

...实时反馈的东西，比如加载动画或者进度条啥的，这样他们就能看到自己的操作正在被处理，不会觉得系统卡顿或者慢吞吞的。另外，我们还要优化前端性能，就是说尽量减少那些没必要的请求，让页面加载得更快，操作起来更流畅。这样一来，用户体验绝对能提升一大截！ html 提交 六、结语 通过上述步骤，我们不仅学会了如何在ElementUI中构建一个具有实时存储功能的表单应用，还了解了如何进行数据验证、错误处理以及优化用户体验。ElementUI，这货简直就是程序员们的超级助手啊！它那简洁高效的风格，就像是魔法一样，让开发者们轻轻松松就能打造出既实用又好看的应用程序。想象一下，你就像个魔法师，只需要几行代码，就能变出一个功能齐全、界面超赞的软件，是不是特别过瘾？ElementUI就是这么给力，让你的创意和想象力，都能在实际项目中大放异彩，不再受限于技术瓶颈。所以，如果你是个爱搞创新、追求极致体验的开发者，ElementUI绝对是你不可多得的好伙伴！哎呀，随着你慢慢摸清了Vue.js这个工具箱里的宝贝，你会发现能做的事儿多了去了！就像是解锁了新技能，可以玩转更复杂的网页设计，打造超级酷炫、功能强大的网站应用。想象一下，你就像个魔法师，手里的魔法棒（Vue.js）越用越熟练，能变出的东西就越来越厉害！是不是感觉整个人都充满了创造的激情？快来试试，让你的创意在网页上绽放吧！

...到与其身份相符的功能页面。 此外，随着微信小程序平台对安全性、性能优化等方面的不断升级，如何在满足功能需求的同时兼顾页面加载速度和白屏问题，也成为开发者关注的重点。未来，我们期待更多关于动态设置tabbar的技术探讨和最佳实践涌现，进一步推动小程序开发领域向着更高效、更安全、更个性化的方向发展。 同时，针对权限管理在全栈开发中的重要性，推荐读者深入了解OAuth2.0、JWT等授权协议的应用场景，以便在设计复杂权限系统时提供理论支撑和技术指导。通过研读相关文献及成功案例，开发者可以更好地将角色权限控制与前端UI展示相结合，打造更为流畅、灵活且符合业务需求的小程序产品。

...仅会影响用户体验，如页面加载速度变慢，也可能进一步拖垮整个系统的性能，甚至引发雪崩效应，让整个服务瘫痪。如同多米诺骨牌效应，一环出错，全链受阻。 3. 解决方案与优化策略 (1)扩容与分片：根据业务需求合理分配和扩展Memcached服务器数量，进行数据分片存储，分散单个节点压力。 bash 配置多个Memcached服务器地址 memcached -p 11211 -d -m 64 -u root localhost server1 memcached -p 11212 -d -m 64 -u root localhost server2 在客户端代码中配置多个服务器 mc = memcache.Client(['localhost:11211', 'localhost:11212'], debug=0) (2)调整键值过期策略：避免大量键值在同一时间点过期，采用分散式的过期策略，比如使用随机过期时间。 (3)增大内存与优化网络：提升Memcached服务器硬件配置，增加内存容量以应对更大规模的数据缓存；同时优化网络设备，提高带宽以减少数据传输延迟。 (4)监控与报警：建立完善的监控机制，对Memcached的各项指标（如命中率、内存使用率等）进行实时监控，并设置合理的阈值进行预警，确保能及时发现并解决问题。 4. 结语 面对Memcached服务器负载过高、响应延迟的情况，我们需要像侦探一样细致观察、精准定位问题所在，然后采取针对性的优化措施。每一个技术难题，对我们来说，都是在打造那个既快又稳的系统的旅程中的一次实实在在的锻炼和成长机会，就像升级打怪一样，让我们不断强大。要真正玩转这个超牛的缓存神器Memcached，让它为咱们的应用程序提供更稳、更快的服务，就得先彻底搞明白它的运行机制和可能遇到的各种潜在问题。只有这样，才能称得上是真正把Memcached给“驯服”了，让其在提升应用性能的道路上发挥出最大的能量。

...疼的问题——打开前端页面，却发现白茫茫一片啥也没有。这无疑给开发者带来了困扰，如同迷失在迷宫中寻找出路。今天，让我们一起深入探讨这个问题，揭开其神秘面纱，找到切实可行的解决方案。 2. 现象与问题分析 当我们在Docker环境下使用Nginx服务部署前后端分离项目时，可能遇到前端页面加载不出来，显示为空白的情况。这是因为Nginx配置不当导致无法正确地将请求转发至后端API和前端静态资源。就好比一位快递员接收到包裹，却不知道正确的投递地址一样。 3. Nginx基础配置理解 首先，我们需要对Nginx的基本配置有所理解。在Nginx中，每个server块可以视为一个独立的服务，它通过监听特定的端口接收并处理HTTP请求： nginx server { listen 80; server_name yourdomain.com; 这里是我们需要重点关注的地方，用于定义如何处理不同类型的请求 } 4. 配置Nginx实现前后端分离 假设我们的前端应用构建后的静态文件存放在/usr/share/nginx/html，而后端API运行在一个名为backend的Docker容器上，暴露了8080端口。这时，我们需要配置Nginx来分别处理静态资源请求和API请求： nginx server { listen 80; server_name yourdomain.com; 处理前端静态资源请求 location / { root /usr/share/nginx/html; 前端静态文件目录 index index.html; 默认首页文件 try_files $uri $uri/ /index.html; 当请求的文件不存在时，返回到首页 } 转发后端API请求 location /api { proxy_pass http://backend:8080; 将/api开头的请求转发至backend容器的8080端口 include /etc/nginx/proxy_params; 可以包含一些通用的代理设置，如proxy_set_header等 } } 这个配置的核心在于location指令，它帮助Nginx根据URL路径匹配不同的处理规则。嘿，你知道吗？现在前端那些静态资源啊，比如图片、CSS样式表什么的，都不再从网络上请求了，直接从咱本地电脑的文件系统里调用，超级快！而只要是请求地址以"/api"打头的，就更有趣了，它们会像接力赛一样被巧妙地传递到后端服务器那边去处理。这样既省时又高效，是不是很酷嘞？ 5. Docker环境下的实践思考 在Docker环境中，我们还需要确保Nginx服务能正确地发现后端服务。这通常就像是在Docker Compose或者Kubernetes这些牛哄哄的编排工具里“捯饬”一下，让网络配置变得合理起来。比如，咱们可以先把Nginx和后端服务放在同一个“小区”（也就是网络环境）里，然后告诉Nginx：“嘿，老兄，你只需要通过那个叫做backend的门牌号，就能轻松找到你的后端小伙伴啦！”这样的操作，就实现了Nginx对后端服务的访问。 6. 结语 通过以上讨论，我们已成功揭示了在Nginx+Docker部署前后端分离项目中访问空白问题的本质，并给出了解决方案。其实，每一次操作就像是亲手搭建一座小桥，把客户端和服务器两端的信息通道给连通起来，让它们能够顺畅地“对话”。只有当我们把每个环节都搞得明明白白，像那些身经百战的建筑大师一样洞若观火，才能顺顺利利解决各种部署上的“拦路虎”，确保用户享受到既稳定又高效的线上服务体验。所以，无论啥时候在哪个地儿，碰见技术难题了，咱们都得揣着那股子热乎劲儿和胆量去积极探寻解决之道。为啥呢？因为解决问题这档子事啊，其实就是咱自我成长的一个过程嘛！

...种设计方式不仅提高了页面加载速度，还增强了用户的阅读体验。 2. 动画与交互的创新：为了吸引用户注意力并提高参与度，设计师开始探索更多动态元素的运用，如轻盈的过渡效果、微交互等。这些元素不仅美化了界面，还能在用户与网站之间建立情感连接，提升整体用户体验。 3. 语音搜索与AI助手的整合：随着语音识别技术的进步，越来越多的网页开始支持语音搜索功能，与AI助手集成，为用户提供更加便捷、自然的交互方式。这一趋势预示着网页设计将进一步融入智能科技，提供个性化的服务体验。 技术工具 1. CSS Grid 和 Flexbox：这两种布局模式在现代网页设计中发挥了关键作用，它们允许开发者创建更灵活、响应式的网格布局，无需依赖媒体查询，大大简化了跨设备设计流程。 2. Progressive Web Apps (PWA)：PWA结合了原生应用的高效性和Web应用的可访问性，提供快速加载、离线可用和推送通知等功能，成为移动优先设计中的重要组成部分。 3. 自动化测试与优化工具：随着网页性能和用户体验的重要性日益凸显，自动化测试工具如Lighthouse、PageSpeed Insights等被广泛应用于开发过程中，帮助开发者持续优化网页加载速度、可访问性等关键指标。 未来展望 尽管移动优先设计带来了诸多优势，但同时也面临着一些挑战，如如何平衡设计复杂度与性能优化、如何在满足多样化的设备需求的同时保持设计的一致性等。未来，随着技术的不断进步，预计会出现更多智能化的设计工具、更高效的数据分析手段，以及更深入的人工智能集成，以进一步提升移动优先设计的效率和效果。 移动优先设计不仅是对传统网页设计模式的革新，更是对用户体验至上的追求。面对未来，开发者需紧跟技术潮流，不断创新设计策略和技术应用，以应对不断变化的市场需求和用户期待。

...次性展示给用户，不仅页面加载速度会慢得让人抓狂，而且用户也很难找到他们想要的商品。这时候，分页功能就显得尤为重要了。这家伙能帮我们把海量数据切成小块，吃起来方便，还能让咱们用得更爽，系统也跑得飞快！ 1.2 为什么需要排序？ 再来聊聊排序。在数据展示中，排序功能可以帮助用户根据自己的需求快速定位到所需信息。比如说，在新闻网站上，大家通常都想第一时间看到最新的新闻动态，或者是想找那些大家都爱看的热门文章，点开看看究竟多火。这样一来，我们就能按照用户的喜好来调整数据的排列顺序，让用户看着更舒心，自然也就更满意啦！ 2. PostgreSQL中的分页与排序 既然了解了为什么我们需要这些功能，那么现在让我们来看看如何在PostgreSQL中实现它们吧！ 2.1 分页的基本概念 在SQL中，分页通常涉及到两个关键参数：OFFSET 和 LIMIT。OFFSET用于指定从结果集的哪个位置开始返回数据，而LIMIT则限制了返回的数据条目数量。例如，如果你想从第5条记录开始获取10条数据，你可以这样写： sql SELECT FROM your_table_name ORDER BY some_column OFFSET 5 LIMIT 10; 这里，ORDER BY some_column是可选的，但强烈建议你总是为查询加上一个排序条件，因为没有明确的排序规则时，返回的数据可能会出现不一致的情况。 2.2 实战演练：分页查询实例 假设你有一个名为products的表，里面存储了各种产品的信息，你想实现一个分页功能来展示这些产品。首先，你得搞清楚用户现在要看的是哪一页（就是每页显示多少条记录），然后用这个信息算出正确的OFFSET值。这样子才能让用户的请求对上数据库里的数据。 sql -- 假设每页显示10条记录 WITH page AS ( SELECT product_id, name, price, ROW_NUMBER() OVER (ORDER BY product_id) AS row_number FROM products ) SELECT FROM page WHERE row_number BETWEEN (page_number - 1) items_per_page + 1 AND page_number items_per_page; 这里的page_number和items_per_page是根据前端传入的参数动态计算出来的。这样，无论用户请求的是第几页，你都可以正确地返回对应的数据。 2.3 排序的魅力 排序同样重要。通过在查询中添加ORDER BY子句，我们可以控制数据的输出顺序。比如，如果你想按价格降序排列产品列表，可以这样写： sql SELECT FROM products ORDER BY price DESC; 或者，如果你想让用户能够自由选择排序方式，可以在应用层接收用户的输入，并相应地调整SQL语句中的排序条件。 3. 结合分页与排序 实战案例 接下来，让我们将分页和排序结合起来，看看实际效果。咱们有个卖东西的网站，得弄个页面能让大伙儿按不同的标准（比如说价格高低、卖得快不快这些）来排产品。这样大家找东西就方便多了。 sql WITH sorted_products AS ( SELECT FROM products ORDER BY CASE WHEN :sort_by = 'price' THEN price END ASC, CASE WHEN :sort_by = 'sales' THEN sales END DESC ) SELECT FROM sorted_products LIMIT :items_per_page OFFSET (:page_number - 1) :items_per_page; 在这个例子中，:sort_by、:items_per_page和:page_number都是从用户输入或配置文件中获取的变量。这种方式使得我们的查询更加灵活，能够适应不同的业务场景。 4. 总结与反思 通过这篇文章，我们探索了如何在PostgreSQL中有效地实现数据的分页和排序功能。别看这些技术好像挺简单，其实它们对提升用户体验和让系统跑得更顺畅可重要着呢！当然啦，随着项目的不断推进，你可能会碰到更多棘手的问题，比如说要应对大量的同时访问，还得绞尽脑汁优化查询速度啥的。不过别担心，掌握了基础之后，一切都会变得容易起来。 希望这篇技术分享对你有所帮助，也欢迎你在评论区分享你的想法和经验。让我们一起进步，共同成长！ --- 这就是我关于“如何在数据库中实现数据的分页和排序功能？”的全部内容啦！如果你对PostgreSQL或者其他数据库技术有任何疑问或见解，记得留言哦。编程路上，我们一起加油！

...板缓存文件，从而提高页面加载速度和整体性能。

...户体验的前提下，提高页面加载速度和响应时间，成为亟待解决的问题。Material UI提供了多种优化选项，如懒加载、按需导入组件、减少HTTP请求等。此外，使用Web Performance API进行性能监控，分析瓶颈所在，采取相应措施，也是提升应用性能的有效手段。 再次，响应式设计和适配多设备需求是现代前端开发的重要考量。Material UI提供了丰富的响应式组件，支持自适应布局和动态样式调整。然而，面对复杂多变的屏幕尺寸和分辨率，如何在保持设计一致性的同时，确保每个用户都能获得最佳体验，是值得深入研究的课题。这涉及到对不同设备特性的深入理解，以及灵活运用CSS Flexbox、Grid等布局工具。 最后，安全性不容忽视。随着数据泄露事件频发，前端应用的安全防护变得尤为重要。Material UI虽然提供了安全的组件库，但开发者仍需了解跨站脚本攻击（XSS）、同源策略（CSP）等常见安全威胁，并采取相应措施。加强输入验证、合理使用CDN服务、定期更新依赖库版本，都是提高应用安全性的有效策略。 综上所述，随着技术的不断进步，Material UI的使用不再是简单的组件拼接，而是需要开发者具备更全面的知识和技能，包括组件化、性能优化、响应式设计以及安全防护等方面。通过不断学习和实践，开发者可以更好地应对挑战，构建出既美观又高效、安全的前端应用。

...数据库查询次数，加快页面加载速度，提升用户体验。此外，Redis的持久化机制（如RDB和AOF）确保了缓存数据的安全性，即使在服务器崩溃后也能快速恢复。 4. 机器学习与数据分析 随着人工智能技术的发展，Redis在支持机器学习模型的训练和部署上展现出潜力。通过Redis的高效数据结构，可以快速存储和检索大量的特征向量，加速模型的训练过程。同时，Redis的实时分析能力使其成为实时数据分析场景的理想选择，如在线广告投放、个性化推荐等。 5. 安全与合规性考虑 在应用Redis的过程中，还需要注意安全性和合规性的问题。例如，确保敏感数据的加密存储、限制对Redis实例的访问权限、定期备份数据以防止数据丢失等。遵循行业标准和法律法规，如GDPR或CCPA，对于保护用户隐私至关重要。 总之，Redis凭借其高效、灵活的特点，在现代Web应用中扮演着越来越重要的角色。通过深入理解其在不同场景下的应用趋势和最佳实践，开发者可以更好地利用Redis提升应用性能、优化用户体验，并满足业务需求的多样化挑战。随着技术的不断演进，Redis的应用领域和最佳实践也将持续扩展，成为推动Web应用创新和发展的重要力量。

...浏览器进行交互，实现页面加载、元素定位、属性操作、JavaScript执行等功能，为Web自动化测试提供了一套完整的解决方案。 WebDriver BiDi协议 , WebDriver BiDi (Bidirectional) 协议是Selenium 4版本引入的新特性，它使得浏览器与测试脚本之间的通信更加实时和双向。在该协议下，不仅测试脚本可以向浏览器发送指令以模拟用户操作，浏览器也能主动向测试脚本推送状态变化或事件信息，从而增强了自动化测试的响应性和灵活性。 Shadow DOM , Shadow DOM是现代Web组件技术中的一个重要概念，用于封装组件内部结构及样式，保证组件的独立性并减少全局命名空间污染。在Selenium中，强化对Shadow DOM的支持意味着能够更准确地定位和操作嵌入在Shadow DOM树中的元素，这对于针对采用Web组件技术构建的复杂应用进行自动化测试具有重要意义。 持续集成（CI/CD） , 持续集成（Continuous Integration, CI）是一种软件开发实践，强调开发人员频繁地将代码更改合并到共享主分支，并通过自动化的构建和测试确保这些更改能够顺利集成。持续部署（Continuous Deployment, CD）则是指在完成测试后，自动将软件新版本部署到生产环境。文中提到的Jenkins、Travis CI等工具可与Selenium结合，在持续集成流程中执行自动化测试，确保每一次代码变更后的快速反馈与质量保障。 视觉回归测试 , 视觉回归测试是一种自动化测试方法，旨在检测Web界面在不同条件下的视觉效果是否符合预期。在文中提及的Applitools Eyes、PerceptualDiff等工具，它们能配合Selenium捕获页面截图，并通过算法比较前后两次截图的差异，以此判断UI界面是否有异常变化。这种测试方式对于维护跨平台、响应式设计的网站界面一致性极其重要。

...或者同时点开一个热门页面，要是咱们的服务降级方案没做好，那用户就可能觉得操作特别卡，或者某些功能突然用不了了，搞不好还会直接把App给关了走人。哎呀妈呀，这体验真的太折磨人了！我最近在捣鼓 HessianRPC 框架的时候，就被这个破问题给整懵圈了。 记得有一次我们的系统突然遭遇了流量高峰，结果服务器直接崩了，用户反馈说页面加载特别慢，有的功能根本点不开。我当时心里就嘀咕开了：“哎呀，总不能就这么干让用户体验卡在这儿吧？”后来一通排查下来，才发现是我们家的服务降级方案掉链子了。嘿，我最近琢磨起了HessianRPC里的服务降级功能，觉得挺有意思的，干脆好好研究一番，顺便把我的小心得跟大家唠唠！ 2. HessianRPC简介及初探 HessianRPC是一个轻量级的远程调用框架，主要用于Java应用程序之间的通信。它支持多种协议，比如HTTP、TCP等，非常适合构建分布式系统。不过，HessianRPC本身并没有内置的服务降级功能，所以我们需要手动去实现。 刚开始接触HessianRPC的时候，我觉得它的API还挺简洁的。比如，我们可以定义一个接口： java public interface HelloService { String sayHello(String name); } 然后通过代理类来调用这个接口的方法： java HessianProxyFactory factory = new HessianProxyFactory(); HelloService helloService = (HelloService) factory.create(HelloService.class, "http://localhost:8080/hello"); String result = helloService.sayHello("World"); System.out.println(result); 看到这段代码的时候，我心里想着：“嗯，看起来挺简单的嘛！”但是，当我尝试在高负载情况下运行它时，才发现事情并没有那么简单。 3. 服务降级的重要性与实践 服务降级的核心思想就是在系统资源紧张时，优先保证核心业务的正常运转，而暂时关闭一些非关键的功能。对于HessianRPC来说，我们可以通过异常捕获的方式来实现这一点。 假设我们现在有一个UserService，其中包含了一个getUserInfo()方法。要是咱们直接用这个方法，后端服务要是挂了，程序立马就“崩”了，那用户的体验肯定惨不忍睹啊！所以，我们需要对这个方法进行改造，加入降级逻辑。 java public class UserServiceFallback implements UserService { @Override public UserInfo getUserInfo(int userId) { // 返回默认值 return new UserInfo(-1, "Default User", "No Data Available"); } } 接着，在主逻辑中使用装饰器模式来包裹原始的服务： java public class UserServiceDecorator implements UserService { private final UserService userService; private final UserService fallback; public UserServiceDecorator(UserService userService, UserService fallback) { this.userService = userService; this.fallback = fallback; } @Override public UserInfo getUserInfo(int userId) { try { return userService.getUserInfo(userId); } catch (Exception e) { System.err.println("Service unavailable, falling back..."); return fallback.getUserInfo(userId); } } } 通过这种方式，即使后端服务出现问题，我们也能够提供一个友好的备用方案，不至于让用户感到困惑。 4. 面临挑战与解决方案 当然，实际开发过程中总会遇到各种意想不到的问题。比如说，当多个服务同时发生故障时，我们应该如何合理分配降级策略？另外，频繁触发降级会不会影响性能？ 为了解决这些问题，我们可以引入熔断器模式（Circuit Breaker Pattern）。简单讲啊，就好比给系统装了个“自动切换”的小开关。要是某个服务老是连不上，失败个好几次之后，这个开关就会自动启动，直接给用户返回个备用的数据，省得一直傻乎乎地去重试那个挂掉的服务，多浪费时间啊！ 下面是一个基于HessianRPC的熔断器实现： java public class CircuitBreaker { private final T delegate; private boolean open = false; private int failureCount = 0; public CircuitBreaker(T delegate) { this.delegate = delegate; } public T getDelegate() { if (open && failureCount > 5) { return null; // 返回null表示断路器处于打开状态 } return delegate; } public void recordFailure() { failureCount++; if (failureCount >= 5) { open = true; } } } 将熔断器集成到之前的装饰器中： java public class CircuitBreakingUserServiceDecorator implements UserService { private final CircuitBreaker circuitBreaker; public CircuitBreakingUserServiceDecorator(CircuitBreaker circuitBreaker) { this.circuitBreaker = circuitBreaker; } @Override public UserInfo getUserInfo(int userId) { UserService userService = circuitBreaker.getDelegate(); if (userService == null) { return new UserInfo(-1, "Circuit Opened", "Service Unavailable"); } try { return userService.getUserInfo(userId); } catch (Exception e) { circuitBreaker.recordFailure(); return new UserInfo(-1, "Fallback User", "Service Unavailable"); } } } 这样，我们就能够在一定程度上缓解高负载带来的压力，并且确保系统的稳定性。 5. 总结与展望 回顾这次经历，我深刻体会到服务降级并不是一件轻松的事情。这事儿吧，不光得靠技术硬功夫，还得会提前打算，脑子转得也得快，不然真容易手忙脚乱。虽然HessianRPC没有提供现成的服务降级工具，但通过灵活运用设计模式，我们完全可以打造出适合自己项目的解决方案。 未来，我希望能够在更多场景下探索HessianRPC的应用潜力，同时也期待社区能够推出更加完善的降级框架，让开发者们少走弯路。毕竟，谁不想写出既高效又优雅的代码呢？如果你也有类似的经历或想法，欢迎随时交流讨论！

...结果发现有时候会导致页面加载速度反而变慢了。后来经过反复调试，我才意识到，频繁地取消请求其实是得不偿失的。所以啊，大家在使用AbortError的时候一定要权衡利弊，不能盲目追求“安全”。 --- 五、总结与展望 总的来说，AbortError是一个非常实用且有趣的错误类型。它不仅能让我们更轻松地搞定那些乱七八糟的异步任务，还能让代码变得更好懂、更靠谱！不过，就像任何工具一样，它也需要我们在实践中不断摸索和完善。 未来，随着前端开发越来越复杂，我相信AbortError会有更多的应用场景。不管是应对一大堆同时进行的任务，还是让咱们跟软件互动的时候更顺畅、更开心，它都绝对是我们离不开的得力助手！所以，各位小伙伴，不妨多尝试用它来解决实际问题，说不定哪天你会发现一个全新的解决方案呢！ 好了，今天的分享就到这里啦。希望能给大家打开一点思路，也期待大家在评论区畅所欲言，分享你的想法！最后，祝大家coding愉快，早日成为编程界的高手！

...OM 树 文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示 文档树(Dom树)：以html为根节点，形成的一颗倒立的树状结构，我们成为DOM树；这个树上所有的东西都叫节点，节点有很多类，比如文本节点，元素节点等等，这些节点如果我们通过DOM方法去获取或者其他的操作去使用就叫做DOM对象，所有节点都是DOM对象 二.获取元素的方法 1.获取页面中的元素可以使用以下几种方式 根据ID获取 根据标签名获取 通过HTML5新增的方法获取 特殊元素获取 1.根据ID获取 使用getElementByld()方法可以获取带有ID的元素对象 getElementByld()，是document下的一个方法 代码演示 <body><div id="time">2020-11-26</div><script>// 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们的script写在标签下面// 2. document文档 get 获得 element 元素 by 通过 驼峰命名法// 3.参数 id是大小写敏感的字符串// 4.返回的是一个对象var timer = document.getElementById('time');console.log(timer);// 5.console.dir 打印我们返回得的元素对象 更好的查看里面的属性和方法console.dir(timer);</script></body> 2.根据标签名获取 使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合 语法如下 document.getElementsByTagName('标签名') 注意： 1.因为得到的是一个对象的集合，使用我们想要操作里面的元素就需要遍历 得到元素对象是动态的 代码演示 <body><ul><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li><li>我们的征程是星辰大海</li></ul><ul id="nav"><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li><li>心存感恩，所遇皆美好~</li></ul><script>// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的var lis = document.getElementsByTagName('li')console.log(lis);// 2.如果想要依次打印里面的元素对象我们可以采取遍历方式for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}// 3.这里可以是可以获取标签的.getElementsByTagName()可以得到这个元素里面的某些标签var nav1 = document.getElementById('nav') //这个获取nav元素var navli = nav.getElementsByTagName('li') //这里是获取nav 里面的li标签 要先获取 nav元素在获取里面的liconsole.log(navli);</script></body> 3.通过 HTML5 新增的方法获取(注意兼容) 1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合 2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象 3. document.querySelectorAll('选择器'); // 根据指定选择器返回所有元素对象集合 注意：querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’nav’); 代码演示 <body><div class="box">盒子1</div><div class="box">盒子2</div><div id="nav"><ul><li>首页</li><li>产品</li></ul></div><script>// 1. getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box navvar firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('nav');console.log(nav);var li = document.querySelector('li');console.log(li);// 3. querySelectorAll()返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box');console.log(allBox);var lis = document.querySelectorAll('li');console.log(lis);</script> 4.获取特殊元素(body,html) 获取body元素 - doucumnet.body // 返回body元素对象 获取html元素 . document.documentElement // 返回html元素对象 代码演示 <body><script>// 获取bdoy元素var bodyEle = document.bodyconsole.log(bodyEle); //返回body元素// 获取html元素var htmlEle = document.documentElementconsole.log(htmlEle); //返回html元素</script></body> 三.事件基础 1.事件概述 JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。 简单理解： 触发— 响应机制。 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。 代码演示 <body><button id="btn">浩哥</button><script>// 点击一个按钮，弹出一个对话框// 1.事件是有三部分组成的 1.事件源 2.事件类型 3.事件处理程序 也称为事件三要素// (1).事件源 事件被触发的对象 var but = document.getElementById('btn')// (2).事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过还是？？？？// (3).事件处理程序 通过一个函数赋值的方式 完成 因为函数就是实现某种功能的but.onclick = function() {alert('浩哥爱编程')}</script></body> 2.执行事件的步骤 1. 获取事件源DOM对象(意思是你要获取那个元素) 2. 注册事件(绑定事件 意思是通过什么方式来处理比如是鼠标经过还是鼠标点击等等行为) 3. 添加事件处理程序(采取函数赋值形式 意思是你想做啥) 代码演示 <body><div>123</div><script>// 事件执行步骤 点击div 控制台输出我被选中了// 1.获取事件源var div = document.querySelector('div')// 2.绑定事件 注册事件// div.onclick// 3.添加事件处理程序div.onclick = function() {console.log('我被点击了');}</script></body> 3.常见的鼠标事件 onmouseenter鼠标移入事件 onmouseleave鼠标移出事件 四.操作元素 JS的DOM操作可以改变网页内容、结构和样式，利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性 1.操作元素内容(改变元素内容) elemeny.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 elemernt.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行 elemernt.Content可以获取隐藏元素的文本，包含换行和空白 代码演示 <title>Document</title><style>div,p {height: 30px;width: 300px;line-height: 30px;text-align: center;color: fff;background-color: pink;}</style></head><body><button>显示当前系统时间</button><div>某个时间</div><p>123</p><script>// 当我们点击了按钮，div里面的文字会发生变化// 1.获取元素 注意这里的按钮 和div都要获取到 因为 点击按钮div里面要发生变化所以都要获取var but = document.querySelector('button');var div = document.querySelector('div');// 2.绑定事件// but.onclick// 3.程序处理but.onclick = function() {// 改变元素内容 element(元素).innerTextdiv.innerText = '2020-11-27'}// 4.我们元素可以不用添加事件，就可以直接显示日期var p = document.querySelector('p');p.innerText = '2020-11-27';</script> elemeny.innerText和elemeny.innerHTML的区别 代码演示 <body><div></div><p></p><ul><li> 文字</li><li>123</li></ul><script>// innertText 和 innertHTML 的区别// 1. innerText 不识别html标签 非标准 去除空格和换行var div = document.querySelector('div');div.innerText = '<strong>今天是:</strong> 2020';// 2.innertHTML 识别html标签 W3C标准 保留空格和换行的 推荐尽量使用这个 因为这个是标准var p = document.querySelector('p')p.innerHTML = '<strong>今天是:</strong> 2020';// 3.这俩个属性是可读写的 意思是 除了改变内容还可以元素读取里面的内容的var ul = document.querySelector('ul')console.log(ul.innerText);console.log(ul.innerHTML);// .4innerHtml innerText 之间的区别：设置内容的时候，如果内容当中包含标签字符串 innerHtml会有标签的特性，也就是说标签会在页面上生效如果内容当中包含标签字符串 innerText会把标签原样展示在页面上，不会让标签生效读取内容的时候，如果标签内部还有其它标签，innerHtml会把标签内部带着其它的标签全部输出如果标签内部还有其它标签，innerText只会输出所有标签里面的内容或者文本，不会输出标签如果标签内部没有其它标签，他们两个一致；都是读取文本内容，innerHtml会带空白和换行</script></body> 2. 操作常见元素属性 innerText、innerHTML 改变元素内容 src、href id、alt、title 代码演示 <body><button id="ldh">刘德华</button><button id="zxy">张学友</button><br><img src="./images/ldh.jpg" alt="" width="200px" height="200px" title="刘德华" id="img"><script>// 修改属性 src// 我们可以操作元素得方法 来修改元素得属性 就是 元素的是什么属性 在重新给值就可以完成相应的赋值操作了// 1.获取元素var ldh = document.getElementById('ldh')var zxy = document.getElementById('zxy')var img = document.getElementById('img')// 2.注册事件 程序处理zxy.onclick = function() {// 当我们点击了图片的时候图片路径就发生变化 这里的.表示 的 得意思 img对象下的src属性img.src = './images/zxy.jpg';// 当我们变换图片得同时里面得title也要跟着变 所以前面要加上img.img.title = '张学友';}ldh.onclick = function() {img.src = './images/ldh.jpg';img.title = '刘德华';}</script> 3.操作表单元素属性 利用DOM可以操作如下表单元素的属性 type、value、checked、selected、disabled 代码演示： <body><button>按钮</button><input type="text" value="输入内容"><script>// 我想把value里面的输入内容改变为 被点击了// 1.获取元素var but = document.querySelector('button')var input = document.querySelector('input')// 2.注册事件 处理程序but.onclick = function() {// input.innerHTML = '被点击了'; 这个是 普通盒子 比如 div 标签里面的内容// 表单里面的值 文字内容是通过value来修改的input.value = '被点击了'// 如果需要某个表单被禁用 不能再点击了使用 disabled 我们想要这个按钮 button禁用// but.disabled = true// 还有一种写法// this指向的是事件函数的调用者 谁调用就指向谁 这里调用者是btnthis.disabled = true}</script></body> 4.操作元素样式属性 我们可以通过 JS 修改元素的大小、颜色、位置等样式。 1.element.style 行内样式操作 注意： JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor JS 修改 style 样式操作，产生的是行内样式，所以行内式比内嵌式高 代码演示 <style>div {width: 200px;height: 200px;background-color: red;}</style></head><body><div></div><script>// 要求点击div变成粉色 height变为250px// 1.获取元素var div = document.querySelector('div');// 2.注册事件 处理程序div.onclick = function() {// div.style里面的属性 采取的是驼峰命名法// this等于div this调用者 谁调用谁执行this.style.backgroundColor = 'pink'this.style.height = '250px'}</script> 2.element.className 类名样式操作 注意： 如果样式修改较多，可以采取操作类名方式更改元素样式。 class因为是个保留字，因此使用className来操作元素类名属性 className 会直接更改元素的类名，会覆盖原先的类名。 代码演示 <style>div {width: 100px;height: 100px;background-color: pink;}.change {background-color: purple;color: fff;font-size: 25px;margin-top: 100px;}</style></head><body><div class="first">文本</div><script>// 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用var test = document.querySelector('div');test.onclick = function() {// this.style.backgroundColor = 'purple';// this.style.color = 'fff';// this.style.fontSize = '25px';// this.style.marginTop = '100px';// 让我们当前元素的类名改为了 change// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况 如果想继续添加样式即在change添加即可// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器// this.className = 'change';this.className = 'first change';}</script> 5.自定义属性的操作 js给我们规定了可以自己添加属性 在操作元素属性的时候，元素.语法只能操作元素天生具有的属性,如果是自定义的属性，通过.语法是无法操作的只能通过getAttribute和setAttribute去操作，他俩是通用的方法，无论元素天生的还是自定义的都可以可以操作 1.获取属性值 element.属性 获取属性值。 element.getAttribute(‘属性’)； 区别: element.属性 获取内置属性值(元素本身自带的属性 如果是自定义属性不能被获取) element.getAttribute(‘属性’)；主要获得自定义的属性 (标准) 我们自定义的属性 2.设置属性值 element.属性 = ‘值’ 设置内置属性值 element.setAttribute(‘属性’，‘值’) 区别： element.属性 设置内置属性值 element.setAttribute(‘属性’)；主要设置自定义的属性(标准) 3.移除属性 element.removeAttribute(‘属性’)； 代码演示 <body><div id="demo" index="1" class="nav"></div><script>var div = document.querySelector('div');// 1.获取元素的属性值// (1) element.属性console.log(div.id);// (2) element.getAttribute('属性') get获取得到 attribute属性的意思 我们自己添加的属性称之为自定义属性console.log(div.getAttribute('id')); //democonsole.log(div.getAttribute('index')); // 1// 2.设置元素的属性值// (1) element.属性 = '值' div.id = 'test'div.className = 'navs'// (2) element.setAttribute('属性','值')div.setAttribute('index', 2);div.setAttribute('class', 'footer') //这里就是class 不是className 比较特殊// 3.移除属性 removeAttribute(属性)div.removeAttribute('index');</script></body> 只要是自定义属性最好都是用element.setAttribute(‘属性’，‘值’)来设置 如果是自带属性用element.属性来设置 6.H5自定义属性 自定义属性的目的：第一、是为了保存属性 第二、并且使用数据。有一些数据可以保存到页面中而不用保存到数据库中。 自定义属性获取是通过getAttribute(‘属性’) 获取的 但是有些自定义属性很容易引起歧义，不容易判断是元素还是自定义属性 H5给我们新增了自定义属性： 1.设置H5自定义属性 H5规定自定义属性data-开头做为属性名并且赋值 比如<div data-index:“1”> 或者使用JS设置element.setAttribute(‘deta-index’,2) 2.获取H5自定义属性 兼容性获取 element.getAttribute(‘data-index’) 推荐开发中使用这个 H5新增element.dataset.index 或者element.datase[‘index’] ie 11以上才支持 代码演示 <body><div getTime="10" data-index="20" data-name-list="40"></div><script>// 获取元素var div = document.querySelector('div');console.log(div.geTime); //undefined getTime是自定义属性不能直接通过元素的属性来获取 而是用自定义属性来获取的getAttribute(‘属性’)console.log(div.getAttribute('getTime')); //10// H5添加自定义属性的写法以data-开头div.setAttribute('data-time', 30)// 1.兼容性获取H5自定义属性console.log(div.getAttribute('data-time')); // 30// 2.H5新增的获取自定义属性的方法 它只能获取data-开头的// dataset 是一个集合的意思存放了所有以data开头的自定义属性 如果你想取其中的某一个只需要在dataset.的后面加上自定义属性名即可console.log(div.dataset);console.log(div.dataset.time); // 30// 还有一种方法dataset['属性']console.log(div.dataset['time']); // 30// 如果自定义属性里面有多个-链接的单词 我们获取的时候采取驼峰命名法 不用要-了console.log(div.dataset.nameList); // 40console.log(div.dataset['nameList']); // 40</script></body> 五.节点操作 1.为什么要学习节点操作 获取元素通常使用俩种方式 （1）利用DOM提供的方法获取元素 但是逻辑性不强 繁琐 （2）利用节点层级关系获取元素 如 利用父子，兄弟关系获取元素 逻辑性强，但是兼容性不怎么好 2.节点概述 网页中的所有内容都是节点(标签、属性、文本、注释等等) ，在DOM中，节点使用node表示。HTML DOM 树中的所有节点均可通过javascript进行访问，所有HTML元素(节点) 均可被修改，也可以创建或删除 一般地，节点至少拥有nade Type(节点类型)、nodeName(节点名称)和nodeValue(节点值) 这三个基本属性 元素节点 nodeType 为 1 属性节点 node Name为 2 文本节点 nodeValue为 3 (文本节点包含文字、空格、换行等等) 实际开发中，节点操作主要操作的是元素节点 3.节点层级 利用DOM树可以把节点划分为不同得层级关系，常见得是父子兄层级关系 1.父级节点 1.node.parentNode parenNode属性可以返回某节点得父节点，注意是最近的父节点哟！！！ 如果指定的节点没有父节点就返回null 代码演示 <body><div class="box"><div class="box1"></div></div><script>var box1 = document.querySelector('.box1')// 得到的是离元素最近的父节点(亲爸爸) 得不到就返回得是nullconsole.log(box1.parentNode); // parentNode 翻译过来就是父亲的节点</script></body> 2.子级节点操作 1.parentNode.children（非标准） parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(重点记住这个就好，以后重点使用) 虽然children是一个非标准，但是得到了各个浏览器的支持，我们大胆使用即可！！！ 代码演示 <body><ul><li>1</li><li>1</li><li>1</li><li>1</li></ul><script>// DOM 提供的方法（APL）获取 这样获取比较麻烦var ul = document.querySelector('ul')var lis = ul.querySelectorAll('li')// children子节点获取 ul里面所有的小li 放心使用没有限制兼容性 实际开发中经常使用的console.log(ul.children);</script> 如何返回子节点的第一个和最后一个？ 2.parentNode.firstElementChild firstElementChild返回第一个子元素节点，找不到则返回unll 3.parentNode.lastElementChild lastElementChild返回最后一个子元素节点，找不到则返回null 注意：这俩个方法有兼容性问题，IE9以上才支持 谨慎使用 但是我们有解决方案 如果想要第一个子元素节点，可以使用 parentNode.chilren[0] 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1] 代码演示 <body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>var ul = document.querySelector('ul')// 1.firstElementChild 返回第一个子元素节点 ie9 以上才支持注意兼容console.log(ul.firstElementChild);// 2.lastElementChild返回最后一个子元素节点console.log(ul.lastElementChild);// 3.实际开发中用到的既没有兼容性问题又可以返回子节点的第一个和最后一个console.log(ul.children[0]);console.log(ul.children[ul.children.length - 1]); //ul.children.length - 1获取的永远是子节点最后一个</script></body> 3.兄弟节点 1.node.nextSibling nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。注意包含所有的节点 2.node.previousSibling previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。注意包含所以有的节点 代码演示 <body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div')// 返回当前元素的下一个兄弟节点nextSibling，找不到返回null。注意包含元素节点或者文本节点等等console.log(div.nextSibling); //这里返回的是text 因为它的下一个兄弟节点是换行// 返回的是当前元素的上一个节点previousSibling，找不到返回null。注意包含元素节点或者文本节点等等console.log(div.previousSibling); //这里返回的是text 因为它的上一个兄弟节点是换行</script></body> 3.node.nexElementSibling nexElementSibling 返回当前元素下一个兄弟元素节点，找不到返回null 4.node.previousElementSibling previousElementSibling返回当前元素上一个兄弟节点，找不到返回null 注意：这俩个方法有兼容性问题，IE9以上才支持 代码演示 <body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div')// nextElementSiblingd得到下一个兄弟元素节点console.log(div.nextElementSibling); // span // previousElementSibling 得到的是上一个兄弟元素节点console.log(div.previousElementSibling); // null 因为它上面没有兄弟元素了返回空的</script></body> 怎么解决兼容性问题呢？ 可以封装一个兼容性函数（简单了解即可 在实际开发中用的不多） function getNextElementSibling(element) {var el = element;while (el = el.nextSibling) {if (el.nodeType === 1) {return el;} }return null;} 4.创建节点 1.document.createElement('tagName') document.createElement( ) 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在的是根据我们的需求动态生成的，所有我们也称为动态创建元素节点 我们创建了节点要给添加到节点里面去 称为 添加节点 1.node.appendChild（child） node.appendChild（ ）方法将一个节点添加到指定父节点的子节点列表末尾 2.node.insertBefore(child，指定添加元素位置) node.insertBefore( ) 方法将一个节点添加到父节点的指定子节点前面 代码演示 <body><ul><li>1</li></ul><script>// 1.创建节点 createElementvar li = document.createElement('li')// 2.添加节点 创建了节点要添加到某一个元素身上去 叫添加节点 node.appendChild(child) done 父级 child 子级 如果前面有元素了则在后面追加元素类似数组中的push依次追加var ul = document.querySelector('ul')ul.appendChild(li)// 3.添加节点 node.insertBefore(child，指定元素) 在子节点前面添加子节点 child子级你要添加的元素var lili = document.createElement('li')ul.insertBefore(lili, ul.children[0]) //ul.children 这句话的意思是添加到ul父亲的子节点第一个// 总结 如果想在页面中添加元素分为俩步骤1.创建元素 2.添加元素</script></body> 5.删除节点 node.removeChild(child) node.removeChlid（）方法从DOM 中删除一个子节点，返回删除的节点 简单点就是从父元素中删除某一个孩子node就是父亲child就是孩子 删除的节点.remove(没有参数) 注意：ie不支持 代码演示 <body><button>按钮</button><ul><li>熊大</li><li>熊二</li><li>熊三</li></ul><script>// 1.获取元素var ul = document.querySelector('ul')var but = document.querySelector('button');// 2.删除元素// but.onclick = function() {// ul.removeChild(ul.children[0])// }// 3.点击按钮键依次删除，最后没有删除内容了 就禁用按钮 disabled = true 禁用按钮语法but.onclick = function() {if (ul.children.length == 0) {this.disabled = true} else {ul.removeChild(ul.children[0])} }</script></body> 6.复制节点(克隆节点) node.cloneNode() node.dloneNode()方法返回调用该方法节点得一个副本，也称为克隆节点/拷贝节点 注意 1.如果括号参数为空或者为false，则是浅拷贝，只复制里面得标签，不复制内容 2.如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的内容 代码演示 <body><ul><li>1</li><li>2</li><li>3</li></ul><script>// 1.获取元素var ul = document.querySelector('ul');// 2.复制元素 node.cloneNode() 如果参数括号为空或者false则只会复制元素不会复制内容，如果待有参数true则内容和元素都会被复制var lis = ul.children[0].cloneNode(true);// 3.获取元素ul.appendChild(lis)</script></body> 7.替换(改)节点 node.replaceChild(新节点,替换到什么位置) 代码演示 <body><ul class="list"><li>1</li><li>2</li></ul><script>// 替换（改）节点 父节点.replaceChild(新元素, 替换到什么位置)// (1)获取父元素var ulNode = document.querySelector('.list');// (2)创建新的元素var liRead = document.createElement('li')// (3)给新元素添加内容liRead.innerHTML = '5';// (4)替换元素ulNode.replaceChild(liRead, ulNode.children[1])</script></body> 8.三种动态创建元素区别 document.write() element.innerHTML document.createElement() 区别 document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，它则会导致页面全部重绘 element.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘 element.innerHTML 创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结果有点复杂 createElement()创建多个元素效率低一点点，但是结果更加清晰 总结：不同浏览器下,innerHTML效率要比createElement()高 代码演示 <body><button>点击</button><p>abc</p><div class="inner"></div><div class="create"></div><script>// window.onload = function() {// document.write('<div>123</div>');// }// 三种创建元素方式区别 // 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘// var btn = document.querySelector('button');// btn.onclick = function() {// document.write('<div>123</div>');// }// 2. innerHTML 创建元素var inner = document.querySelector('.inner');// for (var i = 0; i <= 100; i++) {// inner.innerHTML += '<a href="">百度</a>'// }var arr = [];for (var i = 0; i <= 100; i++) {arr.push('<a href="">百度</a>');}inner.innerHTML = arr.join('');// 3. document.createElement() 创建元素var create = document.querySelector('.create');for (var i = 0; i <= 100; i++) {var a = document.createElement('a');create.appendChild(a);}</script></body> 本篇文章为转载内容。原文链接：https://blog.csdn.net/m0_46978034/article/details/110190352。 该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。 作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

...意攻击者往 Web 页面里插入恶意可执行网页脚本代码，当用户浏览该页之时，嵌入其中 Web 里面的脚本代码会被执行，从而可以达到攻击者盗取用户信息或其他侵犯用户安全隐私的目的。XSS 的攻击方式千变万化，但还是可以大致细分为几种类型。 非持久型 XSS 非持久型 XSS 漏洞，也叫反射型 XSS 漏洞，一般是通过给别人发送带有恶意脚本代码参数的 URL，当 URL 地址被打开时，特有的恶意代码参数被 HTML 解析、执行。 非持久型 XSS 举一个例子，比如你的 Web 页面中包含有以下代码： Select your language:<select><script>document.write(''+ '<option value=1>'+ location.href.substring(location.href.indexOf('default=') + 8)+ '</option>');document.write('<option value=2>English</option>');</script></select> 攻击者可以直接通过 URL 类似：https://xx.com/xx?default=<script>alert(document.cookie)</script>) 注入可执行的脚本代码。 非持久型 XSS 漏洞攻击有以下几点特征： 即时性，不经过服务器存储，直接通过 HTTP 的 GET 和 POST 请求就能完成一次攻击，拿到用户隐私数据。 攻击者需要诱骗点击 反馈率低，所以较难发现和响应修复 盗取用户敏感保密信息 为了防止出现非持久型 XSS 漏洞，需要确保这么几件事情： Web 页面渲染的所有内容或者渲染的数据都必须来自于服务端。 尽量不要从 URL，document.referrer，document.forms 等这种 DOM API 中获取数据直接渲染。 尽量不要使用 eval, new Function()，document.write()，document.writeln()，window.setInterval()，window.setTimeout()，innerHTML，document.creteElement() 等可执行字符串的方法。 如果做不到以上几点，也必须对涉及 DOM 渲染的方法传入的字符串参数做 escape 转义。 前端渲染的时候对任何的字段都需要做 escape 转义编码。 escape 转义的目的是将一些构成 HTML 标签的元素转义，比如 <，>，空格 等，转义成 <，>， 等显示转义字符。有很多开源的工具可以协助我们做 escape 转义。 持久型 XSS 持久型 XSS 漏洞，也被称为存储型 XSS 漏洞，一般存在于 Form 表单提交等交互功能，如发帖留言，提交文本信息等，黑客利用的 XSS 漏洞，将内容经正常功能提交进入数据库持久保存，当前端页面获得后端从数据库中读出的注入代码时，恰好将其渲染执行。 主要注入页面方式和非持久型 XSS 漏洞类似，只不过持久型的不是来源于 URL，refferer，forms 等，而是来源于后端从数据库中读出来的数据。持久型 XSS 攻击不需要诱骗点击，黑客只需要在提交表单的地方完成注入即可，但是这种 XSS 攻击的成本相对还是很高。攻击成功需要同时满足以下几个条件： POST 请求提交表单后端没做转义直接入库。 后端从数据库中取出数据没做转义直接输出给前端。 前端拿到后端数据没做转义直接渲染成 DOM。 持久型 XSS 有以下几个特点： 持久性，植入在数据库中 危害面广，甚至可以让用户机器变成 DDoS 攻击的肉鸡。 盗取用户敏感私密信息 为了防止持久型 XSS 漏洞，需要前后端共同努力： 后端在入库前应该选择不相信任何前端数据，将所有的字段统一进行转义处理。 后端在输出给前端数据统一进行转义处理。 前端在渲染页面 DOM 的时候应该选择不相信任何后端数据，任何字段都需要做转义处理。 基于字符集的 XSS 其实现在很多的浏览器以及各种开源的库都专门针对了 XSS 进行转义处理，尽量默认抵御绝大多数 XSS 攻击，但是还是有很多方式可以绕过转义规则，让人防不胜防。比如「基于字符集的 XSS 攻击」就是绕过这些转义处理的一种攻击方式，比如有些 Web 页面字符集不固定，用户输入非期望字符集的字符，有时会绕过转义过滤规则。 以基于 utf-7 的 XSS 为例 utf-7 是可以将所有的 unicode 通过 7bit 来表示的一种字符集 (但现在已经从 Unicode 规格中移除)。 这个字符集为了通过 7bit 来表示所有的文字, 除去数字和一部分的符号,其它的部分将都以 base64 编码为基础的方式呈现。 <script>alert("xss")</script>可以被解释为：+ADw-script+AD4-alert(+ACI-xss+ACI-)+ADw-/script+AD4- 可以形成「基于字符集的 XSS 攻击」的原因是由于浏览器在 meta 没有指定 charset 的时候有自动识别编码的机制，所以这类攻击通常就是发生在没有指定或者没来得及指定 meta 标签的 charset 的情况下。 所以我们有什么办法避免这种 XSS 呢？ 记住指定 XML 中不仅要指定字符集为 utf-8，而且标签要闭合 牛文推荐：http://drops.wooyun.org/papers/1327 （这个讲的很详细） 基于 Flash 的跨站 XSS 基于 Flash 的跨站 XSS 也是属于反射型 XSS 的一种，虽然现在开发 ActionScript 的产品线几乎没有了，但还是提一句吧，AS 脚本可以接受用户输入并操作 cookie，攻击者可以配合其他 XSS（持久型或者非持久型）方法将恶意 swf 文件嵌入页面中。主要是因为 AS 有时候需要和 JS 传参交互，攻击者会通过恶意的 XSS 注入篡改参数，窃取并操作cookie。 避免方法： 严格管理 cookie 的读写权限 对 Flash 能接受用户输入的参数进行过滤 escape 转义处理 未经验证的跳转 XSS 有一些场景是后端需要对一个传进来的待跳转的 URL 参数进行一个 302 跳转，可能其中会带有一些用户的敏感（cookie）信息。如果服务器端做302 跳转，跳转的地址来自用户的输入，攻击者可以输入一个恶意的跳转地址来执行脚本。 这时候需要通过以下方式来防止这类漏洞： 对待跳转的 URL 参数做白名单或者某种规则过滤 后端注意对敏感信息的保护, 比如 cookie 使用来源验证。 CSRF CSRF（Cross-Site Request Forgery），中文名称：跨站请求伪造攻击 那么 CSRF 到底能够干嘛呢？你可以这样简单的理解：攻击者可以盗用你的登陆信息，以你的身份模拟发送各种请求。攻击者只要借助少许的社会工程学的诡计，例如通过 QQ 等聊天软件发送的链接(有些还伪装成短域名，用户无法分辨)，攻击者就能迫使 Web 应用的用户去执行攻击者预设的操作。例如，当用户登录网络银行去查看其存款余额，在他没有退出时，就点击了一个 QQ 好友发来的链接，那么该用户银行帐户中的资金就有可能被转移到攻击者指定的帐户中。 所以遇到 CSRF 攻击时，将对终端用户的数据和操作指令构成严重的威胁。当受攻击的终端用户具有管理员帐户的时候，CSRF 攻击将危及整个 Web 应用程序。 CSRF 原理 下图大概描述了 CSRF 攻击的原理，可以理解为有一个小偷在你配钥匙的地方得到了你家的钥匙，然后拿着要是去你家想偷什么偷什么。 csrf原理 完成 CSRF 攻击必须要有三个条件： 用户已经登录了站点 A，并在本地记录了 cookie 在用户没有登出站点 A 的情况下（也就是 cookie 生效的情况下），访问了恶意攻击者提供的引诱危险站点 B (B 站点要求访问站点A)。 站点 A 没有做任何 CSRF 防御 你也许会问：「如果我不满足以上三个条件中的任意一个，就不会受到 CSRF 的攻击」。其实可以这么说的，但你不能保证以下情况不会发生： 你不能保证你登录了一个网站后，不再打开一个 tab 页面并访问另外的网站，特别现在浏览器都是支持多 tab 的。 你不能保证你关闭浏览器了后，你本地的 cookie 立刻过期，你上次的会话已经结束。 上图中所谓的攻击网站 B，可能是一个存在其他漏洞的可信任的经常被人访问的网站。 预防 CSRF CSRF 的防御可以从服务端和客户端两方面着手，防御效果是从服务端着手效果比较好，现在一般的 CSRF 防御也都在服务端进行。服务端的预防 CSRF 攻击的方式方法有多种，但思路上都是差不多的，主要从以下两个方面入手： 正确使用 GET，POST 请求和 cookie 在非 GET 请求中增加 token 一般而言，普通的 Web 应用都是以 GET、POST 请求为主，还有一种请求是 cookie 方式。我们一般都是按照如下规则设计应用的请求： GET 请求常用在查看，列举，展示等不需要改变资源属性的时候（数据库 query 查询的时候） POST 请求常用在 From 表单提交，改变一个资源的属性或者做其他一些事情的时候（数据库有 insert、update、delete 的时候） 当正确的使用了 GET 和 POST 请求之后，剩下的就是在非 GET 方式的请求中增加随机数，这个大概有三种方式来进行： 为每个用户生成一个唯一的 cookie token，所有表单都包含同一个伪随机值，这种方案最简单，因为攻击者不能获得第三方的 cookie(理论上)，所以表单中的数据也就构造失败，但是由于用户的 cookie 很容易由于网站的 XSS 漏洞而被盗取，所以这个方案必须要在没有 XSS 的情况下才安全。 每个 POST 请求使用验证码，这个方案算是比较完美的，但是需要用户多次输入验证码，用户体验比较差，所以不适合在业务中大量运用。 渲染表单的时候，为每一个表单包含一个 csrfToken，提交表单的时候，带上 csrfToken，然后在后端做 csrfToken 验证。 CSRF 的防御可以根据应用场景的不同自行选择。CSRF 的防御工作确实会在正常业务逻辑的基础上带来很多额外的开发量，但是这种工作量是值得的，毕竟用户隐私以及财产安全是产品最基础的根本。 SQL 注入 SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。可以用它来从数据库获取敏感信息，或者利用数据库的特性执行添加用户，导出文件等一系列恶意操作，甚至有可能获取数据库乃至系统用户最高权限。 而造成 SQL 注入的原因是因为程序没有有效的转义过滤用户的输入，使攻击者成功的向服务器提交恶意的 SQL 查询代码，程序在接收后错误的将攻击者的输入作为查询语句的一部分执行，导致原始的查询逻辑被改变，额外的执行了攻击者精心构造的恶意代码。 很多 Web 开发者没有意识到 SQL 查询是可以被篡改的，从而把 SQL 查询当作可信任的命令。殊不知，SQL 查询是可以绕开访问控制，从而绕过身份验证和权限检查的。更有甚者，有可能通过 SQL 查询去运行主机系统级的命令。 SQL 注入原理 下面将通过一些真实的例子来详细讲解 SQL 注入的方式的原理。 考虑以下简单的管理员登录表单： <form action="/login" method="POST"><p>Username: <input type="text" name="username" /></p><p>Password: <input type="password" name="password" /></p><p><input type="submit" value="登陆" /></p></form> 后端的 SQL 语句可能是如下这样的： let querySQL = SELECT FROM userWHERE username='${username}'AND psw='${password}'; // 接下来就是执行 sql 语句… 目的就是来验证用户名和密码是不是正确，按理说乍一看上面的 SQL 语句也没什么毛病，确实是能够达到我们的目的，可是你只是站在用户会老老实实按照你的设计来输入的角度来看问题，如果有一个恶意攻击者输入的用户名是 zoumiaojiang’ OR 1 = 1 --，密码随意输入，就可以直接登入系统了。WFT! 冷静下来思考一下，我们之前预想的真实 SQL 语句是: SELECT FROM user WHERE username='zoumiaojiang' AND psw='mypassword' 可以恶意攻击者的奇怪用户名将你的 SQL 语句变成了如下形式： SELECT FROM user WHERE username='zoumiaojiang' OR 1 = 1 --' AND psw='xxxx' 在 SQL 中，-- 是注释后面的内容的意思，所以查询语句就变成了： SELECT FROM user WHERE username='zoumiaojiang' OR 1 = 1 这条 SQL 语句的查询条件永远为真，所以意思就是恶意攻击者不用我的密码，就可以登录进我的账号，然后可以在里面为所欲为，然而这还只是最简单的注入，牛逼的 SQL 注入高手甚至可以通过 SQL 查询去运行主机系统级的命令，将你主机里的内容一览无余，这里我也没有这个能力讲解的太深入，毕竟不是专业研究这类攻击的，但是通过以上的例子，已经了解了 SQL 注入的原理，我们基本已经能找到防御 SQL 注入的方案了。 如何预防 SQL 注入 防止 SQL 注入主要是不能允许用户输入的内容影响正常的 SQL 语句的逻辑，当用户的输入的信息将要用来拼接 SQL 语句的话，我们应该永远选择不相信，任何内容都必须进行转义过滤，当然做到这个还是不够的，下面列出防御 SQL 注入的几点注意事项： 严格限制Web应用的数据库的操作权限，给此用户提供仅仅能够满足其工作的最低权限，从而最大限度的减少注入攻击对数据库的危害 后端代码检查输入的数据是否符合预期，严格限制变量的类型，例如使用正则表达式进行一些匹配处理。 对进入数据库的特殊字符（’，"，\，<，>，&，，; 等）进行转义处理，或编码转换。基本上所有的后端语言都有对字符串进行转义处理的方法，比如 lodash 的 lodash._escapehtmlchar 库。 所有的查询语句建议使用数据库提供的参数化查询接口，参数化的语句使用参数而不是将用户输入变量嵌入到 SQL 语句中，即不要直接拼接 SQL 语句。例如 Node.js 中的 mysqljs 库的 query 方法中的 ? 占位参数。 mysql.query(SELECT FROM user WHERE username = ? AND psw = ?, [username, psw]); 在应用发布之前建议使用专业的 SQL 注入检测工具进行检测，以及时修补被发现的 SQL 注入漏洞。网上有很多这方面的开源工具，例如 sqlmap、SQLninja 等。 避免网站打印出 SQL 错误信息，比如类型错误、字段不匹配等，把代码里的 SQL 语句暴露出来，以防止攻击者利用这些错误信息进行 SQL 注入。 不要过于细化返回的错误信息，如果目的是方便调试，就去使用后端日志，不要在接口上过多的暴露出错信息，毕竟真正的用户不关心太多的技术细节，只要话术合理就行。 碰到要操作的数据库的代码，一定要慎重，小心使得万年船，多找几个人多来几次 code review，将问题都暴露出来，而且要善于利用工具，操作数据库相关的代码属于机密，没事不要去各种论坛晒自家站点的 SQL 语句，万一被人盯上了呢？ 命令行注入 命令行注入漏洞，指的是攻击者能够通过 HTTP 请求直接侵入主机，执行攻击者预设的 shell 命令，听起来好像匪夷所思，这往往是 Web 开发者最容易忽视但是却是最危险的一个漏洞之一，看一个实例： 假如现在需要实现一个需求：用户提交一些内容到服务器，然后在服务器执行一些系统命令去产出一个结果返回给用户，接口的部分实现如下： // 以 Node.js 为例，假如在接口中需要从 github 下载用户指定的 repoconst exec = require('mz/child_process').exec;let params = {/ 用户输入的参数 /};exec(git clone ${params.repo} /some/path); 这段代码确实能够满足业务需求，正常的用户也确实能从指定的 git repo 上下载到想要的代码，可是和 SQL 注入一样，这段代码在恶意攻击者眼中，简直就是香饽饽。 如果 params.repo 传入的是 https://github.com/zoumiaojiang/zoumiaojiang.github.io.git 当然没问题了。 可是如果 params.repo 传入的是 https://github.com/xx/xx.git && rm -rf / && 恰好你的服务是用 root 权限起的就惨了。 具体恶意攻击者能用命令行注入干什么也像 SQL 注入一样，手法是千变万化的，比如「反弹 shell 注入」等，但原理都是一样的，我们绝对有能力防止命令行注入发生。防止命令行注入需要做到以下几件事情： 后端对前端提交内容需要完全选择不相信，并且对其进行规则限制（比如正则表达式）。 在调用系统命令前对所有传入参数进行命令行参数转义过滤。 不要直接拼接命令语句，借助一些工具做拼接、转义预处理，例如 Node.js 的 shell-escape npm 包。 还是前面的例子，我们可以做到如下： const exec = require('mz/child_process').exec;// 借助 shell-escape npm 包解决参数转义过滤问题const shellescape = require('shell-escape');let params = {/ 用户输入的参数 /};// 先过滤一下参数，让参数符合预期if (!/正确的表达式/.test(params.repo)) {return;}let cmd = shellescape(['git','clone',params.repo,'/some/path']);// cmd 的值: git clone 'https://github.com/xx/xx.git && rm -rf / &&' /some/path// 这样就不会被注入成功了。exec(cmd); DDoS 攻击 DDoS 又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用，这个攻击应该不能算是安全问题，这应该算是一个另类的存在，因为这种攻击根本就是耍流氓的存在，「伤敌一千，自损八百」的行为。出于保护 Web App 不受攻击的攻防角度，还是介绍一下 DDoS 攻击吧，毕竟也是挺常见的。 DDoS 攻击可以理解为：「你开了一家店，隔壁家点看不惯，就雇了一大堆黑社会人员进你店里干坐着，也不消费，其他客人也进不来，导致你营业惨淡」。为啥说 DDoS 是个「伤敌一千，自损八百」的行为呢？毕竟隔壁店还是花了不少钱雇黑社会但是啥也没得到不是？DDoS 攻击的目的基本上就以下几个： 深仇大恨，就是要干死你 敲诈你，不给钱就干你 忽悠你，不买我防火墙服务就会有“人”继续干你 也许你的站点遭受过 DDoS 攻击，具体什么原因怎么解读见仁见智。DDos 攻击从层次上可分为网络层攻击与应用层攻击，从攻击手法上可分为快型流量攻击与慢型流量攻击，但其原理都是造成资源过载，导致服务不可用。 网络层 DDoS 网络层 DDos 攻击包括 SYN Flood、ACK Flood、UDP Flood、ICMP Flood 等。 SYN Flood 攻击 SYN flood 攻击主要利用了 TCP 三次握手过程中的 Bug，我们都知道 TCP 三次握手过程是要建立连接的双方发送 SYN，SYN + ACK，ACK 数据包，而当攻击方随意构造源 IP 去发送 SYN 包时，服务器返回的 SYN + ACK 就不能得到应答（因为 IP 是随意构造的），此时服务器就会尝试重新发送，并且会有至少 30s 的等待时间，导致资源饱和服务不可用，此攻击属于慢型 DDoS 攻击。 ACK Flood 攻击 ACK Flood 攻击是在 TCP 连接建立之后，所有的数据传输 TCP 报文都是带有 ACK 标志位的，主机在接收到一个带有 ACK 标志位的数据包的时候，需要检查该数据包所表示的连接四元组是否存在，如果存在则检查该数据包所表示的状态是否合法，然后再向应用层传递该数据包。如果在检查中发现该数据包不合法，例如该数据包所指向的目的端口在本机并未开放，则主机操作系统协议栈会回应 RST 包告诉对方此端口不存在。 UDP Flood 攻击 UDP flood 攻击是由于 UDP 是一种无连接的协议，因此攻击者可以伪造大量的源 IP 地址去发送 UDP 包，此种攻击属于大流量攻击。正常应用情况下，UDP 包双向流量会基本相等，因此发起这种攻击的攻击者在消耗对方资源的时候也在消耗自己的资源。 ICMP Flood 攻击 ICMP Flood 攻击属于大流量攻击，其原理就是不断发送不正常的 ICMP 包（所谓不正常就是 ICMP 包内容很大），导致目标带宽被占用，但其本身资源也会被消耗。目前很多服务器都是禁 ping 的（在防火墙在可以屏蔽 ICMP 包），因此这种攻击方式已经落伍。 网络层 DDoS 防御 网络层的 DDoS 攻击究其本质其实是无法防御的，我们能做得就是不断优化服务本身部署的网络架构，以及提升网络带宽。当然，还是做好以下几件事也是有助于缓解网络层 DDoS 攻击的冲击： 网络架构上做好优化，采用负载均衡分流。 确保服务器的系统文件是最新的版本，并及时更新系统补丁。 添加抗 DDos 设备，进行流量清洗。 限制同时打开的 SYN 半连接数目，缩短 SYN 半连接的 Timeout 时间。 限制单 IP 请求频率。 防火墙等防护设置禁止 ICMP 包等。 严格限制对外开放的服务器的向外访问。 运行端口映射程序或端口扫描程序，要认真检查特权端口和非特权端口。 关闭不必要的服务。 认真检查网络设备和主机/服务器系统的日志。只要日志出现漏洞或是时间变更,那这台机器就可能遭到了攻击。 限制在防火墙外与网络文件共享。这样会给黑客截取系统文件的机会，主机的信息暴露给黑客，无疑是给了对方入侵的机会。 加钱堆机器。。 报警。。 应用层 DDoS 应用层 DDoS 攻击不是发生在网络层，是发生在 TCP 建立握手成功之后，应用程序处理请求的时候，现在很多常见的 DDoS 攻击都是应用层攻击。应用层攻击千变万化，目的就是在网络应用层耗尽你的带宽，下面列出集中典型的攻击类型。 CC 攻击 当时绿盟为了防御 DDoS 攻击研发了一款叫做 Collapasar 的产品，能够有效的防御 SYN Flood 攻击。黑客为了挑衅，研发了一款 Challenge Collapasar 攻击工具（简称 CC）。 CC 攻击的原理，就是针对消耗资源比较大的页面不断发起不正常的请求，导致资源耗尽。因此在发送 CC 攻击前，我们需要寻找加载比较慢，消耗资源比较多的网页，比如需要查询数据库的页面、读写硬盘文件的等。通过 CC 攻击，使用爬虫对某些加载需要消耗大量资源的页面发起 HTTP 请求。 DNS Flood DNS Flood 攻击采用的方法是向被攻击的服务器发送大量的域名解析请求，通常请求解析的域名是随机生成或者是网络世界上根本不存在的域名，被攻击的DNS 服务器在接收到域名解析请求的时候首先会在服务器上查找是否有对应的缓存，如果查找不到并且该域名无法直接由服务器解析的时候，DNS 服务器会向其上层 DNS 服务器递归查询域名信息。域名解析的过程给服务器带来了很大的负载，每秒钟域名解析请求超过一定的数量就会造成 DNS 服务器解析域名超时。 根据微软的统计数据，一台 DNS 服务器所能承受的动态域名查询的上限是每秒钟 9000 个请求。而我们知道，在一台 P3 的 PC 机上可以轻易地构造出每秒钟几万个域名解析请求，足以使一台硬件配置极高的 DNS 服务器瘫痪，由此可见 DNS 服务器的脆弱性。 HTTP 慢速连接攻击 针对 HTTP 协议，先建立起 HTTP 连接，设置一个较大的 Conetnt-Length，每次只发送很少的字节，让服务器一直以为 HTTP 头部没有传输完成，这样连接一多就很快会出现连接耗尽。 应用层 DDoS 防御 判断 User-Agent 字段（不可靠，因为可以随意构造） 针对 IP + cookie，限制访问频率（由于 cookie 可以更改，IP 可以使用代理，或者肉鸡，也不可靠) 关闭服务器最大连接数等，合理配置中间件，缓解 DDoS 攻击。 请求中添加验证码，比如请求中有数据库操作的时候。 编写代码时，尽量实现优化，并合理使用缓存技术，减少数据库的读取操作。 加钱堆机器。。 报警。。 应用层的防御有时比网络层的更难，因为导致应用层被 DDoS 攻击的因素非常多，有时往往是因为程序员的失误，导致某个页面加载需要消耗大量资源，有时是因为中间件配置不当等等。而应用层 DDoS 防御的核心就是区分人与机器（爬虫），因为大量的请求不可能是人为的，肯定是机器构造的。因此如果能有效的区分人与爬虫行为，则可以很好地防御此攻击。 其他 DDoS 攻击 发起 DDoS 也是需要大量的带宽资源的，但是互联网就像森林，林子大了什么鸟都有，DDoS 攻击者也能找到其他的方式发起廉价并且极具杀伤力的 DDoS 攻击。 利用 XSS 举个例子，如果 12306 页面有一个 XSS 持久型漏洞被恶意攻击者发现，只需在春节抢票期间在这个漏洞中执行脚本使得往某一个小站点随便发点什么请求，然后随着用户访问的增多，感染用户增多，被攻击的站点自然就会迅速瘫痪了。这种 DDoS 简直就是无本万利，不用惊讶，现在大站有 XSS 漏洞的不要太多。 来自 P2P 网络攻击 大家都知道，互联网上的 P2P 用户和流量都是一个极为庞大的数字。如果他们都去一个指定的地方下载数据，成千上万的真实 IP 地址连接过来，没有哪个设备能够支撑住。拿 BT 下载来说，伪造一些热门视频的种子，发布到搜索引擎，就足以骗到许多用户和流量了，但是这只是基础攻击。 高级的 P2P 攻击，是直接欺骗资源管理服务器。如迅雷客户端会把自己发现的资源上传到资源管理服务器，然后推送给其它需要下载相同资源的用户，这样，一个链接就发布出去。通过协议逆向，攻击者伪造出大批量的热门资源信息通过资源管理中心分发出去，瞬间就可以传遍整个 P2P 网络。更为恐怖的是，这种攻击是无法停止的，即使是攻击者自身也无法停止，攻击一直持续到 P2P 官方发现问题更新服务器且下载用户重启下载软件为止。 最后总结下，DDoS 不可能防的住，就好比你的店只能容纳 50 人，黑社会有 100 人，你就换一家大店，能容纳 500 人，然后黑社会又找来了 1000 人，这种堆人头的做法就是 DDoS 本质上的攻防之道，「道高一尺，魔高一丈，魔高一尺，道高一丈」，讲真，必要的时候就答应勒索你的人的条件吧，实在不行就报警吧。 流量劫持 流量劫持应该算是黑产行业的一大经济支柱了吧？简直是让人恶心到吐，不吐槽了，还是继续谈干货吧，流量劫持基本分两种：DNS 劫持 和 HTTP 劫持，目的都是一样的，就是当用户访问 zoumiaojiang.com 的时候，给你展示的并不是或者不完全是 zoumiaojiang.com 提供的 “内容”。 DNS 劫持 DNS 劫持，也叫做域名劫持，可以这么理解，「你打了一辆车想去商场吃饭，结果你打的车是小作坊派来的，直接给你拉到小作坊去了」，DNS 的作用是把网络地址域名对应到真实的计算机能够识别的 IP 地址，以便计算机能够进一步通信，传递网址和内容等。如果当用户通过某一个域名访问一个站点的时候，被篡改的 DNS 服务器返回的是一个恶意的钓鱼站点的 IP，用户就被劫持到了恶意钓鱼站点，然后继而会被钓鱼输入各种账号密码信息，泄漏隐私。 dns劫持 这类劫持，要不就是网络运营商搞的鬼，一般小的网络运营商与黑产勾结会劫持 DNS，要不就是电脑中毒，被恶意篡改了路由器的 DNS 配置，基本上做为开发者或站长却是很难察觉的，除非有用户反馈，现在升级版的 DNS 劫持还可以对特定用户、特定区域等使用了用户画像进行筛选用户劫持的办法，另外这类广告显示更加随机更小，一般站长除非用户投诉否则很难觉察到，就算觉察到了取证举报更难。无论如何，如果接到有 DNS 劫持的反馈，一定要做好以下几件事： 取证很重要，时间、地点、IP、拨号账户、截屏、URL 地址等一定要有。 可以跟劫持区域的电信运营商进行投诉反馈。 如果投诉反馈无效，直接去工信部投诉，一般来说会加白你的域名。 HTTP 劫持 HTTP 劫持您可以这么理解，「你打了一辆车想去商场吃饭，结果司机跟你一路给你递小作坊的广告」，HTTP 劫持主要是当用户访问某个站点的时候会经过运营商网络，而不法运营商和黑产勾结能够截获 HTTP 请求返回内容，并且能够篡改内容，然后再返回给用户，从而实现劫持页面，轻则插入小广告，重则直接篡改成钓鱼网站页面骗用户隐私。能够实施流量劫持的根本原因，是 HTTP 协议没有办法对通信对方的身份进行校验以及对数据完整性进行校验。如果能解决这个问题，则流量劫持将无法轻易发生。所以防止 HTTP 劫持的方法只有将内容加密，让劫持者无法破解篡改，这样就可以防止 HTTP 劫持了。 HTTPS 协议就是一种基于 SSL 协议的安全加密网络应用层协议，可以很好的防止 HTTP 劫持。这里有篇 文章 讲的不错。HTTPS 在这就不深讲了，后面有机会我会单独好好讲讲 HTTPS。如果不想站点被 HTTP 劫持，赶紧将你的站点全站改造成 HTTPS 吧。 服务器漏洞 服务器除了以上提到的那些大名鼎鼎的漏洞和臭名昭著的攻击以外，其实还有很多其他的漏洞，往往也很容易被忽视，在这个小节也稍微介绍几种。 越权操作漏洞 如果你的系统是有登录控制的，那就要格外小心了，因为很有可能你的系统越权操作漏洞，越权操作漏洞可以简单的总结为 「A 用户能看到或者操作 B 用户的隐私内容」，如果你的系统中还有权限控制就更加需要小心了。所以每一个请求都需要做 userid 的判断 以下是一段有漏洞的后端示意代码： // ctx 为请求的 context 上下文let msgId = ctx.params.msgId;mysql.query('SELECT FROM msg_table WHERE msg_id = ?',[msgId]); 以上代码是任何人都可以查询到任何用户的消息，只要有 msg_id 就可以，这就是比较典型的越权漏洞，需要如下这么改进一下： // ctx 为请求的 context 上下文let msgId = ctx.params.msgId;let userId = ctx.session.userId; // 从会话中取出当前登陆的 userIdmysql.query('SELECT FROM msg_table WHERE msg_id = ? AND user_id = ?',[msgId, userId]); 嗯，大概就是这个意思，如果有更严格的权限控制，那在每个请求中凡是涉及到数据库的操作都需要先进行严格的验证，并且在设计数据库表的时候需要考虑进 userId 的账号关联以及权限关联。 目录遍历漏洞 目录遍历漏洞指通过在 URL 或参数中构造 …/，./ 和类似的跨父目录字符串的 ASCII 编码、unicode 编码等，完成目录跳转，读取操作系统各个目录下的敏感文件，也可以称作「任意文件读取漏洞」。 目录遍历漏洞原理：程序没有充分过滤用户输入的 …/ 之类的目录跳转符，导致用户可以通过提交目录跳转来遍历服务器上的任意文件。使用多个… 符号，不断向上跳转，最终停留在根 /，通过绝对路径去读取任意文件。 目录遍历漏洞几个示例和测试，一般构造 URL 然后使用浏览器直接访问，或者使用 Web 漏洞扫描工具检测，当然也可以自写程序测试。 http://somehost.com/../../../../../../../../../etc/passwdhttp://somehost.com/some/path?file=../../Windows/system.ini 借助 %00 空字符截断是一个比较经典的攻击手法http://somehost.com/some/path?file=../../Windows/system.ini%00.js 使用了 IIS 的脚本目录来移动目录并执行指令http://somehost.com/scripts/..%5c../Windows/System32/cmd.exe?/c+dir+c:\ 防御 方法就是需要对 URL 或者参数进行 …/，./ 等字符的转义过滤。 物理路径泄漏 物理路径泄露属于低风险等级缺陷，它的危害一般被描述为「攻击者可以利用此漏洞得到信息，来对系统进一步地攻击」，通常都是系统报错 500 的错误信息直接返回到页面可见导致的漏洞。得到物理路径有些时候它能给攻击者带来一些有用的信息，比如说：可以大致了解系统的文件目录结构；可以看出系统所使用的第三方软件；也说不定会得到一个合法的用户名（因为很多人把自己的用户名作为网站的目录名）。 防止这种泄漏的方法就是做好后端程序的出错处理，定制特殊的 500 报错页面。 源码暴露漏洞 和物理路径泄露类似，就是攻击者可以通过请求直接获取到你站点的后端源代码，然后就可以对系统进一步研究攻击。那么导致源代码暴露的原因是什么呢？基本上就是发生在服务器配置上了，服务器可以设置哪些路径的文件才可以被直接访问的，这里给一个 koa 服务起的例子，正常的 koa 服务器可以通过 koa-static 中间件去指定静态资源的目录，好让静态资源可以通过路径的路由访问。比如你的系统源代码目录是这样的： |- project|- src|- static|- ...|- server.js 你想要将 static 的文件夹配成静态资源目录，你应该会在 server.js 做如下配置： const Koa = require('koa');const serve = require('koa-static');const app = new Koa();app.use(serve(__dirname + '/project/static')); 但是如果配错了静态资源的目录，可能就出大事了，比如： // ...app.use(serve(__dirname + '/project')); 这样所有的源代码都可以通过路由访问到了，所有的服务器都提供了静态资源机制，所以在通过服务器配置静态资源目录和路径的时候，一定要注意检验，不然很可能产生漏洞。 最后，希望 Web 开发者们能够管理好自己的代码隐私，注意代码安全问题，比如不要将产品的含有敏感信息的代码放到第三方外部站点或者暴露给外部用户，尤其是前端代码，私钥类似的保密性的东西不要直接输出在代码里或者页面中。也许还有很多值得注意的点，但是归根结底还是绷住安全那根弦，对待每一行代码都要多多推敲。 请关注我的订阅号 本篇文章为转载内容。原文链接：https://blog.csdn.net/MrCoderStack/article/details/88547919。 该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。 作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。 如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

...适用于企业展示，静态页面设计让网站加载更快速，操作更便捷，是文艺类企业和个人展示作品的理想之选。 点我下载 文件大小：2.00 MB 您将下载一个资源包，该资源包内部文件的目录结构如下： 本网站提供模板下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。 本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。 免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。 若擅自商用导致的一切后果，由使用者承担责任。