蘑菇小姐会开花


  • Home

  • Categories

  • About

  • Archives

  • Tags

  • Search
蘑菇小姐会开花

mongoose的使用

Posted on 2017-12-12 | In mongodb | | Visitors

mongoose是操作mongodb的一个数据模型库;封装了mongodb对文档操作的常用处理方法(增删改查),让nodejs操作mongodb数据库变得快捷灵活。

安装mongoose

在昨天的mongo目录下安装mongoose

1
npm install mongoose

连接数据库

新建mongoose.js,并编辑

1
2
3
4
5
6
7
8
var mongoose = require('mongoose');
var db = mongoose.connect('mongodb://localhost/test');
db.connection.on('error', function(error) {
console.log('数据库test连接失败:' + error);
});
db.connection.on('open', function() {
console.log('数据库test连接成功');
});

打开一个终端,开启mongodb服务:

1
mongod

再打开一个终端,运行mongoose.js:

1
2
node mongoose.js
<!--成功后便会输出:数据库test连接成功-->

Schema/Model

1.Schema: 数据库集合的结构对象(一个Schema对应一个collection),定义document文档结构
2.Model: 由Schema构建而成,可操作数据库
继续编辑mongoose.js,在数据库连接成功的情况下,在数据库test中新建一个集合test1

1
2
3
4
5
6
7
8
9
var TestSchema = new mongoose.Schema({
name: {type: String},
age: {type: Number, default: 0},
email: {type: String},
time: {type: Date, default: Date.now}
});
var TestModel = db.model('test1', TestSchema);
<!--集合名称,集合的结构对象-->
<!--Document文档(关联数组式的对象)< Collection对象 < 数据库-->

Model数据插入

插入保存一组数据

1
2
3
4
5
6
7
8
9
10
11
12
TestModel.create([
{name: 'mogu', age: 8},
{name: 'lly', age: 9},
{name: 'nobody', age: 38, email: '123@qq.com'}
], function(error, docs) {
if(error) {
console.log('error: ' + error);
} else {
console.log('save ok');
console.log(docs);
}
});

Read more »
蘑菇小姐会开花

mongodb的使用

Posted on 2017-12-11 | In mongodb | | Visitors

安装mongodb

使用brew安装

1
2
brew update
brew install mongodb

也可以使用安装包进行安装

启动mongodb

创建数据库存储目录 /data/db

1
sudo mkdir -p /data/db

执行mongod,启动mongodb服务
mongodb启动成功,正等待被连接
新开一个窗口,执行mongo,进入mongodb shell
shell命令:
use databasename (创建、连接对应数据库)
show dbs(查看所有数据库)
show tables (查看所有collections)
db (查看当前数据库)
db.dropDatabase() (删除当前数据库)
db.collection.drop() (删除对应collection)

插入数据

新建一个项目目录

1
mkdir mongo

安装依赖

1
2
npm init
npm install mongodb

Read more »
蘑菇小姐会开花

casperjs简介

Posted on 2017-07-19 | In method | | Visitors

what’s it?

casperjs 基于js语法规则的无头浏览器,可以完成模拟浏览器行为。模拟真实用户点击浏览器来浏览网页的行为,可以通过编写代码,来控制casperjs定向实现自己所需要的功能。

how to install

  • 先装phantomjs

how to use

蘑菇小姐会开花

移动web开发

Posted on 2017-07-14 | In notes | | Visitors

做了一段时间的手机端页面,碰到了很多问题,列举如下。
1.<input type="date" value="2017-07-13"/>日期组件
iOS和安卓均不支持placeholder。默认指定为text类型,当用户focus的时候自动把type类型改变为date。

1
<input placeholder="Date" type="text" onfocus="(this.type='date')">

安卓对日期组件的展现和交互不尽相同,低版本的安卓系统不能支持value,问题如此。
最后我的解决办法是,替换了一个新的日期组件zepto-mdater,但是该组件会与touch.js产生冲突,多次监听tap事件或点击穿透,因此,在与touch.js共用时,需要删除源代码中对tap事件的封装。此外,该组件在红米手机上切换日月时会出现日期重叠,猜测也是受tap事件影响,目前还未确认解决方案。
相关问题:
在iOS/Android上从web-app调用本机日期选择器
android-input-date-field-value-not-clearing
相关笔记:
html5 input类型踩坑纪录
轻量级移动端日期组件
基于zepto的移动端轻量级日期插件
2.白屏解决
css文件加载需要一些时间,在加载的过程中页面空白,可以考虑将css代码内联和前置。
首屏无实际的数据内容,等待异步加载数据再渲染页面导致白屏,可以在首屏直接同步渲染html,后续的滚屏等再采用异步请求数据和渲染html。
客户端渲染无力,在服务端,使用模版引擎渲染所有页面。
减少文件加载体积,如html压缩,js压缩。
相关笔记:
提升HTML5的性能体验系列之一 避免切页白屏
3.flexbox布局
安卓4.0不支持display:-webkit-flex这种写法的弹性布局,但支持display:-webkit-box这种写法的布局,移动端采用弹性布局时,建议直接写display:-webkit-box系列的布局。

