缓缓先生
缓缓先生

造轮子：写vue组件库orange-ui

项目搭建

项目效果地址

项目搭建参考 从零开始搭建 Vue 组件库 VV-UI

项目地址

记录模仿 VV-UI 组件库造轮子中遇到的问题，以及解决方案

新建项目

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

npm install vue-cli -g
vue init webpack origin-ui
cd origin-ui
npm install
npm run dev

项目可以正常启动，在此基础上进行改造

更改目录

|-- examples            // 原 src 目录，改成 examples 用作示例展示
  |-- assets            // api文档logo 样式文件
  |-- docs              // api文档
  |-- router            // api文档路由
|-- packages            // 新增 packages 用于编写存放组件
  |-- button            // 组件
  |-- theme-default     // 组件样式 gulp 运行目录
  |-- lib               // 编译后css
  |-- src               // 编译前css
  |-- gulpfile.js       // gulp 写打包css的task
  |-- salad.config.json // BEM的配置文件
  |-- index.js          // 导出组件

原 src 目录，改成 examples 用作示例展示，需要对应修改 webpack 配置

把原先的编译指向 src 的目录改成 examples

{
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  include: [resolve('examples'), resolve('test'), resolve('packages')],// 修改
}
entry: {
  app: './examples/main.js' // 程序入口修改
},
resolve: {
  alias: {
    vue$: 'vue/dist/vue.esm.js',
    '@': resolve('examples') // 根据实际情况修改
  }
},

如何编写文档

使用vue-markdown-loader在 vue 下可以去写 markdown 文档

安装

# For Vue2
npm i vue-markdown-loader -D
npm i  vue-loader vue-template-compiler -D

使用

webpack.config.js file:

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

在 example/docs 目录下新建 test.md

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

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

打开浏览器访问http://localhost:8080/#/test

实现 demo/代码演示

  • 需求 1 就是拦截 import,并且解析 markdowm 语法
  • 需求 2 在析 markdown 中也可以写 Vue 的组件

全部配置可参考Vue 加载 Markdown 格式组件有详细注释

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 本身是我们定义好的组件：
基本用法：
::: demo
默认按钮
:::
如何编写组件
环境准备完毕，紧接着要开始编写组件，考虑的是组件库，所以我们竟可能让我们的组件支持全局引入和按需引入，如果全局引入，那么所有的组件需要要注册到 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 { install, Button, Row, Col }
既然是单页面应用，必然要去解决样式冲突问题，如果组件内使用 soped，那么样式就无法从组件内抽离出来，达不到可定制化主题颜色的目的。我们需要一套可以分离处理的样式，可以自行编译，可以相互不污染。这时候 css 的 BEM 规范就显得尤为重要。如果你还不知道什么是 BEM 参考： http://www.w3cplus.com/css/cs...。
说到这里，目前对 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'))
})
关于 gulp 的使用
npm install --global gulp
npm install --save-dev gulp
进入 packages/theme-default 中，运行 gulp
gulp

                    
                

        
你可能感兴趣的:(element-ui,vue.js)

        

            

                
    
                    
  • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
    
                    
    • 
                    
  • 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:'
    
                    
    • 
                    
  • 博客网站制作教程
                        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
    
                    
    • 
                    
  • vant-element-ts一起使用存在的问题
                        flynn_
问题总结vue
                        
    由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
    
                    
    • 
                    
  • 【前端】vue 报错:The template root requires exactly one element
                        程序员-张师傅
前端前端vue.jsjavascript
                        
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
    
                    
    • 
                    
  • 说说在 Vue.js 中如何实现组件间通信
                        deniro

                        
    1用法假设父组件的模板包含子组件，我们可以通过props来正向地把数据从父组件传递给子组件。props可以是字符串数组，也可以是对象。html：js：Vue.component('deniro-component',{props:['message'],template:'{{message}}'});varapp=newVue({el:'#app',data:{}});渲染结果：＂嫦娥四号＂成功
    
                    
    • 
                    
  • 解决前端导出excel文件，打开为乱码
                        荔枝，你让我拿什么荔枝！
