神奇大叔
神奇大叔

css 样式隔离

文章目录

  • BEM（Block Element Modifier）
  • CSS Modules
  • Shadow DOM
  • CSS-in-JS
  • Scoped CSS

BEM（Block Element Modifier）

  • Block：表示一个独立的、具有明确功能的实体。例如，.header 或 .nav。
  • Element：表示一个 Block 内的元素。它始终与其父 Block 相关联，并使用双下划线分隔。例如，.button__icon 或 .form__input
  • Modifier：表示 Block 或 Element 的状态、变体或特性。它使用双连字符分隔。例如，.button–primary 或 .form__input–invalid。
/* 基本 Block */
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}

/* Element */
.button__icon {
  /* 添加 icon 的样式 */
}

/* Modifier */
.button--primary {
  background-color: #008CBA;
}

.button--danger {
  background-color: #f44336;
}

CSS Modules

  • 每个组件都有独立的 CSS 文件，并在构建过程中为每个类生成唯一的哈希值，以确保样式隔离
// 通过 css-loader 转换 hash 类名
const path = require('path');
const { getLocalIdent } = require('./css-modules');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              module: true,
              getLocalIdent: (loaderContext, localIdentName, localName, options) => {
                return getLocalIdent(loaderContext, localIdentName, localName, options);
              },
            },
          },
        ],
      },
    ],
  },
};

// 将类名转换成唯一 hash
const fs = require('fs');
const path = require('path');
const crypto = require('crypto');

function generateHashedClassName(filename, className) {
  const content = fs.readFileSync(filename, 'utf-8');
  const hash = crypto
    .createHash('md5')
    .update(content)
    .digest('base64')
    .substr(0, 5);
  
  return `${className}--${hash}`;
}

function getLocalIdent(loaderContext, localIdentName, localName, options) {
  const fileName = path.basename(loaderContext.resourcePath);
  return generateHashedClassName(loaderContext.resourcePath, localName);
}

module.exports = {
  getLocalIdent
};

Shadow DOM

  • 使用 Shadow DOM 技术，组件的 CSS 样式会被限制在组件的局部范围内，从而实现样式隔离。

详情

CSS-in-JS

  • 动态生成样式：在 CSS-in-JS 中，组件的样式可以通过 inline JavaScript 对象或模板字符串直接在组件中赋值。这意味着可以根据组件的属性和状态动态调整样式。
  • 局部作用范围：由于 CSS-in-JS 将样式直接与特定组件关联，每个组件的样式都具有局部作用范围。通过局部变量和组件生命周期钩子，可以在组件卸载时自动取消应用其样式，避免影响其他组件的样式。
  • 唯一的类名：当使用 CSS-in-JS 库（例如 styled-components）时，它们会在运行时为每个组件生成唯一的类名。这使得每个组件的样式完全分离，不会与其他组件发生命名冲突。
  • 优化渲染：CSS-in-JS 库会在组件挂载时自动将样式插入到 DOM 中。这样可以确保只有必要的样式被渲染，以提高性能和避免渲染不必要的全局样式。

核心是将唯一样式和元素关联起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-in-JS</title>
</head>
<body>
    <button id="myButton">Click me!</button>

    <script src="css-in-js.js"></script>
</body>
</html>

const myButton = document.getElementById('myButton');

// 生成唯一哈希值
function generateHash() {
  return Math.random().toString(36).substr(2, 5);
}

// 创建样式标签
function createStyleTag(css) {
  const style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);
}

// 将样式与元素关联
function cssInJs(element, styles) {
  const hashedClassName = 'css_in_js_' + generateHash();
  element.classList.add(hashedClassName);

  const css = `
    .${hashedClassName} {
      background-color: lightblue;
      color: white;
      padding: 0.5rem 1rem;
      border: none;
      font-size: 1.2rem;
      cursor: pointer;
    }
  `;
  createStyleTag(css);
}

// 应用样式
cssInJs(myButton);

Scoped CSS

  • 使用 Scoped CSS 技术来实现 CSS 隔离，每个组件的样式都会被包裹在一个特定的属性选择器中，避免样式冲突和影响。
