【vuejs项目部署】使用docker基于daocloud自动化部署到自己的主机
在前端开发中，部署项目是我们经常发生的事情如果在你的公司中，项目部署需要你来负责，怎么优雅无痛的让你的项目自动上线在之前的文章中，写过几篇关于项目上线的方式，大家可以翻阅这个专栏去看。今天主要讲怎么优雅的部署vue项目，使用docker容器，配合gitwebhook钩子，当我们触发到githook事件，就自动化部署。这里当然建议是tag事件。嘿，你想快速get这门技能？你可以的！在这里我已经写完了项目的基本的文件，你只需要把这个项目复制到你的vue项目中即可！项目地址dockervue项目使用说明gitclonehttps://github.com/devdocker/dao-vuecp-rdao-vuevueitemvueitem是你的vue项目地址此时你项目文件结构然后去daocloud.io官网新建一个基于这个项目的项目如果你不了解daocloud.io，没关系，去注册，看文档，今后会写关于daocloud.io详细文档。如果你用过daocloud，请去创建一个项目，编译发布，
我的 2017 技术流水账
第一次使用AngularJS是在2014年，那时候正在做一个回合制的手游项目，编写后端的同时，也顺手编写了GM工具和Web页战斗模拟工具，为了方便，整个工具全部写在一个页面中。页面交互全部使用jQuery完成，写到中后期，已经被获取表单数据、绑定事件、修改DOM元素折腾得不行。于是尝试了AngularJS，整个人都感觉不一样了，完全是像写后端代码一样写前端代码。尤其是双向数据绑定，实在是解决了GM工具等管理平台中的痛点——大量数量的处理。AngularJS结合Bootstrap，简直是编写管理后台的大杀器。可是随着单页应用的规模越来越大，AngularJS的劣势也日益明显，虽然服务可以实现JavaScript代码的复用，但这还不够。指令虽然实现了JavaScript和HTML的复用，使用又太过繁琐。双向绑定虽然方便，但这种随意到处修改值的结果就是值变化了你也不知道是哪里改的。代码文件的组织，也只能按照JavaScript/HTML/CSS分别组织。文件打包最多用用Browser
[前端回顾]CSS BFC
CSSBFC(BlockFormattingContext)是网页渲染的一个重要原则，而又常常被忽视或注意不到，所以这里来回顾一下BFC是什么。什么是BFCBFC是块级格式化上下文，是指一个独立的块级渲染区域，用来定义块级元素的渲染布局规则，每个区域与外部是隔离的，内部的元素不会受到外部的影响。如何产生BFC根据MDN的说明：根元素或其它包含它的元素浮动元素(元素的float不是none)绝对定位元素(元素的position为absolute或fixed)内联块(元素具有display:inline-block)表格单元格(元素具有display:table-cell，HTML表格单元格默认属性)表格标题(元素具有display:table-caption,HTML表格标题默认属性)具有overflow且值不是visible的块元素，display:flow-rootcolumn-span:all应当总是会创建一个新的格式化上下文，即
时尚 Bootstrap 4 主题：Shards（轻量级）
Shards采用了最新Bootstrap4前端框架制作的，外观简约而时尚，风格与现代流行的扁平化相当合衬！此外不仅仅拥有HTML/CSS/SASS格式模板，还有Sketch设计源文件，可见分享者的贴心。目前从官方介绍来看，UI组件还相当齐全，可用它来快速搭建漂亮、时尚的网页和UI设计作品，下面一起来看看介绍。关于Shards这个主题虽然免费，但并不代表它只有「表面」，制作者还为性能性能考虑，压缩版仅12KB大小，实在太好了，以这样的大小，制作出来的网页直接能秒开。它并不是直接使用Bootstrap的设计样式，所有的组件都是重新设计，以便得到统一的风格！着陆页演示这是非常不错的UIKIT素材，它还包含了10个额外的自定义组件，可以让使用者快事制作着陆页。演示地址：https://designrevision.com/demo/shards/extra/app-promo.html演示地址：https://designrevision.com/demo/shards/extra
深入学习rollup来进行打包
回到顶部一：什么是Rollup?rollup是一款用来es6模块打包代码的构建工具(支持css和js打包)。当我们使用ES6模块编写应用或者库时，它可以打包成一个单独文件提供浏览器和Node.js来使用。它的优点有如下：1.能组合我们的脚本文件。2.移除未使用的代码(仅仅使用ES6语法中)。3.在浏览器中支持使用Nodemodules。4.压缩文件代码使文件大小尽可能最小化。Rollup最主要的优点是它是基于ES2015模块的，相比于webpack或Browserify所使用的CommonJS模块更加有效率，因为Rollup使用一种叫做tree-shaking的特性来移除模块中未使用的代码，这也就是说当我们引用一个库的时候，我们只用到一个库的某一段的代码的时候，它不会把所有的代码打包进来，而仅仅打包使用到的代码(webpack2.0+貌似也引入了tree-shaking)。注意：Rollup只会在ES6模块中支持tree-shaking特性。目前按照CommonJS模块编写的j
Debug前端HTML/CSS
译者按：关于使用Chrome开发者工具非常全面的介绍，值得一读！原文:HowtodebugFront-end:HTML/CSS译者:Fundebug为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。我强烈感觉到至少有一半人会这么想：“HTML/CSS甚至算不上一门编程语言”。不过，前端开发中，HTML/CSS方面Debug技巧不足导致的问题非常多。并不是每一个开发者都知道他眼前早就有一个非常强大的Debugger，可以帮助他追踪和消除bug。这个Debugger就是他自己的谷歌浏览器。在之前一篇博客中，我主要介绍了Console。在这篇，我将专注于Elements标签。这篇文章将会包含：将你的浏览器变为IDE-可动态编辑的HTML/CSSHTML断点改变元素状态搜索特定的元素通过实例来练习新的技巧理解元素样式？understandingstylesintheElementstab好啦，基本介绍的差不多了。接下来给你展示新的技巧。快速进入Element标签的两个方法对
【ASP.NET MVC系列】浅谈NuGet在VS中的运用
一概述在我们讲解NuGet前，我们先来看看一个例子。1.例子：假设现在开发一套系统，其中前端框架我们选择Bootstrap,由于选择Bootstrap作为前端框架，因此，在项目中，我们需要引入Bootstrap相关文件，大致会执行如下操作。步骤一：下载Bootstrap文件输入Bootstrap官网域名http://v3.bootcss.com/输入域名，进入官网步骤二：选择合适的版本，下载Bootstrap包步骤三：将包引入到项目中关于将Bootstrap包引入到Project中，过程似乎比较麻烦，更可怕的的是，当在项目中的Bootstrap包需要更新时，需要做重复的工作，这是非常繁琐的，很好的是，VS自带的NuGet包管理器很好地帮助我们解决了此类问题。2.何为Nuget包管理器？对于.NET和VS而言，NuGet是一个.NET包管理系统，它可以很容易地响应运用程序中添加、更新和删除外部库文件及其依赖。除此之外，我们可以通过创建包，发布包实现包之间的共享
Kafka基本架构介绍
1、什么是消息系统？消息系统负责将数据从一个应用程序传输到另一个应用程序，因此应用程序可以专注于数据，但不担心如何共享它。分布式消息传递基于可靠消息队列的概念。消息在客户端应用程序和消息传递系统之间异步排队。有两种类型的消息模式可用-一种是点对点，另一种是发布-订阅(pub-sub)消息系统。大多数消息模式遵循pub-sub。（1）点对点消息系统在点对点系统中，消息被保留在队列中。一个或多个消费者可以消耗队列中的消息，但是特定消息只能由最多一个消费者消费。一旦消费者读取队列中的消息，它就从该队列中消失。该系统的典型示例是订单处理系统，其中每个订单将由一个订单处理器处理，但多个订单处理器也可以同时工作。下图描述了结构。（2）发布-订阅消息系统在发布-订阅系统中，消息被保留在主题中。与点对点系统不同，消费者可以订阅一个或多个主题并使用该主题中的所有消息。在发布-订阅系统中，消息生产者称为发布者，消息使用者称为订阅者。一个现实生活的例子是Dish电视，它发布不同的渠道，如运动，电影，音乐等，任何人
日志的艺术（The art of logging）
原文出处：xybaby程序员学习每一门语言都是从打印“helloworld”开始的，日志也是新手程序员学习、调试程序的一大利器。当项目上线之后，也会有各种各样的日志，比如记录用户的行为、服务器的状态、异常情况等等。打印日志似乎是一件很简单、不值得一提的事情。但是，当看到线上项目居然有这样的日志的时候，不禁想问问我们真的会打印日志吗？***********************************ErrorHappened,F*ckUserxxxcannotlogin在我看来，打印日志是一门艺术，而且长期被程序员所忽视，本文尝试回答以下几个问题，分享我对打印日志的一些思考：(1)whyorwhentolog(2)whattolog(3)howtologandtips注意：本文中会用“打印”日志来统一表示日志的输出，但不是我们狭义理解的输出到终端或者stdout、stderr，而是泛指将日志内容输出到任何目标，包括但不限于终端、文件、网络传输。本文地址：htt
作为一名程序员，我这属于什么水平？
（故事内容纯属虚构）为什么要写这篇文章呢，因为我觉得我在这个行业各个社区摸爬滚打了10年，这10年也许还不如别人一两年吧。不过靠着这身技术，每天跟@刘雨培老师在群里吹水，还是能勉强插上嘴的。10年了，我写过各种程序，能熟练使用各种语言和工具，各领域均有所涉猎。2011年我高考失利，靠认识的一位老教授推荐才进入现在的大学读书。高中的时候我实现过一个操作系统内核，翻到过一本关于Linux源码分析的书，就是认识了这个教授。经他建议，顺手改了改就成了一个实时操作系统，被他拿去用在项目上。大一认识了我师父@刘老丝儿。我知道你会说我这种样子还需要别人带吗？但是想想，毕竟他精通从流行硬件平台的每一条指令到每一个浏览器版本的CSS特性支持程度的细节。后来我才知道，他其实自己造过CPU，只是当时他才16岁，没人相信这些鬼话。我们当时合作了一套方案，因为我是软件专业，他建议说，我们分工，他搞硬件，我搞软件，到时候看能不能合作拿个什么奖。我拿方案找了教授问有什么建议，教授看了看就说，来我项目组做吧。后来其实一直都没能进行，据说是因为教授把这个方案卖
微信跳一跳能过千的都是程序员
大家应该都知道最新微信版本的更新，除了部分的微信bug优化，更重要的是新推出微信小游戏小程序，在这些小游戏中，最受欢迎的是微信跳一跳，昨天我看了下排名，最高的是1900多的，是我认识的以为技术大牛，其他紧跟的1000以上的也大都是我认识的技术人员，其他的都是500以下的音乐老师、同事之类的，当时觉得很奇怪，自己玩的时候手很残，最多一次是170多，最后想了一下既然是使用一个手指头来操作，那么些一些脚本，让他自己跳那样不就不掉坑了。然后开始疯狂的找资料在github找了一位大佬，写的脚本，加上众多的开发者优化的脚本自己也优化了一些，最后打算用，模拟器测试脚本。第一步、准备程序Python、雷电模拟器、ADB驱动、运行脚本、windows一键运行可以点击【全部工具】，直接打包下载即可。第二步、安装雷电模拟器安装过程就不说了。都懂的。安装之后需要更改分辨率，
2018关键字
关键字式的年终总结我已经写了《2015关键字》和《2016关键字》两年了，2017关键字没有写，因为现在职业生涯遇到瓶颈，进步缓慢，感觉没什么可写的。现在回顾2017，也没什么能拿出手的，知乎上一个问题《作为程序员，2017年你习得了哪些新技能？》，我回答如下：2017年我是迷茫的，焦虑的，纠结要不要转型，往前端，还是后端？怎么转？后来自学入门了Python，当拓展技术栈，了却我一直想写接口的夙愿。本职工作好像没什么实质进步，除了实践Android模块组件化、性能优化，参与面试，做面试官，负责Android端项目，带新人，还有其他的吗，带娃更加娴熟，算不算？另外，17年买了MacBookPro，完成了16年的指标。展望18年高级程序员自己差不多属于高级程序员了，这些年没算白混，但还不够，很多知识点知道，浮在表层，开发中一些知识不常用很快就忘记了，新的一年，还得继续查缺补漏。身体年纪大了，该注意起来了，15年结完婚就很少运动，现在经常肩疼，周末偶尔去打打篮球。学历虽然说工作了更多地看重学历
微服务的模式语言
转自：Apatternlanguageformicroservices[译注]：模式语言提供了讨论问题的交流术语，它明确了特定场景、特定问题的解决方案和延伸性思考。模式语言主要目的是帮助开发者解决在设计和编程中遇到的共同的问题，即清晰的问题陈述、体现问题的解决方案以及推动解决方案的力量（Force）的清晰表述。微服务架构作为一个现在流行的服务架构，也有一套属于自己的模式。这篇文章是微服务架构相关模式语言的一个提纲。ChrisRichardson从不同的角度，对相关的模式进行了分类。可以点击链接查看每个模式的详细描述。下图通过虚线框细分了不同的微服务模式。
TEGer 在全球架构师峰会 : 腾讯企业级消息中间件 CMQ 技术解密
作者简介：ziza，2012年加入腾讯，一直专注于腾讯中间件产品的建设，主导参与了腾讯消息中间件CMQ、CKafka、MQforIoT等项目，见证了腾讯云消息服务从0到1的整个过程。目前专注于于分布式服务开发与治理平台TSF的建设。大规模分布式系统的快速发展使得消息中间件已经成为系统间通信的核心手段。本文将对腾讯TEG基础架构部中间件团队研发的企业级消息中间件CMQ原理进行分享介绍。背景介绍可以使用消息队列的场景有很多，常见的有以下几种：1.服务解耦：同步变异步，数据最终一致性；2.削峰限流：类似“三峡大坝”，下游服务方被超过服务能力请求压垮；3.广播订阅：发送方不关心谁订阅这个消息，只管发出来，拓展方便；4.流式数据过滤：消费者通过类似SQL语句来筛选自己感兴趣的数据；5.两阶段消息：通过两阶段消息与本地数据库事务相结合达到简单分布式事务。中间件团队消息队列发展历程：CMQ/CKafka/MQforIoT本质上都属于分布式消息中间件，分布式消息系统的最大特点是可扩展性。核心理念是多个节点协同工作完成单个
MySQL存储写入速度慢？当然是选择分析一下啦
问题背景描述：在MySQL中执行SQL语句，比如insert，贼慢，明明可能也就只是一行数据的插入，数据量很小，但是耗费的时间却很多，为什么？一、存储结构分析MySQL存储结构图：解析：1、读操作：内存读-->cache缓存读-->磁盘物理读读取到的数据会按上述顺序往回送。2、写操作：内存数据直接写入cache缓存(非常快)-->写入disk由上可知，MySQL之所以读写速度快，cache在其中起到了关键作用。①、Cache缓存特点：-速度快-掉电数据丢失-容量有限②、保护数据安全(防止意外掉电的数据丢失)应对措施：在存储中，增加BBU(电池备份单元，就是电池)，在掉电后，可以把缓存中的数据写到磁盘中，保证数据不会丢失。如果没有提供BBU或者BBU坏了，内存数据就不会写入cache缓存中，就会直接写入disk中；相较于写入内存，写入磁盘的速度就大打折扣(万倍之差)。与此同时，因为慢下来的“写”占了绝大部分“读”的带宽。所以B
2018年值得关注的10家数据分析厂商
至顶网软件频道消息：根据市场分析公司IDC预计，全球大数据和业务分析硬件、软件和服务的支出将从2017年的1508亿美元增加到2100亿美元，复合年增长率为11.9%。但是这个市场不仅仅是在增长，而且在迅速变化。例如，昨天用于开发基于历史数据的静态报告工具，相对于最新一代用于实施分析流式数据的软件来看，是相当原始的。因为对于数据科学家和业务分析师的需求在不断变化，他们用来完成其工作的软件功能也是如此。下面就让我们来看看2018年值得关注的10家厂商，因为他们在开发下一代大数据和业务分析软件，打破着技术的壁垒，挑战已有的知名厂商。Anodot高管：首席执行官DavidDrai业务分析厂商一直专注于抓住人工智能这波发展热潮，将人工智能和机器学习能力集成到他们的软件中。有一家赢得了关注的厂商就是Anodot，这是一家业务分析软件开发商，利用机器学习技术检测海量数据中的异常情况，帮助企业发现问题并抓住新的机遇。Anodot成立于2014年，位于以色列Ra'anana，美国总部位于加州桑尼维尔市，开发的软件可以让企业用
window下mysql数据备份
今天我有个朋友让我帮他在windowServer服务器上备份一下mysql的数据库，于是花了一天的时间完成了一个每天定时备份数据库的功能，小编在这里为大家记录一下：首先对于mysql命令行的导入导出作一个简单的梳理一、导入①mysql-h主机-u账号-p密码db
vue vue-router vuex element-ui axios的学习笔记（十七）改写learn目录
选区_018.png1、新建一个admin目录添加页面admin.vue用于管理后台路由adminlogin.vue用于后台管理员登录home.vue用于后台主页显示信息mangeradmin.vue用于管理管理员账户mangeruser.vue用于管理用户账户mangerprods.vue用于管理商品操作mangersends.vue用于管理用户发货2、重新编写路由打开route/index.jsimportVuefrom'vue'importRouterfrom'vue-router'//引入前端组件importHomefrom'@/components/home'importConHomefrom'@/components/con-home'importLoginfrom'@/components/login'importReginfrom'@/components/regin'importPage404from'@/components/404'import
2017年团队总结
nodejs如果说16年我们最大的亮点是引进了reactjs，那么17年就是nodejs了，nodejs的好处不言而喻，它相比java更受前端欢迎和接受，它的社区更加活跃，使用nodejs的前端团队更能吸引前端人才加入。早在16年底我们就开始布局，当时我们在一个比较边缘的web系统做了nodejs的尝试并且顺利上线，到了17年我们的策略是新的系统全部都使用nodejs，截止到现在已经有15个左右的web系统使用了它，在这个过程中，nodejs虚拟小组推进了很多事情，基于express完成了一个nodejs框架：luffy，脚手架工具，另外做到生态与java一致：监控日志对接，运维部署系统对接，微服务架构对接。java虽然新web系统都使用nodejs了，但我们还有20多个老系统是基于SpringMVC,它们都需要维护和升级，我们从年初就在推进一个frontend-core的项目，frontend-core其实是一个公共jar包，它抽象了多个web系统的公共组件与方法，简化了与后端联调的步骤，最重要的是约束了后端的接口规范，不会再出现不同后
移动端适配
作为一个前端开发人员，我们的任务是将UI设计师的图稿运用计算机语言呈现在用户面前。而现在的设备大小尺寸不一，近年来智能手机的普及更是让网页的用户大部分来源与手机，所以让不同大小的移动端屏幕都能较好的还原设计稿就成了一个前端开发者需要解决的当务之急。我查阅了大量资料和进行了一些实践，下面是我对移动端适配的一些认识。首先我们来谈谈我们在电脑端用的字体单位px和em在国内的网站中大多都是使用px作为字体单位，只有百度做了个可调的表率。而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。他们为什么要用em作为单位呢，主要有一下几个原因IE无法调整那些使用px作为单位的字体大小;国外的大部分网站能够调整的原因在于其使用了em作为字体单位;Firefox能够调整px和em，但是96%以上的中国网民使用IE浏览器(或内核)。px和em概念px像素(Pixel):相对长度单位。像素px是相对于显示器屏幕分辨率而言的。__em:__是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