韭菜的故事
韭菜的故事

浅谈video标签在移动端的运用

本文首发我的简书

最近在移动端项目用到了video标签展示视频，原本以为作为html5标准一员的video到了今天兼容性应该没什么问题了，可一用才知道还是有些坑的……那么在这里就由浅入深的论述一下使用video的心得吧（一些众所周知的常用属性和我没怎么用过的在此均省略不表）。

属性

  • src
    要播放的视频的 URL。只支持3种格式：MP4、WebM、Ogg。另外src除了可以使用放在服务器的绝对路径和项目中的相对路径（对于本地路径在PC端有一些限制，移动端貌似无法取到本地视频），还支持 base64码（需添加前缀data:video/mp4;base64, 注意有逗号）
  • poster
    规定视频正在下载时显示的图像，直到用户点击播放按钮。(也就是视频播放之前显示的一个预览图)其值和img标签的src属性相同，填上一个图片路径或者base64。
  • playsinline webkit-playsinline
    视频在移动端播放时会自动全屏，而这个属性就是为了阻止全屏动作的，添加-webkit-前缀增加在ios safari上的兼容性。（只用写上属性名就行，和autoplay,loop之类的类似）
  • muted
    如果出现该属性，视频的音频输出为静音。
  • autoplay
    自动播放，但是在ios上无法执行自动播放……（添加muted可以自动播放）需要用户执行play方法。（具体可参考视频播放–踩坑小计）

以上几种属性是写video标签时经常设置的几种属性，以下的几种则一般是需要在js中获取的属性，以便进行一些操作。

  • networkState
    返回音频/视频的当前网络状态（activity）。
    返回值如下
    • 0 = NETWORK_EMPTY - 音频/视频尚未初始化
    • 1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络
    • 2 = NETWORK_LOADING - 浏览器正在下载数据
    • 3 = NETWORK_NO_SOURCE - 未找到音频/视频来源

一般用到的就是1和2,当值为1的时候表示视频已经可以播放了（至少是当前帧已经加载好了，不过ios此时播放可能会白屏），值为2的时候播放下一帧会卡住(安卓)或者白屏(ios)。

注意：
1. 返回的值是`Number`类型,这使得在使用mint-ui这类的ui框架调试时可能会`Toast`一个空值,需要先转为字符串才能显示。
2. 关于ios上返回2继续播放会白屏的问题（仅仅出现在视频第一次点击播放的时候），这里我暂时没发现是什么原因导致的（有可能是视频太大？？）
  • readyState
    readyState 属性返回音频/视频的当前就绪状态。
    返回值如下
    • 0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
    • 1 = HAVE_METADATA - 关于音频/视频就绪的元数据
    • 2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
    • 3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
    • 4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放
      这里的返回值也是Number类型的

我在项目中先使用的就是这个属性，在返回1或2的时候代表刚进入这个页面浏览器还在加载视频，返回4则代表整个视频已经加载完毕了。可是我发现ios在返回3的时候立即播放还是有时会出现白屏，而安卓在返回3的时候是可以播放的，因此最后我选择了使用networkState来对视频加载状态进行判断。

  • 不可思议的currentTime
    定义是这么说的：设置或返回音频/视频播放的当前位置（以秒计）。当设置该属性时，播放会跳跃到指定的位置。
    而我使用这个属性来判断视频是否能连续播放，当视频播放的时候如果这个属性的值‘走动了’，可以认为视频已经可以播放下一帧了。感谢h5 video 移动端填坑记这篇文章提供的方法。

方法

我一般用到的方法也就是play(),pause()这里不过多赘述。

事件

  • canplay
    当浏览器能够开始播放指定的音频/视频时，会发生 canplay 事件。
    乍一看有了这个事件似乎就不需要上面各种state去判断视频能否播放了，可惜万恶的ios**不支持**这个事件，实测第一次进入页面ios在canplay事件触发的时候视频的networkState仍然处于2这个状态，也就是还未加载完成……
  • progress
    当浏览器正在下载指定的音频/视频时，会发生 progress 事件。
    我使用这个事件的方向可能有点‘歪门邪道’，众所周知一个视频在页面加载的时候等待时间或许会有点长，一般网站使用的是一个图片或者gif去代替video标签，当视频加载好了的时候就让video显示出来。而上面的canplay用不了，所以我抱着试试的想法在progress事件触发的时候让loading图隐藏起来（loading图默认显示），结果实际效果让我很满意，progress事件触发的时候视频的poster已经显示出来了，我初步判断第一次触发这个事件应该是视频第一帧可能前几帧都加载好了。
  • timeupdate
    timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。
    这个事件一看就是结合上面的currentTime属性用的。在后文我会详述。
  • waiting
    waiting 事件在视频由于需要缓冲下一帧而停止时触发。
    在我的项目用它主要是因为ios白屏的时候会触发这个事件……这样我可以在这个事件中让视频暂停。
  • ended
    ended 事件在音频/视频(audio/video)播放完成后触发。
    由于我的视频没有用loop属性所以我使用这个事件来提示用户视频播放结束。

