soonfy / issue-blog Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 2 KB

blog using issue

JavaScript 100.00%

issue-blog's Introduction

personal website

express+mongo

issue-blog's People

Contributors

Watchers

issue-blog's Issues

bootstrap

1. bootstrap css

1.1 css概览

html5文档类型

<!DOCTYPE html>
<html>
</html>

移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1.0">
//width适配不同设备，initial-scale加载不会缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable="none">
//maximum-scale最大缩放功能比例，user-scalable禁用缩放功能

响应式图像

<img src="" class="img-responsive" alt="响应式图像" />
//原理
.img-responsive{
  display: inline-block;
  height: auto;
  max-width: 100%;
}

容器

<div class="container">
</div>
//原理
.container{
  padding-right: 15px;
  padding-left: 15px;
  margin-left: auto;
  margin-right: auto;
}

1.2 网格系统

移动设备优先策略

内容 决定什么是最重要的
布局 优先设计更小的宽度，基础css是移动设备优先，媒体查询针对电脑
渐进增强 随着屏幕大小增加而添加元素

网格系统工作原理

行.row必须放置在.container类内，以便获得适当的对其和内边距
使用行.row来创建列.col的水平组
内容必须放置在列.col内，且唯有列.col可以是行.row的子元素
预定义的网格类，.row, .col-xs-4
列.col通过内边距padding来创建列.col之间的间隔
网格系统是指定要横跨的12个可用的列来创建，3个相等的列，使用3个.col-xs-4

媒体查询 基于视口大小，显示或者隐藏内容

min-width限制最小宽度

//超小设备（手机，小于768px）
默认没有媒体查询
//小型设备（平板电脑，768px+）
@media(min-width: @screen-sm-min){}
//中型设备（台式电脑，992px+）
@media(min-width: @screen-md-min){}
//大型设备（大屏幕，1200px+）
@media(min-width: @screen-lg-min){}

max-width限制最大宽度，min-height限制最小高度，max-height限制最大高度

@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max){}
@media(min-width: @screen-md-min) and (max-width: @screen-md-max){}
@media(min-width: @screen-lg-min){}

网格选项

//所有宽度，.col-xs-
//最大宽度768px，.col-sm-
//最大宽度970px，.col-md-
//最大宽度1170px，.col-lg-
//基本网格结构
<div class="container">
  <div class="row">
    <div class="col-xs-6">小型2列</div>
    <div class="col-xs-6">小型2列</div>
  </div>
  <div class="row">
    <div class="col-xs-4">小型3列</div>
    <div class="col-xs-4">小型3列</div>
    <div class="col-xs-4">小型3列</div>
  </div>
</div>

响应式列重置

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-3">超小2列，小型4列</div>
    <div class="col-xs-6 col-sm-3">超小2列，小型4列</div>
    <div class="col-xs-6 col-sm-3">超小2列，小型4列</div>
    <div class="col-xs-6 col-sm-3">超小2列，小型4列</div>
  </div>
</div>

偏移列

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-offset-3">偏移3列</div>
  </div>
</div>

嵌套列

<div class="container">
  <div class="row">
    <div class="col-md-3">左列</div>
    <div class="col-md-9">
      <div class="row">
        <div class="col-md-6">右列1</div>
        <div class="col-md-6">右列2</div>
      </div>
    </div>
  </div>
</div>

排序列

<div class="container">
  <div class="row">
    <div class="col-md-3 col-md-push-8">push到右边</div>
    <div class="col-md-9 col-md-pull-4">pull到左边</div>
  </div>
</div>

1.3 排版

标题(h1到h6)

<h1>标题</h1>

副标题

<h1>标题<small>副标题</small></h1>

段落添加强调

<p class="lead">更大更粗，行高更高</p>

文本强调

<small>文本为父文本大小的85%</small>
<strong>文本粗体</strong>
<em>文本斜体</em>
<p class="text-left">文本左对齐</p>
<p class="text-right">文本右对齐</p>
<p class="text-center">文本居中</p>
<p class="text-muted">文本颜色减弱</p>
<p class="text-primary">primary效果</p>
<p class="text-success">success效果</p>
<p class="text-info">info效果</p>
<p class="text-warning">warning效果</p>
<p class="text-danger">danger效果</p>

缩写

<abbr title="完整的文本">缩写</abbr>
<abbr class="initialism" title="完整的文本">小字体缩写</abbr>

地址

<address>
  <span>name</span>
  <span>email</span>
</address>

引用

<blockquote>
  <p>文本</p>
  <small>引用于<cite title="源文本">源文本</cite></small>

列表

<ol>
  <li>有序列表</li>
</ol>
<ul>
  </li>无序列表</li>
</ul>
<ul class="list-unstyled">
  <li>无样式列表</li>
</ul>
<ul class="list-inline">
  <li>内联列表</li>
</ul>
<dl>自定义列表
  <dt>表头</dt>
  <dd>数据</dd>
</dl>
<dl class="dl-horizontal">水平自定义列表
  <dt>表头</dt>
  <dd>数据</dd>
</dl>

排版类

<p class="text-justify">文本对齐，超出屏幕位置自动换行</p>
<p class="text-nowrap">文本对齐，超出屏幕位置不换行</p>
<p class="text-lowercase">文本转换为小写</p>
<p class="text-uppercase">文本转换为大写</p>
<p class="text-capitalize">文本首字母大写</p>
<p class="blockquote-reserve">引用右对齐</p>
<p class="pre-scrollable">pre元素可滚动</p>

1.4 代码

代码内<使用<代替，>使用>代替，&使用\amp;代替
内联样式显示代码用code

<code>内联代码</code>

块状或者多行代码用pre

<pre>
  &lt;header&gt;
    &lt;span&gt;文本&lt;/span&gt;
  &lt;/header&gt;
</pre>

变量赋值

<span><var>y</var>=<var>x</var>+<var>z</var></span>

按键提示

<p><kbd>ctrl + p</kbd>打印</p>

电脑输出

<p><samp>computer output...</samp></p>

1.5 表格

表格元素

<table>表格</table>
<thead>表头<thead>
<tbody>内容</tbody>
<tr>行</tr>
<th>内容</th>
<caption>标题</caption>

表格类

table类

<table class="table">只有横向分割线的基本样式</table>
<table class="table-striped"><tbody>标签内添加斑马线式条纹</table>
<table class="table-bordered">所有表格添加边框</table>
<table class="table-hover">所有表格添加悬浮状态</table>
<table class="table-condensed">表格更紧凑</table>

tr,th,td类

<tr class="active">行处于悬停状态</tr>
<tr class="success">行处于success状态</tr>
<tr class="info">行处于info状态</tr>
<tr class="warning">行处于warning状态</tr>
<tr class="danger">行处于danger状态</tr>

class="table"包含在class="table-responsive"内

<div class="table-responsive">
  <table class="table">
  </table>
</div>

1.6 表单

表单布局

垂直表单(默认)  
水平表单  
内联表单

垂直表单

向<form>父元素添加role="form"  
标签和控件包含在一个class="form-group"的<div>中  
所有文本元素<input><textarea><select>添加class="form-control"

水平表单

向<form>父元素添加class="form-horizontal"  
标签和控件包含在一个class="form-group"的<div>中  
标签添加class="control-label"

内联表单

表单元素都是内联，标签并排  
向<form>父元素添加class="form-inline"

表单控件

输入框<input>，类型包括text,password,datetime,datetime-local,date,month,time,week,number,email,url,search,tel,color  
文本框<textarea>，改变rows，cols属性  
复选框<checkbox>，单选框<radio>,内联复选框单选框添加class="checkbox-inline",class="radio-inline"  
选择框<select>,允许选择多个添加multiple="multiple"  
标签后跟纯文本，<p>标签添加class="form-control-static"

表单控件状态

输入框焦点(:focus)  
输入框禁用(disabled)  
字段集<fieldset>禁用(disabled)  
验证状态(class="has-success","has-warning","has-error")

表单大小

控件高度class="input-lg","input-sm"  
控件宽度class="col-lg-2","col-lg-3","col-lg-4"

表单帮助文本

<span class="help-block">帮助文本</span>

1.7 按钮

任何class="btn"默认都是按钮外观，主要用在a,btn,input

class="btn"基本样式  
class="btn-default"默认样式  
class="btn-primary"原始样式  
class="btn-success"成功样式  
class="btn-into"提示样式  
class="btn-warning"警告样式  
class="btn-danger"危险样式  
class="btn-link"链接样式  
class="btn-lg"大按钮  
class="btn-sm"小按钮  
class="btn-xs"超小按钮  
class="btn-block"块级按钮，拉伸父元素100%宽度  
class="active"被点击按钮  
class="disabled"禁用按钮

