面具哥布林-优快云博客

原创基于koa2 + mongoose 的简易后台架构

1、安装cnpm install koa --save //koa安装cnpm install koa-bodyparser --save //koa的参数解析中间件cnpm install koa2-cors --save //koa的跨域中间件cnpm install koa-router --save //koa的路由映射cnpm install mongodb --save...

2018-03-15 18:11:06 3097

原创 mongodb的查询

find1、查询符合条件的所有文档db.mongoTest.find({name:'jay'})find的第一个参数为一个对象，如果为空，则查询该集合下的全部文档。2、查询符合条件的文档，并只返回某个键。db.mongoTest.find({name:'jay'},{fav:1})find的第二个参数接受一个对象，用来返回的内容。如果键值为0，则返回除该键以外的文档...

2018-03-07 16:41:50 6546

原创 mogondb的更新

update ：1、插入某个值到某个文档中：方法1：var a = db.mongoTest.findOne({name:'jay'})a.fav= ['music','milk']db.mongoTest.update({"_id" : a._id},a)这种方法不可以多文档更新。方法2：使用修改器$set var b = ['music','milk']db.mongoTest.upd

2018-03-07 14:57:50 611

原创 mongodb一些小的总结。

1、启动数据库。cd到mongodb安装目录下的bin。mongob --dbpath xxxxx 其中xxx为数据库地址。比如我的是E:\mongodb\data\db 。2、可视界面。推荐Robo 3T 下载地址：https://robomongo.org/ 在启动数据库后，直接运行Robo3T即可。 Robo3T的基本使用教程： https://jingy...

2018-03-07 11:05:09 345

原创一些开发过程中的思路。

1.等宽瀑布流：需要确定的是，等宽瀑布流必须用绝对定位来完成排版。 *W为容器的宽度。 * 给出N列，每一列的宽度相同。用大小为N的数组存好每一列当前的高度。 * 列当前的高度 = 已有的高度 + 每一列的宽度 * 图片的高宽比。当然如果里面不仅有图片那高度也要相应的加上去。 * 数据来的时候，依次放进每一列，同时把当前列的高度计算好。 * 难点在于，如何每次仅拿出N个数据？把...

2018-02-13 12:52:55 279

原创 react的componentWillReceiveProps(nextProps) {} 生命周期

在react的componentWillReceiveProps(nextProps)生命周期中，可以在子组件的render函数执行前获取新的props，从而更新子组件自己的state。这样的好处是，可以将数据请求放在这里进行执行，需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染时才会发出

2017-12-22 15:12:20 25120 1

原创入坑R-N

需要解决的问题有： 1.fonticon的引入：https://segmentfault.com/a/1190000009939727 2.路由以及路由的动画： 3.块的滑动： 4.redux在r-n上的变化： 5.fetch的请求： 6.在ios上使用http：

2017-12-09 15:49:54 220

原创一个loading小动画

//html<div> <div class="point point1"></div> <div class="point point2"></div> <div class="point point3"></div> <div class="point point4"></div> <div class="point point5"></div

2017-10-19 10:37:51 349

原创 js事件中的onmouseout和onmouseleave

写一个项目的过程中发现一个问题：鼠标监听A元素的onmouseout事件，结果当鼠标移到A元素里面的B元素时，事件也触发了。原因是因为：事件冒泡。当鼠标从A元素进入到B元素时，A也会触发自己的onmouseout事件，但是由于自己并没有绑定这个事件，因此B的onmouseout传递给了A元素，所以当进入B时，实际上就触发了A元素的onmouseout事件了。解决办法是使用onmous

2017-10-10 18:02:51 1603

原创 draft.js--富文本编辑器框架的实践（二）

续上篇《draft.js–富文本编辑器框架的实践（一）》安装初始化一个draft编辑器的实例对编辑器进行样式修改增加格式按钮行渲染以及行样式修改默认块以及块样式修改格式以及对应格式按钮之间的高亮联系修改默认块所对应的映射元素以及自定义块的元素渲染插入行元素，如emoji表情插入块元素，如图片或者视频数据存储数据回显（八）修改默认块所对应的映射元素以及自定义块的元素渲染：

2017-09-29 15:37:15 8272

原创 draft.js--富文本编辑器框架的实践（一）

市面上大多数的富文本编辑器都是现成的，很难根据自己的需求进行无论是功能亦或是渲染格式的修改。而由脸书开源的这款draft.js在富文本编辑器中简直是一股清流般的存在。draft在英文中是“草稿”的意思，如它名字所言，它并不是一款现成的富文本编辑器，而是一款富文本编辑器框架，这意味着你可以在此基础上进行二次开发，写出适合你自己应用场景的富文本编辑器。下面会写出一些我个人对这款富文本编辑器的实践