Read more »
蘑菇小姐会开花

typescript相关

Posted on 2017-07-05 | In notes | | Visitors

安装

1
sudo npm install typescript -g

编译

1
tsc hello.ts

TypeScript只会进行静态检查,如果发现有错误,编译的时候就会报错,但还是会生成编译结果。

原始数据类型

布尔值,数值,字符串,null, undefined,symbol。

布尔值

使用boolean定义布尔值类型,构造函数Boolean创造的对象不是布尔值,而是一个Boolean对象。

数值

使用number定义数值类型

字符串

使用string定义字符串类型
、用来定义模板字符串,${expr} 用来在模版字符串中嵌入表达式。

空值

void 可以表示没有任何返回值的函数,也可以赋值为undefined和null

null和undefined

undefined只能被赋值为undefined,null只能被赋值为null。
与void的区别是undefined和null是所有类型的子类型,可以赋值给其他类型的变量

任意值

任意值Any表示允许赋值为任意类型。
声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值。
变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型。

类型推论

如果没有明确的指定类型,TypeScript会依照类型推论的规则推断出一个类型。
如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查。

联合类型

只能访问此联合类型的所有类型里共有的属性或方法。
联合类型的变量在被赋值的时候,会根据类型推论的规则推断出一个类型。

对象的类型-接口

赋值的时候,变量的形状必须和接口的形状保持一致,存在可选属性,但不允许添加未定义的属性。
一旦定义了任意属性,那么确定属性和可选属性都必须是它的子属性。
只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候。

Read more »
蘑菇小姐会开花

vue.js 笔记(一)

Posted on 2017-05-27 | In notes | | Visitors

安装

1
npm install vue

使用

在html文件中引入vue.js

1
<script src="https://unpkg.com/vue/dist/vue.js"></script>

vue 实例

实例化vue,传人一个选项对象,可以包含数据、模版、挂载元素、方法、生命周期钩子等,详见API文档。

1
2
3
4
var app = new Vue({
el: '#app',
data: data
});

每个vue实例都会代理起data对象里所有的属性,这些被代理的属性都是响应的,也只有这些。
以$为前缀的属性和方法都试vue自带暴露的。

实例生命周期

插值

文本插值(”Mustache”语法,双大括号),将数据解释为纯文本。
v-html将插入的内容当作html,数据绑定会被忽略。(危险的用法,xss攻击)

指令

带有-v前缀的特殊属性,🌰!
v-bind:title可以将元素节点的title属性和vue实例的某个属性保持一致。
vue可以绑定DOM文本到数据,利用v-if指令也可以绑定DOM节点到数据。
v-for指令可以绑定数组的数据来渲染一个项目列表。
v-on指令可以绑定一个事件监听器。
v-model指令可以实现表单输入和应用状态之间的双向绑定。
v-once一次性地插值,当数据改变时,插值处的内容不会更新。
v-on:click.prevent会对触发的事件调用event.preventDefault()。
v-bind:title可以缩写为:title,v-on:click可以缩写为@click。

过滤器

vue 2.x中,过滤器只能在文本插值绑定(双大括号)和v-bind表达式中使用,可以串联,可以接受传参。

计算属性

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。当依赖的属性值没有发生改变时,多次访问计算属性会立即返回之前的计算结果,而不必再次执行函数。
如果不希望有缓存,可以用method替代。只要发生重新渲染,method调用总会执行该函数。

v-if & v-show

v-if条件渲染,在切换过程中,条件快内的事件监听器和子组件适当地被销毁和重建,同时也是惰性的,只有在条件为真时,才开始渲染。支持<template>语法。
v-show元素总会被渲染,只是简单的基于css进行切换。不支持<template>语法。
前者有更高的切换开销,后者有更高的初始渲染开销。因此,如果需要频繁的切换,选择v-show较好;如果在运行时条件不太可能改变,则用v-if比较好。

Read more »
蘑菇小姐会开花

webpack 笔记

Posted on 2017-05-12 | In notes | | Visitors

基本配置项

entry 和 output

entry: 入口文件,一般入口文件关注整体流程,而非入口文件关注某一部分的实现。output.path: 指定输出路径
output.filename:

  • name: 模块名称
  • hash: 模块编译后的(整体)hash值,编译后文件hash值一样
  • chunkhash: 分片的hash值,编译后文件hash值不同,即每一个分片的hash都不一样
    output.publicPath: 表示资源的发布地址,当配置过该属性后,打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。
    单一入口文件情况下:
    1
    2
    3
    4
    5
    6
    7
    8
    // webpack.config.js
    module.exports = {
    entry: 'src/index.js',
    output: {
    filename: 'bundle.js',
    path: './dist/'
    }
    }

多个入口文件情况下:

1
2
3
4
5
6
7
8
9
10
11
12
13
// webpack.config.js
module.exports = {
entry: {
"index": 'src/index.js',
"login/login": 'src/login/login.js'
},
output: {
filename: '[name]-[hash].js',
// filename: '[name]-[chunkhash].js',
path: './dist/'
// 输出文件中login.js位于dist/login目录下
}
}