1.8 图片

简单样式

class="img-rounded"圆角图片，原理border-radius: 6px  
class="img-circle"圆形图片，原理border-radius: 50%  
class="thumbnail"内边距和灰色边框  
class="img-responsive"响应式图片，原理max-width: 100%,height: auto

1.9 辅助类

背景

class="bg-primary"原始背景  
class="bg-success"成功背景  
class="bg-info"提示背景  
class="bg-warning"警告背景  
class="bg-danger"危险背景

class="pull-left"元素浮动到左边  
class="pull-right"元素浮动到右边  
class="center-block"display: block，居中显示  
class="clearfix"清除浮动  
class="show"强制显示  
class="hidden"强制隐藏  
class="sr-only"除屏幕阅读器，其它设备隐藏  
class="sr-only-focusable"结合src-only使用，获得焦点显式  
class="text-hind"将文本内容替换为背景图  
class="close"关闭按钮  
class="caret"下拉功能

2. 布局组件

2.1 字体图标

在Web项目中使用的图标字体

<button>
  <span class="glphicon glphicon-*"></span>
</button>

通过设置父类属性来控制图标字体

<button style="color:red">
  <span class="glphicon glphicon-*"></span>
</button>

2.2 下拉菜单

以列表格式显式链接的上下文菜单

<span class="caret">指示下拉菜单</span>
class="dropdown"向下弹出的下拉菜单  
class="dropup"向上弹出的下拉菜单  
class="dropdown-menu"下拉菜单  
class="dropdown-menu-right"右对齐下拉菜单右  
class="pull-right"右对齐下拉菜单  
class="dropdown-header"下拉菜单标题  
class="disabled"禁用下拉菜单  
class="divider"分割下拉菜单

2.3 按钮组

多个按钮排列对齐，可嵌套使用

class="btn-group"控制多个btn，基本样式按钮组  
class="btn-toolbar"控制btn-group，复杂按钮组件  
class="btn-group-lg","btn-group-sm","btn-group-xs"控制按钮组中按钮大小  
class="btn-group-vertical"垂直排列按钮组

2.4 按钮下拉菜单

在class="btn-group"中放置按钮和下拉菜单
分隔按钮下拉菜单，用2个button分隔
class="btn-lg","btn-sm","btn-xs"设置按钮下拉菜单大小
在class="btn-group"中添加class="dropup"设置按钮上拉菜单

2.5 基本输入框组

基于文本输入框添加前后缀

<div class="input-group">
  <span class="input-group-addon">前缀</span>
  <input type="text" class="form-control" />
  <span class="input-group-addon">后缀</span>
</div>

class="input-group-lg","input-group-sm","input-group-xs"控制输入框组大小
单选框(type="radio")，复选框(type="checkbox")可以作为输入框组的前后缀
按钮(button)作为输入框组前后缀，修改class="input-group-btn"
下拉菜单(dropdown)作为输入框组前后缀，修改class="input-group-btn"

2.6 导航元素

标签导航，添加class="nav nav-tabs"的无序列表

<ul class="nav nav-tabs">
  <li></li>
  <li></li>
</ul>

胶囊导航，修改class="nav nav-pills"
垂直胶囊导航，添加class="nav nav-pills nav-stacked"
两端对齐的导航，添加class="nav nav-pills nav-justified"
禁用链接，同时取消链接的hover状态，修改class="disabled"，只会改变外观样式，不能阻止a标签功能
标签导航包含下拉菜单，li标签添加class="dropdown"，其子ul标签添加class="dropdowm-menu"
胶囊导航包含下拉菜单，修改class="nav nav-pills"
内容随着标签导航的切换而更改，class="nav nav-tab"设置标签导航，class="tab-content"存放内容，class="tab-pane"内容定位"，data-toggle="tab"改变样式
内容随着胶囊导航的切换而更改，class="nav nav-pill"设置标签导航，class="pill-content"存放内容，class="pill-pane"内容定位"，data-toggle="pill"改变样式

2.7 导航栏

默认导航栏，nav标签添加class="nav nav-default"，设置role="navigation"增强访问性

<nav class="nav nav-default" role="navigation">
  <div class="container-fluid">
    <div class="nav-header">
      <a class="nav-brand"></a>
    </div>
  </div>
</nav>

响应式导航栏，折叠内容包含在class="collapse navbar-collapse"，折叠按钮添加class="data-toggle"，并且添加属性data-toggle="collapse"，data-target="折叠内容id"

<button type="button">
  <span class="src-only">三个class="iconv-bar"创建汉堡按钮</span>
  <span class="icon-barr"></span>
  <span class="icon-barr"></span>
  <span class="icon-barr"></span>
</button>

导航栏表单，添加form标签，设置class="navbar-form"
导航栏按钮，添加button标签，设置class="navbar-btn"
导航栏文本，添加p标签，设置class="navbar-text"
导航栏字体图标，添加span标签，设置class="glyphicon glyphicon-*"
组件对齐方式，class="navbar-left"左对齐，class="navbar-right"右对齐
导航栏固定到顶部，设置class="navbar-fixed-top"，同时设置body50pxpadding
导航栏固定到底部，设置class="navbar-fixed-bottom"
导航栏在顶部跟随页面滚动，设置class="navbar-static-top"，不需要设置body50pxpadding
倒置的导航栏，白底黑字，设置class="navbar-inverse"，同时设置body50pxpadding

2.8 面包屑导航

基于网站层次的导航，设置ol标签的class="breadcrumb"

2.9 分页

显示分页，设置ul标签的class="pagination"
分页活动状态，设置li标签的class="active"当前活动分页，class="disabled"禁用分页
分页大小，设置ul标签的class="pagination-lg","pagination-sm"
居中分页，设置ul标签的class="pager"
左右对齐分页，设置ul标签的class="previous","next"

2.10 标签

默认标签，设置span标签的class="label"
修改标签样式class="label-default","label-primary","label-success","label-info","label-warning","label-danger"

2.11 徽章

突出显示，设置span标签的class="badge"

2.12 超大屏幕

用于登录页面，增加标题大小，设置div标签的class="junbotron"

2.13 页面标题

多个标题，适当增加边距，设置div标签的class="page-header"

2.14 缩略图

缩略图展示，增加内边距，鼠标悬停动画显示边框，在图片img标签外嵌套a标签，并设置class=""thumbnail
包含内容的缩略图展示，在a标签外面嵌套div标签，并设置class="thumbnail"，h，p标签添加内容

2.15 警告

默认警告框，设置div标签的class="alert"
修改警告框样式，设置div标签的class="alert-success","alert-info","alert-warning","alert-danger"
可取消的警告框，div标签的class="alert-dismissable"，添加button标签

<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

警告框中链接，设置a标签的class="alert-link"

2.16 进度条

默认进度条，添加div标签，class="progress"，内部嵌套div标签，class="progress-bar"，并设置style="60%"
修改进度条样式，设置class="progress-bar-success","progress-bar-info","progress-bar-warning","progress-bar-danger"
条纹进度条，设置class="progress-striped"
动画进度条，设置class="progress-striped active"
堆叠进度条，内嵌多个div标签，class="progress-bar-*"

2.17 多媒体对象

包含图片，视频，音频
单个多媒体，父元素设置class="media"，多媒体元素设置class="media-object"，class="pull-left","pull-right控制对齐"，文本元素设置class="media-body"，文本中标题设置class="media-heading"
多媒体列表，父元素设置class="media-list"

2.18 列表组

ul标签设置class="list-group"，li标签设置class="list-group-item"
列表组添加徽章，li标签添加span标签，设置class="badge"
列表组链接，div标签设置class="list-group"，a标签设置class="list-group-item"
列表组添加自定义内容，在a标签中嵌套h标签，设置class="list-group-item-heading"，p标签设置class="list-group-item-text"

2.19 面板

把DOM组件插入到一个盒子，设置div标签的class="panel panel-default"
面板标题，class="panel-heading添加标题"，class="panel-title"设置h标签
面板脚注，class="panel-footer"
修改面板样式，class="panel-primary","panel-success","panel-info","panel-warning","panel-danger"
包含表格的面板，设置class="panel-body"，内部嵌套table标签，class="table"
包含列表组的面板，内部嵌套ul标签，class="list-group"

2.20 Well

内容内嵌的容器，设置div标签的class="well"
修改Well大小，class="well-lg","well-sm"

3. HTML规范

两个空格代表制表符
标签嵌套缩进
属性定义使用双引号，不使用单引号
自闭合标签末尾不加斜线
结束标签不能省略
最少的标签，最小的复杂度
标签属性的顺序，class-id/name-data-src/for/type/href-title/alt-aria/role
布尔值属性，disabled/checked不赋值
少用js生成标签

