weixin_33768481
weixin_33768481

从零开始搭建Vue组件库——VV-UI

前言：

前端组件化是当今热议的话题之一，也是我们在开发单页应用经常会碰到的一个问题，现在我们有了功能非常完善的Element-UI。各个大厂也相继宣布开源XXX-UI。但是也会存在一些问题，比如每个公司可能需要的业务组件不尽相同，或者我们想自己开发一套属于自己的组件库，来增强对组件的可控性。那么我们该如何去做呢？
这里记录一下我从零开始搭建起来的组件库的过程，目前只有简单几个组件，不过我也会慢慢更新维护：VV-UI

1. 环境准备

我们搭建组件库，需要准备一系列环境，首先我们要考虑一下问题：

  1. 脚手架如何搭建

  2. 如何规划目录结构

  3. 如何编写文档

首先，对于脚手架环境的问题，目前已经有非常成熟的vue官方的脚手架，我们拿来用就好了

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

接着我们看第二个问题，如何规划好我们组建的目录结构？首先我们需要有一个目录存放组件，有一个目录存放示例。所以我们要对vue-cli 生成的项目结构做一下改造：

.
...
|-- examples      // 原 src 目录，改成 examples 用作示例展示
|-- packages      // 新增 packages 用于编写存放组件
...
.

这样的话 我们需要再把我们webpack配置文件稍作一下调整，首先是把原先的编译指向src的目录改成examples，其次为了 npm run build 能正常编译 packages 我们也需要为 babel-loader 再增加一个编译目录：

{
   test: /\.js$/,
   loader: 'babel-loader',
   include: [resolve('examples'), resolve('test'), resolve('packages')]
}

这样我们搭建起来一个简易的目录结构。
紧接着我们需要考虑如何编写文档。对于文档的编写，自然是markdown最合适不过了，那么怎么让我们在vue下可以去写 markdown 文档呢？答案当然是 vue-markdown-loader。然后我们按照文档配置了相关的插件信息：

rules: [
   {
     test: /\.md$/,
     loader: 'vue-markdown-loader'
   }
 ]

好了，我们可以开始尝试写文档了，在 example/docs 目录下新建 test.md。

# test
> Hello World

同时创建一个新的路由，指向我们的md文件：

{
  path: '/test',
  name: 'test',
  component: r => require.ensure([], () => r(require('../docs/test.md')))
}

打开我们的浏览器http://localhost:8080/#/test 哈哈 真的成功了。别高兴的太早.... 问题还在后面：我们期望的文档不仅能编译markdown，而且最好能识别demo代码块一方面做演示，一方面可以显示演示代码最好了，就像这样：
从零开始搭建Vue组件库——VV-UI_第1张图片
那我们需要怎么做呢？vue-mark-down 功能肯定不止这些！于是我们继续阅读它的文档，发现其实他就是封装了 markdown-it，支持 options 选项。这样我们就可以为我们的markdown定义独特的标识符，这里我用 demo 标识需要显示代码块的地方，所以我需要配置options 选项 ：

const vueMarkdown = {
  preprocess: (MarkdownIt, source) => {
    MarkdownIt.renderer.rules.table_open = function () {
      return ''
    }
    MarkdownIt.renderer.rules.fence = utils.wrapCustomClass(MarkdownIt.renderer.rules.fence)
    return source
  },
  use: [
    [MarkdownItContainer, 'demo', {
      // 用于校验包含demo的代码块
      validate: params => params.trim().match(/^demo\s*(.*)$/),
      render: function(tokens, idx) {
        
        var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);

        if (tokens[idx].nesting === 1) {
          var desc = tokens[idx + 2].content;
          // 编译成html
          const html = utils.convertHtml(striptags(tokens[idx + 1].content, 'script'))
          // 移除描述，防止被添加到代码块
          tokens[idx + 2].children = [];

          return `
                        
${html}

                        
`;
        }
        return '
\n';
      }
    }]
  ]
}
这里简单的描述一下这段代码是干什么的：首先把内容里面vue片段编译成html，用于显示，另一方面用highlight来高亮代码块。demo-block本身是我们定义好的组件：
这样，我们的 test.md 便可以这么去写了：
从零开始搭建Vue组件库——VV-UI_第2张图片
2. 如何编写组件
环境准备完毕，紧接着要开始编写组件，考虑的是组件库，所以我们竟可能让我们的组件支持全局引入和按需引入，如果全局引入，那么所有的组件需要要注册到Vue component 上，并导出：
const install = function(Vue) {
  if (install.installed) return;
  components.map(component => Vue.component(component.name, component));
};

