天边月_
天边月_

【06】基础知识：React组件实例三大核心属性 - ref

一、 ref 了解

理解

组件内的标签可以定义 ref 属性来标识自己

使用

1、字符串形式的 ref

定义：
获取：this.refs.input

2、回调形式的 ref

定义： this.input = currentNode} />
定义简写： this.input = c} />
获取DOM元素：this.input

3、createRef创建 ref 容器

创建容器：myRef = React.createRef() 
绑定：
获取：this.myRef.current

二、案例

需求：自定义组件， 功能说明如下

点击按钮，提示第一个输入框中的值

当第2个输入框失去焦点时，提示这个输入框中的值

1、字符串形式的 ref （过时，不推荐，存在一些效率问题）

通过 ref 给标签打标识，通过组件实例的 refs 属性获取对应的 DOM 元素

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_字符串形式的reftitle>
head>
<body>
	
	<div id="test">div>

	
	<script type="text/javascript" src="../js/react.development.js">script>
	
	<script type="text/javascript" src="../js/react-dom.development.js">script>
	
	<script type="text/javascript" src="../js/babel.min.js">script>

	<script type="text/babel">
		class Demo extends React.Component {
			render() {
				return (
					<div>
						<input ref="input1" type="text" placeholder="点击按钮提示数据" />&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />
					</div>
				)
			}

			// 展示左侧输入框的数据
			showData = () => {
				const { input1 } = this.refs
				alert(input1.value)
			}

			// 展示右侧输入框数据
			showData2 = () => {
				alert(this.refs.input2.value)
			}
		}

		ReactDOM.render(<Demo a="1" b="2" />, document.getElementById('test'))
	script>
body>
html>

2、回调函数形式的ref

拿到当前 ref 所在的节点，React 调用回调函数，传入节点，挂载在实例自身，赋值给 input1

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_回调函数形式的reftitle>
head>
<body>
	
	<div id="test">div>

	
	<script type="text/javascript" src="../js/react.development.js">script>
	
	<script type="text/javascript" src="../js/react-dom.development.js">script>
	
	<script type="text/javascript" src="../js/babel.min.js">script>

	<script type="text/babel">
		class Demo extends React.Component {
			render() {
				return (
					<div>
						<input ref={currentNode => this.input1 = currentNode} type="text" placeholder="点击按钮提示数据" />&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />&nbsp;
					</div>
				)
			}

			// 展示左侧输入框的数据
			showData = () => {
				const { input1 } = this
				alert(input1.value)
			}
			// 展示右侧输入框的数据
			showData2 = () => {
				alert(this.input2.value)
			}
		}

		ReactDOM.render(<Demo />, document.getElementById('test'))
	script>
body>
html>

3、回调ref中回调执行次数的问题

如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会执行两次，第一次传入参数null，然后第二次会传入参数 DOM 元素。

这是因为在每次渲染是会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。

通过将 ref 的回调函数定成 class 的绑定函数的方式可以避免上述问题，但大多数情况下它是无关紧要的。

内联函数方式定义（推荐，写法简单）:

执行 1+n*2 次，初次渲染和更新时执行（第一次null，第二次DOM元素），不会产生什么问题。

绑定函数形式：

执行1次，初次渲染时执行。

jsx 中写注释：{/* … */}

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3_回调ref中回调执行次数的问题title>
head>
<body>
	
	<div id="test">div>

	
	<script type="text/javascript" src="../js/react.development.js">script>
	
	<script type="text/javascript" src="../js/react-dom.development.js">script>
	
	<script type="text/javascript" src="../js/babel.min.js">script>
	
	<script type="text/babel">
		class Demo extends React.Component {
			state = { isHot: false }
			render() {
				return (
					<div>
						{/*  { this.input = c; console.log('@', c) }} type="text" /> */}
						<input ref={this.saveInput} type="text" />
						<button onClick={this.showData}>点我提示内容</button><br />

						<h2>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h2>
						<button onClick={this.changeWeather}>点我切换天气</button>
					</div>
				)
			}

			showData = () => {
				alert(this.input.value)
			}

			changeWeather = () => {
				this.setState({
					isHot: !this.state.isHot
				})
			}

			saveInput = c => {
				this.input = c
				console.log('@', c) // 初次渲染时执行1次
			}
		}

		ReactDOM.render(<Demo />, document.getElementById('test'))
	script>