vue前端elementuivue.js
                        
    前端开发中，导入和导出文件是比较常见的业务场景，常见的情况是：后端返回一个二进制的流文件，前端将其转化为excel文件即可。但是往往会出现转化后的excel文件内容位乱码的情况，本文中提供了两个解决方案：方案一：用户自定义上传方法添加附件添加附件代码解读：上述代码采用了element-ui的el-upload文件上传的组件。改组件有两种文件上传的方式：1.组件自带的上传方法，只需要给其设置acti
    
                    
    • 
                    
  • python基于django/flask的NBA球员大数据分析与可视化python+java+node.js
                        QQ_511008285
pythondjangoflaskjavaspringboot数据分析
                        
    前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navicat/SQLyog等都可以本文针对NBA球员的大数据进行
    
                    
    • 
                    
  • Java基于spring boot的国产电影数据分析与可视化python+java+node.js
                        QQ_511008285
javaspringboot数据分析pythondjangovue.jsflask
                        
    前端开发框架:vue.js数据库mysql版本不限后端语言框架支持：1java(SSM/springboot)-idea/eclipse2.Nodejs+Vue.js-vscode3.python(flask/django)--pycharm/vscode4.php(thinkphp/laravel)-hbuilderx数据库工具：Navicat/SQLyog等都可以  该系统使用进行大数据处理和
    
                    
    • 
                    
  • 【前端】解决element-ui两层dialog嵌套，遮罩层消失的问题。
                        道着无为法自然
前端ui
                        
    背景总觉得element-uidialog的遮罩层逻辑有点晦涩，当一个dialog内嵌另一个dialog时，它的遮罩层却始终只有一个，也就是下方class="v-modal"的div。可以看到，v-modal的层级总是比dialog低一层。问题当两层dialog为直接父子关系时，我们可以简单的使用其属性append-to-body,modal-append-to-body来解决问题：如，第二层di
    
                    
    • 
                    
  • Vue插槽：提升Vue组件灵活性的利器
                        anyup_前端梦工厂
Vue.js前端javascriptvue.js
                        
    一.介绍什么是插槽插槽是Vue.js中一种强大的组件封装机制，用于在组件间复用可以动态填充的内容。简而言之，插槽允许我们在组件的模板中定义一些可变的区域，在使用组件时，可以灵活地填充不同的内容进入这些区域。当我们的组件有一些需要在使用组件时才能确定的内容时，比如按钮、文字、图标等，使用插槽可以非常方便地将这些内容传递给组件。二.基础插槽1.单个插槽单个插槽也可以称为默认插槽（DefaultSlot
    
                    
    • 
                    
  • 前端同学必备：教你如何安装、使用Chrome的vue-devtools插件
                        界忆
前端编程Vue-devtools插件chromedevtools
                        
    I.介绍vue-devtools插件Vue-devtools是一个Chrome浏览器插件，它是一个浏览器调试工具，用于开发Vue.js应用程序。它可以用于Vue.js应用程序的调试，可以更好地了解应用程序的结构和状态，以及帮助快速修复代码错误。Vue-devtools插件的作用和优势如下：1.调试Vue.js应用程序：Vue-devtools是一个强大的调试工具，可以帮助开发人员正确地调试应用程序
    
                    
    • 
                    
  • python毕业设计作品：python闲置物品二手交易平台系统设计与实现毕业设计源代码（Django框架）
                        黄菊华老师
毕设资料python二手交易平台系统
                        
    博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSD
    
                    
    • 
                    
  • uni-app开发微信小程序
                        hong161688
uni-app微信小程序小程序
                        
    uni-app是一个使用Vue.js开发所有前端应用的框架，它支持编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/字节跳动/QQ/京东等）平台。使用uni-app开发微信小程序，可以充分利用Vue.js的开发效率和小程序平台的原生能力，实现跨平台的高效开发。以下将详细介绍使用uni-app开发微信小程序的全过程，包括项目搭建、开发、调试、测试及发布等环节，内容将尽量达到或超
    
                    
    • 
                    
  • 使用 uni-app 开发微信小程序：深入教程与技巧
                        代码伐木匠
笔记本uni-app微信小程序notepad++
                        
    使用uni-app开发微信小程序：深入教程与技巧uni-app是一个使用Vue.js语法开发跨平台应用的框架，能够编译到iOS、Android、H5、微信小程序等多个平台。通过uni-app，你可以一套代码同时生成多个端的应用，极大提升开发效率。本文将带你深入了解如何使用uni-app开发微信小程序，并提供大量实践经验与技巧。1.环境配置与项目创建要开始使用uni-app开发微信小程序，首先需要搭
    
                    
    • 
                    
  • Vue Router push方法的使用
                        hzw0510