export default {
  install
};
接着要实现按需加载，我们只需要单个导出组件即可：
import Button from './button/index.js';
import Row from './row/index'
import Col from './col/index'

const components = [
  Button,
  Row,
  Col
];

const install = function(Vue) {
  if (install.installed) return;
  components.map(component => Vue.component(component.name, component));
};

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  Button,
  Row,
  Col
};
其次，我们还需要考虑一个问题：既然是单页面应用，必然要去解决样式冲突问题，如果组件内使用soped，那么样式就无法从组件内抽离出来，达不到可定制化主题颜色的目的。我们需要一套可以分离处理的样式，可以自行编译，可以相互不污染。这时候css 的BEM规范就显得尤为重要。如果你还不知道什么是BEM 参考： http://www.w3cplus.com/css/css-architecture-1.html。
说到这里，目前对BEM规范支持较好的插件就是postcss了，他允许我们配置BEM之间的连接符和缩写：
{
  "browsers": ["ie > 8", "last 2 versions"],
  "features": {
    "bem": {
      "shortcuts": {
        "component": "b",
        "modifier": "m",
        "descendent": "e"
      },
      "separators": {
        "descendent": "__",
        "modifier": "--"
      }
    }
  }
}
这样我们就可以把样式单独的抽离出来，通过gulp进行打包编译：
gulp.task('compile', function() {
  return gulp.src('./src/*.css')
    .pipe(postcss([salad]))
    .pipe(cssmin())
    .pipe(gulp.dest('./lib'));
});
最后生成我们的样式代码。
好了开始我们的测试：
import VVUI from '../packages/index'
import '../packages/theme-default/lib/index.css'

Vue.use(VVUI)
一切显得那么美好....
优化与不足
     
    
  • 组件导出代码暂不支持自动化生成：比如我们的组件index文件，每次添加组件都需要不断地改写，我们2*
    •  
   
可以尝试进行webpack配置，npm run dev 的时候自动进行组件检测，然后帮我们写好导出代码。
     
    
  • 目录结构划分缺陷：目前所有内容仅支持中文，如果想要做到支持国际化，那么还需要重新调整目录结构。
    •  
    
  • 发布tag： 需要编写脚本支持tag发布
    •  
    
  • 组件太少：文档刚写，组件还不是很多，慢慢去维护，相信会越来越多的组件，做业务的过程中也可以把常用的组件加进去，这样更加方便自己以后的维护和学习
    •  
   
结语：
项目github地址：github
项目演示地址： 演示
欢迎 PR 一起维护，欢迎 Star
关于
作者：monkeyWang
本人主页：monkeyWang
微信公众号：会不定期推送前端技术文章，欢迎关注
从零开始搭建Vue组件库——VV-UI_第3张图片

                    
                

        
你可能感兴趣的:(从零开始搭建Vue组件库——VV-UI)

        

            

                
    
                    
  • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
    
                    
    • 
                    
  • PHP环境搭建详细教程
                        好看资源平台
前端php
                        
    PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
    
                    
    • 
                    
  • node.js学习
                        小猿L
node.jsnode.js学习vim
                        
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    
                    
    • 
                    
  • 【六】阿伟开始搭建Kafka学习环境
                        能源恒观
