椒盐大肥猫
椒盐大肥猫

前端公共图标管理方案（可适用于png、svg混合的图标）

背景

一些旧项目或者一些有png和svg图片作为图标的项目，而且不使用iconfont进行管理图标时，可以自己用jQuery+vue写一个html页面，来管理这些公共图标。

实现思路

  1. cdn引入jQuery：用于动态获取css文件内容，经过正则格式化后，可以得到一个图标数组
  2. cdn引入 vue：将格式化后的数组，动态渲染图标
  3. cdn引入clipboard：用于复制图标名称

具体实现如下，直接帖代码：

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  
  <script src="http://code.jquery.com/jquery-2.1.1.min.js">script>
  
  <script crossorigin="anonymous" integrity="sha512-qRXBGtdrMm3Vdv+YXYud0bixlSfZuGz+FmD+vfXuezWYfw4m5Ov0O4liA6UAlKw2rh9MOYULxbhSFrQCsF1hgg==" src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js">script>
  
  <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"> script>
  <link rel="stylesheet" type="text/css" href="./icons.css" />
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .app-container {
      position: relative;
    }
    .copy-tip {
      position: absolute;
      right: 100px;
      top: 20px;
      color: #1b75a3;
    }
    .input-container {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
    }
    .input-container input {
      height: 30px;
      border-radius: 6px;
      padding: 0 6px;
      border: 1px solid #dbdb;
      outline: none;
    }
    .icon-container {
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      padding: 16px;
      border: 1px solid #dbdbdb;
      border-radius: 8px;
      display: flex;
      flex-wrap: wrap;
    }
    .icon-item {
      margin: 10px;
    }
    .common-icon {
      /*flex: 1;*/
      height: 100px;
      width: 100px;
      background-size: contain;
      background-position:center center;
      background-repeat: no-repeat;
    }
    .icon-name {
      text-align: center;
      cursor: pointer;
    }
  style>
head>
<body>

<div id="app" class="app-container">
  
  <div class="input-container">
    <input v-model="inputVal" @keyup="inputChage()">
  div>
  
  <div class="copy-tip" v-if="isShowTip">
    <p>复制成功！！！p>
  div>
  
  <div class="icon-container">
    <div
      class="icon-item"
      v-for="(item, idx) in iconsList"
      :key="idx"
    >
      <p class="common-icon" :class="item">p>
      <p class="icon-name" @click="copyIcon(item)">{{ item }}p>
    div>
  div>
div>

<script>
  let cssNameSArr = [] // 获取css文件内容格式化后，存在此数组中

  // 格式化css文件内容
  function formatCssData (data) {
    let tempStr = data.replace(/\s/g, '')
    let tempArr = tempStr.split('}')
    tempArr.pop() // 移除最后一个多余的数值
    tempArr.forEach( str => {
      let itemStr = str.split('{')[0].replace('.', '')
      cssNameSArr.push(itemStr)
    })
    return cssNameSArr
  }
  // 获取css文件内容
  $.get('./icons.css', function (data) {
    cssNameSArr = formatCssData(data)
    console.log('格式css文件内容后的结果', cssNameSArr)
  })

  // 防抖
  function debounce (fn, outTime) {
    let timer = null
    return function () {
      if ( timer ) clearTimeout(timer)
      timer = setTimeout( function () {
        fn()
      }, outTime)
    }
  }

  const vm = new Vue ({

    data () {
      return {
        iconsList: [], // 图标数组
        isShowTip: false, // 是否现实复制成功信息
        inputVal: '' // 搜索框的值
      }
    },
    created () {
      // 初始，默认赋值全部图标
      this.iconsList = cssNameSArr
    },
    methods: {
      // 筛选图标方法
      inputChage: debounce(function () {
        console.log('输入的值', vm.inputVal)
        // 没值时，赋值全部的图标
        if ( !vm.inputVal ) {
          vm.iconsList = cssNameSArr
          return
        }
        // 筛选
        vm.iconsList = cssNameSArr.filter( item => {
          let lowerItem = item.toLowerCase()
          let inputVal =  vm.inputVal.toLowerCase()
          return lowerItem.indexOf(inputVal) > -1
        })
        console.log('筛选后的数组', vm.iconsList)
      }, 300),
      copyIcon (item) {
        const that = this
        console.log('输入的内容', item)
        // 复制内容事件
        let clipboard = new ClipboardJS(".icon-name",{
          text : function() {
            return item
          }
        });

        clipboard.on('success',function(e){
          console.log(e)
          that.isShowTip = true
          setTimeout(function () {
            that.isShowTip = false
          }, 1500)
          // 防止多次复制时出现多次提示
          // clipboard.destroy();
        });

        clipboard.on('error',function(e){
          console.log(e);
          // 防止多次复制时出现多次提示
          clipboard.destroy();
        });

      }
    }

  }).$mount('#app')