Vuevue.js前端javascript
                        
    VueRouterpush方法的使用this.$router.push是VueRouter提供的一个方法，用于在Vue.js应用中进行编程式导航。它的作用是将用户导航到应用中的不同路由。基本作用this.$router.push方法会在浏览器历史记录中添加一个新的记录，并导航到指定的路由。它的工作方式类似于点击一个组件，或者在浏览器中手动输入URL后点击回车。使用示例以下是一些使用this.$ro
    
                    
    • 
                    
  • 组件通信——provide 和 inject 实现爷孙组件通信
                        你不讲 wood
javascriptvue.js前端
                        
    provide和inject实现爷孙组件通信介绍provide和inject是Vue.js提供的一种在组件之间共享数据的机制，它允许在组件树中的任何地方注入依赖项。这对于跨越多个层级的组件间通信特别有用，因此无需手动将prop数据逐层传递下去。provide：在一个组件中使用provide方法来定义要提供的数据或方法。provide方法返回一个对象，该对象包含了要提供的数据或方法。inject：在
    
                    
    • 
                    
  • vue.js在js里获取属性，触发vue.js内的方法
                        摸鱼的张三
javascriptvue.jsflutter
                        
    在script标签内把appVue设置varvarappVue=newVue({})appVue不能跨标签也就是说不能这样写varappVue=newVue({})console.log(appVue)上面这个是错的varappVue=newVue({})console.log(appVue)这个是vue2.js的版本这样写可以vue3.js是没有的然后拿到appVue就可以绑定原生事件触发app
    
                    
    • 
                    
  • Vue 图片预览功能实现指南
                        繁依Fanyi
vue.js前端javascriptpython人工智能算法开发语言
                        
    1.介绍在现代web应用程序中，图片预览功能提升了用户体验，使用户可以在上传图片之前查看图片内容。本文将详细介绍如何在Vue.js应用中实现图片预览功能，包括基本实现、进阶功能、与ElementUI的集成、常见优化技巧以及与其他库的结合使用。2.基本功能实现2.1环境准备确保你的开发环境已经配置好，包括VueCLI和Node.js。如果还没有安装VueCLI，你可以通过以下命令安装：npminst
    
                    
    • 
                    
  • 前后端分离，Asp.net core webapi 如何配置跨域
                        代码掌控者
C#asp.netcore.netcore经验分享c#
                        
    前言可以说，前后端分离已经成为当今信息系统项目开发的主流软件架构模式，微服务的出现，让前后端分离发展更是迅速，大量优秀的前端框架如vue.js、react的出现，也让前后端分离趋势加快。所谓的前后端分离软件架构模式，就是指将前端和后端的开发完全分离，后端负责提供API接口和数据处理，而前端通过各种现代的JavaScript技术如AJAX或者Fetch等，来调用后端提供的API接口获取数据，从而构建
    
                    
    • 
                    
  • Uni-app 开发微信小程序
                        vvvae1234
uni-app
                        
    随着移动互联网的发展，微信小程序已经成为一种流行的应用开发模式。Uni-app作为一种跨平台的开发框架，使用Vue.js语法，能够方便快速地开发出微信小程序、H5、App等多端应用。本指南将引导您从环境配置到实战案例开发，帮助您快速掌握使用Uni-app开发微信小程序的技巧。2.Uni-app概述2.1什么是Uni-app？Uni-app是一个使用Vue.js语法的跨平台开发框架，允许开发者用一套
    
                    
    • 
                    
  • 前后端时间转换的那些常见问题及处理方法
                        繁依Fanyi
状态模式python算法java开发语言androidgithub
                        
    在现代的Web开发中，前后端分离的架构已经成为主流，尤其是在SpringBoot和Vue.js的组合中。开发者在这种架构下经常遇到的一个问题就是如何处理时间的转换和显示。前端和后端对时间的处理方式不同，可能会导致时间在传递过程中出现问题，比如时区不同步、格式不一致等。因此，本文将详细讨论在SpringBoot+Vue前后端分离架构中如何处理时间转换问题，并提供一些解决方案。一、前后端时间处理的常见
    
                    
    • 
                    
  • cross-plateform 跨平台应用程序-06-uni-app 介绍
                        知识分享官