<!DOCTYPE html>文档类型
<html lang="zh-CN">语言属性
<head>
  <meta http-equiv="X-UA-Compatibal" content="IE=Edge">IE兼容模式
  <meta charset="UTF-8">字符编码
</head>
</html>

4. CSS规范

两个空格代替制表符
选择器分组，单个选择器单独占一行
左大括号前加一个空格
右大括号单独占一行
每条声明语句的冒号后跟一个空格
每条声明语句单独占一行
每条声明语句后跟分号
逗号分割的属性值，逗号后跟一个空格
rgb(),rgba(),hsl(),hsla(),rect()属性中逗号后不跟一个空格
对于属性值，省略小于1的小数前面的0(0.5 => .5)
十六进制全部小写简写(#FFFFFF => #fff)
选择器中的属性添加双引号(input[type="text"])
属性值为0不带单位(0px => 0)
属性声明顺序position-box model-typographic-visual

position{
  position, top, right, bottom, left, z-index
}
box model{
  display, float, width, height
}
typographic{
  font, line-height, color, text-align
}
visual{
  background-color, border, border-radius
}
opacity

不使用import，使用多个link，Sass将CSS文件编译成一个，Rails的CSS合并功能
带前缀的属性，属性值在垂直方向对齐

selector{
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0.15);
          box-shadow: 0 1px 2px rgba(0,0,0.15);
}

单行规则放在一行
尽量少用简写属性(padding, margin)
class命名

class名称只能包含小写字母和破折号(-);
避免随意的简写；
class名称尽量短；
命名有意义，不要用表现形式；(.red => .import)
基于最近的父class作为前缀；

选择器

通用元素设置class；
经常出现的组件，避免使用属性选择器；
选择器尽量短，选择器数目不超过3；

代码组织

以组件为单位组织；
一致的注释；
一致的空白分割成块；
以组件为单位，而不是页面拆分成多个CSS文件；

soonfy

flex

flex 的核心概念是容器和轴。

容器包括外层的父容器（容器）和内层的子容器（项目），轴包括主轴和交叉轴。

display: flex;

flex 属性

12 个相关属性，webkit 内核的浏览器加上 -webkit 前缀

justify-content, align-items, flex, align-self

flex-direction, flex-wrap, flex-flow, align-content

flex-grow, flex-shrink, flex-basis, order

容器属性

justify-content: 定义容器中的项目在主轴上的对齐方式，默认是 flex-start；

align-items: 定义容器中的项目在交叉轴的对齐方式，默认是 stretch；

flex-direction: 定义容器主轴的方向，项目在容器中的排列方式，默认是 row；

flex-wrap: 定义项目宽度超过容器是否换行，默认是 nowrap；

flex-flow: 是 flex-direction, flex-wrap 的简写，默认是 row nowrap ；

align-content: 定义容器多根主轴的对齐方式，默认是 stretch；

项目属性

flex: 是 flex-grow, flex-shrink, flex-basis 的简写，默认是 0 1 auto ；

align-self: 定义项目本身在容器中交叉轴的对齐方式，覆盖容器的 align-items 属性；

flex-grow: 定义项目在容器主轴上的放大比例，项目宽度小于容器会放大比例，默认是 0 ；

flex-shrink: 定义项目在容器主轴的缩小比例，项目宽度超过容器会缩小比例，默认是 1 ；

flex-basis: 定义项目在容器主轴的初始宽度，默认是 auto ；

order: 定义项目在容器主轴的顺序， order 越小越靠前，默认是 0 ；

参考文章

Flex 布局教程：语法篇

一劳永逸的搞定 flex 布局

soonfy
2018-03-29

路由

getCurrentPages()

返回页面栈

onLoad(), onShow()

onLoad: function(option){
  console.log(option.query)
}

soonfy

初始化

# 全局安装 vue-cli
npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
vue init mpvue/mpvue-quickstart my-project

# 安装依赖
cd my-project
npm install

# 启动构建
npm run dev

问题

新增的页面需要重新 npm run dev 来进行编译

参考文章

mpvue quickstart

soonfy

水平居中

内联元素（文本）水平居中

.inline-item {
  text-align: center;
}

块级元素水平居中

.block-item {
  margin: 0 auto;
}

多个块级元素水平居中

text-align + display

.container {
  text-align: center;
}
.block-item {
  display: inline-block;
}

flex

.container {
  display: flex;
  justify-content: center;
}

垂直居中

单行内联元素（文本）垂直居中

.container {
  height: 100px;
  line-height: 100px;
}

多行元素垂直居中

table

.container {
  display: table;
}
.item {
  display: table-cell;
  vertical-align: middle;
}

flex

.container {
  display: flex;
  align-items: center;
}
or
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

块级元素垂直居中

固定高度的块级元素垂直居中

.container {
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  height: 120px;
  margin-top: -60px;
}

未知高度的块级元素垂直居中

