PigBiBiX的博客

原创 《深入浅出VUE》笔记（一）Object的变化侦测

本文的记录主要基于《深入浅出VUE》一、Object的变化侦测Object.defineProperty依赖：即把用到数据的地方收集起来，然后等属性发生变化时，把之前收集好的依赖循环触发一遍

原创 VUE通过:src设置图片路径，不能正常显示

通过下面这种方法设置图片路径，图片不能正常加载解决方法：相关文献：https://vue-loader.vuejs.org/zh/guide/asset-url.html

原创 高质量JS代码准则

本文所有准则均来自DavidHerman的《编写高质量JavaScript代码的68分有效方法》1、了解你使用的JavaScript版本知识点：1）不要将进行严格模式检查的文件和不进行严格模式检查的文件连接起来。2）通过将其自身包裹在立即调用的函数表达式中的方式连接多个文件。// file1.js(function(){ "use strict"; // ....})();// file2.js(function(){ "use strict"; // .

原创 【一名合格前端工程师的自检清单】--自检答案

作者：code秘密花园 公号 / ConardLi微信公众号的文章链接：https://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651556338&idx=1&sn=589976a52b9162ec8d7a9a165cbfac7d&chksm=80255e33b752d7257f4ed1e36560a496c097c77b5ac922adc0f11a7b2c86b7654ba77e1a255a&scene=..

原创 Fiddler使用笔记1（在安卓手机抓包）

1、在安卓抓包配置

原创 《CSS揭秘》--笔记

