不会叫的狼
不会叫的狼

vue进阶-elementPlus入门

Element Plus官网

Element Plus 基于 Vue 3，面向设计师和开发者的组件库。减少开发者关注css，重心关注业务逻辑。

1. 入门

1.1 安装

npm install element-plus --save

1.2 快速开始

1、main.js 引入并 use element-plus

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

2、组件内使用 element-plus 组件

element-plus 组件：
vue进阶-elementPlus入门_第1张图片

图标：

vue进阶-elementPlus入门_第2张图片

<template>
  this is About！ <br/>
  <span>count属性：{{ count }}</span> <br/> 
  <button @click="add"> add </button>  <br/> 
  <!-- element-plus组件 -->
  <el-button type="success" :icon="Check" @click="add" >Success</el-button>
</template>

<script>
//导入 Check 图标
import {Check} from '@element-plus/icons-vue'

export default {
    data(){
        return {
            count: 0,
            //使用 Check，通过 v-bind:icon 绑定
            Check
        }
    },
    methods: {
        add() {
            this.count++;
        }
    }
};
</script>

vue进阶-elementPlus入门_第3张图片

2. 组合式 API

查看 element-plus 组件代码，发现如下代码：

<script lang="ts" setup>
import {
  Check,
  ...
} from '@element-plus/icons-vue'
</script>

什么是 setup ？从而引出 Vue 3 重要的特性：组合式 API。查看 Vue 3-API 风格

Vue 的组件可以按两种不同的风格书写：选项式 API 和 组合式 API。

选项式 API (Options API)

我们前面介绍的组件均是选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要。

使用组件的选项（data、computed、methods、watch）组织逻辑在大多数情况下都有效。然而，当我们的组件变得更大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解，尤其对于那些一开始就没有编写这些组件的人来说。

选项会导致单个逻辑碎片化，使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地 “跳转” 相关代码的选项块。

组合式 API (Composition API)

Vue3 使用组合式 API 的地方为 setup。在 setup 中，我们可以按逻辑关注点对代码进行分组，然后提取逻辑片段并与其他组件共享代码。

新的 setup 组件选项在创建组件之前执行，一旦props被解析，并充当合成API的入口点。

下面是使用了组合式 API 与