.container {
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

水平垂直居中

固定宽度和高度的元素水平垂直居中

.container {
  position: relative;
}
.item {
  width: 400px;
  height: 300px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -160px 0 0 -210px;
}

未知高度和宽度的元素水平垂直居中

.container {
  position: relative;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

flex 布局

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

参考文章

这15种CSS居中的方式，你都用过哪几种？

soonfy
2018-04-03

通用规则

协议

使用 https 协议

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

@import 'https://fonts.googleapis.com/css?family=Open+Sans';

风格

使用 2 个空格缩进

<ul>
  <li>Fantastic
  <li>Great
</ul>

.example {
  color: blue;
}

全部使用小写

<img src="google.png" alt="Google">

color: #e5e5e5;

移除末尾空格

基本信息

编码采用 UTF-8 (no BOM)
注释
TODO

html

风格

document type 使用 html5

不用关闭空标签

<!DOCTYPE html>
<br>

验证 html 标签

<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

语义化标签

<a href="recommendations/">All recommendations</a>

多媒体元素添加替代文本

<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

分开 html，css，js
不使用实体引用

The currency symbol for the Euro is “€”.

省略选择性标签

<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

省略 type 属性

<link rel="stylesheet" href="https://www.google.com/css/maia.css">
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

格式

块级元素，列表，表格缩进单独使用一行

<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
  <li>Moe
  <li>Larry
  <li>Curly
</ul>
<table>
  <thead>
    <tr>
      <th scope="col">Income
      <th scope="col">Taxes
  <tbody>
    <tr>
      <td>$ 5.00
      <td>$ 4.50
</table>

断行缩进 4 个字符

<md-progress-circular
    md-mode="indeterminate"
    class="md-accent"
    ng-show="ctrl.loading"
    md-diameter="35">
</md-progress-circular>

双引号包含属性值

<a class="maia-button maia-button-secondary">Sign in</a>

css

风格

验证 css
使用有意义的或者通用的 id 或者类名

#gallery {}
#login {}
.video {}
.aux {}
.alt {}

id 或者类名要短而有意义

#nav {}
.author {}

不要把 id 或者类与元素混合使用

#example {}
.error {}

尽量使用速记属性

font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

属性值 0 后不使用单位

margin: 0

省略前置 0

margin: .5em

尽量使用 3 个字符的 16 进制

color: #fff

有意义的前缀

.mani-note {}

属性名用连字符分隔

name-id: {}

避免使用用户代理的 css hacks

格式

字母声明顺序

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

缩进块级内容

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

每条声明最后添加分号

.test {
  display: block;
  height: 100px;
}

声明冒号后添加空格

h3 {
  font-weight: bold;
}

选择器和声明之间添加空格

#video {
  margin-top: 1em;
}

每个选择器单独占一行

h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

每条规则占一行，声明之间添加一个空行

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

规则中使用单引号，url 中不使用引号

@import url(https://www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

基本信息

注释

/* header */

参考

google html/css style

soonfy

基本选择器

选择器	例子	例子描述	css
element	div	选择所有 div 元素	1
.class	.info	选择 `class="info"` 的所有元素	1
#id	#info	选择 `id="info"` 的所有元素	1
*	*	选择所有元素	2

组合选择器

选择器	例子	例子描述	css
element,element	div,p	选择 div 元素和 p 元素	1
element element	div p	选择是 div 元素后代的 p 元素	1
element>element	div>p	选择是 div 元素子元素 p	2
element+element	div+p	选择紧跟在 div 元素之后同级的 p 元素	2

属性选择器（css2）

选择器	例子	例子描述	css
[attribute]	[name]	选择具有 name 属性的元素	2
[attribute=value]	[name=index]	选择 `name="index"` 的元素	2
[attribute~=value]	[name~=index]	选择 name 属性包含单词 index 的元素	2
[attribute\|=value]	[name\|=index]	选择 name 属性以 index 开头的元素	2

伪类选择器（css2）

选择器	例子	例子描述	css
element:link	a:link	选择未被访问的 a 元素	1
element:visited	a:visited	选择已被访问的 a 元素	1
element:hover	a:hover	选择鼠标悬浮的 a 元素	1
element:active	a:active	选择活动的 a 元素	1
element:focus	input:focus	选择获得焦点的 input 元素	2
element:lang(value)	p:lang(en)	选择 `lang="en"` 的 p 元素	2
element:first-child	div:first-child	选择属于父元素的第一个子元素 div	2

伪元素（css2）

选择器	例子	例子描述	css
element:first-line	p:first-line	选择 p 元素的第一行	1
element:first-letter	p:first-letter	选择 p 元素的第一个字符	1
element:before	p:before	在 p 元素之前插入内容	2
element:after	p:after	在 p 元素之后插入内容	2

同级元素（css3）

选择器	例子	例子描述	css
element~element	div~p	选择 div 之后的 p 元素	3

属性选择器（css3）

选择器	例子	例子描述	css
element[attribute^=value]	p[class^=info]	选择 class 属性以 info 开头的 p 元素	3
element[attribute$=value]	p[class$=info]	选择 class 属性以 info 结尾的 p 元素	3
element[attribute*=value]	p[class*=info]	选择 class 属性包含 info 的 p 元素	3

表单伪类（css3）

选择器	例子	例子描述	css
element:enabled	input:enabled	选择启用的 input 元素	3
element:disabled	input:disabled	选择禁用的 input 元素	3
element:checked	radio:checked	选择被选中的 radio 元素	3
element::selection	p::selection	选择当前被选取的 p 元素部分	3
element:in-range	input:in-range	选择输入值在区间内的 input 元素	3
element:out-of-range	input:out-of-range	选择输入值在区间外的 input 元素	3
element:read-write	input:read-write	选择可读写的 input 元素	3
element:read-only	input:read-only	选择只读（readonly）的 input 元素	3
element:valid	input:valid	选择输入值合法的 input 元素	3
element:invalid	input:invalid	选择输入值不合法的 input 元素	3
element:optional	input:optional	选择可选输入的 input 元素	3
element:required	input:required	选择必须输入（required）的 input 元素	3

结构伪元素

选择器	例子	例子描述	css
:root	:root	选择文档的 root 根元素	3
:empty	p:empty	选择没有子元素的 p 元素	3
element:nth-child(n)	p:nth-child(2)	选择父元素的第 2 个子元素是 p 元素的当前 p 元素	3
element:nth-last-child(n)	p:nth-last-child(2)	选择父元素的倒数第 2 个子元素是 p 元素的当前 p 元素	3
element:nth-of-type(n)	p:nth-of-type(2)	选择属于父元素的第 2 个 p 子元素	3
element:nth-last-of-type(n)	p:nth-last-of-type(2)	选择属于父元素的倒数第 2 个 p 子元素	3
element:last-child	p:last-child	选择父元素的最后一个子元素是 p 元素的当前 p 元素	3
element:first-of-type	p:first-of-type	选择属于父元素的第一个 p 子元素	3
element:last-of-type	p:last-of-type	选择属于父元素的最后一个 p 子元素	3
element:only-child	p:only-child	选择父元素的唯一子元素是 p 元素的当前 p 元素	3
element:only-of-type	p:only-of-type	选择属于父元素的唯一 p 子元素	3

否定伪类

选择器	例子	例子描述	css
element:not()	:not(p)	选择非 p 元素	3

锚点伪类

选择器	例子	例子描述	css
:target	.info:target	选择 `class="info"` 中活动的锚点	3

参考文章

css选择器笔记

css选择器

soonfy
2018-03-30

1. install/start/stop/restart/remove

1.1 install mongodb 3.2

sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv EA312927 导入mongo公钥
echo "deb http://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.2.list 添加mongo源
sudo apt-get update 更新软件列表
sudo apt-get install -y mongodb-org 强制安装

1.2 start mongodb

sudo service mongod start

1.3 stop mongodb

sudo service mongod stop

1.4 restart mongodb

sudo service mongod restart

1.5 remove mongodb

sudo apt-get purge mongodb-org 使用purge选项彻底删除文件，mongodb-org 如果不对就填写自己安装的mongodb具体的文件名和版本
sudo rm -r /var/log/mongodb 删除数据库和日志
sudo rm -r /var/lib/mongodb
sudo apt-get autoremove 清除配置
sudo apt-get clean 清除文件

2. set mongodb start itself

2.1 make new folder to store mongodb data, and new file to store mongodb log

ex:

folder: /home/soonfy/mongodb/mongodb_data/
file: /home/soonfy/mongodb/mongodb.log

2.2 at path /etc/mongod.conf set mongod config

filepath and log

ex:

sudo gedit /etc/mongod.conf
dbpath='/home/soonfy/mongodb/mongodb_data/'
logpath='/home/soonfy/mongodb/mongodb.log'

2.3 at path /etc/rc.local add code before last line(exit 0)

ex:

/usr/bin/mongod -dbpath=/home/soonfy/mongodb/mongodb_data/ --fork --port 27017 --logpath=/home/soonfy/mongodb/mongodb.log --logappend --auth &

3. mongodb handle

show dbs list dbs
use db => show collections list collections
use db => db.<collection name>.find({}) list documents
use db => db.<collection name>.remove({}) remove documents
use db => db.<collection name>.drop() delete collection
use db => db.dropDatabase() delete db
mongodump -d <db name> -o <dump file path> dump db
mongorestore -d <db name> <restore file path> restore db
mongoexport -d <db name> -c <collection name> -o <export file name> export collection
mongoimport -d <db name> -c <collection name> <import file name> import collection
mongo -h <host name>:<port>/<db name> -u <user name> -p <user password> connect server db
mongoimport -h <host name>:<port>/ -u <user name> -p <user password> -d <db name> -c <collection name> <import file name> import collection to server db

4. mongodb auth

4.1 create root user

close --auth 关闭认证
create root user 新建超级用户,设置用户名，密码，角色，数据库

内置角色
数据库用户角色：read，readWrite
数据库管理角色：dbAdmin，dbOwner，userAdmin
集群管理角色：clusterAdmin，clusterManager，clusterMonitor，hostManager
备份回复角色：backup，restore
所有数据库角色：readAnyDatabase，readWriteAnyDatabase，userAdminAnyDatabase，dbAdminAnyDatabase
超级用户角色：root
内部角色：_system

use admin
db.createUser({
    user: <root user name>,
    pwd: <root user password>,
    roles: [{
      role: 'root',
      db: 'admin'
    }]
})

4.2 create common user

open --auth 开启认证
create common user 新建普通用户

use admin
db.auth(<user name>, <user password>)
use <db name>
db.createUser({
    user: <common user name>,
    pwd: <common user password>,
    roles: [{
      role: 'readWrite',
      db: <db name\>
    }]
})

5. node use mongodb

5.1 node connect mongodb

set mongodb url

mongodb_url = 'mongodb://<common user name>:<common user password>@localhost:27017/<db name>'

ex:
db name: DBTest, user name: DBUser, user password: DBPwd
url = mongodb://DBUser:DBPwd@localhost:27017/DBTest
mongoose.connect(url)

5.2 node connect mongodbs

mongoose.createConnction()

ex:
fdburl = 'mongodb://localhost/fdb'
sdburl = 'mongodb://localhost/sdb'
connect db in models
first connection
let fcon = mongoose.createConnction(fdburl)
fcon.model(fcollection, collectionSchema)
second connection
let scon = mongoose.createConnction(sdburl)
scon.model(scollection, collectionSchema)

5.3 node mongo debug

insert debug in development

if (app.get('env') === 'development') {
  mongoose.set('debug', true)   //debug
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

6. mongoexport

mongo export csv

mongoexport -h host --port port -u sf -p sf -d db -c collection -q '{name: "sf"}' -f name,age --csv -o ~/user.csv

soonfy

PR

fork 开源项目
clone 个人项目到本地
git remote -v 查看项目远程连接
git remote add upstream <开源项目地址>
git checkout -b <新分支>
git status/stage/commit/push
提交 PR

New pull request
Create pull request

参考文章

git学习--GitHub上如何进行PR(Pull Request)操作
 github----向开源框架提交pr的过程

soonfy

初始化项目 egg-init

npm i egg-init -g
egg-init -h
egg-init --type simple <file path>

soonfy

微信公众平台注册 `微信小程序`账号

在 设置，开发设置中复制AppID(小程序ID)和AppSecret(小程序密钥)

使用 mpvue 搭建开发项目

其中有一步需要 AppID
完成后 npm run dev 启动

打开项目

使用微信开发工具

认证授权逻辑

判断是否已经授权。getSetting()
未授权，按钮授权并获取用户信息。<button open-type="getUserInfo">授权</button>
已授权直接获取用户信息。getUserInfo()
获取 openid。login()

/sns/jscode2session 获取 openid

获取 unionid。

WXBizDataCrypt 解密 unionid

参考文章

BUG反馈
 小程序•小故事(4)——获取用户信息
 小程序•小故事(6)——微信登录能力优化
 小程序登录 - wx.login

soonfy

1XX

informational 信息性状态码，接收的请求正在处理；

2XX

success 成功状态码，请求正常处理完毕；

200 ok
表示从客户端发来的请求已经被服务器成功处理；
204 not content
表示服务器接收的请求已经成功处理，但返回的报文不包含实体的主体部分；
206 partial content
表示客户端进行范围请求，服务器已经成功处理了这部分 get 请求；

3XX

redirection 重定向状态码，需要进行附加操作以完成请求；

301 moved permanently
永久性重定向。表示请求的资源已经被分配了新的 uri，以后使用现在所指的 uri；
302 found
临时性重定向。表示请求的资源已经被分配了新的 uri，用户本次请求使用现在所指的 uri；
303 see other
表示请求的资源已经被分配了新的 uri，使用 get 方法定向请求资源；
304 not modified
表示服务器资源没有发生改变，客户端可以使用缓存；
307 temporary redirect
临时重定向。表示请求的资源已经被分配了新的 uri，必须使用相同的方法请求资源；

4XX

client error 客户端错误状态码；

400 bad request
表示请求报文中存在语法错误；
401 unauthorized
表示发送的请求需要有通过 http 验证（basic验证，digest验证）的认证信息，如果之前已经发过请求，表示用户验证失败；
403 forbidden
表示对资源的请求已经被服务器拒绝；未获得系统文件的访问授权，访问权限出现问题（未授权的 ip 地址）；
404 not found
表示服务器上找不到请求的资源；

5XX

server error 服务器错误状态码；

500 internal server error
表示服务器在处理请求的时候发生错误；
503 service unavailable
表示服务器暂时处于超负载或者正在停机维护；

参考文章

《图解HTTP》

HTTP response codes

soonfy
2018-03-31

首行缩进

text-indent: 24px;

字符间距

letter-spacing: 1px;

行间距

line-height: 20px;

soonfy

koa middleware

koa

import * as koa from 'koa';
const app = new koa();
app.use((ctx) => {
  ctx.body = data;
})
app.listen(3000);

koa-logger

import * as koa from 'koa';
import * as logger from 'koa-logger';
const app = new koa();
app.use(logger(() => {
  // ...
}))
app.listen(3000);

koa-router

import * as koa from 'koa';
import * as Router from 'koa-router ';
const app = new koa();
let router = new Router({
  prefix: '/admin'
});
router.get('/', async (ctx, next) => {
  // ...
})
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);

koa-bodyparser

import * as koa from 'koa';
import * as bodyParser from 'koa-bodyparser';
const app = new koa();
app.use(bodyParser());
app.use(async (ctx) => {
  ctx.body = ctx.request.body;
})
app.listen(3000);

koa-ejs

import * as koa from 'koa';
import * as render from 'koa-ejs';
import * as path from 'path';
const app = new koa();
render(app, {
  root: path.join(__dirname, 'view'),
  viewExt: 'ejs',
  cache: false,
  debug: true
})
app.use(async (ctx) => {
  ctx.render('admin', adminData);
})
app.listen(3000);

koa-static

import * as koa from 'koa';
import * as serve from 'koa-static';
const app = new koa();
app.use(serve('public'));
app.listen(3000);

媒体查询

css2

css2 媒体查询针对媒体类型（显示器，便捷设备，电视机等）设置不同的样式规则；

css3

css3 取代查找媒体类型，根据设置自适应显示；

viewport（视窗）的宽度与高度；
设备的宽度与高度；
朝向（智能手机横屏，竖屏）；
分辨率；

伪范式

media_query_list
<media_query> [, <media_query>]

media_query
[only | not]? <media_type> [and <expression>]
expression [and <expression>]

media_type
all, screen, print, speech

expression
( <media_feature> [: value]? )

media_feature
width, min-width, max-width,
height, min-height, max-height,
device-width, min-device-width, max-device-width,
device-height, min-device-height, max-device-height,
aspect-ratio, min-aspect-ratio, max-aspect-ratio,
device-aspect-ratio, min-device-aspect-ratio, max-device-max-ratio,
color, min-color, max-color,
color-index, min-color-index, max-color-index,
monochrome, min-monochrome, max-monochrome,
resolution, min-resolution, max-resolution,
orientation, scan, grid

实例

link 元素中的 css 媒体查询；

<link rel="stylesheet" media="screen and (max-width: 768px)" href="small.css" />

样式表中的 css 媒体查询；

<style>
  @media screen and (max-width: 768px) {
    .info {
      display: none;
    }
  }
</style>

逻辑操作符

and 合并多个媒体属性或者合并媒体属性与媒体类型；
not 应用于整个媒体查询，最后否定查询结果；
only 用于指定某种特定的媒体类型；
，逗号分隔媒体查询，并列媒体查询，每个媒体查询都是独立的；

媒体类型 media_type

all 所有设备；
screen 显示器，电脑屏幕，平板电脑，智能手机；
print 用于打印机，打印预览；
speech 屏幕阅读器等语音设备；

媒体功能 media_feature

width 宽度
定义输出设备渲染区域的宽度（可视区域的宽度，打印机纸盒的宽度）；
接受 min， max 前缀

@media screen and (min-width: 576px) and (max-width: 768px) { }

height 高度
定义输出设备渲染区域的高度（可视区域的高度，打印机纸盒的高度）；
接受 min，max 前缀

@media screen and (min-height: 420px) and (max-height: 570px) { }

device-width 设备宽度
定义输出设备的宽度（整个屏幕或者页的高度）；
接受 min，max 前缀

@media screen and (min-device-width: 568px) and (max-device-width: 768px) { }

device-height 设备高度
定义输出设备的高度（整个屏幕或者页的高度）；
接受 min，max 前缀

@media screen and (min-device-height: 420px) and (max-height: 570px) { }

aspect-ratio 宽高比
定义输出设备渲染区域的宽高比。包含以 / 分隔的两个正整数，代表水平像素和垂直像素；
接受 min，max 前缀

@media screen and (min-aspect: 1/1) { }

device-aspect-ratio 设备宽高比
定义输出设备的宽高比。包含以 / 分隔的两个正整数，代表水平像素和垂直像素；
接受 min，max 前缀

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { }

color 颜色
定义输出设备每个像素单元的比特值。如果不支持输出颜色，值为0；
接受 min，max 前缀

@media all and (color) { }
@media all and (min-color: 4) { }

color-index 颜色索引
定义输出设备中颜色查询表中的条目数量；
接受 min，max 前缀

@media all and (color-index) { }
@media all and (min-color-index: 256) { }

monochrome 黑白
定义黑白（灰度）设备每个像素的比特值。如果不是黑白设备，值为0；
接受 min，max 前缀

@media all and (monochrome) { }
@media all and (min-monochrome: 8) { }

resolution 分辨率
定义输出设备的分辨率（像素密度）。分辨率使用每英寸（dpi）或者每厘米（dpcm）；
接受 min，max 前缀

@media print and (min-resolution: 300dpi) { }
@media screen and (min-resolution: 2dppx) { }

orientation 方向
定义设备处于横屏模式（高度大于宽度）还是竖屏模式（宽度大于高度）；
landscape 横屏模式，portrait 竖屏模式；
不接受 min，max 前缀

@media all and (orientation: portrait) { }

scan 扫描
定义电视输出设备的扫描过程；
progressive 顺序方式，interlace 逆序方式；
不接受 min，max 前缀

@media tv and (scan: progressive) { }

grid 网格
定义输出设备是网格设备还是位图设备；网格设备值为1，否则为0；
不接受 min，max 前缀

@media screen and (grid) and (max-width: 15em) { }

参考文章

css媒体查询

soonfy
2018-03-30

微信小程序上拉刷新，下滑更多

上拉刷新

设置 enablePullDownRefresh = true
定义 onPullDownRefresh() 处理函数
刷新数据后，wx.stopPullDownRefresh 可以停止当前页面的下拉刷新

下滑更多

设置 onReachBottomDistance = 50
定义 onReachBottom() 处理函数

UI

变更弹出框状态

wx.showLoading()
wx.showToast()
wx.hideToast()
wx.hideLoading()

变更导航条状态

wx.showNavigationBarLoading()
wx.hideNavigationBarLoading()

soonfy

vue-router 动态设置页面 title

动态 title

引入 vue-router

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

配置 router

const router = new Router({
  routes: [
    {
      path: '/',
      name: name,
      component: component,
      meta: {
        title: title
      }
    }
  ]
})

定义钩子，暴露出去

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})
export default router

