从零开始搭建一个简单的基于webpack的vue开发环境
都8102年了，现在还来谈webpack的配置，额，是有点晚了。而且，基于vue-cli或者create-react-app生成的项目，也已经一键为我们配置好了webpack，看起来似乎并不需要我们深入了解。不过，为了学习和理解webpack解决了前端的哪些痛点，还是有必要从零开始自己搭建一个简单的开发环境。本文的webpack配置参考了vue-cli提供webpack-simple模板，这也是vue-cli里面最简单的一个webpack配置，非常适合从零开始学习。注：本文webpack基于3.10.0演示代码下载安装webpacknpmiwebpack-g项目初始化新建一个文件夹vue-webpack-simple新建package.jsonnpminit-y安装vuewebpackwebpack-dev-servernpmivue--savenpmiwebpackwebpack-dev-server--save-dev根目录下新建index.html<!DOCTYPEhtm
vue项目移植tinymce踩坑
前言最近因业务需求在项目中嵌入了tinymce这个编辑器，用于满足平台给用户编辑各类新闻内容什么的业务需求，前后也花了不少时间体验和对比了市面上各类开源编辑器。各大WYSIWYG编辑器的简单比较UEditor：因为已经不再维护了，需要大量修改源码，很多都是专门为jsp等服务器渲染项目写的代码需要删除，然后越删越害怕越删越不敢用，依赖jquery，需要专门用js去parse编辑完成的内容，parse完的内容还可能污染全局css，兼容老浏览器还不错，但是，我们不怎么考虑兼容IE。所以，告辞。wangEditor：中文文档，上手快，依赖jquery，功能少点要花时间去写插件，需要单独为图片上传功能写个接口，老项目忙着上线临时用过，感觉并不适合当前业务这么重的编辑功能于是放弃了。Quill：api友好,功能少，需要特定的css去解析文本（这点我不大喜欢），ui好看，适合作为论坛回帖功能使用。CKEditor：CKEditor目前主流的还是4.x的版本，但是文档看着很瞎眼实在是提不起兴致去配置，草草用了下就放弃了，5.x版本刚从be
SpringSecurity中密码加盐与SpringBoot中异常统一处理
当前后端分离时，权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块，现在权限管理模块已经做完了，我想通过5-6篇文章，来介绍一下项目中遇到的问题以及我的解决方案，希望这个系列能够给小伙伴一些帮助。本系列文章并不是手把手的教程，主要介绍了核心思路并讲解了核心代码，完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外，原本计划把项目跑起来放到网上供小伙伴们查看，但是之前买服务器为了省钱，内存只有512M，两个应用跑不起来(已经有一个V部落开源项目在运行)，因此小伙伴们只能将就看一下下面的截图了，GitHub上有部署教程，部署到本地也可以查看完整效果。项目地址：https://github.com/lenve/vhr上篇文章我们已经把整个环境搭建成功了，并且配置好了资源和角色的动态分配，本文我们主要来聊聊异常处理和密码加密。本文是本系列的第三篇，建议先阅读前面的文章有助于更好的理解本文：1.SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权
js img图片加载失败，重新加载+断网检查
我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题，页面就因为这张蹦掉的图变得不美观。所以我们需要图片加载失败的时候重新加载图片//js方法定义functionresetImgUrl(imgObj,imgSrc,maxErrorNum){if(maxErrorNum>0){imgObj.onerror=function(){reSetImgUrl(imgObj,imgSrc,maxErrorNum-1);};setTimeout(function(){imgObj.src=imgSrc;},500);}else{imgObj.onerror=null;imgObj.src="<%=basePath%>
Vue-概念理解
更多详细内容，可以查看原文链接：Vue-概念理解渐进式框架组件系统客户端路由状态管理构建工具虚拟DOMMVVM模式MVX模式是什么渐进式框架Vue.js是一套构建用户界面的渐进式框架。声明式渲染和组件系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案。声明式渲染所有的逻辑尽可能在状态的层面去进行，当状态改变的时候，View应该是在框架帮助下自动更新到合理的状态。在Vue2.0中，渲染层的实现做了根本性改动，那就是引入了虚拟DOM。Vue的编译器在编译模板之后，会把这些模板编译成一个渲染函数。而函数被调用的时候就会渲染并且返回一个虚拟DOM的树。当我们有了这个虚拟的树之后，再交给一个patch函数，负责把这些虚拟DOM真正施加到真实的DOM上。在这个过程中，Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。在渲染过程中，侦测到的数据来源之后，之后就可以精确感知数据源的变动。到时候就可以根据需要重新进行渲染。当重新进行渲染之后，会生成一个新的树，将新树
前后端分离实践：基于vue实现网站前台的权限管理
Javascript做为当下的热门语言，用途很广泛，从前端到后端处处可见其存在，该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面，为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习。Javascript框架鳞次栉比，但基本原理大致相同，因此选用国内人开发的vue.js进行一个初步的尝试。学习vue.js也一周多的时间了，说起vue的主要用法，无外乎DeclarativeRendering、ComponentSystem、Client-sideRouting、Vue-resource、Axios以及视项目大小而决定是否使用的Vuex，学习vue事小，主要转变思维，面向前后端分离的组件式web开发才是真正想去实践的。正好我的个人网站CodeSheep最近要开发后台管理，因此正好用vue这一套来实现了一下。说到后台管理，绕不开的问题就是权限的管理。既然想实践前后端分离这种思想，因此后台管理的所有web前端的东西应该独立由前端完成，这其中就包括很重要的由前端来根据权限进行相关东西的控制。我
前端实现记住密码功能
最近写项目的时候，遇到客户需求一个记住密码的功能。于是在前端，存取cookie实现了记住密码。下面的代码可以直接拿过来用。把相应的ID和时间复制过去。js代码完全复制过去就行了，不用改。ps：此功能的记住密码，没有记住账号功能。就是说账号需要自己输入，光标离开用户名输入框之后，密码会自动读取代码中的button按钮可以改成submit按钮HTML
vue cli 起手式
学习资料vue-cligithubvue-cliless准备工作1.nodenpm2.webpackstudyhtmlcss(less)jsvuewebpackstart安装vue-clinpminstall-gvue-cli创建vue-cli项目指南vueinit<template-name><project-name>codingcd<project-name>npminstallnpmrundev
MUI重置上拉加载完美解决方案
简述：mui混合开发遇到这样的问题解决好就，一个列表进行分页加载数据下拉刷新请求前10条数据，上拉加载如果大于10条提示上拉加载更多，如果小于10条提示没有更多数据，当你上拉加载没有更多数据再次执行下拉刷新发现上拉加载不好用了，第一想到的是上拉加载没有重置。官方给出的解决方案是这样的查文档说用mui('#下拉容器id').pullRefresh().refresh(true);是进行上拉加载重新激活）下拉刷新数据加载完后加了（加粗的部分）mui('#pullrefresh').pullRefresh().refresh(true);然而使用并没什么卵用，有的人说好用有的人说不好用傻傻分不清，下面我给出我的决绝方案查了很久东拼西凑也算是解决了。官方给出两句代码1.禁用上拉刷新//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数；mui('#pullup-container').pullRefresh().disablePullupToRefresh();
用Vue自己造个组件轮子，以及实践背后带来的思考
前言首先，向大家说声抱歉。由于之前的井底之蛙，误认为Vue.js还远没有覆盖到二三线城市的互联网小厂里。现在我错了，从我司的前端技术选型之路便可见端倪。以太原为例，已经有不少公司陆续开始采用Vue.js作为他们公司前端的技术栈，前后端分离正搞得热火朝天，还有更多的公司正在来时的路上。所以说，还在校的童鞋和仍在培训的萌新们，Vue已经成为现在前端的标配技能之一，为防止掉队，跟着闰土大叔学起来吧。接下来，正文从这开始~先来了解下当前的行业背景：随着SPA、前后端分离的技术架构在业界越来越流行，前端的业务复杂度也越来越高，导致前端开发者需要管理的内容，承担的职责越来越多，这一切，使得业界对前端开发方案的思考多了很多，以react、vue等框架为代表推动的组件化开发模式越来越被开发者认可，这种模式极大的降低了我们开发与维护的成本。最近一段时间，我也在研究Vue，在网上看了那么多基于Vue的组件，何不自己也来造个小轮子，有了这个想法后，撸子袖子就是干。本文提供代码仅仅是提供而已，重要的是思路。1<!DOCTYPEhtml>
JS自适应屏幕代码【原创】
写手机页面的时候，我一般使用rem作为单位，比较方便。下面贴出一段js自适应屏幕的代码。//(function(doc,win){vardocEl=doc.documentElement,resizeEvt=‘orientationchange’inwindow?‘orientationchange’:‘resize’,recalc=function(){varclientWidth=docEl.clientWidth;if(!clientWidth)return;if(clientWidth>=720){//设定最大宽度720pxdocEl.style.fontSize=‘100px’;//这里的100px，意思是1rem=100px；可以自己选择喜欢的大小}else{docEl.style.fontSize=100*(clientWidth/720)+‘px
在vue中通过axios异步使用echarts
现实的工作中,数据不可能是像之前的demo演示的那样把数据写死的.所有的数据都应该通过发送请求进行获取,所以,这篇文章,我将在Vue项目中使用Echarts:在Vue中引入Echarts中的数据提取出来,放入到static/data.json文件中,请求该文件获取数据。一、实现异步加载数据(一)引入vue-resource通过npm下载axios//命令行中输入npminstallaxios--save在main.js中引入axios并注册//main.jsimporthttpfrom'./http'Vue.prototype.$http=http//挂载到原型上(二)设置data.json将该柱状图的没有数据的option抽取到data.json中,代码如下:{"title":{"text":"简单饼状图"},"tooltip":{},"xAxis":{"data":["衬衫","羊毛衫","雪纺衫","裤子","高
vuejs--递归组件(树型表格分享)
前言 前段时间使用vue做了一套后台管理系统，其中使用最多就是递归组件，也因为自己对官方文档的不熟悉使得自己踩了不少坑，今天写出来和大家一起分享。递归组件 组件在它的模板内可以递归地调用自己，只有当它有name选项时才可以。在官网这句话就是关键定义组件是一定要有name属性。模拟数据格式如下：[{"id":"1","menuName":"基础管理","menuCode":"10","children":[{"menuName":"用户管理","menuCode":"11"},{"menuName":"角色管理","menuCode":"12","children":[{"menu
解决Vue引入百度地图JSSDK：BMap is undefined 问题
原文链接：解决Vue引入百度地图JSSDK：BMapisundefined问题百度地图官网文档介绍使用JSSDK时，仅提供了2种引入方式：script引入异步加载但vue项目中仅某一两个页面需要用到百度地图，所以不想在index.html中全局引用。那在单个vue组件页面中如何引入呢？刚开始时，是直接通过DOM操作方式插入script标签到当前document中，如下：letscriptNode=document.createElement("script");scriptNode.setAttribute("type","text/javascript");scriptNode.setAttribute("src","http://api.map.baidu.com/api?v=3.0&ak=您的密钥");document.body.appendChild(scriptNode);结果是不行的。然后考虑使用异步加载的方式，结合参考网上方案，单独创建baidu-map.js脚本：ex
微信小程序页面效果之『仿QQ消息气泡拖拽消失』
这样思路就清晰很多，其实就是由两个圆、两条直线、两条曲线构成：js代码如下：//两条贝塞尔曲线和两条直线this.ctx.beginPath();this.ctx.moveTo(x1,y1);this.ctx.quadraticCurveTo(this.anchorX,this.anchorY,x2,y2);this.ctx.lineTo(x3,y3);this.ctx.quadraticCurveTo(this.anchorX,this.anchorY,x4,y4);this.ctx.lineTo(x1,y1);this.ctx.setFillStyle('red');this.ctx.fill();//两圆圈this.ctx.beginPath();this.ctx.arc(this.startX,this.startY,this.radius,0,2*Math.PI)this.ctx.arc(this.x,this.y,20,0,2*Math.PI)this.ctx.setFillS
vue从入门到进阶：指令与事件（二）
一.插值v-once通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：spanv-once>这个将不会改变:{{msg}}</span>v-html双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，你需要使用v-html指令：<p>Usingmustaches:{{rawHtml}}</p><p>Usingv-htmldirective:<spanv-html="rawHtml"></span></p>这个span的内容将会被替换成为属性值rawHtml，直接作为HTML——会忽略解析属性值中的数据绑定。你的站点上动态渲染的任意HTML可能会非常危险，因为它很容易导致XSS攻击。请只对可信内容使用HTML插值，绝不要对用户提供的内容使用插值。使用JavaScript表达式Vu
vue 2.x 的 v-bind 指令的 .prop 事件修饰符详解
vue官方文档对.prop修饰符的解释是：使用例子：那么，具体的原理和用法是什么呢？这要从html的DOMnode说起。在html标签里，我们可以定义各种attribute。在浏览器解析DOM树渲染页面后，每个标签都会生成一个对应的DOM节点。节点是一个对象，所以会包含一些properties，attributes也是其中一个property。定义Property：节点对象在内存中存储的属性，可以访问和设置。Attribute：节点对象的其中一个属性(property)，值是一个对象，可以通过点访问法document.getElementById('xx').attributes或者document.getElementById('xx').getAttributes('xx')读取，通过document.getElementById('xx').setAttribute('xx',value)新增和修改。在标签里定义的所有属性包括HTML属性和自定义属性都会在attr
7 款华丽的 HTML5 Loading 动画特效
1.程序员必读24本经典，100%免费领取2.最值得学习的24本编程书，免费领取3.24本编程纸质书籍，云沃客限时免费送！4.助力程序员快速涨薪的24本精选纸质书本文由码农网–小峰原创，转载请看清文末的转载要求，欢迎参与我们的付费投稿计划！我们在进行大数据的传输或者复杂操作的等待时，最好能有一个Loading等待的小动画提示用户。本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效，希望你会喜欢。1、HTML5Canvas实现超酷Loading动画这次我们来看一款非常酷的Loading动画加载效果，和纯CSS3实现齿轮Loading加载动画类似，也是利用几何的特性来模拟的，它是一些类似旋转的动画效果。在线演示源码下载2、HTML5Canvas发光Loading动画之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的
vue从入门到进阶：计算属性computed与侦听器watch（三）
计算属性computed模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<divid="example">{{message.split('').reverse().join('')}}</div>所以，对于任何复杂逻辑，你都应当使用计算属性。例子<divid="example"><p>Originalmessage:"{{message}}"</p><p>Computedreversedmessage:"{{reversedMessage}}"</p></div>varvm=newVue({el:'#example',data:{message:'Hello'},computed:{//计算属性的getterreversedMessage:functio
TypeScript + Vue系列(一): 新项目配置
友情提示!!!如下图所示,vue-cli将在下个版本提供开箱即用的TypeScript的脚手架.在你阅读文章前,请检查Vue官方文档:TypeScript支持.如果官方已经提供了脚手架,下面文章就可以不用看了.去vue-cli开箱一个typescript+vue的模板吧!!!前言在Vue2.5版本的升级中,Vue已经大大的改进了对于类的支持.但是目前在Vue中使用TypeScript依然需要开发者做一些配置和引入第三方的库(例如官方推荐的vue-class-component).本文就是基于vue-cli初始化项目后,配置TypeScript所需要的相关步骤.本位提供了示例代码,读者可以在配置的过程进行比对:master分支为完整代码;baseConfig分支提供了TypeScript的配置;extension-example为引入了vue-class-component的代码;初始化项目1.使用vue-cli初始化webpack模板,并安装该模板所需要的依赖文件$vueinitwebpa