script>
body>
html>

icons.css文件如下引入图标：
前端公共图标管理方案（可适用于png、svg混合的图标）_第1张图片
最终会得到以下的界面：
前端公共图标管理方案（可适用于png、svg混合的图标）_第2张图片

你可能感兴趣的:(JS,vue,css,jquery,vue.js)

  • 表格首列，首行固定，并且能随意滚动 一麻袋小猫 笔记css3
    css3新增了粘性定位，利用粘性定位即可做到，但要注意的是：如果想要粘性定位相对于父元素定位，需要给其增加relative定位。逻辑是：滚动盒子滚动的是页面，滚动盒子内部放一个大盒子（1），此盒子宽度为内容的总宽度，在盒子内部给想要固定的盒子增加粘性定位，让其top值||left值为0，这里的0是相对于盒子1的。
  • js根据指定字符截取字符串(正则方式） i'm wxm javascript前端开发语言
    1、截取两个字符之间的字符串varstr="aaabbbcccdddeeefff";str=str.match(/aaa(\S*)fff/)[1];alert(str);//结果bbbcccdddeee2、截取指定字符串前varstr="这个是一句话";str=str.match(/(\S*)是/)[1];alert(str);//结果--->这个3、截取指定字符后varstr="这个是一句话";
  • js判断当前时间是否在指定范围内 i'm wxm 前端javascript开发语言
    一、js判断当前时间是否在指定范围内利用js的Date对象，获得三个时间戳，分别为当前时间、开始时间、结束时间，通过比对当前时间是否在开始时间和结束时间之间，来判断是否在一个时间区间内方法一：functionisTimeInRange(startTime:any,endTime:any){//获取当前时间、开始时间、结束时间的时间戳constnow=newDate();constcurrentTi
  • 使用v-html时 防止xss注入攻击 i'm wxm xss前端javascriptvue
    方法一使用vue-dompurify-html插件安装npminstallvue-dompurify-html在mian.js中配置import{createApp}from'vue'importAppfrom'./App.vue'constapp=createApp(App)//防止v-html进行xss注入importVueDOMPurifyHTMLfrom'vue-dompurify-htm
  • vue +element UI form表单校验数组嵌套，数组对象必填校验 i'm wxm vue.jsjavascript前端
    使用element表单时会出现数组对象类型的数据结构并且需要必填校验data(){return{//表单中出现像jsonList这样的数组对象数据editForm:{script:'',paramJsonList:[{paramName:'',paramaValue:''}]},//表单校验editFormRule:{script:[{required:true,message:'请填写',tri
  • 从热搜趋势到交易策略：Level2逐笔成交数据的应用之道 银河金融数据库 level2逐笔成交逐笔委托区块链金融数据库python
    从热搜趋势到交易策略：Level2逐笔成交数据的应用之道为了促进学习和研究，我们在此分享一部分匿名处理的股票level2逐笔委托逐笔成交历史行情数据集。股票level2逐笔委托逐笔成交历史行情数据集链接:https://pan.baidu.com/s/1jSeHGNOs8akYsFfjs9WMSw?pwd=crfj提取码:crfj请注意，分享这些数据的目的是为了教育和研究，不构成任何投资建议。关键
  • 模型GPU-＞NPU(Ascend)迁移训练简述 終不似少年遊* 深度学习人工智能迁移学习GPUNPU华为云
    目录一、迁移训练流程图解二、详细流程步骤1.模型训练与日志记录2.跨平台精度对齐对比3.问题定位与修复4.迭代验证三、关键技术点四、常见问题与解决方案一、迁移训练流程图解通过华为云的modelart进行运行环境选型北京四使用GPU进行模型训练，生成gpulog.json文件，记录损失函数等信息。然后，使用ptdbg_ascend工具进行精度收集，生成dump文件，由于文件过大，上传到obs桶。贵阳
  • 【花雕学编程】Arduino JSON 之跨平台兼容性 驴友花雕 开源硬件json嵌入式硬件单片机c++跨平台兼容性ArduinoJSON
    Arduino是一个开放源码的电子原型平台，它可以让你用简单的硬件和软件来创建各种互动的项目。Arduino的核心是一个微控制器板，它可以通过一系列的引脚来连接各种传感器、执行器、显示器等外部设备。Arduino的编程是基于C/C++语言的，你可以使用ArduinoIDE（集成开发环境）来编写、编译和上传代码到Arduino板上。Arduino还有一个丰富的库和社区，你可以利用它们来扩展Ardui
  • h5 uniapp html2canvas生成海报,保存到本地功能实现； js小白羊 uni-appjavascript前端
    html2canvas生成海报,保存到本地功能实现1.在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数2.组件的使用，伪代码不要直接复制uniapp语法3.h5保存生成后的图片到本地方法;1.在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数在组件中，通过prop接收ID的，ID的变化来触发render.js里面的函数。html2can
  • 2021-04-15 一般橙 笔记
    JQuery项目JS模块化分析(一)Jquery在线手册新增一个组件例按钮组件varYIUI=YIUI||{};(function(){//立即执行匿名函数,模拟模块化YIUI.Yes_Button=function(options){//匿名函数表达式varbtntemplate={el:$(""),caption:"按钮",init:function(){varself=this;var$in
  • html+css网页设计，我的网站 软件技术NINI html/css笔记javascripthtmlcss
    一、技术简介HTML：超文本标记语言（HyperTextMarkupLanguage），用于创建网页的基本结构和内容。CSS：层叠样式表（CascadingStyleSheets），用于设置网页的样式和布局，包括字体、颜色、边距、对齐方式等。JavaScript：一种用于创建动态和交互式网页的脚本语言。通过JavaScript，可以实现网页的动画效果、表单验证、数据交互等功能。二、创建多页网站的基
  • 【花雕学编程】Arduino JSON 之合理设计 API 的架构 驴友花雕 开源硬件json嵌入式硬件单片机c++合理设计API的架构ArduinoJSON
    Arduino是一个开放源码的电子原型平台，它可以让你用简单的硬件和软件来创建各种互动的项目。Arduino的核心是一个微控制器板，它可以通过一系列的引脚来连接各种传感器、执行器、显示器等外部设备。Arduino的编程是基于C/C++语言的，你可以使用ArduinoIDE（集成开发环境）来编写、编译和上传代码到Arduino板上。Arduino还有一个丰富的库和社区，你可以利用它们来扩展Ardui
  • html 字体图标不显示不出来了,h5页面字体图标显示不正常 微基因WeGene html字体图标不显示不出来了
    问题描述开发的是微信公众号的纯静态H5页面，测试发现在iOS上面首次打开会出现字体图标无法显示的问题，并且切换到其它页面，字体图标也是一样无法显示：只能使用微信的右上角内的刷新选项，所有页面的图标就可正常显示，浏览其它页也正常：P.S.所有页面在iOS自带的safari或者chrome浏览器均可正常显示，在android也是正常显示。相关代码HTML:CSS:@charset"UTF-8";@fo
  • html页面跳转先显示底部,H5页面在IOS微信中跳转时，会出现底部工具栏，遮挡页面底部内容... 一一MIO一一 html页面跳转先显示底部
    问题描述：在IOS微信中打开H5页面，当浏览器内出现跳转产生url历史记录时，页面底部会出现一个带有前进和后退按钮的工具栏，会遮挡页面底部的内容。css分析缘由：页面跳转时，微信浏览器经过window.history读取到浏览的历史记录，此时便会在页面底部显示出前进后退按钮的工具栏，形成页面底部内容遮挡。但刷新一下该页面，就不会遮挡了。底部的工具栏是在页面完成渲染以后才渲染的。html解决方案：i
  • SpringSecurity+JWT实现认证及授权详细步骤 小孙的Blog springbootjavaspring后端
    表单认证流程想要实现SpringSecurity的认证授权，首先需要理解大致流程。准备工作导入maven依赖org.springframework.bootspring-boot-starter-securityio.jsonwebtokenjjwt0.9.0创建数据库表表数据如下：创建生成jwtToken的工具类importio.jsonwebtoken.Claims;importio.json
  • HTML、Vue和PHP文件的区别与联系 生信天地 htmlvue.jsphp
    一、核心区别类型性质执行环境功能特点.html静态标记语言浏览器直接解析定义页面结构和内容，无逻辑处理能力.vue前端框架组件文件浏览器/构建工具整合HTML模板+JS逻辑+CSS样式，支持动态数据绑定和组件化开发.php服务器端脚本语言文件Web服务器执行动态生成HTML内容，支持数据库操作和业务逻辑处理二、联系与协作PHP与HTMLPHP文件通过标签嵌入HTML，服务器执行PHP代码后输出纯H
  • 怎么把pyqt界面做的像web一样漂亮 mosquito_lover1 pythonpyqt前端
    要将PyQt界面做得像网页一样漂亮，可以从以下几个方面入手：1.使用样式表（QSS）PyQt支持类似CSS的样式表（QSS），通过QSS可以自定义控件的外观。fromPyQt5.QtWidgetsimportQApplication,QPushButton,QWidget,QVBoxLayoutapp=QApplication([])window=QWidget()layout=QVBoxLayo
  • Ajax基础学习 喜欢代码的新之助 ajax学习okhttp
    AJAX浏览器本身就具备网络通信的能力，但在早期浏览器并没有把这个能力开放给JS最早是微软在IE浏览器中把这一能力向JS开放，让JS可以在代码中实现发送请求，这项技术在2005年被正式命名为AJAX（AsynchronousJavascriptAndXML）这套API主要依靠一个构造函数完成；该构造函数的名称为XMLHttpRequest，简称为XHR由于XHRAPI有着诸多缺陷，在HTML5和E
  • 阿里云视频点播，基于thinkphp8上传视频 quweiie php阿里云音视频云计算
    前端参考官方示例(jQuery版)阿里云JavaScript上传SDKDemo(使用jquery).container{width:1200px;margin:0auto;}.input-control{margin:5px0;}.input-controllabel{font-size:14px;color:#333;width:30%;text-align:right;display:inli
  • ry-ui.js 空想迷城 javascript
    调用方式$.property.function($.属性.功能)/***通用js方法封装处理*Copyright(c)2019ruoyi*///当前table相关信息vartable={config:{},//当前实例配置options:{},//设置实例配置set:function(id){if($.common.getLength(table.config)>1){vartableId=$.c
  • 【Pydantic】Pydantic：新的Python 数据验证库 无糖气泡WU Pythonpython
    Python数据验证：PydanticPydantic简介Pydantic的主要特性Pydantic安装Pydantic使用Pydantic基本操作Field对象数据转换模型类转换为字典模型类转换为JSONPydantic简介Pydantic是一个在Python中用于数据验证和解析的第三方库。它提供了一种简单且直观的方式来定义数据模型，并使用这些模型对数据进行验证和转换。Pydantic的主要特性
  • CSS 调试工具详解 人才程序员 杂谈css前端jsonhtml5javascriptfirefoxjquery
    文章目录CSS调试工具详解️1.浏览器开发者工具(DevTools)定义主要功能：示例：使用DevTools调试CSS亮点：2.使用CSSLint工具定义主要功能：使用方法：优点：3.PostCSS和CSS预处理器️定义主要功能：使用方法：优点：4.CSS预处理器调试工具定义4.1使用SASS的调试功能示例：4.2使用LESS的调试功能优点：5.使用CSSGrid和Flexbox的调试工具定义功能
  • 从零开始：Django + MySQL + Vue 打造在线Demo下载平台 阮懿同
    从零开始：Django+MySQL+Vue打造在线Demo下载平台【下载地址】DjangoMySQLVue从零开始打造在线Demo下载平台Django+MySQL+Vue从零开始打造在线Demo下载平台本仓库提供了一套完整的前后端实战项目源码，带你全面学习和掌握在Django后端框架和Vue前端框架下，如何协作开发并部署一个功能完备的在线Demo下载网站项目地址:https://gitcode.c
  • elementUI tree树形控件 根据数据动态设置禁用，全选时不可选中禁用数据 xuelong-ming elementUI前端elementui前端
    需求根据后端返回的数据禁用数据，将tree结构对应的数据设置为禁用状态，并且在点击全选后不可选中禁用数据。效果根据数据动态设置禁用全选时不可选中禁用数据代码...全部员工.........exportdefault{importAPIfrom'@/api.js'...data(){return{...checkAll:false,//是否全选filterText:'',//关键字过滤deptUse
  • 什么是重绘？什么是回流？如何减少回流？ Ashy- 前端面试题前端笔记css3
    重绘是指当元素样式发生改变，但不影响其布局的情况下，浏览器重新绘制元素的过程。例如修改元素的背景色、字体颜色等回流是指元素布局属性发生改变，需要重新计算元素在页面中的布局位置时，浏览器重新进行布局的过程例如元素的宽度高度位置改变如何减少回流？适用css动画代替JavaScript动画css动画利用GPU加速，在性能方面通常比JavaScript动画更高效。使用css的transform和opaci
  • python 登录接口_python-oauth2：Python的OAuth登录接口 weixin_39812065 python登录接口
    新浪微博Python客户端接口OAuth2!/usr/bin/envpython--coding:utf-8--version=‘1.04’author=‘LiaoXuefeng([email protected])’”’PythonclientSDKforsinaweiboAPIusingOAuth2.”’try:importjsonexceptImportErr使用Python实现OAu
  • 一个简易的 Vue-Ref 响应式系统
    简易的Ref数据响应式+Renderer渲染器本案例实现的响应式效果非常有限，只做简单的demo演示，本案例既不是基于Object.defineProperty，也不是基于Proxy实现的响应式，而是基于存取器，其实都差不多。准备一个__Ref__，它可以将简单数据类型包装为一个响应式对象。class__Ref{#privateValue;#privateRely;//"桶"收集所有对#priva
  • Node.js 环境搭建指南（手动下载并安装Node.js） MAX_WT node.js服务器javascript
    在服务器上部署Node.js环境是开发全栈应用、运行JavaScript服务端代码的基础步骤。本文将详细介绍如何在Linux服务器上搭建Node.js环境，并验证其是否正常运行。本文适合初学者和有一定经验的开发者参考。一、服务器环境准备1.添加GitHubHosts由于某些网络环境下访问GitHub可能较慢或不稳定，我们可以通过修改/etc/hosts文件来加速访问。操作步骤：1.使用vi编辑器打
  • 七个合法学习黑客技术的平台，让你从萌新成为大佬 黑客白帽子黑爷 学习php开发语言web安全网络
    href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css"rel="stylesheet"/>href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_v
  • Node.js的REST简介以及express框架 2764150442 restfulnode.jsmysql
    1.REST简介REST是指表述性状态传递(RepresentationalStateTransfer，简称REST)，是RoyFielding博士在2000年他的博士论文中提出来的一种软件架构风格。表述性状态转移是一组架构约束条件和原则。满足这些约束条件和原则的应用程序或设计就是RESTful。需要注意的是，REST是设计风格而不是标准。REST通常基于使用HTTP、URI和XML(标准通用标记
  • scala的option和some 矮蛋蛋 编程scala
    原文地址： http://blog.sina.com.cn/s/blog_68af3f090100qkt8.html 对于学习 Scala 的 Java™ 开发人员来说，对象是一个比较自然、简单的入口点。在 本系列 前几期文章中，我介绍了 Scala 中一些面向对象的编程方法，这些方法实际上与 Java 编程的区别不是很大。我还向您展示了 Scala 如何重新应用传统的面向对象概念，找到其缺点
  • NullPointerException Cb123456 androidBaseAdapter
        java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.View.getImportantForAccessibility()' on a null object reference     出现以上异常.然后就在baidu上
  • PHP使用文件和目录 天子之骄 php文件和目录读取和写入php验证文件php锁定文件
    PHP使用文件和目录 1.使用include()包含文件 (1)：使用include()从一个被包含文档返回一个值 (2)：在控制结构中使用include()   include_once()函数需要一个包含文件的路径，此外，第一次调用它的情况和include()一样，如果在脚本执行中再次对同一个文件调用，那么这个文件不会再次包含。   在php.ini文件中设置
  • SQL SELECT DISTINCT 语句 何必如此 sql
    SELECT DISTINCT 语句用于返回唯一不同的值。 SQL SELECT DISTINCT 语句 在表中，一个列可能会包含多个重复值，有时您也许希望仅仅列出不同（distinct）的值。 DISTINCT 关键词用于返回唯一不同的值。 SQL SELECT DISTINCT 语法 SELECT DISTINCT column_name,column_name F
  • java冒泡排序 3213213333332132 java冒泡排序
    package com.algorithm; /** * @Description 冒泡 * @author FuJianyong * 2015-1-22上午09:58:39 */ public class MaoPao { public static void main(String[] args) { int[] mao = {17,50,26,18,9,10
  • struts2.18 +json,struts2-json-plugin-2.1.8.1.jar配置及问题！ 7454103 DAOspringAjaxjsonqq
    struts2.18  出来有段时间了！ （貌似是 稳定版）   闲时研究下下！  貌似 sruts2 搭配 json 做 ajax 很吃香！   实践了下下！ 不当之处请绕过！ 呵呵   网上一大堆 struts2+json  不过大多的json 插件 都是 jsonplugin.34.jar   strut
  • struts2 数据标签说明 darkranger jspbeanstrutsservletScheme
    数据标签主要用于提供各种数据访问相关的功能，包括显示一个Action里的属性，以及生成国际化输出等功能 数据标签主要包括： action ：该标签用于在JSP页面中直接调用一个Action，通过指定executeResult参数，还可将该Action的处理结果包含到本页面来。 bean ：该标签用于创建一个javabean实例。如果指定了id属性，则可以将创建的javabean实例放入Sta
  • 链表.简单的链表节点构建 aijuans 编程技巧
    /*编程环境WIN-TC*/ #include "stdio.h" #include "conio.h" #define NODE(name, key_word, help) \  Node name[1]={{NULL, NULL, NULL, key_word, help}} typedef struct node {  &nbs
  • tomcat下jndi的三种配置方式 avords tomcat
    jndi(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。命名服务将名称和对象联系起来，使得我们可以用名称 访问对象。目录服务是一种命名服务，在这种服务里，对象不但有名称，还有属性。          tomcat配置
  • 关于敏捷的一些想法 houxinyou 敏捷
    从网上看到这样一句话：“敏捷开发的最重要目标就是：满足用户多变的需求，说白了就是最大程度的让客户满意。” 感觉表达的不太清楚。 感觉容易被人误解的地方主要在“用户多变的需求”上。 第一种多变，实际上就是没有从根本上了解了用户的需求。用户的需求实际是稳定的，只是比较多，也比较混乱，用户一般只能了解自己的那一小部分，所以没有用户能清楚的表达出整体需求。而由于各种条件的，用户表达自己那一部分时也有
  • 富养还是穷养，决定孩子的一生 bijian1013 教育人生
    是什么决定孩子未来物质能否丰盛？为什么说寒门很难出贵子，三代才能出贵族？真的是父母必须有钱，才能大概率保证孩子未来富有吗？-----作者：@李雪爱与自由 事实并非由物质决定，而是由心灵决定。一朋友富有而且修养气质很好，兄弟姐妹也都如此。她的童年时代，物质上大家都很贫乏，但妈妈总是保持生活中的美感，时不时给孩子们带回一些美好小玩意，从来不对孩子传递生活艰辛、金钱来之不易、要懂得珍惜
  • oracle 日期时间格式转化 征客丶 oracle
    oracle 系统时间有 SYSDATE 与 SYSTIMESTAMP； SYSDATE：不支持毫秒，取的是系统时间； SYSTIMESTAMP：支持毫秒，日期，时间是给时区转换的，秒和毫秒是取的系统的。 日期转字符窜： 一、不取毫秒： TO_CHAR(SYSDATE, 'YYYY-MM-DD HH24:MI:SS') 简要说明， YYYY 年 MM   月
  • 【Scala六】分析Spark源代码总结的Scala语法四 bit1129 scala
    1. apply语法   FileShuffleBlockManager中定义的类ShuffleFileGroup，定义：   private class ShuffleFileGroup(val shuffleId: Int, val fileId: Int, val files: Array[File]) { ... def apply(bucketId
  • Erlang中有意思的bug bookjovi erlang
      代码中常有一些很搞笑的bug，如下面的一行代码被调用两次（Erlang beam） commit f667e4a47b07b07ed035073b94d699ff5fe0ba9b Author: Jovi Zhang <[email protected]> Date: Fri Dec 2 16:19:22 2011 +0100 erts:
  • 移位打印10进制数转16进制-2008-08-18 ljy325 java基础
    /** * Description 移位打印10进制的16进制形式 * Creation Date 15-08-2008 9:00 * @author 卢俊宇 * @version 1.0 * */ public class PrintHex { // 备选字符 static final char di
  • 读《研磨设计模式》-代码笔记-组合模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; abstract class Component { public abstract void printStruct(Str
  • 利用cmd命令将.class文件打包成jar chenyu19891124 cmdjar
    cmd命令打jar是如下实现： 在运行里输入cmd，利用cmd命令进入到本地的工作盘符。(如我的是D盘下的文件有此路径 D:\workspace\prpall\WEB-INF\classes) 现在是想把D:\workspace\prpall\WEB-INF\classes路径下所有的文件打包成prpall.jar。然后继续如下操作： cd D: 回车 cd workspace/prpal
  • [原创]JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明 comsci eclipse设计模式算法工作swing
                           JWFD v0.96 工作流系统二次开发包 for Eclipse 简要说明     &nb
  • SecureCRT右键粘贴的设置 daizj secureCRT右键粘贴
    一般都习惯鼠标右键自动粘贴的功能，对于SecureCRT6.7.5 ，这个功能也已经是默认配置了。 老版本的SecureCRT其实也有这个功能，只是不是默认设置，很多人不知道罢了。 菜单： Options->Global Options ...->Terminal 右边有个Mouse的选项块。 Copy on Select Paste on Right/Middle
  • Linux 软链接和硬链接 dongwei_6688 linux
    1.Linux链接概念Linux链接分两种，一种被称为硬链接（Hard Link），另一种被称为符号链接（Symbolic Link）。默认情况下，ln命令产生硬链接。 【硬连接】硬连接指通过索引节点来进行连接。在Linux的文件系统中，保存在磁盘分区中的文件不管是什么类型都给它分配一个编号，称为索引节点号(Inode Index)。在Linux中，多个文件名指向同一索引节点是存在的。一般这种连
  • DIV底部自适应 dcj3sjt126com JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • Centos6.5使用yum安装mysql——快速上手必备 dcj3sjt126com mysql
    第1步、yum安装mysql [root@stonex ~]#  yum -y install mysql-server 安装结果： Installed:     mysql-server.x86_64 0:5.1.73-3.el6_5                   &nb
  • 如何调试JDK源码 frank1234 jdk
    相信各位小伙伴们跟我一样，想通过JDK源码来学习Java，比如collections包，java.util.concurrent包。 可惜的是sun提供的jdk并不能查看运行中的局部变量，需要重新编译一下rt.jar。 下面是编译jdk的具体步骤：         1.把C:\java\jdk1.6.0_26\sr
  • Maximal Rectangle hcx2013 max
    Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing all ones and return its area.   public class Solution { public int maximalRectangle(char[][] matrix)
  • Spring MVC测试框架详解——服务端测试 jinnianshilongnian spring mvc test
    随着RESTful Web Service的流行，测试对外的Service是否满足期望也变的必要的。从Spring 3.2开始Spring了Spring Web测试框架，如果版本低于3.2，请使用spring-test-mvc项目（合并到spring3.2中了）。   Spring MVC测试框架提供了对服务器端和客户端（基于RestTemplate的客户端）提供了支持。 &nbs
  • Linux64位操作系统（CentOS6.6）上如何编译hadoop2.4.0 liyong0802 hadoop
    一、准备编译软件   1.在官网下载jdk1.7、maven3.2.1、ant1.9.4，解压设置好环境变量就可以用。     环境变量设置如下：   （1）执行vim /etc/profile （2）在文件尾部加入: export JAVA_HOME=/home/spark/jdk1.7 export MAVEN_HOME=/ho
  • StatusBar 字体白色 pangyulei status
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent]; /*you'll also need to set UIViewControllerBasedStatusBarAppearance to NO in the plist file if you use this method
  • 如何分析Java虚拟机死锁 sesame javathreadoracle虚拟机jdbc
    英文资料： Thread Dump and Concurrency Locks   Thread dumps are very useful for diagnosing synchronization related problems such as deadlocks on object monitors. Ctrl-\ on Solaris/Linux or Ctrl-B
  • 位运算简介及实用技巧（一）：基础篇 tw_wangzhengquan 位运算
    http://www.matrix67.com/blog/archives/263    去年年底写的关于位运算的日志是这个Blog里少数大受欢迎的文章之一，很多人都希望我能不断完善那篇文章。后来我看到了不少其它的资料，学习到了更多关于位运算的知识，有了重新整理位运算技巧的想法。从今天起我就开始写这一系列位运算讲解文章，与其说是原来那篇文章的follow-up，不如说是一个r
  • jsearch的索引文件结构 yangshangchuan 搜索引擎jsearch全文检索信息检索word分词
    jsearch是一个高性能的全文检索工具包，基于倒排索引，基于java8，类似于lucene，但更轻量级。   jsearch的索引文件结构定义如下：     1、一个词的索引由=分割的三部分组成：        第一部分是词        第二部分是这个词在多少
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他