body>
html>

4、createRef的使用

React.createRef 调用后可以返回一个容器，该容器可以存储被 ref 所标识的节点，该容器是【专人专用】的。

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4_createRef的使用title>
head>
<body>
	
	<div id="test">div>

	
	<script type="text/javascript" src="../js/react.development.js">script>
	
	<script type="text/javascript" src="../js/react-dom.development.js">script>
	
	<script type="text/javascript" src="../js/babel.min.js">script>

	<script type="text/babel">
		class Demo extends React.Component {
			myRef = React.createRef()
			myRef2 = React.createRef()

			showData = () => {
				// console.log(this.myRef) // 通过current取DOM元素
				alert(this.myRef.current.value)
			}

			showData2 = () => {
				alert(this.myRef2.current.value)
			}

			render() {
				return (
					<div>
						<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据" />&nbsp;
					</div>
				)
			}
		}

		ReactDOM.render(<Demo />, document.getElementById('test'))
	script>
body>
html>

你可能感兴趣的:(React,react.js,javascript,前端)

  • QEMU-Manager：Mac上的QEMU图形化管理利器 苏承根
    QEMU-Manager：Mac上的QEMU图形化管理利器项目地址:https://gitcode.com/gh_mirrors/qe/QEMU-Manager在探索虚拟化的浩瀚世界时，找到一个既强大又易用的工具至关重要。今天，我们要向您隆重推荐QEMU-Manager——一款专为macOS设计的QEMU图形前端，由Swift语言精心打造。通过这篇文章，我们将深入挖掘QEMU-Manager的魅力
  • VB.NET基于WEB房地产评估系统(源代码+文档) csdn663648 .net前端microsoft
    资料介绍：--------------摘要--------------房地产评估系统是典型的信息管理系统(MIS),其开发主要包括后台数据库的建立和维护以及前端应用程序的开发两个方面。对于前者要求建立起数据一致性和完整性强、数据安全性好的库。而对于后者则要求应用程序功能完备,易使用等特点。本系统特有的房屋基本情况、专业评估人员、估价方法等。经过分析,我们使用MICROSOFT公司的VISUALBA
  • 通用评估系统（五）- 前端部分总体说明 一个水货程序员 项目实战前端fastapipythonvue
    通用评估系统（五）-前端部分总体说明相关链接Gitee地址通用评估系统（一）-介绍通用评估系统（二）-原型设计通用评估系统（三）-前端部分通用评估系统（四）-前端部分计算脚本编辑组件文档说明本节中说明前端总体显示相关信息。具体数据交互待后端开发时同步进行。目录结构实际显示效果全局搜索评估模型管理数据模型管理指标体系管理评估任务管理部分代码说明评估模型管理组件import{ref,h,compute
  • 【Three.js】JS 3D library（一个月进化史） Tiffany_Ho 前端Three.js
    #春节过完了，该继续投入学习了~作为一个平面开发者，想要增进更多的技能，掌握web3D开发#前置知识与技能1.JavaScript基础-掌握ES6+语法（类、模块、箭头函数、解构等）-熟悉异步编程（Promise、async/await）-了解事件循环和DOM操作2.HTML5和CSS3-熟悉Canvas和WebGL的基础概念-了解CSS3动画和变换（transform、transition）3.
  • ASP.NET MVC实现layui富文本编辑器应用 福伴
    先看看视图层在视图层,使用的是视图助手–HtmlHelper,代替我们网页中传统的表单标签元素,其中的m代表实体模型。通过视图助手，为我们生成id和name属性相同的textarea标签。备注：在ASP.NETMVC中，能提交表单数据的元素（各种类型的input标签，textarea等），其属性name的值于实体模型中的属性名相同时，传递到控制器中的实体模型或参数，会自动进行映射，方便前端到后台的
  • Dify rerank model is deprecated in knowledge base 人工智能
    这是可优化的细节。这里过时的提示倾向于说工作空间有一个默认的重新排名模型，但在执行一些前端逻辑后我们发现当前的重新排名模型是空的或未定义的，因此这个当前模型已过时。但这里默认模型实际上是一个所有字段都是空字符串的模型结构：{"provider":"","model":""}在这种情况下，缺省模型实际上是空的且无效。因此，在这里我们不会显示过时标志，而是更有可能告诉用户为工作区配置至少一个重排序模型
  • AI前端开发：重塑工作环境与企业文化 suibian5235 人工智能前端
    近年来，人工智能（AI）技术的飞速发展深刻地改变着各个行业，前端开发领域也不例外。随着AI写代码工具的涌现，AI前端开发模式逐渐兴起，并对传统的前端开发模式带来了巨大的冲击。本文将深入探讨AI前端开发如何影响我们的工作环境和企业文化，并对未来的发展趋势进行展望。……AI前端开发对工作环境的影响AI前端开发的出现，最直接的影响体现在工作效率的提升和工作压力的变化上。许多AI工具，例如ScriptEc
  • video 标签实现进度条不可拖动，并监听观看状态、超时触发挂机验证 牡丹城沉静的萝卜 html5前端javascript
    需求：用户观看视频时，实时监听观看状态，超过一定时长后，触发挂机验证，并禁止拖动滚动条快进查看。技术：主要是用html5的vidoe标签做的，用到了自带的暂停（pause）、播放（play）、监听（timeupdate）等事件html：javascript：data(){return{videoUrl:'',video:{currTime:'',maxTime:'',tipsTime:0,//出现
  • Vue.js 组件开发：构建高效、可重用的用户界面 m1chiru vue.js
    Vue.js组件开发：构建高效、可重用的用户界面Vue.js是一个流行的JavaScript框架，它致力于通过简单的API和高度响应的设计，帮助开发者构建高效、动态的前端应用。在Vue.js中，组件是构建用户界面的核心单元。它们使得应用的结构更加模块化、可维护且易于重用。在这篇博客中，我们将深入探讨Vue.js组件的开发方法，包括组件的基本概念、创建、传递数据、事件处理以及组件之间的通信等关键内容
  • useMemo 和 memo 的理解和区别 程序员小续 javascriptreact.js前端
    在React中，useMemo和memo都用于优化性能，减少不必要的渲染，但它们的使用场景不同。1.useMemo（记忆化计算）作用缓存计算结果，避免每次渲染都重新计算只有当依赖项发生变化时，才会重新计算✅适用场景计算量较大的值（避免重复计算）避免子组件不必要的渲染（与useCallback结合使用）代码示例importReact,{useState,useMemo}from"react";con
  • React源码解读 程序员小续 react.js前端前端框架node.jswebpackreactjavascript
    配置React源码本地调试环境本次环境构建采用了node版本为16、react-scripts版本号为3.4.4，源码下载地址react源码调试:react源码调试环境使用create-react-app脚手架创建项目npxcreate-react-appreact-test进入刚刚下载的目录，弹射create-react-app脚手架内部配置//在npmruneject之前，手动将项目packa
  • 低代码平台调研结果 大唐荣华 大前端javascript前端react.js低代码lowcode
    调研要求：项目活跃度技术栈：react低代码功能点和业务切合度低代码平台调研项目一、百度aims百度aims体验地址：https://aisuda.github.io/amis-editor-demo/#/edit/0优点：2019年开源最早，关注量最多的国内低代码开源，最近更新一周之内；使用时间较长，在百度内部经过实践考验；内置组件丰富；项目活跃度较高，github10.9kstar，gitee
  • 一些流行的拖拽化和低代码平台(汇总) 视频砖家 文章存档低代码低代码平台
    一些流行的拖拽化和低代码平台，这些工具可以帮助用户快速构建应用程序，无需深入的编程知识：1.开源拖拽库dragula：一款强大且兼容性极好的拖拽排序库，支持多种框架，如vanillaJavaScript、Angular、React等。Interact.js：提供拖拽、调整尺寸和多点触摸手势功能，适用于现代浏览器。react-dnd：React组件库，用于实现拖拽功能。Sortable：适用于多种框
  • Vue.js 组件开发：构建可重用且高效的 UI 块 沉浮yu大海 vue.jsui前端
    在现代前端开发中，Vue.js凭借其简洁的语法、强大的数据绑定能力和灵活的组件系统，成为许多开发者的首选框架。组件化开发是Vue.js的核心特性之一，它允许我们将大型应用拆分成多个独立、可复用的部分，从而提高代码的可维护性和扩展性。本文将带你深入了解Vue.js组件开发的基本概念和最佳实践，帮助你构建高效且可重用的UI组件。一、Vue.js组件基础在Vue.js中，组件是可复用的Vue实例，它们封
  • 前端构建工具——Webpack和Vite的主要区别 像素检测仪 前端前端webpack
    目录1.设计理念2.性能表现3.使用场景4.配置复杂度5.生态系统6.性能对比总结7.选择建议1.设计理念Webpack设计理念：Webpack是一个通用的模块打包工具，它将项目中的各种资源（如JavaScript、CSS、图片等）视为模块，并通过loader和plugin进行处理和打包。适用范围：适用于复杂项目，支持高度定制化，适合需要精细控制构建过程的场景。Vite设计理念：Vite（法语“快
  • 【Linux】【网络】Reactor模式 钟离墨笺 Linuxlinux网络java
    【Linux】【网络】Reactor模式1.Reactor模式：Reactor模式是一种事件驱动的设计模式，同步I/O通常用于设置Reactor模式主线程(I/0处理单元，下同)只负责监听文件描述上是否有事件发生，有的话就立即将该事件通知工作线程(逻辑单元，下同)。除此之外，主线程不做任何其他实质性的工作。读写数据，接受新的连接，以及处理客户请求均在工作线程中完成。使用同步I/O模型(以epoll
  • 学习笔记分享-快速掌握前端-html进阶（利用telnet发送json请求、利用telnet发送multipart请求） 2301_81243975 前端学习笔记
    前言图片上面的personal表示只有图片上面的一行语句是解释图片内容的、local表示这个图片所在标题下的所有语句都是解释图片内容的、global表示有多个标题下的所有语句都是解释图片内容的我是一名大二的学生，学了差不多一年java技术栈了，想记录一下自己对知识点的心得，目前还是个小白，期望大佬们可以指出我笔记中的不足之处、对知识点的认知错误、笔记结构的混乱等这些图片内容都是在观看黑马课程时的视
  • Webpack 基础入门 懒羊羊我小弟 前端工程化webpackrust前端es6node.js
    一、Webpack是什么Webpack是一款现代JavaScript应用程序的静态模块打包工具。在Web开发中，我们的项目会包含各种类型的文件，如JavaScript、CSS、图片等。Webpack可以将这些文件打包成一个或多个文件，以便在浏览器中高效加载。它就像是一个超级管家，把项目中的各种资源整理打包，让它们能更好地协同工作。二、为什么要使用Webpack代码拆分：可以将代码拆分成多个块，实现
  • 探索Node.js的原生插件新境界：使用`node-gyp` 洪新龙
    探索Node.js的原生插件新境界：使用node-gypnode-gypNode.jsnativeaddonbuildtool项目地址:https://gitcode.com/gh_mirrors/no/node-gyp在Node.js的生态系统中，将高性能的C/C++代码融入到JavaScript世界已经成为提升应用性能的关键手段。今天，我们要向大家隆重推荐一个不可或缺的工具——node-gyp
  • _05JavaScript The_era_achievs_hero 学习前端js
    第五次网课1.JavaScript的书写位置内部JS//页面弹出警示框alert('你好,js~')外部JS（最多）内联（行内）(以后vue框架会用这种模式）点我月薪过万2.JavaScript的注释与结束符单行注释符号：//ctrl+/多行注释符号：/**/shift+alt+a结束符用；表示结束可写可不写，要么全都写，要么全不写vue.js不加分号3.JavaScript的输入输出语法输出中文
  • dochub实践-资源参考 xiaohangwj
    项目开源仓库-gitee开源仓库-github教程文档依赖后端-beego开源仓库入门教程前端-Flat-UI开源仓库样式文档
  • 初识redux 未命名小孩 前端知识reactjstypescript
    Redux是一个用于管理JavaScript应用程序状态的可预测状态容器核心概念1.单一数据源整个应用的状态被存储在一个单一的对象树（store）中，这个对象树位于唯一的store里。创建store：conststore=createStore(reducer)2.状态是只读的唯一改变状态的方法是触发一个action，action是一个描述状态变化的纯对象。这保证了所有的状态变化都是可追踪的。一个
  • 题解 | #数组中出现次数超过一半的数字#哈希最简单的解法 2301_79125642 java
    前端要转测试大佬们，我是软件工程专业的，毕业后又培训了半年前端，现在公司要我转软件测试，初中级都可以，学着麻烦吗？大概得多长时间？转转java凉面一个数组基本有序应该采用哪种排序方法为什么要有线程池，线程太多会怎么样？？阻塞队列与普通队列的区别是？递归与非递归区别是什么？各自的优缺点？递归如何转为非递归题解|#数组中出现次数超过一半的数字#哈希最简单的解法classSolution{public:
  • 如果 main 里面引入 axios ，然后引入 router ，而 router 里面也引入 axios，会不会重复 清风细雨_林木木 技术点javascript前端开发语言
    技术点备忘如果main里面引入axios，然后引入router，而router里面也引入axios，会不会重复不会重复的。虽然你在main中引入了axios，并且在router中也引入了axios，但引入的axios是同一个模块。JavaScript的模块系统是基于单例模式的，意思是每个模块只会被加载一次，之后的引用都会指向同一个实例。具体来说：当你在main.js中引入axios，它会在模块加载
  • 空间数据存储格式GeoJSON guokanglun WebGIS开发前端
    GeoJSON是一种用于表示地理信息的开放标准格式，广泛用于存储和交换地理空间数据。它基于JSON格式，因此易于理解和处理，尤其适用于Web和JavaScript环境中的地图应用。GeoJSON支持多种地理信息类型，如点、线、面、坐标系统等。GeoJSON基本结构GeoJSON文件本质上是一个JSON对象，通常包含以下几个主要部分：type：指定GeoJSON数据的类型。features：一个包含
  • 详解 React 18 更新后的特性，一文即懂 FinBird 技术飞起来react.jsjavascript前端
    React18通过其改进的渲染系统带来了并发能力，并在此基础上构建了转换或自动批处理等性能增强特性。下面就看看到底有哪些值得关注的新特性。迭代更新内容总的来说，由于新的并发特性是渐进适配并按需启用的，React18中的重大更改仅限于几个简单的API更改，以及对React中多个行为的稳定性和一致性的一些改进，比较重要的一点是，不再支持IE浏览器。1、客户端渲染API带有createRoot()的ro
  • 如何在Python中进行JSON数据的序列化和反序列化？ 计算机学长大白 pythonpython开发语言
    在Python中，JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。Python内置的json模块提供了简单易用的方法来实现数据的序列化和反序列化。下面将详细介绍如何在Python中进行JSON数据的序列化和反序列化，并给出具体的示例。1.序列化序列化是指将Python对象转换为JSON格式的字符串。json模块提供
  • 关于前后端分离跨域问题——使用DeepSeek分析查错 潮落拾贝 解决跨域问题使用DeepSeek协助开发
    我前端使用antdesignvuepro框架，后端使用kratos框架开发。因为之前也解决过跨域问题，正常是在后端的http请求中加入中间件，设置跨域需要通过的字段即可，代码如下所示：funcNewHTTPServer(c*conf.Server,s*conf.Secret,rolesm*service.RolesManageService,tracertrace.TracerProvider,l
  • python股票分析系统部署操作过程及代码实现 大懒猫软件 python开发语言flaskplotlyapirestful
    部署一个股票分析系统涉及多个步骤，包括后端服务、前端界面和实时数据更新。以下是一个详细的部署过程，涵盖从代码编写到服务器部署的完整步骤。1.系统架构概述后端：使用Flask提供RESTfulAPI和数据处理服务。前端：使用PlotlyDash构建动态界面，实时显示股票价格走势。数据源：从金融数据API（如AlphaVantage、YahooFinance）获取实时数据。2.系统开发步骤2.1安装必
  • uniapp uni-icons组件自定义图标 xcLeigh uniapp技术点解析uni-app前端java
    文章目录1️⃣uni-icons组件1.1引用位置1.2FontEditor简介1.2FontEditor使用结束语优质源码分享uni-app是一个使用Vue.js(opensnewwindow)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。1️⃣uni-icons组件1.1引用位置1.2FontEditor简介Fo
  • JAVA中的Enum 周凡杨 javaenum枚举
    Enum是计算机编程语言中的一种数据类型---枚举类型。 在实际问题中，有些变量的取值被限定在一个有限的范围内。     例如，一个星期内只有七天 我们通常这样实现上面的定义： public String monday; public String tuesday; public String wensday; public String thursday
  • 赶集网mysql开发36条军规 Bill_chen mysql业务架构设计mysql调优mysql性能优化
    (一)核心军规 (1)不在数据库做运算    cpu计算务必移至业务层； (2)控制单表数据量    int型不超过1000w，含char则不超过500w；    合理分表；    限制单库表数量在300以内； (3)控制列数量    字段少而精，字段数建议在20以内
  • Shell test命令 daizj shell字符串test数字文件比较
    Shell test命令 Shell中的 test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真 实例演示： num1=100 num2=100if test $[num1]
  • XFire框架实现WebService(二) 周凡杨 javawebservice
       有了XFire框架实现WebService(一)，就可以继续开发WebService的简单应用。 Webservice的服务端(WEB工程)： 两个java bean类： Course.java    package cn.com.bean; public class Course {     private
  • 重绘之画图板 朱辉辉33 画图板
           上次博客讲的五子棋重绘比较简单，因为只要在重写系统重绘方法paint（）时加入棋盘和棋子的绘制。这次我想说说画图板的重绘。        画图板重绘难在需要重绘的类型很多，比如说里面有矩形，园，直线之类的，所以我们要想办法将里面的图形加入一个队列中，这样在重绘时就
  • Java的IO流 西蜀石兰 java
    刚学Java的IO流时，被各种inputStream流弄的很迷糊，看老罗视频时说想象成插在文件上的一根管道，当初听时觉得自己很明白，可到自己用时，有不知道怎么代码了。。。 每当遇到这种问题时，我习惯性的从头开始理逻辑，会问自己一些很简单的问题，把这些简单的问题想明白了，再看代码时才不会迷糊。 IO流作用是什么？ 答：实现对文件的读写，这里的文件是广义的； Java如何实现程序到文件
  • No matching PlatformTransactionManager bean found for qualifier 'add' - neither 林鹤霄
    java.lang.IllegalStateException: No matching PlatformTransactionManager bean found for qualifier 'add' - neither qualifier match nor bean name match!   网上找了好多的资料没能解决，后来发现：项目中使用的是xml配置的方式配置事务，但是
  • Row size too large (> 8126). Changing some columns to TEXT or BLOB aigo column
    原文：http://stackoverflow.com/questions/15585602/change-limit-for-mysql-row-size-too-large   异常信息： Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAM
  • JS 格式化时间 alxw4616 JavaScript
    /** * 格式化时间 2013/6/13 by 半仙 [email protected] * 需要 pad 函数 * 接收可用的时间值. * 返回替换时间占位符后的字符串 * * 时间占位符:年 Y 月 M 日 D 小时 h 分 m 秒 s 重复次数表示占位数 * 如 YYYY 4占4位 YY 占2位<p></p> * MM DD hh mm
  • 队列中数据的移除问题 百合不是茶 队列移除
         队列的移除一般都是使用的remov();都可以移除的,但是在昨天做线程移除的时候出现了点问题,没有将遍历出来的全部移除,  代码如下;      // package com.Thread0715.com; import java.util.ArrayList; public class Threa
  • Runnable接口使用实例 bijian1013 javathreadRunnablejava多线程
    Runnable接口 a.       该接口只有一个方法：public void run(); b.       实现该接口的类必须覆盖该run方法 c.       实现了Runnable接口的类并不具有任何天
  • oracle里的extend详解 bijian1013 oracle数据库extend
    扩展已知的数组空间，例： DECLARE TYPE CourseList IS TABLE OF VARCHAR2(10); courses CourseList; BEGIN -- 初始化数组元素，大小为3 courses := CourseList('Biol 4412 ', 'Psyc 3112 ', 'Anth 3001 '); --
  • 【httpclient】httpclient发送表单POST请求 bit1129 httpclient
    浏览器Form Post请求 浏览器可以通过提交表单的方式向服务器发起POST请求，这种形式的POST请求不同于一般的POST请求 1. 一般的POST请求，将请求数据放置于请求体中，服务器端以二进制流的方式读取数据，HttpServletRequest.getInputStream()。这种方式的请求可以处理任意数据形式的POST请求，比如请求数据是字符串或者是二进制数据 2. Form
  • 【Hive十三】Hive读写Avro格式的数据 bit1129 hive
     1. 原始数据 hive> select * from word; OK 1 MSN 10 QQ 100 Gtalk 1000 Skype      2. 创建avro格式的数据表   hive> CREATE TABLE avro_table(age INT, name STRING)STORE
  • nginx+lua+redis自动识别封解禁频繁访问IP ronin47
    在站点遇到攻击且无明显攻击特征，造成站点访问慢，nginx不断返回502等错误时，可利用nginx+lua+redis实现在指定的时间段 内，若单IP的请求量达到指定的数量后对该IP进行封禁，nginx返回403禁止访问。利用redis的expire命令设置封禁IP的过期时间达到在 指定的封禁时间后实行自动解封的目的。 一、安装环境： CentOS x64 release 6.4(Fin
  • java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历 bylijinnan java
    import java.util.LinkedList; import java.util.List; import java.util.Stack; public class BinTreeTraverse { //private int[] array={ 1, 2, 3, 4, 5, 6, 7, 8, 9 }; private int[] array={ 10,6,
  • Spring源码学习-XML 配置方式的IoC容器启动过程分析 bylijinnan javaspringIOC
    以FileSystemXmlApplicationContext为例，把Spring IoC容器的初始化流程走一遍： ApplicationContext context = new FileSystemXmlApplicationContext ("C:/Users/ZARA/workspace/HelloSpring/src/Beans.xml&q
  • [科研与项目]民营企业请慎重参与军事科技工程 comsci 企业
         军事科研工程和项目 并非要用最先进，最时髦的技术，而是要做到“万无一失”    而民营科技企业在搞科技创新工程的时候，往往考虑的是技术的先进性，而对先进技术带来的风险考虑得不够，在今天提倡军民融合发展的大环境下，这种“万无一失”和“时髦性”的矛盾会日益凸显。。。。。。所以请大家在参与任何重大的军事和政府项目之前，对
  • spring 定时器-两种方式 cuityang springquartz定时器
    方式一： 间隔一定时间 运行 <bean id="updateSessionIdTask" class="com.yang.iprms.common.UpdateSessionTask" autowire="byName" /> <bean id="updateSessionIdSchedule
  • 简述一下关于BroadView站点的相关设计 damoqiongqiu view
    终于弄上线了，累趴，戳这里http://www.broadview.com.cn   简述一下相关的技术点   前端：jQuery+BootStrap3.2+HandleBars，全站Ajax（貌似对SEO的影响很大啊！怎么破？），用Grunt对全部JS做了压缩处理，对部分JS和CSS做了合并（模块间存在很多依赖，全部合并比较繁琐，待完善）。   后端：U
  • 运维 PHP问题汇总 dcj3sjt126com windows2003
    1、Dede(织梦)发表文章时,内容自动添加关键字显示空白页 解决方法： 后台>系统>系统基本参数>核心设置>关键字替换（是/否），这里选择“是”。 后台>系统>系统基本参数>其他选项>自动提取关键字，这里选择“是”。   2、解决PHP168超级管理员上传图片提示你的空间不足 网站是用PHP168做的，反映使用管理员在后台无法
  • mac 下 安装php扩展 - mcrypt dcj3sjt126com PHP
    MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展，具体如下： 下载并解压libmcrypt-2.5.8.tar.gz。 在终端执行如下命令： tar zxvf libmcrypt-2.5.8.tar.gz cd libmcrypt-2.5.8/ ./configure --disable-posix-threads --
  • MongoDB更新文档 [四] eksliang mongodbMongodb更新文档
    MongoDB更新文档 转载请出自出处：http://eksliang.iteye.com/blog/2174104 MongoDB对文档的CURD，前面的博客简单介绍了，但是对文档更新篇幅比较大，所以这里单独拿出来。 语法结构如下： db.collection.update( criteria, objNew, upsert, multi) 参数含义 参数   
  • Linux下的解压，移除，复制，查看tomcat命令 y806839048 tomcat
    重复myeclipse生成webservice有问题删除以前的，干净 1、先切换到：cd usr/local/tomcat5/logs 2、tail -f catalina.out 3、这样运行时就可以实时查看运行日志了 Ctrl+c 是退出tail命令。 有问题不明的先注掉   cp /opt/tomcat-6.0.44/webapps/g
  • Spring之使用事务缘由(3-XML实现) ihuning spring
      用事务通知声明式地管理事务   事务管理是一种横切关注点。为了在 Spring 2.x 中启用声明式事务管理，可以通过 tx Schema 中定义的 <tx:advice> 元素声明事务通知，为此必须事先将这个 Schema 定义添加到 <beans> 根元素中去。声明了事务通知后，就需要将它与切入点关联起来。由于事务通知是在 <aop:
  • GCD使用经验与技巧浅谈 啸笑天 GC
    前言 GCD(Grand Central Dispatch)可以说是Mac、iOS开发中的一大“利器”，本文就总结一些有关使用GCD的经验与技巧。 dispatch_once_t必须是全局或static变量 这一条算是“老生常谈”了，但我认为还是有必要强调一次，毕竟非全局或非static的dispatch_once_t变量在使用时会导致非常不好排查的bug，正确的如下： 1
  • linux（Ubuntu）下常用命令备忘录1 macroli linux工作ubuntu
    在使用下面的命令是可以通过--help来获取更多的信息1,查询当前目录文件列表：ls ls命令默认状态下将按首字母升序列出你当前文件夹下面的所有内容，但这样直接运行所得到的信息也是比较少的，通常它可以结合以下这些参数运行以查询更多的信息：  ls / 显示/.下的所有文件和目录  ls -l 给出文件或者文件夹的详细信息 ls -a 显示所有文件，包括隐藏文
  • nodejs同步操作mysql qiaolevip 学习永无止境每天进步一点点mysqlnodejs
    // db-util.js var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit : 10, host: 'localhost', user: 'root', password: '', database: 'test', port: 3306 });
  • 一起学Hive系列文章 superlxw1234 hiveHive入门
      [一起学Hive]系列文章 目录贴，入门Hive，持续更新中。   [一起学Hive]之一—Hive概述，Hive是什么 [一起学Hive]之二—Hive函数大全-完整版 [一起学Hive]之三—Hive中的数据库(Database)和表(Table) [一起学Hive]之四-Hive的安装配置 [一起学Hive]之五-Hive的视图和分区 [一起学Hive
  • Spring开发利器：Spring Tool Suite 3.7.0 发布 wiselyman spring
    Spring Tool Suite(简称STS)是基于Eclipse，专门针对Spring开发者提供大量的便捷功能的优秀开发工具。   在3.7.0版本主要做了如下的更新：   将eclipse版本更新至Eclipse Mars 4.5 GA Spring Boot(JavaEE开发的颠覆者集大成者，推荐大家学习)的配置语言YAML编辑器的支持(包含自动提示，
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他