中间件学习kafkaspring
                        
    阿伟开始搭建Kafka学习环境概述上一篇文章阿伟学习了Kafka的核心概念，并且把市面上流行的消息中间件特性进行了梳理和对比，方便大家在学习过程中进行对比学习，最后梳理了一些Kafka使用中经常遇到的Kafka难题以及解决思路，经过上一篇的学习我相信大家对Kafka有了初步的认识，本篇将继续学习Kafka。一、安装和配置学习一项技术首先要搭建一套服务，而Kafka的运行主要需要部署jdk、zook
    
                    
    • 
                    
  • Python实现简单的机器学习算法
                        master_chenchengg
pythonpython办公效率python开发IT
                        
    Python实现简单的机器学习算法开篇：初探机器学习的奇妙之旅搭建环境：一切从安装开始必备工具箱第一步：安装Anaconda和JupyterNotebook小贴士：如何配置Python环境变量算法初体验：从零开始的Python机器学习线性回归：让数据说话数据准备：从哪里找数据编码实战：Python实现线性回归模型评估：如何判断模型好坏逻辑回归：从分类开始理论入门：什么是逻辑回归代码实现：使用skl
    
                    
    • 
                    
  • vue3中el-table中点击图片放大时，被表格覆盖
                        叫我小鹏呀
vue.jsjavascript前端
                        
    问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
    
                    
    • 
                    
  • vue项目element-ui的table表格单元格合并
                        酋长哈哈
vue.jselementuijavascript前端
                        
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
    
                    
    • 
                    
  • Vue中table合并单元格用法
                        weixin_30613343
javascriptViewUI
                        
    地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
    
                    
    • 
                    
  • springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    
                    
    • 
                    
  • Vue( ElementUI入门、vue-cli安装)
                        m0_l5z
elementuivue.js
                        
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
    
                    
    • 
                    
  • 博客网站制作教程
                        2401_85194651
javamaven
                        
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    
                    
    • 
                    
  • 【Python搞定车载自动化测试】——Python实现车载以太网DoIP刷写（含Python源码）
                        疯狂的机器人
Python搞定车载自动化pythonDoIPUDSISO142291SO13400Bootloadertcp/ip
                        
    系列文章目录【Python搞定车载自动化测试】系列文章目录汇总文章目录系列文章目录前言一、环境搭建1.软件环境2.硬件环境二、目录结构三、源码展示1.DoIP诊断基础函数方法2.DoIP诊断业务函数方法3.27服务安全解锁4.DoIP自动化刷写四、测试日志1.测试日志五、完整源码链接前言随着智能电动汽车行业的发展，汽车=智能终端+四个轮子，各家车企都推出了各自的OTA升级方案，本章节主要介绍如何使
    
                    
    • 
                    
  • vue+el-table 可输入表格使用上下键进行input框切换
                        以对_
vue学习记录vue.jsjavascript前端
                        
    使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
    
                    
    • 
                    
  • vue + Element UI table动态合并单元格
                        我家媳妇儿萌哒哒
elementUIvue.js前端javascript
                        
    一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
    
                    
    • 
                    
  • vue 创建项目报错：command failed: npm install --loglevel error
                        那鱼、会飞
vue.jsvue-cli3
                        
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
    
                    
    • 
                    
  • 进销存小程序源码 PHP网络版ERP进销存管理系统 全开源可二开
                        摸鱼小号
php
                        
    可直接源码搭建部署发布后使用：一、功能模块介绍该系统模板主要有进，销，存三个主要模板功能组成，下面将介绍各模块所对应的功能；进：需要将产品采购入库，自动生成采购明细台账同时关联财务生成付款账单；销：是指对客户的销售订单记录，汇总生成产品销售明细及回款计划；存：库存的日常盘点与统计，库存下限预警、出入库台账、库存位置等。1.进购管理采购订单：采购下单审批→由上级审批通过采购入库；采购入库：货品到货>
    
                    
    • 
                    
  • 计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署）
                        java毕设程序源码王哥