参考文章

使用 vue-router 设置每个页面的 title
vue-router 动态设置页面 title

soonfy

mpvue 中 this 的指向

指向 vue 实例（正确）

wx.login({
  success: () => {
    wx.getUserInfo({
      success: (res) => {
        this.userInfo = res.userInfo
         // this 指向 vue 实例
      }
    })
  }
})

指向当前函数（错误）

wx.login({
  success () {
    wx.getUserInfo({
      success (res) {
        this.userInfo = res.userInfo
         // this 指向 success 函数
      }
    })
  }
})

soonfy

mpvue 生命周期

vue 生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed

小程序生命周期

app 部分

onLaunch
onShow
onHide

page 部分

onLoad
onShow
onReady
onHide
onUnload
onPullDownRefresh
onReachBottom
onShareAppMessage
onPageScroll
onTabItemTap

图示

参考文章

mpvue

soonfy

brew

安装

brew install <name>

卸载

brew uninstall <name>

查找

brew search <name>

列举已安装

brew list

更新brew

brew update

安装 mongodb 启动服务

brew services start mongodb

soonfy

小程序限制

1. 不能操作 DOM

2. 代码包上限 2048kb

3. 数据传输上限 1048576B = 1MB(setData 方法)

nginx 常用指令

启动

// 默认配置
nginx
// 配置文件
nginx -c <nginx.conf>

