没做过产品的后端不是个好前端

首先我们先从一个面试题入手。面试官问： “Vue中组件通信的常用方式有哪些？”我答：1. props2. 自定义事件3. eventbus4. vuex5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject6. 此外还有一些非props特性$attrs、$listeners面试官追问：“那你能分别说说他们的原理吗？”我：[一脸懵逼]????在介绍provide和inject之前我们先简单看看其他几个常用属性。$pare

首先我们先从一个面试题入手。面试官问： “Vue中组件通信的常用方式有哪些？”我答：1. props2. 自定义事件3. eventbus4. vuex5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject6. 此外还有一些非props特性$attrs、$listeners面试官追问：“那你能分别说说他们的原理吗？”我：[一脸懵逼]????今天我们来看看Vuex内部的奥秘！如果要看别的属性请移步vuexVuex集中

首先我们先从一个面试题入手。面试官问： “Vue中组件通信的常用方式有哪些？”我答：1. props2. 自定义事件3. eventbus4. vuex5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject6. 此外还有一些非props特性$attrs、$listeners面试官追问：“那你能分别说说他们的原理吗？”我：[一脸懵逼]????下面我们就来一一看看他们内部的奥秘！props解决问题：父给子传值// ch

什么是webpack​ webpack是什么，官网中是这么说的。​ 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。​ 从上面的概念中，我们可以看出webpack是一个会把应用程序中具有依赖关系的每个模块打包成一个或者多个bundle

