哈哈n
哈哈n

【vue学习】动态组件和异步组件

动态组件

【vue学习】动态组件和异步组件_第1张图片

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：

【vue学习】动态组件和异步组件_第2张图片

is

上述内容可以通过 Vue 的 元素加一个特殊的 is 特性来实现

<component v-bind:is="currentTabComponent">component>

在上述示例中，currentTabComponent 可以包括

  • 已注册组件的名字，或
  • 一个组件的选项对象
  • component中绑定参数的方式和普通组件一样
    【vue学习】动态组件和异步组件_第3张图片
  • 解析 DOM 模板时的注意事项：有些 HTML 元素，诸如
      、
        、 和 和 ，只能出现在其它某些特定的元素内部。这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：
        <table>
  <blog-post-row>blog-post-row>
table>
        • 这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：
        <table>
  <tr is="blog-post-row">tr>
table>

        keep-alive

        当组件切换时，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题
        【vue学习】动态组件和异步组件_第4张图片
        上图中，你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，不会继续展示之前选择的文章。因为你每次切换时，Vue 都创建了一个新的 currentTabComponent 实例。

        重新创建动态组件的行为通常非常有用，但该案例中，我们更希望标签的组件实例能够被缓存下来。我们可以用 元素将其动态组件包裹起来。
        【vue学习】动态组件和异步组件_第5张图片
        【vue学习】动态组件和异步组件_第6张图片

        注意这个 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

        组件中的name选项有什么作用？

        根据上面的注意事项，延伸出该问题，下面来看个网上的回答：

        vue组件name的作用小结

        1. 当项目使用keep-alive时，可搭配组件name进行缓存过滤
        //假设我们有个组件命名为detail,
//其中dom加载完毕后我们在钩子函数mounted中进行数据加载
export default {
  name:'Detail'
}，
mounted(){
  this.getInfo();
}，
methods:{
  getInfo(){
     axios.get('/xx/detail.json',{
       params:{
        id:this.$route.params.id 
       }
     }).then(this.getInfoSucc)
   }
 }
 /**
 在App.vue中使用了keep-alive导致
 我们第二次进入的时候页面不会重新请求，
 即不会再次触发mounted函数。

 有两个解决方案：
 一个增加activated()函数,每次进入新页面的时候再获取一次数据。
 还有个方案就是在keep-alive中增加一个过滤exclude：
 */
 <div id="app"> 
 <keep-alive exclude="Detail">
  <router-view/>
 </keep-alive>
</div>
        1. DOM做递归组件时
        <div>
    <div v-for="(item,index) of list" :key="index">
      <div>
        <span class="item-title-icon">span>
        {{item.title}}
      div>
      <div v-if="item.children" >
      
        <detail-list :list="item.children">detail-list>
      div>
    div>
 div>
