Naisu Xu
Naisu Xu

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现

文章目录

  • 目的
  • 风格特征
  • 代码实现
  • 辅助工具
  • 总结

目的

玻璃拟物化风格（Glassmorphism）是这两年有人提出来的一种风格，乍一看和以前的毛玻璃效果很像（至少再我看来是差不多啦~）。玻璃拟物化风格在以前毛玻璃的效果上再调整点细节，最终表现出一块块的磨砂玻璃悬浮在背景上，在光线的作用下产生晶莹剔透的效果。

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现_第1张图片

风格特征

玻璃拟物化风格中元素都是一片片的悬浮在背景上的，通过设置与背景不同的远近来表现出空间纵深与立体感。越远离背景的透光性越好，同时阴影越大；相应的越靠近背景的透光性越差，阴影越小。

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现_第2张图片

玻璃拟物化风格，或者说毛玻璃效果而言最重要的一点就是设置模糊。要注意的是需要模糊的是元素的背景，而不是元素本身。

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现_第3张图片

使用玻璃拟物化风格时选用带有层次颜色或图片的背景会更有更好的展示效果。

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现_第4张图片

可以添加较细的边框使元素从背景中脱离出来，表现出玻璃片似的拟物效果。如果配合上光照角度四周的边框展现出不同的明暗表现那将会更有表现力。

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现_第5张图片

代码实现

使用下面代码可以实现玻璃拟物化风格效果：

DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            width: 100vw;
            height: 100vh;
            background: conic-gradient(#A9C9FF 0deg 120deg, #FFBBEC 120deg 210deg, #c2ff9f 210deg 300deg, #A9C9FF 300deg 360deg);
            display: grid;
            place-items: center;
        }

        div {
            width: 300px;
            height: 400px;
            border-radius: 30px;
            display: grid;
            place-items: center;
            backdrop-filter: blur(12px); /* 对元素背景进行模糊 */
            /* -webkit-backdrop-filter: blur(12px); */
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15); /* 设置元素投射出的阴影 */
            border: solid 1px rgba(255, 255, 255, 0.5);  /* 设置元素边框 */
        }

        span {
            font-size: 2rem;
            color: white;
            text-align: center;
        }
    style>
head>

<body>
    <div>
        <span>
            玻璃拟物化风格<br>Glassmorphism<br>设计与实现
        span>
    div>
body>

html>

上面主要用到了 backdrop-filter: blur(12px); 来设置元素背景的模块效果，此外设置适当的阴影和边框增强玻璃拟物化效果。

上面代码中元素背景色未设置，默认就是透明的，实际情况中可以设置半透明的背景来使卡片之上其它的元素更容易被识别和阅读。

如果一个页面中有多个卡片元素，可以分布设置不同的卡片背景透明度和阴影大小体现出空间纵深与立体感。

辅助工具

下面两个网站可以辅助进行玻璃拟物化风格的效果预览和代码生成：
https://glassmorphism.com/
https://ui.glass/generator/

前端例程20210802：玻璃拟物化风格（Glassmorphism）设计与实现_第6张图片

总结

从代码角度来说在前端页面中实现玻璃拟物化风格挺简单的，不过从设计角度来说需要考虑的东西其实挺多的，更多内容可以参考下面文章：
《用户界面中Glassmorphism设计趋势正在流行》
《Glassmorphism - how to create in pure CSS》