应用

项目基于vue，ui框架使用的是mint-ui，还是直接上代码吧…

    
class="video-con fl">
        <div class="video" @click="$_videoFromApp_getVideoRecord">
            
            <img class="no-video" v-show="videoFromApp_noVideo" :src="require('@/images/icon/video.png')" alt="">
            <div class="bg-gray" v-show="videoFromApp_noVideo">div>
            
            <div v-show="!videoFromApp_playing">
                <img class="play-video" v-show="!videoFromApp_noVideo"
                     :src="require('@/images/icon/play-video.png')" alt="">
                <span class="play-time" v-show="!videoFromApp_noVideo">{{videoFromApp_videoTime}}span>
            div>
            
            <mt-spinner v-show="videoFromApp_loading" class="loading-css" type="fading-circle">mt-spinner>
            
            <video webkit-playsinline playsinline
                   ref="indentVideo"
                   class="real-video"
                   :src="videoFromApp_videoSrc"
                   v-show="!videoFromApp_noVideo"
                   :poster="videoFromApp_videoImg"
                   @progress="$_videoFromApp_hasVideo"
                   @waiting="$_videoFromApp_waiting"
                   @ended="$_videoFromApp_endVideo">video>
        div>
    div>

js部分

你可能感兴趣的:(前端应用)

  • 大前端日志分析的AI应用：从海量日志中提取有价值的运维信息 欧阳天羲 大前端与AI的深度融合#AI在大前端安全与运维篇前端人工智能运维
    在大前端技术快速发展的今天，前端应用的复杂度呈指数级增长，涵盖Web、移动端H5、小程序、快应用等多端形态。随之而来的是海量日志数据的爆发式增长——从浏览器控制台输出到移动端性能埋点，从用户行为轨迹到API调用异常，这些日志分散在不同终端、格式异构，传统的人工分析或规则引擎已难以应对。本文将系统阐述AI技术如何赋能大前端日志分析，从日志采集到智能诊断的全流程解决方案，结合实际案例展示如何利用机器学
  • UniApp Vue3 模式下实现页面跳转的全面指南
    1.引言1.1UniApp与Vue3的结合优势UniApp是一个使用Vue.js开发所有前端应用的框架，支持编译到iOS、Android、H5、以及各种小程序平台。Vue3提供了更高效的响应式系统和CompositionAPI，使开发体验更加现代化和灵活。1.2页面跳转在应用开发中的重要性页面跳转是用户交互的核心功能之一，良好的跳转逻辑可以提升用户体验并增强应用结构的清晰度。2.UniApp原生导
  • flux介绍 tqs_12345 java架构react.js
    Flux是一种前端应用开发架构，由Facebook的一群工程师提出，主要用于管理数据流。Flux的核心思想是利用单向数据流和逻辑单向流来解决MVC架构中状态混乱、数据流管理混乱的问题。Flux应用由三个主要部分组成：Dispatcher、Store和View。Dispatcher是应用的调度中心，负责接收并分发Action。Store负责存储应用状态，同时响应事件并更新数据。View则负责订阅来自
  • MVC与MVVM架构模式详解：原理、区别与JavaScript实现 布兰妮甜 javascriptmvcmvvm架构
    Hi，我是布兰妮甜！在当今复杂的前端开发领域，如何组织代码结构一直是开发者面临的核心挑战。MVC和MVVM作为两种经典的架构模式，为前端应用提供了清晰的责任划分和可维护的代码组织方案。本文将深入探讨这两种模式的原理、实现差异以及在实际项目中的应用场景，通过JavaScript代码示例展示它们的核心思想，帮助开发者理解如何根据项目需求选择合适的架构模式。文章目录一、架构模式概述二、MVC架构模式2.
  • 探索 Vue.js 组件的最新特性 vue.js
    引言：Vue.js作为一款流行的前端框架，始终在不断发展和演进，为开发者带来新的特性和功能，以提升开发效率和用户体验。Vue.js组件是构建Vue应用的基础，其最新特性为开发者提供了更强大的工具和更灵活的开发方式。本文将深入探讨Vue.js组件的一些最新特性，包括组合式API、Teleport、Suspense等，帮助开发者更好地掌握和运用这些特性，从而构建出更加高效、复杂的前端应用。组合式API
  • 【面试宝典】39道UniApp高频题库整理(附答案背诵版) 想念@思恋 java前端面试宝典面试uni-app职场和发展
    1.简述什么是uniApp？uniApp是一个使用Vue.js开发所有前端应用的框架，它允许开发者用一套代码同时发布到iOS、Android、Web（包括PC和移动端浏览器）、以及各种小程序（微信、支付宝、百度、字节跳动、QQ等）和快应用等多个平台。简而言之，uniApp的宗旨是“一次开发，多处运行”。使用uniApp，开发者可以享受到Vue.js的开发体验，包括组件化开发、Vue插件支持、Vue
  • 探索适用于鸿蒙原生应用的跨平台开发框架 harmonyos
    探索适用于鸿蒙原生应用的跨平台开发框架在移动应用开发领域，跨平台开发框架的出现为开发者带来了极大的便利。本文将介绍几种适用于开发鸿蒙原生应用的跨平台应用开发技术框架。Uni-appUni-app是基于Vue.js开发前端应用的框架，它的优势在于一套代码能编译到iOS、Android、Web以及各种小程序等多个平台。在鸿蒙原生应用开发方面，它借助华为开发者联盟的开发工具和SDK来开发鸿蒙应用。对于熟
  • 新手开发者：前后端分离部署及其跨域解决方案 甘露寺 前端跨域部署前端持续部署
    新手开发者：前后端分离部署及其跨域解决方案典型生产部署场景访问加载前端应用执行前端代码跨域请求用户前端服务器www.frontend.com请求后端APIwww.backend.com场景描述：前端：部署在GitHubPages(www.frontend.com)后端：部署在阿里云服务器(www.backend.com)用户：访问www.frontend.com跨域问题如何解决？方案一：CORS（
  • 通过Umijs从0到1搭建一个React项目 小林rr react.js前端前端框架
    有一阵时间没写react了，今天通过umi搭建一个demo项目复习一下react；umi是一个可扩展的企业级前端应用框架，在react市场中还是比较火的一个框架。Umi官方文档：Umi介绍(umijs.org)一、构建项目。1、安装包管理工具。官方推荐使用pnpm，我也一直在使用pnpm，如果没有请执行以下命令自行安装。npminstall-gpnpm2、构建项目。根据官方文档的说明，我们在已经创
  • 【架构篇】微前端架构设计与qiankun实战 全息架构师 Java前沿探索：引领技术新风尚架构前端
    【架构篇】微前端架构设计与qiankun实战阅前必看：本文是《前端开发完全指南》系列的第十七篇，包含15个核心代码示例、8张系统架构图解、2个企业级落地案例。通过qiankun+ModuleFederation实现前端应用自由组合，支撑百万级PV应用！目录微前端核心价值技术方案全景对比qiankun架构设计主子应用通信方案样式隔离方案沙箱机制解析资源加载优化权限体系集成性能监控方案中台系统实战一、
  • AI辅助大前端开发的性能瓶颈突破与体验优化
    在大前端开发技术飞速发展的当下，应用功能日趋复杂，性能瓶颈已成为制约用户体验的关键因素。AI凭借强大的数据分析与智能决策能力，为大前端开发带来了性能优化的新思路。本文将结合小程序、APP和Web等典型开发场景，深入探讨AI在大前端性能优化中的具体应用，并通过丰富的代码示例展示实践过程。一、资源加载优化（一）智能资源预加载在大前端应用中，资源加载速度直接影响页面的启动时间。AI通过分析用户行为数据和
  • umi搭建react项目 小刘，刘不刘 react.js前端前端框架umi
    UMI是一个基于React的可扩展企业级前端应用框架，提供路由、状态管理、构建和部署等功能，可以帮助开发者快速构建复杂的单页面应用（SPA）和多页面应用（MPA）。它与React的关系是，UMI构建在React生态系统之上，利用React提供的组件化开发方式和生态系统的丰富资源来进行开发。所以学习react的同时可以借助umi这个框架进行深度学习react第一步创建umi项目在终端输入npmins
  • 《打破微前端困局：样式冲突与资源隔离破局指南》 程序猿阿伟 前端
    微前端架构凭借其独特优势，正逐渐成为众多大型项目的首选架构模式。它将一个庞大的前端应用拆解为多个相对独立的子应用，每个子应用可以独立开发、部署和维护，极大地提升了开发效率与团队协作的灵活性。然而，随着微前端架构的广泛应用，一系列棘手的问题也接踵而至，其中最为突出的便是不同子应用之间的样式冲突与资源隔离问题。这些问题犹如隐藏在暗处的礁石，稍有不慎，就可能使我们精心构建的微前端架构之船触礁搁浅。本文将
  • 探索数据世界的桥梁：Apache Linkis深度解析 傅尉艺Maggie
    探索数据世界的桥梁：ApacheLinkis深度解析去发现同类优质开源项目:https://gitcode.com/在大数据的浩瀚宇宙中，数据的高效处理和灵活应用一直是企业数字化转型的核心难题。为此，Apache基金会孕育出了一个明星项目——ApacheLinkis，旨在成为链接前端应用和后端数据引擎的强韧纽带，为企业解决计算逻辑与物理执行环境间的鸿沟。项目介绍ApacheLinkis，作为一款高
  • uniapp 生成二维码 祖先森、 uni-appvue.jsjavascript
    一般常用到的二维码生成库，在使用的过程中，都需要设置到指定的dom元素上，但是在uniapp项目中，想要像vue项目中一样，获取标签的dom元素是比较难操作的。所以在uniapp中生成二维码，就需要换一种思路，通过canvas画布，将二维码进行绘制并放置在canvas中进行展示。uQRCode是一款基于Javascript环境开发的二维码生成插件，适用所有Javascript运行环境的前端应用和N
  • 【Dify精讲】第17章：前端组件定制开发 1989 前端架构pythonflaskAI编程
    引言作为一个深耕前端领域多年的老兵，我见证了从jQuery到现代框架的演进历程。当我深入Dify的前端代码库时，被其优雅的组件架构设计深深震撼。这不仅仅是一个简单的AI应用前端，更是一个展示现代前端开发最佳实践的典型案例。今天，让我们一起走进Dify的前端世界，从组件设计的角度来理解如何构建一个可维护、可扩展的企业级前端应用。一、组件开发规范1.1Dify的组件架构哲学翻开Dify的前端代码，你会
  • Axios 拦截器实现原理深度剖析：构建优雅的请求处理管道 斯~内克 前端前端javascript
    在构建现代前端应用时，网络请求处理是关键环节。作为最流行的HTTP客户端库之一，Axios通过其拦截器机制（Interceptors）提供了强大的请求/响应处理能力。本文将深入Axios源码，揭示拦截器背后的精妙设计与实现原理。一、拦截器机制的核心价值在深入源码前，先理解拦截器的核心作用：请求预处理：动态添加认证头、参数序列化响应后处理：统一错误处理、数据格式化行为监控：请求日志、性能跟踪流程控制
  • 微前端MFE: 通过共享模块通信（模块联邦Module Federation） crary,记忆 前端
    背景传统微前端中，不同子应用彼此完全独立，通信主要通过事件、消息总线等方式。随着模块联邦（ModuleFederation）技术的发展，可以在多个微前端应用间动态共享模块，实现模块级别的调用和通信，打破边界。核心思想利用WebpackModuleFederation机制，多个应用间共享和暴露模块（函数、组件、状态管理实例等）。通过导入其他应用暴露的模块，直接调用对方的功能或状态，达成通信目的。具体
  • Vite 的出现及其优势 流量留 VUE框架Vue
    ###关于前端打包工具的演进随着前端应用规模的不断扩大，打包工具在前端开发流程中的重要性日益凸显。在早期，由于浏览器对ES模块的支持有限，开发者不得不依赖打包工具将项目中的各个模块文件进行处理和整合，以便生成可以在浏览器中正常运行的文件。像webpack、Rollup和Parcel这些工具的出现，极大地改善了前端开发者的开发体验，让项目可以更好地进行模块化开发和管理。然而，随着项目规模的进一步扩大
  • 深入探索前端世界的“侦察兵”：Observer API 家族全解析 斯~内克 前端javaScript前端
    在现代复杂的前端应用中，高效、精准地感知DOM变化、元素可见性、视口交叉状态以及性能指标至关重要。传统的事件监听（如scroll、resize）或轮询（setInterval）方式不仅性能开销大，而且难以精确控制。此时，ObserverAPI家族应运而生，它们如同前端世界的“专业侦察兵”，提供了更优雅、更高效的异步观察机制。本文将深入剖析MutationObserver、IntersectionO
  • UniApp项目中的多服务环境配置与跨域代理实现 蓝精灵001 uni-appjavascript前端面试学习程序员计算机
    在前后端分离的开发模式下，前端应用经常需要与多个后端服务进行交互。本文将详细介绍如何在UniApp项目中配置和管理多个后台服务地址，以及如何处理跨域请求问题，特别是在H5环境下的代理配置。1.环境变量配置在UniApp项目中，我们可以通过环境变量文件来管理不同环境下的配置信息。以下是开发环境的配置示例：#env/.env.development#变量必须以VITE_为前缀才能暴露给外部读取NODE
  • 前端模块化的过去和未来 BitCat 前端工程化前端面试
    模块化概念模块化是将程序拆分为功能独立、相互依赖的模块单元的软件设计方法，使每个模块完成特定功能并可被重用。在前端开发中，模块化解决了多个核心问题：全局变量污染导致的命名冲突、依赖关系不明确、代码组织混乱以及团队协作困难等。随着前端应用规模不断扩大，从简单的页面交互脚本发展到复杂的单页应用，模块化已成为构建可维护代码的必要基础。模块化不仅关乎代码组织，更是影响前端架构设计、开发效率和应用性能的关键
  • Vite 及生态环境：新时代的构建工具 BitCat 前端工程化前端面试
    前言前端构建工具的演进历程见证了Web开发从简单的文件处理到复杂的模块打包系统的转变。从早期的Grunt、Gulp，到Webpack、Parcel，再到如今的Vite，每一次工具迭代都反映了前端开发需求的变化与技术生态的进步。传统构建工具如Webpack在处理大型前端应用时存在启动缓慢、热更新延迟等痛点，这些问题随着项目规模增长愈发明显，严重影响体验和生产效率。Vite（法语中"快速"之意）作为新
  • 基于AWS无服务器架构的区块链API集成：零基础设施运维实践 AWS官方合作商 awsserverless架构web3区块链
    引言区块链开发常面临节点部署、网络维护和扩展性挑战。本文将介绍如何通过AWS全托管服务构建高可用的区块链API层，无需自建节点、无需管理服务器，实现快速接入主流区块链网络（如以太坊、比特币），并保证企业级安全性与扩展性。graphLRA[前端应用]-->B[AmazonAPIGateway]B-->C[AWSLambda]C-->D[AmazonManagedBlockchain]C-->E[Bl
  • 前端领域：Node.js 与前端性能优化的技术创新点 大厂前端小白菜 ai
    前端领域：Node.js与前端性能优化的技术创新点关键词：Node.js、前端性能优化、SSR、构建工具、缓存策略、代码分割、异步加载摘要：本文深入探讨Node.js在前端性能优化中的关键作用和技术创新点。我们将从Node.js的核心优势出发，分析其在服务端渲染(SSR)、构建工具链、缓存策略等方面的应用，并通过具体代码示例和性能对比数据，展示如何利用Node.js技术栈显著提升前端应用性能。文章
  • Vue 实例详解：理解 Vue 的生命周期与数据绑定 全栈探索者chen vuevue.js前端javascript前端框架ecmascript开发语言程序人生
    Vue实例详解：理解Vue的生命周期与数据绑定Vue.js是一款轻量级的前端框架，它专注于视图层，通过简单易用的API和高效的响应式机制，使得开发者可以快速构建现代化的前端应用。在学习Vue时，理解Vue实例的生命周期和数据绑定机制是至关重要的，它们是Vue能够实现响应式、动态更新视图的核心所在。在本篇文章中，我们将详细解析Vue实例的生命周期、数据绑定的工作原理，并提供具体的示例代码，帮助你更好
  • 破界协同：解锁电商平台混合云架构的双引擎效能 万米商云 系统架构
    当电商平台在“黑色星期五”遭遇流量海啸，当银行核心系统面临突发性交易洪峰，IT架构师们彻夜难眠的根源往往在于：如何在私有云的安全可控与公有云的无限弹性间找到完美平衡点？1、混合云协同架构的核心价值：鱼与熊掌兼得混合云不是私有云与公有云的简单叠加，而是有机整合的系统工程。其核心价值在于打破环境边界：稳态与敏态业务的黄金分割：核心数据库、合规系统部署于私有云，保障安全与低延时；前端应用、AI训练等弹性
  • MFE微前端基础版：Angular + Module Federation + webpack + 路由（Route way）完整示例 crary,记忆 微前端-MFE前端webpack学习angular
    1.项目结构microfrontend-demo/├──shell/#主应用(Shell)├──mfe1/#微前端应用1├──mfe2/#微前端应用2└──shared/#共享库2.主应用(Shell)配置shell/webpack.config.jsconstModuleFederationPlugin=require("webpack/lib/container/ModuleFederatio
  • 探索微前端架构：多种实现方式与实践思考 前端javascript
    在当今的前端开发领域，微前端架构正逐渐成为热门话题。它借鉴了微服务的理念，将原本庞大的单体前端应用拆解为多个小型前端应用，并能让它们协同工作，就如同一个完整的应用一样。今天，咱们就一起来深入探讨微前端架构的几种常见实现方式以及在实际应用中需要考虑的方方面面。一、微前端架构概述微前端架构的核心思想，就是把Web应用从单一的单体应用转变成多个小型前端应用聚合而成的形态。这些小型前端应用具备独立运行、独
  • 第八部分：阶段项目 6：构建 React 前端应用 低代码布道师 全栈开发入门前端react.js前端框架
    现在，是时候将你学到的React基础知识付诸实践，构建一个简单的前端应用来模拟与后端API的交互了。在这个阶段，你可以先使用模拟数据，或者如果你的后端API（阶段项目5）已经搭建好，可以直接连接真实的API。选择以下一个项目：项目选择1：React博客文章查看器构建一个简单的React应用，用于显示博客文章列表和单篇文章详情。主页显示所有文章的列表（标题和作者）。点击文章标题，跳转到文章详情页面，
  • apache ftpserver-CentOS config gengzg apache
    <server xmlns="http://mina.apache.org/ftpserver/spring/v1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://mina.apache.o
  • 优化MySQL数据库性能的八种方法 AILIKES sqlmysql
    1、选取最适用的字段属性 　　MySQL可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建表的时候，为了获得更好的 性能，我们可以将表中字段的宽度设得尽可能小。例如，在定义邮政编码这个字段时，如果将其设置为CHAR(255),显然给数据库增加了不必要的空间，甚至使用VARCHAR这种类型也是多余的，因为CHAR(6)就可以很
  • JeeSite 企业信息化快速开发平台 Kai_Ge JeeSite
    JeeSite 企业信息化快速开发平台 平台简介 JeeSite是基于多个优秀的开源项目，高度整合封装而成的高效，高性能，强安全性的开源Java EE快速开发平台。 JeeSite本身是以Spring Framework为核心容器，Spring MVC为模型视图控制器，MyBatis为数据访问层， Apache Shiro为权限授权层，Ehcahe对常用数据进行缓存，Activit为工作流
  • 通过Spring Mail Api发送邮件 120153216 邮件main
    原文地址：http://www.open-open.com/lib/view/open1346857871615.html 使用Java Mail API来发送邮件也很容易实现，但是最近公司一个同事封装的邮件API实在让我无法接受，于是便打算改用Spring Mail API来发送邮件，顺便记录下这篇文章。 【Spring Mail API】 Spring Mail API都在org.spri
  • Pysvn 程序员使用指南 2002wmj SVN
    源文件:http://ju.outofmemory.cn/entry/35762 这是一篇关于pysvn模块的指南. 完整和详细的API请参考 http://pysvn.tigris.org/docs/pysvn_prog_ref.html. pysvn是操作Subversion版本控制的Python接口模块. 这个API接口可以管理一个工作副本, 查询档案库, 和同步两个. 该
  • 在SQLSERVER中查找被阻塞和正在被阻塞的SQL 357029540 SQL Server
    SELECT  R.session_id AS BlockedSessionID ,          S.session_id AS BlockingSessionID ,          Q1.text AS Block
  • Intent 常用的用法备忘 7454103 .netandroidGoogleBlogF#
    Intent     应该算是Android中特有的东西。你可以在Intent中指定程序 要执行的动作（比如：view,edit,dial），以及程序执行到该动作时所需要的资料 。都指定好后，只要调用startActivity()，Android系统 会自动寻找最符合你指定要求的应用 程序，并执行该程序。 下面列出几种Intent 的用法 显示网页:
  • Spring定时器时间配置 adminjun spring时间配置定时器
    红圈中的值由6个数字组成，中间用空格分隔。第一个数字表示定时任务执行时间的秒，第二个数字表示分钟，第三个数字表示小时，后面三个数字表示日，月，年，< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" /> 测试的时候，由于是每天定时执行，所以后面三个数
  • POJ 2421 Constructing Roads 最小生成树 aijuans 最小生成树
    来源：http://poj.org/problem?id=2421 题意：还是给你n个点，然后求最小生成树。特殊之处在于有一些点之间已经连上了边。 思路：对于已经有边的点，特殊标记一下，加边的时候把这些边的权值赋值为0即可。这样就可以既保证这些边一定存在，又保证了所求的结果正确。 代码： #include <iostream> #include <cstdio>
  • 重构笔记——提取方法（Extract Method） ayaoxinchao java重构提炼函数局部变量提取方法
    提取方法（Extract Method）是最常用的重构手法之一。当看到一个方法过长或者方法很难让人理解其意图的时候，这时候就可以用提取方法这种重构手法。   下面是我学习这个重构手法的笔记：   提取方法看起来好像仅仅是将被提取方法中的一段代码，放到目标方法中。其实，当方法足够复杂的时候，提取方法也会变得复杂。当然，如果提取方法这种重构手法无法进行时，就可能需要选择其他
  • 为UILabel添加点击事件 bewithme UILabel
        默认情况下UILabel是不支持点击事件的，网上查了查居然没有一个是完整的答案，现在我提供一个完整的代码。   UILabel *l = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, listV.frame.size.width - 60, listV.frame.size.height)]
  • NoSQL数据库之Redis数据库管理(PHP-REDIS实例) bijian1013 redis数据库NoSQL
    一.redis.php <?php //实例化 $redis = new Redis(); //连接服务器 $redis->connect("localhost"); //授权 $redis->auth("lamplijie"); //相关操
  • SecureCRT使用备注 bingyingao secureCRT每页行数
    SecureCRT日志和卷屏行数设置 一、使用securecrt时，设置自动日志记录功能。 1、在C:\Program Files\SecureCRT\下新建一个文件夹(也就是你的CRT可执行文件的路径），命名为Logs； 2、点击Options -> Global Options -> Default Session -> Edite Default Sett
  • 【Scala九】Scala核心三：泛型 bit1129 scala
    泛型类 package spark.examples.scala.generics class GenericClass[K, V](val k: K, val v: V) { def print() { println(k + "," + v) } } object GenericClass { def main(args: Arr
  • 素数与音乐 bookjovi 素数数学haskell
        由于一直在看haskell，不可避免的接触到了很多数学知识，其中数论最多，如素数，斐波那契数列等，很多在学生时代无法理解的数学现在似乎也能领悟到那么一点。     闲暇之余，从图书馆找了<<The music of primes>>和<<世界数学通史>>读了几遍。其中素数的音乐这本书与软件界熟知的&l
  • Java-Collections Framework学习与总结-IdentityHashMap BrokenDreams Collections
            这篇总结一下java.util.IdentityHashMap。从类名上可以猜到，这个类本质应该还是一个散列表，只是前面有Identity修饰，是一种特殊的HashMap。         简单的说，IdentityHashMap和HashM
  • 读《研磨设计模式》-代码笔记-享元模式-Flyweight bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.Collection; import java.util.HashMap; import java.util.List; import java
  • PS人像润饰&调色教程集锦 cherishLC PS
      1、仿制图章沿轮廓润饰——柔化图像，凸显轮廓 http://www.howzhi.com/course/retouching/   新建一个透明图层，使用仿制图章不断Alt+鼠标左键选点，设置透明度为21%，大小为修饰区域的1/3左右（比如胳膊宽度的1/3），再沿纹理方向（比如胳膊方向）进行修饰。   所有修饰完成后，对该润饰图层添加噪声，噪声大小应该和
  • 更新多个字段的UPDATE语句 crabdave update
    更新多个字段的UPDATE语句                    update tableA a set (a.v1, a.v2, a.v3, a.v4) = --使用括号确定更新的字段范围
  • hive实例讲解实现in和not in子句 daizj hivenot inin
    本文转自：http://www.cnblogs.com/ggjucheng/archive/2013/01/03/2842855.html 当前hive不支持 in或not in 中包含查询子句的语法，所以只能通过left join实现。 假设有一个登陆表login(当天登陆记录,只有一个uid),和一个用户注册表regusers(当天注册用户，字段只有一个uid)，这两个表都包含
  • 一道24点的10+种非人类解法（2,3,10,10） dsjt 算法
    这是人类算24点的方法？！！！ 事件缘由：今天晚上突然看到一条24点状态，当时惊为天人，这NM叫人啊？以下是那条状态 朱明西 : 24点，算2 3 10 10，我LX炮狗等面对四张牌痛不欲生，结果跑跑同学扫了一眼说，算出来了，2的10次方减10的3次方。。我草这是人类的算24点啊。。 然后么。。。我就在深夜很得瑟的问室友求室友算 刚出完题，文哥的暴走之旅开始了 5秒后
  • 关于YII的菜单插件 CMenu和面包末breadcrumbs路径管理插件的一些使用问题 dcj3sjt126com yiiframework
    在使用 YIi的路径管理工具时，发现了一个问题。                    <?php         
  • 对象与关系之间的矛盾：“阻抗失配”效应[转] come_for_dream 对象
    概述   “阻抗失配”这一词组通常用来描述面向对象应用向传统的关系数据库（RDBMS）存放数据时所遇到的数据表述不一致问题。C++程序员已经被这个问题困扰了好多年，而现在的Java程序员和其它面向对象开发人员也对这个问题深感头痛。   “阻抗失配”产生的原因是因为对象模型与关系模型之间缺乏固有的亲合力。“阻抗失配”所带来的问题包括：类的层次关系必须绑定为关系模式（将对象
  • 学习编程那点事 gcq511120594 编程互联网
    一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！ 接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
  • Reverse Linked List II hcx2013 list
    Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1->2->3->4->5->NULL, m = 2 and n = 4, return 
  • Spring4.1新特性——页面自动化测试框架Spring MVC Test HtmlUnit简介 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • Hadoop集群工具distcp liyonghui160com
        1. 环境描述 两个集群：rock 和 stone rock无kerberos权限认证，stone有要求认证。 1. 从rock复制到stone，采用hdfs Hadoop distcp -i hdfs://rock-nn:8020/user/cxz/input hdfs://stone-nn:8020/user/cxz/运行在rock端，即源端问题：报版本
  • 一个备份MySQL数据库的简单Shell脚本 pda158 mysql脚本
    　　主脚本（用于备份mysql数据库）： 　　该Shell脚本可以自动备份 数据库。只要复制粘贴本脚本到文本编辑器中，输入数据库用户名、密码以及数据库名即可。我备份数据库使用的是mysqlump 命令。后面会对每行脚本命令进行说明。 　　 1. 分别建立目录“backup”和“oldbackup” 　　#mkdir /backup 　　#mkdir /oldbackup 　
  • 300个涵盖IT各方面的免费资源（中）——设计与编码篇 shoothao IT资源图标库图片库色彩板字体
    A. 免费的设计资源 Freebbble:来自于Dribbble的免费的高质量作品。 Dribbble:Dribbble上“免费”的搜索结果——这是巨大的宝藏。 Graphic Burger:每个像素点都做得很细的绝佳的设计资源。 Pixel Buddha:免费和优质资源的专业社区。 Premium Pixels:为那些有创意的人提供免费的素材。
  • thrift总结 - 跨语言服务开发 uule thrift
    官网 官网JAVA例子 thrift入门介绍 IBM-Apache Thrift - 可伸缩的跨语言服务开发框架 Thrift入门及Java实例演示 thrift的使用介绍   RPC    POM： <dependency> <groupId>org.apache.thrift</groupId>