1、减少代码的依赖，行高line-height与字体大小font-size存在关系，避免修改字体大小后又要手动修改行高，应该像下面这样写button { padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-

原创 【读书笔记】《程序员修炼之道》-Andrew Hunt / David Thomas

1

原创 控制器调用指令的方法-angularjs

1、指令scope: { setFn: '&'}scope.clickDirective = function () { console.log('父层调用了我')}scope.setFn.call(scope, { params: scope.clickDirective})2、引用指令的控制器html<test-directive set-fn="setDirectiveFn(params)"></test-directive...

原创 新未来简史-笔记

原创 并发请求过多，导致页面脚本执行阻塞

最近遇到一个问题，服务器的执行效果和本地调试的效果不一致。需求是这样：上传50张图片，只要一张图片处理完，立马弹出一个框显示处理结果，其他图片处理结果异步回显。后端因为特殊原因，期待前端连续发50个请求，而不是一次发送一个请求。但是出现了个问题：1、页面渲延迟，变得卡顿。图片上传后，有一张图片的处理结果已经返回，但是弹框迟迟不弹出，直到有40多个处理结果返回的时候，弹框才出现；2、页面脚本执行被阻塞。弹框出现后，脚本的执行被阻塞，很多执行方法要等待40多个处理结果返回的时候，才能执行；原来大概的

原创 Error: Cannot find module 'icss-replace-symbols'

npm --registry https://registry.npm.taobao.org install--save-dev icss-replace-symbols

原创 Module build failed (from ./node_modules/css-loader/dist/cjs.js):

css-loader 版本过高，切换版本npm install--save-dev css-loader@2.1.0

原创 gulp-sass基础使用（基于gulp4.0）

github地址： https://github.com/dlmanning/gulp-sass由于github的说明文档是基于比 gulp 4.0低的版本，所以我们跟着练习，会出现一些小错误。下面结合原文，对原文示范的例子做出了一些修改。1、安装npm install node-sass gulp-sass --save-dev2、基础使用 'use ...

原创 重构gulpfile.js--基于gulp 4.0

当项目越来越庞大的时候，gulpfile.js 文件可能也会变得很庞大，上千行的代码，各种任务纵横交错，看得眼花缭乱。这个时候，应该考虑一下重构 gulpfile.js 文件。重构的关键字-- 拆分。 我的 gulp 的版本是 4.0.2，参考了网上很多这方面的博文，发现好多都不适用，基本都是以 3.0 为基础的。磕磕碰碰，终于成功做了一个小例子。1、构建文件结构。tasks文件夹...

翻译 如何通过Gulp构建和开发网站

原文：https://www.smashingmagazine.com/2014/06/building-with-gulp/作者： Callum Macrae 简述：Gulp是少数用JavaScript编写的构建工具，但是也有不是用JavaScript编写的构建工具，例如，Rake。我们为什么要选择Gulp呢？ 在不同的浏览器优化你的网站资源和测试你的设计，...

原创 前端请求thinkPHP接口报错。Respnse to preflight request doesn't pass access control check

前端请求thinkPHP接口报错。报错信息如下所示： 解决： 在ThinkPHP\Library\Think\Controller.class.php中加入                  header('Access-Control-Allow-Origin: http://localhost:8080');     // 前端访问地址               ...

转载 【转载】Vue开源项目库汇总

原文地址：http://www.cnblogs.com/opendigg/p/6513510.htmlUI组件element ★9305 - 饿了么出品的Vue2的web UI工具套件Vux ★6802 - 基于Vue和WeUI的组件库mint-ui ★4776 - Vue 2的移动UI元素iview ★4458 - 基于 Vuejs 的开源 UI 组件库Keen-UI ★2363 - 轻量级的基...

原创 Angular is running in the development mode. Angular项目转为生产模式

   准备把 Angular项目部署到服务器，打包完之后，打开网页，发现console出现  Angular is running in the development mode. Call enableProdMode() to enable the production mode.提示，而且提示建议我转成生产模式。在stack overflow找到了方法。1、首先确保项目文件夹下的main.t...

原创 Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers

   最近在用thinkPHP和Angular开发一个小系统。后台已经解决跨域问题了，但是前端这边还没有搞定这个问题。一直报错，错误是：Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers。   当我在前端（Angular4）设置header，这个问题就会消失...

原创 2017秋招和2018春招个人总结

   现在是春招的小高峰期，大高峰期刚结束没多久，进入4月，春招的企业也少了很多。3月中旬拿到了自己比较喜欢的offer，就结束自己的春招了。想做一个关于自己的总结，说说个人对秋招和春招比较浅显的理解，纯属个人看法，不求赞同。   2017年10月初我就结束了我的实习工作，开始准备秋招。这时候很多大公司已经笔试完了或则正在开始笔试。我也开始海投网申。每次做笔试题就有一种感觉，我干嘛不在暑假实习的时...

原创 Angular部署百度UMEditor富文本编辑器

最近做的一个angular做前端的项目需要用到富文本编辑器，其实在网页部署富文本编辑器不难，只要按照文档配置就可。但是，部署到angular就有点麻烦。网上关于如何在angular上部署富文本编辑器的教程很少而且讲得很模糊，加上本人刚上手angular，这问题就让我很头疼。     综合网上各种教程，自己最终成功得在项目中部署了百度的UMEditor富文本编辑器。废话不多说，进入主题。

原创 使footer固定在浏览器底部

只要做网页，就百分之九十九会做footer的布局。一般我们最想要的布局是，footer一直固定在网页的底部。如果网页内容不多，就把footer固定在可视区的底部。      总体布局一般是这样的：      I am header I am content I am footer如果content的内容不多，不足以不footer撑到底部，就会出现这样的情况。

原创 FormData多图片上传（每次只能传送最后一张图片的问题）

最近在需要做一个多图片上传的功能，上传的图片，一直被最后一张图片覆盖，只能上传最后一张一张。代码如下： var formData = new FormData(); var pic = document.getElementById("goodsDetailPic").files;

原创 Angular之jqLite的使用说明

公司最近做的项目的前端都采用Angular框架，作为一个刚入门Angular的新手，要彻底离开jQuery去做前端界面似乎有点难，特别是对DOM的操作。网上很多教程说jQuery和Angular可以混着一起用，经过我的实践，确实是可以用。但是本人觉得，有几点不太好的地方。        1、显得代码有点混乱。            2、由于Angular具有ng-click的指令，

原创 实现双击进入编辑，失去焦点后保存数据（Angular）

最近做一个项目，前端由Angular搭建，需要实现一个功能，就是双击进入编辑，当失去焦点的时候把数据保存。（即改变双向绑定的数据）。        先写一些简陋的HTML代码：       测试的数据如下： $scope.data = [{id:1,name:'

原创 jQuery简易左侧固定菜单

最近做一个电商的站，有一个页面需要显示一个三级菜单，根据客户需求，最好是把菜单固定在顶部导航栏左侧，当鼠标悬浮上面时，才显示一级菜单，当鼠标悬浮一级菜单时，显示二级菜单。大概的需求跟京东的左侧菜单类似。     网上有很多的例子，而且做的很精美。但是很多例子往往引用了很多插件，我只要一个菜单，可不想引用N多的文件。   大概要的效果如下图所示：         为了方便而且

原创 相同字符串比较却返回false（提取cookie内容出现的小问题）

1

原创 Angular+Boostrap-fileinput+formdata上传图片（前端代码）

1、先布置好前端界面的代码      HTML代码：fileinput * 上传图片: 图片后缀名必须为png、jpg、gif,文件小于2M JavaScript代码： $("#inputPic").fileinput({ language: 'zh', //设置语言 allowedPrev

原创 根据服务器返回的状态改变前端显示的内容（Angular 过滤器）

最近在做一个以Angular为框架的单页面网页应用。遇到这样一个小问题，就是前端的显示内容得根据后端返回的内容决定。举个栗子，前端要显示一个关于课程的列表，每个课程都有一个状态值，可以显示为“已上线”、“未上线”、“已结课”、“预开课”。如果直接接收服务器传回来的值，是直接显示“0”、“1”、“2”、“3”四种状态值。返回的是数值而不是中文。要解决这个问题，可以通过自定义一个过滤器，根据返回值，改

原创 浮动出现空白的问题

今天在做一个作品展示网站的时候，出现一个小问题。在使用浮动的时候出现了点小问题，第一行向左浮动正常，第二行就出现问题了，空出了一个位，第二行空出了 两个位。一开始以为是margin或则padding的问题，但是清除了margin和padding后，问题依然存在。                htmld代码：         点击查看大图

原创 判断一个元素节点无内容时，清除其占位

最近在修改一个被人已经修改过ecshop商城前端，在布局上遇到一个比较好玩的事情。我把问题描述一下。     在商品页面那里有个商品属性介绍栏，大概的布局是这样的。              根据上面的要求，这些属性是由后台自由添加的。但是这出现一个小问题，就是当删除中间的属性的时候，例如删除“商品品牌”，商品品牌的位置会依然占着，设想一下，假如这里的属性删除，那里的属性也

原创 有序列表的合并（由C转为JavaScript实现）

最近翻回《数据结构(C语言)》第二版----严蔚敏的教材书来看看，准备复习一下数据结构方面的知识。由于，以后走前端的方向，看到里面的算法，就情不自禁想用JavaScript来实现。今天，就写了一个关于有序列表的合并的JS代码。    书本的题目是：     A = 3，5，8，11    B = 2，6，8，9，11，15，20    合并后：2，3，5，6，8，8，9，11，11

转载 深入浅出的javascript的正则表达式学习教程

转载地址：http://www.cnblogs.com/tugenhua0707/p/5037811.html深入浅出的javascript的正则表达式学习教程阅读目录了解正则表达式的方法了解正则中的普通字符了解正则中的方括号[]的含义理解javascript中的元字符RegExp特殊字符中的需要转义字符了解量词贪婪模式与非贪婪模式讲解理解正则表达式匹配原理

原创 解决：子div设置margin-top使得父div也跟着向下移动

之前在写网页的时候，发现一个小问题，就是子div设置margin-top的时候，父的div也会跟着向下移动。我用代码和图描述一下问题：  *{margin:0;padding:0;} .div1{background:green;height:100px;} .div2{background:darkblue;height:100px;} .subDiv{background:red;

原创 消除mouseover或mouseout重复触发事件

通常会在商品的展示图，设置一些鼠标悬浮事件。当鼠标悬浮在商品图片时，会触发一些时间，出现商品信息框或则商品图片发生变化，当鼠标离开商品图片时，图片恢复原状。最近在做类似的事情，由于不能使用就Query，（不能用jQuery，我也很无奈。。）于是自己写了原生的JS来实现一些mouseover和mouseout事件，但是，测试时发现了一些问题。商品的展示图的HTM代码如下所示：

原创 颜色运用（《写给大家看的设计书》--内容总结）

最近在制作网页的时候，由于没有美术的功底，在网页配色上，完全依靠感觉。这样的配色过程，很耗费时间，得不断选择自己认为不错的配色进行搭配。后来，在《写给大家看的设计书》中看到这样的内容，关于利用色轮进行配色。看完之后，觉得对我以后进行网页设计的配色非常有用，于是就记下这些主要的内容。    首先来介绍一下三原色、三间色、第三色。    1、三原色。黄、红、蓝就是三原色。

原创 解决：在win7误删了ubuntu，开机出现“error：no such partion.”无法开机

在win7利用easyBCD，硬盘安装了ubuntu系统（实现了双系统）。由于在整理磁盘时，不小心把放置ubuntu系统的磁盘删除了，开机时结果出现了下图的情况：such partion.”无法开机" title="解决：在win7误删了ubuntu，开机出现“error：no such partion.”无法开机" style="margin:0px; padding:0

原创 安装Oracle时，“[INS-07009] 无法加载 BeanStore ”

之前装过oracle，没有出现这个问题。最近不小心删掉了oracle，重新安装oracle，发现出现”[INS-07009] 无法加载 BeanStore “这个问题。网上关于这个问题的解决不外乎两种，一是重装oracle，而是重装系统。。我的系统是没问题的，所以没有重装，但是重装oracle，发现还是这个问题。后来自己琢磨了下，发现与JDK有关，以为之前装oracle时JDK是没有卸载的