精华内容
下载资源
问答
  • 近期,阿里云机器学习PAI团队全新上线一套Dynamic Shape Compiler框架,不仅作为AICompiler技术栈中原有的Static Shape Compiler框架的重要补充,更是增加了Compiler在企业级数据处理应用的无限可能,在提升数据处理...
    简介:欢迎走进走进阿里云机器学习PAI AICompiler编译器系列。近期,阿里云机器学习PAI团队全新上线一套Dynamic Shape Compiler框架,不仅作为AICompiler技术栈中原有的Static Shape Compiler框架的重要补充,更是增加了Compiler在企业级数据处理应用的无限可能,在提升数据处理效率的同时,大幅提升AI工程化效率。

    移动互联网的兴起,不仅产生了海量数据,也对人机交互有了新的定义。企业如何动态处理不同规格图片数据,如何更灵活处理不同长度的对话语料等等,提升企业运营效率,争取更多的商业机会和流量,成为众多企业探索的热门技术应用。

    近期,阿里云机器学习PAI团队全新上线一套Dynamic Shape Compiler框架,不仅作为AICompiler技术栈中原有的Static Shape Compiler框架的重要补充,更是增加了Compiler在企业级数据处理应用的无限可能,在提升数据处理效率的同时,大幅提升AI工程化效率。先来看看案例和效果数据。

    性能结果
    某TensorFlow语音识别业务示例
    以某业务方的语音识别模型为例。过往我们为这个业务提供的优化主要基于Static Shape Compiler,但因为shape变化范围较大,只能采用离线预编译的方式来完成部署,部署过程较为繁琐。

    下图展示了基于Dynamic Shape Compiler在不同batchsize下的实际性能结果,其中纵轴为latency的提升倍数。整体编译次数从之前的几千次降低到1次。从数字上来看,在只有一次编译的较小编译开销下,性能十分接近Static Shape Compiler的性能优化结果。
    image.png

    某TensorFlow广告推荐业务示例
    下面这个例子是某广告推荐业务方的推理模型,在线上系统中,预估时的input shape变化非常频繁,比如:用户画像标签个数可能不同;用户的历史行为序列的长度会不同;召回广告的集合大小会不同;广告所属类目的数量也会不同。这些变量会最终导致请求预估服务的input shape也是时刻变化的。
    过往业务方的同学需要通过batching/手工干预圈图等方式才能将编译次数控制到可接受范围内,造成每次模型迭代后部署过程较为繁琐。从性能结果上看,对比基于XLA优化的性能,Dynamic Shape Compiler基本接近甚至超过Static Shape Compiler的性能优化结果。
    image.png

    某TensorFlow语音合成业务示例
    我们以某业务方的TTS模型为例,具体看一下实际业务中对优化工具对动态shape支持的需求情况。在这个业务模型里,用户的输入sequence length输出sequence length都可能发生变化。此外,由于TTS类算法本身需要在推理过程中引入随机数的特点,即使输入同一条样本,内部子图的shape也会发生变化。我们测试了如果基于static shape compiler来优化这个模型的话,输入数据数量以及累积编译次数的变化曲线。在这个业务模型中每个shape的编译开销约为20s左右,可以看到在经过几百轮迭代之后,编译cache都还没有收敛趋势,根据理论shape变化范围测算总编译时间至少在10个小时以上,因此这类业务如果使用XLA等静态shape编译器的话,无法透明的实现可商用的部署。AICompiler里面的dynamic shape compiler组件很好的解决了这一问题,在一次编译的前提下帮助用户获得平均2X的性能收益,目前业界尚无其它AI编译器能够实现类似的效果。
    image.png

    某PyTorch公式识别业务示例
    下图是一个PyTorch业务的例子,对比的Baseline是基于libTorch执行导出后的TorchScipt脚本,可以看到AICompiler对PyTorch业务提供了同样的编译优化能力。
    image.png

    本文主要介绍这套动态shape编译框架,对更多技术细节兴趣的读者可以参考DISC: A Dynamic Shape Compiler for Machine Learning Workloads.

    从PAI团队三年前启动深度学习编译器方向的工作以来,“Dynamic Shape”问题一直是阻碍实际业务落地的严重问题之一。彼时,包括XLA在内的主流深度学习框架,都是基于Static Shape语义的编译器框架。即,just-in-time运行的编译器,会在运行时捕捉待编译子图的实际输入shape组合,并且为每一个输入shape组合生成一份编译结果。

    Static Shape Compiler的优势显而易见,编译期完全已知静态shape信息的情况下,Compiler可以作出更好的优化决策并得到更好的CodeGen性能,同时也能够得到更好的显存/内存优化plan和调度执行plan;然而,Static Shape Compiler的缺点也十分明显,具体包括:
    • 编译开销的增加。对于训练业务,编译开销导致训练迭代速度不稳定,训练初期显著负优化,甚至整个训练过程的时间开销负优化;对于Inference业务,很多业务实际部署和迭代时不允许出现性能抖动,而离线的预编译预热又会使得部署的过程变复杂。
    • 内存显存占用的增加。除编译开销的问题之外,当shape变化范围特别大的时候,编译缓存额外占用的内存显存,经常导致实际部署环境下的内存/显存OOM,直接阻碍业务的实际落地。
    • 对于一部分业务场景,shape变化范围可能非常大甚至是趋于无穷的,比较常见的包括广告推荐类业务中常见的稀疏化模型,还有例如分布式训练下的embedding切片等等。在这种情况下,编译缓存永远也无法收敛,用户也就不可能通过compiler获取到性能收益了。
    • 上述问题在部分情况下,可以通过人工干预Compiler的圈图过程来缓解,即,将shape变化剧烈的子图排除在编译范围之外。然而,这种解决办法对用户非常不友好,大大降低了Compiler应用的通用性和透明性,这要求做部署和优化的同学同时对模型结构和compiler非常了解,且每一次模型结构迭代时,都需要花费额外的工作量来调整圈图获得可以接受的性能效果。
    image.png

    关于这一问题,曾经出现过若干类解决方案,包括,对Compiler在圈图过程中的自动化干预;在编译期内部自动对变化维度做bucketing补齐并将子图计算结果做自动的slicing。然而这些解决方案都存在各自的局限,例如前者只能适配于小部分子图shape变化剧烈的情况,后者在很多模型上都无法得到自动slicing的完备数学推导。

    为彻底解决这一问题,我们选择基于MLIR(Multi Layer Intermediate Representation),结合团队过往对AICompiler中积累的部分经验,打造一套完备支持Dynamic Shape语义的AI编译器,希望能够彻底解决深度学习编译器在这部分对灵活性要求较高的业务中无法落地应用的问题。

    整体架构
    Dynamic Shape Compiler的整体架构,及其在AICompiler中的上下文关系如下图所示。
    image.png

    Compiler部分
    MLIR Infrastruction
    MLIR是由Google在2019年发起的项目,MLIR 的核心是一套灵活的多层IR基础设施和编译器实用工具库,深受 LLVM 的影响,并重用其许多优秀理念。
    这里我们选择基于MLIR的主要原因包括:
    • 比较丰富的基础设施支持,使得完成编译器的常规开发工作更为便捷,效率更好。TableGen,以及编写常规pattern matching的graph optimization pass的简化等。
    • Open for Extension的模块化设计架构,这里的核心是其Dialect抽象的设计。除Dialect的concept本身,在架构设计上,基于LLVM在传统编译期领域的成功经验,MLIR团队还是展现出了老练的架构设计能力,将整个MLIR架构的设计变得很具模块化。
    • MLIR的胶水能力,使得其可以比较灵活方便地与已经存在的优化手段进行集成,而非拒斥。

    具体实现
    MLIR框架的上述特性,使得我们可以比较方便的有选择性的leverage部分社区已有组件,避免完全的重新造轮子,也一定程度上避免从头彻底重构XLA代码带来的巨大工作量。
    这里我们根据过往对AI编译器的理解,选择了4层比较主要的中间层抽象,包括:
    • DHLO Dialect:能够完备表达动态shape语义的算子层计算图抽象,它的主要作用是能够用有限数量的算子类型来描述不同前端框架的大量算子定义,且表达足够灵活。
    • DLHLO Dialect:引入Buffer语义的计算图抽象,用于在编译器流程中进行内存/显存的管理和优化。
    • Loop Dialect:用于将算子层的计算描述基于Loop等展开为指令集的计算描述,我们在这一层上完成了算子fusion的CodeGen。
    • GPU Dialect:为GPU编程模型中的kernel launching及各种底层原语提供中间层抽象。

    下图展示了我们基于MLIR的Loop Dialect等基础设施,在CodeGen中实现最简单的Input fusion的基本原理。对比XLA中只有高层的HLO和底层的llvm两层中间表示,MLIR提供的Loop Dialect抽象可以直接在中间层完成fusion,很好的简化了开发的复杂度。
    image.png

    篇幅原因,我们在次不在赘述Compiler部分其它各个模块的具体实现细节,请感兴趣的同学请移步MLIR社区中发起的相关细节讨论:RFC,以及会议讨论。

    此处想着重介绍下对比于XLA,Dynamic Shape Compiler需要额外考虑的一些问题,包括:
    • DHLO IR,我们在XLA的HLO IR基础上,扩展了一套具有完备动态shape表达能力的IR。静态场景下,HLO IR中的shape表达会被静态化,所有的shape计算会被固化为编译时常量保留在编译结果中;而在动态shape场景下,IR本身需要有足够的能力表达shape计算和动态shape信息的传递。
    • Placer模块,对于Dynamic Shape Compiler来说,计算可以分为shape计算和data计算两类,对于GPU backend而言,通常shape计算的计算量较小,launch和拷贝开销相比较大因此通常更适合在host侧完成计算。我们实现了一个简单的单卡分图策略,对host侧和device侧计算执行不同的lowering pipeline。
    • Buffer管理及Buffer优化模块,有别于静态Shape编译期能够比较容易通过liveness分析,实现Buffer的复用等优化,而在动态shape语境下,由于Buffer Size未知编译期则不容易做到完全一致的优化。我们目前使用的是动态的Buffer申请和释放,优化申请和释放的时间点,同时后台使用应用层包含Cache的Allocator,来达到性能和灵活性之间的平衡。后续可考虑在IR中充分表达Shape Constraint信息的情况下,来尝试在编译期做精细的Buffer复用优化。

    此外,我们注意到在动态shape语境会为编译期的性能performance带来一些有趣的新挑战:
    • 部分优化决策后置到运行期,以Implicit Broadcast为例,目前主流的前端AI框架都支持implicit broadcast语义,而在动态shape语义下,编译期无法充分知道LHS/RHS是否需要执行Broadcast操作。为保证完备性,如果所有情况下都稳妥的执行Broadcast计算的话,则会带来比较严重的冗余计算/Fusion颗粒度等问题。其它与之类似问题还包括GPU Kernel的Launch Dimension选择等,我们解决这一问题的做法是编译期做多版本编译,运行期根据实际shape来选择最优实现,保证灵活性的同时,缓解灵活性带来的性能损耗。
    • Shape约束信息的使用,我们发现在Dynamic Shape Compiler中,即使Tensor的Shape信息未知,但Shape之间的约束信息,例如两个Tensor之间的某两个维度的size是否相等等信息,仍然会对编译结果的性能产生比较重要的影响。主要原因包括:在图层面,这些信息带来了更大的图优化空间,而在CodeGen层面,这些信息能够更有效的指导低层Lowering做CSE等传统编译器优化,减少冗余的计算指令数。

    多前端框架支持
    随着近年来PyTorch用户数量的持续增加,对PyTorch作业的性能优化需求也正在变得越来越重要。AICompiler框架在设计时也包含了扩展支持不同前端框架的考虑。

    从IR lowering的角度,这里我们选择相比于HLO更具泛化表达能力的DHLO Dialect作为不同前端框架的统一接入IR,而在PyTorch侧选择用户部署时导出的TorchScript IR,通过实现一个轻量的Converter将TorchScript转换为DHLO IR实现了对PyTorch Inference作业的覆盖。MLIR相对完备的IR基础设施也为Converter的实现提供了便利。

    RAL (Runtime Abstraction Layer)
    除编译本身的问题之外,我们还面临其它一些问题,例如如何将编译的结果能够配合TensorFlow/LibTorch等宿主在各自的运行环境上下文中执行起来,如何管理运行时IR层不易表达的状态信息等等。我们希望为不同的运行时环境实现一套统一的Compiler架构,为此我们引入了运行时抽象层,即RAL层。RAL层主要负责解决如下问题:
    Compile Once and Run Anywhere
    RAL实现了多种运行环境的适配支持,用户可以根据需要进行选择。
    • 全图编译,独立运行。当整个计算图都支持编译时,RAL提供了一套简易的runtime以及在此之上RAL Driver的实现,使得compiler编译出来结果可以脱离框架直接运行,减少框架overhad,比如我们在支持某语音ASR模型(类transformer网络)推理优化时,使用全图编译将框架开销从TF的22ms减小到4ms;
    • TF中子图编译运行。RAL目前实现了TF Driver,可以支持在训练/推理场景中对圈出的子图进行编译执行;
    • Pytorch中子图编译运行。RAL目前实现了Libtorch Driver,可以支持在推理场景中对圈出子图进行编译执行;

    以上环境中在诸如资源(e.g. memory)管理,API语义等上存在差异,希望能够引入一层抽象对compiler侧屏蔽这些差异。RAL通过抽象出一套最小集合的API (RAL中称为Driver),并清晰的定义出它们的语义,这样compiler和runtime就可以在一定层度上隔离开来,简化compiler的开发,同时通过提供这套API在不同环境下的实现,来达到在不同的环境中都能够执行编译出来的结果的目的。

    Stateless编译
    dynamic shape compiler完成一个计算图的编译之后,编译的结果可能被多次执行,而有些op的执行是带状态的:
    • 在device(e.g. gpu)上执行时,对const op希望只在第一次执行时加载并常驻device,而不是每次都引入一次host-to-device的拷贝;
    • 对于需要根据具体shape信息进行tuning的op (e.g. gemm/conv),tuning cache需要一个地方存储;

    RAL将资源初始化等带状态的部分抽取出来,封装成context来管理生命周期。在代码生成的过程中,通过简单的注入context,将状态量隐藏在context之后,使得compiler侧看到的是一个纯计算的过程。无状态的设计一方面简化了代码生成的复杂度,另一方面也更容易支持多线程并发执行(比如推理)的场景,同时在错误处理,回滚方面也更加容易支持。

    对用户透明的编译模式切换
    我们对于Dynamic Shape Compiler在AICompiler中的定位是:与原Static Shape Compiler并列的一套框架,在允许适度牺牲性能的情况下,提供对于强Dynamic Shape类业务的通用透明支持。

    然而从用户的角度来说,通常并不容易判断一个Workload的更适合Dynamic Shape Compiler还是Static Shape Compiler,为此我们结合接耦和全量打开[link]中的工作,设计了一套编译模式自动切换的状态机。其基本思路是,在任务初期先选择较为安全的Dynamic Shape Compiler,结合后台编译让用户能够在运行时尽早得到有性能提升的编译执行,并在后续执行过程中结合资源的实际占用情况和实际运行时的shape变化范围来有选择性的切换到Static Shape Compiler的执行。

    两套compiler在运行时的切换关系如下图所示:
    image.png

    阿里云机器学习PAI平台面向企业客户及开发者,提供轻量化、高性价比的云原生机器学习平台,涵盖交互式建模、拖拽式可视化建模、分布式训练到模型在线部署的全流程覆盖,百余种落地场景,全面提升机器学习工程效率。目前,
    PAI AICompiler已经集成在阿里云机器学习PAI的通用推理优化工具PAI-Blade敏捷版中,用户可以可以参考开发文档来快速体验。

    作者:朱凯,赵文益,杨军

    原文链接:https://developer.aliyun.com/article/782718?

    版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
    展开全文
  • HTML框架案例

    千次阅读 2017-11-29 08:39:17
    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架 ...案例源码及效果展示 框架左中右布局案例 效果展示

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架

    使用框架的坏处:

    • 开发人员必须同时跟踪更多的HTML文档
    • 很难打印整张页面
    项目目录

    PAGE_A,B,C就是在网页上显示一句话 这里就不做展示了

    案例源码及效果展示

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>框架左中右布局案例</title>
    	</head>
    	<frameset cols="25%,50%,25%">
    		<!--noresize属性框架是不可调整尺寸的-->
    		<frame src="PAGE_A.html" noresize="noresize"/>
    		<frame src="PAGE_B.html" />
    		<frame src="PAGE_C.html" />
    	</frameset>
    </html>
    

    效果展示

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>框架左中右布局案例</title>
    	</head>
    	<frameset cols="25%,50%,25%">
    		<!--noresize属性框架是不可调整尺寸的-->
    		<frame src="PAGE_A.html" noresize="noresize"/>
    		<frame src="PAGE_B.html" />
    		<frame src="PAGE_C.html" />
    	</frameset>
    </html>
    

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>导航框架</title>
    	</head>
    	<frameset cols="25%,75%">
    		<frame src="forward.html" />
    		<frame src="PAGE_A.html" name="showFrame"/>
    	</frameset>
    </html>
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>导航跳转页面</title>
    	</head>
    	<body>
    		<a href="PAGE_A.html" target="showFrame">第一个页面</a><br />
    		<a href="PAGE_B.html" target="showFrame">第二个页面</a><br />
    		<a href="PAGE_C.html" target="showFrame">第三个页面</a><br />
    	</body>
    </html>
    



    展开全文
  • 目录1.导入坐标(pom)2.配置数据库以及mybatis(application.properties)3.编写mybatis查询(UserMapper.xml)4....案例的项目结构 1.导入坐标(pom) 使用lombok插件,需要去下载中心下载 <?...

    案例的项目结构
    在这里插入图片描述

    1.导入坐标(pom)

    使用lombok插件,需要去下载中心下载

    <?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.0.1.RELEASE</version>
            <relativePath/> <!-- lookup parent from repository -->
        </parent>
        <groupId>edu.xiao</groupId>
        <artifactId>springboot_mybatis</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <name>springboot_mybatis</name>
        <description>Demo project for Spring Boot</description>
    
        <properties>
            <java.version>1.8</java.version>
        </properties>
    
        <dependencies>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <version>1.18.2</version>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <!--mybatis的spring起步依赖-->
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>1.1.1</version>
            </dependency>
            <!--添加数据库坐标-->
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
                <exclusions>
                    <exclusion>
                        <groupId>org.junit.vintage</groupId>
                        <artifactId>junit-vintage-engine</artifactId>
                    </exclusion>
                </exclusions>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
            </plugins>
        </build>
    
    </project>
    
    

    2.配置数据库以及mybatis(application.properties)

    #配置数据库
    spring.datasource.driver-class-name=com.mysql.jdbc.Driver
    spring.datasource.url=jdbc:mysql:///ssm?useUnicode=true&characterEncoding=UTF-8
    spring.datasource.username=root
    spring.datasource.password=y426759813.
    
    #配2,置mybatis的信息
    #spring集成Mybatis环境
    #pojo别名扫描包
    mybatis.type-aliases-package=edu.xiao.springboot_mybatis.pojo
    #加载Mybatis映射文件
    mybatis.mapper-locations=classpath:mapper/*Mapper.xml
    

    3.编写mybatis查询(UserMapper.xml)

    注意: namespace的值是你接口的位置;使用了别名可以直接使用user

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper
            PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="edu.xiao.springboot_mybatis.mapper.IUserMapper">
        <select id="findAllUser" resultType="user">
            select * from user
        </select>
    </mapper>
    

    4.编写逻辑代码

    a.mapper

    其中@mapper注解r= @Repository + @MapperScan(basePackages = “{}”)

    package edu.xiao.springboot_mybatis.mapper;
    
    import edu.xiao.springboot_mybatis.pojo.User;
    import org.apache.ibatis.annotations.Mapper;
    
    import java.util.List;
    
    @Mapper
    public interface IUserMapper {
        List<User> findAllUser();
    
    }
    
    

    b.servise类

    实现类

    package edu.xiao.springboot_mybatis.service.impl;
    
    import edu.xiao.springboot_mybatis.mapper.IUserMapper;
    import edu.xiao.springboot_mybatis.pojo.User;
    import edu.xiao.springboot_mybatis.service.IUserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service
    public class UserService implements IUserService {
        @Autowired
        private IUserMapper mapper;
        @Override
        public List<User> findAllUser() {
            return mapper.findAllUser();
        }
    }
    
    

    IUserService 接口类

    package edu.xiao.springboot_mybatis.service;
    
    import edu.xiao.springboot_mybatis.pojo.User;
    
    import java.util.List;
    
    public interface IUserService {
        List<User> findAllUser();
    }
    
    

    c.pojo类

    使用了lombok插件

    package edu.xiao.springboot_mybatis.pojo;
    
    import lombok.Data;
    
    @Data
    public class User {
        private Integer id;
        private String username;
        private String password;
        private String name;
    
        @Override
        public String toString() {
            return "User{" +
                    "id=" + id +
                    ", username='" + username + '\'' +
                    ", password='" + password + '\'' +
                    ", name='" + name + '\'' +
                    '}';
        }
    }
    
    

    5.controller类(UserController)

    package edu.xiao.springboot_mybatis.controller;
    
    import edu.xiao.springboot_mybatis.mapper.IUserMapper;
    import edu.xiao.springboot_mybatis.pojo.User;
    import edu.xiao.springboot_mybatis.service.IUserService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.List;
    
    @Controller
    @RequestMapping("/user")
    public class UserController {
        @Autowired
        private IUserService service;
    
        @RequestMapping("/findAllUser")
        @ResponseBody
        public List<User> findAllUser(){
            List<User> allUser = service.findAllUser();
            System.out.println(allUser);
            return allUser;
        }
    }
    
    

    6.效果

    数据库内容
    在这里插入图片描述

    查询的内容
    在这里插入图片描述

    展开全文
  • JS动画框架案例

    千次阅读 2016-01-23 19:14:10
    JS动画效果: 综合——运动框架 move.js 1、简单动画 1-1、速度动画 D01_share.html 1-2、透明度动画 D02_opacity.html 2、缓冲动画 2-1、缓冲动画 D03_speed.html 3、多物体动画 3-1、多物体动画 D04_morespart...

    JS动画效果:
    综合——运动框架 move.js
    1、简单动画
        1-1、速度动画  D01_share.html
        1-2、透明度动画  D02_opacity.html
    2、缓冲动画
        2-1、缓冲动画  D03_speed.html
    3、多物体动画
        3-1、多物体动画  D04_morespart01.html D04_morespart02.html
        3-2、获取样式  D05_getStyle01.html D05_getStyle02.html
        3-3、任意属性值(一)  D06_anyValue.html
        3-4、任意属性值(二)
    4、链式动画
        4-1、链式动画  D07_chainAnimation.html
    5、同时运动
        5-1、同时运动 D08_json.htmljson的介绍) D08_sametimeMove.html
        5-2、完美运动框架 move.js
    6、动画案例

    速度动画 D01_share.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>速度动画</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            #div1 {
                width: 200px;
                height: 250px;
                background-color: #807a62;
                position: relative;
                left: -200px;
                top: 0;
            }
            #div1 span {
                width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
                height: 50px;
                background-color: aquamarine;
                position: absolute;
                left: 200px;
                top: 75px;
                text-align: center;
            }
        </style>
    
        <script>
            var oDiv;
            window.onload = function() {
                oDiv = document.getElementById('div1');
                /*oDiv.onmouseover = startMoveIn;
                oDiv.onmouseout = startMoveOut;*/
    
                oDiv.onmouseover = function() {
                    //startMove(10, 0);
                    startMove02(0);
                };
                oDiv.onmouseout = function() {
                    //startMove(-10, -200);
                    startMove02(-200);
                };
            };
    
            var timer=null;
            /*startMoveIn() 和 startMoveOut()方法相似,可以进行提取合成 --> startMove()*/
            /*function startMoveIn() {
                clearInterval(timer);
    
                timer = setInterval(function() {
                    if(oDiv.offsetLeft == 0) {
                        clearInterval(timer);
                    } else {
                        oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
                    }
                },30);
            }
    
            function startMoveOut() {
                clearInterval(timer);
    
                timer = setInterval(function() {
                    if(oDiv.offsetLeft == -200) {
                        clearInterval(timer);
                    } else {
                        oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
                    }
                },30)
            }*/
    
            function startMove(speed, iTarget) {
                clearInterval(timer);
    
                timer = setInterval(function() {
                    if(oDiv.offsetLeft == iTarget) {
                        clearInterval(timer);
                    } else {
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                    }
                },30);
            }
    
            //除去speed参数
            function startMove02(iTarget) {
                clearInterval(timer);
    
                var speed;
                if(oDiv.offsetLeft > iTarget) {
                    speed = -10;
                } else {
                    speed = 10;
                }
    
                timer = setInterval(function() {
                    if(oDiv.offsetLeft == iTarget) {
                        clearInterval(timer);
                    } else {
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                    }
                },30);
            }
        </script>
    </head>
    <body>
        <div id="div1"><span id="share">分享</span></div>
    </body>
    </html>
    
    

    透明度动画  D02_opacity.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>透明度动画</title>
        <style>
            body,div{
                margin: 0;
                padding: 0;
            }
            #div1 {
                width: 200px;
                height: 200px;
                background: red;
                filter: alpha(opacity=30); /*基于IE*/
                opacity: 0.3; /*基于火狐、Chrome*/
            }
        </style>
    
        <script>
            window.onload = function() {
                var oDiv = document.getElementById('div1');
                oDiv.onmouseover = function() {
                    startMove(100);
                };
                oDiv.onmouseout = function() {
                    startMove(30);
                };
            };
    
            var timer = null;
            var alpha = 30;
            function startMove(iTarget) {
                var oDiv = document.getElementById('div1');
    
                //解决定时器叠加的问题
                clearInterval(timer);
                timer = setInterval(function() {
                    var speed = 0;
                    if(alpha > iTarget) {
                        speed = -10;
                    } else {
                        speed = 10;
                    }
    
                    if(alpha == iTarget) {
                        clearInterval(timer);
                    } else {
                        alpha += speed;
                        oDiv.style.filter = 'alpha(opacity='+alpha+')';
                        oDiv.style.opacity = alpha / 100;
                    }
                },30);
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
    </html>

    缓冲动画  D03_speed.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>缓冲动画</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            #div1 {
                width: 200px;
                height: 250px;
                background-color: #807a62;
                position: relative;
                left: -200px;
                top: 0;
            }
            #div1 span {
                width: 20px; /* 行内元素脱离文本流后可以设置宽高*/
                height: 50px;
                background-color: aquamarine;
                position: absolute;
                left: 200px;
                top: 75px;
                text-align: center;
            }
        </style>
    
        <script>
            var oDiv;
            window.onload = function() {
                oDiv = document.getElementById('div1');
                /*oDiv.onmouseover = startMoveIn;
                 oDiv.onmouseout = startMoveOut;*/
    
                oDiv.onmouseover = function() {
                    //startMove(10, 0);
                    startMove02(0);
                };
                oDiv.onmouseout = function() {
                    //startMove(-10, -200);
                    startMove02(-200);
                };
            };
    
            var timer=null;
    
            //除去speed参数
            function startMove02(iTarget) {
                clearInterval(timer);
    
                timer = setInterval(function() {
                    var speed = (iTarget - oDiv.offsetLeft) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                    if(oDiv.offsetLeft == iTarget) {
                        clearInterval(timer);
                    } else {
                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                    }
                },30);
            }
        </script>
    </head>
    <body>
    <div id="div1"><span id="share">分享</span></div>
    </body>
    </html>

    多物体动画  D04_morespart01.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多物体动画</title>
    
        <style>
            ul {
                list-style: none;
            }
            ul li {
                width: 200px;
                height: 100px;
                background: yellow;
                margin-bottom: 20px;
            }
        </style>
    
        <script>
            window.onload = function() {
                var aLi = document.getElementsByTagName('li');
                for(var i = 0; i<aLi.length; i++) {
                    aLi[i].timer = null; //为每一个li加一个定时器
                    aLi[i].onmouseover = function() {
                        startMove(this,400);
                    };
                    aLi[i].onmouseout = function() {
                        startMove(this,200);
                    };
                }
            };
    
            //var timer = null;
            function startMove(obj, iTarget) {
                clearInterval(obj.timer);
                obj.timer = setInterval(function() {
                    var speed = (iTarget - obj.offsetWidth) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                    if(obj.offsetWidth == iTarget) {
                        clearInterval(obj.timer);
                    } else {
                        obj.style.width = obj.offsetWidth + speed + 'px';
                    }
                },30);
            }
    
    
        </script>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
    </html>

    D04_morespart02.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>多物体动画</title>
        <style>
            div{
                width: 300px;
                height: 300px;
                background: red;
                float: left;
                margin: 10px;
    
                filter: alpha(opacity=30);
                opacity: 0.3;
            }
        </style>
    
        <script>
            var ds;
            window.onload = function() {
                ds = document.getElementsByTagName('div');
    
                for(var i = 0; i < ds.length; i++) {
                    ds[i].timer = null;
                    ds[i].alpha = 30;
    
                    ds[i].onmouseover = function() {
                        startChange(this, 100);
                    };
                    ds[i].onmouseout = function() {
                        startChange(this, 30);
                    };
                }
            }
    
            function startChange(obj, iTarget) {
                clearInterval(obj.timer);
    
                obj.timer = setInterval(function() {
                    var speed = (iTarget - obj.alpha) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                    if(obj.alpha == iTarget) {
                        clearInterval(obj.timer);
                    } else {
                        obj.alpha += speed;
                        obj.style.filter = 'alpha(opacity=' + obj.alpha + ')';
                        obj.style.opacity = obj.alpha / 100;
                    }
                }, 30);
            }
    
        </script>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
    </html>

    获取样式  D05_getStyle01.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取样式</title>
        <style>
            #div1 {
                width: 200px;
                height: 200px;
                background: red;
                border: 2px solid #000;
                font-size: 12px;
                color: #fff;
            }
        </style>
    
        <script>
            var oDiv;
            window.onload = function() {
                oDiv = document.getElementById('div1');
                setInterval(function() {
                    //oDiv.style.width = parseInt(getStyle(oDiv, 'width')) - 1 + 'px';
                    oDiv.style.fontSize = parseInt(getStyle(oDiv, 'fontSize')) + 1 + 'px';
                }, 30);
            };
    
            //获取样式
            function getStyle(obj, attr) {
                if(obj.currentStyle) { //currentStyle 针对IE浏览器
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj,false)[attr]; //getComputedStyle 针对火狐浏览器
                }
            }
        </script>
    </head>
    <body>
        <div id="div1">font-size</div>
    </body>
    </html>

    D05_getStyle02.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取样式</title>
        <style>
            ul {
                list-style: none;
            }
            ul li {
                width: 200px;
                height: 100px;
                background: yellow;
                margin-bottom: 20px;
                border: 1px solid yellowgreen;
            }
    
            ul li:hover {
                box-shadow: 0 0 7px 2px #0CC;
            }
        </style>
        <script>
            var aLi;
            window.onload = function() {
                aLi = document.getElementsByTagName('li');
    
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].timer = null;
                    aLi[i].onmouseover = function() {
                        startChange(this, 400);
                    };
                    aLi[i].onmouseout = function() {
                        startChange(this, 200);
                    };
                }
            };
    
            function startChange(obj, iTarget) {
                clearInterval(obj.timer);
    
                obj.timer = setInterval(function() {
                    var icur = parseInt(getStyle(obj, 'width'));
                    var speed = (iTarget - icur) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                    if(icur == iTarget) {
                        clearInterval(obj.timer);
                    } else {
                        obj.style.width = icur + speed + 'px';
                    }
                }, 30);
            }
    
            function getStyle(obj, attr) {
                if(obj.currentStyle) {
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj, false)[attr];
                }
            }
        </script>
    </head>
    <body>
    
    </body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </html>

    任意属性值  D06_anyValue.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>任意属性值</title>
        <style>
            ul {
                list-style: none;
            }
            ul li {
                width: 200px;
                height: 100px;
                background: yellow;
                margin-bottom: 20px;
                border: 1px solid yellowgreen;
                filter: alpha(opacity=50);
                opacity: 0.5;
            }
    
            ul li:hover {
                box-shadow: 0 0 7px 2px #0CC;
            }
        </style>
        <script>
            var li1, li2, li3;
            window.onload = function() {
                li1 = document.getElementById('li1');
                li2 = document.getElementById('li2');
                li3 = document.getElementById('li3');
    
                li1.onmouseover = function() {
                    startChange(this, 'height', 400);
                };
                li1.onmouseout = function() {
                    startChange(this, 'height', 100);
                };
                li2.onmouseover = function() {
                    startChange(this, 'width', 400);
                };
                li2.onmouseout = function() {
                    startChange(this, 'width', 200);
                };
                li3.onmouseover = function() {
                    startChange(this, 'opacity', 100);
                };
                li3.onmouseout = function() {
                    startChange(this, 'opacity', 50);
                };
            };
    
            function startChange(obj, attr, iTarget) {
                clearInterval(obj.timer);
    
                obj.timer = setInterval(function() {
                    var icur = 0;
                    if(attr == 'opacity') {
                        icur = Math.round(parseFloat(getStyle(obj, attr))*100);
                    } else {
                        icur = parseInt(getStyle(obj, attr));
                    }
    
                    var speed = (iTarget - icur) / 10;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                    if(icur == iTarget) {
                        clearInterval(obj.timer);
                    } else {
                        if(attr == 'opacity') {
                            obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
                            obj.style.opacity = (icur + speed) / 100;
                        } else {
                            obj.style[attr] = icur + speed + 'px';
                        }
                    }
                }, 30);
            }
    
            function getStyle(obj, attr) {
                if(obj.currentStyle) {
                    return obj.currentStyle[attr];
                } else {
                    return getComputedStyle(obj, false)[attr];
                }
            }
        </script>
    </head>
    <body>
    
    </body>
    <ul>
        <li id="li1"><p>我是高度改变~</p></li>
        <li id="li2"><p>我是宽度改变~</p></li>
        <li id="li3"><p>我是透明度改变~</p></li>
    </ul>
    </html>


    JS动画框架  move.js

    /**
     * Created by DreamBoy on 2016/1/22.
     */
    //获取对象样式,如 getStyle(obj, 'width')
    function getStyle(obj, attr) {
        if(obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
    
    //动画效果,如 startMove(obj, 'width', 200)
    // fn是回调函数,如果fn有传入的话,动画结束后会执行给函数——》可以形成 链式动画
    /*function startMove(obj, attr, iTarget, fn) {
        clearInterval(obj.timer);
    
        obj.timer = setInterval(function() {
            //1.取当前的值
            var icur = 0;
            if(attr == 'opacity') {
                icur = Math.round(parseFloat(getStyle(obj, attr))*100);
            } else {
                icur = parseInt(getStyle(obj, attr));
            }
    
            //2.计算速度
            var speed = (iTarget - icur) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
            //3.检测停止
            if(icur == iTarget) {
                clearInterval(obj.timer);
                if(fn) {
                    fn();
                }
            } else {
                if(attr == 'opacity') {
                    obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
                    obj.style.opacity = (icur + speed) / 100;
                } else {
                    obj.style[attr] = icur + speed + 'px';
                }
            }
        }, 30);
    }*/
    
    //修改——> 不同属性变化的同时运行(使用json  属性值:目标值)
    // startMove(ojb,{attr1:itarget1, attr2:itarget2},fn)
    function startMove(obj, json, fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var flag = true;
            for(var attr in json) {
                //1.取当前的值
                var icur = 0;
                if(attr == 'opacity') {
                    icur = Math.round(parseFloat(getStyle(obj, attr))*100);
                } else {
                    icur = parseInt(getStyle(obj, attr));
                }
    
                //2.计算速度
                var speed = (json[attr] - icur) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    
                //3.检测停止
                if(icur != json[attr]) {
                    flag = false;
    
                    if(attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity=' + (icur + speed) + ')';
                        obj.style.opacity = (icur + speed) / 100;
                    } else {
                        obj.style[attr] = icur + speed + 'px';
                    }
                }
            }
    
            if(flag) {
                clearInterval(obj.timer);
                //obj.timer = null;
                if(fn) {
                    fn();
                }
            }
        }, 30);
    }
    


    链式动画  D07_chainAnimation.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>链式动画</title>
    
        <style>
            body, ul, li{
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none;
            }
            ul li {
                width: 200px;
                height: 100px;
                background: yellow;
                margin-bottom: 20px;
                border: 4px solid #000;
                filter: alpha(opacity=30);
                opacity: 0.3;
            }
        </style>
    
        <script src="move.js"></script>
        <script>
            window.onload = function() {
                var li1 = document.getElementById('li1');
                li1.onmouseover = function() {
                    startMove(li1, 'width', 400, function() {
                        startMove(li1, 'height', 200, function() {
                            startMove(li1, 'opacity', 100);
                        });
                    });
                };
                li1.onmouseout = function() {
                    startMove(li1, 'opacity', 30, function() {
                        startMove(li1, 'height', 100, function() {
                            startMove(li1, 'width', 200);
                        });
                    });
                }
            };
        </script>
    </head>
    <body>
        <ul>
            <li id="li1"></li>
        </ul>
    </body>
    </html>

    json介绍  D08_json.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>json介绍</title>
        <script>
            //定义一个json
            var json = {
                a:12,
                b:13
            };
    
            //遍历json
            for(var i in json) {
                document.write(i + ":" + json[i] + "<br/>");
            }
        </script>
    </head>
    <body>
    
    </body>
    </html>

    同时运动  D08_sametimeMove.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>同时运动</title>
        <style>
            ul {
                list-style: none;
            }
            ul li {
                width: 200px;
                height: 100px;
                background: yellow;
                margin-bottom: 20px;
                border: 4px solid #000;
                filter: alpha(opacity=30);
                opacity: 0.3;
            }
            ul li:hover {
                box-shadow: 0 0 7px 4px #ccc;
            }
        </style>
        <script src="move.js"></script>
        <script>
            window.onload = function() {
                var oLi = document.getElementById("li1");
                oLi.onmouseover = function() {
                    startMove(oLi, {'width':400, 'height':200, 'opacity': 100}, function() {
                        startMove(oLi, {'width': 600});
                    });
                };
                oLi.onmouseout = function() {
                    startMove(oLi, {'width':200, 'height':100, 'opacity': 30});
                };
            }
        </script>
    </head>
    <body>
        <ul>
            <li id="li1"></li>
        </ul>
    </body>
    </html>

    JS动画案例  D09_JSAnimationDemo.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS动画案例</title>
    
        <style>
            #move {
                width: 300px;
                border: 1px solid #ccc;
                margin: 0 auto;
                padding: 10px;
                overflow: hidden;
            }
    
            #move a {
                float: left;
                color: red;
                font-size: 10px;
                /*border: 1px solid #00CCCC;*/
                padding: 35px 30px 0 30px;
                margin: 20px 0 20px 10px;
    
                position: relative;
                text-decoration: none;
                line-height: 25px;
                overflow: hidden;
            }
    
            #move a i{
                position: absolute;
                top: 20px;
                left: 0;
                display: inline-block;
                width: 100%;
                text-align: center;
                filter: alpha(opacity=100);
                opacity: 1;
            }
    
            #move a:hover {
                box-shadow: 0 0 7px 4px #ccc;
            }
        </style>
    
        <script src="move.js"></script>
        <script>
            window.onload = function() {
                var oMove = document.getElementById('move');
                var aLi = oMove.getElementsByTagName('a');
    
                var k=0;
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].onmouseover = function() {
                        var _this = this.getElementsByTagName('i')[0];
                        startMove(_this, {'top':-25, 'opacity': 0}, function() {
                            _this.style.top = 35 + 'px';
                            startMove(_this, {'top':20, 'opacity': 100});
                        });
                    };
                }
            };
        </script>
    </head>
    <body>
        <div id="move">
            <a href="#"><i><img src="img/caipiao.png"></i><p>彩票</p></a>
            <a href="#"><i><img src="img/movie.png"></i><p>电影</p></a>
            <a href="#"><i><img src="img/music.png"></i><p>音乐</p></a>
            <a href="#"><i><img src="img/jiaofei.png"></i><p>缴费</p></a>
            <a href="#"><i><img src="img/licai.png"></i><p>理财</p></a>
            <a href="#"><i><img src="img/food.png"></i><p>外卖</p></a>
        </div>
    </body>
    </html>

    结果演示:


    鼠标移动到图标处,发生动画效果:


    原素材如下:

      caipiao.png     movie.png     music.png     jiaofei.png     licai.png     food.png


    展开全文
  • 前后端分离模式下的日志框架集成案例简介一、技术栈二、前端代码部分2.1、axios请求拦截器和响应拦截器的使用三、后端部分3.1、AOP切面日志类--LogAspect3.2、Logback.xml文件四、效果展示4.1、前端部分4.2、后端...
  • 本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正。 本文相关目录: ...2.1.1 定位 - 官方框架CoreLocation: 请求用户授权 7.4 定位服务-&g...
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> *{margin: 0;padding: 0;} ul{ list-style: none;... }
  • 效果如图-3所示。 图-3 3.3 步骤 实现此案例需要按照如下步骤进行。 1)HTML代码如下 <html> <title>江雪</title> <body> <h1 align="center">江雪</h1> <p align="center...
  • 这一节讲运动框架
  • 非常好的Jquery validate:每个案例独立,都有注释 讲解了: 环境搭建 常见验证方法配置 国际化错误消息 自定义方法和远程验证 给验证添加 图标效果
  • Struts2框架案例

    2018-08-10 20:39:01
    效果 : 实现代码 : web.xml &lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="...
  • "http://www.w3.org/TR/html4/loose.dtd"> var n=0; var m=0 function lie(){ $(function(){ var $firstNode = $(#lie>p); 
  • 1、新的抽屉效果,修改于SliderViewController,不过里面已经不一样,毕竟是新的效果嘛 (此部分还不算完全具备框架的特性,呵呵:grinning_face_with_smiling_eyes:) 2、首页滑动导航菜单的字体大小和颜色,随...
  • 点击按钮可以实现div内容(图片)左右位置移动,或者快速变换位置等等 高版本浏览器下效果较好
  • 我的问题是这样的:本来想学下webmagic这个爬虫框架,但是出现了好多...2.然后我在网上找了个案例打算写写看,运行下效果!如图: 3.好的。然后运行:报错,报的错显示是没有log4j这个日志。然后在查阅了等等资料...
  • Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。这篇文章主要介绍了BootStrap的JS插件之轮播效果案例详解的相关资料,需要的朋友可以参考下
  • 中文版信息服务器linux服务器信息查看应用1. 第一步创建项目1.1 创建项目1.2... 搭建框架2.1 搭建框架流程2.2 git提交3. 主页信息的配置index3.1 配置文件3.2 启动服务器进行测试3.3 使用基模板测试效果3.4 git 提交3.5
  • 课程目标$ O" k; ` o* M5 V0 V 快速使用Tensorflow玩转神经网络# K8 J; A' `6 n8 l 适用人群# v) o9 S( e....机器学习,深度学习领域* ~* N* I% Y+ t, B& |0 j...3-4Tensorflow案例实战视频课程22 迭代及测试网络效果 10:56
  • 新浪网分类资讯爬虫 爬取新浪网导航页所有下...效果演示图: items.py import scrapy import sys reload(sys) sys.setdefaultencoding("utf-8") class SinaItem(scrapy.Item): # 大类的标题 和...
  • Flask框架之模板继承与案例05一,模版继承二,静态文件的配置1.这里列举一个小例子:三,模版案例(制作豆瓣评分页面)1.效果图:2.数据准备: 一,模版继承 Flask中的模板可以继承,通过继承可以把模板中许多重复...
  • 四、案例:广告的自动显示和隐藏 Hello,你好呀,我是灰小猿!一个超会写bug的程序猿! 今天继续来和大家分享一下在jQuery高级开发中关于动画效果的简单实现! 首先来看一个简单的动画效果图: 我之前也和小...
  • 很简单 看看就会用 效果很不错 每种效果都有文字说明 包含js文件 css样式等
  • HashSet中,添加元素时,只有当对象的hashcode一样且equals判断两个对象为一个对象时,才会达到去重效果,因此需要重写这两个方法 package com.dream.work01; public class Student{ private String name; ...
  • 在实际的系统开发中,我们往往需要一些简单的的案例代码,基于此目的我把Winform开发框架中各种闪光点和不错的功能,有些是我们对功能模块的简单封装,而有些则是引入了一些应用广泛的开源组件进行集成使用,因此把...
  • 想必做安卓的小伙伴都知道,在一个项目中或多或少的会使用到自定义view,因为原生框架始终满足不了UI-UE的需求,入不了他们的法眼。下面简单写一个自定义view。以水波纹效果为例 需求是写一个水波纹的效果,类似于...
  • 显示效果: 安卓系统上传图片 安卓系统上传视频 苹果IOS IOS系统上传图片 IOS系统上传视频 layui解决代码 上传图片 <button class="layui-btn" id="test3" capture="user"><i class="layui-icon">...
  • less, HTML, jQuer,原生js,express框架等等一些技术栈,效果如下: 二阶段效果 这个小的案例做完之后,个人感觉不是特别的难,主要是练习而已…分享出来,做个留念,仅此而已. 如有关于技术问题的小伙伴,可以私聊哈 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 933
精华内容 373
关键字:

框架效果案例