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)

        

            

                
    
                    
  • 用 TensorFlow 搭建简单的手写数字识别模型
                        lozhyf
工作面试学习tensorflow人工智能python
                        
    一、引言手写数字识别是机器学习领域中一个经典且基础的问题，它在很多实际场景中都有广泛的应用，比如邮政系统中的邮件分拣、银行支票金额识别等。TensorFlow是一个强大的开源机器学习框架，由Google开发并维护，它提供了丰富的工具和接口，能帮助我们快速搭建和训练深度学习模型。在这篇博客中，我们将使用TensorFlow构建一个简单的神经网络模型，用于识别手写数字。二、环境准备在开始之前，你需要安
    
                    
    • 
                    
  • vue3+vite 自动引入export default的包
                        大橙子-
vue.js前端
                        
    importautoImportfrom'unplugin-auto-import/vite';exportdefaultdefineConfig({plugins:[vue(),vueJsx(),autoImport({imports:['vue','vue-router','pinia',{//相当于importuseRouterStackStorefrom'@/store/modules/r
    
                    
    • 
                    
  • vue制作导航栏html,Vue实现导航栏菜单
                        DataQueen
vue制作导航栏html
                        
    本文实例为大家分享了Vue实现导航栏菜单的具体代码，供大家参考，具体内容如下这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。menu.html导航栏左项目名称您好，用户！v-bind:class="{checked:index==nowIndex}"v-on:click="setTab('menu',index,menus)">{{menu.text}}菜单一的内容菜单二的内
    
                    
    • 
                    
  • vue3 项目如何接入 AI 大模型
                        代码搬运媛
人工智能
                        
    以下是在Vue3项目中接入AI大模型的一般步骤：准备工作确定要接入的AI模型，如OpenAI的gpt-3.5-turbo、科大讯飞的星火大模型等。选择AI模型及获取API密钥：注册对应AI平台的账号，进入账户设置页面找到“ViewAPIKeys”或类似选项，创建属于自己的API密钥，并妥善保存。创建Vue项目并安装依赖打开命令行，使用vuecreate项目名命令创建一个新的Vue项目，按照提示完成
    
                    
    • 
                    
  • vue-router 中滚动行为设置的妙用
                        代码搬运媛
vue.jsjavascript前端
                        
    在vue-router里，滚动行为设置能够对路由切换时的页面滚动位置进行控制，这在单页面应用（SPA）里十分有用，能够为用户带来更流畅、更符合预期的浏览体验。下面为你详细介绍滚动行为设置的作用和使用方法。作用恢复滚动位置当用户在某个页面滚动到特定位置后，再导航到其他页面，之后又返回到该页面时，滚动行为设置可以让页面恢复到之前的滚动位置。这在浏览长页面或者列表页时非常实用，用户无需重新滚动到之前查看
    
                    
    • 
                    
  • DeepSeek 助力 Vue 开发：打造丝滑的导航栏（Navbar）
                        宝码香车
#DeepSeekvue.js前端javascriptecmascriptDeepSeek
                        
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue开发：打造丝滑的导航栏（Navbar）前言页面效果指令输入属性定义1.导航栏样式相关2.导航项相关3.响应式相关4.对齐方式相关事件定义1.导航项点击事件2.菜单折叠切换事件其他建议1.可访问性2.动画效果3.图标支
    
                    
    • 
                    
  • 关于wordpress建站遇到的问题
                        bug菌¹
全栈Bug调优(实战版)#CSDN问答解惑(全栈版)android
                        
    本文收录于《全栈Bug调优(实战版)》专栏，主要记录项目实战过程中所遇到的Bug或因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！问题描述使用Wordpress搭建网站遇到的问题我目前使用了AWS的云服务器在这个云服务器的基础上搭建了AApanel(国内叫宝塔面板),与此同时我也购买了域名和做了DN
    
                    
    • 
                    
  • vue3 + vite引入地址路径报错，以及无法点击跳转相应的文件
                        zmyalh
前端javascriptvue.js
                        
    vue3+vite引入地址路径报错，以及无法点击跳转相应的文件在项目中找到tsconfig.json，或者jsconfig.json文件，使用一下代码替换即可。如果两个文件都不存在，如果项目使用了ts，就创建tsconfig.json文件，复制下方代码。如果不是使用的ts，就创建jsconfig.json文件，复制下方代码。配置完成后关掉软件重启！！！{"compilerOptions":{"ba
    
                    
    • 
                    
  • vue播放m3u8视频
                        zmyalh
html视频video前端
                        
    这里封装成组件先安装插件npmivue-video-player-S//版本"^5.0.2"npmivideojs-flash-S//播放rtmpnpmivideojs-contrib-hls-S//播放m3u8父页面：//传入视频地址videoUrl页面引入importvideosfrom"../../../components/videos/videos.vue";components:{vi
    
                    
    • 
                    
  • NFC碰一碰发视频源码高质量矩阵宣传视频，支持OEM
                        余~~18538162800
python开发语言音视频
                        
    一、引言在当今竞争激烈的商业环境中，创新的拓客方式对于企业的生存与发展至关重要。NFC（NearFieldCommunication）碰一碰技术的出现，为营销领域带来了新的机遇。结合视频传播的强大影响力，NFC碰一碰发视频拓客系统应运而生。本文将深入探讨该系统的源码搭建过程，并详细阐述如何实现对OEM（原始设备制造商）的支持，为开发者和企业提供一套全面的技术指南。二、系统架构设计（一）NFC交互层
    
                    
    • 
                    
  • python ffmpeg直播_FFmpeg+Nginx+Rtmp+HLS+Videojs搭建直播网站（理论与实战）
                        weixin_39565300
pythonffmpeg直播
                        
    第1章直播原理与架构28分钟2节1-1直播原理与架构直播原理与架构「仅限付费用户」点击下载“直播原理与架构.pdf”[14:53]开始学习1-2甜点：福优学苑--简历包装与面试技巧甜点：福优学苑--简历包装与面试技巧「仅限付费用户」点击下载“福优学苑--简历包装与面试技巧--51other.pdf”[13:36]开始学习第2章亲手搭建FFmpeg+Nginx直播网站1小时48分钟11节2-1直播引
    
                    
    • 
                    
  • 第 4-2 课：MongoDB 常用命令
                        Java大联盟
案例上手Spring全家桶SpringSpringBootSpringCloudSpringMVCSpringSpringBootSpring
                        
    前言上节课我们已经成功搭建起来MongoDB服务器，本节课我们来介绍MongoDB数据库的常用命令。MongoDB的命令比传统SQL更加简便，使用起来更加方便，它的操作更贴近面向对象思想，这是因为MongoDB的存储结构是BSON格式，类似于JSON的一种数据格式，所以MongoDB操作起来非常灵活，不会像传统的关系型数据库那样有很多限制。我们要介绍的常用命令大致分为以下3种。对数据库的操作，包括
    
                    
    • 
                    
  • vue中nextTick函数和react类似实现
                        向画
vue.jsreact.js前端
                        
    Vue3基本用法：import{nextTick}from'vue';//全局调用nextTick(()=>{//在下一个DOM更新循环后执行的代码});//在组件内部调用setup(){asyncfunctionhandleUpdate(){//修改数据...awaitnextTick();//在数据引发的DOM更新完成后执行的代码}}nextTick函数现在作为vue包的一个导出成员，需要显式
    
                    
    • 
                    
  • 使用nginx+rtmp+ffmpeg实现桌面直播
                        handsomestWei
后端nginxffmpegrtmplive直播推流拉流
                        
    使用nginx+rtmp+ffmpeg实现桌面直播流媒体服务器搭建dockerrundocker镜像基于添加了rtmp模块的nginx，和ffmpegdockerpullalfg/nginx-rtmpdockerrun-d-p1935:1935-p8080:80--name=nginx-rtmpalfg/nginx-rtmprtmp模块说明进入容器内部查看dockerps|grepalfg/ngi
    
                    
    • 
                    
  • CentOS7搭建DNS服务器配置详解
                        Hadesls
Linux服务器网络运维
                        
    CentOS7搭建DNS服务器配置详解1、安装BIND服务器软件并启动yum-yinstallbindbind*systemctlstartnamed.service#启动服务systemctlenablenamed#设为开机启动2、查看named进程是否正常启动ps-eaf|grepnamed#检查进程ss-nult|grep:53#检查监听端口3、开放TCP和UDP的53端口firewall-
    
                    
    • 
                    
  • vue面试题|[2025-1-10]
                        ○陈
vue面试题vue.jsjavascript前端
                        
    1.vue和jquery的区别是什么？1.原理不同vue就是数据绑定；jq是先获取dom再处理2.着重点不同vue是数据驱动，jq是着重于页面3.操作不同4.未来发展不同2.vuex的响应式处理vuex是vue的状态管理工具vue中可以直接触发methods中的方法，vuex是不可以的。处理异步，当触发事件的时候，会通过dispatch来访问actions中的方法，actions中的commit会
    
                    
    • 
                    
  • k8s rook-ceph MountDevice failed for volume pvc An operation with the given Volume ID already exists
                        时空无限
Kuberneteskubernetesceph
                        
    https://github.com/rook/rook/issues/4896环境kubeadm搭建的k8s集群，rook-ceph部署的ceph存储，monpod所在宿主机和挂载客户端机器pod所在机器不在一个二层网络里。故障pod挂载不上pvc，describepod信息如下MountDevicefailedforvolumepvcAnoperationwiththegivenVolumeI
    
                    
    • 
                    
  • rook-ceph无法登录dashboard
                        时空无限
Kubernetescephcephkubernetes
                        
    环境ubuntu22.04tlsk8s1.20.2现象搭建好ceph集群环境后，执行如下命令获取admin登录账号的密码kubectl-nrook-cephgetsecretrook-ceph-dashboard-password-ojsonpath="{['data']['password'
    
                    
    • 
                    
  • 如何使用 Docker 搭建 FastAPI 环境, 本地仅编辑代码
                        Acaibird.
eureka云原生
                        
    在开发FastAPI应用时，我们有时希望将应用容器化，以便于部署和管理，同时避免污染本地的Python环境。使用Docker可以轻松实现这一目标，但如果你想在容器中安装依赖并进行调试，如何在不破坏本地环境的情况下管理依赖呢？本文将介绍如何通过Docker将FastAPI应用容器化，并展示如何进入容器安装依赖。1.项目结构假设你已经有一个简单的FastAPI项目结构，主要包含以下文件：Dockerf
    
                    
    • 
                    
  • electron学习笔记
                        weixin_46452138
electron学习javascript
                        
    electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局，使用JavaScript来控制用户行为和业务逻辑，使用Node.js来通信、处理音频视频等，几乎所有的Web前端技术和框架（jQuery、Vue、React、Angular等）都可以应用到桌面GUI开发中。二、开发前基
    
                    
    • 
                    
  • 【开源免费】基于Vue和SpringBoot的医院后台管理系统（附论文）
                        杨荧
vue.jsspringboot前端开源springcloudjavascript
                        
    本文项目编号T170，文末自助获取源码\color{red}{T170，文末自助获取源码}T170，文末自助获取源码目录一、系统介绍二、数据库设计三、配套教程3.1启动教程3.2讲解视频3.3二次开发教程四、功能截图五、文案资料5.1选题背景5.2国内外研究现状六、核心代码6.1查询数据6.2新增数据6.3删除数据一、系统介绍在管理员功能模块确定下来的基础上，对管理员各个功能进行设计，确定管理员功
    
                    
    • 
                    
  • Oracle快速运行一指禅
                        weixin_30865427
数据库操作系统
                        
    对于oracle数据库下的企业级应用开发，经常会使用到新建用户，新建表空间以及数据的迁移工作。虽然目前互联网存在很多单个问题的解决方案，但是比较零散，本博文结合研发兄弟们的实际现状，提供一套完整初始研发数据库环境的搭建手段，免得导出搜素。登录相关操作默认有以下2个超级用户：sys：超级管理员用户，具备所有操作的权限，包括启动，停止，修改数据库模式等所有操作；一般我们进行特殊操作都会使用sys用户；
    
                    
    • 
                    
  • vue 的axios请求数据2种方式 很重要
                        缘飞梦
vue前端技术vueaxios请求数据的方法
                        
    show:function(){//post方式//赋值给变量self//使用axios请求后台的数据get和post的两种方式varself=this;varurl='xxxx.json';axios.post(url,{params:{username:"yyyyy",password:'18888'}}).then(function(response){console.log(respons
    
                    
    • 
                    
  • 本地运行 DeepSeek-R1 的成本究竟多高？
                        
前端javascript
                        
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读本地运行DeepSeek-R1的成本究竟多高？DeepSeek让人们对大规模生成式模型的追求更进一步，甚至有人想在本地跑下规模高达671B参数的版本。但要在家里开这种“巨无霸”，可不是闹着玩的：光是推理就对硬件提出了非常高的要求。这篇文章将大致拆解一下，如果真想在个人电脑上运行DeepSeek-R1，可能需
    
                    
    • 
                    
  • 构建 Next.js 应用时的安全保障与风险防范措施
                        
前端javascript
                        
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读在Web应用开发过程中，确保应用的安全性至关重要，这不仅能保护用户数据，还能防止应用本身遭受各种安全攻击。Next.js作为一款备受欢迎的React框架，内置了许多安全功能和推荐做法，但开发者仍需清楚地了解潜在的安全隐患，并采取合适的防范策略。一、Next.js安全问题概述尽管Next.js为构建安全应用提
    
                    
    • 
                    
  • SenseVoice 实测，阿里开源语音大模型，识别效果和效率优于 Whisper，居然还能检测掌声、笑声！5分钟带你部署体验
                        AI码上来
AI实战开源whisperxcode
                        
    前段时间，带着大家捏了一个对话机器人：手把手带你搭建一个语音对话机器人，5分钟定制个人AI小助手（新手入门篇）其中语音识别（ASR）方案，采用的是阿里开源的FunASR，这刚不久，阿里又开源了一个更强的音频基础模型，该模型具有如下能力：语音识别（ASR）语种识别（LID）语音情感识别（SER）声学事件分类（AEC）声学事件检测（AED）传送门：https://github.com/FunAudio
    
                    
    • 
                    
  • Vue中事件名的命名规范
                        sakuraxiaoyu
vue.js前端javascript
                        
    Vue中事件名的命名规范起因：本人之前不太写vue的项目，最近接触了vue的代码，在学习的过程中同时也会伴随着一点疑惑。比如一以下面的父子组件的事件传递为例：父组件：显然，父组件有个自定义事件refresh-list需要子组件进行接收。子组件：...constemit=defineEmits(["refreshList"]);...//触发事件emit("refreshList");我疑惑的点在于
    
                    
    • 
                    
  • DeepSeek 助力 Vue 开发：打造丝滑的表单验证（Form Validation）
                        宝码香车
#DeepSeekvue.js前端javascriptecmascriptDeepSeek
                        
    前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦目录DeepSeek助力Vue开发：打造丝滑的表单验证（FormValidation）前言页面效果指令输入组件属性定义1.表单数据绑定相关2.验证规则相关3.样式和布局相关4.其他组件事件定义1.验证相关2.表单提交相关3.字段值变化相关其他可能
    
                    
    • 
                    
  • [从零开始的 Vue3 系列]：第四章——Vue3 中常用组件通信全解析
                        花信少年plus
从零开始的vue3系列vue.jsjavascript前端
                        
    前言本系列将从零开始，系统性地介绍Vue3的常用API，逐步深入每个核心概念与功能模块。通过详尽的讲解与实战演示，帮助大家掌握Vue3的基础与进阶知识，最终具备独立搭建完整Vue3项目的能力。vue3中的组件通信Vue3提供了多种方式来进行组件之间的通信。根据场景的不同，开发者可以选择最合适的方式进行数据的传递与事件的处理。1.通过Props传递数据（父->子）父组件：importChildCom
    
                    
    • 
                    
  • SpringBoot 新手入门（实操）
                        李恩11
springboot后端java
                        
    SpringBoot是一个开源框架，旨在简化基于Spring的Java应用程序的开发。它通过提供一系列默认配置和约定大于配置的理念，让开发者可以更快速地创建和部署应用。以下是一个SpringBoot新手入门的实操指南，帮助你从零开始创建一个简单的SpringBoot应用程序。环境准备安装JDK:SpringBoot需要JavaDevelopmentKit(JDK)8或更高版本。你可以从Oracle
    
                    
    • 
                                
  • 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
    
                                
    •