波波烤鸭
波波烤鸭

Vue教程(动画案例-列表动画)

  前面给大家介绍了动画的基本使用，本文我们来实现一个动画的简单案例，效果如下

Vue教程(动画案例-列表动画)_第1张图片

Vue动画案例

1.基础页面

  最基础的页面如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="./lib/vue-2.4.0.js">script>
head>
<body>
    <div id="app">

    div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {
                
            }
        })
    script>
body>
html>

2.添加数据

  添加一个基本的列表数据，此处使用到 v-for 指令来循环取数据

Vue教程(动画案例-列表动画)_第2张图片

效果:

Vue教程(动画案例-列表动画)_第3张图片

3.设置样式

  给 li 标签设置对应的样式。

<style>
    li{
        border: 1px dashed red;
        margin-top: 5px;
        line-height: 40px;
        padding-left: 10px;
    }
style>

效果

Vue教程(动画案例-列表动画)_第4张图片

4.添加背景动画

  给列表数据添加一个鼠标滑过的 hover 动画效果

<style>
    li{
        border: 1px dashed red;
        margin-top: 5px;
        line-height: 40px;
        padding-left: 10px;
    }
	/*鼠标滑过的动画*/
    li:hover{
        background-color: aquamarine;
        transition: all 0.8s ease;
    }
style>

效果

Vue教程(动画案例-列表动画)_第5张图片

5.添加数据

  增加一个给列表添加数据功能，之前已经实现过了，代码如下

Vue教程(动画案例-列表动画)_第6张图片

Vue教程(动画案例-列表动画)_第7张图片

效果

Vue教程(动画案例-列表动画)_第8张图片

6.添加数据动画

  上面的效果功能是实现了，但是效果比较生硬，我们可以加上动画效果，要使用动画之前我们使用的是 transition 标签，但是现在是在 v-for 中循环遍历的多个 li 标签中 我们需要使用 transition-group 标签来包裹.

Vue教程(动画案例-列表动画)_第9张图片

动画代码

Vue教程(动画案例-列表动画)_第10张图片

效果
Vue教程(动画案例-列表动画)_第11张图片

有了一个列滑动入场的效果~

7.删除数据

  当我们点击某行数据的时候将这行移除掉，先给 li 绑定一个点击事件，然后del方法中移除当前行

Vue教程(动画案例-列表动画)_第12张图片

效果

Vue教程(动画案例-列表动画)_第13张图片

如上，移除有些停顿，不是太好，我们可以加如下两个动画来实现。

Vue教程(动画案例-列表动画)_第14张图片
效果

Vue教程(动画案例-列表动画)_第15张图片
移除一个列的时候，下面的列有往上飘的效果~

8.appear和tag属性

  我们在刷新页面，第一次进来的时候，列表没有入场动画，这时我们可以添加一个 appear属性来设置

Vue教程(动画案例-列表动画)_第16张图片

最后 transition-group中还有一个 tag属性，用来设置包裹的标签，先来看没有tag的效果

Vue教程(动画案例-列表动画)_第17张图片

我们使用tag属性来试试

Vue教程(动画案例-列表动画)_第18张图片

Vue教程(动画案例-列表动画)_第19张图片

这样就没有 span 中间的 标签了。