uni-app
                        
    详细介绍一下uni-app？whatuni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一次代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/京东/美团/钉钉/淘宝）、快应用等多个平台。以下是uni-app的一些核心特性和优势：使用Vue.js开发：uni-app基于Vue.js，这意味着如果你已经熟悉Vue.js
    
                    
    • 
                    
  • Element-UI 组件实现面包屑导航栏
                        你不讲 wood
uijavascriptvue.js前端elementui
                        
    Element-UI组件实现面包屑导航栏面包屑导航栏是一种辅助导航系统，它显示用户当前位置在网站或应用层次结构中的位置，可以帮助用户了解他们当前页面的位置，并且可以方便地返回到上级页面或首页。面包屑导航栏的实现原理：路径记录与解析：当用户浏览网站时，面包屑导航记录用户经过的路径，通常是从主页到当前页面的一系列链接。每当用户访问一个新的页面时，面包屑导航会根据当前页面的路径信息更新显示的内容。路由匹
    
                    
    • 
                    
  • element-ui离线文档制作
                        看不懂世界
基础环境搭建uitypescriptjavascriptvue.jsnode.jsnpmelementui
                        
    第一步:克隆源代码Gitee地址:https://gitee.com/ElemeFE/element.gitGitHub地址:https://github.com/ElemeFE/element.git#代码克隆(本地需要有git环境)gitcloneelement-ui代码地址第二步:打包查看package.json文件,找到scripts节点,此节点用于指定脚本命令,供npm直接调用.在scr
    
                    
    • 
                    
  • 从学习vue到uni-app的心得感悟
                        crazy_章鱼哥
学习uni-app前端javascript
                        
    前言你是否想过，只用一套代码，就能开发出适用于多个平台的前端应用？你是否想过，只用Vue.js这样一个简洁强大的框架，就能实现各种炫酷的功能和效果？你是否想过，只用uni-app这样一个神器，就能成为一个高手？如果你有这样的想法，那么就跟我一起来学习uni-app吧！uni-app是一个基于Vue.js的全端开发框架，它可以让你用一套代码，同时运行在H5、小程序、App等多个平台上。它具有跨平台、
    
                    
    • 
                    
  • 基于java+SpringBoot+Vue的小徐影城管理系统设计与实现
                        paterWang
Java精品毕设实战计算机毕业设计Javajavaspringbootvue.js
                        
    开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis工具:IDEA/Ecilpse、Navicat、Maven系统简介小徐影城管理系统是一款基于Java、SpringBoot和Vue.js技术开发的影院管理系统，旨在为用户提供一个便捷、高效的在线购票和影院管理平台。系统通过B/S架构，实现了管理员和用户两端的功能操作，使得影院管理更加系统化、规范化。整体功能包含：电影信息
    
                    
    • 
                    
  • vue前端性能优化之cdn的使用
                        不cong明的亚子
