用vue-cli3开发一个模仿饿了吗的ui库

初始化项目

使用vue-cli3初始化项目，初始化目录如下：

image.png

将src修改为packages，用于放置组件源文件。新建example目录用于放组件案例，获得最新目录：

最新目录

配置vue.config.js

修改目录后需要修改打包文件中对应的文件名，在vue-cli3中需要新增vue.config.js来扩展打包配置，参考文档: https://cli.vuejs.org/zh/config/
配置如下：

module.exports = {
  outputDir: 'dist',    // 输出目录（打包后的文件夹）
  publicPath: './',
  pages: {
    index: {
      entry: 'example/main.js',     // 入口文件（开发和生产中案例的入口文件） 
      template: 'public/index.html',
      filename: 'index.html'
    }
  }
}

按照以上配置执行npm run build后会直接生成dist目录，且将example中的案例打包，不是组件文件的打包

配置package.json

修改package.json文件：
在script中新增lib命令"lib": "vue-cli-service build --target lib --name base-main --dest lib packages/index.js"

         --target:  app | lib | wc | wc-async (默认值：app)
           --name:  打包后的组件名称
           --dest:  指定输出目录 (默认值：dist)
packages/index.js:  入口js文件

参考文档：https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-build
运行npm run lib，生成lib文件夹和组件文件base-main.umd.min.js

lib目录

上传组件文件到npm

1. 配置 package.json 文件中发布到 npm 的字段
   name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
   version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
   description: 描述。
   main: 入口文件，该字段需指向我们最终编译后的组件包文件（上面的lib文件夹中的lib/base-main.umd.min.js）。
   keyword：关键字，以空格分离希望用户最终搜索的词。
   author：作者
   private：是否私有，需要修改为 false 才能发布到 npm
   license： 开源协议（可以填自己的github地址）
2. 添加 .npmignore 文件，设置忽略发布文件
   发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。
3. 登录npm
   npm login

如果配置了淘宝镜像，先设置回npm镜像：
npm config set registry http://registry.npmjs.org/

4. 发布到npm
   npm publish

5. 更新npm版本包
   使用npm version ，对npm版本进行更新，版本号的三位分别是大号·中号·小号·预发布号。
   update_type可以为以下值：

   1. prerelease:有预发布号的，版本号+1；无预发布号的，小号+1且预发布号初始为0

    运行：npm version prerelease
    package.json 中的版本号1.0.0变为 1.0.1-0
    再运行
    package.json 中的版本号1.0.1-0变为 1.0.1-1

2. prepatch:小号+1；预发布号初始为0

   运行：npm version prepatch
   1. package.json 中的版本号1.0.0变为 1.0.1-0
   2. package.json 中的版本号1.0.1-1变为 1.0.2-0

3. preminor:中号+1；小号和预发布号初始为0

    运行：npm version preminor
    1. package.json 中的版本号1.0.2-0变为 1.1.0-0
    2. package.json 中的版本号1.0.1-1变为 1.1.0-0

4. premajor:大号+1；中号，小号和预发布号初始为0

    运行：npm version premajor
    1. package.json 中的版本号1.1.0-0变为 2.0.0-0

5. patch:有预发布号的去掉预发布号，其他不变；无预发布号的小号+1

    运行：npm version patch
    1. package.json 中的版本号1.1.0-0变为 1.1.0
    2. package.json 中的版本号1.1.0变为 1.1.1

6. minor:有预发布号的，小号为0时去掉预发布号，其他不变，小号不为0时中号+1且其他置为0去掉预发布号；无预发布号的中号+1，小号置为0

    运行：npm version minor
    1. package.json 中的版本号1.1.0变为 1.2.0
    2. package.json 中的版本号1.1.0-0变为 1.1.0
    3. package.json 中的版本号1.1.1-0变为 1.2.0

7. major: 无预发布号的，大号+1其他置为0；有预发布号的，中号和小号为0时去除预发布号，其他不变。如果中号和小号中有一个不为0的话，大号+1，其他重置为0，去除预发布号

运行：npm version major
    1. package.json 中的版本号1.1.0变为 2.0.0
    2. package.json 中的版本号1.0.0-0变为 1.0.0
    3. package.json 中的版本号1.1.1-0变为 2.0.0

UI文档的编写

这一块参考的element-ui做法，需要新增外部包：

highlight.js    // 用于代码的高亮
transliteration  // 用于中文拼音转换
markdown-it
markdown-it-anchor
markdown-it-container
vue-markdown-loader