最后完成的代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="./lib/vue-2.4.0.js">script>

    <style>
        li{
            border: 1px dashed red;
            margin-top: 5px;
            line-height: 40px;
            padding-left: 10px;
        }
        /*鼠标滑过的动画*/
        li:hover{
            background-color: aquamarine;
            transition: all 0.8s ease;
        }

        /**动画初始和结束的时候*/
        .v-enter
        ,.v-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }

        /**入场和离场中*/
        .v-enter-active,
        .v-leave-active{
            transition: all 0.8s ease;
        }

        /* .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
        .v-move {
            transition: all 0.6s ease;
        }
        .v-leave-active{
            position: absolute;
        }
    style>
head>
<body>
    <div id="app">
        <div>
            <label>
                Id:
                <input type="text" v-model="id">
            label>

            <label>
                Name:
                <input type="text" v-model="name">
            label>

            <input type="button" value="添加" @click="add">
        div>

        
            <transition-group appear tag="ul">
                <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                    {{item.id}} ---- {{item.name}}
                li>
            transition-group>
         
    div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                id:'',
                name:'',
                list:[
                    {id:1,name:"java"},
                    {id:2,name:"Vue"},
                    {id:3,name:"Php"},
                    {id:4,name:"c#"}
                ]
            },
            methods: {
                add(){
                    this.list.push({id:this.id,name:this.name})
                    this.id=this.name=''
                },
                del(i){
                    this.list.splice(i,1)
                }
            }
        })
    script>
body>
html>

你可能感兴趣的:(Vue资料)

  • 在electron中实现一个桌面悬浮球
    概要在electron+vue3搭建的应用中实现了一个桌面悬浮球/mini窗口的功能，支持任意拖拽、丝滑的菜单折叠展开动画效果。在实现过程中需要关注的一些点：1、管理悬浮球窗口创建以及配置：需要一个透明的窗口来承载视图。2、解决electron拖拽和点击事件冲突（核心）：因为使用-webkit-app-region:drag样式的方式会导致拖拽和点击事件冲突，所以需要通过渲染进程和主进程的通信来解
  • 【Python】已解决：ModuleNotFoundError: No module named ‘sklearn‘ 屿小夏 pythonsklearn人工智能
    个人简介：某不知名博主，致力于全栈领域的优质博客分享|用最优质的内容带来最舒适的阅读体验！文末获取免费IT学习资料！文末获取更多信息精彩专栏推荐订阅收藏专栏系列直达链接相关介绍书籍分享点我跳转书籍作为获取知识的重要途径，对于IT从业者来说更是不可或缺的资源。不定期更新IT图书，并在评论区抽取随机粉丝，书籍免费包邮到家AI前沿点我跳转探讨人工智能技术领域的最新发展和创新，涵盖机器学习、深度学习、自然
  • vant组件库的按需导入导出 ordinary90 VUE前端全栈开发vue.js前端
    vant是一个基于Vue的移动端UI组件库，它提供了丰富的组件和样式，可以帮助我们快速构建移动端应用。在使用vant组件库时，可以通过按需导入导出的方式来减小打包体积，提高应用的性能。按需导入导出的原理是根据需要只加载使用到的组件和样式，而不是将整个组件库都打包到应用中。下面是一个使用vant组件库实现按需导入导出的详细解析和代码实例。安装vant组件库首先，在命令行中使用npm或者yarn安装v
  • uniapp 微信小程序，底部安全距离适配，针对安卓iPhone不同型号手机 沐雨MUYU_ uni-app微信小程序android
    1、全局定义底部安全距离//前提：项目中安装了vuex或其他状态管理工具//文件位置src/store/index.tsimport{createStore}from'vuex';exportdefaultcreateStore({state(){return{safeBottom:''//底部安全距离};},mutations:{...},actions:{...},getters:{safeB
  • Vue+ArcGIS API for JS实现地图邮编分区以及定位的区域高亮 小伙伴123456 arcgisjavascript开发语言vue.js前端
    前言最近公司开发国际物流系统，如果使用国内地图，类似百度，腾讯，高德地图，那么国外的地理信息不会那么全，而且获取邮编api只对国内生效，所以考虑使用esri公司的arcgis地图，但是这个地图在国内社区并不完善，踩过很多坑，在网上也找不到相关的解决办法。在此分享给需要做类似需求的小伙伴，希望能帮到大家。官网：https://www.esri.com/zh-cn/arcgis/products/de
  • 从小白到高手：人工智能学习中的挑战与突破 博雅智信 人工智能深度学习机器学习python大语言模型
    引言：人工智能学习之路充满挑战学习过程中常见的问题与困境环境安装与配置问题简单报错反复调试，时间浪费大学习进度慢，难以找到合适的方向网上资料过多，选择困难导师催进度，任务压力大不敢多问：与同事、师兄师姐的尴尬理论与实践脱节，缺乏实战经验专注力不足，容易被干扰找一个师傅带着的好处高效解决问题，避免走弯路个性化学习路线与系统化知识框架实战经验的传授与导师的成长指导1.引言：人工智能学习之路充满挑战人工
  • Mac pnpm安装 是二牙 前端vue.js
    安装pnpm的时候一定要把npm更新到最新版不然pnpm下载不成功。（更新npm）：sudonpminstall-gnpm(安装pnpm:)sudonpminstall-gpnpm检验安装是否成功：pnpm--version项目内安装依赖：pnpminstall/运行项目：pnpmdev最近在开发vue3的项目后续应该会更新一些关于v3的笔记以往都是开发的v2现在开始学习v3如果写的不对的地方可以
  • Vue.js组件开发-如何实现表头搜索 LCG元 前端vue.js
    在Vue.js组件开发中，实现表头搜索通常涉及在表格组件的表头添加输入框，并让用户能够输入搜索关键字来过滤表格数据。以下是一个使用ElementUI的el-table组件实现表头搜索的示例：一、准备阶段‌确保ElementUI已安装‌：确保Vue项目中已经安装了ElementUI，并且已经在项目中引入。‌准备表格数据‌：在Vue组件中准备一份表格数据，通常是一个数组。二、实现表头搜索‌定义搜索关键
  • 大数据毕业设计—基于python+Django自然灾害频发地区情况数据分析系统 qq_1406299528 python计算机毕业设计python大数据课程设计
    一、项目技术开发语言：Pythonpython框架：Django软件版本：python3.7/python3.8数据库：mysql5.7或更高版本数据库工具：Navicat11开发软件：PyCharm/vscode前端框架:vue.js二、项目内容和项目介绍  1.项目内容  1.开发语言：该系统采用Python作为开发语言，Python具有优雅的语法和动态类型，以及解释型语言的本质，使其成为许多
  • vue 纯前端导出 Excel 陈大大小 1024程序员节
    方法一：1、安装"file-saver"npmi-Sfile-saverxlsx2、引入在需要导出功能的.vue文件中引入importFileSaverfrom"file-saver";importXLSXfrom"xlsx";3、简单示例（复制即可食用）：导出excel文件importFileSaverfrom"file-saver";importXLSXfrom"xlsx";exportdef
  • 【2025最新计算机毕业设计】基于SSM的旅游与自然保护平台【提供源码+答辩PPT+文档+项目部署】 万码堂源码 计算机毕设精品实战案例实战项目源码课程设计vue.js前端计算机毕业设计毕设项目springboot
    作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌主要内容：Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能与大数据、单片机开发、物联网设计与开发设计、简历模板、学习资料、面试题库、技术互助、就业指导等。业务范围：免费功能设计、开题报告、任务书
  • 【源码+文档】基于SpringBoot+Vue旅游网站系统【提供源码+答辩PPT+参考文档+项目部署】 万码堂源码 实战项目源码计算机毕设精品实战案例springbootvue.js旅游
    作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌主要内容：Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能与大数据、单片机开发、物联网设计与开发设计、简历模板、学习资料、面试题库、技术互助、就业指导等。业务范围：免费功能设计、开题报告、任务书
  • Oracle 学习全攻略 来恩1003 Oracleoracle学习数据库
    Oracle学习资料Oracle学习资料Oracle学习资料在当今信息技术蓬勃发展的时代，数据库管理系统起着举足轻重的作用，而Oracle作为行业内的领军者，以其强大、稳定、高效的特性，广泛应用于金融、电信、政府等诸多关键领域。若你渴望踏入数据库领域的高阶殿堂，开启Oracle的学习之旅无疑是明智之举。以下将为你详细阐述Oracle的学习路径。一、入门奠基：环境搭建与初步认知了解Oracle体系架
  • 避坑指南：Element UI在Vue2项目开发中的那些坑与解 前端没钱 前端基础与进阶ui
    文章目录一、引言二、ElementUI初体验之坑（一）安装后不生效解决方案：（二）组件引入报错解决方案：三、表单组件的那些“小脾气”（一）重置表单后无法输入（二）表单自动校验“抽风”解决方案：四、日期组件的“时差”问题（一）DatePicker日期难改解决方案：（二）datetime类型报错解决方案：（三）IE11日期显示“失踪”解决方案：五、表格组件的“疑难杂症”（一）el-table列自适应“
  • pyspark 中删除hdfs的文件夹 TDengine （老段） 大数据sparkhadoophdfsmapreduce
    在pyspark中保存rdd的内存到文件的时候，会遇到文件夹已经存在而失败，所以如果文件夹已经存在，需要先删除。搜索了下资料，发现pyspark并没有提供直接管理hdfs文件系统的功能。寻找到一个删除的方法，是通过调用shell命令hadoopfs-rm-f来删除，这个方法感觉不怎么好，所以继续找。后来通过查找hadoophdfs的源代码发现hdfs是通过java的包org.appache.had
  • 解决window.location.href参数太长问题 l_瓶中精灵 HTTPjava
    window.location.href参数超出限制问题解决需求：vue导出传参给后端导出excel导出数据原来写法：exportData(){letparams=`?data1=${this.form.data1}&bdid=${this.form.bdid}&cdid=${this.form.cdid}&imei=${this.form.imei}&softVer=${this.form.so
  • Vue中常见设计模式的应用~ Warm vue.js设计模式前端
    Vue是基于什么模式？表示既然是Vue中常见的设计模式，首当其冲就先聊聊MVVM模式啦一、mvvm模式Vue.js是一个基于MVVM设计模式的前端框架。它将前端中的UI视图与底层数据和业务逻辑分离开来，使得UI视图与数据和业务逻辑之间不存在耦合性，可以独立编写和测试。MVVM三个组成部分Model(模型):存放业务数据和对数据的操作等View(视图):用户界面，负责呈现UI，并向ViewModel
  • 前端框架: Vue3组件设计模式 苹果酱0567 面试题汇总与解析课程设计springbootvue.jsjavamysql
    前端框架:Vue3组件设计模式在前端开发中，Vue框架一直受到开发者的喜爱。它不仅易于上手，而且功能丰富，尤其是在Vue3中引入了CompositionAPI和Teleport等新特性，进一步提升了开发体验。在Vue3中，组件设计模式是一个非常重要的话题，良好的组件设计模式可以提高代码的可维护性和可扩展性，本文将深入探讨Vue3组件设计模式的相关内容。一、组件化开发模式组件化概念及优势在前端开发中
  • 【Rust】——不安全Rust Y小夜 Rust（官方文档重点总结）rust开发语言后端
    博主现有专栏：C51单片机（STC89C516），c语言，c++，离散数学，算法设计与分析，数据结构，Python，Java基础，MySQL，linux，基于HTML5的网页设计及应用，Rust（官方文档重点总结），jQuery，前端vue.js，Javaweb开发，Python机器学习等主页链接：Y小夜-CSDN博客目录不安全的超能力解引用裸指针调用不安全函数或方法创建不安全代码的安全抽象使用e
  • Vue2实现上传图片到阿里云的OSS对象存储 秋意钟 javascript
    在Vue2项目中，将图片上传到阿里云的OSS（对象存储）需要几个步骤，包括配置阿里云OSS、获取上传凭证、在前端进行上传操作等。以下是一个详细的实现步骤：1.配置阿里云OSS首先，你需要在阿里云OSS上创建一个存储桶（Bucket），并配置好相关的权限。2.后端获取上传凭证由于直接暴露OSS的AccessKeyID和AccessKeySecret到前端是不安全的，所以需要通过后端服务器来获取一个临
  • PenGymy论文阅读 亚里士多没有德775 论文阅读
    这里发现idea被人家先发了，没办法，资料收集的不够全面，现在来学习一下这个项目这篇论文的贡献如下：总的来说，他的主要工作是构建逼真的仿真环境，然后根据这个仿真环境生成真实的靶场，使得这个智能体能够在这个真实的环境去互动。下面来逐渐解析他的工作，我尽量详细一点1、背景和动机这种项目是在网络攻防中，攻防双方攻击者处于暗面，防御者处于明面，这时候受到攻击后应急处理多少会造成损失，那么要是可以提前预测攻
  • Vue 3 中的 `setup()` 函数有什么作用？它在组件生命周期中的位置是什么？ chenNorth。 vuevue.jsjavascript前端
    在Vue3中，setup()函数是CompositionAPI的入口点，它在组件实例创建之前被调用，并且是响应式系统的上下文。setup()函数的作用和位置如下：setup()函数的作用响应式状态：在setup()函数中声明的变量会自动被转换为响应式状态，这些状态可以在模板中直接使用。生命周期钩子：setup()函数内部可以访问组件的生命周期钩子，如onMounted、onUpdated和onUn
  • Vue3+Echarts 绘制省会地图 OPQ迷路的羔羊 echarts前端javascriptvue.js
    Vue3+Echarts绘制省会地图需求：绘制XX省会地图（背景颜色，边框颜色都可自定义，有相应代码注释）鼠标点击XX市区，区域变红色，再次点击，恢复默认蓝色鼠标移入XX市区，区域变橘色，鼠标移开，恢复默认蓝色效果图如下：在这里插入图片描述实现：1.前往https://datav.aliyun.com/portal/school/atlas/area_selector2.输入具体省份，然后复制JS
  • vue3 + echarts5.4.3 实现3D省份地图【动态icon】 和生活比个Y 3d
    vue3+echarts5.4.3实现3D省份地图【动态icon】vue3项目+echarts5.4.3实现效果：1.下载echarts插件2.按需引入echarts插件3.复制省份json文件1.[查找省份/全国的json文件的地址：](https://datav.aliyun.com/portal/school/atlas/area_selector)2.当前页面中引入刚才复制的json文件4
  • Pinia的使用（VUE3+VITE） itwlz vue.js前端javascript
    官方地址https://pinia.vuejs.org/zh/安装​​​​​​​npminstallpinia挂载插件import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'createApp(App).use(createPinia()).mount('#app')定义Store(选项式或组合
  • Vue3使用wow.js动画库 itwlz javascript开发语言ecmascript
    1.下载依赖npminstallwow.js--save2.导入importWOWfrom"wow.js";onMounted(()=>{wowjsFn();});constwowjsFn=()=>{letwow=newWOW({boxClass:"wow",//animatedelementcssclass(defaultiswow)animateClass:"animated",//anima
  • HCI_Inquiry 打个工而已 AndroidBluetoothjavapythonhtml
    目录Android11发起搜索流程BluedroidHCI_Inquiry处理搜索结果处理Android11发起搜索流程BluedroidHCI_Inquiry处理搜索结果处理参考资料：Inquiryisusedtodetectandcollectnearbydevices。Inquiry用于发现搜集附近的蓝牙设备大概意思就是:1.主动发现设备的会sendinquiryrequest2.待被发现的
  • 【星闪开发连载】WS63E开发板开箱与程序烧录 神一样的老师 星闪技术物联网windows
    前几天一直在外地，今天才有机会拿到开发板。此次星闪体验官活动，每人两款板子，一款是星闪派物联网开发套件，另一款是单独一个核心板。物联网套件的配置和润和的智能家居配置差不多，看上去连底板都是一样的，只有核心板不同。套件和核心板配置正好组成一队星闪通信设备。目前基于星闪的手机还很少见，海思也没有开放手机侧的资料，所以暂时只能做星闪设备之间的测试。给开发板加电之后，发现并没有像家居套件那样有演示程序，所
  • 搭建设计一个校园交友系统源码的过程，售后一对一+圈子全开源码教程+全面搭建指南 前端小程序php
    搭建设计一个校园交友系统源码是一个复杂但有趣的过程，以下是一个全面指南，旨在帮助你从头开始搭建一个功能齐全、安全可靠的校园交友系统。一、明确目标与需求目标用户：明确你的目标用户群体，如大学生、研究生等，了解他们的交友需求和偏好。功能需求：根据目标用户，列出所需功能，如用户注册与登录、个人资料展示、匹配推荐、聊天功能、动态发布等。二、技术选型后端技术：可以选择PHP等成熟的后端开发语言。PHP结合T
  • 2025 第一弹：3 分钟带你使用 Cursor 生成新年祝福 前端ai开发
    2025第一弹：3分钟带你使用Cursor生成新年祝福项目效果项目简介Cursor是一个由OpenAI开发的AI写作助手，它可以帮助你快速生成文本、代码、图像等。这一次我们使用Cursor来生成一个新年祝福的动画，并使用Vue3和Vite4来实现。要求是不能编写任何代码，只使用Cursor来生成代码。下载cursor下载地址安装cursor双击安装即可。然后会询问你是否要导入vscode相关的插件
  • 深入浅出Java Annotation(元注解和自定义注解） Josh_Persistence Java Annotation元注解自定义注解
    一、基本概述     　　 Annontation是Java5开始引入的新特征。中文名称一般叫注解。它提供了一种安全的类似注释的机制，用来将任何的信息或元数据（metadata）与程序元素（类、方法、成员变量等）进行关联。   　　更通俗的意思是为程序的元素（类、方法、成员变量）加上更直观更明了的说明，这些说明信息是与程序的业务逻辑无关，并且是供指定的工具或
  • mysql优化特定类型的查询 annan211 java工作mysql
    本节所介绍的查询优化的技巧都是和特定版本相关的，所以对于未来mysql的版本未必适用。 1 优化count查询 对于count这个函数的网上的大部分资料都是错误的或者是理解的都是一知半解的。在做优化之前我们先来看看 真正的count()函数的作用到底是什么。 count()是一个特殊的函数，有两种非常不同的作用，他可以统计某个列值的数量，也可以统计行数。 在统
  • MAC下安装多版本JDK和切换几种方式 棋子chessman jdk
    环境： MAC AIR,OS X 10.10,64位   历史： 过去 Mac 上的 Java 都是由 Apple 自己提供，只支持到 Java 6，并且OS X 10.7 开始系统并不自带（而是可选安装）（原自带的是1.6）。 后来 Apple 加入 OpenJDK 继续支持 Java 6，而 Java 7 将由 Oracle 负责提供。   在终端中输入jav
  • javaScript （1） Array_06 JavaScriptjava浏览器
    JavaScript 1、运算符 　　运算符就是完成操作的一系列符号，它有七类： 　　赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位
  • 国内顶级代码分享网站 袁潇含 javajdkoracle.netPHP
           现在国内很多开源网站感觉都是为了利益而做的                  当然利益是肯定的,否则谁也不会免费的去做网站      &
  • Elasticsearch、MongoDB和Hadoop比较 随意而生 mongodbhadoop搜索引擎
      IT界在过去几年中出现了一个有趣的现象。很多新的技术出现并立即拥抱了“大数据”。稍微老一点的技术也会将大数据添进自己的特性，避免落大部队太远，我们看到了不同技术之间的边际的模糊化。假如你有诸如Elasticsearch或者Solr这样的搜索引擎，它们存储着JSON文档，MongoDB存着JSON文档，或者一堆JSON文档存放在一个Hadoop集群的HDFS中。你可以使用这三种配
  • mac os 系统科研软件总结 张亚雄 mac os
    1.1 Microsoft Office for Mac 2011      大客户版，自行搜索。      1.2 Latex （MacTex）:      系统环境：https://tug.org/mactex/     &nb
  • Maven实战（四）生命周期 AdyZhang maven
    1. 三套生命周期     Maven拥有三套相互独立的生命周期，它们分别为clean，default和site。 每个生命周期包含一些阶段，这些阶段是有顺序的，并且后面的阶段依赖于前面的阶段，用户和Maven最直接的交互方式就是调用这些生命周期阶段。 以clean生命周期为例，它包含的阶段有pre-clean, clean 和 post
  • Linux下Jenkins迁移 aijuans Jenkins
    1. 将Jenkins程序目录copy过去      源程序在/export/data/tomcatRoot/ofctest-jenkins.jd.com下面            tar -cvzf jenkins.tar.gz ofctest-jenkins.jd.com &
  • request.getInputStream()只能获取一次的问题 ayaoxinchao requestInputstream
    问题：在使用HTTP协议实现应用间接口通信时，服务端读取客户端请求过来的数据，会用到request.getInputStream()，第一次读取的时候可以读取到数据，但是接下来的读取操作都读取不到数据   原因： 1. 一个InputStream对象在被读取完成后，将无法被再次读取，始终返回-1； 2. InputStream并没有实现reset方法（可以重
  • 数据库SQL优化大总结之 百万级数据库优化方案 BigBird2012 SQL优化
    网上关于SQL优化的教程很多，但是比较杂乱。近日有空整理了一下，写出来跟大家分享一下，其中有错误和不足的地方，还请大家纠正补充。 这篇文章我花费了大量的时间查找资料、修改、排版，希望大家阅读之后，感觉好的话推荐给更多的人，让更多的人看到、纠正以及补充。 1.对查询进行优化，要尽量避免全表扫描，首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where
  • jsonObject的使用 bijian1013 javajson
            在项目中难免会用java处理json格式的数据，因此封装了一个JSONUtil工具类。 JSONUtil.java package com.bijian.json.study; import java.util.ArrayList; import java.util.Date; import java.util.HashMap;
  • [Zookeeper学习笔记之六]Zookeeper源代码分析之Zookeeper.WatchRegistration bit1129 zookeeper
    Zookeeper类是Zookeeper提供给用户访问Zookeeper service的主要API，它包含了如下几个内部类     首先分析它的内部类，从WatchRegistration开始，为指定的znode path注册一个Watcher，   /** * Register a watcher for a particular p
  • 【Scala十三】Scala核心七：部分应用函数 bit1129 scala
    何为部分应用函数？ Partially applied function: A function that’s used in an expression and that misses some of its arguments.For instance, if function f has type Int => Int => Int, then f and f(1) are p
  • Tomcat Error listenerStart 终极大法 ronin47 tomcat
    Tomcat报的错太含糊了，什么错都没报出来，只提示了Error listenerStart。为了调试，我们要获得更详细的日志。可以在WEB-INF/classes目录下新建一个文件叫logging.properties，内容如下 Java代码  handlers = org.apache.juli.FileHandler, java.util.logging.ConsoleHa
  • 不用加减符号实现加减法 BrokenDreams 实现
            今天有群友发了一个问题，要求不用加减符号(包括负号)来实现加减法。         分析一下，先看最简单的情况，假设1+1，按二进制算的话结果是10，可以看到从右往左的第一位变为0，第二位由于进位变为1。    
  • 读《研磨设计模式》-代码笔记-状态模式-State bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* 当一个对象的内在状态改变时允许改变其行为，这个对象看起来像是改变了其类 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况 把状态的判断逻辑转移到表示不同状态的一系列类中，可以把复杂的判断逻辑简化 如果在
  • CUDA程序block和thread超出硬件允许值时的异常 cherishLC CUDA
    调用CUDA的核函数时指定block 和 thread大小，该大小可以是dim3类型的（三维数组），只用一维时可以是usigned int型的。 以下程序验证了当block或thread大小超出硬件允许值时会产生异常！！！GPU根本不会执行运算！！！ 所以验证结果的正确性很重要！！！ 在VS中创建CUDA项目会有一个模板，里面有更详细的状态验证。 以下程序在K5000GPU上跑的。
  • 诡异的超长时间GC问题定位 chenchao051 jvmcmsGChbaseswap
    HBase的GC策略采用PawNew+CMS, 这是大众化的配置，ParNew经常会出现停顿时间特别长的情况，有时候甚至长到令人发指的地步，例如请看如下日志： 2012-10-17T05:54:54.293+0800: 739594.224: [GC 739606.508: [ParNew: 996800K->110720K(996800K), 178.8826900 secs] 3700
  • maven环境快速搭建 daizj 安装mavne环境配置
    一 下载maven 安装maven之前，要先安装jdk及配置JAVA_HOME环境变量。这个安装和配置java环境不用多说。 maven下载地址：http://maven.apache.org/download.html，目前最新的是这个apache-maven-3.2.5-bin.zip，然后解压在任意位置，最好地址中不要带中文字符，这个做java 的都知道，地址中出现中文会出现很多
  • PHP网站安全，避免PHP网站受到攻击的方法 dcj3sjt126com PHP
    对于PHP网站安全主要存在这样几种攻击方式:1、命令注入(Command Injection)2、eval注入(Eval Injection)3、客户端脚本攻击(Script Insertion)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、SQL注入攻击(SQL injection)6、跨网站请求伪造攻击(Cross Site Request Forgerie
  • yii中给CGridView设置默认的排序根据时间倒序的方法 dcj3sjt126com GridView
    public function searchWithRelated() {         $criteria = new CDbCriteria;         $criteria->together = true; //without th
  • Java集合对象和数组对象的转换 dyy_gusi java集合
        在开发中，我们经常需要将集合对象（List，Set）转换为数组对象，或者将数组对象转换为集合对象。Java提供了相互转换的工具，但是我们使用的时候需要注意，不能乱用滥用。 1、数组对象转换为集合对象     最暴力的方式是new一个集合对象，然后遍历数组，依次将数组中的元素放入到新的集合中，但是这样做显然过
  • nginx同一主机部署多个应用 geeksun nginx
    近日有一需求，需要在一台主机上用nginx部署2个php应用，分别是wordpress和wiki，探索了半天，终于部署好了，下面把过程记录下来。 1.   在nginx下创建vhosts目录，用以放置vhost文件。 mkdir vhosts   2.   修改nginx.conf的配置， 在http节点增加下面内容设置，用来包含vhosts里的配置文件 #
  • ubuntu添加admin权限的用户账号 hongtoushizi ubuntuuseradd
    ubuntu创建账号的方式通常用到两种：useradd 和adduser . 本人尝试了useradd方法，步骤如下： 1:useradd    使用useradd时，如果后面不加任何参数的话，如：sudo useradd sysadm 创建出来的用户将是默认的三无用户：无home directory ,无密码,无系统shell。 顾应该如下操作：  
  • 第五章 常用Lua开发库2-JSON库、编码转换、字符串处理 jinnianshilongnian nginxlua
      JSON库   在进行数据传输时JSON格式目前应用广泛，因此从Lua对象与JSON字符串之间相互转换是一个非常常见的功能；目前Lua也有几个JSON库，本人用过cjson、dkjson。其中cjson的语法严格（比如unicode \u0020\u7eaf），要求符合规范否则会解析失败（如\u002），而dkjson相对宽松，当然也可以通过修改cjson的源码来完成
  • Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 yaerfeng1989 timerquartz定时器
    原创整理不易，转载请注明出处：Spring定时器配置的两种实现方式OpenSymphony Quartz和java Timer详解 代码下载地址：http://www.zuidaima.com/share/1772648445103104.htm 有两种流行Spring定时器配置：Java的Timer类和OpenSymphony的Quartz。 1.Java Timer定时 首先继承jav
  • Linux下df与du两个命令的差别？ pda158 linux
    　一、df显示文件系统的使用情况，与du比較，就是更全盘化。 　　最经常使用的就是 df -T，显示文件系统的使用情况并显示文件系统的类型。 　　举比例如以下： 　　[root@localhost ~]# df -T 　　Filesystem                   Type &n
  • [转]SQLite的工具类 ---- 通过反射把Cursor封装到VO对象 ctfzh VOandroidsqlite反射Cursor
    在写DAO层时，觉得从Cursor里一个一个的取出字段值再装到VO(值对象)里太麻烦了，就写了一个工具类，用到了反射，可以把查询记录的值装到对应的VO里，也可以生成该VO的List。   使用时需要注意： 考虑到Android的性能问题，VO没有使用Setter和Getter，而是直接用public的属性。 表中的字段名需要和VO的属性名一样，要是不一样就得在查询的SQL中
  • 该学习笔记用到的Employee表 vipbooks oraclesql工作
        这是我在学习Oracle是用到的Employee表，在该笔记中用到的就是这张表，大家可以用它来学习和练习。 drop table Employee; -- 员工信息表 create table Employee( -- 员工编号 EmpNo number(3) primary key, -- 姓
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他