php课程设计vue.js
                        
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
    
                    
    • 
                    
  • 最简单将静态网页挂载到服务器上(不用nginx)
                        全能全知者
服务器nginx运维前端html笔记
                        
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
    
                    
    • 
                    
  • NPM私库搭建-verdaccio（Linux）
                        Beam007
npmlinux前端
                        
    1、安装nodelinux服务器安装nodea)、官网下载所需的node版本https://nodejs.org/dist/v14.21.0/b)、解压安装包若下载的是xxx.tar.xz文件，解压命令为tar-xvfxxx.tar.xzc)、修改环境变量修改：/etc/profile文件#SETPATHFORNODEJSexportNODE_HOME=NODEJS解压安装的路径exportPAT
    
                    
    • 
                    
  • 字节二面
                        Redstone Monstrosity
前端面试
                        
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    
                    
    • 
                    
  • 【2023年】云计算金砖牛刀小试6
                        geekgold
云计算服务器网络kubernetes容器
                        
    第一套【任务1】私有云服务搭建[10分]【题目1】基础环境配置[0.5分]使用提供的用户名密码，登录提供的OpenStack私有云平台，在当前租户下，使用CentOS7.9镜像，创建两台云主机，云主机类型使用4vCPU/12G/100G_50G类型。当前租户下默认存在一张网卡，自行创建第二张网卡并连接至controller和compute节点（第二张网卡的网段为10.10.X.0/24，X为工位号
    
                    
    • 
                    
  • vue render 函数详解 (配参数详解)
                        你的眼睛會笑
vue2vue.jsjavascript前端
                        
    vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
    
                    
    • 
                    
  • 前端代码上传文件
                        余生逆风飞翔
前端javascript开发语言
                        
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    
                    
    • 
                    
  • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。
                        焚木灵
node.jsvue
                        
    可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
    
                    
    • 
                    
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因
                        hw_happy
开发语言前端vue.jsjavascript
                        
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
    
                    
    • 
                    
  • Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘
                        周bro
vue.js前端javascriptnode.jsnpm
                        
    node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
    
                    
    • 
                    
  • vue2实现复制,粘贴功能
                        周bro
vue.jsjavascript前端
                        
    一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
    
                    
    • 
                    
  • 【vite 自动配置路由】
                        CODER-V
前端javascriptvue.js前端软件构建
                        
    手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men
    
                    
    • 
                    
  • Vue + Express实现一个表单提交
                        九旬大爷的梦

                        
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
    
                    
    • 
                    
  • Vue3 vant组件库自动导入
                        不叫虎子
Vuevue.js前端javascript前端框架typescript
                        
    实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
    
                    
    • 
                                
  • sql统计相同项个数并按名次显示
                                    朱辉辉33
javaoracle
                                    
    现在有如下这样一个表： 
A表 
ID Name time 
------------------------------ 
0001 aaa 2006-11-18 
0002 ccc 2006-11-18 
0003 eee 2006-11-18 
0004 aaa 2006-11-18 
0005 eee 2006-11-18 
0004 aaa 2006-11-18 
0002 ccc 20
    
                                
    • 
                                
  • Android+Jquery Mobile学习系列-目录
                                    白糖_
JQuery Mobile
                                    
    最近在研究学习基于Android的移动应用开发，准备给家里人做一个应用程序用用。向公司手机移动团队咨询了下，觉得使用Android的WebView上手最快，因为WebView等于是一个内置浏览器，可以基于html页面开发，不用去学习Android自带的七七八八的控件。然后加上Jquery mobile的样式渲染和事件等，就能非常方便的做动态应用了。 
  
从现在起，往后一段时间，我打算
    
                                
    • 
                                
  • 如何给线程池命名
                                    daysinsun