你可能感兴趣的:(Vue,vue.js)

  • Vue.js中实现动态加载Vuex模块 CyberOI vue.js前端javascriptjs
    在Vue.js开发中，Vuex是一个非常强大的状态管理库，用于管理全局的状态和数据流。有时候，我们可能需要在运行时动态地加载Vuex模块，以便根据需要添加或移除特定的状态和功能。本文将介绍如何使用相应的代码示例来实现动态加载Vuex模块。创建基本的Vue项目首先，我们需要创建一个基本的Vue项目，以便进行后续的操作。你可以使用VueCLI来创建项目，或者手动搭建一个简单的Vue项目。安装Vuex在
  • 基于vue-advanced-chat组件自义定聊天（socket.io+vue2） 键. 前端开发小技巧vue.js前端javascriptwebsocket
    通过上一篇文章https://blog.csdn.net/beekim/article/details/134176752?spm=1001.2014.3001.5501，我们已经在vue-advanced-chat中替换掉原有的firebase，用socket.io简单的实现了聊天功能。现在需要自义定该组件，改造成我们想要的样子：先将比较重要的几块提取出来1.重要模块1.1socket.io的封
  • Electron+Vue3+ElectronForge整合 - 打包时整合 -分步打包 NorthCastle ElectronVue3electronvue3electronforge打包vue3打包成桌面程序
    说明本文介绍一下Electron+Vue3的打包整合的基本操作。实现的效果是：1、一个正常的Vue3项目；2、整合加入Electron框架：开发时Electron加载的是开发的vue项目；3、完成打包时整合：3.1先完成vue3项目的正常打包；3.2再完成electron项目的打包。步骤一：创建vue3项目常规操作，不再赘述。#创建项目npmcreatevue@latest#进入到项目目录cd#安
  • Vue3在img标签中绑定数据模型中的url图片无法显示问题 fengfeng N 前端javascript开发语言
    背景介绍constteachers=[{name:'马云JackMa',company:'阿里巴巴alibaba.com',description:'马云，男，汉族，中共党员，1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市谷来镇。',imageUrl:'@/assets/teacher/1.jpg'},{name:'马化腾Pony',company:'腾讯tencent.com',desc
  • 基于SpringBoot+Vue+uniapp的4S店客户管理系统(源码+lw+部署文档+讲解等) 百奇的代码小屋 #微信小程序毕设springbootvue.jsuni-app小程序
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言博主介绍：✌全网粉丝15W+,CSDN特邀作者、211毕业、高级全栈开发程序员、大厂多年工作经验、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注
  • 豆包MarsCode 蛇年编程大作战-2025蛇年花样贪吃蛇 BLACK594 豆包MarsCode人工智能vue.js
    贪吃蛇游戏是一款经典的休闲游戏，它的核心机制简单且充满趣味。在这个即将到来蛇年，我决定用豆包MarsCode实现他，唤起大家对经典游戏的回忆，为这个特别的年份增添一份别样的乐趣。完整代码及在线体验在线体验-豆包MarsCode花样贪吃蛇游戏素材来自于4399游戏"贪吃蛇竞技场"代码采用Vue实现，豆包MarsCode辅助开发
  • 25.1.13 前端 Vue组件 十、插槽slot best_virtuoso 前端前端vue.jsjavascript
    我们已经了解到了组件能够接受任意类型的js值作为props，但组件要如何接收模板内容(html信息)呢？在某些场景中，可能想要为子组件传递一些模板片段（div，a标签等），让子组件在它们的组件中渲染这些片段例：插槽标题插槽内容importSlotsBasefrom"./components/SlotsBase.vue";exportdefault{components:{SlotsBase}}——
  • 【愚公系列】《循序渐进Vue.js 3.x前端开发实践》027-组件的高级配置和嵌套 愚公搬代码 愚公系列-书籍专栏vue.js前端前端框架
    标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等
  • uniapp - [全端兼容] 实现精美Editor富文本编辑器功能，uniApp全平台兼容的富文本插件组件用户可上传图片及对接服务器存储文件等，手机移动端H5网页富文本/小程序富文本/App富文本！ 王二红 +UniAppuni-app富文本使用富文本编辑器插入图片图像uni-app微信小程序富文本uniapp网页h5端富文本uniap安卓苹果app富文本富文本上传图片及服务器保存
    前言网上的教程乱七八糟且兼容性太差，本文提供优质示例。在uni-app全平台兼容（H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue）开发中，详解引入使用富文本编辑器及图片上传显示等功能，用户可上传图片显示和服务器保存回显效果（插入图片），uniApp各平台都兼容的富文本editor插件，自定义富文本按钮功能及自由排版样式布局，uniapp富文本组件插件用于发布文章/发布资讯公告/
  • 小程序webview打开小程序原生页面_详解如何探测小程序返回到webview页面 weixin_39905624
    在公司项目中经常会遇到一个场景,尝试过各种不同的方法,最后想到了一种很技术上简单且可行的方法.经常被QA同学反应同一类型的问题项目是小程序(wepy),部分页面使用webview(vue).经常会遇见一个场景:当小程序navigateTo到一些页面对用户的"收藏状态","身材细节"做了修改后,用户点击返回按钮回到上一个页面,收藏的状态或是身材细节没有改变.那是当然的,作为一个小程序中的webvie
  • uni-app组件引入方法（easycom自动化组件） 约妲己吃火锅 uni-app开发搬砖日常
    uniapp官方与2020年02月23更新了2.6.0版本，支持2.5.5版本以后，调整内容有：1.对uniapp插件做出更改；2.新增了easycom项目模板（自动化组件）。那我本期简单给大家介绍easycom是什么？如何使用？。官方给出：传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。只要组件安装在项目的components目录下，并符合compon
  • 前端请求gzip，响应里却没有压缩返回 a212121212121
    前端请求gzip，响应里却没有压缩返回前后端分离的框架，前端vue后端的springboot都开启了gzip。前端请求Accept-Encoding:gzip,deflate后端却没有响应。数据没有压缩。试过了好几个浏览器都没有用。后来以为是yml格式的问题，也没有效果。有经验的能告诉我是怎么回事吗?yml添加的代码.（两种格式）compression:enabled:truemin-respon
  • 【Uniapp-Vue3】request各种不同类型的参数详解 永久旅途 Uniappuni-app前端
    一、参数携带我们调用该接口的时候需要传入type参数。第一种路径名称?参数名1=参数值1&参数名2=参数值2第二种uni.request({url:"请求路径",data:{参数名:参数值}})二、请求方式常用的有get，post和put三种，默认是get请求。uni.request({url:"请求路径",method:"方式"})三、请求头配置uni.request({url:"请求路径",h
  • uniapp(vue) 使用i18n国际化翻译,复制即可使用！一看就懂 黑云压城After uni-appvue.js前端
    一、在项目的文件目录里cmd执行下载命令安装依赖执行:npminstallvue-i18n@next二、执行命令下载完成后，进入项目检查一下是否存在。三、在咱们项目里面创建一个lang目录，目录的名字自己随便起，我这边以lang为演示。zh.js://zh.jsexportdefault{language:{//这里面放所有的中文替换词text:'TikTokShop（也称TikTok电商）是创新
  • 使用Vue3来实现一个倒计时器以及倒计时任务 记得开心一点嘛 JavaWeb前端开发技术栈vue.jselementuijavascriptvueHtml
    本内容使用Vue3，以及element-plus辅助开发。首先展示倒计时器的功能：手动设置倒计时器的倒计时时间开始倒计时按钮暂停倒计时按钮重新开始倒计时按钮其次展示倒计时任务管理界面功能：创建倒计时任务选择任务并进行倒计时删除任务目录一.倒计时器：1.html：2.script：（1）状态变量：（2）格式化显示时间：（3）初始化倒计时：（4）开始按钮startCountdown->启动倒计时器：（
  • uniapp --- 配置文件 记得开心一点嘛 UniAppuni-app前端typescript
    目录一.pages.json文件：1.组件自动导入规则（easycom）：2.页面配置（pages）：3.全局样式（globalStyle）：4.底部TabBar配置（tabBar）：二.manifest.json文件：1.应用基本信息：2.App-Plus特有配置：3.QuickApp特有配置：4.小程序特有配置：5.UniStatistics配置：6.vueVersion配置：三.App.vu
  • html2canvas导出pdf模糊,vue实现pdf导出，解决生成canvas模糊等问题 轮王寺宫
    1、我们要添加两个模块第一个.将页面html转换成图片npminstall--savehtml2canvas第二个.将图片生成pdfnpminstalljspdf--save2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/utils/htmlToPdf')//导出页面为PDF格式importhtml2Canvasfrom'html2canvas'imp
  • 探索前端的未来：深度使用 SolidJS 构建高性能用户界面 桂月二二 前端ui
    SolidJS是近年来前端开发领域的一颗新星，它结合了React的思维模式和Vue的性能优势，提供了一种高效且轻量的框架解决方案。本文将带你深入了解SolidJS的实际使用，并探索如何利用其核心特性构建现代化的高性能应用。为什么选择SolidJS？相比于其他框架，SolidJS有以下独特优势：超高性能：基于fine-grainedreactivity（细粒度反应性）机制，仅更新必要的DOM节点。零
  • 探索Bunshi：轻量级状态管理的新选择 虞旋律
    探索Bunshi：轻量级状态管理的新选择bunshiMoleculepatternforjotai,valtio,zustand,nanostores,xstate,reactandvue项目地址:https://gitcode.com/gh_mirrors/bu/bunshi项目介绍Bunshi（原名jotai-molecules）是一款轻量级、快速且无依赖的状态管理库，体积仅为3KB。它允许开
  • Vue组件开发-使用 html2canvas 和 jspdf 库实现PDF文件导出 设置页面大小及方向 LCG元 前端vue.jspdf前端
    在Vue项目中实现导出PDF文件、调整文件页面大小和页面方向的功能，使用html2canvas将HTML内容转换为图片，再使用jspdf把图片添加到PDF文件中。以下是详细的实现步骤和代码示例：步骤1：安装依赖首先，在项目中安装html2canvas和jspdf：npminstallhtml2canvasjspdf步骤2：创建Vue组件以下是一个完整的Vue组件示例，包含导出PDF、调整页面大小和
  • Vue.js 如何塑造现代网络体验 清风孤客 vue.js网络前端
    Vue.js已迅速成为JavaScript框架中的热门之选，以其简洁的设计、灵活性和强大功能而闻名。全球的开发者被Vue.js所吸引，是因为它能极为轻松地构建动态且引人入胜的用户界面。但Vue.js究竟有何用途，又为何如此受欢迎呢？本文将探讨Vue.js及其在各个领域的关键应用。我们将展示开发者如何利用它构建从交互式网络应用、单页应用（SPA）到复杂电子商务网站等各种项目。我们还将讨论其核心特性、
  • vue源码理解——什么是依赖 露露在前端 vue.js前端javascripttypescript学习架构
    vue将数据变的可观测了以后，我们就知道了数据什么时候进行了改变，当数据改变的时候就去更新视图，但是去更新哪个视图呢，如果改变了一个数据，就去更新整个视图，明显这样是不合理的。最正确的方法就是——哪个视图用了这个变化的数据，哪个视图就进行更新。哪个视图用到了这个数据，也可以解读为哪个视图依赖了这个数据。那么，谁用了这个数据谁就是依赖。1、收集依赖在vue中，为每个数据创建了一个数组来存放依赖。谁用
  • vue组件添加全局方法_vue组件挂载到全局方法 缪之初 vue组件添加全局方法
    在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像element那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。以bootstrap-vue中的Alert组件为例，分一下几步
  • vue组件挂载到全局方法 w1366352655
    vue组件挂载到全局方法在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像element那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。以bootstrap-vue中的Ale
  • 深入解析Vue3响应式系统：从Proxy实现到依赖收集的核心原理 荆州克莱 面试题汇总与解析springcloudspringbootspring技术css3
    深入解析Vue3响应式系统：从Proxy实现到依赖收集的核心原理响应式系统的基本原理作为一个热门的JavaScript框架，Vue在3.x版本中引入了基于Proxy的响应式系统。这个系统的核心思想是利用Proxy对象拦截对数据的访问和修改，从而实现数据的自动更新。当我们改变一个被代理的对象时，相关的视图会自动更新，无需手动干预。这一创新的设计让Vue3在性能和开发体验上都有了大幅度的改进。如何实现
  • Vue前端项目构建 踏 浪 vuevuevue-clivue脚手架
    目录1、安装Vue脚手架1.1安装node.js1.2安装npm1.3安装Vue脚手架2、通过Vue脚手架创建项目2.1基于3.x版本的脚手架创建vue项目，这里使用图形界面方式创建。3、启动项目4、项目初始化文件结构5、Vue脚手架自定义配置6、安装Element-UI插件7、使用Element-UI
  • 如何设计一个合理的vue前端项目架构 叫我阿柒啊 vue.js前端架构
    在前端开发中，我学习的是vue的开发路线。在最初的学习中，除了学习理论知识，还有就是看一些开源项目学习如何将vue应用到实际开发中。合理的项目架构设计是项目成功的基础之一。一个好的架构不仅可以提升代码的可读性和可维护性，还能提高开发效率，并降低项目的长期维护成本。所以，本文将以构建项目为起点，探讨如何设计关于vue的前端架构。1.项目初始化1.1创建项目vue不是在IDE中创建项目，而是使用工具在
  • vue3：mitt 米粒宝的爸爸 vue3vue.js前端javascript
    在Vue3中使用mitt进行事件总线的实现非常简单。mitt是一个轻量级的事件库，适用于Vue项目中的组件间通信。实现自定义组件直接相互传值，父到子，子到子，子对子，子对孙，想怎么传就怎么传。和android的Eventbus一个玩法1.下载mittnpmimittmac下载，如果权限不够，加sudo2.创建个公共的utils类-emitter.ts//引入mittimportmittfrom'm
  • 2025年01月25日Github流行趋势 油泼辣子多加 GitHub每日趋势github
    项目名称：it-tools项目地址url：https://github.com/CorentinTh/it-tools项目语言：Vue历史star数：25298今日star数：212项目维护者：CorentinTh,apps/renovate,cgoIT,sharevb,marvin-j97项目简介：为开发者提供一系列方便的在线工具，具有优秀的用户体验。项目名称：Reactive-Resume项目
  • Vue 82 ，process.env 管理 Vue 项目的环境变量Vue项目中环境变量的配置及调用 北城笑笑 Vue前端vue.js
    目录前言在构建Vue应用时，管理配置是开发中的一个重要部分。不同的环境，如开发、测试和生产，往往需要不同的配置，例如API、基础URL、第三方服务的密钥等。这时使用环境变量，可以帮助我们更好地管理这些配置。这里分享记录，如何在Vue项目中使用process.env来管理环境变量。一.介绍二.作用三.使用四.配置变量1.在.env.development中：2.在.env.test中：3.在.env
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class