新增demo-block.vue文件

用于展示案例效果和代码，参考element-ui的demo-block.vue文件做了修改，去除了其他语言，如下：

配置vue.config.js

修改vue.config.js文件，新增chainWebpack属性，用于文档文件的转换。如下：

chainWebpack: config => {
    // 设置文件夹别名
    config.resolve.alias
      .set('@', resolve('example'))
      .set('~', resolve('packages'))
    config.module
      .rule('js')
      .include
        .add(__dirname + 'packages')
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
    config.module
      .rule('md')
      .test(/\.md/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true,
        preventExtract: true, //这个加载器将自动从html令牌内容中提取脚本和样式标签
        // 定义处理规则
        preprocess: (MarkdownIt, source) => {
          // 对于markdown中的table,
          MarkdownIt.renderer.rules.table_open = function() {
            return '';
          };
          // 对于代码块去除v - pre, 添加高亮样式;
          const defaultRender = md.renderer.rules.fence;
          MarkdownIt.renderer.rules.fence = (
            tokens,
            idx,
            options,
            env,
            self
          ) => {
            const token = tokens[idx];
            // 判断该 fence 是否在 :::demo 内
            const prevToken = tokens[idx - 1];
            const isInDemoContainer =
              prevToken &&
              prevToken.nesting === 1 &&
              prevToken.info.trim().match(/^demo\s*(.*)$/);
            if (token.info === "html" && isInDemoContainer) {
              return ``;
            }
            return defaultRender(tokens, idx, options, env, self);
          };
          return source;
        },
        use: [
          // 标题锚点
          [
            require("markdown-it-anchor"),
            {
              level: 2, // 添加超链接锚点的最小标题级别, 如: #标题 不会添加锚点
              slugify: slugify, // 自定义slugify, 我们使用的是将中文转为汉语拼音,最终生成为标题id属性
              permalink: true, // 开启标题锚点功能
              permalinkBefore: true // 在标题前创建锚点
            }
          ],
          // :::demo ****
          //
          // :::
          //匹配:::后面的内容 nesting == 1,说明:::demo 后面有内容
          //m为数组,m[1]表示 ****
          [
            require("markdown-it-container"),
            "demo",
            {
              validate: function(params) {
                return params.trim().match(/^demo\s*(.*)$/);
              },
      
              render: function(tokens, idx) {
                const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
                if (tokens[idx].nesting === 1) {
                  //
                  const description = m && m.length > 1 ? m[1] : ""; // 获取正则捕获组中的描述内容,即::: demo xxx中的xxx
                  const content =
                    tokens[idx + 1].type === "fence"
                      ? tokens[idx + 1].content
                      : "";

                  return `
                  
${content}
                  ${description ? `
${md.render(description)}
` : ""}
                  `;
                }
                return "";
              }
            }
          ],
          [require("markdown-it-container"), "tip"],
          [require("markdown-it-container"), "warning"]
        ]
      });
  }
设置文档文件
在example中新增doc文件夹用于存放md文件，在md文件中使用markdown语法书写文档。其中以:::demo开始对组件进行使用的讲解，在demo后面可以填写组件的中相关的属性和方法的使用，在```html 代码块 ```的代码块中填写组件案例的使用代码，和函数方法。案例：
:::demo 使用`type`、`plain`、`round`和`circle`属性来定义 Button 的样式。

 ```html

  默认按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮


``` // html的结尾符
:::
修改example中的路由文件，设置对应案例的对应的路由，如下：
new Router({
  routes: [
    {
      path: '/ElButton',
      name: 'ElButton',
      text: 'button按钮',
      component: () => import(`@/doc/ElButton.md`)
    }
  ]
})
预览地址：https://erpang123.github.io/C-UI/CUI/index.html
 参考的相关文章：https://blog.csdn.net/qq_31126175/article/details/100527322
 https://segmentfault.com/a/1190000021140844




 











你可能感兴趣的:(用vue-cli3开发一个模仿饿了吗的ui库)



美易官方：盘前道指期货涨0.5%，游戏驿站跌逾15%
美股投资
财经人工智能大数据新浪微博微信微信公众平台百度金融
在股市开盘前的交易时段，道指期货上涨了0.5%，而游戏驿站（GameStop）的股价却出现了大幅下跌，跌幅超过15%。这一市场动态引发了投资者的广泛关注，也反映了当前股市的复杂性和不确定性。美股股指期货周三盘前走强，交易员为季度末的再平衡做准备。本周因假期而缩短，美国将公布关键通胀数据。道指期货涨0.5%，标普500指数期货涨0.6%，纳指期货涨0.5%。德国DAX指数涨0.4%，英国富时100指