线程池
                                    
            在系统运行后，在线程快照里总是看到线程池的名字为pool-xx，这样导致很不好定位，怎么给线程池一个有意义的名字呢。参照ThreadPoolExecutor类的ThreadFactory，自己实现ThreadFactory接口，重写newThread方法即可。参考代码如下： 
    
public class Named
    
                                
    • 
                                
  • IE 中"HTML Parsing Error:Unable to modify the parent container element before the
                                    周凡杨
html解析errorreadyState
                                    
      
错误：  IE   中"HTML Parsing Error:Unable to modify the parent container element before the child element is closed"      
  
  
现象：  同事之间几个IE 测试情况下，有的报这个错，有的不报。经查询资料后，可归纳以下原因。
    
                                
    • 
                                
  • java上传
                                    g21121
java
                                    
    我们在做web项目中通常会遇到上传文件的情况，用struts等框架的会直接用的自带的标签和组件，今天说的是利用servlet来完成上传。 
我们这里利用到commons-fileupload组件，相关jar包可以取apache官网下载：http://commons.apache.org/ 
下面是servlet的代码： 
//定义一个磁盘文件工厂
DiskFileItemFactory fact
    
                                
    • 
                                
  • SpringMVC配置学习
                                    510888780
springmvc
                                    
    spring MVC配置详解 
现在主流的Web MVC框架除了Struts这个主力 外，其次就是Spring MVC了，因此这也是作为一名程序员需要掌握的主流框架，框架选择多了，应对多变的需求和业务时，可实行的方案自然就多了。不过要想灵活运用Spring MVC来应对大多数的Web开发，就必须要掌握它的配置及原理。 
 
　　一、Spring MVC环境搭建：（Spring 2.5.6 + Hi
    
                                
    • 
                                
  • spring mvc-jfreeChart 柱图(1)
                                    布衣凌宇
jfreechart
                                    
    第一步：下载jfreeChart包，注意是jfreeChart文件lib目录下的，jcommon-1.0.23.jar和jfreechart-1.0.19.jar两个包即可； 
第二步：配置web.xml; 
web.xml代码如下 
<servlet> 
    <servlet-name>jfreechart</servlet-nam
    
                                
    • 
                                
  • 我的spring学习笔记13-容器扩展点之PropertyPlaceholderConfigurer
                                    aijuans
Spring3
                                    
    PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java P
    
                                
    • 
                                
  • java 线程池使用 Runnable&Callable&Future
                                    antlove
javathreadRunnablecallablefuture
                                    
    1. 创建线程池 
ExecutorService executorService = Executors.newCachedThreadPool(); 
  
2. 执行一次线程，调用Runnable接口实现 
Future<?> future = executorService.submit(new DefaultRunnable());
System.out.prin
    
                                
    • 
                                
  • XML语法元素结构的总结
                                    百合不是茶
xml树结构
                                    
    1.XML介绍1969年   gml (主要目的是要在不同的机器进行通信的数据规范)1985年   sgml  standard generralized markup language1993年   html(www网)1998年  xml   extensible markup language
    
                                
    • 
                                
  • 改变eclipse编码格式
                                    bijian1013
eclipse编码格式
                                    
    1.改变整个工作空间的编码格式 
        改变整个工作空间的编码格式，这样以后新建的文件也是新设置的编码格式。 
        Eclipse->window->preferences->General->workspace-
    
                                
    • 
                                
  • javascript中return的设计缺陷
                                    bijian1013
JavaScriptAngularJS
                                    
    代码1： 
<script>
var gisService = (function(window) 
{ 

    return
    {
        name:function ()
        {
            alert(1);
        }
    };

})(this);

gisService.name();
&l
    
                                
    • 
                                
  • 【持久化框架MyBatis3八】Spring集成MyBatis3
                                    bit1129
Mybatis3
                                    
    pom.xml配置 
Maven的pom中主要包括： 
 
 MyBatis 
 MyBatis-Spring 
 Spring 
 MySQL-Connector-Java 
 Druid 
 applicationContext.xml配置     