本文主要介绍了如何通过原生JavaScript封装ajax请求，文中给出了具体的实现代码和详细的解释，希望对你有所帮助。一、JS原生Ajaxajax：一种请求数据的方式，不需要刷新整个页面； ajax的技术核心是 XMLHttpRequest 对象； ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据； 下面简单封装一个函数，之后稍作解释 ajax({ url: "./TestXHR.aspx", //请..

在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素js在父窗口中获取iframe中的元素1、格式：window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click();实例：window.frames["ifm"].document.getElementByIdx_x("btnOk").click();2、格.

　幸运且光荣的被老大安排了一个任务 - “去整理些前端面试题”。年前确实不是招人的好时候，所以我们前端团队经过了超负荷的运转，终于坚持过了春节。春节以后就开始招人啦，这套题考察的目标就是基础基础再基础，嘿嘿。　　事先声明：这些题目的来源：面试曾经被问过；工作被别人问过或者遇见过；网上看见过... 答案真心不给提供，真的是许多问题都需要个人的理解和沉淀，所以还请各位自己动手...前端可以试试自己差不多能回答多少题，哈哈。 其实很多题我也没有好答案，面试的时候如果遇到牛人我也可以顺便交流交流，反正我

前戏前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。（名词解释：在互联网架构中，we...

一、什么是Rest?REST不是"rest"这个单词，而是几个单词缩写 -- REpresentational State Transfer 直接翻译：表现层状态转移，但这个翻译正常人根本看不懂，找到的一种最好理解的说法是，URL定位资源，用HTTP动词（GET,POST,DELETE,DETC）描述操作。REST成熟度的四个层次 第一个层次（Level0）的Web 服务只是使用 HTTP 作为传输方式，实际上只是远程方法调用（RPC）的一种具体形 式。SOAP和 XML-RPC都属于此类。..

完整项目地址：vue-element-admin系列文章：手摸手，带你用 vue 撸后台 系列一（基础篇） 手摸手，带你用 vue 撸后台 系列二(登录权限篇) 手摸手，带你用 vue 撸后台 系列三 (实战篇) 手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板) 手摸手，带你用 vue 撸后台 系列五(v4.0 新版本) 手摸手，带你封装一个 vue component 手摸手，带你优雅的使用 icon 手摸手，带你用合理的姿势使用 webpack4（

现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles"@click="getDescribe(article.id)">methods：方案一： getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}.

使用Vue.js进行项目开发，那必然会使用基于组件的开发方式，这种方式的确给开发和维护带来的一定的便利性，但如果涉及到组件之间的数据与状态传递交互，就是一件麻烦事了，特别是面对有一大堆表单的页面。在这里记录一下我平时常用的处理方式，这篇文章主要记录父子组件间的数据传递，非父子组件主要通过Vuex处理，这篇文章暂时不作说明。与文档里给的方案一样，父组件向子组件传递数据主要通过 props，子组件向父组件传递数据主要通过触发器 $emit()，只是在用法上会有些不同。1、传递基本类型数据当子组件

在vue项目中，往往会遇到这样的情况，就是要实现在一个循环列表中，点击其中一条跳转到下个页面，然后将这一条的相关数据带到下个页面中显示，这是个循环列表，无论点哪一条都是跳到相同的页面，只是填的数据不一样，这个时候就需要实现跳转的时候一起把参数携带过去。1、我在项目中想要点击v-for的<li>，然后跳到下个页面的表格，顺带将参数传递过去。如下图：这里实现的是第一个组件跳转到第二个组件的时候将待办任务的id传递过去，第二个组件接收id后提交给后台请求列表的数据。实现如下：第一个组件里

前言本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍：我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入.尝试1:创建 global.js 并且在其中定义 1 let a = 10; 在入口文件中引入 global.js 1 import './global.js' 在项目中使用: 1.

在项目中，我们常将一些常量信息做成配置项，如，数据库的链接配置，业务错误代码配资等等。我们通过两种方式可以解决该问题。 系统环境变量的方式 配置文件的方式 下边，将以这两方面进行展开。1. 系统环境变量Node.js 中通过process.env来访问当前的环境变量信息$vim test.jsconsole.log(process.env.HELLO_MSG);// 系统设置环境变量$ export HELLO_MSG="Hello, world" &a.

原文https://github.com/wangdahoo/vue-scroller主题Vue.jsVue ScrollerVue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pull to refresh and infinite loading.DemoChange Logsv0.3.9 add getPosition method for scrolle...

前言：很多时候我们在项目中需要用到树，有些树仅仅是展示层级关系，有些树是为了展示和编辑层级关系，还有些树是为了选中项然后其他地方调用选中项。不管怎么样，树控件都是很多项目里面不可或缺的组件之一。今天，博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享，希望能帮大家找到最合适的控件。还是那句话：控件没有最好，只有最合适。一、JQuery树形控件Jquery树形控件是一款基于JQuery+bootstrap、完全通过js和样式手写出来的非常轻量级的控件，网上很多地方都能看到它的影子。

javascriptIE中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度FireFox中：document.body.clientWidth ==> BODY对象宽度

一 Canvas跨域现象地图导出是地图中常用的功能，并且OpenLayers3中也提供了两个地图导出的例子:http://openlayers.org/en/latest/examples/export-map.html http://openlayers.org/en/latest/examples/export-pdf.html。看到这两个例子我们都很兴奋，直接copy过来不就实现导出地图了吗？so easy，妈妈再也不用担心我导出不了地图图片啦！但当我们抄好代码执行时，现实就是这么赤裸裸的打脸

一.webpack基础　　1.在项目中生成package.json：在项目根目录中输入npm init，根据提示输入相应信息。（也可以不生成package.json文件，但是package.json是很有用的，所有建议生成）　　2.安装webpaack　　　　a.在全局中安装webpack：npm install webpack -g　　　　b.将webpack安装到项目并将webpack写入package.json的devDependencies中：进入项目根目录，然后在命令行中输入npm

相信vue使用者对vue-cli都不会陌生，甚至可以说，很熟悉了，但对其webpack的配置可能知之甚少吧。过完年回来后，我接手了公司的新项目。新项目是一个spa。很自然，我就想到了vue-cli脚手架了，当时研究一下它的webpack配置。于是，就有了其他的内容。今天这篇文章，是在原来的基础上，增加了一些新版本的内容，但实质上变化不大。说明此仓库为vue-cli webpack的配置分析，其实只是在源码中加上注释而已。大家查看详细分析，可以从后面提到的入口文件开始查看。分析不包括che

当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 tomcat 上。如果是 vue-cli (非 simple 脚手架)，这篇文章可能有点帮助。地址链接：vue-cli 如何打包上线先来描述一下期间遇到的问题有哪些：1、打包后将 dist 文件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空白页，f12 提示 404。2、打包好的静态资源均是...

javascript设计模式系列创建型：1.抽象工厂模式（Abstract Factory）2.构建者模式（Builder）3.工厂方法模式（Factory Method）4.原型模式（Prototype）5.单例模式（Singleton）结构型：1.适配器模式（Adapter）2.桥接模式（Bridge）3.组合模式（Compositor）4.装饰者模式（Decorator）5.外观模式（Facade）6.享元模式（Flyweight）7.代理.

常见的6种JavaScript设计模式构造函数模式/** * 构造一个动物的函数 */function Animal(name, color){ this.name = name; this.color = color; this.getName = function(){ return this.name; }}// 实例一个对象var cat = new Animal('猫', '白色');console.log( cat.get

我们是如何做好前端工程化和静态资源管理随着互联网的发展，我们的业务也日益变得更加复杂且多样化起来，前端工程师也不再只是做简单的页面开发这么简单，我们需要面对的十分复杂的系统性问题，例如，业务愈来愈复杂，我们要如何清晰地梳理；团队人员愈来愈多，我们要如何更好地进行团队协作；功能愈来愈多，我们要如何保证页面的性能不至于下降，等等。所有的这些都可以归结为如何提升开发体验和性能问题。提升开发体验我们主要从以下三个方面来提升我们的开发体验。规范化当团队人员不断扩充时，我们需要制定统一的

前端“智能”静态资源管理　　模块化/组件化开发，仅仅描述了一种开发理念，也可以认为是一种开发规范，倘若你认可这规范，对它的分治策略产生了共鸣，那我们就可以继续聊聊它的具体实现了。　　很明显，模块化/组件化开发之后，我们最终要解决的，就是模块/组件加载的技术问题。然而前端与客户端GUI软件有一个很大的不同：前端是一种远程部署，运行时增量下载的GUI软件　　前端应用没有安装过程，其所需程序资源都部署在远程服务器，用户使用浏览器访问不同的页面来加载不同的资源，随着页面访问的增加，渐进式的将整个

Nodejs创建自己的server后，我们如果需要从客户端利用ajax调用别的服务器端的数据API的接口，这时候出现了ajax跨域问题。一种是利用在客户端解决跨域问题这种方案大家可以去网上查查另一种方案是在服务器端去请求别的服务器，然后将数据再返回客户端.这里就涉及到了：ajax请求，expressjs接收请求，Nodejs发送REST请求。我着重写写关于这个方案的解决方法：首先利用express创建路由，接收客户端发送的不同请求。express路由可以接收get请求和post请...

kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用nodejs更简单环境:unbuntu 14.10nodejs 0.10.35express 4.11.2formidable 1.0.16kindEditor 4.1.10webStorm 81.通过IDE或终端创建一个名称为test的工程2.编辑package.json添加formida

要了解Router我们需要先知道到Application，首先，每一个express实例本身内部就内建了router，所以我们先从简单的下手，先使用application；另外这里我们只选择get方法，作为我们Router.Method, 之所以使用get是因为它足够简单；精确匹配形式1. get有很多种用法 var express = require("express"); var app = express(); app.get("/example...

CommonJS，AMD，CMD区别博客分类： seajs和requirejsJavaScriptzccst转载学得比较晕，再次看commonjs，amd, cmd时好像还是没完全弄清楚，今天再整理一下：commonjs是用在服务器端的，同步的，如nodejsamd, cmd是用在浏览器端的，异步的，如requirejs和seajs其中，amd先提出，cmd是根据commonjs和amd基础上提出的。为什么晕呢？是因为没用，或用得太少。光看看文章是不行的。CommonJS...

　　做为一个web前端，处理和了解浏览器差异一个重要问题.下面将介绍本人在工作中的一些笔记总结，先介绍没有使用js库的情况。　　1.　　setAttribute方法设置元素类名 ： 在jQuery中，直接使用attr()方法即可，可在原生的JS中element.setAttribute('class','newClassName') //这个是W3C的标准，在兼容W3C标准的浏览器中有效，可是，IE才是国内用户的主旋律element.setAttribute('className','newCla

JS正则表达式验证数字非常全Js代码 <script type="text/javascript"> function SubmitCk() { var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; if (!reg.test($("#txtEmail").val())) { alert("请输入正确邮箱地址"..

阅读目录玩转前端之模拟数据回到目录玩转前端之模拟数据博客园主页：http://www.cnblogs.com/handoing/是否还在为前端模拟数据头疼？是否还在为后端返回数据格式较多内心烦躁？是否还想吸一支烟压压精？看下去吧，这里比心理医生还管用。。。1.满地拉屎版function fetchUserList() {}var isDev = true;var data = { "status": 3, "mess..

为什么要用TypeScript以下是本人的一点拙见，欢迎指正。TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。那先来看看TypeScript是如何解决这两个问题的。一. 编译时的强类型TypeScript设计了一套类型机制来保证编译时的强类型判断。最简单的，你可以申明变量的类型，那么任何其他类型的赋值将会引起编译错误。例如va.

最近一直搞Dcloud ，这是HTML5版本的开发，打包时候，可以打包成 apk 和ipa 分别运行在安卓和ios 机器上面，但是这里面的资料很少，遇到问题，之后只能自己钻研总结，现在有这么一个需求，需要实现蓝牙开启后，监听蓝牙接口传递的数据，然后呈现给用户。我试了很多方法，之前是在 HTML5上直接写方法，监听蓝牙状态，但是jS是单线程，直接把进程阻塞了其他的啥也干不了，而且时间长了监听，总会莫名中断，这是我当时写的算法http://ask.dcloud.net.cn/publish/ar

本文主要解决两个问题： 什么是事件流 DOM事件流的三个阶段 起因在学习前端的大半年来，对DOM事件了解甚少。一般也只是用用onclick来绑定个点击事件。在寒假深入学习JavaScript时，愈发觉得自己对DOM事件了解不够，遂打开我的《JavaScript高级程序设计》，翻到DOM事件那一章，开始第二次学习之旅。当然，DOM事件所囊括的知识较为庞杂，所以本文专注与自己学习时所碰到的难点，DOM事件流。流流的概念，在现今的JavaScript中随处可见。比如说React中

在开发vue项目中，请求是不可缺少的，在发送请求时常常需要统一处理一些请求头参数等设置与响应事件，这时利用请求拦截器再好不过。这里以axios请求为例实现了设置统一请求头添加token, 其中token在登录时被存入了localStorage中。同时拦截器利用new cancelToken与定义的cancelPending方法实现了可以取消正在pending状态的请求，什么情况会需要取消请求呢？如下两种情况：1.有一个局部分页时，用户快速点击第2页，然后继续点击第3页，如果网络不太稳定.

一、监听器介绍1.1、监听器的概念　　　　监听器是一个专门用于对其他对象身上发生的事件或状态改变进行监听和相应处理的对象，当被监视的对象发生情况时，立即采取相应的行动。监听器其 实就是一个实现特定接口的普通java程序，这个程序专门用于监听另一个java对象的方法调用或属性改变，当被监听对象发生上述事件后，监听器某个方法 立即被执行。1.2、监听器案例——监听window窗口的事件监听器1 package me.gacl.listener.demo;23 import jav

一、监听域对象中属性的变更的监听器　　域对象中属性的变更的事件监听器就是用来监听 ServletContext, HttpSession, HttpServletRequest 这三个对象中的属性变更信息事件的监听器。　 　这三个监听器接口分别是ServletContextAttributeListener, HttpSessionAttributeListener 和ServletRequestAttributeListener，这三个接口中都定义了三个方法来处理被监听对象中的属性的增加，删除和替

基于spring-boot和elfinder的在线文件管理大家好，我是帅气小伙，今天为大家分享的是一个轮子，最近在项目中需要一些CMS的功能，在线管理一些静态资源文件，在经过一番资料查找，最终决定使用elfinder。它的官方Java集成还是有点坑的。于是在找到了一些民间大神封装好的elfinder-java，在他的基础上进行了一番修改，能够快速集成到了spring-boot。目前的功能 支持在线文件下载 image.png 支持目录上传 ima...