亲亲往这里来
神道仙灵
图片发自App…哈…哈……上次……失误…失误……此…次……哈…哈…哈……我不会……哪么……大舌头……哪么……呆笨……直…白…了…！…亲们……看见…我口中……喝的…啥了么……呵…呵…呵……看见…我手上……又…拿的……啥了…么……哈…哈…哈……哈我的小宝贝

别人能伤害你，是你允许的。
1125198e6b7d
不要对别人抱有太大期望，保护自己的最佳方式,就是从不高估自己在别人心中的份量。能伤害你的从来不是别人的无情，而是你心存幻想的坚持。及时止损，不盼望就不会失望。相识很久的关系，明明内心很不舒服，却还要装作若无其事的样子，强撑着去面对。一次又一次为了迎合而迎合，自我qipian，精神内耗。对于那些不能带给你任何积极能量的人，我们真正要做的就是及时止损。伤害你的人从来没想过帮助你成长，真正让你成长的是你

2023-02-16
执剑饮烈酒
1、开心点，反正谁也别想活着离开这个世界。——朱德庸2、我一直以为爱的反义词是不爱，直到现在我才明白，爱的反义词是遗忘。——《寻梦环游记》3、人生的最高境界是佛为心，道为骨，儒为表，大度看世界。技在手，能在身，思在脑，从容过生活。——南怀瑾4、如果一个民族沦落到，只剩下把升官发财当成最终目标和追求的时候，那么这个民族就危险了，一旦金钱和权利成了唯一的信仰，那将是悲哀的。——鲁迅5、人和人如果不在一

为什么wal会 提升数据库性能
浩澜大大
数据库
由于对于一个数据库内会存在很多张表，那么当数据库更新表数据时（1）直接写入磁盘实际写入的位置，会根据表的不同对应到不同的磁盘位置，在写入数据的时候，就会不停的寻找磁盘地址，找到地址后再去写入，对于机械硬盘来说，无规律的寻址是非常耗时的，对应SSD来说虽然性能提升很多，但是也会消耗时间；（2）先写入日志，在写入磁盘（WAL）WAL的过程，由于总是按照在文件末尾追加，只要找到文件写入位置，写入修改后，

【Python】一文详细介绍 py格式 文件
高斯小哥
Python基础【高质量合集】python新手入门学习
【Python】一文详细介绍py格式文件个人主页：高斯小哥高质量专栏：Matplotlib之旅：零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程希望得到您的订阅和支持~创作高质量博文(平均质量分92+)，分享更多关于深度学习、PyTorch、Python领域的优质内容！（希望得到您的关注~）文章目录一、py格式文件简介二、如何创建和编辑py格式文件三、如何运行py

《昼颜》里的日本女人：相遇要万种风情，分手要残忍绝情
迷影咖啡
作者：迷之菌子神奇菇迷影咖啡：一本正经做烘焙，胡说八道聊电影漫天萤火虫消散之时良宵就将过去，人们也说含苞待放的花蕾总会开了又谢，因紧紧相拥而面红耳赤的躯体，便是我们经历过这热爱的证明。夫妻关系介绍《昼颜》是2014年电视剧《昼颜：工作日下午三点的恋人们》的续集，故事发在电视剧情节结束的三年后，讲述了已经恢复独身的纱和偶然与曾经的出轨对象北野重逢后再次陷入感情漩涡的故事。《昼颜》制作灵感源自利佳子在

迎接2019
唯有杜康1994
告别2018这一年是机遇与挑战，痛苦与喜悦，失去与收获的一年一月:收获了第一份爱情，开始真正想去了解一个人三月:对工作有了更深入的认识，靠自己的力量完成晋升五月:搬家，住进了自己理想的公寓，一间属于自己的屋子。满地的书六月:外调广州，升经理，有了自己的第一个团队。七月:怀着自我否定，第一次完成了部门任务八月:第一个员工流失，痛哭不已明白无不散之筵席九月:员工陆续离开，经济是一切的根本。十月:陪员工

亲子日记之祝姑姥姥生日快乐（282）
冰心雨露_d504
2021年7月18日，周日，晴周日上班的不上班，上学的不上学，全家都属于休息状态，洗衣做饭是上午的主要任务，中午休息一会儿，下午比较晚了出去给梦怡买了二年级上册的口算题卡，然后去参加姑姑的生日聚餐，本来姑姑应该是周一生日，因为周一都要上班，就提前到周日过了，说是过生日其实就是想借此机会一家人聚聚，毕竟平常都忙，没有时间聚在一起，梦怡还给姑姥姥做了生日贺卡，虽然长相一般，重在心意。生日快乐