停止

// 快速停止
nginx -s stop
// 优雅停止
nginx -s quit

测试

// 测试
nginx -t
// 测试只输出错误信息
nginx -q

重新加载配置

nginx -s reload

soonfy

mac init environment

install brew

brew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

install iTerm2

iTerm2

install oh-my-zsh

zsh
oh-my-zsh

brew install zsh zsh-completions
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

install node

node
nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.9/install.sh | bash
nvm ls-remote
nvm install

install mongodb

brew install mongodb
brew services start mongodb

install redis

install

brew install redis

start

redis-server /usr/local/etc/redis.conf

stop

redis-cli shutdown

autostart

ln -sfv /usr/local/opt/redis/*.plist ~/Library/LaunchAgents
launchctl load ~/Library/LaunchAgents/homebrew.mxcl.redis.plist

stop autostart

launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.redis.plist

install node-oracledb

Instant Client

install

download instantclient-basic-macos.x64-12.2.0.1.0-2.zip
download instantclient-sdk-macos.x64-12.2.0.1.0-2.zip

unzip, merge, rename instantclient, move to /opt/oracle/
.zshrc append export path

export OCI_LIB_DIR=/opt/oracle/instantclient
export OCI_INC_DIR=/opt/oracle/instantclient/sdk/include
export ORACLE_HOME=/opt/oracle/instantclient
export DYLD_LIBRARY_PATH=/opt/oracle/instantclient
export LD_LIBRARY_PATH=/opt/oracle/instantclient
export ARCH=x86_64

install zmq

brew install zmq

install vscode

vscode

install chrome

chrome

install phantomjs

PHANTOMJS_CDNURL=https://npm.taobao.org/dist/phantomjs npm i

install pkg-config

pkg-config

curl http://pkgconfig.freedesktop.org/releases/pkg-config-0.29.2.tar.gz -o pkg-config-0.29.2.tar.gz

tar -xf pkg-config-0.29.2.tar.gzcd pkg-config-0.29.2

sudo ./configure --with-internal-glib
sudo make
sudo make install

soonfy

css colors

bootstrap

primary

color: #007bff;

secondary

color: #6c757d;

success

color: #28a745;

danger

color: #dc3545;

warning

color: #ffc107;

info

color: #17a2b8;

light

color: #f8f9fa;

dark

color: #343a40;

white

color: #fff;

element

blue

color: #409eff;

success

color: #67c23a;

warning

color: #e6a23c;

danger

color: #f56c6c;

info

color: #909399;

font

color: #303133;
color: #606266;
color: #909399;
color: #c0c4cc;

border

color: #dcdfe6;
color: #e4e7ed;
color: #ebeef5;
color: #f2f6fc;

iview

primary

color: #2d8cf0;

light primary

color: #5cadff;

dark primary

color: #2b85e4;

info

color: #2d8cf0;

success

color: #19be6b;

warning

color: #ff9900;

error

color: #ed3f14;

title

color: #1c2438;

content

color: #495060;

sub color

color: #80848f;

disabled

color: #bbbec4;

border

color: #dddee1;

divider

color: #e9eaec;

background color

color: #f8f8f9;

参考

bootstrap colors
element color
iview color

soonfy

局域网打开 vue-cli 生成项目

局域网打开 vue-cli 生成的项目

修改 config/index.js 文件中 host: '0.0.0.0'
重启服务
局域网通过 ip 打开网页

soonfy

js 保留 2 位小数

保留 2 位小数

const formatter = (number) => Math.round(number * 100) / 100;

强制保留 2 位小数

const formatter = (number) => number.toFixed(2);

当最后一位小数是 0 时，数字格式没办法保留，只能使用字符串格式。

soonfy

vue-cli 生产环境 build 找不到静态文件

默认配置

build 之后静态文件的引用路径

<link href=/static/css/app.bc0c5696b5c73205f3cc049cd051b772.css rel=stylesheet>

这样找不到静态文件，打开页面是空白

修改 `config/index.js` 中 `build` 的 `assetsPublicPath` 属性为 './'

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
}

build之后静态文件的引用路径

<link href=./static/css/app.bc0c5696b5c73205f3cc049cd051b772.css rel=stylesheet>

soonfy

vscode extensions

soonfy

css 优先级

样式表优先级

优先级就是分配给指定的 css 声明的一个权重，由 匹配的选择器的数值 决定；
多个 css 声明的优先级相同时，应用最后一个声明；
直接定义的 css 声明覆盖从祖先元素继承的属性；
定义声明中元素的接近程度对优先级没有影响；

选择器类型

类型选择器（div），伪元素（::before）；
类选择器（.class），属性选择器（[type="text"]），伪类（:hover）；
id 选择器（#id）；

3 > 2 > 1；
通配符（*），关系选择符（+>~），否定伪类（:not()）对优先级没有影响；
否定伪类（:not()）内部声明的选择器会影响优先级；

特殊优先级

color: red !import;

元素内联样式（style="font-size: 12px;"）覆盖外部样式表的任何样式；
!import 规则会覆盖其它任何声明；
互相冲突的 !import 规则应用优先级更高的；

参考文章

优先级 - mdn

soonfy
2018-03-30

npm config

list config

npm config ls -l

set config

access

unscoped packages default public
scoped packages default restricted
allow-same-version

default false
always-auth

default false
also

[String] default null
audit

default true
auth-type

[legacy | sso | saml | oauth] default legacy
bin-links

default true
browser

[String] OS X default open, Windows default start, Others default xdg-open
ca

[String | Array | null] default npm ca certificate
cafile

[path] default null
ca certificate file path
cache

[path] Posix default ~/.npm, Windows default %appData%\npm_cache
cache-lock-stale

[Number] default 60000
cache-lock-retries

[Number] default 10
cache-max

[Number] default infinity, deprecated
cache-min

[Number] default 10, deprecated
cert

[String] default null
cidr

[String | Array | null] default null
color

[Boolean | always] default true
depth

[number] default infinity
npm ls, npm cache ls, outdate depth
description

default true
npm search show description
dev

default false
dry-run

default false
if true, only use install, uninstall, update, dedupe, not use dist-tags, publish, owner
editor

[path] Posix default vi, Windows default notepad
engine-strict

default false
if true, only install compatible current node.js version
force

default false
fetch-retries

[Number] default 2
retry times from registry
fetch-retry-factor

[Number] default 10
fetch-retry-mintimeout

[Number] 10000
fetch-retry-maxtimeout

[Number] 60000
git

[String] default git
git-tag-version

default true
npm version command
global

default false
globalconfig

[path] {prefix}/etc/npmrc
global-style

default false
group

[String | Number] default current process GID
heading

[String] npm
npm debug log start
https-proxy

[url] default null
if-present

default false
ignore-prepublish

default false
if true, ignore prepublish script
ignore-scripts

default false
if true, ignore package.json scripts
init-module

[path] default ~/.npm-init.js
init-author-name

[String] default ''
init-author-email

[email] default ''
init-email-url

[url] default ''
init-license

[license] default ISC
init-version

[version] default 1.0.0
json

default false
npm ls --json, npm search --json
key

[String] default null
legacy-bundling

default false
link

default false
local-address

[IP address] undefined
loglevel

[silent | error | warn | notice | http | timing |info | verbose | silly] default notice
logstream

[stream] process.stderr
logs-max

[number] default 10
max log files
long

default false
npm ls, npm search info
maxsockets

[Number] default 50
max connections
message

[String] default %s
metrics-registry

[String] default registry value
node-options

[String] default null
node-version

[semver] default process.version
no-proxy

[String | Array] default null
offline

default false
onload-script

default false
only

default null
dev, development
prod, production
optional

default true
otp

[Number] default null
package-lock

default true
if false, ignore package-lock.json
package-lock-only

default false
if true, only update package-lock.json
parseable

default false
prefer-offline

default false
prefer-online

default false
prefix

[path]
production

default false
progress

default true
proxy

[url] default null
read-only

default false
npm token create
rebuild-bundling

default true
registry

[url] default https://registry.npmjs.org/
rollback

default true
save

default true
save-bundle

default false
save-prod

default false
save-dev

default false
save-exact

default false
save-optional

default false
save-prefix

[^ | ~] default ^
^ minor, ~ patch
scope

[String] default ''
script-shell

[path] default null
script-prepend-node-path

[Boolean | auto | warn-only] default warn-only
searchexclude

[String] default ''
searchopts

[String] default ''
searchlimit

[Number] default 20
searchstaleness

[Number] default 900
send-metics

default false
shell

[path] Posix default bash, Windows default cmd
shrinkwrap

default true
sign-git-tag

default true
sso-poll-frequency

[Number] default 500
sso-type

[oauth | saml | none] default oauth
strict-ssl
> default true
tag

[String] default latest
tag-version-prefix

[String] default v
timing

default false
tmp

[path] default /tmp
unicode

unix/mac default true, Windows default false
unsafe-perm

root run false, other true
usage

default false
user

[UID] default nobody
userconfig

[path] ~/.npmrc
umask

default 022
user-agent

[String]
version

default false
versions

default false
viewer

Posix default man, Windows default browser

soonfy

gruntfile 配置

配置文件

/**
  *
  * gruntfile配置模板
  * written by soonfy
  *
  * grunt-contrib-uglify压缩js文件
  * grunt-contrib-cssmin压缩css文件
  * grunt-nodemon重启程序
  * grunt-contrib-watch重启任务
  * grunt-concurrent并发控制
  *
*/