<?xml version="1.0" encoding="UTF-8"?>
&
    
                                
    • 
                                
  • java web项目启动时自动加载自定义properties文件
                                    bitray
javaWeb监听器相对路径
                                    
    创建一个类 
public class ContextInitListener implements ServletContextListener 
使得该类成为一个监听器。用于监听整个容器生命周期的，主要是初始化和销毁的。 
 
类创建后要在web.xml配置文件中增加一个简单的监听器配置，即刚才我们定义的类。 
 

    <listener>
        <des
    
                                
    • 
                                
  • 用nginx区分文件大小做出不同响应
                                    ronin47

                                    
    昨晚和前21v的同事聊天，说到我离职后一些技术上的更新。其中有个给某大客户(游戏下载类)的特殊需求设计，因为文件大小差距很大——估计是大版本和补丁的区别——又走的是同一个域名，而squid在响应比较大的文件时，尤其是初次下载的时候，性能比较差，所以拆成两组服务器，squid服务于较小的文件，通过pull方式从peer层获取，nginx服务于较大的文件，通过push方式由peer层分发同步。外部发布
    
                                
    • 
                                
  • java-67-扑克牌的顺子.从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的.2-10为数字本身，A为1，J为11，Q为12，K为13，而大
                                    bylijinnan
java
                                    
    package com.ljn.base;

import java.util.Arrays;
import java.util.Random;

public class ContinuousPoker {