性能优化vue+elementui前端javascriptvue
                        
    优化原因项目中首页加载过慢，原因是js,css静态资源第一次加载的时间长vue.config.js'usestrict'......constcdn={js_cdn:['https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js','https://unpkg.com/[email protected]/dist/vue.js','https://unpkg
    
                    
    • 
                    
  • Vue 项目性能优化技巧分享
                        2401_84437170
程序员vue.js性能优化前端
                        
    importVuefrom‘vue’;import{Button,Select}from‘element-ui’;Vue.use(Button)Vue.use(Select)1.9、优化无限列表性能如果你的应用存在非常长或者无限滚动的列表，那么需要采用窗口化的技术来优化性能，只需要渲染少部分区域的内容，减少重新渲染组件和创建dom节点的时间。你可以参考以下开源项目vue-virtual-scrol
    
                    
    • 
                    
  • vue浏览器缓存sessionStorage、localStorage、Cookie
                        Liumoui
vue.js缓存前端
                        
    在Vue.js项目中，管理浏览器缓存是常见的需求，主要可以通过sessionStorage、localStorage和Cookie来实现。下面分别介绍这三种方式及其用法。1.sessionStoragesessionStorage用于存储在会话（即浏览器窗口关闭前）期间的数据。每次打开一个新的窗口或标签页都会有一个新的会话。使用方法存储数据sessionStorage.setItem('key',
    
                    
    • 
                                
  • ASM系列六 利用TreeApi 添加和移除类成员
                                    lijingyao8206
jvm动态代理ASM字节码技术TreeAPI
                                    
        同生成的做法一样，添加和移除类成员只要去修改fields和methods中的元素即可。这里我们拿一个简单的类做例子，下面这个Task类，我们来移除isNeedRemove方法，并且添加一个int 类型的addedField属性。 
  
package asm.core;

/**
 * Created by yunshen.ljy on 2015/6/
    
                                
    • 
                                
  • Springmvc-权限设计
                                    bee1314
springWebjsp
                                    
     
 万丈高楼平地起。 
 
权限管理对于管理系统而言已经是标配中的标配了吧，对于我等俗人更是不能免俗。同时就目前的项目状况而言，我们还不需要那么高大上的开源的解决方案，如Spring Security，Shiro。小伙伴一致决定我们还是从基本的功能迭代起来吧。 
目标：  
1.实现权限的管理（CRUD）
2.实现部门管理 （CRUD)
3.实现人员的管理 （CRUD）
4.实现部门和权限
    
                                
    • 
                                
  • 算法竞赛入门经典（第二版）第2章习题
                                    CrazyMizzz
c算法
                                    
    2.4.1 输出技巧 
#include <stdio.h> 
 
int 
main() 
{ 
 int i, n; 
 
 scanf("%d", &n); 
 for (i = 1; i <= n; i++) 
 printf("%d\n", i); 
 return 0; 
} 
 
习题2-2 水仙花数(daffodil
    
                                
    • 
                                
  • struts2中jsp自动跳转到Action
                                    麦田的设计者
jspwebxmlstruts2自动跳转
                                    
    1、在struts2的开发中，经常需要用户点击网页后就直接跳转到一个Action，执行Action里面的方法，利用mvc分层思想执行相应操作在界面上得到动态数据。毕竟用户不可能在地址栏里输入一个Action（不是专业人士） 
  
2、＜jsp:forward page="xxx.action" /＞ ，这个标签可以实现跳转，page的路径是相对地址,不同与jsp和j
    
                                
    • 
                                
  • php 操作webservice实例
                                    IT独行者
PHPwebservice
                                    
    首先大家要简单了解了何谓webservice，接下来就做两个非常简单的例子，webservice还是逃不开server端与client端。我测试的环境为：apache2.2.11 php5.2.10做这个测试之前，要确认你的php配置文件中已经将soap扩展打开，即extension=php_soap.dll; 
OK 现在我们来体验webservice 
//server端 serve
    
                                
    • 
                                
  • Windows下使用Vagrant安装linux系统
                                    _wy_
windowsvagrant
                                    
    准备工作： 
下载安装 VirtualBox ：https://www.virtualbox.org/ 
下载安装 Vagrant ：http://www.vagrantup.com/ 
下载需要使用的 box ： 
官方提供的范例：http://files.vagrantup.com/precise32.box 
还可以在 http://www.vagrantbox.es/ 
    
                                
    • 
                                
  • 更改linux的文件拥有者及用户组(chown和chgrp)
                                    无量
clinuxchgrpchown
                                    
    本文（转）  
http://blog.163.com/yanenshun@126/blog/static/128388169201203011157308/   
http://ydlmlh.iteye.com/blog/1435157   
一、基本使用：    
使用chown命令可以修改文件或目录所属的用户： 
       命令
    
                                
    • 
                                
  • linux下抓包工具
                                    矮蛋蛋
linux
                                    
    原文地址： 
http://blog.chinaunix.net/uid-23670869-id-2610683.html 
tcpdump -nn -vv -X udp port 8888 
上面命令是抓取udp包、端口为8888 
netstat -tln 命令是用来查看linux的端口使用情况 
 
13 . 列出所有的网络连接 
lsof -i 
14. 列出所有tcp 网络连接信息 
l
    
                                
    • 
                                
  • 我觉得mybatis是垃圾！：“每一个用mybatis的男纸，你伤不起”
                                    alafqq
mybatis
                                    
    最近看了  
每一个用mybatis的男纸，你伤不起 
原文地址 ：http://www.iteye.com/topic/1073938 
发表一下个人看法。欢迎大神拍砖； 
 
个人一直使用的是Ibatis框架，公司对其进行过小小的改良； 
最近换了公司，要使用新的框架。听说mybatis不错；就对其进行了部分的研究； 
 
发现多了一个mapper层；个人感觉就是个dao； 
 
 
    
                                
    • 
                                
  • 解决java数据交换之谜
                                    百合不是茶
数据交换
                                    
    交换两个数字的方法有以下三种  ，其中第一种最常用
 
  
/*
输出最小的一个数
*/
public class jiaohuan1 {

	public static void main(String[] args) {
	int a =4;
	int b = 3;
		if(a<b){
         //  第一种交换方式
		int tmep =
    
                                
    • 
                                
  • 渐变显示
                                    bijian1013
JavaScript
                                    
    <style type="text/css">
 #wxf {
  FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#97FF98);
  height: 25px;
 }
</style>
    
                                
    • 
                                
  • 探索JUnit4扩展：断言语法assertThat
                                    bijian1013
java单元测试assertThat
                                    
    一.概述 
        JUnit 设计的目的就是有效地抓住编程人员写代码的意图，然后快速检查他们的代码是否与他们的意图相匹配。 JUnit 发展至今，版本不停的翻新，但是所有版本都一致致力于解决一个问题，那就是如何发现编程人员的代码意图，并且如何使得编程人员更加容易地表达他们的代码意图。JUnit 4.4 也是为了如何能够
    
                                
    • 
                                
  • 【Gson三】Gson解析{"data":{"IM":["MSN","QQ","Gtalk"]}}
                                    bit1129
gson
                                    
       
如何把如下简单的JSON字符串反序列化为Java的POJO对象? 
{"data":{"IM":["MSN","QQ","Gtalk"]}} 
  
下面的POJO类Model无法完成正确的解析： 
  
import com.google.gson.Gson;
    
                                
    • 
                                
  • 【Kafka九】Kafka High Level API vs. Low Level API
                                    bit1129
kafka
                                    
    1. Kafka提供了两种Consumer API 
 
 High Level Consumer API 
 Low Level Consumer API(Kafka诡异的称之为Simple Consumer API，实际上非常复杂) 
 
在选用哪种Consumer API时，首先要弄清楚这两种API的工作原理，能做什么不能做什么，能做的话怎么做的以及用的时候，有哪些可能的问题 
 
    
                                
    • 
                                
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等
                                    ronin47
nginx lua
                                    
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com 
Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 
location /{
    
                                
    • 
                                
  • java-归并排序
                                    bylijinnan
java
                                    
    
import java.util.Arrays;


public class MergeSort {

	
	public static void main(String[] args) {

		int[] a={20,1,3,8,5,9,4,25};
		mergeSort(a,0,a.length-1);
		System.out.println(Arrays.to
    
                                
    • 
                                
  • Netty源码学习-CompositeChannelBuffer
                                    bylijinnan
javanetty
                                    
    CompositeChannelBuffer体现了Netty的“Transparent Zero Copy” 
 
查看API（ 
http://docs.jboss.org/netty/3.2/api/org/jboss/netty/buffer/package-summary.html#package_description） 
可以看到，所谓“Transparent Zero Copy”是通
    
                                
    • 
                                
  • Android中给Activity添加返回键
                                    hotsunshine
Activity
                                    
           
// this need android:minSdkVersion="11"
 getActionBar().setDisplayHomeAsUpEnabled(true);
 
 
 
   
 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        
    
                                
    • 
                                
  • 静态页面传参
                                    ctrain
静态
                                    
    
$(document).ready(function () {
	var request = {
		QueryString :
		function (val) {
			var uri = window.location.search;
			var re = new RegExp("" + val + "=([^&?]*)", &
    
                                
    • 
                                
  • Windows中查找某个目录下的所有文件中包含某个字符串的命令
                                    daizj
windows查找某个目录下的所有文件包含某个字符串
                                    
    findstr可以完成这个工作。 
     
[html]  
view plain 
copy       
 
 >findstr /s /i "string" *.*   
  
上面的命令表示，当前目录以及当前目录的所有子目录下的所有文件中查找"string&qu
    
                                
    • 
                                
  • 改善程序代码质量的一些技巧
                                    dcj3sjt126com
编程PHP重构
                                    
    有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码 时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧：    尽量保持方法简短    尽管很多人都遵
    
                                
    • 
                                
  • SharedPreferences对数据的存储
                                    dcj3sjt126com

                                    
    SharedPreferences简介：                                                   &nbs
    
                                
    • 
                                
  • linux复习笔记之bash shell (2) bash基础
                                    eksliang
bashbash shell
                                    
    转载请出自出处：
http://eksliang.iteye.com/blog/2104329  
1.影响显示结果的语系变量（locale） 
 1.1locale这个命令就是查看当前系统支持多少种语系，命令使用如下： 
[root@localhost shell]# locale
LANG=en_US.UTF-8
LC_CTYPE="en_US.UTF-8"

    
                                
    • 
                                
  • Android零碎知识总结
                                    gqdy365
android
                                    
    1、CopyOnWriteArrayList add(E) 和remove(int index)都是对新的数组进行修改和新增。所以在多线程操作时不会出现java.util.ConcurrentModificationException错误。 
所以最后得出结论：CopyOnWriteArrayList适合使用在读操作远远大于写操作的场景里，比如缓存。发生修改时候做copy，新老版本分离，保证读的高
    
                                
    • 
                                
  • HoverTree.Model.ArticleSelect类的作用
                                    hvt
Web.netC#hovertreeasp.net
                                    
    ArticleSelect类在命名空间HoverTree.Model中可以认为是文章查询条件类，用于存放查询文章时的条件，例如HvtId就是文章的id。HvtIsShow就是文章的显示属性，当为-1是，该条件不产生作用，当为0时，查询不公开显示的文章，当为1时查询公开显示的文章。HvtIsHome则为是否在首页显示。HoverTree系统源码完全开放，开发环境为Visual Studio 2013
    
                                
    • 
                                
  • PHP 判断是否使用代理 PHP Proxy Detector
                                    天梯梦
proxy
                                    
    1. php 类 
I found this class looking for something else actually but I remembered I needed some while ago something similar and I never found one. I'm sure it will help a lot of developers who try to 
    
                                
    • 
                                
  • apache的math库中的回归——regression（翻译）
                                    lvdccyb
Mathapache
                                    
    这个Math库，虽然不向weka那样专业的ML库，但是用户友好，易用。 
多元线性回归，协方差和相关性（皮尔逊和斯皮尔曼），分布测试（假设检验，t，卡方，G），统计。 
  
数学库中还包含，Cholesky，LU，SVD，QR，特征根分解，真不错。 
  
基本覆盖了：线代，统计，矩阵， 
最优化理论 
曲线拟合 
常微分方程 
遗传算法（GA）， 
还有3维的运算。。。 

    
                                
    • 
                                
  • 基础数据结构和算法十三：Undirected Graphs (2)
                                    sunwinner
Algorithm
                                    
      
Design pattern for graph processing.  
Since we consider a large number of graph-processing algorithms, our initial design goal is to decouple our implementations from the graph representation
    
                                
    • 
                                
  • 云计算平台最重要的五项技术
                                    sumapp
云计算云平台智城云
                                    
    云计算平台最重要的五项技术 
 
 
 
1、云服务器 
 
 
云服务器提供简单高效，处理能力可弹性伸缩的计算服务，支持国内领先的云计算技术和大规模分布存储技术，使您的系统更稳定、数据更安全、传输更快速、部署更灵活。 
 
 
特性 
 
机型丰富 
 
通过高性能服务器虚拟化为云服务器，提供丰富配置类型虚拟机，极大简化数据存储、数据库搭建、web服务器搭建等工作； 
 
仅需要几分钟，根据CP
    
                                
    • 
                                
  • 《京东技术解密》有奖试读获奖名单公布
                                    ITeye管理员
活动
                                    
    ITeye携手博文视点举办的12月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。  
 
 
12月试读活动回顾： 
http://webmaster.iteye.com/blog/2164754 
 
 
本次技术图书试读活动获奖名单及相应作品如下： 
 
 
一等奖（两名） 
 
 
 Microhardest：http://microhardest.ite
    
                                
    •