module.exports = function (grunt) {

  // 初始化插件
  grunt.initConfig({
    //读取package.json
    pkg: grunt.file.readJSON('package.json'),

    //初始化压缩js文件插件
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'              //添加头标
      },
      //声明任务
      build: {
        options: {
          mangle: false,                                      //不混淆变量名
          // preserveComments: 'all',                 //不删除注释
          report: 'min',                                        //输出压缩率
          footer: '\n/*! <%= pkg.name %> 最后修改于： <%= grunt.template.today("yyyy-mm-dd") %> */'         //尾标
        },
        files: [{
          expand: true,                                         //expand设置为true，启动下列参数
          cwd: 'controllers',                                 //所有src指定的匹配都是相对此路径
          src: ['*.js', '../public/javascripts/*.js'],                                         //源文件匹配格式
          dest: 'zip_files/js',                      //目标文件存放路径
          ext: '.min.js'
        }]
      }
    },
    //初始化压缩css文件插件
    cssmin: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'              //添加头标
      },
      build: {
        files: [{
          expand: true,
          cwd: 'public/stylesheets',
          src: '*.css',
          dest: 'zip_files/cs',
          ext: '.min.css'
        }]
      }
    },
    //初始化重启程序插件
    nodemon: {
      dev: {
        script: 'bin/www',                                //重启程序文件
        options: {
          args: [],                                               //传递到script的参数
          nodeArgs: ['--debug'],                          //打开debug服务器
          ignore: ['README.md', 'node_modules/**','zip_files/**'],           //忽略文件
          ext: 'js',                                              //监测文件类型
          watch: ['./'],
          delay: 1000,                                        //延迟重启
          env: {                                                  //重启的环境设置
            PORT: '3000'
          },
          cwd: __dirname                                  //当前活动路径
        }
      }
    },
    //初始化重启任务插件
    watch: {
      //监测js文件
      script: {
        options: {
          livereload: true
        },
        files: 'controllers/*.js',
        tasks: ['uglify']
      },
      //监测css文件
      css: {
        options: {
          livereload: true
        },
        files: 'public/stylesheets/*.css',
        tasks: ['cssmin']
      },
      //检测html文件
      html: {
        options: {
          livereload: true
        },
        files: 'views/*.jade',
        tasks: []
      }
    },
    //初始化并发任务插件
    concurrent: {
      //声明任务
      target: {
        tasks: ['nodemon', 'watch'],                    //并发任务
        options: {
          logConcurrentOutput: true                   //并发输出日志
        }
      }
    }
  });

  //加载插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-nodemon');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-concurrent');

  //注册任务
  grunt.registerTask('default', ['uglify:build', 'cssmin:build', 'concurrent:target']);
};

soonfy

html 功能链接(邮箱/电话)

跳转链接

<a href="[email protected]">soonfy</a>

邮箱链接

<a href="mailto:[email protected]">soonfy</a>

电话链接

<a href="tel:[email protected]">soonfy</a>

soonfy

weui grid

默认九宫格

.weui-grid {
  width: 33.3333333%;
}

转换为N宫格

覆盖 .weui-grid 的 width 属性

.weui-grid {
  width: 50%;
}

soonfy

RESTful 格式化

请求

get

> 获取数据

post

> 添加数据

put

> 修改数据

delete

> 删除数据

url

> 小写复数名词，_ 或者 - 分隔

获取用户列表

get /users/

获取某个用户

get /users/666/

获取某个用户的关注列表

get /users/666/follows/

获取某个用户的某个关注

get /users/666/follows/999/

添加某个用户

post /users/

添加某个用户的某个关注

post /users/666/follows/

修改某个用户

put /users/666/

修改某个用户的某个关注

put /users/666/follows/999/

删除某个用户

delete /users/666/

删除某个用户的某个关注

delete /users/666/follows/999/

status code

HTTP Status Codes

参考

REST API

soonfy

js 小数百分比转换

小数转百分比

const toPercent = (point) => {
    let percent = Number(point * 100).toFixed(2);
    percent += '%';
    return percent;
}

百分比转小数

const toPoint = (percent) => {
    let point = percent.replace('%', '');
    point = point / 100 - 0;
    return point;
}

soonfy

npm

install local packages

npm i -D <package>

update local packages

npm update

uninstall local packages

npm uni -D <package>

install global packages

npm i -g <package>

update global packages

// find outdated packages
npm outdated -g --depth=0
// update package
npm update -g <package>
// update all packages
npm update -g

soonfy

微信小程序开发

脚手架

UI 框架

图表组件

soonfy

启动 vue-cli 生成的项目自动打开浏览器

修改 config/index.js 文件中 autoOpenBrowser 参数为 true

autoOpenBrowser: true,

soonfy

html 插入百度地图

调用百度地图

打开“百度地图生成器”的网址：http://api.map.baidu.com/lbsapi/creatmap/index.html
查找位置，设置地图，添加标注，获取代码
把代码保存成 html 文件
通过 iframe 引入地图

<iframe src="map.html" width="600" height="300" frameborder="0" scrolling="no"></iframe>

参考文章

html 插入地图的方法

soonfy

javascript 设计模式系列（一）单例模式

单例模式

保证一个类仅有一个实例，并提供一个全局访问；
实例：登录浮框
一个词概括单例模式：标志

标准的单例模式

  // define
  let Singleton = function (name) {
    this.name = name;
    this.instance = null;
  };
  Singleton.prototype.log = function () {
    console.log(this.name);
  };
  Singleton.getInstance = function (name) {
    if (!this.instance) {
      this.instance = new Singleton(name);
    }
    return this.instance;
  };
  // use
  console.log('标准的单例模式');
  let a = Singleton.getInstance('a');
  let b = Singleton.getInstance('b');
  console.log(a.name);  // a
  a.log();  // a
  console.log(b.name);  // a
  b.log();  // a
  console.log(a === b);  // true

通过闭包保存标志

  // define
  let Singleton = function (name) {
    this.name = name;
  }
  Singleton.prototype.log = function () {
    console.log(this.name);
  };
  Singleton.getInstance = (function () {
    let instance = null;
    return function (name) {
      if (!instance) {
        instance = new Singleton(name);
      }
      return instance;
    }
  })();
  // use
  console.log('通过闭包保存标志');
  let a = Singleton.getInstance('a');
  let b = Singleton.getInstance('b');
  console.log(a.name);  // a
  a.log();  // a
  console.log(b.name);  // a
  b.log();  // a
  console.log(a === b);  // true

