前言:
前端组件化是当今热议的话题之一,也是我们在开发单页应用经常会碰到的一个问题,现在我们有了功能非常完善的Element-UI。各个大厂也相继宣布开源XXX-UI。但是也会存在一些问题,比如每个公司可能需要的业务组件不尽相同,或者我们想自己开发一套属于自己的组件库,来增强对组件的可控性。那么我们该如何去做呢? 这里记录一下我从零开始搭建起来的组件库的过程,目前只有简单几个组件,不过我也会慢慢更新维护:VV-UI
1. 环境准备
我们搭建组件库,需要准备一系列环境,首先我们要考虑一下问题:
脚手架如何搭建
如何规划目录结构
如何编写文档
首先,对于脚手架环境的问题,目前已经有非常成熟的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-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
本身是我们定义好的组件:
{{isExpand ? '隐藏代码' : '显示代码'}}
这样,我们的 test.md 便可以这么去写了:
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)
SvelteKit 最新中文文档教程(5)—— 页面选项
前言Svelte,一个语法简洁、入门容易,面向未来的前端框架。从Svelte诞生之初,就备受开发者的喜爱,根据统计,从2019年到2024年,连续6年一直是开发者最感兴趣的前端框架No.1:Svelte以其独特的编译时优化机制著称,具有轻量级、高性能、易上手等特性,非常适合构建轻量级Web项目。为了帮助大家学习Svelte,我同时搭建了Svelte最新的中文文档站点。如果需要进阶学习,也可以入手我
【Vuex:在带命名空间的模块内访问全局内容】
武帝为此
前后端 vue.js javascript 前端
文章目录一、命名空间与全局内容的关系1.什么是命名空间?✅开启命名空间二、在命名空间模块内访问全局内容1.访问全局state2.访问全局getters3.调用全局mutations4.调用全局actions三、示例:模块间访问与全局状态共享1.定义模块2.注册模块3.测试调用四、常见问题与注意事项1.如何在组件中访问其他模块的state?2.模块命名冲突问题五、总结一、命名空间与全局内容的关系1.
AI人工智能深度学习算法:搭建可拓展的深度学习模型架构
AI大模型应用之禅
DeepSeek R1 & AI大模型与大数据 java python javascript kotlin golang 架构 人工智能
深度学习、模型架构、可拓展性、神经网络、机器学习1.背景介绍深度学习作为人工智能领域最前沿的技术之一,在图像识别、自然语言处理、语音识别等领域取得了突破性的进展。深度学习模型的成功离不开其强大的学习能力和可拓展性。本文将深入探讨深度学习算法的原理、模型架构设计以及可拓展性的关键要素,并通过代码实例和实际应用场景,帮助读者理解如何搭建可拓展的深度学习模型架构。2.核心概念与联系深度学习的核心概念是人
前端大文件上传(分片上传)与下载
束尘
前端
文章目录一、问题二、思路1、选择文件2、校验文件是否符合规范3、文件切片上传4、分片上传注意点5、大文件下载一、问题日常业务中难免出现前端需要向后端传输大型文件的情况,这时单次的请求不能满足传输大文件的需求,就需要用到分片上传业务需求为:用户可以上传小于20G的镜像文件,并进显示当前上传进度前端:vue3.x+ElementPlus组件+axios二、思路解决思路简单为前端选择文件后读取到文件的基
使用axios实现实时获取文件上传/下载进度。实现文件上传,下载进度条显示
三年模拟五年烧烤
javascript javascript 前端
下载文件实现进度条显示利用axios封装的原生onDownloadProgress属性,该属性为一个回调方法,当axios请求将文件从服务器下载时会进行回调。接收一个回调参数,该回调参数中包含总下载进度,当前下载进度。不多比比直接上代码下载下载进度:{{downLoadProgress}}import{ref}from'@vue/reactivity';importaxiosfrom'axios'
JavaScript 性能优化实战:数据结构选择对性能的影响
deying0865423
开发语言 javascript
目录数组(Array)特点与适用场景性能短板链表(LinkedList)特点与适用场景性能短板集合(Set)特点与适用场景性能短板映射(Map)特点与适用场景性能短板栈(Stack)与队列(Queue)特点与适用场景性能短板在JavaScript开发中,数据结构的选择如同搭建房屋时选择合适的建筑材料,对程序性能起着决定性作用。合理的数据结构能显著提升代码执行效率,减少资源消耗,反之则可能导致性能瓶
Prometheus+Grafana监控平台搭建_grafana专业监控项
2401_89828619
prometheus grafana
Prometheus提供多种类型的Exporter用于采集各种不同服务的运行状态。目前支持的有数据库、硬件、消息中间件、存储系统、HTTP服务器、JMX等。·alertmanager警告管理器,用来进行报警。·其他辅助性工具Prometheus系统架构图:它的服务过程是这样的Prometheusdaemon负责定时去目标上抓取metrics(指标)数据,每个抓取目标需要暴露一个http服务的接口给
VUE动态路由
qq_41164527
vue vue.js 前端 javascript
在Vue.js中,路由是实现单页应用(SPA)的核心功能之一。Vue提供了vue-router库来管理路由。以下是Vue路由的几种常见方式:1.声明式路由导航(使用)是VueRouter提供的组件,用于声明式导航。它会被渲染成一个标签,点击后会跳转到指定的路由。HomeAboutto属性指定目标路由的路径。默认会渲染为标签,点击后不会刷新页面,而是通过VueRouter进行路由切换。2.编程式路由
Vue 过滤器深度解析与应用实践
二川bro
前端 vue.js 前端 javascript
文章目录1.过滤器概述1.1核心概念1.2过滤器生命周期2.过滤器基础2.1过滤器定义2.2过滤器使用3.过滤器高级用法3.1链式调用3.2参数传递3.3动态过滤器4.过滤器应用场景4.1文本格式化4.2数字处理4.3数据过滤5.性能优化与调试5.1性能优化策略5.2调试技巧6.最佳实践建议6.1命名规范6.2代码组织7.常见问题与解决方案7.1问题列表7.2调试技巧8.扩展阅读1.过滤器概述1.
百度站群收录2025最新:实战策略与趋势解读
SEO黑猫
百度 dubbo
引言:重新认识站群生态最近接触到一个跨境电商案例:某服饰企业通过搭建15个行业细分站群,在2024年百度收录量同比提升380%。这不禁让人思考——2025年的站群运营,究竟需要哪些创新策略?一、2024实战案例拆解案例背景:某母婴用品品牌通过「三级站群矩阵」实现收录突破:1个品牌主站(权重培育)5个地域分站(长尾词覆盖)9个产品专题站(精准流量捕获)RewriteRule^(.*)/product
### 深入解析:如何构建三角形并求解自顶向下的最小路径和 的基础—(构建三角形)
小学仔
leetcode 动态规划 java 算法
####一、问题分析给定一个三角形`triangle`,要求找出自顶向下的最小路径和。每次移动只能到下一行相邻的节点(当前下标`i`或`i+1`)。例如,三角形如下时:```2346574183```####二、代码框架搭建#####1.输入处理与三角形构建```javaScannersc=newScanner(System.in);List>triangle=newArrayListrow=ne
ChatGPT + Vue3:如何打造 AI 智能助手?
Js_x
chatgpt 人工智能
引言人工智能(AI)正快速渗透到前端开发领域,越来越多的开发者希望将ChatGPT集成到自己的应用中,为用户提供智能对话、自动回复、辅助决策等功能。本文将介绍如何使用Vue3+OpenAIAPI搭建一个AI智能助手,让你的应用拥有强大的AI交互能力。1.项目准备1.1技术栈选择本项目将使用以下技术:Vue3-现代化的前端框架,响应式强,适合构建交互式应用。Vite-高效的Vue3项目构建工具,提升
vue对接openai_实现ChatGPT
开心小老虎
vue3知识点+组件 chatgpt
一、openai密钥使用API密钥才能连接到OpenAIAPI,去OpenAI网站注册一个账户(目前国内访问openai受限制,需要其他方式进行访问),单击个人资料图片和“查看API密钥”,创建一个新的密钥。openai官网https://openai.com/二、使用openai包发送请求获得数据1.下载openai包npmiopenai--save2.使用openai包发送请求importOp
AI 创业团队:技术人才与商业人才的完美搭配
yaxin0765
人工智能
目录一、技术人才的核心价值二、商业人才的关键作用三、实现完美搭配的策略在AI创业的赛道上,一个优秀的团队是决定企业成败的关键因素。而在这个团队中,技术人才与商业人才的完美搭配,如同鸟之双翼、车之两轮,缺一不可。他们各自发挥独特优势,相互协作,共同推动AI创业企业驶向成功的彼岸。一、技术人才的核心价值奠定技术根基:技术人才是AI创业企业的技术基石。他们精通各类AI算法、编程语言和开发框架,能够搭建起
【Django】【vue】设计一个评论模块
患得患失949
后端系统功能 面试考题专栏(前后端) django知识 django vue.js 数据库
Django评论模块(前后端分离+点赞+收藏+评论计数)一、功能概述基于Django+DRF设计的评论模块,包含以下功能:基本评论功能(用户可以对文章进行评论,并支持多级回复)评论点赞(支持点赞/取消点赞)评论收藏(支持收藏/取消收藏)评论计数(统计文章的评论数量)嵌套评论(支持多级评论显示)二、后端设计(一)数据库模型(Models)fromdjango.dbimportmodelsfromdj
详细的讲一下Vite 在 Vue3 项目中最常用和最重要的配置项
asecretman!
vue.js javascript 前端
Vite在Vue3中的配置详解基础配置结构首先让我们看一个基础的Vite配置文件结构:import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path'exportdefaultdefineConfig({//配置项})详细配置项解析1.基础路径配置(base)exportdefaultdefine
五、AIGC大模型_05模型的vLLM部署与LangChain调用
学不会lostfound
AI 人工智能 langchain openai vLLM AIGC
0、概述要搭建一个大模型应用服务,通常需要包含以下五层结构,即:基础环境、模型层、推理层、对外接口、外挂应用在了解了模型的微调训练之后,本文将以vLLM、OpenAI、LangChain为例,介绍大模型的推理部署以及对外接口开放调用1、vLLM1.1定义vLLM(VirtualLargeLanguageModel)是一个开源的大语言模型高速推理框架,由加州大学伯克利分校的LMSYS组织开发,它旨在
在前后端分离项目中实现验证码功能
不高兴的富贵儿
java spring boot 前端
目录原理导入验证码依赖Redis工具类RedisUtils配置类CaptchaConfig验证码的文本生成器在SpringBoot里面配置RedisTemplate后端返回验证码接口登录验证(在登录方法之前执行)Login.vue原理通过工具类生成一条算术的验证规则,类似于这样的:1+1=2,其中1+1就是算术规则,2是算术结果。算术规则我们会通过图片流的形式返回给前端显示出来,让用户看到这个算术
Day03_谷粒商城(谷粒商城高级篇二)摘要
BlackTurn
项目总结
文章目录笔记P102—P124是讲解ES的知识,和谷粒商城项目完全无关P125—P127是讲解SpringBoot整合ESP128—P129商品上架功能0P130商品上架功能1P131商品上架功能2P132商品上架功能3P133商品上架功能4P134—P135商品上架功能—测试P136—P138首页展示一级、二级、三级目录P139nginx搭建域名访问环境1P140nginx搭建域名访问环境1P1
Day03_谷粒商城(谷粒商城高级篇二)目录
BlackTurn
项目总结
P102—P124是讲解ES的知识,和谷粒商城项目完全无关P125—P127是讲解SpringBoot整合ES,涉及到如何把ES加入到我们这个项目的P128—P129商品上架功能解说P130商品上架功能的实现1P131商品上架功能的实现2P132商品上架功能的实现3P133商品上架功能的实现4P134—P135商品上架功能—测试p136到p138是搭建了首页,p139和p140是让我们借助ngin
【商城实战(39)】Spring Boot 携手微服务,商城架构焕新篇
奔跑吧邓邓子
商城实战 架构 spring boot 微服务 商城实战
【商城实战】专栏重磅来袭!这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建,运用uniapp、ElementPlus、SpringBoot搭建商城框架,到用户、商品、订单等核心模块开发,再到性能优化、安全加固、多端适配,乃至运营推广策略,102章内容层层递进。无论是想深入钻研技术细节,还是探寻商城运营之道,本专栏都能提供从0到1的系统讲解,助力你打造独具竞争力的电商平台,开启电商实战
软件测试肖sir__接口测试之基本介绍(2)
金牌软件测试培训师肖sir
接口
接口测试之基本介绍搭建环境cms:url:http://cms.duoceshi.cn/cms/manage/login.do一、接口基本介绍1、什么是接口测试?定义:接口统称api,程序与程序之间的数据交换;模块与模块之间的数据交换;2、为什么做接口?(1)能够尽早介入测试;(2)能测试功能无法测试的场景(3)节约时间;(先进行接口测试,在进行功能测试,能节省测试时间)3、如何做接口?通过工具p
纵存科技加入OurBMC,共建高性能存储技术栈
程序员
近日,上海纵存科技有限公司(简称“纵存科技”)签署CLA(ContributorLicenseAgreement,贡献者许可协议),宣布正式加入OurBMC社区。纵存科技专注于为用户提供存储互联的全栈解决方案,致力于在操作系统的存储软件栈与存储互联芯片(HBA/RAID/Expander/Switch)进行全栈创新,同时也积极参与开源社区的技术平台搭建与开源技术共享。纵存科技创始人王硕表示:“纵存
电商 API 接口开发实战:以淘宝商品描述 API 为例
javapython爬虫
在电商领域,API接口扮演着至关重要的角色,它连接着平台、商家和开发者,为数据流通和功能扩展提供了桥梁。本文将以淘宝商品描述API为例,带你走进电商API接口开发实战,从零开始构建你的数据应用。一、准备工作注册淘宝开放平台账号:访问淘宝开放平台或第三方服务数据,注册开发者账号。完成实名认证,创建应用并获取AppKey和AppSecret。了解API文档:仔细阅读淘宝商品API文档,了解接口功能、请
分布式电商项目 谷粒商城 学习笔记<4>
怎么又有bug单
SpringBoot 分布式 java 开发语言 阿里 压力测试
文章目录十五、压力测试1.一些基本概念2.JVM内存机制3.压测记录4.Nginx动静分离5.优化三级分类查询十六、redisson分布式锁与缓存1.概念2.redis3.缓存失效缓存穿透缓存雪崩缓存击穿互斥锁:4.缓存击穿如何复制微服务:5.分布式缓存概念原则基本流程6.Redisson环境搭建可重入锁锁的续期读写锁信号量(Semaphore)闭锁7.缓存和数据库一致性十五、压力测试这里是使用j
《AI大模型趣味实战》 No3:快速搭建一个漂亮的AI家庭网站-相册/时间线/日历/多用户/个性化配色/博客/聊天室/AI管家(下)
带娃的IT创业者
AI大模型趣味实战 人工智能 xcode macos
《AI大模型趣味实战》No3:快速搭建一个漂亮的AI家庭网站-相册/时间线/日历/多用户/个性化配色/博客/聊天室/AI管家(下)摘要本文介绍了家庭网站V1.3版本的更新内容,主要聚焦于AI管家功能的优化与完善。V1.3版本对AI管家模块进行了全面升级,包括使用更快速的GLM-4-Flash模型、优化语音交互体验、改进用户界面以及增强系统稳定性。本文详细解析了这些改进的技术实现,包括语音识别与合成
前端框架革命:React与Vue对比与解析
WHCIS
Web开发技术 前端框架 react.js vue.js
一、框架设计哲学的本质差异1.1React:以JavaScript为核心的函数式哲学React的核心思想可以概括为**“UI即函数”**,其设计遵循以下原则:React核心声明式编程组件即函数单向数据流JSX描述UI函数组件+Hook状态提升模式声明式编程:开发者只需描述界面应该呈现的最终状态,无需关心具体DOM操作细节不可变数据流:通过setState触发组件树更新,保持数据流向的可预测性虚拟D
Vue3项目中可以尝试封装那些组件
shaoin_2
前端零碎 vue.js 前端 javascript
在Vue3项目中,组件的封装可以根据功能、复用性和业务需求进行划分。以下是一些常见的组件类型,适合封装为独立组件:1.基础UI组件按钮(Button)封装不同样式、大小、状态的按钮。支持disabled、loading等状态。输入框(Input)封装文本输入、密码输入、数字输入等。支持v-model双向绑定、校验规则。下拉选择框(Select)封装单选、多选、搜索等功能。开关(Switch)封装开
Vue源码深度解析:从2.x到3.x的架构演进与核心原理剖析
旧味清欢|
Vue vue.js 架构 前端
Vue源码深度解析:从2.x到3.x的架构演进与核心原理剖析一、框架演变:从Vue2到Vue3的跨越1.1革命性升级Vue3的发布标志着前端框架进入新纪元,其核心改进体现在三个方面:性能飞跃:包体积减少41%,初始渲染提速55%,更新性能提升133%开发体验:CompositionAPI带来更好的逻辑复用能力未来兼容:完善的TypeScript支持与渐进式升级策略1.2兼容性设计通过@vue/co
基于Spring Boot+vue技术的导游系统设计与实现
除了菜一无所有!
spring boot vue.js 后端
论文下载【免费】基于SpringBoot+vue技术的导游系统设计与实现资源-CSDN文库摘要本研究背景主要聚焦于当前旅游业信息化、智能化的发展趋势。随着移动互联网的普及和人们出行方式的多样化,导游系统作为旅游服务的重要组成部分,亟需进行技术革新以提升用户体验和服务效率。本研究旨在利用SpringBoot后端框架与Vue前端框架,构建一个功能丰富、交互友好的导游系统。研究内容主要包括系统需求分析、
强大的销售团队背后 竟然是大数据分析的身影
蓝儿唯美
数据分析
Mark Roberge是HubSpot的首席财务官,在招聘销售职位时使用了大量数据分析。但是科技并没有挤走直觉。
大家都知道数理学家实际上已经渗透到了各行各业。这些热衷数据的人们通过处理数据理解商业流程的各个方面,以重组弱点,增强优势。
Mark Roberge是美国HubSpot公司的首席财务官,HubSpot公司在构架集客营销现象方面出过一份力——因此他也是一位数理学家。他使用数据分析
Haproxy+Keepalived高可用双机单活
bylijinnan
负载均衡 keepalived haproxy 高可用
我们的应用MyApp不支持集群,但要求双机单活(两台机器:master和slave):
1.正常情况下,只有master启动MyApp并提供服务
2.当master发生故障时,slave自动启动本机的MyApp,同时虚拟IP漂移至slave,保持对外提供服务的IP和端口不变
F5据说也能满足上面的需求,但F5的通常用法都是双机双活,单活的话还没研究过
服务器资源
10.7
eclipse编辑器中文乱码问题解决
0624chenhong
eclipse乱码
使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题,Eclipse提供了灵活的设置文件编码格式的选项,我们可以通过设置编码 格式解决乱码问题。在Eclipse可以从几个层面设置编码格式:Workspace、Project、Content Type、File
本文以Eclipse 3.3(英文)为例加以说明:
1. 设置Workspace的编码格式:
Windows-&g
基础篇--resources资源
不懂事的小屁孩
android
最近一直在做java开发,偶尔敲点android代码,突然发现有些基础给忘记了,今天用半天时间温顾一下resources的资源。
String.xml 字符串资源 涉及国际化问题
http://www.2cto.com/kf/201302/190394.html
string-array
接上篇补上window平台自动上传证书文件的批处理问卷
酷的飞上天空
window
@echo off
: host=服务器证书域名或ip,需要和部署时服务器的域名或ip一致 ou=公司名称, o=公司名称
set host=localhost
set ou=localhost
set o=localhost
set password=123456
set validity=3650
set salias=s
企业物联网大潮涌动:如何做好准备?
蓝儿唯美
企业
物联网的可能性也许是无限的。要找出架构师可以做好准备的领域然后利用日益连接的世界。
尽管物联网(IoT)还很新,企业架构师现在也应该为一个连接更加紧密的未来做好计划,而不是跟上闸门被打开后的集成挑战。“问题不在于物联网正在进入哪些领域,而是哪些地方物联网没有在企业推进,” Gartner研究总监Mike Walker说。
Gartner预测到2020年物联网设备安装量将达260亿,这些设备在全
spring学习——数据库(mybatis持久化框架配置)
a-john
mybatis
Spring提供了一组数据访问框架,集成了多种数据访问技术。无论是JDBC,iBATIS(mybatis)还是Hibernate,Spring都能够帮助消除持久化代码中单调枯燥的数据访问逻辑。可以依赖Spring来处理底层的数据访问。
mybatis是一种Spring持久化框架,要使用mybatis,就要做好相应的配置:
1,配置数据源。有很多数据源可以选择,如:DBCP,JDBC,aliba
Java静态代理、动态代理实例
aijuans
Java静态代理
采用Java代理模式,代理类通过调用委托类对象的方法,来提供特定的服务。委托类需要实现一个业务接口,代理类返回委托类的实例接口对象。
按照代理类的创建时期,可以分为:静态代理和动态代理。
所谓静态代理: 指程序员创建好代理类,编译时直接生成代理类的字节码文件。
所谓动态代理: 在程序运行时,通过反射机制动态生成代理类。
一、静态代理类实例:
1、Serivce.ja
Struts1与Struts2的12点区别
asia007
Struts1与Struts2
1) 在Action实现类方面的对比:Struts 1要求Action类继承一个抽象基类;Struts 1的一个具体问题是使用抽象类编程而不是接口。Struts 2 Action类可以实现一个Action接口,也可以实现其他接口,使可选和定制的服务成为可能。Struts 2提供一个ActionSupport基类去实现常用的接口。即使Action接口不是必须实现的,只有一个包含execute方法的P
初学者要多看看帮助文档 不要用js来写Jquery的代码
百合不是茶
jquery js
解析json数据的时候需要将解析的数据写到文本框中, 出现了用js来写Jquery代码的问题;
1, JQuery的赋值 有问题
代码如下: data.username 表示的是: 网易
$("#use
经理怎么和员工搞好关系和信任
bijian1013
团队 项目管理 管理
产品经理应该有坚实的专业基础,这里的基础包括产品方向和产品策略的把握,包括设计,也包括对技术的理解和见识,对运营和市场的敏感,以及良好的沟通和协作能力。换言之,既然是产品经理,整个产品的方方面面都应该能摸得出门道。这也不懂那也不懂,如何让人信服?如何让自己懂?就是不断学习,不仅仅从书本中,更从平时和各种角色的沟通
如何为rich:tree不同类型节点设置右键菜单
sunjing
contextMenu tree Richfaces
组合使用target和targetSelector就可以啦,如下: <rich:tree id="ruleTree" value="#{treeAction.ruleTree}" var="node" nodeType="#{node.type}"
selectionChangeListener=&qu
【Redis二】Redis2.8.17搭建主从复制环境
bit1129
redis
开始使用Redis2.8.17
Redis第一篇在Redis2.4.5上搭建主从复制环境,对它的主从复制的工作机制,真正的惊呆了。不知道Redis2.8.17的主从复制机制是怎样的,Redis到了2.4.5这个版本,主从复制还做成那样,Impossible is nothing! 本篇把主从复制环境再搭一遍看看效果,这次在Unbuntu上用官方支持的版本。 Ubuntu上安装Red
JSONObject转换JSON--将Date转换为指定格式
白糖_
JSONObject
项目中,经常会用JSONObject插件将JavaBean或List<JavaBean>转换为JSON格式的字符串,而JavaBean的属性有时候会有java.util.Date这个类型的时间对象,这时JSONObject默认会将Date属性转换成这样的格式:
{"nanos":0,"time":-27076233600000,
JavaScript语言精粹读书笔记
braveCS
JavaScript
【经典用法】:
//①定义新方法
Function .prototype.method=function(name, func){
this.prototype[name]=func;
return this;
}
//②给Object增加一个create方法,这个方法创建一个使用原对
编程之美-找符合条件的整数 用字符串来表示大整数避免溢出
bylijinnan
编程之美
import java.util.LinkedList;
public class FindInteger {
/**
* 编程之美 找符合条件的整数 用字符串来表示大整数避免溢出
* 题目:任意给定一个正整数N,求一个最小的正整数M(M>1),使得N*M的十进制表示形式里只含有1和0
*
* 假设当前正在搜索由0,1组成的K位十进制数
读书笔记
chengxuyuancsdn
读书笔记
1、Struts访问资源
2、把静态参数传递给一个动作
3、<result>type属性
4、s:iterator、s:if c:forEach
5、StringBuilder和StringBuffer
6、spring配置拦截器
1、访问资源
(1)通过ServletActionContext对象和实现ServletContextAware,ServletReque
[通讯与电力]光网城市建设的一些问题
comsci
问题
信号防护的问题,前面已经说过了,这里要说光网交换机与市电保障的关系
我们过去用的ADSL线路,因为是电话线,在小区和街道电力中断的情况下,只要在家里用笔记本电脑+蓄电池,连接ADSL,同样可以上网........
 
oracle 空间RESUMABLE
daizj
oracle 空间不足 RESUMABLE 错误挂起
空间RESUMABLE操作 转
Oracle从9i开始引入这个功能,当出现空间不足等相关的错误时,Oracle可以不是马上返回错误信息,并回滚当前的操作,而是将操作挂起,直到挂起时间超过RESUMABLE TIMEOUT,或者空间不足的错误被解决。
这一篇简单介绍空间RESUMABLE的例子。
第一次碰到这个特性是在一次安装9i数据库的过程中,在利用D
重构第一次写的线程池
dieslrae
线程池 python
最近没有什么学习欲望,修改之前的线程池的计划一直搁置,这几天比较闲,还是做了一次重构,由之前的2个类拆分为现在的4个类.
1、首先是工作线程类:TaskThread,此类为一个工作线程,用于完成一个工作任务,提供等待(wait),继续(proceed),绑定任务(bindTask)等方法
#!/usr/bin/env python
# -*- coding:utf8 -*-
C语言学习六指针
dcj3sjt126com
c
初识指针,简单示例程序:
/*
指针就是地址,地址就是指针
地址就是内存单元的编号
指针变量是存放地址的变量
指针和指针变量是两个不同的概念
但是要注意: 通常我们叙述时会把指针变量简称为指针,实际它们含义并不一样
*/
# include <stdio.h>
int main(void)
{
int * p; // p是变量的名字, int *
yii2 beforeSave afterSave beforeDelete
dcj3sjt126com
delete
public function afterSave($insert, $changedAttributes)
{
parent::afterSave($insert, $changedAttributes);
if($insert) {
//这里是新增数据
} else {
//这里是更新数据
}
}
 
timertask
shuizhaosi888
timertask
java.util.Timer timer = new java.util.Timer(true);
// true 说明这个timer以daemon方式运行(优先级低,
// 程序结束timer也自动结束),注意,javax.swing
// 包中也有一个Timer类,如果import中用到swing包,
// 要注意名字的冲突。
TimerTask task = new
Spring Security(13)——session管理
234390216
session Spring Security 攻击保护 超时
session管理
目录
1.1 检测session超时
1.2 concurrency-control
1.3 session 固定攻击保护
 
公司项目NODEJS实践0.3[ mongo / session ...]
逐行分析JS源代码
mongodb session nodejs
http://www.upopen.cn
一、前言
书接上回,我们搭建了WEB服务端路由、模板等功能,完成了register 通过ajax与后端的通信,今天主要完成数据与mongodb的存取,实现注册 / 登录 /
pojo.vo.po.domain区别
LiaoJuncai
java VO POJO javabean domain
POJO = "Plain Old Java Object",是MartinFowler等发明的一个术语,用来表示普通的Java对象,不是JavaBean, EntityBean 或者 SessionBean。POJO不但当任何特殊的角色,也不实现任何特殊的Java框架的接口如,EJB, JDBC等等。
即POJO是一个简单的普通的Java对象,它包含业务逻辑
Windows Error Code
OhMyCC
windows
0 操作成功完成.
1 功能错误.
2 系统找不到指定的文件.
3 系统找不到指定的路径.
4 系统无法打开文件.
5 拒绝访问.
6 句柄无效.
7 存储控制块被损坏.
8 存储空间不足, 无法处理此命令.
9 存储控制块地址无效.
10 环境错误.
11 试图加载格式错误的程序.
12 访问码无效.
13 数据无效.
14 存储器不足, 无法完成此操作.
15 系
在storm集群环境下发布Topology
roadrunners
集群 storm topology spout bolt
storm的topology设计和开发就略过了。本章主要来说说如何在storm的集群环境中,通过storm的管理命令来发布和管理集群中的topology。
1、打包
打包插件是使用maven提供的maven-shade-plugin,详细见maven-shade-plugin。
<plugin>
<groupId>org.apache.maven.
为什么不允许代码里出现“魔数”
tomcat_oracle
java
在一个新项目中,我最先做的事情之一,就是建立使用诸如Checkstyle和Findbugs之类工具的准则。目的是制定一些代码规范,以及避免通过静态代码分析就能够检测到的bug。 迟早会有人给出案例说这样太离谱了。其中的一个案例是Checkstyle的魔数检查。它会对任何没有定义常量就使用的数字字面量给出警告,除了-1、0、1和2。 很多开发者在这个检查方面都有问题,这可以从结果
zoj 3511 Cake Robbery(线段树)
阿尔萨斯
线段树
题目链接:zoj 3511 Cake Robbery
题目大意:就是有一个N边形的蛋糕,切M刀,从中挑选一块边数最多的,保证没有两条边重叠。
解题思路:有多少个顶点即为有多少条边,所以直接按照切刀切掉点的个数排序,然后用线段树维护剩下的还有哪些点。
#include <cstdio>
#include <cstring>
#include <vector&