100天30本书读书计划（2018-06-11）DAY 62
一个姜姜
【书名】当我谈跑步时，我谈些什么【作者】村上春树【读书页数】51--128/187【读书时间】2018年6月11日【精彩句子】01肌肉难长，易消。赘肉易长，难消。P5502肌肉也同有血有肉的动物一般无二，它也愿意过更舒服的日子，不继续给它负荷，它便会心安理得地将记忆出去。想再度输入的话，必须得从头开始，将同样的模式重复一遍。P7703不管怎样，反正得坚持跑步。每天跑步对我来说好比生命线，不能说忙就

植物小记
番茄秧子
小时候，我养过一院子的花。今年，我重新开始从头开始养一点儿植物。别人说那也只是别人说临到快过年，我逛了一趟花市，买了两棵水仙花。路过另外一个卖水仙的摊位，霸气的卖花小妹瞧了一眼我捧着的那两棵弱小，说了一句：“你那个水仙不行，都不会开花的。”以我的脾气，这当然不能相信啊。结果，带回家好几天没动静。某一天早晨起来，两棵水仙悄不吭声全开了，然后香了屋子好多天。水仙三月，我在花市扛了一盆栀子花，花店老板见

大学播音主持都学什么内容？播音主持专业学什么？
配音新手圈
有些喜欢播音主持并且犹豫要不要报考这个大学专业的小伙伴们就会想要了解大学播音主持都学什么内容吧，毕竟如果不够了解就直接选择这个专业真的等选择完进去学习以后才知道这个专业并不是自己想要学习的东西那就来不及了。下面是小编为大家整理出来的一些播音主持专业学习的内容，请往下看吧。大学播音主持专业主要学习的课程有：播音发声、播音创作基础、广播播音主持、电视播音主持、文艺作品演播学概论、新闻学概论、新闻采编、

Android和IOS应用开发-Flutter应用让屏幕在 app 运行期间保持常亮的方法
江上清风山间明月
FlutterandroidiosflutterKeepAlive屏幕常亮wakelock熄屏
文章目录Flutter应用让屏幕在app运行期间保持常亮的方法方法一：使用系统插件方法二：使用Widgets注意事项Flutter应用让屏幕在app运行期间保持常亮的方法在Flutter开发中，可以使用以下两种方法让屏幕在app运行期间保持常亮：方法一：使用系统插件Flutter社区中已经有很多相关插件可供使用，比如wakelock:https://pub.dev/packages/wakeloc

微信小程序监听用户经纬度变化
某公司摸鱼前端
微信小程序小程序
一些打卡App需要根据用户的位置来完成打卡那么就需要监听用户位置变化情况：示例：//在某个生命周期函数中，如onLoad中onLoad:function(options){//开始监听位置变化wx.startLocationUpdate({success:function(){console.log('开始更新位置');},fail:function(){console.log('开始更新位置失败

2019-04-08早
梦雅的简动力
在上瑜伽课前10分钟的调息中，你的眼睛为什么总是想睁开？（焦虑）。你的眉头为什么总是紧锁？（压力）。练习体式时你为什么总是去看别人？（攀比）保持体式时你为什么总是烦躁？（性急）。保持长久而规律的练习，以上这些，终归离你远去。瑜伽，首先，不是帮你得到，而是教你放下。图片发自App时间，一时间无法跳离这个特殊的词汇毅力，坚持，真诚，需要时间来见证真相，现实，伪装，时间自然会揭秘珍惜它又害怕它可它丝毫不

3/31总结
静心第一
今日总结：1.上午体验课以及反馈2.p1专注力上课3.情绪精品营上课4.燕子营队辅营以及前台值班5.活动室带孩子接待带到访今日反思：1.合理安排体力2.对于准客户记得跟进3.不要放过每一次成交的机会（这个精品营转发有点失败，后期需调整）今日感受：1.为了效果，后期课程一定想方设法布置家庭，给予一个好的支持系统2.上到下午的课程感觉特别特别的累3.晚上在做辅营一个孩子大声叫喊，后来单独出去沟通，其实