分片

将代码拆分后进行异步加载,但是不会自动提取公共模块的代码。

定义分割点

分割点表示代码在此处被分割成两个独立的文件,有两种方法。

Read more »
蘑菇小姐会开花

flex 布局

Posted on 2017-05-10 | In bugs | | Visitors

第一次接触flex布局好像还是在最开始入门的时候,做了一个小项目,布局的时候用到了flex,当时的印象就是,哇,这么简单就能垂直居中布局呀,哈哈。
附上最开始了解的途径:flex布局教程:语法篇 -阮一峰

概念

CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种用于在页面上布置元素的布局模式,使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时,元素可预测地运行。
flex

Container

弹性容器,包含着弹性项目的父元素。通过设置display属性的值为flex或inline-flex来定义弹性容器。
有主轴main axis 和侧轴 cross axis。
container的属性:

  • flex-direction [row|row-reverse|column|column-reverse] main axis 的方向
  • flex-wrap [nowrap|wrap|wrap-reverse] 默认情况下,项目都排在轴线上。flex-wrap属性定义,如果一条轴线排不下,如何换行
  • flex-flow [<flex-direction>||<flex-wrap> 上面两个的合体
  • justify-content [flex-start|flex-end|center|space-between|space-around] 主轴main axis对齐方式
  • align-items [flex-start|flex-end|center|baseline|stretch]侧轴cross axis对齐方式
  • align-content [flex-start|flex-end|center|space-between|space-around|stretch定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

Item

弹性容器的每个子元素都称为弹性项目。弹性容器直接包涵的文本将被包覆成匿名弹性单元。
item沿着main axis排布。
单个item所占的空间分别用main size和cross size表示。
item的属性:

  • order [<integer>] 排列顺序,默认0,决定哪些元素先出现
  • flex-grow [<number>] 放大比例,默认0,即如果存在剩余空间,也不放大。
  • flex-shrink 项目的缩小比例,默认0,即如果存在剩余空间,也不放大。
  • flex-basis [<length>|auto; /*default auto*/] 分配多余空间之前,项目占据的main size,默认auto
  • flex none|[<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>] flex-grow, flex-shrink, flex-basis的简写,默认值为0 1 auto。后两个属性可选。
  • align-self [auto|flex-start|flex-end|center|baseline|stretch]让单个item有与其它item不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
    Read more »
蘑菇小姐会开花

next主题博客添加canvas_nest动画背景

Posted on 2017-05-05 | In application | | Visitors

闲来无太多事,上午用很短的时间给公司的项目改了一个bug,就开始研究如何让自己的博客更漂亮哈哈哈。其实是因为最近研究dva经常瓶颈期,很苦恼orz,所以找个简单的活儿,给自己一点儿小成就感吧。
今天先给博客加了一个访客量统计,然后加了一个评论,加了一个搜索栏,完善了categories页面,修改了页面永久链接,设置404公益页面,修改站点建立时间,配置canvas_nest动画背景,最后自称一枚会敲代码的小仙女哈哈哈~

canvas_nest 动态背景

先附上Github地址:https://github.com/hustcc/canvas-nest.js
之前以为是国外的人写的,结果翻了一下作者的Github,阿里的大神辣。
再附上中文的readme,具体介绍可自行翻阅。

修改主题配置文件

打开/next/_config.yml,搜索 canvas_nest,设置值为true。

1
2
3
# canvas_nest
canvas_nest: true //开启动画
canvas_nest: false //关闭动画

修改_layout.swig

打开next/layout/_layout.swig,在</body>之前添加如下代码。

1
2
3
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

请注意不要将代码置于<head></head>里面。

配置项

  • color:线条颜色, 默认: ‘0,0,0’ ;三个数字分别为(R,G,B),注意用,分割
  • opacity:线条透明度(0~1),默认:0.5
  • count:线条的总数量,默认150
  • zIndex:背景的z-index属性,css属性用于控制所在层的位置,默认:-1
    所以,大家可以根据自己的喜好配置~
    Read more »
蘑菇小姐会开花

pdf.js的使用

Posted on 2017-04-28 | In application | | Visitors

简介

最近接了一个新需求,会用到pdf.js,于是小白赶紧突击了一下,留下粗浅的笔记。
PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品。简单说就是一个 PDF 解析器。
首先附上pdf.js的github地址:https://github.com/mozilla/pdf.js
官方网站:http://mozilla.github.io/pdf.js/
然后咱们正式开始~~~~

下载源码

1
2
$ git clone git://github.com/mozilla/pdf.js.git
$ cd pdf.js

构建pdf.js

这个项目是用gulp构建的,所以首先请确认已经安装gulp

1
$ (sudo) npm install gulp -g

然后安装项目所需的依赖

1
$ npm install

最后构建使用

1
$ gulp generic

Read more »
1234
mogu

mogu

唯有热爱,能抵岁月漫长。

34 posts
6 categories
18 tags
GitHub Weibo
© 2017 - 2018 mogu
Powered by Hexo
Theme - NexT.Mist