    /**
     * Q67 扑克牌的顺子 从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的。
     * 2-10为数字本身，A为1，J为1
    
                                
    • 
                                
  • 翟鸿燊老师语录
                                    ccii
翟鸿燊
                                    
    一、国学应用智慧TAT之亮剑精神A 
1. 角色就是人格 
    就像你一回家的时候，你一进屋里面，你已经是儿子，是姑娘啦，给老爸老妈倒怀水吧，你还觉得你是老总呢？还拿派呢？就像今天一样，你们往这儿一坐，你们之间是什么，同学，是朋友。 
    还有下属最忌讳的就是领导向他询问情况的时候，什么我不知道，我不清楚，该你知道的你凭什么不知道
    
                                
    • 
                                
  • [光速与宇宙]进行光速飞行的一些问题
                                    comsci
问题
                                    
     
 
     在人类整体进入宇宙时代，即将开展深空宇宙探索之前，我有几个猜想想告诉大家 
    仅仅是猜想。。。未经官方证实 
 
 
     1：要在宇宙中进行光速飞行，必须首先获得宇宙中的航行通行证，而这个航行通行证并不是我们平常认为的那种带钢印的证书，是什么呢？ 下面我来告诉
    
                                
    • 
                                
  • oracle undo解析
                                    cwqcwqmax9
oracle
                                    
    oracle undo解析2012-09-24 09:02:01     我来说两句       作者：虫师收藏    我要投稿 
 
Undo是干嘛用的？         &nb
    
                                
    • 
                                
  • java中各种集合的详细介绍
                                    dashuaifu
java集合
                                    
    一，java中各种集合的关系图 Collection       接口的接口     对象的集合  ├ List           子接口   &n
    
                                
    • 
                                
  • 卸载windows服务的方法
                                    dcj3sjt126com
windowsservice
                                    
    卸载Windows服务的方法 
在Windows中，有一类程序称为服务，在操作系统内核加载完成后就开始加载。这里程序往往运行在操作系统的底层，因此资源占用比较大、执行效率比较高，比较有代表性的就是杀毒软件。但是一旦因为特殊原因不能正确卸载这些程序了，其加载在Windows内的服务就不容易删除了。即便是删除注册表中的相 应项目，虽然不启动了，但是系统中仍然存在此项服务，只是没有加载而已。如果安装其他
    
                                
    • 
                                
  • Warning: The Copy Bundle Resources build phase contains this target's Info.plist
                                    dcj3sjt126com
iosxcode
                                    
           
      
http://developer.apple.com/iphone/library/qa/qa2009/qa1649.html 
Excerpt: 
 
 You are getting this warning because you probably added your Info.plist file to your Copy Bundle 
    
                                
    • 
                                
  • 2014之C++学习笔记（一）
                                    Etwo
C++EtwoEtwoiterator迭代器
                                    
            已经有很长一段时间没有写博客了，可能大家已经淡忘了Etwo这个人的存在，这一年多以来，本人从事了AS的相关开发工作，但最近一段时间，AS在天朝的没落，相信有很多码农也都清楚，现在的页游基本上达到饱和，手机上的游戏基本被unity3D与cocos占据，AS基本没有容身之处。so。。。最近我并不打算直接转型
    
                                
    • 
                                
  • js跨越获取数据问题记录
                                    haifengwuch
jsonpjsonAjax
                                    
    js的跨越问题，普通的ajax无法获取服务器返回的值。 
 
  第一种解决方案，通过getson，后台配合方式，实现。 
Java后台代码： 
protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
String ca
    
                                
    • 
                                
  • 蓝色jQuery导航条
                                    ini
JavaScripthtmljqueryWebhtml5
                                    
    效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/39.htmHTML文件代码： 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery鼠标悬停上下滑动导航条 - 柯乐义<
    
                                
    • 
                                
  • linux部署jdk,tomcat,mysql
                                    kerryg
jdktomcatlinuxmysql
                                    
    1、安装java环境jdk: 
    一般系统都会默认自带的JDK,但是不太好用，都会卸载了，然后重新安装。 
   1.1）、卸载： 
     （rpm -qa :查询已经安装哪些软件包； 
       rmp -q 软件包：查询指定包是否已
    
                                
    • 
                                
  • DOMContentLoaded VS onload VS onreadystatechange
                                    mutongwu
jqueryjs
                                    
    1. DOMContentLoaded 在页面html、script、style加载完毕即可触发，无需等待所有资源（image/iframe）加载完毕。（IE9+） 
 
2. onload是最早支持的事件，要求所有资源加载完毕触发。 
 
3. onreadystatechange 开始在IE引入，后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, fra
    
                                
    • 
                                
  • sql批量插入数据
                                    qifeifei
批量插入
                                    
    hi， 
  自己在做工程的时候，遇到批量插入数据的数据修复场景。我的思路是在插入前准备一个临时表，临时表的整理就看当时的选择条件了，临时表就是要插入的数据集，最后再批量插入到数据库中。 
   
WITH tempT AS (
SELECT
item_id AS combo_id,
item_id,
now() AS create_date
FROM
a
    
                                
    • 
                                
  • log4j打印日志文件 如何实现相对路径到 项目工程下
                                    thinkfreer
Weblog4j应用服务器日志
                                    
    最近为了实现统计一个网站的访问量，记录用户的登录信息，以方便站长实时了解自己网站的访问情况，选择了Apache 的log4j,但是在选择相对路径那块 卡主了，X度了好多方法(其实大多都是一样的内用，还一个字都不差的)，都没有能解决问题，无奈搞了2天终于解决了，与大家分享一下 
 
 
需求： 
用户登录该网站时，把用户的登录名,ip,时间。统计到一个txt文档里，以方便其他系统调用此txt。项目名
    
                                
    • 
                                
  • linux下mysql-5.6.23.tar.gz安装与配置
                                    笑我痴狂
mysqllinuxunix
                                    
    1.卸载系统默认的mysql 
 
[root@localhost ~]# rpm -qa | grep mysql 
mysql-libs-5.1.66-2.el6_3.x86_64
mysql-devel-5.1.66-2.el6_3.x86_64
mysql-5.1.66-2.el6_3.x86_64
[root@localhost ~]# rpm -e mysql-libs-5.1
    
                                
    •