超简单入门Vuex小示例
写在前面本文旨在通过一个简单的例子，练习vuex的几个常用方法，使初学者以最快的速度跑起来一个vue+vuex的示例。学习vuex需要你知道vue的一些基础知识和用法。相信点开本文的同学都具备这个基础。另外对vuex已经比较熟悉的大佬可以忽略本文。生成基于vue的项目基于vue-cli脚手架生成一个vue项目常用npm命令：npmivue-vli-gvue--versionvueinitwebpack项目名进入项目目录，使用npmrundev先试着跑一下。一般不会出现问题，试跑成功后，就可以写我们的vuex程序了。使用vue完成的示例使用vuex首先得安装vuex，命令：npmivuex--save介绍一下我们的超简单Demo，一个父组件，一个子组件，父组件有一个数据，子组件有一个数据，想要将这两个数据都放置到vuex的state中，然后父组件可以修改自己的和子组件的数据。子组件可以修改父组件和自己的数据。先放效果图，初始化效果如下：如果想通过父组件触发子组件的数据，就点“改变子组
ViewChild() Decorator 的使用方法
@ViewChild()decorator一開始是在存取childcomponent時學到的，事實上@ViewChild()還有其他使用方法。VersionNode.js8.9.3AngularCLI1.6.2Angular5.2Component使用@ViewChild()存取childcomponent。counter初始值為2按+則counter+1，按-則counter-1ArchitectureAppComponent負責處理；CounterComponent負責顯示counterAppComponent相當於parentcomponent，CounterComponent相當於childcomponentAppComponent直接呼叫CounterComponent的method改變counter；AppComponent也可直接讀取CounterComponent的property
SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(六)
当前后端分离时，权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块，现在权限管理模块已经做完了，我想通过5-6篇文章，来介绍一下项目中遇到的问题以及我的解决方案，希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程，主要介绍了核心思路并讲解了核心代码，完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外，原本计划把项目跑起来放到网上供小伙伴们查看，但是之前买服务器为了省钱，内存只有512M，两个应用跑不起来(已经有一个V部落开源项目在运行)，因此小伙伴们只能将就看一下下面的截图了，GitHub上有部署教程，部署到本地也可以查看完整效果。项目地址：https://github.com/lenve/vhr大部分问题我们都已经解决了，本文我们主要来看看用户角色管理和角色资源管理。本文是权限系列的最后一篇，建议先阅读前面的文章有助于更好的理解本文：1.SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(一)2.Spring
Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制
一、事件的捕获与冒泡由W3C规定的DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。以下面的HTML结构为例：
创建一个基本的jQuery插件【原创】
$('body').hide();这是一个很简单的jquery代码，但是每当我们用$函数来选择元素，它就会返回给我们一个jquery对象，这个对象包括我们所有使用过的方法。jquery对象从$.fn对象中获取这些方法，所以我们如果想写自己的方法也需要包含这些方法。比如我们写一个让宽度变为200px的方法：$.fn.width200=function(){this.css('width','200px');};$('body').width200();这就算一个jquery最简单的插件了；但是典型jquery对象将包含对任何数量的DOM元素的引用，插件的制作有时还需要自定义一些参数，下面是自定义宽度的小插件，：$.fn.widthDiy=function(option){vard={width:'200'};varo=$.extend(d,option);returnthis.each(function(){this.css('width',o.width+'px');})};$('body').widthDi
WPF：（5-2）PhotoViewerDemo图片库查询编辑
源项目地址：https://github.com/Microsoft/...以下是把样例转换为简要说明，同时给出实际运行效果及关键代码剖析：PhotoViewerDemo图片信息查询器主要实现功能：1根据选定目录自动加载图片或缩略图，并显示选中图片的元素据信息2选中图片进行编辑、缩放、旋转、黑白变3对图片容器大小进行自动缩放数据模型类图片类///<summary>///Thisclassdescribesasinglephoto-itslocation,theimageand///themetadataextractedfromtheimage.///</summary>publicclassPhoto{privatereadonlyUri_source;publicPhoto(stringpath){Source=path;_source=newUr
ASP.NET Core中使用IOC三部曲(三.采用替换后的Autofac来实现AOP拦截)
前言本文主要是详解一下在ASP.NETCore中,采用替换后的Autofac来实现AOP拦截觉得有帮助的朋友~可以左上角点个关注,右下角点个推荐这里就不详细的赘述IOC是什么以及DI是什么了..emm..不懂的可以自行百度.目录ASP.NETCore中使用IOC三部曲(一.使用ASP.NETCore自带的IOC容器)ASP.NETCore中使用IOC三部曲(二.采用Autofac来替换IOC容器,并实现属性注入)ASP.NETCore中使用IOC三部曲(三.采用替换后的Autofac来实现AOP拦截)正文上一篇我们讲了如何将默认的容器替换为Autofac,并使用属性注入.那么这一篇我们就来讲讲如何利用Autofac实现我们的AOP(面向切面编程).1.引用正确的库来实现AOP既然是跨平台,那么在asp.netcore因为采用了.netcore来作为基础库(当然,其实你可以换成.NET4.6.).新的.NETCore是基于.NETStandard的..所以我们在引用库的时候特别要注意
更新之后微软机器人框架不太会用？所有的改动都在这一篇
文章作者：PabloGomezGuerrero原文链接：《HowtoWorkwithMicrosoftBotFrameworkSinceLastUpdate》翻译：一熊翻译组Mason如果你有使用微软机器人框架的话，你很有可能已经看见提示你迁移机器人的边栏了。你也可能会发现创建机器人的网页似乎和之前不大一样，有一些东西也不见了。尽管在更新前已创建机器人的「设定」与「测试」部分在dev.botframework.com上仍旧可用。然而，如果你创建一个新的机器人，设定部分已经有了改动。没准就算在已创建的机器人设定中，如果他们还没有被迁移，网页看起来也会很奇怪。接下来，就让我来告诉你这是怎么一回事：1.开始创建机器人的方式有了一点改变。现在微软会重新定向至Azure并强制发送一个订阅至Azure以生成一个机器人服务。Azure会给你一个170欧元的贷记额度用来做订阅，至少我的情况是这样。一旦进入Azure中，你会发现三种创建机器人的方式：WebApp机器人机器人频道注册功能机器
WPF：（5-3）3D粒子转圈动画示例
源项目地址：https://github.com/Microsoft/...以下是把示例转换为简要说明，同时给出实际运行效果及关键代码剖析：ParticlesDemo粒子群3D动画转圈示例文件组织Particle.cs粒子类ParticleSystem.cs粒子系统类ParticleSystemManager.cs粒子系统管理类WPF中MainWindow.xaml及.cs文件等实现功能每秒出现各种颜色的3D粒子顺时针转圈运动粒子随时间而扩散、消失显示帧数及总粒子束主要代码粒子类publicclassParticle{publicdoubleDecay;//消散系数publicdoubleLife;//存在时长publicPoint3DPosition;//3D位置publicdoubleSize;//尺寸publicdoubleStartLife;//开始时长publicdoubleStartSize;//开始尺寸public
Asp.net SignalR 让实时通讯变得简单
巡更项目中，需要发送实时消息，以及需要任务开始提醒，于是便有机会接触到SignalR，在使用过程中，发现用SignalR实现通信非常简单，下面我思明将从三个方面分享一下：一、SignalR是什么Asp.netSignalR是微软为实现实时通信的一个类库。一般情况下，SignalR会使用JavaScript的长轮询(longpolling)的方式来实现客户端和服务器通信，随着Html5中WebSockets出现，SignalR也支持WebSockets通信。另外SignalR开发的程序不仅仅限制于宿主在IIS中，也可以宿主在任何应用程序，包括控制台，客户端程序和Windows服务等，另外还支持Mono，这意味着它可以实现跨平台部署在Linux环境下。SignalR内部有两类对象：Http持久连接(PersistenConnection)对象：用来解决长时间连接的功能。还可以由客户端主动向服务器要求数据，而服务器端不需要实现太多细节，只需要处理PersistentConnection内所提供的五个事件：OnConnected,
DevExpress v17.2新版亮点—ASP.NET篇（一）
用户界面套包DevExpressv17.2终于正式发布，本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExpressASP.NETv17.2的GridViewControl、ChartControl、Editors、HTMLEditor等新功能，快来下载试用新版本！GridViewControl合并列分组使用此版本，您现在可以通过将适当的列标题拖动到组面板并将其排列在一行上来合并网格视图的分组列。自适应弹出对话框在这个版本中，DevExpressDataGrids提供了自适应的弹出对话框（标题过滤器的下拉菜单，弹出窗口编辑器，过滤器构建器）。ChartControl基于标准的统一过滤在此版本中，DataFilter系列属性已被FilterCriteria和FilterString属性所取代。这使您可以使用FilterControl管理图表中表示的数据。StackedBars和Pies的TotalsLabels在这个版本中，DevExpressChartControl可以
Angular 6.0.0-beta.0 和 5.2.1 发布，Web 前端框架
Angular6.0的首个beta版已发布，6.0.0-beta.0的更新主要是新增了一些特性、修复bug以及提升性能。5.2.1的更新主要是新增了一些特性和bug修复。6.0.0-beta.0(2018-01-17)Bug修复animations:fixincrement/decrementaliasesexample(#18323)(d2aa8ac)benchpress:shouldstillsupportselenium_webdriver<3.6.0(#21477)(9b84a32)common:setcorrecttimezoneforISO8601datesinSafari(#21506)(05208b8),closes#21491compiler:cacheexternalreferenceresolution(#21359)(e3e2fc0)compiler:make.ngsummary.json
Koa 请求日志打点工具（二）——使用 async_hooks
登录Koa请求日志打点工具（二）——使用async_hooksnswbmw10hoursago我在一年前写过一篇《Koa请求日志打点工具》，公司内部一直使用至今，也定位过不少问题。但koa-yield-breakpoint仍然有一个很大的缺憾，即：无法记录除controller或者router之外的函数的执行时间（因为获取不到当前请求的"this"）。举个更通俗的例子：我在一个路由的controller里面调用了A，A调用了B，B又调用了C...这是我们非常常见的用法，但之前使用koa-yield-breakpoint只能获取A的执行时间，无法获取B和C的执行时间。根本原因在于：无法知道函数之间的调用关系，即B不知道是A调用的它，即使知道也不知道是哪次请求到来时执行的A调用的它。但是！但是！但是！node@8.1引入了一个黑魔法——AsyncHooks。AsyncHooks我们先看下node@8.1新加入的async_hooks是个什么东西
2017年超棒前端相关工具类库大荟萃
又到了新的一年，在过去的2017年，我相信大家都在工作和开发中遇到了很多有趣的前端代码工具或者是类库，希望在来到的2018年，我们依然能够找到更多有用的辅助前端工具及其类库。在这篇文章中，我将介绍一组个人觉得非常实用并且有益的工具和类库，希望对大家的工作也可以有比较大的帮助，当然，如果你也有自己收集的类库或者前端工具，请不吝赐教，给我留言哈~KUTE.js作为一个javascript的动画类库来说，并没有什么非常有新鲜感的地方，但是它最大的特色在于：性能突出。在现在的web动画中，我们无法避免的会遇到性能上的问题，我们必须去应对和解决移动设备或者连接缓慢的问题访问以上网站，你可以看到一系列的复杂动画效果，但动画效果流畅并且没有卡顿，不信的话，大家可以尝试一下，另外两个加分点：非常专业的API非常好的callback系统设计使用非常简单，如下：varel=document.querySelector(".box");vartween=KUTE.fromTo(el,{translate
推荐近乎免费的调试神器——OzCode
当一只断点打在VisualStudio的代码编辑器中，程序命中断点的那一刻，调试才刚刚开始……这个时候忙碌的手在键盘和鼠标之间来回跳跃，试图抓住每一次单步执行带来的状态改变。如果命中断点的那一刻多数我需要的状态都自动呈现，偶尔需要的状态能够快速定位，那该多好！于是，有了OzCode……OzCode的官网在这里：OzCode:InnovativedebuggingextensionforVisualStudio。OzCode有这些非常吸引我的地方：当程序进入断点的时候，OzCode会用红黄绿三色指示程序即将进入的分支OzCode会在每一个局部变量上方标注它现在的值（不过这一功能VisualStudio15.5开始也提供了）调试UI对象时，常常的属性列表在OzCode的帮助之下可以快速搜索长长的linq语句可以利用OzCode看到集合中的每一项对结果的影响（通过滚轮查看）▲分支着色（图片来源于官网）▲搜索属性（图片来源于官网）官网下载的时候会看到提示——一个
JavaScript系列——数组元素左右移动N位算法实现
引言在自己刚刚毕业不久的时候，去了一家公司面试，面试官现场考了我这道题，我记忆深刻，当时没有想到思路，毫无疑问被面试官当成菜鸟了。最近刚好在研究数组的各种算法实现，就想到这道题，可以拿来实现一下，纪念自己逝去的青春。需求假设有这样一个数组[1,2,3,4,5]现在想要左移或者右移N位，比如移动1位//左移1位[2,3,4,5,1]//右移1位[5,1,2,3,4]算法实现这样一道题目，你先不要看我下面的代码，自己思考一下如何实现它，不管是复杂的还是简单的方法。可以先告诉你我用了2行代码实现左、右移动元素。拆分法当我们没有具体思路的时候，就先假设数组移动1位的情况。[1,2,3,4,5]=>[null,1,2,3,4]and[5,null,null,null,null]=>[5,1,2,3,4]这里可以看成2个数组，一个是没有到达边界的元素移动[null,1,2,3,4]，一个是到达了边界的元素移动[5,null,null,null,null]，当元素到达边界，就会往数组的初始位置移动，形成了一个循环的过程。
使用Flow来检测你的JS
最近在一篇文章上看见了关于Flow的介绍，觉得它很不错，虽然之前在项目中使用Typescript已经很顺手了，再使用Flow感觉有点累赘了，但多学点总是没错的。简介JS作为一种脚本语言是没有类型检测的，这个特点有时候用着很爽，但当你在一个较大的项目中的时候，就会发现这其实是一件挺糟糕的事情，因为和你协作的程序员往往不太清楚你所写的代码到底哪种类型才是正确的，而且代码重构的时候也很麻烦。于是基于这个需求有了Typescript和Flow的产生，今天这里主要介绍Flow。安装因为笔者一直使用的是WebStorm，WebStorm内部对Flow就有一定的支持，所以如果你也使用WebStorm的话会方便很多。yarnadd--devflow-binbabel-clibabel-preset-flow在安装了上述的包之后，创建.babelrc文件：{"presets":["flow"]}设置WebStorm通过File>Settings>Languages&Frameworks>JavaScript如下图所示设置，Flo
【jQuery】(7)---jQueryAjax同步异步区别
【jQuery】(7)---jQueryAjax同步异步区别jQueryAjax同步异步今天在项目开发过程中，要实现这么一个功能
写给 C# 开发人员的函数式编程
原文地址:http://www.dotnetcurry.com/csharp/1384/functional-programming-fsharp-for-csharp-developers摘要：作为一名C#开发人员，您可能已经在编写一些函数式代码而没有意识到这一点。本文将介绍一些您已经在C＃中使用的函数方法，以及C#7中对函数式编程的一些改进。尽管.NET框架的函数式编程语言是F＃，同时，C#是一个面向对象的语言，但它也有很多可以用于函数式编程技术的特性。你可能已经写了一些功能的代码而没有意识到它！函数式编程范例函数式编程是相对于目前比较流行和通用的面向对象编程的另一种编程模式。有几个与其他编程范例不同的关键概念。我们首先为最常见的定义提供阐述，以便我们在整个文章中看清这些定义。函数式编程的基本组成是纯函数。它们由以下两个属性定义：他们的结果完全取决于传递给它的参数。没有内部或外部的状态影响它。他们不会造成任何副作用。被调用的次数不会改变程序行为。由于这些属性，函数调用可以被安全地替换其结果，例如函数每次执行的结果都缓存
.NET Core 和 .NET Framework 中的 MEF2
MEF，ManagedExtensibilityFramework，现在已经发布了三个版本了，它们是MEF和MEF2。等等！3去哪儿了？本文将教大家完成基于MEF2的开发。MEF和MEF2其实微软发布了四个版本的MEF：随着.NETFramework4.0发布，微软称之为MEF随着.NETFramework4.5发布，微软让它更好用了，微软称之为MEF2，但因为接口兼容，也直接称之为MEF.NET开发团队觉得MEF第一代性能太差，于是通过NuGet为移动设备发布了可移植类库，是个轻量级版本，只移植了.NETFramework中MEF2里2的部分；随后.NETCore中也加入了MEF2，也是.NETFramework中MEF2里2的部分VisualStudio开发团队觉得.NETFramework里的MEF2性能太差，NuGet版的MEF2功能太少，于是自己又写了一个，微软称之为VS-MEF对于第一代的MEF，我们这里就完全