极狐GitLab 论坛 2.0 全新上线，可以在论坛上查找与 GitLab 相关的问题了～
极小狐
gitlab极狐GitLabdevopsGitLabci/cddevsecopsSCM
安装出现依赖错误？版本升级搞不定？遇到422、500就懵逼了？不知道某个功能是免费or付费？……使用GitLab这种全球顶级的DevOps平台进行软件研发时，总会遇到一些困惑，想跟专业的技术人员快速交流以便获得答案，同时又想把这些问题沉淀下来以帮助他人？有这种赠人玫瑰，手有余香的解决方案吗？答案肯定有：论坛！！！论坛——一个各路大神聚集的地方，一个可以解惑答疑问道的地方。解惑：搜索与自己问题相同或

数据结构奇妙旅程之深入解析快速排序
山间漫步人生路
数据结构排序算法算法
快速排序（QuickSort）是一种高效的排序算法，它使用了分治法的策略来将一个数组排序。其基本思想是选择一个基准元素，通过一趟排序将待排序的数据分割成独立的两部分，其中一部分的所有数据都比基准元素小，另一部分的所有数据都比基准元素大，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，以此达到整个数据变成有序序列。工作原理选择基准：从待排序的序列中选一个元素作为基准（pivo

被隔离的日子（五）@三七会写作营
三七会萍海临风
从隔离的初期，我们三人都不适应，彼此说话都还火药味十足。后随着时间的推移，到现在，我们仨人能够心平气和，幽默地对待彼此。看来，时间可真是个好东西，不仅能见证一个人的心性，还能看清自己的需求、他人的本质。今天晚上，孩子跑到厨房，告诉我她给人捐款了。我纳闷，不是给河南捐过款了么。当时，我还落后于她捐的呢。这次又捐给谁？看到我一脸狐疑，孩子说，还记得初四给她补课的那个男老师么？当让记得，当时，就因为是男

教育微创新的意蕴
知北老师
我是1992年参加工作的，一毕业就被分配到一所全县最偏僻落后的农村学校——付窝中学，12年后被调往一所已经连续十年全县倒数第一，也是很偏僻落后的农村学校——北宋镇第三中学。三年后到了北宋镇第一中学工作，这所学校教学质量也是连续几年落后了。2014年我到了北京市育英学校，这所学校是京城名校。2016年7月，我被育英学校派往原密云区第七中学工作，这是一所城乡接合部薄弱学校。学校现名为北京市育英学校密云

我喝醉了，但是与你无关
Z先生的日记本
2019年04月10号晚上我和一个朋友喝酒了，彻彻底底的喝醉了，喝到短片，事后我问L，我说我喝醉了之后，都发生了什么，L没有告诉我详情，但是跟我说了大致，他说我跟他一直聊天，说自己小的时候的事，说自己爸妈的事，说自己现在过得很苦可能，确实是喝醉了酒，才会毫无防备的跟其他人说这些吧。L还说感觉我过得很苦，很心疼。醉了酒之后还哭了，想想还真是丢人一年前，在宿舍也有一瓶红酒，那是舍友出去拉赞助时候，友商

android 自定义曲线图,Android自定义View——贝赛尔曲线
weixin_39767513
android自定义曲线图
个人博客：haichenyi.com。感谢关注本文针对有一定自定义View的童鞋，最好对贝赛尔曲线有辣么一丢丢了解，不了解也没关系。花5分钟看一下GcsSloop的安卓自定义View进阶-Path之贝塞尔曲线。本文的最终效果图：最终效果图.gif思路首先他是一个只有上半部分的正弦形状的水波纹，很规则。其次，他这个正弦图左右在移动。然后，就是它这个自定义View，上下也在移动，是慢慢增加的最后，优化

Flink中的SQL Client和SQL Gateway
BigDataMLApplication
flinkflinksqlgateway
Flink中的SQLClient和SQLGateway对比目录定义基本原理适用场景主要区别常用运维命令示例官方链接正文1.定义SQLClient：FlinkSQLClient是一种用于提交和执行FlinkSQL语句的命令行界面或图形界面工具。SQLGateway：FlinkSQLGateway是一个独立的服务，它允许客户端通过RESTfulAPI将SQL查询提交到Flink集群。2.基本原理SQL

2022年河南省高等职业教育技能大赛云计算赛项竞赛赛卷（样卷）
忘川_ydy
云计算云计算openstackkubernetesdockerpythonk8sansible
#需要资源（软件包及镜像）或有问题的，可私博主！！！#需要资源（软件包及镜像）或有问题的，可私博主！！！#需要资源（软件包及镜像）或有问题的，可私博主！！！第一部分：私有云任务1私有云服务搭建(10分)使用提供的用户名密码，登录竞赛用的云计算平台，按要求自行使用镜像创建两台云主机，创建完云主机后确保网络正常通信，然后按要求配置服务器。根据提供安装脚本框架，补充脚本完成OpenStack平台的安装搭