你可能感兴趣的:(Web与JS相关,css,html,ui设计,前端,web)

  • Java基于Java的酒店管理系统的设计与实现（开题+源码） 笔文程序设计 java开发语言
    本系统（程序+源码）带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景：随着科技的发展和信息化的加速，酒店管理系统已经成为酒店运营不可或缺的一部分。过去，酒店通常采用传统的手动方式来管理客户信息、客房预订和入住登记等，这种方式不仅效率低下，而且容易出错。为了提高酒店的运营效率和服务质量，我们需要设计并实现一个基于Java的酒店管理系统。意义：通过
  • 【Redis系列】Redis安装与使用 m0_74825409 面试学习路线阿里巴巴redis数据库缓存
    ???欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan的首页,持续学习,不断总结,共同进步,活到老学到老导航檀越剑指大厂系列:全面总结java核心技术点,如集合,jvm,并发编程redis,kafka,Spring,微服务,Netty等常用开发工具系列:罗列常用的开发工具,如IDE
  • SpringBoot中websocket拦截器获取cookie中的token信息 小的~~ springbootwebsocketjava
    @Getter@Slf4j@ComponentpublicclassWebSocketSecurityTokenInterceptorimplementsHandshakeInterceptor{privateTokenAcquireHandlertokenAcquireHandler;privateTokenAnalysisHandlertokenAnalysisHandler;{tokenAc
  • Springboot中添加原生websocket支持 小的~~ springbootwebsocketjava
    1、添加配置@Configuration@EnableWebSocketpublicclassWebSocketConfigimplementsWebSocketConfigurer{@OverridepublicvoidregisterWebSocketHandlers(WebSocketHandlerRegistryregistry){//注册WebSocket处理器，并允许所有来源的连接（在
  • swagger使用指引 MA_Y_ swagger
    1.swagger介绍在前后端分离开发中通常由后端程序员设计接口，完成后需要编写接口文档，最后将文档交给前端工程师，前端工程师参考文档进行开发。可以通过一些工具快速生成接口文档，本项目通过Swagger生成接口在线文档。什么是Swagger？OpenAPI规范（OpenAPISpecification简称OAS）是Linux基金会的一个项目，试图通过定义一种用来描述API格式或API定义的语言，来
  • 前端面试题常考汇总1 RayFars 前端
    JS部分1.解释JavaScript中的闭包，并举例说明其应用场景闭包是指函数能够记住并访问它的词法作用域，即使这个函数在词法作用域之外执行。应用场景：数据隐藏：通过闭包，可以创建私有变量，只通过特定的函数来访问和修改这些变量。回调函数和事件处理：闭包常用于设置回调函数，因为回调函数需要访问其外部函数的变量。functioncreateCounter(){letcount=0;returnfunc
  • Windows逆向工程入门之堆栈结构与信息获取 0xCC说逆向 windows汇编c语言c++逆向安全
    公开视频->链接点击跳转公开课程博客首页->链接点击跳转博客主页目录1.堆栈结构基础堆栈的主要操作：2.代码功能解析2.1加载ntdll.dll2.2获取NtQueryInformationThread函数指针2.3调用NtQueryInformationThread获取线程信息2.4获取线程环境块（TEB）2.5输出堆栈信息3.涉及的知识点拓展3.1线程环境块（TEB）3.2堆栈溢出与保护3.3
  • Windows逆向工程入门之汇编指令格式与操作数类型 0xCC说逆向 汇编windowsarm开发WIN32c语言逆向安全
    公开视频->链接点击跳转公开课程博客首页->链接点击跳转博客主页目录一、汇编指令格式基础二、操作数类型详解1.立即数（Immediate）2.寄存器操作数（Register）3.内存操作数（Memory）4.端口操作数（Port）三、汇编指令格式分类1.零操作数指令2.单操作数指令3.双操作数指令4.三操作数指令四、逆向工程中的指令解析技巧五、拓展知识点一、汇编指令格式基础汇编指令由操作码（Opc
  • RTOS 特性及其思考 TianYaKe-天涯客 arm开发
    前言最近在研究FreeRTOS，觉得RTOS有些特性还是比较有趣的，有一些想法，问了一下AI，简单探讨一下。有纰漏请指出，转载请说明。学习交流请发邮件[email protected]百问网《FreeRTOS入门与工程实践-基于STM32F103》教程-基于DShanMCU-103(STM32F103)|百问网为什么有些项目，裸机编程不再适用，需要RTOS一、任务调度与并发处理裸机编程：在裸机环境
  • Vue学习教程-04数据代理 番茄番茄君 vue.js学习javascript
    文章目录一、什么是数据代理二、数据代理过程三、vue数据代理应用1.数据代理代码2.代理底层逻辑总结一、什么是数据代理数据代理是一种技术，通过代理、拦截对象属性及方法的访问请求，实现与该对象的交互。在Vue中，数据代理是指在Vue实例化一个组件时，Vue会将组件中的data属性中的数据转化为getter/setter，并将这些getter/setter注册到Vue的响应式系统中，在Vue实例中访问
  • 【硬件设计细节】缓冲驱动器使用注意事项 RunningCamel 硬件开发嵌入式硬件
    一、缓冲驱动器核心功能与选型原则信号增强与隔离驱动能力匹配：根据负载电流需求选择缓冲器，例如CMOS缓冲器驱动能力通常为4-8mA，需搭配大电流负载时选用图腾柱输出或专用驱动芯片（如TI的SN74LVC系列）。电压域转换：跨电压域传输时需使用电平转换缓冲器（如TXB0108），避免电平不匹配导致逻辑错误或器件损坏。阻抗匹配与信号完整性高速信号（>100MHz）：选用低传播延迟（如SN74LVC1G
  • 前端知识速记--css篇：CSS3中的常见动画及实现方式 无限大. #前端知识速记前端csscss3
    前端知识速记–css篇：CSS3中的常见动画及实现方式常见的CSS3动画1.过渡(Transitions)过渡是一种非常简单的动画效果，允许你在元素的状态变更时平滑过渡到新状态。语法格式：transition:propertydurationtiming-functiondelay;property：指定要过渡的CSS属性，例如background-color。duration：过渡的持续时间，例
  • 运维脚本——2.备份与恢复 F—— 运维运维学习大数据服务器人工智能
    备份与恢复是IT运维中的核心任务，确保数据安全和业务连续性。必要性数据保护：防止因硬件故障、软件错误、人为操作失误或恶意攻击导致的数据丢失。业务连续性：在发生灾难性事件（如火灾、洪水）时，能够快速恢复业务操作，减少停机时间。合规要求：许多行业和法规要求定期备份数据，并确保备份的可恢复性，以满足合规性要求。版本控制：备份可以用于保存数据的多个版本，便于在需要时恢复到特定时间点的状态。减少损失：通过定
  • html中用npm包 是谁眉眼 htmlnpm前端
    一.用webpack工具打包npm包到dist下js文件为浏览器能识别的文件1.创建一个文件夹html中引用打包后的js文件注意打包后的js文件是局部变量如果要在html中引入js中的变量先去js中把变量改成全局变量2.先初始化一个管理包的文件：输入npm命令“npminit-y3.输入npm命令安装webpack及webpack-cli，“npmiwebpackwebpack-cli-D”，然后
  • 操作系统——复习题(一) 尘埃于光年 操作系统操作系统
    操作系统——复习题(一)-第二章进程和线程练习题一、单项选择题1.在操作系统中引入“进程”概念的主要目的是（B）。A.改善用户编程环境B.描述程序动态执行过程的性质C.使程序与计算过程一一对应D.提高程序的运行速度2.已经获得除（C）以外的所有运行所需要资源的进程处于就绪状态A、存储器B、打印机C、CPUD、磁盘空间3.某进程在运行过程中需要等待从磁盘上读入数据，此时该进程的状态将（C）。当系统完
  • MYSQL——系统架构与查询、更新原理 庄小焱 数据库域mysql
    摘要本博文介绍mysql底层架构和SQL语句执行流程的相关原理，让大家更好的理解数据库的执行，帮助同学在后续的优化设计提供一个思路。一、Mysql系统架构图1.，mysql架构原理图MySQL可以分为Server层和存储引擎层两部分。Server层包括连接器、查询缓存、分析器、优化器、执行器等，涵盖MySQL的大多数核心服务功能ÿ
  • lua和unity如何交互_(XLua)C#与Lua中的交互 三脚猫功夫猴 lua和unity如何交互
    Paste_Image.png下载后接下来就是导入XLua到unity里了，解析出来的XLua有下面几个文件夹Paste_Image.png我们只需要将Assests:主目录里面的东西全部导入到Unity里面就OK了，导入后再XLua的文件夹下有这么几个。里面都有学习的文档，也可自行去学。Paste_Image.pnghotfix的环境配置在unity的PlayerSetting下的OtherSe
  • CSS动画与变形 玲玲酱 #CSS3前端html5css3
    CSS动画-Animations由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任
  • Docker 与持续集成 / 持续部署（CI/CD）的集成（二） 计算机毕设定制辅导-无忧学长 #Dockerdockerci/cd容器
    五、代码示例与解释（一）Dockerfile示例以下是一个简单的基于PythonFlask应用的Dockerfile示例：#使用Python3.10-slim作为基础镜像FROMpython:3.10-slim#设置工作目录WORKDIR/app#复制项目文件到容器内的工作目录COPY./app#安装项目依赖RUNpipinstall-rrequirements.txt#暴露应用运行的端口EXPO
  • b树、b+树与红黑树的区别及应用场景 JordanPanther java数据结构
    b树、b+树与红黑树的区别及应用场景定义：B树可以看作是对2-叉查找树的一种扩展，即他允许每个节点有M-1个子节点。根节点至少有两个子节点每个节点有M-1个key，并且以升序排列位于M-1和Mkey的子节点的值位于M-1和Mkey对应的Value之间其它节点至少有M/2个子节点以下是一颗M=4阶的b树：B+树是对B树的一种变形树，它与B树的差异在于：有k个子结点的结点必然有k个关键码；非叶结点仅具
  • cocos2d-x 3.x lua的api与C++的关系 鱼儿-1226 cocosluacocos2d-lua
    cocos2d-x3.xlua的api与C++的关系1、Lua中如何使用Cocos2d-x引擎中的类？在C++中是这样调用的：//Sprite*sprite=Sprite::create();sprite->setPosition(Vec2(100,100));this->addChild(sprite);//而在Lua中是这样调用的：//localsprite=cc.Sprite:create(
  • CSS3动画属性：转换(transition) 前端独秀 前端css3transition
    W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时
  • MySQL底层原理学习 jiqiren1994 #mysqlmysql数据库database
    一、MySQL体系架构MySQLServer架构自顶向下大致可以分网络连接层、服务层、存储引擎层和系统文件层。1.网络连接层客户端连接器（ClientConnectors）：提供与MySQL服务器建立的支持。目前几乎支持所有主流的服务端编程技术，例如常见的Java、C、Python、.NET等，它们通过各自API技术与MySQL建立连接。2.服务层（MySQLServer）服务层是MySQLSer
  • ORB-SLAM3的源码学习： Settings.cc：Settings::readImageInfo读取图像信息 PaLu-LvL 计算机视觉#ORB-SLAM3计算机视觉opencvubuntuc++人工智能学习
    前言简单总结一下：这个函数的主要目的是从配置文件中读取和设置与相机图像尺寸相关的各种参数。它会根据需要调整图像的宽度和高度，并根据这些调整更新相机的校准参数。如果是立体相机或带IMU的相机，还会同时更新第二个相机的校准参数。最终，这些调整确保图像和相机校准信息的一致性。1.函数声明voidSettings::readImageInfo(cv::FileStorage&fSettings)2.函数定
  • 边缘AI架构提升LLM应用的响应速度 AI天才研究院 计算ChatGPTDeepSeekR1&大数据AI人工智能大模型javapythonjavascriptkotlingolang架构人工智能大厂程序员硅基计算碳基计算认知计算生物计算深度学习神经网络大数据AIGCAGILLM系统架构设计软件哲学Agent程序员实现财富自由
    边缘AI架构提升LLM应用的响应速度关键词边缘计算、边缘AI、LLM、响应速度、模型压缩、分布式计算摘要本文探讨了如何通过边缘AI架构提升大型语言模型（LLM）应用的响应速度。文章首先介绍了边缘计算与边缘AI的基本概念、优势和应用场景，然后深入分析了边缘AI系统的架构设计与实现，以及提升LLM响应速度的关键技术。通过实际案例展示了边缘AI在LLM应用中的效果，并对未来发展趋势和潜在挑战进行了展望，
  • ReentrantLock 公平锁与非公平锁的源码实现分析 java
    一、ReentrantLock的锁类型ReentrantLock内部通过Sync类（继承自AbstractQueuedSynchronizer）实现锁机制，其子类FairSync（公平锁）和NonfairSync（非公平锁）分别对应两种模式：//ReentrantLock构造函数（默认非公平锁）publicReentrantLock(){sync=newNonfairSync();}//指定公平性
  • tar 压缩算法对比与实践指南 tar压缩效率linux建议
    在Linux系统管理和开发过程中，文件压缩打包是一项常见的需求。tar作为最常用的归档工具，支持多种压缩算法，不同算法之间在压缩比、压缩速度和解压速度等方面各有特点。本文将深入分析各种压缩算法的性能特征，并提供实用的选择建议。压缩算法性能对比我们选择了五种常用的压缩方式进行测试，包括：原始tar（无压缩）gzip压缩（tar.gz）xz压缩（tar.xz）zstd压缩（tar.zst）lz4压缩（
  • Web组件适配网页中iframe
    场景描述：当使用web组件加载带有iframe的页面时，由于H5的iframe标签的几个限制条件，可能会出现以下问题：1.由于iframe也要遵守浏览器同源策略，也有对应的白名单限制，所以也会出现跨域或者无法加载的问题，大多出现在本地或沙箱中的H5资源内联iframe时，并且cookie有时候也设置不上2.在应用侧调用runJavascript方法调用不到iframe里面，且主frame和ifra
  • 基于TextInput的常见自定义效果解决方案
    场景描述场景一：英文、数字及特殊字符和中文字符自动间隔一个空格的距离场景二：当输入的内容（纯数字可能为小数）大于999时，禁止输入，注意最后一位光标不要闪烁场景三：限制两位小数，不能以小数点开头的场景场景四：TextInput如何在输入、粘贴、剪切动作之后，内容显示之前控制显示内容场景五：电话号码格式化时，删除号码中间的空格为删除前一位数字场景六：textInput防抖与节流场景一：TextInp
  • windows 添加永久路由 的作用，拓扑 三希 路由
    在Windows中添加永久路由具有以下重要作用：一、作用网络流量控制可以指定特定的网络流量通过特定的路径进行传输。例如，当存在多个网络连接时，可以将特定的IP地址范围或应用程序的流量导向特定的网络接口，以实现负载均衡或优化网络性能。对于企业网络环境中，不同部门或应用可能有不同的网络需求，通过添加永久路由可以更好地管理和控制网络流量，确保关键业务的网络质量。网络隔离与安全可以将某些特定的网络段与其他
  • SQL的各种连接查询 xieke90 UNION ALLUNION外连接内连接JOIN
    一、内连接   概念：内连接就是使用比较运算符根据每个表共有的列的值匹配两个表中的行。                 内连接（join 或者inner join ）       SQL语法：       select * fron
  • java编程思想--复用类 百合不是茶 java继承代理组合final类
          复用类看着标题都不知道是什么,再加上java编程思想翻译的比价难懂,所以知道现在才看这本软件界的奇书   一:组合语法:就是将对象的引用放到新类中即可     代码:     package com.wj.reuse; /** * * @author Administrator 组
  • [开源与生态系统]国产CPU的生态系统 comsci cpu
          计算机要从娃娃抓起...而孩子最喜欢玩游戏....       要让国产CPU在国内市场形成自己的生态系统和产业链,国家和企业就不能够忘记游戏这个非常关键的环节....       投入一些资金和资源,人力和政策,让游
  • JVM内存区域划分Eden Space、Survivor Space、Tenured Gen，Perm Gen解释 商人shang jvm内存
    jvm区域总体分两类，heap区和非heap区。heap区又分：Eden Space（伊甸园）、Survivor Space(幸存者区)、Tenured Gen（老年代-养老区）。 非heap区又分：Code Cache(代码缓存区)、Perm Gen（永久代）、Jvm Stack(java虚拟机栈)、Local Method Statck(本地方法栈)。 HotSpot虚拟机GC算法采用分代收
  • 页面上调用 QQ oloz qq
    <A href="tencent://message/?uin=707321921&amp;Site=有事Q我&amp;Menu=yes">   <img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1></a>
  • 一些问题 文强chu 问题
    1.eclipse 导出 doc  出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 ..... SQL:3.mysql  * 必须得放前面 否则  select&nbs
  • 生活没有安全感 小桔子 生活孤独安全感
           圈子好小，身边朋友没几个，交心的更是少之又少。在深圳，除了男朋友，没几个亲密的人。不知不觉男朋友成了唯一的依靠，毫不夸张的说，业余生活的全部。现在感情好，也很幸福的。但是说不准难免人心会变嘛，不发生什么大家都乐融融，发生什么很难处理。我想说如果不幸被分手(无论原因如何)，生活难免变化很大，在深圳，我没交心的朋友。明
  • php 基础语法 aichenglong php 基本语法
    1 .1 php变量必须以$开头 <?php $a=” b”; echo ?> 1 .2 php基本数据库类型 Integer  float/double Boolean string 1 .3 复合数据类型 数组array和对象 object 1 .4 特殊数据类型  null 资源类型(resource)    $co
  • mybatis tools 配置详解 AILIKES mybatis
    MyBatis Generator中文文档 MyBatis Generator中文文档地址： http://generator.sturgeon.mopaas.com/ 该中文文档由于尽可能和原文内容一致，所以有些地方如果不熟悉，看中文版的文档的也会有一定的障碍，所以本章根据该中文文档以及实际应用，使用通俗的语言来讲解详细的配置。 本文使用Markdown进行编辑，但是博客显示效
  • 继承与多态的探讨 百合不是茶 JAVA面向对象 继承 对象
    继承 extends   多态 继承是面向对象最经常使用的特征之一：继承语法是通过继承发、基类的域和方法 //继承就是从现有的类中生成一个新的类，这个新类拥有现有类的所有extends是使用继承的关键字：     在A类中定义属性和方法； class A{ //定义属性 int age； //定义方法 public void go
  • JS的undefined与null的实例 bijian1013 JavaScriptJavaScript
    <form name="theform" id="theform"> </form> <script language="javascript"> var a alert(typeof(b)); //这里提示undefined if(theform.datas
  • TDD实践（一） bijian1013 java敏捷TDD
    一.TDD概述         TDD：测试驱动开发，它的基本思想就是在开发功能代码之前，先编写测试代码。也就是说在明确要开发某个功能后，首先思考如何对这个功能进行测试，并完成测试代码的编写，然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能，直到完全部功能的开发。     
  • [Maven学习笔记十]Maven Profile与资源文件过滤器 bit1129 maven
    什么是Maven Profile Maven Profile的含义是针对编译打包环境和编译打包目的配置定制，可以在不同的环境上选择相应的配置，例如DB信息，可以根据是为开发环境编译打包，还是为生产环境编译打包，动态的选择正确的DB配置信息   Profile的激活机制 1.Profile可以手工激活，比如在Intellij Idea的Maven Project视图中可以选择一个P
  • 【Hive八】Hive用户自定义生成表函数(UDTF) bit1129 hive
    1. 什么是UDTF   UDTF，是User Defined Table-Generating Functions，一眼看上去，貌似是用户自定义生成表函数，这个生成表不应该理解为生成了一个HQL Table， 貌似更应该理解为生成了类似关系表的二维行数据集   2. 如何实现UDTF 继承org.apache.hadoop.hive.ql.udf.generic
  • tfs restful api 加auth 2.0认计 ronin47
    　　目前思考如何给tfs的ngx-tfs api增加安全性。有如下两点： 　　一是基于客户端的ip设置。这个比较容易实现。 　　二是基于OAuth2.0认证，这个需要lua，实现起来相对于一来说，有些难度。 　　现在重点介绍第二种方法实现思路。 　　 前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGe
  • jdk环境变量配置 byalias javajdk
    进行java开发，首先要安装jdk，安装了jdk后还要进行环境变量配置： 1、下载jdk（http://java.sun.com/javase/downloads/index.jsp），我下载的版本是：jdk-7u79-windows-x64.exe 2、安装jdk-7u79-windows-x64.exe 3、配置环境变量：右击"计算机"-->&quo
  • 《代码大全》表驱动法-Table Driven Approach-2 bylijinnan java
    package com.ljn.base; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.Collections; import java.uti
  • SQL 数值四舍五入 小数点后保留2位 chicony 四舍五入
    1.round() 函数是四舍五入用，第一个参数是我们要被操作的数据，第二个参数是设置我们四舍五入之后小数点后显示几位。 2.numeric 函数的2个参数，第一个表示数据长度，第二个参数表示小数点后位数。 例如： 　　select   cast(round(12.5,2)   as   numeric(5,2))  
  • c++运算符重载 CrazyMizzz C++
    一、加+，减-，乘*，除/ 的运算符重载 Rational operator*(const Rational &x) const{ return Rational(x.a * this->a); } 在这里只写乘法的，加减除的写法类似 二、<<输出,>>输入的运算符重载      &nb
  • hive DDL语法汇总 daizj hive修改列DDL修改表
    hive DDL语法汇总 １、对表重命名 hive> ALTER TABLE table_name RENAME TO new_table_name;   2、修改表备注 hive> ALTER TABLE table_name SET TBLPROPERTIES ('comment' = new_comm
  • jbox使用说明 dcj3sjt126com Web
    参考网址：http://www.kudystudio.com/jbox/jbox-demo.html jBox v2.3 beta [ 点击下载]  技术交流QQGroup：172543951 100521167 [2011-11-11] jBox v2.3 正式版 - [调整&修复] IE6下有iframe或页面有active、applet控件
  • UISegmentedControl 开发笔记 dcj3sjt126com
      //    typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {     //        UISegmentedControlStylePlain,     // large plain   &
  • Slick生成表映射文件 ekian scala
    Scala添加SLICK进行数据库操作，需在sbt文件上添加slick-codegen包 "com.typesafe.slick" %% "slick-codegen" % slickVersion 因为我是连接SQL Server数据库，还需添加slick-extensions，jtds包 "com.typesa
  • ES-TEST gengzg test
    package com.MarkNum; import java.io.IOException; import java.util.Date; import java.util.HashMap; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.annotation
  • 为何外键不再推荐使用 hugh.wang mysqlDB
    表的关联，是一种逻辑关系，并不需要进行物理上的“硬关联”，而且你所期望的关联，其实只是其数据上存在一定的联系而已，而这种联系实际上是在设计之初就定义好的固有逻辑。 在业务代码中实现的时候，只要按照设计之初的这种固有关联逻辑来处理数据即可，并不需要在数据库层面进行“硬关联”，因为在数据库层面通过使用外键的方式进行“硬关联”，会带来很多额外的资源消耗来进行一致性和完整性校验，即使很多时候我们并不
  • 领域驱动设计 julyflame VODAO设计模式DTOpo
    概念： VO（View Object）：视图对象，用于展示层，它的作用是把某个指定页面（或组件）的所有数据封装起来。 DTO（Data Transfer Object）：数据传输对象，这个概念来源于J2EE的设计模式，原来的目的是为了EJB的分布式应用提供粗粒度的数据实体，以减少分布式调用的次数，从而提高分布式调用的性能和降低网络负载，但在这里，我泛指用于展示层与服务层之间的数据传输对
  • 单例设计模式 hm4123660 javaSingleton单例设计模式懒汉式饿汉式
           单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问，从而方便对实例个数的控制并节约系统源。如果希望在系统中某个类的对象只能存在一个，单例模式是最好的解决方案。      &nb
  • logback zhb8015 loglogback
    一、logback的介绍      Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块：logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-class
  • 整合Kafka到Spark Streaming——代码示例和挑战 Stark_Summer sparkstormzookeeperPARALLELISMprocessing
    作者Michael G. Noll是瑞士的一位工程师和研究员，效力于Verisign，是Verisign实验室的大规模数据分析基础设施（基础Hadoop）的技术主管。本文，Michael详细的演示了如何将Kafka整合到Spark Streaming中。 期间， Michael还提到了将Kafka整合到 Spark Streaming中的一些现状，非常值得阅读，虽然有一些信息在Spark 1.2版
  • spring-master-slave-commondao 王新春 DAOspringdataSourceslavemaster
    互联网的web项目，都有个特点：请求的并发量高，其中请求最耗时的db操作，又是系统优化的重中之重。 为此，往往搭建 db的 一主多从库的 数据库架构。作为web的DAO层，要保证针对主库进行写操作，对多个从库进行读操作。当然在一些请求中，为了避免主从复制的延迟导致的数据不一致性，部分的读操作也要到主库上。（这种需求一般通过业务垂直分开，比如下单业务的代码所部署的机器，读去应该也要从主库读取数
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他