const myButton = document.getElementById('myButton');
const styleElement = document.getElementById('css');

// 生成唯一哈希值
function generateHash() {
  return Math.random().toString(36).substr(2, 5);
}

// 添加唯一属性
function addScopedAttribute(element, attributeName) {
  element.setAttribute(attributeName, '');
}

// 创建 Scoped CSS 的样式
function createScopedCSS(attributeName, css) {
  // 将应用到组件的原始选择器类名替换成属性选择器
  // .myButton {...} 类样式将变为 .myButton[data-scoped-abcdef] {...}
  const scopedCSS = css.replace(/(\.\w+)/g, `$1[${attributeName}]`);
  styleElement.textContent += scopedCSS;
}

// 实现 Scoped CSS
function scopedCSS(element, styles) {
  const uniqueAttribute = `data-scoped-${generateHash()}`;
  // 将唯一属性设置到元素上，从而能通过属性选择器匹配
  addScopedAttribute(element, uniqueAttribute);
  createScopedCSS(uniqueAttribute, styles);
}

// 定义样式
const buttonStyles = `
  .myButton {
    background-color: lightblue;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
  }
`;

// 应用样式
scopedCSS(myButton, buttonStyles);

你可能感兴趣的:(css,css,前端,javascript)

  • 构建AngularJS动态Web应用的示例教程 你这人真狗
    本文还有配套的精品资源，点击获取简介：AngularJS是一个由Google支持的前端JavaScript框架，用于创建动态Web应用程序。本文将通过一个名为“angular-sample-app”的示例应用程序，详细介绍AngularJS的核心特性，包括双向数据绑定、控制器、指令系统、服务与依赖注入、表单处理、路由与导航、模板和局部存储以及其他高级特性。通过这个示例应用的深入剖析，开发者可以学习
  • 【css酷炫效果】纯CSS实现3D翻转卡片动画 冰夏之夜影 web前端css前端
    【css酷炫效果】纯CSS实现3D翻转卡片动画缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490472缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构正面内容背面内容...css样式/*容器设置透视*/.card-containe
  • CSS语言的数论算法 宇瞳月 包罗万象golang开发语言后端
    CSS语言的数论算法引言数论作为数学的一个重要分支，主要研究整数及其性质。数论的基本问题包括素数的性质、最大公约数、最小公倍数、同余等，同时数论在密码学、计算机科学等领域具有广泛的应用。而CSS（层叠样式表）本身是一种样式表语言，用于控制HTML文档的样式和布局，虽然CSS本身并不能直接进行复杂的数论运算，但它可以和JavaScript等编程语言结合使用，实现数论算法的可视化与交互。本文将探讨数论
  • 【开原宝藏】30天学会CSS - DAY1 第一课 hikktn 开源宝藏css前端
    下面提供一个由浅入深、按步骤拆解的示例教程，让你能从零开始，逐步理解并实现带有旋转及悬停动画的社交图标效果。为了更简单明了，以下示例仅创建四个图标（Facebook、Twitter、Google+、LinkedIn），并在每一步都附带代码展示和讲解。第0步：项目结构说明先准备两个文件：index.htmlHTML的主体结构style.css样式代码，控制图标外观与动画目录结构如下：project/
  • 轻量级模块化前端框架：快速构建强大的Web界面 小杰~ 前端框架前端
    轻量级模块化前端框架：快速构建强大的Web界面在当今快节奏的Web开发环境中，选择一个高效且灵活的前端框架至关重要。UIkit是一个轻量级的模块化前端框架，旨在帮助开发者快速构建功能强大且响应迅速的Web界面。UIkit提供了丰富的组件和工具，使开发者能够轻松实现现代化的设计效果。无论是构建复杂的用户界面还是简单的网页布局，UIkit都能提供出色的支持。其模块化设计使得开发者可以根据项目需求灵活选
  • 解决MybatisPlus updateById更新数据时将没传的数据也更新成了null 善我 后端java
    首先，MybatisPlus在调用自带的更新接口updateById时，如果没加任何配置，默认是不会将前端没传的数据也更新成null的。即MyBatisPlus不会更新传入实体中为null的字段，只会更新设置了不为null的值。如果发现没传的也更新成null了的话，可以看看问题是否出在以下几个方面。可能原因1、后端定义的字段类型是否为包装类型？比如应该定义成Integer，结果你定义的是int，那
  • GTP生成UI代码 酒江 ui人工智能深度学习
    使用GPT生成UI代码，通常是指利用GPT模型生成前端界面的代码，例如HTML、CSS、JavaScript等。GPT可以帮助开发人员快速创建界面元素的代码，减少手动编写的工作量。下面是一些关键步骤，详细说明如何用GPT生成UI代码：1.明确UI需求和设计界面元素：首先明确需要哪些UI元素。例如：按钮、输入框、表单、表格等。布局：确定页面的布局结构，例如：一栏布局、两栏布局、响应式设计等。交互功能
  • let const var 底层区域别，es6还有AO 对象和GO对象吗 新茶十九 #学习javascriptes6前端ecmascript
    在JavaScript中，var、let、const的底层行为差异与作用域规则和变量存储机制密切相关。ES6引入了块级作用域和词法环境（LexicalEnvironment），改变了原有的AO和GO的实现方式，但核心逻辑仍然保留。以下是详细解释：一、var、let、const`的底层区别特性varletconst作用域函数作用域或全局作用域块级作用域块级作用域变量提升提升并初始化为undefine
  • 云贝餐饮独立连锁版v3源码 扫码点餐毕业设计参考好选择 可二开 DeepinThinks 源码分享课程设计php小程序
    云贝V3最新版，采用PHP语言和Laravel9框架，前端使用VUE3和小程序uniapp开发。️云贝V3特点：全开源：提供完整的源代码，无版权纠纷。免授权：无需支付额外授权费用。可二开：支持二次开发，满足个性化需求。技术支持：提供开发者技术支持，确保项目顺利进行。最新版本号：V1.7.9新增会员价显示会员价开关(设置-订单设置-商品设置)新增异地外卖下单开关(门店-业务设置-外送设置)新增套餐固
  • ES6-01-01day CodeDoge javascript开发语言ecmascript
    ECMAScript和javascript的关系是，前者是后者的规格，后者是前者的一种实现。ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。不存在变量提升var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。为了纠正这种现象，
  • 下载 CSS 文件阻塞，会阻塞构建 DOM 树吗？会阻塞页面的显示吗？ liangshanbo1215 前端性能css前端
    下载CSS文件会对页面的渲染过程产生影响，具体是否阻塞DOM树的构建和页面的显示，取决于浏览器的渲染机制。1.CSS文件下载是否会阻塞DOM树的构建？一般情况下，CSS文件下载不会阻塞DOM树的构建：DOM树的构建是由HTML解析器完成的，解析器会逐行解析HTML并构建DOM树。即使CSS文件正在下载，HTML解析器仍然会继续工作，构建DOM树。但如果JavaScript访问了样式，CSS文件下载
  • 《突破性能瓶颈，用 Rust + WASM 实现浏览器端FFT加速300%实战》 煜bart 人工智能机器人
    引言：当JavaScript遇上硬核计算**“为什么我的音频分析页面卡到崩溃？”这是前端工程师在实现实时频谱可视化时最常见的噩梦。传统JavaScript的FFT计算在万级数据点时就会引发严重卡顿，但今天我们将用**Rust+WebAssembly**的组合拳，在浏览器中实现**零依赖、300%加速的傅里叶变换**。无需WebGL黑魔法，直接上硬核代码！---###**一、血腥现场：JS的Type
  • 鸿蒙（HarmonyOS）性能优化—Web开发常见问题 码牛程序猿 HarmonyOS鸿蒙工程师鸿蒙harmonyos华为HarmonyOS鸿蒙应用开发鸿蒙系统鸿蒙鸿蒙开发
    H5页面如何与ArkTS交互(API10)问题现象目前javaScriptProxy仅支持同步调用，异步调用无法获取执行结果。解决措施对javaScriptProxy和runJavaScript封装，实现JSBridge通信方案。适用于H5调用原生侧函数。使用Web组件javaScriptProxy将原生侧接口注入到H5的window对象上，通过runJavaScript接口执行JS脚本到H5中，
  • Flexbox 布局详细笔记 .毅晨. html5cssvue.jshtmles6npm笔记
    Flexbox布局详细笔记Flexbox（弹性盒子布局）是CSS3中用于实现高效、灵活的页面布局的模块，特别适合处理一维布局（行或列）。以下是核心知识点和常见用法：一、Flexbox基础概念容器（FlexContainer）通过display:flex;或display:inline-flex;将一个元素定义为Flex容器。其直接子元素自动成为Flex项目（FlexItems）。主轴（MainAx
  • 【JSON-RPC】 python+JSON-RPC示例与入门 魔都吴所谓 jsonrpcpython
    JSON-RPC是一种无状态的、轻量级的远程过程调用（RPC）协议。它定义了几种数据结构及其处理规则。它使用JSON（JavaScriptObjectNotation）作为数据格式，允许实现相同功能的程序以松散耦合的方式跨网络通信。以下是一个简单的JSON-RPC使用Python的示例。我们将使用jsonrpclib这个库来创建一个JSON-RPC服务端和一个客户端。首先，你需要安装jsonrpc
  • 芯片制造、汽车制造行业网站，如何用插件增强富文本编辑器的WORD粘贴功能？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业网页编辑器对WORD图文混排有哪些特殊需求？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • HTML编辑器CKEDITOR支持哪些格式的WORD内容导入？ 2501_90699640 html编辑器wordckeditor粘贴wordckeditor导入wordckeditor导入pdfckeditor导入ppt
    要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.netcore功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,Ubuntu,CentO
  • 金融行业Vue应用如何利用wangEditor实现WORD文档高效上传？ 2501_90699640 金融vue.jswordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • Cool Admin5(Go版)后台管理系统开发框架搭建使用记录 后青春期的诗go 经验分享golang开发语言后端go
    一、环境说明nodejs建议版本：18二、安装安装框架github下载最新的zip压缩包，然后解压。#进入解压缩后的目录cdcool-admin5#直接修改go.mod里面的模块名（或删除原go.mod文件，重新初始化：Gomodinitcool-admin5）#根据需要调整man.go文件里的导入路径#安装依赖gomodtidy#运行后端项目Gorun.#进入前端目录Cdfrontend#安装依
  • 计算机专业的就业方向 LTPP 人工智能gitjavac++开发语言面试考研
    计算机专业的就业方向亲爱的新生们，欢迎你们踏上计算机科学的旅程！作为一名计算机专业的学生，你们即将进入一个充满无限可能的领域。今天，我将为大家介绍计算机专业的一些主要就业方向，帮助你们了解未来的职业选择。1.软件开发软件开发是计算机专业学生最常见的就业方向之一。软件开发涉及编写、测试、维护应用程序、系统软件等。根据工作性质的不同，软件开发可以进一步细分为以下几个方向：前端开发：前端开发主要负责设计
  • Node.js和webpack入门-个人学习笔记 ksmswq node.jswebpack学习
    Node.js-入门Node.js基础概念Node.js是一个跨平台JavaScript运行环境，是开发者可以搭建服务器端的JavaStript应用程序。作用1.编写服务端程序2.编写数据接口，提供网页浏览资源等等3.实现“前端工程化”，为Vue和React等框架做铺垫前端工程化-概念开发项目直到上线，过程中集成的所有工具和技术。（Node.js是前端工程化的基础（因为Node.js可以主动读取前
  • 基于python+django+vue.js开发的社区养老管理系统源码+运行步骤 冷琴1996 Python系统设计pythondjangovue.js
    业余时间开发的社区养老系统，基于python/vue技术开发。学习过程问题可以留言。功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。功能包括：老人管理、护工管理、亲属管理、病史管理、房间管理、活动管理、用户管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_yanglao演示地址ht
  • 基于 Vue 和 Element Plus 的时间范围控制与数据展示 奶糖 肥晨 vuevue.jselementui前端
    文章目录1.核心功能2.实现效果3.代码实现️3.1HTML部分3.2JavaScript部分3.3CSS部分本文将重点讲解如何在Vue项目中使用ElementPlus的el-date-picker组件实现时间范围选择，并结合“日”、“月”、“年”按钮动态控制时间范围。！1.核心功能时间范围选择：使用el-date-picker实现日期范围选择。快速切换：通过“日”、“月”、“年”按钮快速设置时间
  • Vue.js 事件处理与修饰符详解 vvilkim vuevue.js前端javascript
    Vue.js是一个流行的前端框架，它提供了强大的事件处理机制，使得开发者可以轻松地处理用户交互。Vue的事件处理通过v-on指令实现，同时还提供了丰富的事件修饰符和按键修饰符，帮助我们更高效地处理事件。本文将详细介绍Vue的事件处理机制、修饰符的使用方法，并结合示例代码展示如何在实际开发中应用这些功能。1.v-on指令与事件处理在Vue中，v-on指令用于监听DOM事件，并在事件触发时执行Java
  • 深入理解Vue 3：计算属性与侦听器的艺术 qcidyu 实战案例性能优化模板路由侦听器计算属性Vue3
    title:深入理解Vue3：计算属性与侦听器的艺术date:2024/5/30下午3:53:47updated:2024/5/30下午3:53:47categories:前端开发tags:Vue3计算属性侦听器路由模板性能优化实战案例前言Vue3的新特性简介Vue.js作为当今流行的前端框架之一，以其响应式数据绑定和组件化架构著称。随着技术的不断演进，Vue3带来了许多令人期待的新特性，这些特性
  • 前端（vue)学习笔记（CLASS 4）：组件组成部分与通信 肥肠可耐的西西公主 vue.js前端学习
    1、组件的三大组成部分（结构/样式/逻辑）注意点：1、结构只能有一个根元素2、全局样式（默认），影响所有组件；局部样式，scoped下样式，只作用于当前组件3、el根实例独有，data是一个函数，其他配置项一致样式注意点：默认情况下，写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题1、全局样式：默认组件中的样式会作用到全局2、局部样式：可以给组件加上scoped属性，可以让样式
  • 前端学习路线：从零基础到初级工程师的完整指南（2025最新版） 超浪的晨 前端学习
    前言作为连接设计与技术的核心岗位，前端开发在数字化时代持续释放强大生命力。本路线图专为初学者设计，通过「渐进式学习路径」+「实战项目驱动」的模式，助你系统掌握现代前端开发技能体系。一、基础筑基阶段（4-6周）三大核心基石HTML5语义化标签（）表单验证与多媒体支持SEO基础与无障碍访问CSS3Flex/Grid布局（重点掌握）动画与过渡（@keyframes+transition）响应式设计（媒体
  • Tauri+Dotnet+Vue3+Vite桌面应用程序创建 是楊不是杨 前后端vue.netcorerust前端框架
    环境需求Node.js(已安装)Rust(安装Rust，必要).NETCoreSDK(用于后端)TauriCLI(通过Rust安装)1.创建Vue3+Vite前端项目初始化项目：bash复制代码npmcreatevite@latesttauri-vue3-dotnet--templatevuecdtauri-vue3-dotnet安装必要依赖：bash复制代码npminstall启动开发服务器，确
  • 使用 React 和 Vite 使用 Tauri 构建番茄钟 pxr007 react.jsrust前端
    Tauri是一组工具，可让您使用前端框架构建跨平台桌面应用程序。当与React和Vite结合使用时，它可以用于为所有桌面平台构建极其快速的二进制文件。开发人员可以使用Tauri通过Web技术编写安全、精简和快速的跨平台桌面应用程序。对于许多开发人员来说，Electron通常是这些应用程序的首选框架，但Tauri现在已经做好了竞争的准备。在这篇文章中，我们将构建一个简单的番茄钟计时器，我邀请您按照自
  • SAX解析xml文件 小猪猪08 xml
    1.创建SAXParserFactory实例 2.通过SAXParserFactory对象获取SAXParser实例 3.创建一个类SAXParserHander继续DefaultHandler，并且实例化这个类 4.SAXParser实例的parse来获取文件     public static void main(String[] args) { //
  • 为什么mysql里的ibdata1文件不断的增长？ brotherlamp linuxlinux运维linux资料linux视频linux运维自学
    我们在 Percona 支持栏目经常收到关于 MySQL 的 ibdata1 文件的这个问题。 当监控服务器发送一个关于 MySQL 服务器存储的报警时，恐慌就开始了 —— 就是说磁盘快要满了。 一番调查后你意识到大多数地盘空间被 InnoDB 的共享表空间 ibdata1 使用。而你已经启用了 innodbfileper_table，所以问题是： ibdata1存了什么？ 当你启用了 i
  • Quartz-quartz.properties配置 eksliang quartz
    其实Quartz JAR文件的org.quartz包下就包含了一个quartz.properties属性配置文件并提供了默认设置。如果需要调整默认配置，可以在类路径下建立一个新的quartz.properties，它将自动被Quartz加载并覆盖默认的设置。   下面是这些默认值的解释 #-----集群的配置 org.quartz.scheduler.instanceName =
  • informatica session的使用 18289753290 workflowsessionlogInformatica
    如果希望workflow存储最近20次的log，在session里的Config  Object设置，log  options做配置，save  session log :sessions  run  ;savesessio log for  these runs:20 session下面的source 里面有个tracing 
  • Scrapy抓取网页时出现CRC check failed 0x471e6e9a != 0x7c07b839L的错误 酷的飞上天空 scrapy
    Scrapy版本0.14.4 出现问题现象： ERROR: Error downloading <GET http://xxxxx  CRC check failed   解决方法   1.设置网络请求时的header中的属性'Accept-Encoding': '*;q=0'   明确表示不支持任何形式的压缩格式，避免程序的解压
  • java Swing小集锦 永夜-极光 java swing
    1.关闭窗体弹出确认对话框   1.1   this.setDefaultCloseOperation (JFrame.DO_NOTHING_ON_CLOSE);   1.2   this.addWindowListener ( new WindowAdapter () { public void windo
  • 强制删除.svn文件夹 随便小屋 java
              在windows上，从别处复制的项目中可能带有.svn文件夹，手动删除太麻烦，并且每个文件夹下都有。所以写了个程序进行删除。因为.svn文件夹在windows上是只读的，所以用File中的delete()和deleteOnExist()方法都不能将其删除，所以只能采用windows命令方式进行删除
  • GET和POST有什么区别？及为什么网上的多数答案都是错的。 aijuans get post
        如果有人问你，GET和POST，有什么区别？你会如何回答？ 我的经历      前几天有人问我这个问题。我说GET是用于获取数据的，POST，一般用于将数据发给服务器之用。     这个答案好像并不是他想要的。于是他继续追问有没有别的区别？我说这就是个名字而已，如果服务器支持，他完全可以把G
  • 谈谈新浪微博背后的那些算法 aoyouzi 谈谈新浪微博背后的那些算法
    本文对微博中常见的问题的对应算法进行了简单的介绍，在实际应用中的算法比介绍的要复杂的多。当然，本文覆盖的主题并不全，比如好友推荐、热点跟踪等就没有涉及到。但古人云“窥一斑而见全豹”，希望本文的介绍能帮助大家更好的理解微博这样的社交网络应用。 微博是一个很多人都在用的社交应用。天天刷微博的人每天都会进行着这样几个操作：原创、转发、回复、阅读、关注、@等。其中，前四个是针对短博文，最后的关注和@则针
  • Connection reset 连接被重置的解决方法 百合不是茶 java字符流连接被重置
    流是java的核心部分,,昨天在做android服务器连接服务器的时候出了问题,就将代码放到java中执行,结果还是一样连接被重置   被重置的代码如下;   客户端代码; package 通信软件服务器; import java.io.BufferedWriter; import java.io.OutputStream; import java.io.O
  • web.xml配置详解之filter bijian1013 javaweb.xmlfilter
    一.定义 <filter> <filter-name>encodingfilter</filter-name> <filter-class>com.my.app.EncodingFilter</filter-class> <init-param> <param-name>encoding<
  • Heritrix Bill_chen 多线程xml算法制造配置管理
    作为纯Java语言开发的、功能强大的网络爬虫Heritrix，其功能极其强大，且扩展性良好，深受热爱搜索技术的盆友们的喜爱，但它配置较为复杂，且源码不好理解，最近又使劲看了下，结合自己的学习和理解，跟大家分享Heritrix的点点滴滴。 Heritrix的下载（http://sourceforge.net/projects/archive-crawler/）安装、配置，就不罗嗦了，可以自己找找资
  • 【Zookeeper】FAQ bit1129 zookeeper
    1.脱离IDE，运行简单的Java客户端程序 #ZkClient是简单的Zookeeper~$ java -cp "./:zookeeper-3.4.6.jar:./lib/*" ZKClient    1. Zookeeper是的Watcher回调是同步操作，需要添加异步处理的代码 2. 如果Zookeeper集群跨越多个机房，那么Leader/
  • The user specified as a definer ('aaa'@'localhost') does not exist 白糖_ localhost
    今天遇到一个客户BUG，当前的jdbc连接用户是root，然后部分删除操作都会报下面这个错误：The user specified as a definer ('aaa'@'localhost') does not exist 最后找原因发现删除操作做了触发器，而触发器里面有这样一句 /*!50017 DEFINER = ''aaa@'localhost' */  原来最初
  • javascript中showModelDialog刷新父页面 bozch JavaScript刷新父页面showModalDialog
    在页面中使用showModalDialog打开模式子页面窗口的时候，如果想在子页面中操作父页面中的某个节点，可以通过如下的进行：       window.showModalDialog('url',self,‘status...’); // 首先中间参数使用self       在子页面使用w
  • 编程之美-买书折扣 bylijinnan 编程之美
    import java.util.Arrays; public class BookDiscount { /**编程之美 买书折扣 书上的贪心算法的分析很有意思，我看了半天看不懂，结果作者说，贪心算法在这个问题上是不适用的。。 下面用动态规划实现。 哈利波特这本书一共有五卷，每卷都是8欧元，如果读者一次购买不同的两卷可扣除5%的折扣，三卷10%，四卷20%，五卷
  • 关于struts2.3.4项目跨站执行脚本以及远程执行漏洞修复概要 chenbowen00 strutsWEB安全
    因为近期负责的几个银行系统软件，需要交付客户，因此客户专门请了安全公司对系统进行了安全评测，结果发现了诸如跨站执行脚本，远程执行漏洞以及弱口令等问题。 下面记录下本次解决的过程以便后续 1、首先从最简单的开始处理，服务器的弱口令问题，首先根据安全工具提供的测试描述中发现应用服务器中存在一个匿名用户，默认是不需要密码的，经过分析发现服务器使用了FTP协议， 而使用ftp协议默认会产生一个匿名用
  • [电力与暖气]煤炭燃烧与电力加温 comsci
          在宇宙中,用贝塔射线观测地球某个部分,看上去,好像一个个马蜂窝,又像珊瑚礁一样,原来是某个国家的采煤区.....       不过,这个采煤区的煤炭看来是要用完了.....那么依赖将起燃烧并取暖的城市,在极度严寒的季节中...该怎么办呢?   &nbs
  • oracle O7_DICTIONARY_ACCESSIBILITY参数 daizj oracle
    O7_DICTIONARY_ACCESSIBILITY参数控制对数据字典的访问.设置为true,如果用户被授予了如select any table等any table权限,用户即使不是dba或sysdba用户也可以访问数据字典.在9i及以上版本默认为false,8i及以前版本默认为true.如果设置为true就可能会带来安全上的一些问题.这也就为什么O7_DICTIONARY_ACCESSIBIL
  • 比较全面的MySQL优化参考 dengkane mysql
    本文整理了一些MySQL的通用优化方法，做个简单的总结分享，旨在帮助那些没有专职MySQL DBA的企业做好基本的优化工作，至于具体的SQL优化，大部分通过加适当的索引即可达到效果，更复杂的就需要具体分析了，可以参考本站的一些优化案例或者联系我，下方有我的联系方式。这是上篇。   1、硬件层相关优化   1.1、CPU相关   在服务器的BIOS设置中，可
  • C语言homework2，有一个逆序打印数字的小算法 dcj3sjt126com c
    #h1#   0、完成课堂例子 1、将一个四位数逆序打印 1234 ==> 4321 实现方法一： # include <stdio.h> int main(void) { int i = 1234; int one = i%10; int two = i / 10 % 10; int three = i / 100 % 10;
  • apacheBench对网站进行压力测试 dcj3sjt126com apachebench
       ab 的全称是 ApacheBench ， 是 Apache 附带的一个小工具 ， 专门用于 HTTP Server 的 benchmark testing ， 可以同时模拟多个并发请求。前段时间看到公司的开发人员也在用它作一些测试，看起来也不错，很简单，也很容易使用，所以今天花一点时间看了一下。 通过下面的一个简单的例子和注释，相信大家可以更容易理解这个工具的使用。
  • 2种办法让HashMap线程安全 flyfoxs javajdkjni
    多线程之--2种办法让HashMap线程安全 多线程之--synchronized 和reentrantlock的优缺点 多线程之--2种JAVA乐观锁的比较( NonfairSync VS. FairSync)     HashMap不是线程安全的,往往在写程序时需要通过一些方法来回避.其实JDK原生的提供了2种方法让HashMap支持线程安全.  
  • Spring Security（04）——认证简介 234390216 Spring Security认证过程
    认证简介 目录 1.1     认证过程 1.2     Web应用的认证过程 1.2.1    ExceptionTranslationFilter 1.2.2    在request之间共享SecurityContext   1
  • Java 位运算 Javahuhui java位运算
    // 左移( << ) 低位补0 // 0000 0000 0000 0000 0000 0000 0000 0110 然后左移2位后，低位补0： // 0000 0000 0000 0000 0000 0000 0001 1000 System.out.println(6 << 2);// 运行结果是24 // 右移( >> ) 高位补"
  • mysql免安装版配置 ldzyz007 mysql
    1、my-small.ini是为了小型数据库而设计的。不应该把这个模型用于含有一些常用项目的数据库。 2、my-medium.ini是为中等规模的数据库而设计的。如果你正在企业中使用RHEL,可能会比这个操作系统的最小RAM需求(256MB)明显多得多的物理内存。由此可见，如果有那么多RAM内存可以使用，自然可以在同一台机器上运行其它服务。 3、my-large.ini是为专用于一个SQL数据
  • MFC和ado数据库使用时遇到的问题 你不认识的休道人 sqlC++mfc
    =================================================================== 第一个 =================================================================== try{ CString sql; sql.Format("select * from p
  • 表单重复提交Double Submits rensanning double
    可能发生的场景： *多次点击提交按钮 *刷新页面 *点击浏览器回退按钮 *直接访问收藏夹中的地址 *重复发送HTTP请求（Ajax） （1）点击按钮后disable该按钮一会儿，这样能避免急躁的用户频繁点击按钮。 这种方法确实有些粗暴，友好一点的可以把按钮的文字变一下做个提示，比如Bootstrap的做法： http://getbootstrap.co
  • Java String 十大常见问题 tomcat_oracle java正则表达式
    　1.字符串比较，使用“==”还是equals()? 　　"=="判断两个引用的是不是同一个内存地址(同一个物理对象)。 　　equals()判断两个字符串的值是否相等。 　　除非你想判断两个string引用是否同一个对象，否则应该总是使用equals()方法。 　　如果你了解字符串的驻留(String Interning)则会更好地理解这个问题。 　 　
  • SpringMVC 登陆拦截器实现登陆控制 xp9802 springMVC
    思路，先登陆后，将登陆信息存储在session中，然后通过拦截器，对系统中的页面和资源进行访问拦截，同时对于登陆本身相关的页面和资源不拦截。   实现方法： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他