浪潮 M5系列服务器IPMI无法监控存储RAID卡问题.
Songxwn
硬件服务器服务器运维
简介浪潮的M5代服务器，可能有WebBMC无法查看存储RAID/SAS卡状态的情况，可以通过以下方式修改。修改完成后重启BMC即可生效。ESXiIPMITools使用：https://songxwn.com/ESXi8_IPMI/（Linux也可以直接使用）Linux/ESXiIPMITool下载：https://songxwn.com/file/ipmitoolWindows下载：https:/

打印出1-100的奇数 。（C语言）
王多鱼001
C语言c语言算法数据结构
代码：#includeintmain(){for(inti=1;i<101;i++){if(i%2==1){printf("%d,",i);}}return0;}

【OpenModelica】4命令行大全
Wumbuk
python开发语言modelica
命令行大全文章目录命令行大全一、SummaryofCommandsfortheInteractiveSessionHandler二、Runningthecompilerfromcommandline一、SummaryofCommandsfortheInteractiveSessionHandler以下是交互式会话处理器中当前可用命令的完整列表。•simulate(modelname)：翻译一个名为

unblock with ‘mysqladmin flush-hosts‘ 解决方法
祈祷平安,加油
数据库常见问题oracle数据库
MySqlHostisblockedbecauseofmanyconnectionerrors;unblockwith'mysqladminflush-hosts'解决方法环境：linux，mysql5.5.21错误：Hostisblockedbecauseofmanyconnectionerrors;unblockwith'mysqladminflush-hosts'原因：同一个ip在短时间内产

通俗易懂：MySQL中如何设置只读实例并确保数据一致性？
大龄下岗程序员
mysqljavamysqlspring
在MySQL中设置只读实例主要应用于构建高可用性和扩展性的数据库环境，通常是为了分担读取负载或者用于备份和灾难恢复。以下是创建MySQL只读实例并确保数据一致性的基本步骤：1.创建并配置只读实例-主从复制设置-首先，你需要有一个主数据库实例（Master）负责接收所有的写操作。-创建一个或多个从数据库实例（Slave），并将它们配置为主数据库的复制品。这通常通过设置主从复制（Replication

拼多多纸巾推荐：品质与性价比的完美结合
氧惠帮朋友一起省
拼多多纸巾推荐拼多多纸巾返现怎么做在我们的日常生活中，纸巾已经成为不可或缺的用品。无论是在家庭、办公室还是旅途中，纸巾都是我们随时随地需要的物品。随着电商平台的兴起，越来越多的人选择在网上购买纸巾。其中，拼多多作为国内知名的电商平台之一，以其独特的社交电商模式和实惠的价格吸引了大量用户。今天，我们就来探讨如何在拼多多上选择品质优良、性价比高的纸巾，以及如何通过一些小技巧来获取更多的优惠。一、品质与

Java开发中，spring mvc 的线程怎么调用？
小麦麦子
springmvc
今天逛知乎，看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题，觉得挺有意思的，那哥们儿问的也听仔细，下面的回答也很详尽，分享出来，希望遇对遇到类似问题的Java开发程序猿有所帮助。
问题：
    在用spring mvc架构的网站上，设一线程在虚拟机启动时运行，线程里有一全局

maven依赖范围
bitcarter
maven
1.test 测试的时候才会依赖，编译和打包不依赖，如junit不被打包
2.compile 只有编译和打包时才会依赖
3.provided 编译和测试的时候依赖，打包不依赖，如：tomcat的一些公用jar包
4.runtime 运行时依赖，编译不依赖
5.默认compile
依赖范围compile是支持传递的，test不支持传递
1.传递的意思是项目A，引用

Jaxb org.xml.sax.saxparseexception : premature end of file
darrenzhu
xmlprematureJAXB
如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误：
org.xml.sax.saxparseexception : premature end of file
很有可能时你直接读取文件为inputstream，然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In

CSS Specificity
周凡杨
html权重Specificitycss
 
有时候对于页面元素设置了样式，可为什么页面的显示没有匹配上呢？ because specificity
CSS 的选择符是有权重的，当不同的选择符的样式设置有冲突时，浏览器会采用权重高的选择符设置的样式。
    规则：
 
HTML标签的权重是1
Class 的权重是10
Id 的权重是100


