- 博客(50)
- 收藏
- 关注
原创 基于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
3064
原创 mongodb的查询
find1、查询符合条件的所有文档db.mongoTest.find({name:'jay'})find的第一个参数为一个对象,如果为空,则查询该集合下的全部文档。2、查询符合条件的文档,并只返回某个键。db.mongoTest.find({name:'jay'},{fav:1})find的第二个参数接受一个对象,用来返回的内容。如果键值为0,则返回除该键以外的文档...
2018-03-07 16:41:50
6494
原创 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
584
原创 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
317
原创 一些开发过程中的思路。
1.等宽瀑布流: 需要确定的是,等宽瀑布流必须用绝对定位来完成排版。 *W为容器的宽度。 * 给出N列,每一列的宽度相同。用大小为N的数组存好每一列当前的高度。 * 列当前的高度 = 已有的高度 + 每一列的宽度 * 图片的高宽比。 当然如果里面不仅有图片那高度也要相应的加上去。 * 数据来的时候,依次放进每一列,同时把当前列的高度计算好。 * 难点在于,如何每次仅拿出N个数据? 把...
2018-02-13 12:52:55
258
原创 react的componentWillReceiveProps(nextProps) {} 生命周期
在react的componentWillReceiveProps(nextProps)生命周期中,可以在子组件的render函数执行前获取新的props,从而更新子组件自己的state。 这样的好处是,可以将数据请求放在这里进行执行,需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染时才会发出
2017-12-22 15:12:20
25070
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
198
原创 一个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
334
1
原创 js事件中的onmouseout和onmouseleave
写一个项目的过程中发现一个问题: 鼠标监听A元素的onmouseout事件,结果当鼠标移到A元素里面的B元素时,事件也触发了。 原因是因为:事件冒泡。 当鼠标从A元素进入到B元素时,A也会触发自己的onmouseout事件,但是由于自己并没有绑定这个事件,因此B的onmouseout传递给了A元素,所以当进入B时,实际上就触发了A元素的onmouseout事件了。 解决办法是使用onmous
2017-10-10 18:02:51
1569
原创 draft.js--富文本编辑器框架的实践(二)
续 上篇 《draft.js–富文本编辑器框架的实践(一)》安装初始化一个draft编辑器的实例对编辑器进行样式修改增加格式按钮行渲染以及行样式修改默认块以及块样式修改格式以及对应格式按钮之间的高亮联系修改默认块所对应的映射元素以及自定义块的元素渲染插入行元素,如emoji表情插入块元素,如图片或者视频数据存储数据回显(八)修改默认块所对应的映射元素以及自定义块的元素渲染:
2017-09-29 15:37:15
8163
原创 draft.js--富文本编辑器框架的实践(一)
市面上大多数的富文本编辑器都是现成的,很难根据自己的需求进行无论是功能亦或是渲染格式的修改。 而由脸书开源的这款draft.js在富文本编辑器中简直是一股清流般的存在。draft在英文中是“草稿”的意思,如它名字所言,它并不是一款现成的富文本编辑器,而是一款富文本编辑器框架,这意味着你可以在此基础上进行二次开发,写出适合你自己应用场景的富文本编辑器。 下面会写出一些我个人对这款富文本编辑器的实践
2017-09-29 10:02:15
15732
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
225
原创 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
1091
原创 es6 笔记
1.整数和浮点数是同样的储存方法,所以3和3.0被视为同一个值.Number.isInteger(25) // trueNumber.isInteger(25.0) // true为什么同样储存方式,就会被视为同一个值?
2017-08-14 10:50:49
231
原创 React笔记
1、根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现 为什么?
2017-08-10 17:32:21
182
原创 JS的各种宽高的含义。
遇到一个需求,写一个类QQ的文件列表,想把头部固定,下面内容滚动。暂时想到的办法是,头部元素<header></header>和内容元素<main></main>独立,然后每一列的元素<item></item> 放在<main></main> 里面,形成这样一个结构:<div class="container"> <header></header> <main> <i
2017-08-09 13:39:50
316
原创 JQ中AJAX的isModified
项目中涉及到了一个加载模型的功能:前端请求回一个JSON文件,然后再对这个文件进行解析,在页面上解析出3D的模型。由于是3D模型,所以这个JSON文件很大。 在第一次加载模型时,会花很多时间来进行下载,但如何实现在第二次加载且请求的JSON文件没有变化的情况下,不再花时间请求新的资源,同时满足如果有新的资源时,会正确的从服务器重新请求的这个需求? 解决方法之一是调用浏览器本地的缓存好的资源。JQ
2017-07-31 16:48:30
1289
原创 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
525
原创 undefined 以及 is not defined
之前编写一个用了百度地图页面中时犯了一个很低级的错误:过度依赖百度图,数据的加载显示流程必须在百度地图加载成功才能正确显示。这样导致的问题就是,如果电脑网络不好,无法加载地图,那没有用到百度地图的一些数据就无法正常显示了。于是对代码进行了修改,然后又发现了一个以前没有接触过的问题,便记录下来。 在断网的情况下,百度地图的BMap 变量出现了一个报错BMap is not defined 我一直
2017-07-31 14:26:07
6283
原创 把对象先存起来,后面再用
遇到一个需求,在百度地图里需要对每个点对象进行操作。但是这些点是在另一个方法内根据json数据进行循环定义的。因此如果需要操作这些点,就需要对这些点的对象进行存储。function fn1 (){$.each(json,function(v,val){var marker = new BMap.Marker(point); /*全局变量pageData.markerMap = {}*/
2017-07-14 17:58:42
259
原创 JS替换字符串的某些字符串
string.replace(/reallyDo/g, replaceWith);string.replace(new RegExp(reallyDo, 'g'), replaceWith);string:字符串表达式包含要替代的子字符串。reallyDo:被搜索的子字符串。replaceWith:用于替换的子字符串。
2017-07-13 10:16:18
332
原创 Vue.js的组件(四)父组件与子组件的数据联系 之 双向绑定
之前有说到,父组件传数据到子组件是通过组件的属性props来实现的,这是一种单向绑定。父可以影响子,子不能影响父。 但是子可以通过自定义事件来让自己的数据影响到父。 只要把这两种方法结合起来,就可以实现父与子数据的双向绑定。//js/*为了方便理解过程,把v-model拆分成v-bind,和v-on:input="$event.target.value"*/Vue.component('my-
2017-03-22 18:42:24
6444
2
原创 Vue.js的组件(三)父组件与子组件的数据联系 之 子传父 之 自定义事件
父传子是单向的,子会因父的改变而改变,但父并不会因子的改变而改变。这是由于Vue.js怕父的数据会被使用者在不知情的情况下改变。但是,子还是可以绕一个圈,把自己的数据传给父。途径:自定义事件。在解释子数据传给父之前,必须先要对事件有一个了解。所谓事件,就是触发JS代码的“动作”,比如,点击(click), 输入(input)等等。 Vue.js 使用v-on来监听事件,事件名被加在v-on 的后
2017-03-22 17:19:59
5454
原创 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
4843
1
原创 Vue.js的组件(一)全局组件和局部组件
刚开始学习Vue.js,记录下心得。 所谓组件,在我看来,就相当于新建一个属于自己的标签。但是这个标签的功能很强大,可以有很多特殊的功能。 组件可以全局声明:/*js*/Vue.component('my-component-button1',{ template:'<button>myFirstComponent</button>'});var app1 = new Vue(
2017-03-22 15:46:02
3569
原创 让低版本浏览器兼容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
760
原创 使用$.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
467
原创 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
1047
原创 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
244
原创 在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
7844
原创 响应式布局所使用的的尺寸
网易的 /* 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
1308
原创 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
2658
原创 使用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
7055
原创 以后可能会经常用到的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
1044
原创 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
8589
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人