2017-09-29 10:02:15 16042 6

原创 redux配合react

基本流程如下：第一步：安装npm install --save reduxnpm install --save react-redux第二步：编写reducer/*下面这个方法是一个Reducer函数*///默认值const defaultState = { userName:'lucyss',};function reducer(state = defaultState,acti

2017-09-21 10:05:02 248

原创 css的一些问题与细节

1.弹性布局下，子内容超出长度不会自动换行怎么解决？

2017-09-19 15:34:11 325

原创 react的一些细节

input增加disabled 属性后，所有的监听事件都无法继续监听了。

2017-09-15 10:41:15 251

原创 react+redux+react-router4配置过程

1）创建react单页面应用npm install -g create-react-appcreate-react-app my-app2）安装reduxnpm install --save reduxnpm install --save react-redux3)安装react-router，现在用的是版本4，和之前的用法和配置方法都有所区别。npm install --save histor

2017-09-11 17:56:11 1126

原创养成良好的JS代码风格记录

1.消除魔术字符串 2.三元表达式格式：let a = (bool) ?a :b;

2017-08-18 00:41:23 270

原创 es6 笔记

1.整数和浮点数是同样的储存方法，所以3和3.0被视为同一个值.Number.isInteger(25) // trueNumber.isInteger(25.0) // true为什么同样储存方式，就会被视为同一个值？

2017-08-14 10:50:49 255

原创 React笔记

1、根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现为什么？

2017-08-10 17:32:21 199

原创 JS的各种宽高的含义。

遇到一个需求，写一个类QQ的文件列表，想把头部固定，下面内容滚动。暂时想到的办法是，头部元素<header></header>和内容元素<main></main>独立，然后每一列的元素<item></item> 放在<main></main> 里面，形成这样一个结构：<div class="container"> <header></header> <main> <i

2017-08-09 13:39:50 339

原创 JQ中AJAX的isModified

项目中涉及到了一个加载模型的功能：前端请求回一个JSON文件，然后再对这个文件进行解析，在页面上解析出3D的模型。由于是3D模型，所以这个JSON文件很大。在第一次加载模型时，会花很多时间来进行下载，但如何实现在第二次加载且请求的JSON文件没有变化的情况下，不再花时间请求新的资源，同时满足如果有新的资源时，会正确的从服务器重新请求的这个需求？解决方法之一是调用浏览器本地的缓存好的资源。JQ

2017-07-31 16:48:30 1356

原创 undefined 和 null

Undefined 和 Null 都是JS五种基本数据类型之一（Number,String,Boolean,Undefined,Null），而它们都只有唯一的值，分别是undefined 以及 null。alert(typeof a); //undefinedalert(typeof b); //objectalert(undefined == null) //true可知，其实null和un

2017-07-31 15:01:54 538

原创 undefined 以及 is not defined

之前编写一个用了百度地图页面中时犯了一个很低级的错误：过度依赖百度图，数据的加载显示流程必须在百度地图加载成功才能正确显示。这样导致的问题就是，如果电脑网络不好，无法加载地图，那没有用到百度地图的一些数据就无法正常显示了。于是对代码进行了修改，然后又发现了一个以前没有接触过的问题，便记录下来。在断网的情况下，百度地图的BMap 变量出现了一个报错BMap is not defined 我一直

2017-07-31 14:26:07 6356

原创把对象先存起来，后面再用