<script>
export default {
  name:'DetailList',//递归组件是指组件自身调用自身
  props:{
    list:Array
    /**
    const list = [{
     "title": "A",
     "children": [
     {"title": "A-A","children": [{"title": "A-A-A"}]},
     {"title": "A-B"}]
    }, {
     "title": "B"
    }, {
     "title": "C"
    }, {
     "title": "D"
    }]
    */
  }
}
script>

        迭代结果如下：
        【vue学习】动态组件和异步组件_第7张图片
        3. 当你用vue-tools时：该调试工具里显示的组见名称是由vue中组件name决定的

        异步组件

        在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。

        为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。

        Vue 只有在这个组件需要被渲染时才会触发该工厂函数，且会把结果缓存起来供未来重渲染

        知识点

        • 如你所见，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。

        • 这里的 setTimeout 是为了演示用的，如何获取组件取决于你自己。一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用：
          【vue学习】动态组件和异步组件_第8张图片

        • 你也可以在工厂函数中返回一个 Promise，所以把 webpack 2 和 ES2015 语法加在一起，我们可以写成这样：
          【vue学习】动态组件和异步组件_第9张图片

        组件之间的循环引用

        • 当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数：
          【vue学习】动态组件和异步组件_第10张图片

        • vue处理边界情况中有一种情况是：组件之间的循环引用，这里就涉及到了异步加载组件问题：
          【vue学习】动态组件和异步组件_第11张图片

        • 当你仔细观察的时候，你会发现这些组件在渲染树中互为对方的后代和祖先——一个悖论！
          当通过 Vue.component 全局注册组件的时候，这个悖论会被自动解开。
          如果你是这样做的，那么你可以跳过这里。

        • 然而，如果你使用一个模块系统依赖/导入组件，例如通过 webpack 或 Browserify，你会遇到一个错误：
          【vue学习】动态组件和异步组件_第12张图片

        • 这里我们可以异步import（具体的我们可以在处理边界情况一节中具体再学习）
          【vue学习】动态组件和异步组件_第13张图片

        处理加载状态

        2.3.0+ 新增：这块的具体应用后续再更新…

        这里的异步组件工厂函数也可以返回一个如下格式的对象：

        const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

        注意如果你希望在 Vue Router 的路由组件中使用上述语法的话，你必须使用 Vue Router 2.4.0+ 版本。

        Vue异步组件处理路由组件加载状态的解决方案

        • 在大型单页面应用中，处于对性能的考虑和首屏加载速度的要求，我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块，并且只在需要的时候才从服务器加载一个模块。
        • 但是这种解决方案也有其问题，当网络环境较差时，我们去首次访问某个路由模块，由于加载该模块的资源需要一定的时间，那么该段时间内，我们的应用就会处于无响应的状态，用户体验极差。
        • 【解决方案】这种情况，我们一方面可以缩小路由模块代码的体积，静态资源使用cdn存储等方式缩短加载时间，另一方面则可以路由组件上使用异步组件，显示loading和error等状态，使用户能够得到清晰明了的操作反馈。
        • 【具体实现】声明方法，基于Vue动态组件工厂函数来返回一个Promise对象
          【vue学习】动态组件和异步组件_第14张图片
          调用：
          【vue学习】动态组件和异步组件_第15张图片

        你可能感兴趣的:(VUE学习)

        • Javaweb学习之Vue模板语法（三） 不要数手指啦 vue.js学习前端
          目录学习资料前情回顾本期介绍（vue模板语法）文本插值Vue的Attribute绑定使用JavaScript表达式综合实例代码：学习资料Vue.js-渐进式JavaScript框架|Vue.js(vuejs.org)前情回顾项目的创建大家可以看这篇文章Vue学习之项目的创建-CSDN博客本期介绍（vue模板语法）首先，找到我们编写代码的地方找到自己项目的src文件夹，打开之后点击component
        • 如何学习前端炙手可热的Vue？Vue学习路线图详解！ 真·skysys 大前端和跨平台技术vue
          总结vue文档从0.11、0.12、1.0、2.x到3.0beta本文章长期更新，持续维护限于博主水平，如有错漏还望各位不吝赐教文章内容可能有争议，欢迎大家理性交流与探讨What’svue：Vue.js是什么？定位设计目标（初心）：通过尽可能简单的API提供响应数据绑定和可组合视图组件灵感来源（创意）：AngularJS，KnockoutJS，Ractive.js和Rivets.js。在简单性和功
        • Vue学习之路04----响应式基础 利刃之灵 #Vue基础vue.js前端
          响应式基础ref()（基本类型的响应式数据）在组合式API中，推荐使用ref()函数来声明响应式状态，ref能定义基本类型的，也能定义对象类型的：import{ref}from'vue'letcount=ref(0)ref()接收参数，并将其包裹在一个带有.value属性的ref对象中返回，在模版中则不需要：{{count}}按钮1按钮2import{ref}from"vue";exportdef
        • vue学习笔记-自用 陌上烟雨寒 vuevuevue.jsjavascriptcsshtml
          /*eslint-disableno-new*/newVue({el:'#app',router,components:{App},template:''})el:'#app',绑定根视图components:{App},加载组件template:''使用组件模板语法插值1.文本数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值：Message:{{msg}}2.纯HTML
        • VUE学习之------Vue.nextTick 夜跑者 VUE学习
          在项目中最近遇到一种情况：在一个页面中点击快捷键会调出另一个页面，这个页面一个元素是输入框，一个元素是button。刚调出这个页面的时候焦点要在输入框中，这样用户就可以直接进行输入了。从这个需求来看，点击快捷键的时候用v-show=true来进行显示，然后把焦点focus到输入框上，但一直给输入框加不上焦点。之前从网上搜索了一下用Vue.nextTick来进行上焦点，但没有成功。另外同事最后也是用
        • Vue学习之---nextTick 鸡吃丸子 vue.js学习前端
          前言：目前来说，nextTick我们遇到的比较少，至少对我来说是这样的，但是有一些聪明的小朋友早早就注意到这个知识点了。nextTick是前端开发（尤其是Vue生态）中的核心知识点，原理上跟Vue的异步更新有密切关系，对于面试者考察很有区分度，如果能回答的很好，对面试也是很有帮助的，所以我们有必要花费时间来学习一下。一、nextTick是什么我们来看看官方的定义：在下次DOM更新循环结束之后执行延
        • day02 vue学习日记 叫我小神龙� vue学习cssjavascriptvue.js前端html
          day02Vue常用特性表单基本操作获取单选框中的值通过v-model男女newVue({data:{//默认会让当前的value值为2的单选框选中gender:2,},})获取复选框中的值通过v-model和获取单选框中的值一样复选框checkbox这种的组合时data中的hobby我们要定义成数组否则无法实现多选爱好：篮球唱歌写代码newVue({data:{//默认会让当前的value值为2
        • vue组件中插入图片 风兮w 前端vue
          最近在Vue学习交流群里面发现很多小伙伴在想要在vue中显示图片，但是把图片写在data里面作为变量传到模板中的时候却发现图片出不了，以为是图片路径的问题，查了半天还是出不来。解决方法方案1：使用require将图片进入，写法如下logo:require('../asset/admin/logo.png')1然后再模板中：1就可以了。方案2：把图片放在static文件夹中，如下然后再data里面直
        • Vue学习笔记 - 插件 WDeLiang Vuevue.js学习笔记
          介绍插件(Plugins)是一种能为Vue添加全局功能的工具代码import{createApp}from'vue'constapp=createApp({})app.use(myPlugin,{/*可选的选项*/})一个插件可以是一个拥有install()方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给app.use()的额外选项作为参数：对象的写法constm
        • vue学习笔记整理 带上耳机世界与我无关 计算机基础个人笔记vue.js学习前端
          文章目录一、前端核心分析1.1、概述1.2、前端三要素1.3、结构层（HTML）1.4、表现层（CSS）1.5、行为层（JavaScript）二、前端发展史2.1、UI框架2.2、JavaScript构建工具2.3、三端同一2.4、后端技术2.5、主流前端框架三、了解前后分离的演变史3.1、后端为主的MVC时代3.2、基于AJAX带来的SPA时代3.3、前端为主的MV*时代3.4、NodeJS带来
        • vue学习笔记 苜小夕 vue.js学习笔记
          应用创建每个Vue应用都是通过createApp函数创建一个新的应用实例：import{createApp}from'vue'//从一个单文件组件中导入根组件importAppfrom'./App.vue'constapp=createApp(App)但应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的DOM元素或是一个CSS选择器字符串：app.
        • Vue学习笔记集--父子通讯 Three～stone vue.js学习笔记
          父子通讯在Vue3中，父子组件通信的核心方式与Vue2类似，但CompositionAPI和语法带来了一些新的特性。以下是Vue3父子通信的完整指南：Props向下传递数据（父→子）1.父组件传递数据import{ref}from'vue';importChildfrom'./Child.vue';constparentTitle=ref('父组件标题');constcount=ref(0);2.
        • Vue学习笔记集--生命周期 Three～stone vue.js学习笔记
          生命周期钩子什么是生命周期？生命周期：指的是一个Vue组件从创建→挂载→更新→销毁的完整过程。类比人的一生：出生（组件创建）→上学（挂载到页面）→工作变化（数据更新）→退休（组件销毁）。每个阶段都有特定的任务需要处理（如初始化数据、操作DOM、清理资源等），这就是生命周期的意义。什么是钩子函数？钩子函数（LifecycleHooks）是Vue在生命周期不同阶段自动调用的函数。开发者可以在这些函数中
        • Vue学习笔记集--pnpm包管理器 Three～stone vue.js学习笔记
          pnpm包管理器官网：https://www.pnpm.cn/pnpm简介pnpm全称是performantnpm，意思为“高性能的npm”，它通过硬链接和符号链接共享依赖，提升安装速度并减少存储占用。功能特点节省磁盘空间：依赖包被存放在一个统一的位置，多个项目共享同一份依赖副本，节省大量磁盘空间。安装速度快：安装速度比npm快了近2倍。支持Monorepo：可以使用pnpm-workspace.
        • Vue学习记录之二十 postcss自定义插件及Unocss的使用 LvManBa vue.js学习postcss
          一、实例1使用postCss自定义px转vw插件编写css插件:一、在项目根目录下建立一个plugins文件夹，然后建立一个postcss-px-to-viewport.ts文件。//vite内置了postCss无需安装import{Plugin}from'postcss'//定义一个变量constOptions={viewportWidth:375,//UI设计稿上的宽度，这里我们默认的视口宽度
        • vue学习笔记 export ‘default‘ (imported as ‘Vue‘) was not found in ‘vue‘ xiaoweiwei99 前端htmlvue.js学习javascript
          版本：vue3vue/cli5.0.0做写store时报错importVuefrom"vue";importVuexfrom"vuex";importgettersfrom"./getters";importuserfrom"./modules/user";Vue.use(Vuex);conststore=newVuex.Store({modules:{user,},getters,});expo
        • Vue学习教程-16html标签元素绑定事件 番茄番茄君 vue.js学习前端
          文章目录前言一、表单数据绑定事件二、多媒体元素绑定1.图片img和视频元素video三、容器元素绑定事件前言在Vue中，你可以通过v-on指令（或在Vue2.x中简写为@）来绑定事件。这种方式允许你监听DOM事件，并在触发时执行一些JavaScript代码。常见的元素主要是表单数据元素、多媒体元素和容器元素。一、表单数据绑定事件常见的表单数据元素1.文本输入框元素3.多选框元素4.下拉框元素5.按
        • Vue学习：22.Vue组件库-Vant 星仔如雨 Vue2vue.js学习前端vant
          Vue组件库是一系列预先构建好的、可复用的UI组件集合，它们设计用于加速Vue.js应用程序的开发过程。这些组件通常遵循一定的设计规范，提供统一的外观和交互体验，让开发者能够快速搭建用户界面。组件库举例Vant:专注于移动端的轻量级UI库，提供丰富的基础组件和业务组件，适用于快速构建高性能的移动端页面。ElementUI:针对桌面端Web应用的Vue组件库，包含丰富的表单元素、布局组件、导航组件等
        • Vue学习教程-14内置指令 番茄番茄君 vue.js学习前端
          文章目录前言一、v-text指令二、v-html指令三、v-cloak指令四、v-once指令五、v-pre指令六、其他指令前言Vue.js提供了许多内置指令（Directives），这些指令用于在模板中添加特殊功能。内置指令以v-前缀开始。v-text:更新元素的textContent更新元素的textContent。例如：v-html:更新元素的innerHTML更新元素的innerHTML。
        • Vue学习教程-11数组变化监测 番茄番茄君 vue.js学习javascript
          文章目录前言一、vue侦听响应数组变更方法二、使用Vue.set或者this.$set三、替换数组总结前言在Vue中，数组变化监测是其响应式系统的一个重要特性。Vue2.x版本中，当使用Vue.set或者this.$set，或者在初始化时就声明好数组的每个元素或者调用数组方法，可以确保数组的变更能够被Vue检测到并触发视图的更新。然而，在某些情况下，直接通过索引修改数组元素，例如array[ind
        • Vue学习教程-04数据代理 番茄番茄君 vue.js学习javascript
          文章目录一、什么是数据代理二、数据代理过程三、vue数据代理应用1.数据代理代码2.代理底层逻辑总结一、什么是数据代理数据代理是一种技术，通过代理、拦截对象属性及方法的访问请求，实现与该对象的交互。在Vue中，数据代理是指在Vue实例化一个组件时，Vue会将组件中的data属性中的数据转化为getter/setter，并将这些getter/setter注册到Vue的响应式系统中，在Vue实例中访问
        • Vue学习笔记3 Jyywww121 vue.js学习笔记
          Vue学习笔记一、单页应用程序&路由介绍1、介绍单页应用程序：所有的功能都在一个页面上实现优点：按需更新性能高，开发效率高，用户体验好缺点：学习成本高，首屏加载慢，不利于SEO应用场景：系统类网站、内部网站、文档类网站、移动端站点路由介绍生活中的路由：设备和ip的映射关系Vue中的路由：路径和组件的映射关系2、路由的基本应用VueRouter的介绍：作用：修改地址栏路径时，切换显示匹配的组件路由的
        • Vue学习笔记--＞＞基础篇 丑小鸭变黑天鹅 笔记vue
          Vue学习笔记一、Vue核心1、Vue的基本认识1、官网2、介绍3、特点4、与其它前端JS框架的关联5、vue扩展插件2、Vue的基本使用3、理解Vue的MVVM4、模板语法5、计算属性基本使用6、强制绑定class和style7、条件渲染8、列表渲染维护状态数组更新检测9、列表的搜索与排序10、事件处理11、表单数据的自动收集12、Vue生命周期13、过渡和动画1、css过渡2、css动画3、自
        • Vue学习笔记-条件渲染和列表渲染 printf_________ vue.js学习前端
          条件渲染：v-if，可以搭配v-else-if,v-else但是必须放在一起//可以移除元素v-show//可以隐藏元素v-if可以搭配template使用，用template将多个元素包裹起来列表渲染：
        • Vue学习第31天——编程式路由导航5种方法详解及案例练习（与声明式路由导航对比） 离奇6厘米 vue学习javascriptvue
          目录一、编程式路由导航1、概念2、理解3、用法二、编程式路由导航的5种方法1、push2、replace3、forward4、back5、go三、案例练习四、编程式路由导航与声明式路由导航对比一、编程式路由导航1、概念除了使用创建a标签来定义导航链接，我们还可以借助router的实例方法，通过编写代码来实现。2、理解不借助实现路由跳转3、用法在vue组件中，可以通过$router访问路由实例，因此
        • Vue学习笔记 二 涔溪 vuevue.js学习笔记
          4、Vue基础扩展4.1插槽组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力在Vue中插槽是很重要的存在，通过插槽，我们可以把父组件中指定的DOM作用到子组件的任意位置，后面我们坐项目用到的组件库比如element-ui,vant-ui都频繁用到的插槽，Vue的插槽主要有匿名插槽，具名插槽，作用域插槽三种，下面我们分别来认识一下他们。4.1.1匿名插槽★★★★故名思义就是没有名字的插
        • 基于vue.js+element-ui组件开发的博客blog详细步骤 perfect-code-hzy 前端工程师学习笔记vue.jsjavascript
          vue学习笔记一、前端项目初始化步骤1、通过vuecli3创建项目2、配置vue路由3、配置element-ui组件库4、配置axios库5、初始化git远程仓库6、将本地项目托管到GitHub或码云上二、接口API1、调试工具三、登录和退出功能完成登录组件提交到git--合并分支一、前端项目初始化步骤1、通过vuecli3创建项目通过vueui命令进行可视化创建项目选择创建的路径->自定义配置项
        • vue学习总结
          一、transition和transition-group的区别：transition：针对的是一个元素，比如v-if,v-showtransition-group：针对是多个元素，比如使用v-for二、transition动画过渡的时候什么时候生效？1.v-if2.v-show3.动态组件4.组建根节点三、vue创建项目有两种方法：1.vueinitwebpack项目名称2.vuecreate项
        • vue学习笔记——关于对Vue3 ref(), toRef(), toRefs(), unref(), isRef(), reactive()方法的理解。 chen_sir_sh vue学习笔记javascript前端vue
          VUE3出现了很多新的API，下面是自己的一些理解进行的总结。欢迎大家一起交流补充。ref()使用ref创建一个数据类型，ref有value这个属性constname1={age:"14",name:"bob1"};constname2=ref({name:"bob2"});//使用ref创建一个数据类型相对于reactive，ref有value属性name2.value="bob3"consol
        • 第五天Vue学习 余心不忍 vue.js学习elementui
          v-for的相关使用1.v-for的基本使用循环遍历，值，索引值，key都可以一般需要使用索引值。{{index+":"+item}}index表示索引，item表示当前遍历的元素。{{item}}{{key+'----'+i}}varapp=newVue({el:'#app',data:{books:['化学','物理','英语','数学','语文'],person:{name:'张三',age
        • iOS http封装 374016526 ios服务器交互http网络请求
          程序开发避免不了与服务器的交互，这里打包了一个自己写的http交互库。希望可以帮到大家。   内置一个basehttp，当我们创建自己的service可以继承实现。   KuroAppBaseHttp *baseHttp = [[KuroAppBaseHttp alloc] init]; [baseHttp setDelegate:self]; [baseHttp
        • lolcat ：一个在 Linux 终端中输出彩虹特效的命令行工具 brotherlamp linuxlinux教程linux视频linux自学linux资料
            那些相信 Linux 命令行是单调无聊且没有任何乐趣的人们，你们错了，这里有一些有关 Linux 的文章，它们展示着 Linux 是如何的有趣和“淘气” 。 在本文中，我将讨论一个名为“lolcat”的小工具 – 它可以在终端中生成彩虹般的颜色。 何为 lolcat ? Lolcat 是一个针对 Linux，BSD 和 OSX 平台的工具，它类似于 cat 命令，并为 cat
        • MongoDB索引管理（1）——[九] eksliang mongodbMongoDB管理索引
          转载请出自出处：http://eksliang.iteye.com/blog/2178427 一、概述       数据库的索引与书籍的索引类似，有了索引就不需要翻转整本书。数据库的索引跟这个原理一样，首先在索引中找，在索引中找到条目以后，就可以直接跳转到目标文档的位置，从而使查询速度提高几个数据量级。       不使用索引的查询称
        • Informatica参数及变量 18289753290 Informatica参数变量
          下面是本人通俗的理解，如有不对之处，希望指正 info参数的设置：在info中用到的参数都在server的专门的配置文件中（最好以parma）结尾 下面的GLOBAl就是全局的，$开头的是系统级变量，$$开头的变量是自定义变量。如果是在session中或者mapping中用到的变量就是局部变量，那就把global换成对应的session或者mapping名字。 [GLOBAL] $Par
        • python 解析unicode字符串为utf8编码字符串 酷的飞上天空 unicode
          php返回的json字符串如果包含中文，则会被转换成\uxx格式的unicode编码字符串返回。 在浏览器中能正常识别这种编码，但是后台程序却不能识别，直接输出显示的是\uxx的字符，并未进行转码。   转换方式如下   >>> import json >>> q = '{"text":"\u4
        • Hibernate的总结 永夜-极光 Hibernate
          1.hibernate的作用,简化对数据库的编码,使开发人员不必再与复杂的sql语句打交道   做项目大部分都需要用JAVA来链接数据库，比如你要做一个会员注册的 页面，那么 获取到用户填写的 基本信后，你要把这些基本信息存入数据库对应的表中，不用hibernate还有mybatis之类的框架，都不用的话就得用JDBC，也就是JAVA自己的，用这个东西你要写很多的代码，比如保存注册信
        • SyntaxError: Non-UTF-8 code starting with '\xc4' 随便小屋 python
          刚开始看一下Python语言，传说听强大的，但我感觉还是没Java强吧！ 写Hello World的时候就遇到一个问题，在Eclipse中写的，代码如下 ''' Created on 2014年10月27日 @author: Logic ''' print("Hello World!");  运行结果 SyntaxError: Non-UTF-8
        • 学会敬酒礼仪 不做酒席菜鸟 aijuans 菜鸟
          俗话说，酒是越喝越厚，但在酒桌上也有很多学问讲究，以下总结了一些酒桌上的你不得不注意的小细节。 细节一：领导相互喝完才轮到自己敬酒。敬酒一定要站起来，双手举杯。 细节二：可以多人敬一人，决不可一人敬多人，除非你是领导。 细节三：自己敬别人，如果不碰杯，自己喝多少可视乎情况而定，比如对方酒量，对方喝酒态度，切不可比对方喝得少，要知道是自己敬人。 细节四：自己敬别人，如果碰杯，一
        • 《创新者的基因》读书笔记 aoyouzi 读书笔记《创新者的基因》
          创新者的基因   创新者的“基因”，即最具创意的企业家具备的五种“发现技能”：联想，观察，实验，发问，建立人脉。   第一部分破坏性创新，从你开始 第一章破坏性创新者的基因 如何获得启示： 发现以下的因素起到了催化剂的作用：(1) -个挑战现状的问题；(2)对某项技术、某个公司或顾客的观察；(3) -次尝试新鲜事物的经验或实验；(4)与某人进行了一次交谈，为他点醒
        • 表单验证技术 百合不是茶 JavaScriptDOM对象String对象事件
          js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流  ,数显我们要知道表单验证需要的技术点, String对象,事件,函数   一:String对象;通常是对字符串的操作;   1,String的属性;   字符串.length;表示该字符串的长度; var str= "java"
        • web.xml配置详解之context-param bijian1013 javaservletweb.xmlcontext-param
          一.格式定义： <context-param> <param-name>contextConfigLocation</param-name> <param-value>contextConfigLocationValue></param-value> </context-param> 作用：该元
        • Web系统常见编码漏洞（开发工程师知晓） Bill_chen sqlPHPWebfckeditor脚本
          1.头号大敌：SQL Injection 原因：程序中对用户输入检查不严格，用户可以提交一段数据库查询代码，根据程序返回的结果， 获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。 本质: 对于输入检查不充分，导致SQL语句将用户提交的非法数据当作语句的一部分来执行。 示例： String query = "SELECT id FROM users
        • 【MongoDB学习笔记六】MongoDB修改器 bit1129 mongodb
          本文首先介绍下MongoDB的基本的增删改查操作，然后，详细介绍MongoDB提供的修改器，以完成各种各样的文档更新操作  MongoDB的主要操作 show dbs 显示当前用户能看到哪些数据库 use foobar 将数据库切换到foobar show collections 显示当前数据库有哪些集合 db.people.update，update不带参数，可
        • 提高职业素养，做好人生规划 白糖_ 人生
            培训讲师是成都著名的企业培训讲师，他在讲课中提出的一些观点很新颖，在此我收录了一些分享一下。注：讲师的观点不代表本人的观点，这些东西大家自己揣摩。   1、什么是职业规划：职业规划并不完全代表你到什么阶段要当什么官要拿多少钱，这些都只是梦想。职业规划是清楚的认识自己现在缺什么，这个阶段该学习什么，下个阶段缺什么，又应该怎么去规划学习，这样才算是规划。  
        • 国外的网站你都到哪边看？ bozch 技术网站国外
          学习软件开发技术，如果没有什么英文基础，最好还是看国内的一些技术网站，例如：开源OSchina，csdn，iteye,51cto等等。 个人感觉如果英语基础能力不错的话，可以浏览国外的网站来进行软件技术基础的学习，例如java开发中常用的到的网站有apache.org 里面有apache的很多Projects,springframework.org是spring相关的项目网站,还有几个感觉不错的
        • 编程之美-光影切割问题 bylijinnan 编程之美
          package a; public class DisorderCount { /**《编程之美》“光影切割问题” * 主要是两个问题： * 1.数学公式（设定没有三条以上的直线交于同一点）： * 两条直线最多一个交点，将平面分成了4个区域； * 三条直线最多三个交点，将平面分成了7个区域； * 可以推出：N条直线 M个交点，区域数为N+M+1。
        • 关于Web跨站执行脚本概念 chenbowen00 Web安全跨站执行脚本
          跨站脚本攻击(XSS)是web应用程序中最危险和最常见的安全漏洞之一。安全研究人员发现这个漏洞在最受欢迎的网站,包括谷歌、Facebook、亚马逊、PayPal,和许多其他网站。如果你看看bug赏金计划,大多数报告的问题属于 XSS。为了防止跨站脚本攻击,浏览器也有自己的过滤器,但安全研究人员总是想方设法绕过这些过滤器。这个漏洞是通常用于执行cookie窃取、恶意软件传播,会话劫持,恶意重定向。在
        • [开源项目与投资]投资开源项目之前需要统计该项目已有的用户数 comsci 开源项目
                  现在国内和国外,特别是美国那边,突然出现很多开源项目,但是这些项目的用户有多少,有多少忠诚的粉丝,对于投资者来讲,完全是一个未知数,那么要投资开源项目,我们投资者必须准确无误的知道该项目的全部情况,包括项目发起人的情况,项目的维持时间..项目的技术水平,项目的参与者的势力,项目投入产出的效益.....
        • oracle alert log file（告警日志文件） daizj oracle告警日志文件alert log file
          The alert log is a chronological log of messages and errors, and includes the following items: All internal errors (ORA-00600), block corruption errors (ORA-01578), and deadlock errors (ORA-00060)
        • 关于 CAS SSO 文章声明 denger SSO
          由于几年前写了几篇 CAS 系列的文章，之后陆续有人参照文章去实现，可都遇到了各种问题，同时经常或多或少的收到不少人的求助。现在这时特此说明几点： 1.  那些文章发表于好几年前了，CAS 已经更新几个很多版本了，由于近年已经没有做该领域方面的事情，所有文章也没有持续更新。 2. 文章只是提供思路，尽管 CAS 版本已经发生变化，但原理和流程仍然一致。最重要的是明白原理，然后
        • 初二上学期难记单词 dcj3sjt126com englishword
          lesson 课 traffic 交通 matter 要紧；事物 happy 快乐的，幸福的 second 第二的 idea 主意；想法；意见 mean 意味着 important 重要的，重大的 never 从来，决不 afraid 害怕 的 fifth 第五的 hometown 故乡，家乡 discuss 讨论；议论 east 东方的 agree 同意；赞成 bo
        • uicollectionview 纯代码布局, 添加头部视图 dcj3sjt126com Collection
          #import <UIKit/UIKit.h> @interface myHeadView : UICollectionReusableView { UILabel *TitleLable; } -(void)setTextTitle; @end #import "myHeadView.h" @implementation m
        • N 位随机数字串的 JAVA 生成实现 FX夜归人 javaMath随机数Random
          /** * 功能描述 随机数工具类<br /> * @author FengXueYeGuiRen * 创建时间 2014-7-25<br /> */ public class RandomUtil { // 随机数生成器 private static java.util.Random random = new java.util.R
        • Ehcache（09）——缓存Web页面 234390216 ehcache页面缓存
          页面缓存 目录 1       SimplePageCachingFilter 1.1      calculateKey 1.2      可配置的初始化参数 1.2.1     cach
        • spring中少用的注解@primary解析 jackyrong primary
          这次看下spring中少见的注解@primary注解，例子 @Component public class MetalSinger implements Singer{ @Override public String sing(String lyrics) { return "I am singing with DIO voice
        • Java几款性能分析工具的对比 lbwahoo java
          Java几款性能分析工具的对比 摘自：http://my.oschina.net/liux/blog/51800   在给客户的应用程序维护的过程中，我注意到在高负载下的一些性能问题。理论上，增加对应用程序的负载会使性能等比率的下降。然而，我认为性能下降的比率远远高于负载的增加。我也发现，性能可以通过改变应用程序的逻辑来提升，甚至达到极限。为了更详细的了解这一点，我们需要做一些性能
        • JVM参数配置大全 nickys jvm应用服务器
          JVM参数配置大全 /usr/local/jdk/bin/java -Dresin.home=/usr/local/resin -server -Xms1800M -Xmx1800M -Xmn300M -Xss512K -XX:PermSize=300M -XX:MaxPermSize=300M -XX:SurvivorRatio=8 -XX:MaxTenuringThreshold=5 -
        • 搭建 CentOS 6 服务器(14) - squid、Varnish rensanning varnish
          （一）squid 安装 # yum install httpd-tools -y # htpasswd -c -b /etc/squid/passwords squiduser 123456 # yum install squid -y 设置 # cp /etc/squid/squid.conf /etc/squid/squid.conf.bak # vi /etc/
        • Spring缓存注解@Cache使用 tom_seed spring
          参考资料 http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/ http://swiftlet.net/archives/774   缓存注解有以下三个： @Cacheable      @CacheEvict     @CachePut
        • dom4j解析XML时出现"java.lang.noclassdeffounderror: org/jaxen/jaxenexception"错误 xp9802
          java.lang.NoClassDefFoundError: org/jaxen/JaxenExc 关键字: java.lang.noclassdeffounderror: org/jaxen/jaxenexception 使用dom4j解析XML时，要快速获取某个节点的数据，使用XPath是个不错的方法，dom4j的快速手册里也建议使用这种方式 执行时却抛出以下异常： Exceptio