java与servlet
g21121
servlet
servlet 搞java web开发的人一定不会陌生，而且大家还会时常用到它。
下面是java官方网站上对servlet的介绍： java官网对于servlet的解释 写道
Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha

eclipse中安装maven插件
510888780
eclipsemaven
1.首先去官网下载 Maven：
http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz
下载完成之后将其解压，
我将解压后的文件夹：apache-maven-3.2.3，
并将它放在 D:\tools目录下，
即 maven 最终的路径是：D:\tools\apache-mave

jpa@OneToOne关联关系
布衣凌宇
jpa
Nruser里的pruserid关联到Pruser的主键id，实现对一个表的增删改，另一个表的数据随之增删改。
Nruser实体类
//*****************************************************************
@Entity
@Table(name="nruser")
@DynamicInsert @Dynam

我的spring学习笔记11-Spring中关于声明式事务的配置
aijuans
spring事务配置
这两天学到事务管理这一块，结合到之前的terasoluna框架，觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容，对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种，我承认后两种的内容很好，很强大。但是实际的项目当中

java 动态代理简单实现
antlove
javahandlerproxydynamicservice
dynamicproxy.service.HelloService
package dynamicproxy.service;
public interface HelloService {
public void sayHello();
}
 
dynamicproxy.service.impl.HelloServiceImpl
package dynamicp

JDBC连接数据库
百合不是茶
JDBC编程JAVA操作oracle数据库
    
    如果我们要想连接oracle公司的数据库，就要首先下载oralce公司的驱动程序，将这个驱动程序的jar包导入到我们工程中;
 
JDBC链接数据库的代码和固定写法;
 
 
1,加载oracle数据库的驱动;
    &nb