透明的单例模式

  // define
  let CreateSingleton = (function () {
    let instance = null;
    let CreateSingleton = function (name) {
      if (instance) {
        return instance;
      }
      this.name = name;
      return instance = this;
    };
    CreateSingleton.prototype.log = function () {
      console.log(this.name);
    }
    return CreateSingleton;
  })();
  // use
  console.log('透明的单例模式');
  let a = new CreateSingleton('a');
  let b = new CreateSingleton('b');
  console.log(a.name);  // a
  a.log();  // a
  console.log(b.name);  // a
  b.log();  // a
  console.log(a === b);  // true

使用代理实现单例模式

  // define
  let CreateSingleton = function(name){
    this.name = name;
  };
  CreateSingleton.prototype.log = function () {
    console.log(this.name);
  }
  let ProxySingleton = (function(){
    let instance = null;
    return function(name){
      if(!instance){
        instance = new CreateSingleton(name);
      }
      return instance;
    }
  })()
  // use
  console.log('使用代理实现单例模式');
  let a = new ProxySingleton('a');
  let b = new ProxySingleton('b');
  console.log(a.name);  // a
  a.log();  // a
  console.log(b.name);  // a
  b.log();  // a
  console.log(a === b);  // a

通用惰性单例实现登录浮框

// define
  let createLogin = function () {
    let div = document.createElement('div');
    div.innerHTML = '登录框';
    div.style.display = 'none';
    document.body.appendChild(div);
    let div = {};
    return div;
  }
  let getSingleton = function (fn) {
    let instance = null;
    return function () {
      return instance || (instance = fn.apply(this, arguments));
    }
  }
  let createSingleLogin = getSingleton(createLogin);
  // use
  console.log('通用惰性单例实现登录浮框');
  document.getElementById('login').onclick = function(){
    let loginDiv = createSingleLogin();
    loginDiv.style.display = 'block';
  }

参考文章

《JavaScript 设计模式与开发实践》

soonfy
2018-04-03

eslint 配置

安装

npm install -g eslint

初始化

eslint --init

定制配置

.eslintrc.js

module.exports = {
    "root": true,
    "extends": "standard",
    "env": {
        "node": true,
        "browser": true,
        "mocha": true
    },
    "rules": {
        "no-console": "off",
        "indent": [ "error", 2 ],
        "quotes": [ "error", "single" ],
        // allow async-await
        'generator-star-spacing': 0,
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
    }
};

.eslintignore

/node_modules/

.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

启动脚本

配置 package.json

"script": {
  "lint": "eslint . --ext .js"
}

pre-commit 钩子

安装 pre-commit 包
配置 package.json

"pre-commit": [
  "lint"
]

错误

终端直接执行 eslint . --ext .js 提示错误 can not find module eslint-configura-standard

eslint 是全局安装，eslint-configura-standard 是本地安装。不能全局启动 eslint 调用，需要写到 package.json 文件中，通过 npm run lint 调用

soonfy

node jwt

流程

网站
注册 - 登录 - 后台生成token - 前端request(authorization="Bearer "+token)
小程序
授权 - 后台生成token - 前端request(authorization="Bearer "+token)

插件

jsonwebtoken

express
express-jwt
koa
koa-jwt

soonfy

vue 引入图片

html

<img src="../assets/logo.png">

data + v-bind

<img :src="imgSrc">

data(){
  return {
    imgSrc: '../assets/logo.png'
  }
}

data + v-bind + import

<img :src="imgSrc">

import imgSrc from '@/assets/logo.png'
data(){
  return {
    imgSrc: imgSrc
  }
}

data + v-bind + static

图片放在 static 文件夹

<img :src="imgSrc">

data(){
  return {
    imgSrc: '../../static/logo.png'
  }
}

参考文章

Vue.js中的图片引用路径

soonfy

git

生成 ssh key

ssh-keygen

clone private git

error
no matching host key type found. Their offer: ssh-dss

fix
在 .ssh 目录下 vim config 新建文件添加如下两行
Host git.XX.XX.com
HostKeyAlgorithms +ssh-dss
第一行的 XX.XX 根据项目中 ssh 链接从 @ 后到 : 前的域名

soonfy

http 首部字段

通用首部字段 请求报文和响应报文都使用的首部；
请求首部字段 客户端向服务器发送请求报文使用的首部；
响应首部字段 服务器向客户端发送响应报文使用的首部；
实体首部字段 请求报文和响应报文的实体部分使用的首部；

通用首部字段

Cache-Control 控制缓存的行为
Connection 逐跳首部，连接的管理
Date 创建报文的日期时间
Pragma 报文指令
Trailer 报文末端的首部一览
Upgrade 升级为其它协议
Via 代理服务器的相关信息
Warning 错误通知

请求首部字段

Accept 用户代理可处理的媒体类型
Accept-Charset 优先的字符集
Accept-Encoding 优先的内容编码
Accept-Language 优先的语言（自然语言）
Authorization Web认证信息
Expect 期待服务器的待定行为
From 用户的电子邮箱地址
Host 请求资源所在的服务器
If-Match 比较实体标记（ETag）
If-Modified-Since 比较资源的更新时间
If-None-Match 比较实体标记（与 If-Match 相反）
if-Range 资源未更新时发送实体 Byte 的范围请求
If-Unmodified-Since 比较资源的更新时间（与 If-Modified-Since 相反）
Max-Forwards 最大传输逐跳数
Proxy-Authorization 代理服务器要求客户端的认证信息
Range 实体的字节范围请求
Referer 对请求中 uri 的原始获取方
TE 传输编码的优先级
User-Agent http 客户端程序的信息

响应首部字段

Accept-Ranges 是否接受字节范围请求
Age 推算资源创建经过的时间
ETag 资源的匹配信息
Location 客户端重定向指定的 uri
Proxy-Authenticate 代理服务器对客户端的认证信息
Retry-After 对再次发起请求的时机要求
Server http 服务器的安装信息
Vary 代理服务器缓存的管理信息
WWW-Authenticate 服务器对客户端的认证信息

实体首部字段

Allow 资源可支持的 http 方法
Content-Encoding 实体主体使用的编码方式
Content-Language 实体主体使用的语言
Content-Length 实体主体的字节大小
Content-Location 替代对应资源的 uri
Content-MD5 实体主体的报文摘要
Content-Range 实体主体的位置信息
Content-Type 实体主体的媒体类型
Expires 实体主体的过期时间
Last-Modified 资源的最后修改时间

参考文章

《图解http》

soonfy
2018-04-01

express 中间件

express middleware

express

const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.send(data);
})
app.listen(3000);

morgan

const express = require('express');
const logger = require('morgan');
const app = express();
app.use(logger('dev'));
app.listen(3000);

body-parser

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}))
app.post('/admin', (req, res) => {
  res.send(req.body);
})
app.listen(3000);

serve-static

const express = require('express');
const serve = require('serve-static');
const app = express();
app.use(serve('public'));
app.listen(3000);

cookie-parser

const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();
app.use(cookieParser('soonfy'));
app.get('/', (req, res) => {
  res.send(req.cookies);
})
app.listen(3000);

soonfy
2018-03-31

soonfy / issue-blog Goto Github PK

issue-blog's Introduction

personal website

pages

issue-blog's People

Contributors

Watchers

issue-blog's Issues

bootstrap

1. bootstrap css

1.1 css概览

1.2 网格系统

1.3 排版

1.4 代码

1.5 表格

1.6 表单

1.7 按钮

1.8 图片

1.9 辅助类

2. 布局组件

2.1 字体图标

2.2 下拉菜单

2.3 按钮组

2.4 按钮下拉菜单

2.5 基本输入框组

2.6 导航元素

2.7 导航栏

2.8 面包屑导航

2.9 分页

2.10 标签

2.11 徽章

2.12 超大屏幕

2.13 页面标题

2.14 缩略图

2.15 警告

2.16 进度条

2.17 多媒体对象

2.18 列表组

2.19 面板

2.20 Well

3. HTML规范

4. CSS规范

flex

flex 属性

容器属性

项目属性

导航

navigateTo

redirectTo

reLaunch

switchTab

navigateBack

comment

路由

getCurrentPages()

onLoad(), onShow()

vue 指令

初始化

问题

参考文章

javascript 设计模式系列

css 居中

水平居中

垂直居中

水平垂直居中

通用规则

协议

风格

基本信息

html

风格

格式

css

风格

格式

基本信息

参考

基本选择器

组合选择器

属性选择器（css2）

微信公众平台注册 `微信小程序`账号