遇到一个需求，在百度地图里需要对每个点对象进行操作。但是这些点是在另一个方法内根据json数据进行循环定义的。因此如果需要操作这些点，就需要对这些点的对象进行存储。function fn1 (){$.each(json,function(v,val){var marker = new BMap.Marker(point); /*全局变量pageData.markerMap = {}*/

2017-07-14 17:58:42 272

原创 JS替换字符串的某些字符串

string.replace(/reallyDo/g, replaceWith);string.replace(new RegExp(reallyDo, 'g'), replaceWith);string：字符串表达式包含要替代的子字符串。reallyDo：被搜索的子字符串。replaceWith：用于替换的子字符串。

2017-07-13 10:16:18 353

原创 Vue.js的组件（四）父组件与子组件的数据联系之双向绑定

之前有说到，父组件传数据到子组件是通过组件的属性props来实现的，这是一种单向绑定。父可以影响子，子不能影响父。但是子可以通过自定义事件来让自己的数据影响到父。只要把这两种方法结合起来，就可以实现父与子数据的双向绑定。//js/*为了方便理解过程，把v-model拆分成v-bind,和v-on:input="$event.target.value"*/Vue.component('my-

2017-03-22 18:42:24 6472

原创 Vue.js的组件（三）父组件与子组件的数据联系之子传父之自定义事件

父传子是单向的，子会因父的改变而改变，但父并不会因子的改变而改变。这是由于Vue.js怕父的数据会被使用者在不知情的情况下改变。但是，子还是可以绕一个圈，把自己的数据传给父。途径：自定义事件。在解释子数据传给父之前，必须先要对事件有一个了解。所谓事件，就是触发JS代码的“动作”，比如，点击（click），输入（input）等等。 Vue.js 使用v-on来监听事件，事件名被加在v-on 的后

2017-03-22 17:19:59 5486

原创 Vue.js的组件（二）父组件与子组件的数据联系之父传子

假设有如下组件：/*js*/Vue.component('my-button',{ tempalte:'<button>一个按钮</button>'})var app3 = new Vue({ el:'#app3', data:{ message:0 }})/*html*/<div id="app3"> <mybutton></my

2017-03-22 16:14:20 4865

原创 Vue.js的组件（一）全局组件和局部组件

刚开始学习Vue.js，记录下心得。所谓组件，在我看来，就相当于新建一个属于自己的标签。但是这个标签的功能很强大，可以有很多特殊的功能。组件可以全局声明：/*js*/Vue.component('my-component-button1',{ template:'<button>myFirstComponent</button>'});var app1 = new Vue(

2017-03-22 15:46:02 3585

原创 maven运行指令

mvn spring-boot:run

2017-02-20 18:22:52 702

原创让低版本浏览器兼容placeholder

/*html*/<div class="form-group"> <label>手机号码</label> <input type="text" class="form-control phone-num" name="phone-num" placeholder="手机号码"></div>/*js*/function placeholderForIe9(label,input)

2017-02-20 17:10:10 789

原创使用$.fn开发插件

$.fn.sliedeTo = function(swiper,active){ $(this).click(function(){ var index = $(this).index(); $(this).addClass(active); $(this).siblings().removeClass(active); swi

2017-02-13 18:41:23 488

原创 JQ选择字符串中的数字

var paddleft = zifuchuan.replace(/[^0-9]/ig, "");

2017-01-19 16:03:11 781

原创 JQ返回php读取数据库的数据

/*html*/<button class="button">b</button><div id="txtHint">这里是即将出现的内容</div>/*js*/$(function(){ $(".button").click(function(){ alert("321"); $.get("select.php",function(data){

2017-01-17 17:17:54 1068

原创 mysql持续学习

进入bin目录/*登录ROOT超级用户*//*在bin目录下输入*/mysql -uroot -p/*创建新用户*/GRANT USAGE ON *.* TO 'username'@'localhost' IDENTIFIED BY 'password' WITH GRANT OPTION;/*username和password分别为用户名和密码*//*为新用户授权*/GRANT SELEC

2017-01-16 17:21:49 255

原创在less上写css3动画

一共四个步骤： 1、定义动画动作：.slide-in(@y-begin,@y-end,@name){ @keyframes @name{ from { -webkit-transform: translateY(@y-begin); opacity: 0 } to { -webkit-transform: translateY(@y-

2017-01-13 10:48:07 7922

原创响应式布局所使用的的尺寸

网易的 /* media */ /* 横屏 */ @media screen and (orientation:landscape){} /* 竖屏 */ @media screen and (orientation:portrait){} /* 窗口宽度<960,设计宽度=768 */ @media screen and (max-width:959px){} /* 窗口宽度<76

2017-01-11 19:31:11 1342

原创 html5根据不同的宽度加载不同的图片

1、导入picturefill.js 文件。 2、<picture> <source srcset="imgs/phone/index-top.png" media="(max-width: 1023px)"> <img src="icon/99722036671140804.png"> </picture>会先加载适用宽度时所需的图片，找不到时就会用最后Img标签的图片。

2017-01-10 18:55:55 2689

原创使用gulp对引用的文件添加版本号

先贴出gulpfile.js文件：var gulp = require('gulp');var uglify = require('gulp-uglify');var concat = require('gulp-concat'); //- 多个文件合并为一个；var minifyCss = require('gulp-minify-css');

2016-12-22 17:51:31 7102

原创以后可能会经常用到的gulp插件

首先，由于模块插件都在国外的，所以最好使用淘宝的镜像。其次，这些模块都是放在项目里面，所以如果进行版本管理的话，要把node_modules文件夹加入.gitignore文件里面。npm install -g cnpm --registry=https://registry.npm.taobao.org然后使用cnpm 代替npm。var gulp = require('gulp'),

2016-12-19 16:44:01 1073

原创 JS实现点击切换事件

现在有个需求如下：点击右边那三条横杠，对列表进行伸展和收缩。//JS,#hide是按钮，#bullet是列表$(function(){ var num=0; $('#hide').click(function(){ $(this).stop(false,false); $("#bullet").stop(false,false);

2016-12-07 16:40:30 8644 1

空空如也

空空如也