单例模式中的多线程分析
bijian1013
javathread多线程java多线程
谈到单例模式，我们立马会想到饿汉式和懒汉式加载，所谓饿汉式就是在创建类时就创建好了实例，懒汉式在获取实例时才去创建实例，即延迟加载。
饿汉式：
package com.bijian.study;
public class Singleton {
private Singleton() {
}
// 注意这是private 只供内部调用
private static

javascript读取和修改原型特别需要注意原型的读写不具有对等性
bijian1013
JavaScriptprototype
        对于从原型对象继承而来的成员，其读和写具有内在的不对等性。比如有一个对象A，假设它的原型对象是B，B的原型对象是null。如果我们需要读取A对象的name属性值，那么JS会优先在A中查找，如果找到了name属性那么就返回；如果A中没有name属性，那么就到原型B中查找name，如果找到了就返回；如果原型B中也没有

【持久化框架MyBatis3六】MyBatis3集成第三方DataSource
bit1129
dataSource
MyBatis内置了数据源的支持，如：
 
<environments default="development">
<environment id="development">
<transactionManager type="JDBC" />
<data

我程序中用到的urldecode和base64decode,MD5
bitcarter
cMD5base64decodeurldecode
这里是base64decode和urldecode，Md5在附件中。因为我是在后台所以需要解码：
string Base64Decode(const char* Data,int DataByte,int& OutByte)
{
//解码表
const char DecodeTable[] =
{
0, 0, 0, 0, 0, 0

腾讯资深运维专家周小军：QQ与微信架构的惊天秘密
ronin47
社交领域一直是互联网创业的大热门，从PC到移动端，从OICQ、MSN到QQ。到了移动互联网时代，社交领域应用开始彻底爆发，直奔黄金期。腾讯在过去几年里，社交平台更是火到爆，QQ和微信坐拥几亿的粉丝，QQ空间和朋友圈各种刷屏，写心得，晒照片，秀视频，那么谁来为企鹅保驾护航呢？支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢？本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心

java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素
bylijinnan
java

public class MinOfShiftedArray {
/**
* Q69 旋转数组的最小元素
* 把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素。
* 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转，该数组的最小值为1。
*/
publ

看博客，应该是有方向的
Cb123456
反省看博客
看博客，应该是有方向的:
 我现在就复习以前的，在补补以前不会的，现在还不会的，同时完善完善项目，也看看别人的博客.
 我刚突然想到的:
 1.应该看计算机组成原理，数据结构，一些算法，还有关于android,java的。
 2.对于我，也快大四了，看一些职业规划的，以及一些学习的经验，看看别人的工作总结的.
 
 为什么要写

[开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖
comsci
开源项目

     为什么这样说呢？  因为科学和技术的发展有时候需要一个平缓和长期的积累过程，但是行政和商业体系本身充满各种不稳定性和不确定性，如果你希望长期从事某个科研项目，但是却又必须依赖于某种行政和商业体系，那其中的过程必定充满各种风险。。。
      所以，为避免这种不确定性风险，我

一个 sql优化 （[精华] 一个查询优化的分析调整全过程！很值得一看 ）
cwqcwqmax9
sql
见   http://www.itpub.net/forum.php?mod=viewthread&tid=239011
Web翻页优化实例
提交时间: 2004-6-18 15:37:49      回复    发消息 
环境：
Linux ve

Hibernat and Ibatis
dashuaifu
Hibernateibatis
Hibernate  VS  iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架，当前版本是3.05。它出身于sf.net，现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架，当前版本是2.0。目前属于apache的一个子项目了。 相对Hibernate“O/R”而言，iBATIS 是一种“Sql Mappi

备份MYSQL脚本
dcj3sjt126com
mysql
#!/bin/sh
# this shell to backup mysql
#[email protected] (QQ:1413161683 DuChengJiu)
_dbDir=/var/lib/mysql/
_today=`date +%w`
_bakDir=/usr/backup/$_today
[ ! -d $_bakDir ] && mkdir -p 

iOS第三方开源库的吐槽和备忘
dcj3sjt126com
ios
转自
ibireme的博客   做iOS开发总会接触到一些第三方库，这里整理一下，做一些吐槽。   目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流，这里主要介绍一下Github里面流行的iOS库。   首先整理了一份
Github上排名靠

html wlwmanifest.xml
eoems
htmlxml
所谓优化wp_head()就是把从wp_head中移除不需要元素，同时也可以加快速度。
步骤：
加入到function.php
remove_action('wp_head', 'wp_generator');
//wp-generator移除wordpress的版本号，本身blog的版本号没什么意义，但是如果让恶意玩家看到，可能会用官网公布的漏洞攻击blog
remov

浅谈Java定时器发展
hacksin
java并发timer定时器
java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor，从后者的表现来看，可以考虑完全替代Timer了。
Timer与ScheduleThreadPoolExecutor对比：
1.
 
 Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列

移动端页面侧边导航滑入效果
ini
jqueryWebhtml5cssjavascirpt
效果体验：http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js，该版本的jQuery库是用于支持HTML5的浏览器上，不再兼容IE8以前的浏览器，现在移动端浏览器一般都支持HTML5，所以使用该jQuery没问题。HTML文件代码：
<!DOCTYPE html>
<h

AspectJ+Javasist记录日志
kane_xie
aspectjjavasist
在项目中碰到这样一个需求，对一个服务类的每一个方法，在方法开始和结束的时候分别记录一条日志，内容包括方法名，参数名+参数值以及方法执行的时间。
 
@Override
public String get(String key) {
// long start = System.currentTimeMillis();
// System.out.println("Be

redis学习笔记
MJC410621
redisNoSQL
1)nosql数据库主要由以下特点：非关系型的、分布式的、开源的、水平可扩展的。
1，处理超大量的数据
2，运行在便宜的PC服务器集群上，
3，击碎了性能瓶颈。
1)对数据高并发读写。
2)对海量数据的高效率存储和访问。
3)对数据的高扩展性和高可用性。
redis支持的类型：
Sring 类型
set name lijie
get name lijie
set na

使用redis实现分布式锁
qifeifei
在多节点的系统中，如何实现分布式锁机制，其中用redis来实现是很好的方法之一，我们先来看一下jedis包中，有个类名BinaryJedis,它有个方法如下：
 
public Long setnx(final byte[] key, final byte[] value) {
checkIsInMulti();
client.setnx(key, value);
ret

BI并非万能，中层业务管理报表要另辟蹊径
张老师的菜
大数据BI商业智能信息化
       BI是商业智能的缩写，是可以帮助企业做出明智的业务经营决策的工具，其数据来源于各个业务系统，如ERP、CRM、SCM、进销存、HER、OA等。
       BI系统不同于传统的管理信息系统，他号称是一个整体应用的解决方案，是融入管理思想的强大系统：有着系统整体的设计思想，支持对所有

安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题
wudixiaotie
function
1.在~/.bashrc最后加入
[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"
 2.重新启动terminal输入：
 
rvm use ruby-2.2.1 --default
 把当前安装的ruby版本设为默







按字母分类：
ABCDEFGHIJKLMNOPQRSTUVWXYZ其他





首页 -
关于我们 -
站内搜索 -
Sitemap -
侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.