Cole

值得一读的文章

Thu, 31 Dec 2020 00:00:00 +0800

2017 年

4 月

2017-04-10
- 优雅高效的免费在线APP原型工具
- 产品原型工具

1 月

2017-01-01
- React 常用面试题目与分析

2016 年

12月

2016-12-08
- 创建git私有仓库
2016-12-04
- things-you-can-do-in-a-web-worker

11月

2016-11-28
- 实现图片懒加载(Lazyload)
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用
2016-11-27
- Web前端从入门菜鸟到实践老司机所需要的资料与指南合集
2016-11-18
- The Basics of Web Workers
- 前端丨超全面+最流行的「前端速查表」高清版大全
2016-11-17
2016-11-15
- Meta Programming
  - 元编程之javascript
  - Proxy和Reflect
- X系列
  - 1 项目结构（Project structuring）
  - 2 [执行调度（Execution timing](https://blog.risingstack.com/writing-a-javascript-framework-execution-timing-beyond-settimeout/
  - 3 沙箱求值（Sandboxed code evaluation）
  - 4 数据绑定简介
  - 5 使用 ES6 Proxy 实现数据绑定
  - 6 自定义元素
- 7 客户端路由
2016-11-14
- 如何使用Rollup打包JavaScript
2016-11-08
- Clojure 风格的 JavaScript 并发编程JS-CSP
- 消息队列设计精要

10月

9月

5月

2016-05-13

4 月

2016-04-02
- SASS用法指南
- Creating-your-own-css-grid-system

2 月

2015 年

6 月

5 月

4 月

2015-04-11 前后端完全分离初探
2015-04-12:
- zsh, tmux和vim:文本三剑客
- JavaScript最全编码规范
2015-04-18:
2015-04-19 Docker —— 从入门到实践
2015-04-22 Zen Coding:一种快速编写HTML/CSS代码的方法
2015-04-29

正确掌握React 生命周期(Lifecycle)

Tue, 17 Jan 2017 00:00:00 +0800

前言

首先, 当面对一些问题:
- 1 React 用了这么久，经常遇到的问题是setState在这里写合适吗？
- 2 为什么setState写在这里造成了重复渲染多次？
- 3 为什么你的setState用的这么乱?
- 4 组件传入props是更新呢？重新挂载呢？还是怎样？
- 5 …
其次, 生命周期可以看到整个Component的运行过程, 在coding的时候很自然的找好他们的位置, 合作起来就会方便多了，这里极力推荐airbnb的react coding 规范.
所以整理了这篇文章。如果错误，欢迎指正。

一生命周期的8个方法

1 `componentWillMount()`

执行场景
- 在render()方法之前
解释
- 1 因为componentWillMount是在render之前执行，所以在这个方法中setState不会发生重新渲染(re-render);
- 2 这是服务端渲染(server render)中唯一调用的钩子(hook);
- 3 通常情况下，推荐用constructor()方法代替;

2 `render()`

执行场景
- 1 在componentWillMount()方法之后
- 2 在componentWillReceive(nextProps, nextState)方法之后
解释
- ==

3 `componentDidMount()`

执行场景
- 在render()方法之后
解释
- 1 这个方法会在render()之后立即执行；
- 2 这里可以对DOM进行操作，这个函数之后ref变成实际的DOM(@TODO 表述可能不清晰);
- 3 这里可以加载服务器数据，并且如果使用了redux之类的数据服务，这里可以出发加载服务器数据的action;
- 4 这里可以使用setState()方法触发重新渲染(re-render);

4 `componentWillReceiveProps(nextProps)`

执行场景
- 在已经挂在的组件(mounted component)接收到新props时触发;
- 简单的说是在除了第一次生命周期(componentWillMount -> render -> componentDidMount)之后的生命周期中出发;
解释
- 1 如果你需要在props发生变化(或者说新传入的props)来更新state，你可能需要比较this.props和nextProps, 然后使用this.setState()方法来改变this.state;
注意
- 1 React可能会在porps传入时即使没有发生改变的时候也发生重新渲染, 所以如果你想自己处理改变，请确保比较props当前值和下一次值; 这可能造成组件重新渲染;
- 2 如果你只是调用this.setState()而不是从外部传入props, 那么不会触发componentWillReceiveProps(nextProps)函数；这就意味着: this.setState()方法不会触发componentWillReceiveProps(), props的改变或者props没有改变才会触发这个方法;

5 `shouldComponentUpdate(nextProps, nextState)`

执行场景
- 在接收到新props或state时，或者说在componentWillReceiveProps(nextProps)后触发
解释
- 在接收新的props或state时确定是否发生重新渲染，默认情况返回true，表示会发生重新渲染
注意
- 1 这个方法在首次渲染时或者forceUpdate()时不会触发;
- 2 这个方法如果返回false, 那么props或state发生改变的时候会阻止子组件发生重新渲染;
- 3 目前，如果shouldComponentUpdate(nextProps, nextState)返回false, 那么componentWillUpdate(nextProps, nextState), render(), componentDidUpdate()都不会被触发;
- 4 Take care: 在未来，React可能把shouldComponentUpdate()当做一个小提示(hint)而不是一个指令(strict directive)，并且它返回false仍然可能触发组件重新渲染(re-render);
Good Idea
- 在React 15.3以后, React.PureComponent已经支持使用，个人推荐，它代替了(或者说合并了)pure-render-mixin，实现了shallowCompare()。扩展阅读

6 `componentWillUpdate(nextProps, nextState)`

执行场景
- 在props或state发生改变或者shouldComponentUpdate(nextProps, nextState)触发后, 在render()之前
解释
- 1 这个方法在组件初始化时不会被调用;
注意
- 1 千万不要在这个函数中调用this.setState()方法.;
- 2 如果确实需要响应props的改变，那么你可以在componentWillReceiveProps(nextProps)中做响应操作;
- 3 如果shouldComponentUpdate(nextProps, nextState)返回false，那么componentWillUpdate()不会被触发;

7 `componentDidUpdate(prevProps, prevState)`

执行场景
- 在发生更新或componentWillUpdate(nextProps, nextState)后
解释
- 1 该方法不会再组件初始化时触发;
- 2 使用这个方法可以对组件中的DOM进行操作;
- 3 只要你比较了this.props和nextProps，你想要发出网络请求(nextwork requests)时就可以发出, 当然你也可以不发出网络请求;
注意
- 如果shouldComponentUpdate(nextProps, nextState)返回false, 那么componentDidUpdate(prevProps, prevState)不会被触发;

8 `componentWillUnmount()`

执行场景
- 在组件卸载(unmounted)或销毁(destroyed)之前
解释
- 这个方法可以让你处理一些必要的清理操作，比如无效的timers、interval，或者取消网络请求，或者清理任何在componentDidMount()中创建的DOM元素(elements);

二两种生命周期

1 组件初始化

原因
- 组件第一次建立
触发
- componentWillMount -> render -> componentDidMount

2 组件更新 – props change

原因
- props发生改变
触发
- componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> componentDidUpdate

3 组件更新 – state change

原因
- this.setState()使state发生改变
触发
- shoudlComponentUpdate -> componentWillUpdate -> componentDidUpdate

4 组件卸载或销毁

原因
- 组件卸载或销毁
触发
- componentWillUnmount

三相关链接

对前后端API设计的一点思考 -- Status Code

Tue, 17 Jan 2017 00:00:00 +0800

一、问题

首先，扯点大方向: API规范
- 目前市面是规范比较多，大家都有自己的想法，这没错，但是遇到团队协作或者前后端交接的事件，各自遵循自己的规范可不见得是什么好事啊;
- 这个问题不仅是前后端对接，甚至是前端团队成员协调，都会出现一些不认同，或者要花很多的沟通成本，这个时间浪费是没有必要的，这是初衷。
其次, 格式问题:
- 接口数据返回的格式，包括: Header + Data
  - Header: 就是常见的响应头(Response headers);
  - Data: 就是返回的接口数据，或者特定的业务数据;

二、Response 情况分类(2种)

1 正确
- 响应头(Response header)
  - status: 200 或者 20x (这时: fetch的res.ok是正确的)
- 主体(Body)
  - 返回正确JSON数据 (关于正确数据格式规范, 单独文章讲讲我的理解…)
2 出错
- 响应头(Response header)
  - status: 400 或 40x 或 50x
- 主体(Body)
  - 包含两个字段: { errcode: Number, errmsg: String }, 其中
  - errcode: 为开发/业务错误码，不是Http Status Code, 一般为Http Status扩展码, 比如 Http Status 为 400 时, errcode 为 400001等
  - errmsg : 为开发/业务错误信息, 提示开发者或者提示用户

三、例子: Fetch

// 以React + Redux + Redux-thunk 中使用fetch为例

let status, ok;
fetch(url, options)
  .then(res => {
    status = res.status; // 接下来会说说为什么用ok, 而不是用status
    ok = res.ok;
    return res.json();
  })
  .then(data => {
    if (!ok) {
      const _err = new Error(data.errmsg);
      _err.errcode = data.errcode;
      throw _err;
    }

    dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
  })
  .catch(err => {
    dispatch({ type: 'FETCH_ERROR', payload: { errcode: err.status || 500, errmsg: err.toString() } })  
  })

你会发现上面有两个变量: status和ok, 其中status表示具体的Http Status Code, 而ok在Http Status Code为20x的时候是true。

四、参考

React - PropTypes and DefaultProps

Sat, 03 Dec 2016 00:00:00 +0800

一 PropsTypes 取值

1 常用
- 1 字符串: PropTypes.string
- 2 数字: PropTypes.number
- 3 函数: PropTypes.func
- 4 数组: PropTypes.array
- 5 对象: PropTypes.object
- 6 React元素: PropTypes.element
- 7 节点: PropTypes.node
- 8 任意: PropTypes.any
2 高级
- 1 指定类型: PropTypes.instanceOf(TYPE)
- 2 限定enum值之一: PropTypes.oneOf(['foo', 'bar'])
- 3 限定enum类型之一: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
- 4 指定数组值的类型: PropTypes.arrayOf(PropTypes.object)
- 5 指定对象的属性类型: PropTypes.objectOf(PropTypes.string)
- 6 指定特定的对象类型: PropTypes.shape({id: PropTypes.string, color: PropTypes.string})

二限定PropTypes类型

PropTypes.string.isRequired
PropTypes.shape({ id: PropTypes.string.isRequired, color: PropTypes.string}).isRequired

三自定义类型

// 自定义格式(当不符合的时候，应该适当提示或者报错)
customPropTypes: function (props, propName, component) {
  if (!/^[0-9]/.test(props[propName])) {
    return new Error('Validation failed');
  }
}

四 defaultProps (ES2016)

设置默认值，但注意使用默认值时, isRequired属性将失效

五案例

import React, {Component, PropTypes} from 'react';

export default class Table {
  static propTypes = {
    title: PropTypes.string,
    header: PropTypes.arrayOf(PropTypes.string),
    body: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropType.oneOfType([PropType.string, PropTypes.number]).isRequired,
        name: PropTypes.string,
        value: PropTypes.number
      }).isRequired
    ),
  };

  render () {
    ....  
  }
}

SVG 入门和进阶

Sun, 20 Nov 2016 00:00:00 +0800

SVG基础

一、定义与优势: `SVG` - `Scalable Vector Graphics`

定义
- 1 可伸缩矢量图
- 2 使用XML格式定义图形
- 3 W3C的标准
优势
- 容易修改
- 比JPEG和GIF小，可读性强
- 矢量，即在任何分辨率下都不会模糊，高清

二、基本使用

// 1. 文件后缀必须为.svg
// 2. 栗子: 矩形
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" stroke="black" stroke-wdith="2" fill="red" />
</svg>

三、基础Shape和Style属性

1 Common Style Attributes – 既可以独立使用(fill="red")，也可以写在style里(style="fill:red")
- x – 到浏览器左侧距离(Default: 0, 指0px)
- y – 到浏览器右侧距离(Default: 0)
- width – 宽
- height – 高
- fill – 填充颜色(Default: #000)
- fill-opacity – 填充颜色透明度(取值和opacity一样)
- stroke – 线颜色(Default: #FFF)
- stroke-width – 线宽(Default: 1, 主要这里1指1px, 大部分都是这样)
- stroke-opacity – 线透明度
- filter – 滤镜(Advanced)
- style – 同DOM的style, 并且可以将以上搜集在一起
2 Shape 与特有属性
- 1 rect – 矩形
  - rx + ry: 使矩形产生圆角
- 2 circle – 圆形
  - cx + cy: 圆心坐标
  - r: 圆半径
- 3 ellipse – 椭圆
  - cx + cy: 椭圆圆心坐标
  - rx + ry: 椭圆水平、垂直半径
- 4 line – 线
  - x1 + y1: 起点坐标
  - x2 + y2: 终点坐标
- 5 polyline – 折线
- 6 ploygon – 多边形(不少于三条边的图形)
  - points: 点集, 其中点(x,y)与点(m,n)之间用空格分隔
- 7 path – 路径
  - d: 数据(data), 一下是数据中的指令
    - 1 M – moveTo(M x,y): 将画笔移动到指定的坐标位置
    - 2 L – lineTo(L x,y): 画直线到指定的坐标位置
    - 3 H – Horizontal lineTo(H X): 画水平线到指定的X坐标位置
    - 4 V – Vertical lineTo(V Y): 画垂直线到指定的Y坐标位置
    - 5 C – curveTo(C X1,Y1,X2,Y2,ENDX,ENDY): 三次Belzier曲线
    - 6 S – smooth curveTo(S X2,Y2,ENDX,ENDY)
    - 7 Q – qiadratic Belzier curve(Q X,Y,ENDX,ENDY): 二次Belzier曲线
    - 8 T – smootg quadratic Belzier curveTo(T ENDX,ENDY): 映射
    - 9 A – elliptical Arc(A RX,RY,XRotation,Flag1,Flag2,X,Y): 弧线
    - 10 Z – closepath: 关闭路径

// 栗子: Path
//  内容: 首先移动到点(0,0) -- moveTo(0,0)，然后画线到(0, 100) -- lineTo(0, 100), stroke颜色是red
//  注意: stroke的颜色默认为#fff，不手动赋值会是白色一片
<svg
  xmlns="http://www.w3c.org/2000/svg"
  version="1.1">
  <path 
    d="M0,0L0,100"
    style="stroke:red">
</svg>

三、`滤镜(Filter)` – in `<defs>`

1 效果分类
- 1 feBlend – 与图像结合的滤镜
- 2 feColorMatrix – 用于彩色滤光片转换
- 3 feComponentTransfer
- 4 feComposite
- 5 feConvolveMatrix
- 6 feDiffuseLighting
- 7 feDisplacementMap
- 8 feFlood
- 9 feGaussianBlur – 高斯模糊
  - in: SourceGraphic定义了由整个图像创建效果
  - stdDeviation: 定义模糊程度
- 10 feImage
- 11 feMerge
- 12 feMorphology
- 13 feOffset – 过来阴影
- 14 feSpecularLighting
- 15 feTile
- 16 feTurbulence
- 17 feDistantLight – 过滤照明
- 18 fePointLight – 过滤照明
- 19 feSpotLight – 过滤照明
2 定义
- 必须在<defs>标签中定义, defs是definitions的缩写
- 必须指定需要滤镜的图像id, 其中在图形中定义id: filter=url(#ID), 如<rect ... filter="url(#ID)"> 或者 <rect ... style="...;filter=url(#ID)">

// 栗子: 高斯模糊
//  内容: <defs>中定义<filter>, id为Gaussian_Blur, 并在图形中使用style="filter:url(#Gaussian_blur)"
<svg 
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  style="width:100%;height:100%;">
  
  <defs>
    <filter id="Gaussian_Blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
    </filter>
  </defs>

  <ellipse cs="200" cy="150" rx="70" ry="40"
    style="fill:#ff0; stroke:#000; stroke-width:2, filter:url(#Gaussian_Blur);"/>

</svg>

四、`渐变(Gradient)` – in `<defs>`

1 定义
- 一种颜色到另一种颜色平滑过渡
- 另，可以把多个过渡颜色应用到同一个元素上
2 分类
- 1 线性渐变(linearGradient)
  - 类型
    - 1 水平渐变: Y同, X不
    - 2 垂直渐变: X同, Y不
    - 3 斜渐变: X、Y均不同
  - 属性
    - id: 需要渐变的图形
    - x1 + y1: 起点(百分比)
    - x2 + y2: 终点(百分比)
    - stop – 子元素，其属性: offset, stop-opacity, stop-color, style等
- 2 放射渐变(radialGradient)
  - cx + cy + r: 外圆渐变的范围(cx+cy: 可百分比或者像素)和半径(r)
  - fx + fy: 内圆颜色渐变的范围(可百分比或者像素)
  - stop: 颜色标签

// One 线性渐变 -- Path矩形垂直渐变
// Two 放射渐变 -- Path矩形放射渐变

<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <path 
    d="M0,0L0,100L100,100L100,0Z" 
    style="stroke:red;fill:url(#linearG)" />

  <defs>

    <linearGradient 
      id="linearG"
      x1="0%" y1="0%"
      x2="100%" y2="0%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="yellow" />
    </linearGradient>
  
    <radialGradient
      id="radialG"
      cx="50%" cy="50%" r="50%"
      fx="50%" fy="50%">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="yellow" />
    </radialGradient>
  </defs>
</svg>

五、`SVG图形组<g>`

定义:
- 将图形分组，便于统一操作
功能
- <g>标签用来创建分组
- 属性继承
- transform属性定义坐标变换
- 可以嵌套
- 元素属性可以在<g>中定义一次就行, 如fill,stroke,stroke-wdith等
注意
- 可以在<defs>中定义<g>，并赋予id, 在其他<g>或者坐标中用<use xlink="#ID">使用

SVG 进阶

六、坐标系统 – 使用 transform 观察

1 视野(viewbox)的概念
2 分组的概念()
3 四个坐标
- 1 用户坐标系(User Coordinate)
  - 世界的坐标系
- 2 自身坐标系(Current Coordinate)
  - 每个图形元素或者分组独立与生俱来
- 3 前驱坐标系(Previous Coordinate)
  - 父容器的坐标系
- 4 参考坐标系(Reference Coordinate)
  - 使用其他坐标系来考究自身的情况时使用
4 坐标变换
- 线性变换 – (MD: 高数和图形变换都还给老师了)
  - transform属性
    - 前驱坐标系: 父容器的坐标系
    - transform属性: 定义前驱坐标系到自身坐标系的线性变换
    - 语法: rotate(deg) / translate(x, y) / scale(sx, sy) / matrix(a, b, c, d, e, f)

七、RGB与HSL

基础
- RGB: 用Red, Green, Blue分量来表示颜色
  - 格式: rgb(r, g, b) 或者 #rrggbb
  - 取值: 0-255
  - 优劣: 容易显示器解析，但不符合人类描述颜色的习惯
- HSL: 用颜色(Hue)、饱和度(Saturation)、亮度(Lightness)来表示
  - 格式: hsl(h, s%, l%)
  - 取值范围
    - h: [0, 359]
    - s, l: [0, 100]
  - 优势符合人类描述颜色的习惯

Express 项目基础架构及使用文档

Tue, 12 Jul 2016 00:00:00 +0800

@1 项目文件结构

解析
- 1 app.js: 项目入口文件
- 2 app: 项目目录
  - schemas: mongoose 数据结构
  - models: mongoose 模型文件
  - controllers: 控制器, 主要是路由动作函数
- 3 public: 静态文件目录
  - lib: 公用静态文件，如bootstrap
  - js: javascript
  - css: css
  - images: images
- 4 config: 项目配置目录
  - routes.js: 路由配置
  - middlewares.js: 全局中间件
- 5 gulp.js + package.json: 项目开发配置文件

@2 version 4.x 安装

1 安装NPM
2 使用NVM安装和管理Node
3 安装 express
- npm install express --save
4 开发配置之package.json

@3 Express Hello world web server

// app.js
var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('App server listening on port 3000!');
});

// 运行Web Server
//  node app.js

@4 Rest: HTTP METHODS

1 HTTP请求 -> 事件 -> 数据库操作
- GET -> 查询 -> select
- POST -> 新建 -> insert
- PUT -> 更新 -> update
- DELETE -> 删除 -> delete
2 常用REST的HTTP请求
- MANY(列表数据)
  - GET -> LIST(列表)
  - POST -> CREATE(创建)
- ONE(单一数据)
  - GET -> RETRIEVE(查询)
  - PUT -> UPDATE(更新)
  - DELETE -> DELETE(删除)/DESTROY(销毁)
3 安全: 所有操作都要做好过滤，尤其是不安全操作
- 安全操作: GET
- 不安全操作: POST, PUT, DELETE

@5 基本路由(Basic Route)

app.METHOD(PATH, HANDLER)

// HTTP GET
app.get('/', function (req, res) {
  res.send('GET');
})

// HTTP POST
app.post('/', function (req, res) {
  res.send('POST');
})

// HTTP PUT
app.put('/user/sama', function (req, res) {
  res.send('PUT');
});

// HTTP DELETE
app.delete('/user/sama', function (req, res) {
  res.send('DELETE');
});

@6 Express 高级路由(Advanced Route)

1 路由方法(METHODS)
- app.all(PATH, MIDDLEWARE_HANDLER)
  - 在对PATH路径的get/post/put/delete等请求前做处理
  - MIDDLEWARE_HANDLER: 请查看 @7 Express 中间件
  - 注意区别: app.use('*', MIDDLEWARE_HANDLER);
2 路由路径(PATH)
- PATH
  - 类型:
    - 字符串(string): app.get('/user', ...);
    - 字符模式(string pattern): /user/:id
    - 正则表达式(regular expression): app.get(/.*\.json$/, ...);
  - 注意: 查询字符串(query strings)不属于路径的一部分，如/user/:id?_t=4545中的_t
3 路由参数(parameters)
- 分析: /user/:uid/books/:bid?start=0中的:uid与:bid
  - params: uid
  - query: start
  - body: POST/PUT等请求中的数据
  - 注意区分: params、query、body
  - 注意: 斜杠不是区分params的标志, 如: /flight/:from-:to
- 使用
  - req.params.uid
  - req.params.bid
  - req.params.from
  - req.params.to
4 路由处理函数
- 基本形式
- 多个中间件
  - app.METHOD(PATH, MIDDLEWARE@1, MIDDLEWARE@2, MIDDLEWARE@3, ..., HANDLER);

// 基本形式
function (req, res, next) {
  // do something
  next(); // 最后必须执行next方法，才能进入下一个中间件或者最终处理函数
}

5 路由响应方法
- res.send(STRING | OBJECT): 发送多种形式的响应，常见字符或者JSON
- res.json(OBJECT): 发送JSON响应
- req.jsonp(OBJECT): 发送JSONP响应
- res.status(HTTP_CODE): 注意: 只是设置HTTP响应CODE,没有做出响应，一般会: res.status(400).send('Bad Request')等
- res.sendStatus(HTTP_CODE): 设置HTTP响应CODE，并做出反应
- res.redirect([STATUS_CODE,] PATH): [设置code,并]跳转
- res.render(VIEW[, LOCALS][, callback]): 渲染视图成HTML，并发送给客户端.
- res.sendFile(PATH[, OPTIONS][, fn]): 将文件以OCTET流形式发送
- res.end(): 终止响应进程
- res.download(PATH [, FILENAME][, fn]): 用于方便客户端进行文件下载
6 路由连锁处理: app.route()

// REST
// MANY: LIST + CREATE
app.route('/user')
  .get(MIDDLEWAREs..., HANDLER)
  .post(MIDDLEWAREs..., HANDLER);
  
// ONE: RETRIEVE + UPDATE + DELETE
app.route('/user/:id')
  .get(MIDDLEWAREs..., HANDLER)
  .put(MIDDLEWAREs..., HANDLER)
  .delete(MIDDLEWAREs..., HANDLER);

7 express.Router类 – 号称mini-app

// birds.js
var express = require('express');
var router = express.Router();

// middlewares
router.use(function (req, res, next) {
  console.log('Time: ', Date.now());
  next();
});

router.get('/', function (req, res) {
  res.send('GET bird');
})

router.get('/about', function (req, res) {...});

module.exports = router;


// app.js
var birds = require('./birds');
app.use('/birds', birds); // 路径包含 /birds, /birds/about, /birds/*

@7 中间件(Middleware)

(1)组成: F(req, res, next)
- 1 req: HTTP request 对象
- 2 res: HTTP response 对象
- 3 next: 下一个中间件(函数)
(2)作用:
- 1 执行任何代码
- 2 改变(修改、增加、删除)request和response对象的的属性
- 3 结束 request-response 循环，如res.end([DATA])直接响应，不再进入下一个中间件或者处理函数
- 4 调用栈中的下一个中间件(next);
(3)注意及FAQ:
- 如果当前中间件不能结束请求-响应(request-response)循环，那么必须调用next()来交给下一个中间件；否则, 请求将会被挂起, 这也是HTTP请求一直没有反应的原因之一。
(4)类型与使用
- 类型
  - 1 应用级(Application-level)中间件
  - 2 路由级(Router-level)中间件
  - 3 错误处理(Error-handling)中间件
  - 4 內建(Built-in)中间件
  - 5 第三方(Third-party)中间件
- Application-level中间件
  - 1 与app对象绑定的中间件叫应用级中间件, 也就是使用app.use()和app.METHOD()
  - 2 next('route')会忽略剩下的所有中间件，之间到最后的处理函数（区别: next() 会进入下一个中间件，next(err)会跳到错误处理中间件(如果有)）。
  - 3 FAQ
    - app.use(PATH, MIDDLEWARE): 只对PATH生效
    - app.use(MIDDLEWARE): 对所有挂载路径生效
- Router-level中间件
  - 1 与router对象绑定, 其中router = express.Router(), 也是使用router.use()和router.METHOD()
  - 2 其他与应用级中间件一致
- Error-handling中间件
  - 形式: function (err, req, res, next) { … }
  - next()不是必须执行，可以在这里报错res.end等
- Third-party中间件一般是应用级或者路由级中间件
  - 常用
    - body-parser: 解析body
    - cookie-parser: 解析cookie
    - express-session: 保存session
    - morgan: 记录日志Logger
    - connect-multiparty: 解析文件上传
    - server-favicon: 处理favicon
- Built-in中间件
  - express.static(root, [options])是唯一的內建中间件
    - root指定的目录是静态文件的根目录
    - options是可选参数

// 默认的可选参数
express.static(path.join(__dirname, 'public'), {
  // dofiles确定如何对待以`.`开头的文件或目录(也就是是否显示)，
  // String类型, 可选值ignore, deny, allow，
  // 其中ignore与deny的区别是，deny以403拒绝请求隐藏文件(以.开头)，ignore会在找不到文件的时候返回404
  dofiles: 'ignore', 
  
  // 开启或禁用Etag生成标志
  // 关于Etag: http://www.sxt.cn/u/324/blog/2188
  etag: true,
  
  // 设置文件后缀，一般不用
  extensions: false,
  
  // 
  fallthrough: true,
  
  // 索引文件，一般不允许索引
  index: 'index.html',
  
  // 响应头: Last-Modified
  lastModified: true,
  
  // 响应头: Cache-Control (缓存)
  // 值: 默认是毫秒的数字0, 可以设置
  //  其他字符串值 '1d' = 86400000, '1h'=3600000, '1m'=60000, '5s'=5000
  // More: https://www.npmjs.org/package/ms
  maxAge: 0,
  
  // 默认true, 在路径是目录时跳转到/，也就是在路径后面加/
  redirect: true,
  
  // 设置静态文件响应头函数
  setHeaders: function (req, path, stat) {
    // res.set('x-timestamp', Date.now());
  }
})

@8 模板引擎(Template Engines)

常见
- pug (就是以前的jade, 默认)
- mustache
- ejs
使用
- 1 设置模板引擎: app.set('view engine', 'pug');
- 2 设置模板根目录: app.set('views', './app/views');
- 3 渲染模板: res.render(TEMPLATE_NAME, LOCALS);, 其中TEMPLATE_NAME为./app/views下的文件, LOCALS为传入模板的文件

@9 数据库集成(Database Integeration)

常用
- MongoDB -> Mongoose
- Mysql
- PostgreSQL -> pg-promise
- Redis
- Neo4j
mongoose
- DOCUMENT ```javascript // 安装 mongoose // npm install mongoose var mongoose = require(‘mongoose’); var URL = ‘mongodb://localhost/DATABASE_NAME’; mongoose.connect(URL, function (err, db) { if (err) { console.log(‘Error: MongoDB connect error, check whether mongo server has been running.’); console.log(‘Error Detail: ‘, err); } });

```

全站 HTTPS 实践

Tue, 14 Jun 2016 00:00:00 +0800

参考

program docs search tools

Fri, 29 Apr 2016 00:00:00 +0800

文档查询工具

Dash Mac
Zeal Cross Platform

快速查询工具

[Alfred]
[Mutate]

文档快速生成

Python
- Sphinx
  - Uwsgi Theme
- https://readthedocs.org/

Linux 开发有用的工具集

Fri, 29 Apr 2016 00:00:00 +0800

一、网络

流量分析

HTTP

1 httpry
- 定义: Linux 命令行下嗅探 HTTP 流量的工具
- 常用命令:
  - sudo httpry -i DEVICE ＃监听DEVEICE的http流量, DEVICE可以为wlan0, eth0, eno1 等任何网络接口
  - sudo httpry -i DEVICE -m get,head # -m 监听指定的HTTP方法
  - sudo httpry -i DEVICE -o FILE # -o 指定输出文件
  - sudo httpry -i DEVICE | grep xxx # 结合管道
  - 其他 httpry -h 获取
2 tcpdump
- 定义: 一个运行在命令行下的嗅探工具
- 常用命令:
  - sudo tcpdump tcp port 80 -n -X -s 0 # http数据包抓取
  - sudo tcpdump tcp port 80 -n -X -s 0 # 抓取htto包数据指定文件进行输出package
  - sudo tcpdump tcp port 80 -n -X -s 0 -l grep xxx # 结合管道流
  - sudo tcpdump tcp host 10.16.2.85 and port 2100 -s 0 -X # 只监控特定的ip主机
- 其他选项:
  - -i DEVICE 指定接口
- More
3 ngrep
- 定义: 是grep(在文本中搜索字符串的工具)的网络版，他力求更多的grep特征，用于搜寻指定的数据包
- 常用命令:
  - ngrep -q -d DEVICE -W byline host HOST and port 80
  - ngrep -q -d DEVICE -W byline host HOST and port 80 grep xxx # 结合管道

Nginx 禁止未绑定域名(包括IP)范围

Fri, 29 Jan 2016 00:00:00 +0800

问题

随意绑定域名到IP, 都可以访问；但是不想被其他未指定的域名绑定, 返回404或者其他.

解决方法(一)

编辑 nginx.conf 或者自己配置的server文件
在其他server里指定server_name, 比如: colesmith.space;

// 添加以下代码, 作为默认服务(访问)
// 其他 server 不能设置为default_server;
// 检测: nginx -t
// vim /etc/nginx/nginx.conf
server {
    listen      80 default_server;
    server_name _;
    return      404; 
}

// 在其他server里指定server_name, 比如: colesmith.space
// 浏览器访问: http://colesmith.space 可以访问
// 其他域名即使绑定，也指向404页面
// 
// server_name 可以指定IP， 开放IP访问
// server_name 可以指定多个域名，用空格隔开
server {
    listen      80;
    ...
    server_name colesmith.space love.me 112.113.114.115;
    ...
}

解决方法(二)

编辑nginx.conf
- 1 设置default_server
- 2 设置server_name, 限制指定域名访问，其他域名404页面
- 3 在default_server中用try_files
  - try_files $uri $uri/ @error (Django or other)
  - try_files $uri $uri/index.php?$args 404 (PHP or other)
参考

// 
server {
    listen      80 default_server;
    server_name colesmith.space 111.222.333.444;
    ...

    location / {
        ...
        try_files $uri $uri 404;
    }
    ...
}

Vsftpd 虚拟用户及其家目录的配置

Mon, 25 Jan 2016 00:00:00 +0800

参考

一.OS

Ubuntu 14.04

二.Vsftpd Version

vsftpd: version 3.0.2

三.准备工作

1. 下载VSFTPD: FTP 服务
  - apt-get install vsftpd
1. 下载PAM(Pluggable Authentication Module): 插入验证模块
  - apt-get install libpam-pwdfile
1. 下载apache2-utils(使用到htpasswd, 密码管理)
  - apt-get install apache2-utils

四.覆盖VSFTPD配置文件(/etc/vsftpd.conf)

注意: 以下全是/etc/vsftpd.conf中的内容

# 监听服务(IPV4), 如果是IPV6, 则应开启listen_ipv6=YES
listen=YES
# 不允许匿名用户登陆, 如果要开启, 则anonymous_enable=YES
anonymous_enable=NO
# 允许本地用户登录, 虚拟用户依赖于待会儿新建的本地用户vsftp
local_enable=YES
# 本地用户写入(上传)权限
write_enable=YES
# 本地用户的umask
local_umask=022
# 本地用户的根目录, 虚拟用户目录配置在下面
local_root=/var/www
# @TODO 不理解, 拥有本地用户权限
chroot_local_user=YES
# @TODO 允许chroot写入
allow_writeable_chroot=YES
# @TODO 隐藏ID ?
hide_ids=YES

#################
#  虚拟用户配置 #
#################
# !important: 用户配置目录
# 要自己新建: mkdir -p /etc/vsftp/users_conf
# 假设已经新建用户, 其用户名为user1
# 那么配置完$user_config_dir, vsftpd服务会去查找$user_config_dir/user1文件
# $user_config_dir/user1 这个文件和/etc/vsftpd.conf一样, 所以你可以在这个目录下重新配置每个用户的家目录
# 例如: 希望设置user1的家目录为: /var/www/web_user1
#   创建目录: mkdir -p /var/www/web_user1 
#   编写配置文件($user_config_dir/user1文件是自己新建的):
#         内容为: local_root=/var/www/web_user1
user_config_dir=/etc/vsftpd/users_conf

# PAM服务的名字， 匹配文件: /etc/pam.d/vsftpd
pam_service_name=vsftpd
# @TODO 没有权限用户
nopriv_user=vsftpd
# @TODO 允许访客登陆 不理解
guest_enable=YES
# 访客用户名
guest_username=vsftpd
# 让虚拟用户使用本地用户的权限
virtual_use_local_privs=YES

五.虚拟用户创建与配置

1. 创建目录/etc/vsftpd,用于存放虚拟用户
  - mkdir /etc/vsftpd
1. 运用htpasswd创建虚拟用户和密码
  - Situation 1: 第一次创建虚拟用户文件(/etc/vsftpd/ftpd.passwd)和虚拟用户(user1)
  - htpasswd -cd /etc/vsftpd/ftpd.passwd user1 * Situation 2: 只是添加新的虚拟用户(user1)
  - htpasswd -d /etc/vsftpd/ftpd.passwd user1 * Tips: -c 选项会覆盖文件
1. 创建或覆盖文件: /etc/vsftpd/ftpd.passwd, 写入以下两行
  - auth required pam_pwdfile.so pwdfile /etc/vsftpd/ftpd.passwd
  - account required pam_permit.so
  - # 注: 这将允许使用/ect/vsftpd/ftpd.passwd中的虚拟用户登陆
  - # 并且更重要的是: 禁止本地用户登陆, 比如root等
1. 添加个本地用户给虚拟用户使用, 这些虚拟用户没有权限使用Shell
  - useradd --home /home/vsftpd --gid nogroup -m --shell /bin/false vsftpd
1. 定义每个虚拟用户的访问目录(或叫权限)
  - 涉及/etc/vsftpd.conf中的user_config_dir变量, 它的值为/etc/vsftpd/users_conf
  - 创建 $user_config_dir 目录
  - mkdir /etc/vsftpd/users_conf * 其他请参考四.覆盖VSFTPD配置文件(/etc/vsftpd.conf)中的配置

六.重启VSFTPD服务

service vsftpd restart

七.FAQ

1. 如果没用创建 user conf file (虚拟用户配置文件)
  - 默认根目录为: $local_root, 即/var/www

Django 1.9 Issues

Mon, 11 Jan 2016 00:00:00 +0800

Issue #1 Django MySQLdb

Detail:
- No module named 'MySQLdb'
Solved:
- pip install mysqlclient github

栈应用 - 括号匹配

Sat, 17 Oct 2015 00:00:00 +0800

一、原理

很简单，遇到左括号用栈存起来，遇到右括号就从栈取出一个比较即可.
特殊情况:
- 在栈空的情况下遇到右括号肯定不匹配;
- 在括号扫描结束的情况下，栈不为空，肯定不匹配.

二、步骤

Step 1: 从左到右扫描括号字符串
Step 2: 左括号入栈
Step 3: 判断右括号与栈顶元素是否匹配
- 如果存储左括号的栈空或不匹配，返回false
- 如果匹配出栈，扫描下一个字符
Step 4: 扫描结束后，如果栈不为空，则肯定不匹配

三、实现

int BRACKETS_VALUE[256];

void init() {
    BRACKETS_VALUE['('] = -1; BRACKETS_VALUE[')'] = 1;
    BRACKETS_VALUE['['] = -2; BRACKETS_VALUE[']'] = 2;
    BRACKETS_VALUE['{'] = -3; BRACKETS_VALUE['}'] = 3;
}

/**
 * @Desc 括号匹配
 * @param   s 输入的括号字符串
 * @return  true 括号匹配
 *          false 括号不匹配
 */
bool BracketsMatch(char *s) {
    // 初始化BRACKETS_VALUE, 方便比较左右括号
    // 左括号为负值，右括号为正值
    // 每组括号，左右和为0
    // 用处: 只要查看左右括号和是否为0即可判断是否匹配
    init();
    // 存储左括号的栈
    stack<char> storeLeft;
    // Step 1: 从左到右扫描括号字符串
    for(int i=0; s[i]!='\0'; ++i) {
        // Step 2: 左括号入栈
        if (BRACKETS_VALUE[s[i]] < 0)
            storeLeft.push(s[i]);
        // Step 3: 右括号与栈顶元素是否匹配
        //   如果存储左括号的栈空或不匹配，返回false
        //   如果匹配出栈，扫描下一个字符
        else {
            if (storeLeft.empty() || \
                    BRACKETS_VALUE[s[i]]+BRACKETS_VALUE[storeLeft.top()]!=0)
                // 括号不匹配
                return false;
            storeLeft.pop();
        }
    }
    // Step 4: 栈是否为空 ? 匹配 : 不匹配;
    if (! storeLeft.empty())
        // 括号不匹配
        return false;
    return true;
}

四、实例

地址

栈应用 - 中缀表达式->后缀表达式

Sat, 17 Oct 2015 00:00:00 +0800

一、原理

二、步骤

Step 1: 从左向右开始扫描中缀表达式
Step 2: 如果是数字或字母，直接输出或者存取在其他地方
Step 3: 遇到运算符时, 3 IF
- 若为’(‘或栈空, 入栈;
- 若为’)’, 出栈直到’(‘为止;
- 若为其他, 比较运算符优先级,
  - 如果栈非空并且tmpC<=栈顶元素，栈顶元素出栈；
  - 比较下一个栈顶元素, 直到栈空或左括号;
  - 最后将tmpC入栈.

三、实现

nfixExpression2Postfix(string s) {
    // 用于临时存放操作符的栈
    stack<char> operatorStack;
    
    // Step 1: 从左向右开始扫描中缀表达式
    for (int i=0; i<s.length(); ++i) {
        char tmpChar = s[i];
        // Step 2: 如果是数字或字母，直接输出 或者 存取在其他地方
        if (isAlphaOrNumber(tmpChar)) {
            cout << tmpChar;
            continue;
        }

        // Step 3: 遇到运算符时, 3 IF
        //  若为'('或栈空, 入栈;
        //  若为')', 出栈直到'('为止;
        //  若为其他, 比较运算符优先级, 
        //    [  如果tmpC优先级>栈顶符号优先级，入栈;
        //      否则，从栈顶开始，依次弹出与tmpC比较, 
        //    直到tmp优先级>栈顶元素优先级或者栈空或者遇到一个左括号为止.
        //    优先级: */ > +- > ()]
        //    --> 思想转换: 如果栈非空并且tmpC<=栈顶元素，栈顶元素出栈；
        //                比较下一个栈顶元素, 直到栈空或左括号;
        //                最后将tmpC入栈.
        //    
        // IF 1  
        if (operatorStack.empty() || '(' == tmpChar) {
            operatorStack.push(tmpChar);
            continue;
        }
        // IF 2
        if (')' == tmpChar) {
            while (operatorStack.top() != '(') {
                cout << operatorStack.top();
                operatorStack.pop();
            }
            operatorStack.pop();
            continue;
        } 
        // IF 3
        /*
        if (highPriority(tmpChar, operatorStack.top())) {
            operatorStack.push(tmpChar);
        } else {
            while(! operatorStack.empty() && \
                    ! highPriority(tmpChar, operatorStack.top())) {
                cout << operatorStack.top();
                operatorStack.pop();
            }
            operatorStack.push(tmpChar);
        }*/
        while (! operatorStack.empty() && \
        // highPriority(a, b)
        //  如果a优先级高于b, true; 否则, false
                !highPriority(tmpChar, operatorStack.top())) {
            cout << operatorStack.top();
            operatorStack.pop();
        }
        operatorStack.push(tmpChar);
    }
    
    // Step 4: 当扫描的中缀表达式结束时，栈中的所有运算符依次输出加入后缀表达式
    while (! operatorStack.empty()) {
        cout << operatorStack.top();
        operatorStack.pop();
    }

    cout << endl;
}

四、实例

例子

数据结构中的逻辑结构与物理结构

Thu, 08 Oct 2015 00:00:00 +0800

一、理解(重点)

比如数据结构中的树的存储
- 逻辑结构: 很形象啊，在你脑海里不就是一棵树吗?
- 物理结构: 这棵树在物理内存中可以用数组存储(顺序存储), 也可以在内存中用链表存储(链式存储);

二、课本原理

逻辑结构:
- 指数据元素之间的逻辑关系;
物理结构:
- 指数据结构在计算机中的表示(又称映像);
这里讲的不错，不妨看看

三、类型

(1)逻辑结构

1)集合结构
- 数据元素之间无序, 例如大圆圈里许多互不相干的小圆圈;
2)线性结构
- 一对一, 例如数组;
3)树形结构
- 一对多, 例如数据结构中的树;
4)图形结构
- 多对多, 例如数据结构中的图;

(2)物理结构(又称存储结构)

1) 顺序存储
2) 链式存储
注意: 存储结构与存储方式相区别:
- 存取方式包括顺序存取、随机存取;

分治算法(Divide And Conquer Method)

Thu, 08 Oct 2015 00:00:00 +0800

重要性

要我说呢，这是算法中基础中的基础，但并不是不重要，相反，非常重要，而且有一定理解难度，至少对初学者，或者我来说，完全理解并灵活运用，绝非易事。
所以，这个分治法(Divide-And-Conquer-Method)得反复看.尤其是递归的时候，必须反思反思分治法.

一、基本思路

1.将问题的实例分为几个较小的实例，最好具有相等规模(事实上,一般说分为2个实例居多，并且注意是递归的分.);
2.对这些较小的实例求解(一般使用递归的方法, 但在问题规模足够小的时候也可以采用另一个算法(停止递归));
3.如果有必要的话，合并这些较小问题的解，以得到原始问题的解.(事实上, 一个分支算法的精华就在于合并解的过程).

二、分析: `T(n) = aT(n/b) + f(n)`

大多数都是规模规模为n的问题，被规划为2个规模为n/2的问题.
一般情况下:
- 一个规模为n的实例可以被划分为b个规模为n/b的实例, 其中a个实例是需要求解的.
- 递推式: T(n) = aT(n/b) + f(n)
- T(n): 原始问题的解法;
- n: 原始问题的规模, 与b区别;
- a: a个实例, 一般等于n/b;
- b: 原始问题划分成小问题后, 每个问题的最小实例的规模;
- f(n): 表示将求解得到的a个子问题的解合并起来所需要的时间复杂度.
对于«分治法»中主定理的理解, 得慢慢消化;

三、适用情况

有点类是标题二的文字版
能用分治法解决的问题T(n)的4个特征:
- 1)该问题的规模缩小到一定程度b可以很容易解决T(n/b)(类似数学归纳法第一步)
- 2)该问题可以分解为若干(a个实例)规模较小(规模为b)的相同问题, 即该问题具有最优子结构性质(T(n) ~= aT(n/b));
- 3)利用该问题费解出的子问题就可以合并为该问题的解(T(n) = aT(b/n) + f(n));
- 4)该问题分解出的各个子问题T(n/b)是相互独立的, 即子问题之间不包含公共的子问题.
分析:
- 每个特征都是下一个特征的前提, 呈上下属关系;
- 第二个特征是应用分治法的前提, 反应在递归思想的运用;
- 第三个特征是关键, 能否利用分治法完全取决于问题是否具有第三个特征;
  - 如果具备了第一、二个特征，而不具备第三个特征，可以考虑贪心法或者动态规划法;
- 第四个特征设计到算法效率
  - 如果各个子问题是不独立的则分治法要做许多不必要的工作，重复地解公共的子问题(递归计算的诟病)，此时虽然可以用分治法，但一般使用动态规划法较好.

四、分治法的基本步骤

根据前两个标题的讲述，分治法在每一层递归上有三个步骤:
- Step 1 分解: 将原问题T(n)分解为若干(a个)规模(为b)较小，相互独立，与原问题相同形式的子问题T(n/b);
- Step 2 解决: 若子问题规模较小而容易被解决，则直接解，否则递归解决各个子问题; (递归的递归)
- Step 3 合并: 将各个子问题的解合并为原来问题的解: T(n)=aT(n/b)+f(n);

五、设计模式

Divide-and-Conquer(P)
- 1) if P <= n0 // P 表示问题P的规模, n0为阈值
- 2) then return (ADHOC(P))
- 3) 将P分解为较小规模的子问题P1, P2,…, Pk
- 4) for I = 1 -> k
- 5) do answerI <- Divide-and-Conquer(Pi); // 递归解决子问题Pi=T(b/n)
- 6) T <- MERGE(answer1, answer2,…, answerk); // 合并子问题T(n)=aT(n/b)+f(n)
- 7) return (T)
分析:
- 1): 表示当问题规模足够小到不超过n0是，问题已经容易直接解出，不必再继续分解.
- 2): ADHOC(P)是该分治算法中的基本子算法，用于独立地、直接地解决小规模的问题.
- 6): 算法MERGE(answer1,…,answerk)是原问题P的各个子问题的合并算法.

六、复杂性分析

一个分治法将规模为n的问题分成a个规模为n/b的子问题去解;
设费解阈值n0=1, 且adhoc解规模为1的问题耗时1个单位时间;
再设将原问题分解为k个子问题以及用merge将a个子问题的解合并为原问题的解所需要f(n)个单位时间;
用T(n)表示该分支算法解规模为 P =n的问题所需要的计算时间, 则有:
- T(n) = aT(n/b) + f(n)
通过迭代法求得方程的解:
- 递归方程及其解只给出n等于b的方幂时T(n)的值, 但是如果认为T(n)足够平滑, 那么由n等于b的方幂时T(n)的值可以估计T(n)的增长速度.通常嘉定T(n)是单调上升的，从而当bi <= n <= bi+1时，T(bi) <= T(n) <= T(bi+1).

七、经典问题案例:

(1) [二分搜索]/2015/10/05/one-out-of-eight-kinds-of-algorithm-1-1-halfinsertsort.html)(又称折半查找法)
(2) 大乘数法
(3) Strassen矩阵乘法
(4) 棋盘覆盖
(5) 合并排序
(6) 快速排序
(7) 线性时间选择
(8) 最接近点对问题
(9) 循环赛日程表
(10) 汉诺塔

八、总结

依据分治法设计程序时的思维过程
- 实际上类似于数学归纳法，眨动解决问题的求解方程公式，然后根据方程公式设计递归程序.
  - 1、一定是先找到最小问题规模时的求解方法;
  - 2、然后考虑随着问题规模增大时的求解方法;
  - 3、找到求解的递归函数式后(各种规模或因子)，实际递归程序即可.

    整篇说了这么多，无不是在重复分治法这一思想，为的是说明分治法真的很重要!
            分治法, 很重要!
            分治法, 很重要!
            分治法, 很重要!
            Divide-And-Conquer-Method ! important;

参考

八种排序算法之7 归并排序(Merge Sort)

Mon, 05 Oct 2015 00:00:00 +0800

一、基本思想

归并排序依赖于递归合并操作, 即将一个数组递归分成两个子数组并分别进行排序,，然后将这两个有序数组排序.

二、基础: `合并两个有序列表`

合并有序数列的效率
- O(n)
步骤:
- 1.申请空间，使其大小为两个已经排序序列之和，然后将待排序数组复制到该数组中.
- 2.设定两个指针，最初位置分别为两个已经排序序列的起始位置
- 3.比较复制数组中两个指针所指向的元素，选择相对小的元素放入到原始待排序数组中，并移动指针到下一位置
- 4.重复步骤3直到某一指针达到序列尾.
- 5.将另一序列剩下的所有元素直接复制到原始数组末尾

/**
 * @desc 合并两个有序数组a和b到数组c, 其中c的长度为a和b长度之和.
 * @param a[]   有序数组a;
 * @param n     有序数组a的长度;
 * @param b[]   有序数组b;
 * @param m     有序数组b的长度;
 * @param c     长度等于n+m的用于存放有序列表的数组
 * @return 
 */
void MergeTwoOrderedArray(int a[], int n, int b[], int m, int c[]) {
    int i, j, k;

    // i: 循环a
    // j: 循环b
    // k: 循环c
    i = j = k = 0;
    // 从小到大排序
    // 1.两个数组逐位比较，谁小去谁, 取了以后iushanchu数列中的这个数,
    //  直到a和b中有一个有序数组为空;
    // 2.当一个数组为空时，另一个数组依然是有序的
    //  由于剩下的数组有序，则直接添加到c的末尾即可.
    while (i<n && j<m) {
        // 谁小谁NB
        if (a[i] < b[j]) {
            c[k++] = a[i++];
        } else {
            c[k++] = b[j++];
        }
    }

    // 这里两个while循环实际上只有一个进行
    // 不确定的情况下，只是为了正确性多写点代码，无他
    //  i是循环a剩下的，如果i==n, 说明a数组用完了，只有b数组的循环会进行;
    // 反之, j与b亦然.
    while (i<n)
        c[k++] = a[i++];
    while (j<m)
        c[k++] = b[j++];
}

三、解题方法

/**
 * @desc 合并一个前半部分有序，后半部分有序，但总体无序的数组.
 *      类似合并连个有序序列.
 * @param array     待排序数组
 * @param first     待排序起始位置
 * @param mid       待排序中间位置
 * @param last      待排序结束位置
 * @param tmp       存放array有序数据的临时数组
 * @return
 */
void MergeArray(int array[], int first, int mid, int last, int tmp[]) {
    int i=first, j=mid+1;
    int n=mid, m=last;
    int k = 0;
    while (i<=n && j<=m) {
        if (array[i] < array[j])
            tmp[k++] = array[i++];
        else
            tmp[k++] = array[j++];
    }

    while (i<=n)
        tmp[k++] = array[i++];
    while (j<=m)
        tmp[k++] = array[j++];

    for (i=0; i<k; i++)
        array[first + i] = tmp[i];
}

/**
 * @desc 归并排序的关键操作: 递归分解数组，然后合并
 * 
 * @param array     待排序数组
 * @param first     待排序起始位置
 * @param last      待排序结束位置
 * @param tmp       存放array有序数据的临时数组
 * @return 
 */
void divideAndMerge(int array[], int first, int last, int tmp[]) {
    if (first < last) {
        int mid = (first + last) / 2;
        // 一般只分左右两边递归
        divideAndMerge(array, first, mid, tmp); // 左边有序
        divideAndMerge(array, mid+1, last, tmp); // 右边有序
        // 将左右两个有序序列合并
        MergeArray(array, first, mid, last, tmp); // 再将两个有序数列合并
    }
}

/*
 * @desc 合并排序
 *
 * @param array     待归并排序的数组
 * @param len       数组长度
 */
bool MergeSort(int array[], int len) {
    int *p = new int[len];
    if (p == NULL)
        return false;
    divideAndMerge(array, 0, len-1, p);
    delete[] p;
    return true;
}

四、总结

掌握分治法、两个有序序列的合并 => 归并排序.

五、参考

八种排序算法之6 堆排序(Heap Sort)

Mon, 05 Oct 2015 00:00:00 +0800

一、基本思想

先堆化，然后利用堆的性质排序.
- 最大堆: 根节点最大
- 最小堆: 根节点最小

二、基础: 堆(Heap)

(1)二叉堆(一般简称堆)的定义

二叉堆是完全二叉树或者近似完全二叉树(只能有最后一个节点不完全)
二叉堆2个特性:
- a.父结点的键值总是大于或等于(最大堆)/小于或等于(最小堆)任何一个子结点的键值.
- b.每个节点节点的左子树和右子树都是一个二叉堆(最大堆/最小堆).
类型:
- 最大堆: 父结点的值总是大于或等于任何一个子结点的值.
- 最小堆: 父结点的值总是小于或等于任何一个子结点的值.

(2)堆的存储 (堆一般就指二叉堆)

存储类型:
- 一般用数组存储堆.
结点位置关系: 假设当前节点索引为i
- 其父结点: (i-1)/2 (根节点没有父结点，或者认为根节点的父结点就是它本身.)
- 其子结点(2个): 2i+1 和 2i+2.

(3)堆的操作 – 插入与删除

注意: 堆的操作都是为了重新将非堆数组调整回堆.

$1 插入操作(从底部向顶部调整)

只需要将插入子结点与它的父结点逐级向上调整即可.
- 因为如果存在左子结点，那么堆本身的父结点就比左结点小(最小堆)或者大(最大堆)

/* 最小堆的插入操作的上调整
 * array: 存放堆的数组，简称堆
 * child_id: 新加入的子结点，也就是有效数组的最后一个节点
 * parent_id: 子结点child_id的父结点
 * */
void MinHeapFixup(int array[], int child_id) {
    // 计算子结点child_id的父结点
    int parent_id = (child_id - 1) / 2;

    // 如果子结点为父结点，即这个堆只有一个节点，不用插入了
    // 如果子结点的父结点小于0, 说明该子节点child_id已经是父结点，和上一条重复了
    // 所以实际上只要一个条件: parent_id >= 0
    while (child_id != 0 && parent_id >= 0) {
        // 原来的堆本来是完整的，所以如果插入的子结点的值
        //   如果比它的父结点大于或等于, 说明现在的堆仍然是完整的.
        if (array[parent_id] <= array[child_id])
            break;
        //   如果比它的父结点小，则发生调整，交换即可构成堆.
        Swap(array[parent_id], array[child_id]);
        // 只有发生调整时才要逐级调整
        // 现在从要调整的"新子结点"为原来的父结点
        child_id = parent_id;
        // 然后查找"新子结点"的父结点
        parent_id = (child_id - 1)/2;
    }
}

/*
 * @description 堆的插入操作
 *
 * @param array 存放数组的堆，简称堆
 * @param len   原数组的有效长度
 * @insertChild 插入子结点的值
 * @return 
 * */
void MinHeapAddNumber(int array[], int len, int insertChild) {
    // 插入子结点到数组'末尾'
    array[len] = insertChild;
    // 重新自底向上调整堆
    MinHeapFixup(array, len);
}

$2 删除操作(从顶部向底部调整)

需要父结点在子结点中找出较小或较大者逐级向下比较

/**
 * @desc 堆删除操作后的从节点
 *      堆化调整的时候是从parentId节点开始自顶向下直到树叶节点(即没有子结点的节点)的.
 * 
 * @param array 堆数组
 * @param len 删除根节点后的堆数组的长度, 此时原来的最后一个子结点已经是现在的根节点，不能算堆，所以要重新调整.
 * @param parent_id 根节点, 从parent_id节点开始向下调整
 */
void MinHeapFixdown(int array[], int len, int parentId) {
    // 理论上的左右两个子结点，不一定存在，还得和数组长度len作比较.
    int leftChildId = 2 * parentId + 1;
    // int rightChildId = 2 * parentId + 2;
    int rightChildId = leftChildId + 1;
    // 等待和父结点比较的节点的ID
    int exchangeId;

    // 最后一个节点ID: len-1 (数组长度为len, 数组下标从0开始)
    //   如果leftChildId<len, 也即leftChildId<=len-1,
    // 则说明左子结点存在, 此时右子结点还不确定
    while (leftChildId < len) {
        // 默认要要与父结点交换的结点是左子结点
        exchangeId = leftChildId;
        // 右子结点=leftChildId+1, 如果存在
        // 并且小于leftChildId的值，说明右子结点更小，要和根节点换.
        if (rightChildId < len && array[rightChildId] < array[leftChildId])
            exchangeId  = rightChildId;
        // 确定父结点是否要和子结点交换构成堆
        // (最小堆)如果较小的子结点比父结点大，说明已经是堆了
        if (array[exchangeId] > array[parentId])
            break;
        // 父结点和较小的节点交换
        Swap(array[parentId], array[exchangeId]);
        // 更新需要调整的"新根节点"和它的左右子结点
        parentId = exchangeId;
        leftChildId = 2 * parentId + 1;
        rightChildId = leftChildId + 1;
    }
}

/* 
 * @desc 堆删除操作后的自顶向下调整 - 去掉没用的中间变量
 *   是 MinHeapFixdown 的简化
 * */
void MinHeapFixdown__(int array[], int len, int parentId) {
    // 要和父结点交换的子结点ID: childId, 默认是左结点
    int childId = 2 * parentId + 1;
    while (childId < len) {
        // 是否存在右节点，并且右节点是否小于左结点
        // 如果满足，更新需要和父结点交换的ID: childId
        if (childId+1 < len && array[childId+1] < array[childId])
            childId++;
        // 确定父结点是否要和子结点交换构成堆
        // (最小堆)如果较小的子结点比父结点大，说明已经是堆了
        if (array[childId] > array[parentId])
            break;
        cout << array[parentId] << " " << array[childId] << endl;
        Swap(array[parentId], array[childId]);
        parentId = childId;
        childId = 2 * parentId + 1;
    }
}

void MinHeapDeleteNumber(int array[], int len) {
    Swap(array[0], array[len-1]);
    MinHeapFixdown__(array, len-1, 0);
}

(4)堆化数组

从最后一个带子结点的节点开始向上堆化调整

void MinHeapSort(int array[], int len) {
    // 在排序前必须进行堆化数组, 构成堆以后再继续从最后一个节点开始修正
    MakeMinHeap(array, len);
    // 每次将堆的根节点(最小)放在数组相对最后面, 构成递减序列
    // 而将根节点放在相对最后面用的是:
    //     根节点和相对最后一个元素然交换, 就相当于堆的删除操作(后重新构成堆)，但并非真的删除.
    for (int i=len-1; i>=1; i--) {
        Swap(array[i], array[0]);
        MinHeapFixdown__(array, i, 0);
        // cout << "每次堆化后根节点: " << array[0] << endl;
    }
}

四、总结

关键是理解: 堆操作(插入和删除) 和 堆化操作 => 堆排序.

五、参考

八种排序算法之5 选择排序(Select Sort)

Mon, 05 Oct 2015 00:00:00 +0800

一、基本思想

选择排序和冒泡排序是差不多的一种排序.
和冒泡选择不一样的的是, 选择排序只有在确定了最小(或最大)的数据之后，才会发生交换.

二、基础

冒泡排序

三、解题方法

/**
 * array : 数组
 * len : 数组长度
 */
void SelectSort(int array[], int len) {
    // 当前的值最小的数组下标
    int min_id;
    // 长度len的数组，排序len-1次交换就行了
    // 每次只有最小的排到相对最前面
    // i 刚好存放每次相对最小的数, 也就是要交换的数
    for (int i=0; i<len-1; ++i) {
        // 默认假设最后一个(len-1)数是最小的数
        min_id = len - 1;
        // 每次从a[i...len-1]找出相对最小值的下标只需要len-i+1步
        //
        // 这个循环就是和冒泡排序的唯一区别
        /* 
         * 冒泡排序     选择排序
         * * * * * * * * * * * *
         * 每次都交换   只有找到最小值的时候交换
         * */
        //
        for (int j=len-2; j>=i; j--) {
            // 比较出较小值
            if (array[min_id] > array[j]) {
                min_id = j;
            }
        }
        cout << "Min[" << i+1 << "]: " << array[min_id] << endl;
        // 每次和a[i]交换，a[i]此时就是相对最小值，本轮结束
        Swap(array[i], array[min_id]);
    }
}

四、总结

    与冒泡排序的唯一区别就是，只有在找到相对最小值的时候才发生交换.

五、参考

八种排序算法之4 快速排序(Quick Sort)

Mon, 05 Oct 2015 00:00:00 +0800

一、基本思想

(挖坑填数 + 分治法(Divide and Conquer Method))
1、先从数列中取出一个数作为基准数
2、分区过程，将比这个数大或者等于的数全放到它右边，小它的数全部放到它的左边
3、再对左右区间重复第二步，知道各区间只有一个数.

复杂度

时间复杂度
- O(NlogN), 效率较高

二、基础: 分治法

分治法(Divide And Conquer Method)
待续: 独立一篇文章写写
写好了: 分治法

三、解题方法

(1)调整数组: 挖坑填数思想

/* 挖坑填数部分: (其实只是一轮左小右大的排序, 调整数组, 确定基准数作为相对中间数)
     1. i=left, j=right; 将基准数middle(=a[i])挖出形成第一个坑a[i]
     2. 找小: j--由后往前找比它小的数，找到后挖出此数a[j]填到前一个坑a[i]中, 此时新坑是a[j];
     3. 找大: i++由前往后找比它大的数, 找到后挖出次数a[i]填到前一个坑a[j]中, 此时新坑是a[i];
     4. 再从夫执行2, 3步骤知道i==j, 然后将基准数填入a[i]中.
*/
/*
 * Array: 数组
 * left: 希望被排序的起始位置
 * right: 希望被排序的末尾位置
 * 因此: left和right可对数组部分调整
 * 当left=0 且 right=len-1时，则是对整个数组Array调整.
 *  该函数有两个作用:
 *      1.一轮下来，将数组分为左小右大两部分，自然基准数就是相对中间数了, 接下来只要分别对左右两半分别继续调整即可
 *      2.返回基准数最终存放的位置, 为的是区分左右两半部分
 * */
int AdjustArray(int array[], int left, int right) {
    int i=left, j=right;
    // 基数middle(=a[i]=a[left]确定, 第一个坑a[i]挖好
    int middle = array[i]; /* 选择左边第一个数作为基准数 */
    while (i < j) {
        // 从右到左找小, 要填到左边坑a[i]中
        // 注意条件: array[j]大于等于middle
        while (i<j && array[j] >= middle)
            j--;
        // 找到比基准数小的a[j]
        if (i < j) {
            array[i] = array[j]; // 此时坑a[i]已经填上a[j], a[j]为新坑
            i++; // 因为当前a[i]位置的值a[j], 是和基准数middle比较过的，所以只需要从i的下一位开始
        }

        // 从左往右找大, 要填到右边坑a[j]中
        while (i<j && array[i] < middle)
            i++;
        // 找到比基准数大的a[i]
        if (i < j) {
            array[j] = array[i]; // 此时坑a[j]已经填上a[j], a[i]为新坑
            j--; // 因为a[j]位置的值a[i], 已经和基准数比较，所以只需要从j的下一位开始
        }
    }

    array[i] = middle;
    return i;
}

/*
 * Array: 数组
 * left: 希望被排序的起始位置
 * right: 希望被排序的末尾位置
 * 因此: left和right可对数组部分排序
 * 当left=0 且 right=len-1时，则是对整个数组Array排序.
 * */
void QuickSort(int array[], int left, int right) {
    // 只有当数组范围大于1的时候才进行调整
    // 否则，单个元素本身就是有序，无需调整
    if (left < right) {
        // 一轮调整, i左边的都比a[i]小, i右边的都比a[i]大
        // i 为基准数一轮后存放的位置
        int i = AdjustArray(array, left, right);
        // 分治
        // 由于i左边, 即left->i-1, 都比a[i]小但是顺序不确定, 以同样的方法调整左小右大两部分,但缩小范围, 只左边
        QuickSort(array, left, i-1);
        // 由于i右边, 即i+1->right, 都比a[i]大但无序, 以用样方法调整成左小右大两部分,但范围只有右半部分
        QuickSort(array, i+1, right);
    }
}

(2)调整数组: 交换位置思想

/*
    由于右边的坑总是填左边的坑，也就是相当于先找到右边的坑，然后找到左边的坑，接着相互交换位置，然后重复这一步即可
*/
int AdjustArrayEmiddlechange(int array[], int left, int right) {
    int i=left, j=right;
    // 基准数middle
    int middle = array[i];
    while (i < j) {
        // 从右往左，直到找到比基准数middle小的数
        while (i<j && array[j]>=middle) 
            j--;
        // 由于第一个i是基准数middle的位置, 已经确定
        // 所以在找出右边的坑j后立即交换
        // 然后再更新左边的坑i
        Swap(array[j], array[i]);

        // 新一个左边的坑i
        // 从左往右，知道找到比基准数middle大或者等于的数
        while (i<j && array[i]<middle) 
            i++;
    }
    array[i] = middle;
    return i;
}

(3)调整数组: 交换位置思想二

/*
    由于基本原理:(middle为基准数, i左, j右)
        a[i] >= middle, 放在右边
        a[j] <  middle, 放在左边
    为什么这么分呢?
        因为往往基准数是选择左边的第一个元素, 
        正是因为此时基准数已经是左边的第一个元素，
        所以它只能往右放, 所以是a[i]等于middle时也放在右边
        (由此，如果你选择的基准数是右边第一个元素，那么a[j]等于middle时应该放在左边, 也即a[i]>middle, 放右边; a[j]<=middle放左边.)
    
    由基本原理, 即使选择左边第一个元素作为基准数，i=left, j=right, 不妨假设左边第一个元素并不知晓，只是从数组中选择了一个基准数, 然后从头开始，先找出左边的第一个坑i, 再找出右边的第一个坑j, 然后交换.
    (与上一个交换唯一不同的就是: `默认第一个i未知`)
*/
int AdjustArrayExchange2(int array[], int left, int right) {
    int i=left, j=right;
    int middle = array[i];
    while (i < j) {
        while (i<j && array[i]<middle) i++;
        while (i<j && array[j]>=middle) j--;
        Swap(array[i], array[j]);
    }
    array[i] = middle;
    return i;
}

(4)将两个函数合并成一个

void QuickSort(int array[], int left, int right) {
    int i=left, j=right;
    int middle = array[i];
    if (i < j) {
        while (i < j) {
            while (i<j && array[i]<middle) i++;
            while (i<j && array[j]>=middle) j--;
            Swap(array[i], array[j]);
        }
        array[i] = middle;
        QuickSort(array, left, i-1);
        QuickSort(array, i+1, right);
    }
}

四、总结

    挖坑思想是是关键，从挖坑法想到交换法, 分治基础不可少, 快速搞定.

五、参考

八种排序算法之3 冒泡排序(Bubble Sort)

Mon, 05 Oct 2015 00:00:00 +0800

一、基本思想

由字面意思:
- 鱼儿吐泡般，将轻的泡往上浮, i个泡总共需要i-1轮
- j从len-1(最后一个元素)到每次都有一个相对最轻的泡到相对顶部
- 这个过程隐含将重的泡往下挤, 直到所有轻的泡都浮在重的泡上面
完全相反的方法:
- 相对于轻的泡上浮，相反的思路是重的泡下沉.

二、基础

三、解题方法

(1)轻泡上浮

// 轻泡上浮法
void BubbleSort(int array[], int len) {
    // 总共len个元素，每轮有一个元素到达相对顶部，那么至少冒泡len-1轮
    // i+1正好表示第几轮
    // i+1正好表示冒泡后顶部第i+1个元素a[i], 此时a[i]是相对最小的
    for (int i=0; i<len-1; ++i) {
        // 从当前最后一个元素开始冒泡, 轻泡上浮最上
        // 当前最后一个元素是a[i]=a[j]
        // 然后不断比较j(后)和j-1(前)
        //      如果满足a[j]<a[j-1], 说明后一个元素比前一个元素轻，应该将气泡上浮
        //      否则说明前一个(上面)的气泡更轻，不用移动
        //   然后j=j-1, 即上浮后的元素再跟它前一个元素比较，直到j=i+1, 也即到相对的第一个元素
        //   每一轮都会使一个相对最小的元素上浮到顶部(此时的最顶部是j-1=i)
        // 然后进入下一轮i
        for (int j=len-1; j>i; --j)
            if (array[j] < array[j-1])
                Swap(array[j], array[j-1]);

        cout << "第 " << i+1 << " 轮排序第" << i+1 << "个元素: " << array[i] << endl;
        display(array, len);
    }
}

(2)重泡下沉

// 重泡下沉法
void BubbleSortDown(int array[], int len) {
    // 总共len-1轮
    for (int i=0; i<len-1; ++i) {
        // 该步是和 轻泡上浮法 的关键区别
        // 每一轮有一个最重的泡到相对最底部(与轻泡上浮每次一个最轻到泡到相对最顶部)
        // 每次都是从第一个元素j=0开始，直到j=len-1-i+1, 因为每一步步是j和j+1, 最后异步步j=len-i-1 + 1时, j+1=len-1-i是相对最后一个元素
        for (int j=0; j<len-i-1; ++j) {
            if (array[j] > array[j+1])
                Swap(array[j], array[j+1]);
        }
    }
}

四、总结

重点理解总共需要len-1轮, 而每一轮是内部全比较(除了上一轮的最轻元素，它已经在最顶部)，浮出相对最轻气泡.
这里所有的｀相对最轻、相对最重、相对顶部等里的相对`
- 是指: 每一轮和上一轮找到上浮最轻的元素到顶部或者下沉最重的元素到顶部后，剩下的元素之间比较，浮出此时的最轻或下沉此时的最重.

五、参考

维基百科-冒泡排序(下沉法)

八种排序算法之2 希尔排序(Shell Sort)

Mon, 05 Oct 2015 00:00:00 +0800

一、基本思想

希尔排序是插入排序的一种改进算法, 是非稳定排序.

    先将整个代拍元素序列分割成若干个子序列(由相隔某个"增量"的元素组成的)分别进行直接插入排序, 
    然后一次缩减增量再进行排序，
    待整个序列中的元素基本有序(增量足够小)时, 再对全体元素进行一次直接插入排序;
    (因为直接插入排序在元素基本有序的情况下(接近最好情况), 效率是很高的，因此希尔排序在时间效率上，比直接插入排序要好很多.)

二、基础

直接插入排序

三、解题方法

void ShellSort(int array[], int len) {
    int gap, i, j;
    int temp;
    // 用gap分分组, 分组gap个组
    for (gap=len/2; gap>0; gap/=2) {
        // 每组进行直接插入排序, 每组相邻元素相差gap个元素
        // i从gap到len-1, 然后从后往前进行插入排序
        // 为什么不是i从0到gap-1呢，因为如果数组array是基数，这样就无法获取到最后一个元素，i从gap到len-1则可以，无论什么情况，数组最好一个元素是a[len-1]
        // 
        // 与普通直接插入排序(步长为1)的区别是，每组元素其实相差gap个单位(步长为gap)
        //  普通: a[1], a[2], a[3], [a4] a[5] a[6] a[7] a[8] a[9]
        //  希尔排序中(假设第一步步长为3):
        //      第一步(步长: 3):
        //          a[0] a[3] a[6]
        //          a[1] a[4] a[7]
        //          a[2] a[5] a[8]
        //          a[9] 
        //          (分组进行直接插入排序)
        //      第二步(步长: 3/2=1) (步长等于1(>0)最后一步, 相当于普通插入排序):
        //          a[0] a[1] a[2] a[3] a[4] a[5] a[6] a[7] a[8] a[9]
        for (i=gap; i<len; i++) {
            // 最后一个无序变量
            temp = array[i];
            // 插入到前面i/gap个元素的有序列表中, 变成i/gap+1个元素的有序列表
            // 如果 gap = 1, 则是最后一步，也就是整个数组直接插入排序
            for (j=i-gap; j>0 && temp<array[j]; j-=gap)
                array[j+gap] = array[j];
            array[j+gap] = temp;
        }
    }
}

四、总结

    希尔排序其实就是分gap次(2^gap<=len), 每次new_gap(=gap, gap/=2)个分组的直接插入排序,最终new_gap=1时，就是最直接的直接插入排序.

参考

八种排序算法之1-2 折半插入排序(Binary Insert Sort)

Mon, 05 Oct 2015 00:00:00 +0800

一、基本思想

在直接插入排序的基础上，与其通过从后往前一一比较(或比较交换交换), 折半插入排序则利用折半查找(BinarySearch)的(low, high)确定带插入的数字的位置hight+1，是比middle小(左半部分)还是大(右半部分)

二、基础: 折半查找法+直接插入排序

// 折半查找(BinarySearch)
bool BinarySearch(int a[], int n, int value) {
    // 标记元素:
    //      low: "第一个"元素下标
    //      high: "最后一个"元素下标
    //      middle: low和high中间的元素下标(low + high)/2
    int low=0, high=n-1, middle;

    // 注意条件: low 小于等于 high
    //  Why:
    //      假设数组a共两个元素(0, 1), 那么low=0, high=1,
    //          如果BinarySearch查找0, middle=(low+high)/2=0, a[middle]==0, 找到;
    //          如果BinarySearch查找1, middle=(low+high)/2=0, a[middle] < 1, 这时low=middle + 1 = 1, 也即low==high, 新middle=1, a[middle]==1, 找到.
    while(low <= high) {
        middle = (low + high) / 2;
        if (value < a[middle]) {
            // 如果待查找的值value小于中间值，
            //  则说明value在low->middle-1之间, 也就是左半部分(假设low左, hight右);
            //      (middle-1, 是因为middle已经不等于value, 没有必要了)
            //  则更新high = middle - 1, 继续循环
            high = middle - 1;
        } else if (value > a[middle]) {
            // 如果待查找的值value大于中间值,
            //  则说明value在middle+1->high之间, 也就是右半部分
            //  更新low = middle + 1, 继续循环
            low = middle + 1;
        } else {
            // 待查找的值等于中间值a[middle], 找到
            cout << "序号: " << middle << endl;
            return true;
        }
    }
    // 查找完整个数组，并未找到待查找的值value
    return false;
}

三、解题方法

void BinaryInsertSort(int a[], int n) {
    for (int i=1; i<n; ++i) {
        int guard = a[i];
        int low = 0, high = h-1, middle;

        // 已知哨兵应该插入的位置是high+1, 
        //  利用折半查找确定high这个位置
        while (low <= high) {
            middle = (low + high) / 2;
            if (guard < a[middle])
                high = middle - 1;
            else
                low  = middle + 1;
        }

        // 找到存放哨兵guard值(其实是a[i]的值)的位置: high + 1
        // 那么将a[high+1...i-1]后移一位 -> a[high+2...i]
        // 再将guard插入a[high+1]
        // 因为guard是a[i], 所以不会存在溢出或覆盖问题
        for (int j=i-1; j>high; j--)
            a[j+1] = a[j];

        // 插入guard
        a[high + 1] = guard;
    }
}

四、总结

折半插入排序，相比于直接插入排序的优势就在于
    通过`折半查找(BinarySearch)`快速找到插入点high+1, 
    比直接插入排序从后往前一一对比(或交换)快得多

八种排序算法之1 直接插入排序(StraightInsertSort)

Sun, 04 Oct 2015 00:00:00 +0800

一、基本思想

每次将一个待排序的记录a[i]，插入到前面已经排好序的子序列a[0…i-1]中的适当位置, 知道全部记录插入完成为止(i==n为止).

复杂度

时间复杂度:
- O(n^2)
空间复杂度:
- O(1)

二、基础: 有序列表插入单个元素

/*
 * 这里: a[0...n-2]为有序元素, a[n-1]为无序的
 * Why:
 *    将value插入到a[0...m-1], 
 *    如果n-2=m-1的话, 就是value插入到a[0...n-2],
 *    很明显，
 *      最终的元素个数: n个(a[0...n-1]), 
 *          (n = n-1(a[0-n-1]的元素) + 1(待插入的元素)) 
 *    其实也就是就是其实是将a[n-1]插入到有序列表a[0...n-2]中, 
 *
 *  现在将一个元素value插入到a[0..m-1] (n = m + 1)
 *   等价于
 *  将a[n-1]插入到a[0...n-2]中
 *
 * 求解步骤:(默认: 从小到大)
 *  Step 1: 令j = n-1 -> 0 (n个元素) (如果j=n->0, 说明有n+1个元素)
 *  step 2:
 *      如果 a[j] > a[j-1], 说明a[0...j]已经是有序的 (a[0...j-1]是有序的), 跳出;
 *      如果 a[j] < a[j-1], 也就是a[j]比a[j-1]小, 说明a[j]应该排在a[j-1]前面, 那么交换a[j]和a[j-1];
 *
 * */
void SortedListInsertElement(int a[], int n) {
    // 总共n个元素：0 -> n-1, a[n-1]是最后一个元素
    // a[n-1]为乱序，a[0...n-2]为有序
    for (int j=n-1; j>0; j--) {
        if (a[j] < a[j-1])
            swap(a[j], a[j-1]);
    }
}

三、解题方法

(1)、循环法(默认从小到大排序)

设数组为a[0…n-1]
- Step 1: 初始时, a[0]自成1个有序子序列, 无序区为a[i…n-1].令i=1
- Step 2: (有序列表插入一个元素)将a[i]插入当前有序子序列a[0…i-1]中，形成a[0…i]的有序子序列;此时无序区为a[i+1…n-1], i=i+1, 执行第三步
- Step 3: 循环重复第二步,知道i==n-1,排序完成

/* 以下两个有序列表插入元素的方法 */

/**
  有序列表插入元素1:
    将a[i]插入已经排好序的序列a[0...i-1]中，形成有序的a[0...i]
        start = 0; // 默认第一个元素
        end = i - 1; // a[0...i-1]中的最后一个元素a[i-1]的下标
        wait = i; // 等待插入的元素
*/
void insertAndSort(int a[], int start, int end, int wait) {
    // 在 j 从 end -> start 中
    for (int j=end; j>=start; j--)
        // 如果 a[wait] 大于 a[j], 那么对于有序列表来说j前面的都比wait小，
        // j是比wait小的最后一位,
        // 也就是wait前(0...j)都比wait小，wait后(j+1...n-1)都比wait大, 
        // (从小到大排序)说明wait应该排在j后面以为,也就是j+1位,
        // 但是前提要先把j+1到end后移一位
        if (a[wait] > a[j])
            break;

    // 将j+1到end后移一位
    for (int k=end; k>j; k++)
        a[k+1] = a[k];

    // wait排在j后面一位
    a[j+1] = a[wait];
}


/*
  有序列表插入元素2:
    1.假设有序列表a原来有m-1个元素(0...m-2), 插入一个元素x以后，最终有m个元素(0...m-1); 
    2.那么不妨在插入之前，将x写成a[m-1]=x (总共m个元素, m-1是最后一个元素);
    3.这时也就是将a[m-1]插入到a[0...m-2]之间了.
    4.又因为a[0...m-2]已经是排好序的有序列表, 假设最后一个元素j=m-1, 也即a[0...j-1]是有序的, 那么只要
        * 如果a[j] > a[j-1], 说明a[0...j]这m个元素已经是有序的了,跳出
        * 如果a[j] < a[j-1], 说明后一个元素比前一个元素小，只要交换即可; 然后j=j-1, 重复重复该步骤(4)
*/
void InsertAndSort(int a[], int i) {
    // 总共i个元素, a[i-1]是最后一个元素
    for (int j=i-1; j>0; j--) {
        if (a[j] < a[j-1])
            swap(a[j], a[j-1]);
    }
}

/* 直接插入排序 */
void InsertSort(int a[], int n) {
    int i, j, k;
    // Step 1, Step 3
    for (i=1; i<n; ++i) {
        // Step 2: 有序列表插入元素

        // 有序列表插入元素1: 比较笨，找到中间并后移
        //  insertAndSort(a, 0, i-1, i);

        // 有序列表插入元素2: 比较灵活, 将a[0..i]个元素从后往前交换
        insertAndSort(a, i+1);
    }
}

(2)、递归法

/**
    数组a, 有n个元素, a[0...n-1]
*/
void InsertSort(int a[], int n) {
    if (n == 1)
        return ;
    // 递归分治
    InsertSort(a, n-1);
    // 主要插入有序列表动作
    SortedListInsertElement(a, n);
}

四、总结

掌握有序列表插入一个元素是基础，但很重要，初学仔细体会.

为HuaWei HG255D 路由器编译 Openwrt 固件

Mon, 28 Sep 2015 00:00:00 +0800

参考资料

官方文档
HG255D配置修改
其他
官方固件地址
- ramips
搜索引擎:
- Google
- 百度(中文信息较多)
相关网站:
- Stackoverflow
- Openwrt中文网技术论坛
- 恩山论坛
- 简书
- 开源中国社区
- CSDN
- 其他

一、Openwrt 版本

Barrier Breaker 14.07
另:
- 当然也可以是Chaos Calmer 15.05或trunk, 但是好像后面的都不支持了

二、路由信息

Machine:
- HuaWei HG255D
CPU型号(Target System)
- Ralink RT3052 id:1 rev:3
- 属于 Ramips

三、交叉编译环境搭建

OS:
- Ubuntu 14.04
所需依赖:

sudo apt-get install subversion \
                    build-essential \
                    libncurses5-dev \
                    zlib1g-dev \
                    gawk \
                    git \
                    ccache \
                    gettext \
                    libssl-dev \
                    xsltproc \
                    file \
                    unzip \
                    flex \
                    quilt \
                    libxml-parser-perl \
                    mercurial \
                    bzr \
                    ecj \
                    cvs \
                    python \
                    wget

四、下载Openwrt源码以及编译

Infomation:
- Version: barrier_breaker
- Kernel: 3.10.x
- Support HuaWei HG255D: Y

具体步骤

# Step 1: 下载源码
###
    mkdir ~/openwrt
    cd ~/openwrt
    # 下载barrier_breaker分支，当然你可以选择trunk(开发分支)或者其他分支
    # 开发分支: svn://svn.openwrt.org/openwrt/trunk
    svn co -r 36088 svn://svn.openwrt.org/openwrt/branches/barrier_breaker
    cd barrier_breaker
    
# Step 2: 更新软件包
###
    # *******************
    # 提示: 最好在VPS上或者挂VPN, 可能有些更新不了
    # *******************
    # 更新种子
    # 相关文件: feeds.conf.default
    ./scripts/feeds update -a
    # 下载更新
    ./scripts/feeds install -a
    
# Step 3: 生成默认配置
###
    make clean # 清除
    make defconfig # 非必须
    
# Step 4: 进入配置菜单进行配置
###
    #   1、在这一步之前，修改一些配置以适应HG255D，非常重要
    # 具体见 为HG255D修改配置
    #
    #   2、选择shadowsocks、shadowvpn、njit8021xclient: 见七、自己添加的包
    make menuconfig
    #   2.1、如果需要修改包，请参见 十、对一些包的修改
    #　 3、选择基础包: 见六、固件推荐包
    #
    ##
    # 仔细阅读以上3条,再继续; Or Exit
    # 
    # 基础信息
    Target System (Ralink RT288x/RT3xxx)
    Subtarget (RT3x5x/RT5350 based boards)
    Target Profile (HuaWei HG255D)
    Target Image --> squashfs
    
    ############################
    # 以下个人建议推荐 begin
    [*] Advanced configuration options (for developers)
    
    # 从ImageBuilder构建固件,这个非常好用，
    # 见八、从[ImageGenerator](http://wiki.openwrt.org/doc/howto/obtain.firmware.generate)生成固件
    [*] Build the OpenWrt Image Builder
    
    # SDK可用于直接编译所需要的包,也就是不在需要源码，只要SDK和包
    # 见九、从[SDK](http://wiki.openwrt.org/doc/howto/obtain.firmware.sdk)编译软件包
    [*] Build the OpenWrt SDK
    
    [*] Build the Openwrt based Toolchain
    [*] Image configuration
    # 推荐 end
    ############################
    
    # 推荐的包
    Base System --> [*] base-files
                    [*] block-mount
                    [*] dnsmasq
    # Base System --> [*] dnsmasq-dncpv6
    # Base System --> [*] bridge
    Administration -->  [*] sudo
    #                   [*] syslog-ng3
    Kernel modules --> FIlesystems -->  [*] kmod-fs-ext4
                                        [*] kmod-fs-ntfs
                                        [*] kmod-fs-vfat
                   --> LED modules -->  [*] kmod-leds-gpio
                                        [*] kmod-ledtrig-default-on
                                        [*] kmod-ledtrig-gpio
                                        [*] kmod-ledtrig-heartbeat
                   --> Network Support --> [*] kmod-pptp
                                           [*] kmod-tun # For ShadowVPN
                   --> USB Support --> [*] kmod-usb2
                   --> Wireless Drivers --> [*] kmod-rt2800-soc
                                            [*] kmod-rtl8187
                                            [*] kmod-rt73-usb
    Language --> Python --> [*] ipython # 是否嵌入Python，自己决定
                            [*] python　# 只作为模块编译[*] -> [M]
                            [M] python-django
                            [M] python-mysql
                            [M] python-sqlite3
             # --> PHP
             # --> Lua 默认即可
             # --> Javascript
    Libraries --> database --> [*] libsqlite3
    LUCI --> Collections --> [*] luci
                             # [*] luci-ssl # https支持
         --> Applications --> [*] luci-app-chinadns
                              [*] luci-app-commands # LuCI Shell Commands
                              [*] luci-app-ddns # 动态DNS
                              [*] luci-app-firewall # 防火墙
                              [*] luci-app-p2pblock
                              [*] luci-app-polipo
                              [*] luci-app-qos
                              [*] luci-app-radvd
                              [*] luci-app-redsocks2
                              [*] luci-app-shadowsocks-spec
                              [M] luci-app-shadowvpn # ShadowVPN有BUG,不宜内建
                              [ ] luci-app-samba # 好像编译会出错,不选
                              [*] luci-app-tinyproxy
                              [*] luci-app-transmission
                              [*] luci-app-upnp
                              [*] luci-app-wol
         --> Themes --> [*] luci-theme-bootstrap
         --> Translations --> [*] luci-i18n-chinese
    Network --> BitTorrent --> [*] transmission-daemon
                               [*] transmission-web
            --> Captive Portals --> [*] wifidog # ...
                                    [M] wifidog-auth
            --> File Transfer --> [*] aria2 *
                              --> [*] curl
                              --> [*] vsftpd
            --> SSH --> [*] autossh
                    --> [*] openssh-keygen
            --> VPN --> [*] pptpd
                    # --> [*] chaosvpn
                    # --> [*] l2tpd
                    # --> [*] l2tpns
                    # --> [*] n2n
                    # --> [*] openvpn-* # 我不想要，麻烦
                    # --> [*] xl2tpd
            --> Version Control Systems --> [M] git
                                        --> [M] subversion-libs
            --> Web Servers/Proxies --> # [M] apache # 下载不了
                                    --> [M] nginx
                                    --> [M] redsocks
                                    --> 其他默认
            --> dial-in/up --> 尚且不知学不需要
          --> [*] ChinaDNS
          --> [M] ShadowVPN
          --> [ ] agan8021xclient
          --> [ ] mentohust
          --> [*] netcat # nc
          --> [ ] njit8021xclient
          --> [*] odhcp6c
          --> [*] odhcpd
          --> [*] ppp-mod-pppoe
          --> [*] ppp-mod-pptp
          --> [*] redsocks2
          --> [M] shadowsocks-libev
          --> [M] shadowsocks-libev-polarssl
          --> [*] shadowsocks-libev-spec
          --> [M] shadowsocks-libev-spec-polarssl
          # --> [M] wpa-cli
          # --> [M] wpa-supplicant
          --> [*] wpad
          # --> [*] wpad-mini # IEEE 802.1x Authenticator/Supplicant(WPA-PSK only)
        --> Utilities --> database --> [M] mysql-server
                                   --> [*] sqlite3-cli
                      --> backup --> [M] rsnapshot
                      --> [M] bash
                      --> [*] shadow-passwd
                      --> [*] shadow-su
                      --> [*] shadow-useradd
                      --> [*] shadow-userdel
                      --> [*] shadow-usermod
                      --> [M] squashfs-tools-mksquashfs
                      --> [M] squashfs-tools-unsquashfs
                      --> [ ] tessert # 下载不了
                      --> [M] tmux
                      --> [*] wifitoggle
                      --> [M] zsh

# Step 5: 下载所需要的软件源码
###
    # 最好在VPS或通过VPN下载
    make download V=99 # V=99 == V=s, 输出所有信息

# Step 6: 开始编译
###
    # 其中也有些包需要联网下载，这点好像不太合适，因为应该安排在上一步，怪作者..
    make V=99 
    # 建议 make -j 4 V=99 # 主流机器都支持 -j 4, 比直接make V=99快很多

# Step 7: 如果有错误
###
    # 可以 make menuconfig 入后 输入 /, 查找并去除出错的包
    # 然后再make -j 4 V=99即可，最好不用make clean, 否则之前编译的包都没了
    
# Step 8
###
    # 在 bin/ramips/下查找
    # 可安装固件:
        openwrt-ramips-rt305x-hg255d-squashfs-sysupgrade.bin
    # 软件包文件夹:
        packages/*
    # SDK
        OpenWrt-SDK-ramips-for-linux-x86_64-gcc-4.8-linaro_uClibc-0.9.33.2.tar.bz2
    # ImageBuilder
        OpenWrt-ImageBuilder-ramips_rt305x-for-linux-x86_64.tar.bz2
    # Toolchain
        OpenWrt-Toolchain-ramips-for-mipsel_24kec+dsp-gcc-4.8-linaro_uClibc-0.9.33.2.tar.bz2
    # 不知道的文件
        openwrt-ramips-rt305x-uImage.bin
        openwrt-ramips-rt305x-vmlinux.bin
        等

五、为HuaWei HG255D修改配置

1、打开对HG255D板的支持
- File: target/linux/ramips/image/Makefile

Image/Build/Profile/HG255D=$(call BuildFirmware/Default16M/$(1),$(1),hg255d,HG255D)
...
$(call Image/Build/Profile/HG255D,$(1))

2、修改源码脚本的错误
- File: target/linux/ramips/base-files/lib/ramips.sh

将

*"HG255D")
    name="hg255d"
    ;;

修改为

*"HuaWei HG255D"
    name="hg255d"
    ;;

3、解决电源LED灯不能正常工作的问题
- File: target/linux/ramips/base-files/etc/diag.sh

在
    hlk-rm04)
        status_led="hlk-rm04:red:power"
        ;;
下添加
    hg255d)
        status_led="hg255d:power"
        ;;

4、设置默认打开Wlan, 密码为空
- File: package/kernel/mac80211/files/lib/wifi/mac80211.sh

注释 option disabled 0 即可

# option disabled 0

5、添加root账号密码为admin
- File: package/base-files/files/etc/shadow

将
    root::0:0:99999:7:::
修改为
    root:$1$21u5EotL$B9ebsVgEQe.C7lsk0iMf10:0:0:99999:7:::

六、固件推荐软件包

1 添加USB挂载
- Base system –> block-mount
2 添加磁盘格式支持
- Kernel modules –> Filesystems –> kmod-fs-ext4
- Kernel modules –> Filesystems –> kmod-fs-msdos
- Kernel modules –> Filesystems –> kmod-fs-ntfs
- Kernel modules –> Filesystems –> kmod-fs-vfat
3 语言支持
- Kernel modules –> Native Language Support –> kmod-nls-utf8
- LUCI –> Translations –> luci-i18n-chinese
4 网络支持
- Kernel modules –> Network Support –> kmod-pppol2tp
- Kernel modules –> Network Support –> kmod-pptp
5 USB支持
- Kernel modules–>USB Support–>kmod-usb-hid
- Kernel modules–>USB Support–>kmod-usb-printer
- Kernel modules–>USB Support–>kmod-usb-serial # usb转串口
- Kernel modules–>USB Support–>kmod-usb-serial-cp210x
- Kernel modules–>USB Support–>kmod-usb-serial-pl2303
- Kernel modules–>USB Support–>kmod-usb-storage
- Kernel modules–>USB Support–>kmod-usb-storage-extras
- Kernel modules–>USB Support–>kmod-usb2
6 USB无线网卡驱动
- Kernel modules–>Wireless Drivers–>kmod-rt2800-usb
- Kernel modules–>Wireless Drivers–>kmod-rt73-usb
- Kernel modules–>Wireless Drivers–>kmod-rtl8187
7 添加libffmpeg-mini支持ushare需要
- Libraries–>libffmpeg-mini
8 LUCI (网页管理)
- LuCI–>Collections–>luci
- LuCI–>Applications–>luci-app-ddns
- LuCI–>Applications–>luci-app-hd-idle
- LuCI–>Applications–>luci-app-multiwan
- LuCI–>Applications–>luci-app-ntpc
- LuCI–>Applications–>luci-app-p910nd
- LuCI–>Applications–>luci-app-qos
- LuCI–>Applications–>luci-app-samba
- LuCI–>Applications–>luci-app-tinyproxy
- LuCI–>Applications–>luci-app-upnp
- LuCI–>Applications–>luci-app-ushare
- LuCI–>Applications–>luci-app-wol
- LuCI–>Themes–>luci-theme-bootstrap
- LuCI–>Translations–>luci-i18n-chinese
9 Network
- Network –> File Transfer –> aria2
- Network –> Printing –> cups-locale-zh
- Network –> VPN –> pptpd
10 Utilities
- Utilities–>Filesystem–>badblocks#自动挂载工具
- Utilities–>Filesystem–>mkdosfs
- Utilities–>Filesystem–>ntfs-3g#ntfs读写
- Utilities–>disc–>fdisk#分区工具
- Utilities–>disc–>findfs
- Utilities–>disc–>hdparm
- Utilities–>lrzsz #上传下载工具
- Utilities–>restorefactory#reset键支持(长按5秒以上就可以恢复固件默认设置)
- Utilities–>wifitoggle #添加一键开关无线(按一下WPS键放开无线就打开或者关闭)

七、自己添加的软件(注意: package是源码根目录的package)

1、ShadowVPN
- git clone https://github.com/aa65535/openwrt-shadowvpn.git package/shadowvpn
- Bug: 不能作为内建(build-in)软件, 否则编译出的固件很多问题，暂时无法解决
- 可以作为生成模块, 即[M]
2、ChinaDns
- git clone https://github.com/aa65535/openwrt-chinadns.git package/chinadns
3、dnsmasq
- git clone https://github.com/aa65535/openwrt-dnsmasq.git package/dnsmasq
4、redsocks2
- git clone https://github.com/aa65535/openwrt-redsocks2.git package/redsocks2
5、shadowsocks
- git clone https://github.com/shadowsocks/openwrt-shadowsocks.git package/shadowsocks-libev
6、ShadowVPN ChinaDns dnsmasq redsocks2 shadowsocks的luci
- git clone https://github.com/aa65535/openwrt-dist-luci.git package/openwrt-dist-luci
7、njit-client
- 方法一: 只可以编译软件包，请不要内建，否则编译出错
  - git clone https://github.com/liuqun/openwrt-clients package/openwrt-clients
  - Bug: 编译无法通过，失败
  - 但是直接编译包却可以: make package/openwrt-clients/njit/njit8021xclient/compile V=99
- (推荐)方法二、在feeds.conf.default中添加
  - src-svn njit https://github.com/liuqun/openwrt-clients/trunk/njit
  - src-svn hust https://github.com/liuqun/openwrt-clients/trunk/hust
  - src-svn gdou https://github.com/liuqun/openwrt-clients/trunk/gdou
  - src-svn sysu https://github.com/liuqun/openwrt-clients/trunk/sysu
  - 然后 ./scripts/feeds update -a; ./scripts/feeds install -a

八、从ImageBuilder包生成Image(固件)

File: OpenWrt-ImageBuilder-ramips_rt305x-for-linux-x86_64.tar.bz2
解压:
- tar -xvf OpenWrt-ImageBuilder-*
- cd OpenWrt-ImageBuilder-*
生成Image
- make image PROFILE=HG255D # HG255D为路由器名字, 默认只有基础包
- make image PROFILE=HG255D PACKAGES=”pk1 pk2 pk3 -pk4” # -pk4表示去掉pk4包

 make image PROFILE=HG255D PACKAGES="kmod-tun zlib libopenssl libpthread ip luci luci-i18n-chinese luci-app-firewall curl vsftpd ntfs-3g autossh netcat python pptpd ChinaDNS luci-app-chinadns redsocks2 luci-app-redsocks2 shadowsocks-libev-spec luci-app-shadowsocks-spec transmission-web luci-app-transmission luci-app-upnp luci-app-qos wifidog openssh-keygen sqlite3-cli sudo shadow-common shadow-su shadow-useradd shadow-userdel shadow-usermod"
 # 注意, 不要加入ShadowVPN包，会造成固件很多问题，重启后配置丢失, LED灯不正常, POWER灯一直闪让我以为坏掉，其实是正常的等
 # luci-app-shadowvpn 最好也不要

九、从SDK编译生成软件包

好处:
- 如果只要编译某些包，这样简单方便多了
- 只用于编译生成软件包
File: OpenWrt-SDK-ramips-for-linux-x86_64-gcc-4.8-linaro_uClibc-0.9.33.2.tar.bz2
解压:
- tar -xvf OpenWrt-SDK-ramips-*
- cd OpenWrt-SDK-ramips-*
编译包: 假定包已经在package/中, 叫njit8021xclient
- make package/njit8021xclient/compile V=99

# 栗子一、编译ShadowVPN
# 获取 Makefile
git clone https://github.com/aa65535/openwrt-shadowvpn.git package/shadowvpn
# 选择要编译的包 Network -> ShadowVPN
make menuconfig
# 开始编译
make package/shadowvpn/compile V=99

# 栗子二、编译njit8021xclient
git clone https://github.com/liuqun/openwrt-clients package/openwrt-clients
# 选择要编译的包 Network -> njit8021xclient
make menuconfig
make package/openwrt-clients/njit/njit8021xclient/compile V=99

十、对一些包的修改

1 修改shadowsocks, 使其生成ss-server

找到
    ss-{local,redir,tunnel}
修改为
    ss-{server,local,redir,tunnel}

2 修改shadowvpn, 它的配置好像有问题
- 下载client/server配置文件
  - 有关client* 和 server*的文件(共留个)
  - client.conf
  - client_up.sh
  - client_down.sh
  - server.conf
  - server_up.sh
  - server_down.sh
- 将client和server文件(6个文件)移动到 package/ShadowVPN/files下
- 修改Makefile文件，见下文
- 注意: 该包有BUG, 不能内建
  - 一、如果opkg安装ShdowVPN_*.ipk出错，可能造成很多，命令不能用, 如不能重启(reboot)等，不用惊慌, 只要 opkg remove ShadowVPN即可
  - 二、如果安装出错了，请尝试opkg重新安装, 然后/etc/init.d/shadowvpn disable 或者 rm -rf /etc/rc.d/*shadowvpn, 然后关闭电源重启即可
  - 三、如果再出错，重复解决方法一, 然后tar -zxvf ShadowVPN, 然后tar -zxvf data.tar.gz -C /, 然后/etc/init.d/shadowvpn 或者 rm -rf /etc/rc.d/shadowvpn, 然后关闭电源重启即可

将
    $(INSTALL_DATA) ./files/client_up.sh $(1)/etc/shadowvpn/client_up.sh
    $(INSTALL_DATA) ./files/client_down.sh $(1)/etc/shadowvpn/client_down.sh
修改为
    $(INSTALL_DATA) ./files/client.conf $(1)/etc/shadowvpn/client.conf
    $(INSTALL_DATA) ./files/client_up.sh $(1)/etc/shadowvpn/client_up.sh
    $(INSTALL_DATA) ./files/client_down.sh $(1)/etc/shadowvpn/client_down.sh
    $(INSTALL_DATA) ./files/server.conf $(1)/etc/shadowvpn/server.conf
    $(INSTALL_DATA) ./files/server_up.sh $(1)/etc/shadowvpn/server_up.sh
    $(INSTALL_DATA) ./files/server_down.sh $(1)/etc/shadowvpn/server_down.sh

十一、遇到的问题

1、软件包源码下载问题解决办法
- 方法一
  - 尝试修改DNS慢慢下
  - File: /etc/resolv.conf
  - 开头添加: nameserver 114.114.114.114
  - 开头添加: nameserver 8.8.4.4
  - 然后继续下，只能自求多福
- 方法二
  - 连接VPN
- 方法三
  - 在VPS上make download, 然后tar压缩下载到本地编译, 当然也可以在服务器上编译，不过性能…
2、有些包真心下载不了，要么不存在，要么它的服务器出问题，导致编译出错
- 例如 mentohust 在 googlecode, apache 好像下不了了
- 解决办法:
  - make menuconfig
  - 输入 /
  - 查找 mentohust, 然后将其删除即可
3、有些包不知道出什么问题，然后导致整个固件很大问题
- 例如: ShadowVPN 导致编译出来的固件
  - 重启后，配置不能保存
  - df -h 查看 rootfs 30M (肯定是有问题的)
  - reboot 等命令失效
  - LED灯问题: 电源灯(POWER)一直闪烁(让我以为是刷成砖了，其实不是), 其他灯不亮了
- 推测:
  - 可能是/etc/rc.d/S90shadowvpn 导致的
- 解决办法:
  - 不要将这种包内建[*], 编译成模块[M]即可
- 安装ShadowVPN包的办法: 见十、对一些包的修改
4、编译Error(出错)而停止
- 不用惊慌，根据前面1、2、3先解决
- 不用make clean, 因为已经编译过的包是没问题的，网上好多资料不准确
- 然后继续 make -j 4 V=99
5、make -j 4 V=99一直出错
- 尝试: make V=99
6、路由器电源灯不亮和无线没有开启
- 见五、为HuaWei HG255D修改配置

十二、某些软件BUG

1 编译tesseract
- Problem 1: *** No rule to make target ../src/liblept.la', needed by adaptnorm_reg’. Stop.
  - 解决办法
  - File: package/feeds/oldpackages/leptonica/Makefile

    PKG_NAME:=leptonica
    PKG_VERSION:=1.71
    PKG_RELEASE:=1
    
    PKG_SOURCE:=$(PKG_NAME)-$(PKG_VERSION).tar.gz
    PKG_SOURCE_URL:=http://www.leptonica.org/source/
    PKG_MD5SUM:=790f34d682e6150c12c54bfe4a824f7f

work track

Fri, 11 Sep 2015 00:00:00 +0800

Week 1 (2016.09.05 - 2016.09.11)

1 Done
- @1 遵循设计风格，使用React重写UI组件，目的是为了规范化、简化以后开发，这是基石;
- @2 和设计沟通，讨论符合Web开发的设计样式等, 并将其实现
- @3 和Web API 后端沟通，简要讨论API的设计，希望API设计更加符合前后端对接
2 Todo
- @1 规范
  - v1 和Design多沟通，尽早整理出符合前端的设计规范
  - v2 和Backend多沟通，尽早整理出符合前端的后端接口规范
  - v3 整理出前端合作开发规范、代码规范等
- @2 运用并深入学习
  - v1 使用Redux管理数据，(目前数据尚未连接成功，不好管理)
  - v2 Redux + Immutable的学习
  - v3 Inline Style无法使用动画
    - 考虑 inline style + css modules 实现动画
  - v4 PC端UI vs 移动端UI

Week 2 (2016.09.12 - 2016.09.17)

Done
- 用React重构首页和列表页UI
Todo
- UI微调, 增加Alert/Confirm
- 异步对接数据API(Redux + React-redux + Redux-thunk)
3 Willdo
- @1 熟练Redux数据管理
- @2 React动画探索与实现
- @3 重构页面(首页 + 详细页面)

Linux Command: awk

Sun, 23 Aug 2015 00:00:00 +0800

一、简介

awk 是处理文本数据的好工具。
相比于sed常用于一整行的处理，awk则倾向于将一行分成数个”字段”来处理.
awk适合处理小型的文本数据.

二、语法

`awk '条件类型1{动作1} 条件类型2{动作2} ...' filename`

awk主要是处理每一行的字段内的数据，而默认的字段的分隔符为空格或者[tab]键.
- 案例: last取出登陆账号和IP
  - last -n 5 | awk '{print $1 "\t" $3}'
在每一行的每个字段都是有变量名的, 从$1开始, $2, $3, …

三、处理流程

1 读入每一行，并将第一行的数据填入变量$0, $1,$2,…中
2 依据条件类型的限制, 判断是否需要进行后面动作
3 做完所有动作与条件类型

四、内置变量

注意:
- FS和-F选项类似
- 区别是:
  - FS从第二行开始生效，如果要从第一行开始生效，则要加关键字BEGIN
    - awk 'BEGIN {FS=":"} ...' ...
  - -F选项默认从第一行开始生效
栗子:
- 运用NR选择指定行
  - 只输出第一行: last -n 5 | awk 'NR==1{print $1 "\t" $3}'
  - 只输出第二行: last -n 5 | awk 'NR==2{print $1 "\t" $3}'
- 运用NF得出总列数

变量名称	代表意义	栗子
NF	每一行($0)拥有的字段总数, 也就是总列数	显示列数: `last -n 5 \| awk '{print "User: " $1 "\t columns: " NF}'`
NR	指定处理第几行数据, 也就是行号	显示所在行数: `last -n 5 \| awk '{print "User: " $1 "\t Line: " NR }'`
FS	指定分隔符，默认是空格	分隔符为冒号, `awk 'last -n 5 \| awk '{FS:":"} {print "User: " $1}'`

五、逻辑运算符

> < >= <= == !=
栗子:
- 找出/etc/passwd中UID小于10的用户和UID, 其中awk中$1是用户, $3是UID
  - cat /etc/passwd | awk '{FS=":"} $3 < 10 {print $1 "\t" $3}'
- 输出有误，不是从第一行开始输出，解决, 关键字BEGIN
  - cat /etc/passwd | awk 'BEGIN {FS=":"} $3<10 {print $1 "\t" $3}'
  - cat /etc/passwd | awk -F ":" '$3<10 {print $1 "\t" $3}'

六、其他高级用法:

1 数字可相加，可用printf格式化

pay.txt内容
    Name    1st     2st     3st
    VBird   2300    2400    2500
    Cole    1200    1234    1442
    Potter  1111    1122    3333
    ...

# 第一行加标题
# 第二行开始计算总和
cat pay.txt awk 'NR==1{printf "%10s %10s %10s %10s %10s\n", $1, $2, $3, $4, "Total"} \
    NR>=2{total=$1+$2+$3+$4 printf "%10s %10s %10s %10s %10s\n", $1, $2, $3, $4, total}'

# 注意: 
#   printf格式化字符串\n换行
#   与bash和shell不同，awk中的自定义变量可以直接使用, 不用加$符号，如total

2 支持条件判断if

cat pay.txt awk '{ if (NR == 1) printf "%10s %10s %10s %10s %10s\n", $1, $2, $3, $4, "Total"} \
    NR>=2{total=$1+$2+$3+$4 printf "%10s %10s %10s %10s %10s\n", $1, $2, $3, $4, total}'

开始用 SASS 代替 CSS

Sat, 15 Aug 2015 00:00:00 +0800

SASS教程

一、文件后缀名

1 .sass
- 使用缩进, 不使用分号和大括号
2 .scss
- 和css差不多，可以使用嵌套

// 1 .sass
body
    background: #eee
    font-size: 12px
p
    background: #0982c1

// 2 .scss

body {
    background: #eee;
    font-size: 12px;

    p {
        background: #0982c1;
    }
}

二、导入

Syntax:
- @import 'filename.format';
在sass中导入不同文件:
- 导入.scss文件:
  - 编译时只生成一个css文件
  - 可以忽略后缀名: @import 'a';
- 导入.css文件:
  - 和css导入样式文件一样，导入的css文件不会合并到编译后的文件，而是以@import方式存在
  - 不能忽略后缀名

三、注释

单行注释: //, 不会被转义
多行注释: /* ... */

四、变量

Syntax:
- sass变量必须以$开头, 后面紧跟变量名
- 变量名和变量值用冒号:分开
- 如果值后面加上!default则表示默认值.
普通变量: 定义之后可以在全局范围使用

// sass style
// ****************** 
$fontSize: 12px;
body {
    font-size: $fontSize;
}

// css style
// *******************
body {
    font-size: 12px;
}

默认变量: sass的默认变量仅需要在后面加上!default即可
- 覆盖默认变量: 在使用之前重新定义变量即可

// sass style
// *********************
$baseLineHeight: 1.5 !default;
body {
    line-height: $baseLineHeight;
}

// css style
// *********************
body {
    line-height: 1.5;
}

// sass的默认变量一般是用来设置默认值
//  然后根据需要来覆盖的，覆盖方式很简单
// 只需要在默认变量使用之前重新声明变量
// *******************
// sass style
// *******************
$baseLineHeight: 1.5 !default;
$baseLineHeight: 2;
body {
    line-height: $baseLineHeight;
}

// css style
// **************************
body {
    line-height: 2;
}

特殊变量
- 为属性的部分或者特殊情况修啊必须以#{$variables}形式使用

// sass style
// *******************************
$borderDirection:   top !default;
$baseFontSize:      12px !default;
$baseLineHeight:    1.5 !default;

// 应用于class和属性
.border-#{borderDirection} {
    border-#{borderDirection}: 1px solid #ccc;
}

// 应用于复杂属性值
body {
    font: #{baseFontSize}/#{baseLineHeight};
}


// css style
// ************************
.border-top {
    border-top: 1px; solid #ccc;
}

body {
    font: 12px/1.5;
}

多值变量
- list类型: 类似js中的数组
  - 定义: 可以用空格，逗号或小括号分隔多值
  - 取值: 可用nth($var, $index)取值
  - 函数:
    - length($tist)
    - join($list1, $list2, [$separator])
    - append($list, $value, [$separator])
    - More
- map类型: 类似js中的对象
  - map数据以key和value成对出现，其中value可以是普通值，也可以是list;
  - 格式: $map: (key1: value1, key2: value2, key3:value3);
  - 获得: map-get($map, $key);
  - 函数:
    - map-merge($map1, $map2)
    - map-keys($map)
    - map-values($map)
    - More

// List
// 定义
// 一维数组
/ ********************* begin
$px: 5px 10px 20px 30px;

// 二维数组，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
// ******************** end

// List 使用
// sass style
// *******************

$linkColor: #08c #333 !default; // 第一个为默认值，第二个为鼠标划过值
a {
    color: nth($linkColor, 1);

    &:hover {
        color: nth($linkColor, 2);
    }
}

// css style
// *****************************
a {
    color: #08c;
}
a:hover {
    color: #333;
}

// Map 定义
$headings: (h1: 2em, h2:1.5em, h3: 1.2em);

// Map 使用
// sass style
// *******************************
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
    #($header) {
        font-size: $size;
    }
}

// css style
// *******************************
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.5em;
}
h3 {
    font-size: 1.2em;
}

全局变量
- 在变量值后面加上!global.
局部变量:
- 在选择器里声明的变量

// sass style
// **********************
$fontSize: 12px;
body {
    $fontSize: 14px; // 局部变量
    font-size: $fontSize;
}

p {
    font-size: $fontSize;
}

// css style
// **************************
body {
    font-size: 14px;
}
p {
    font-size: 12px;
}

五、嵌套(Nesting)

分为选择器嵌套和属性嵌套, 主要指选择器嵌套
选择器嵌套:
- 使用&表示父元素选择器

// sass style
// ********************************
#top-nav {
    line-height: 40px;
    text-transform: capitalize;
    background-color: #333;

    li {
        float: left;
    }

    a {
        display: block;
        padding: 0 10px;
        color: #fff;

        &:hover {
            color: #ddd;
        }
    }
}

// css style
// **************************
#top-nav {
    line-height: 40px;
    text-transform: capitalize;
    background-color: #333;
}

#top-nav li {
    float: left;
}

#top-nav a {
    display: block;
    padding: 0 10px;
    color: #fff;
}

#top-nav a:hover {
    color: #ddd;
}

属性嵌套:
- 指有些属性拥有同一个开始单词, 如border-width, border-color都是以border开头的单词

// sass style
// ****************************
.fakeshadow {
    border: {
        style: solid;
        left: {
            width: 4px;
            color: #888;
        }
        right: {
            width: 2px;
            color: #ccc;
        }
    }
}

// css style
// ****************************
.fakeshadow {
    border-style: solid;
    border-left-width: 4px;
    border-left-color: #888;
    border-right-width: 2px;
    border-right-color: #ccc;
}

六、`@at-root`

用来跳出选择器嵌套.默认所有的嵌套，继承所有上级选择器，但是有了这个就可以跳出所有上级选择器.
普通跳出嵌套

// sass style
// ****************
// 没有跳出
.parent-1 {
    color: #f00;
    .child {
        width: 100px;
    }
}

// 单个选择器跳出
.parent-2 {
    color: #f00;
    @at-root .child {
        width: 200px;
    }
}

// 多个选择器跳出
.parent-3 {
    background: #f00;
    @at-root {
        .child1 {
            width: 300px;
        }
        .child2 {
            width: 400px;
        }
    }
}

// css style
// ************************
.parent-1 {
    color: #f00;
}
.parent-1 .child {
    width: 100px;
}

.parent-2 {
    color: #f00;
}
.child {
    width: 200px;
}

.parent-3 {
    background: #f00;
}
.child1 {
    width: 300px;
}
.child2 {
    width: 400px;
}

at-root (with-out: ...) 和 at-root (with: ...)
- 默认@at-root只能跳出选择器嵌套，而不能跳出@media或@support
- 跳出:
  - @media: @at-root (without: media)
  - support: @at-root (without: support)
- 四个值:
  - all: 表示所有
  - rule: 表示常规css, 就是默认情况
    - @at-root == @at-root (with: rule)
  - media: 表示media
  - support

// sass style
// ****************************************
// 跳出父级元素嵌套
@media print {
    .parent1 {
        color: #f00;
        @at-root .child1 {
            width: 200px;
        }
    }
}

// 跳出media嵌套，父级有效
@media print {
    .parent2 {
        color: #f00;

        @at-root (widthout: media) {
            .child2 {
                width: 200px;
            }
        }
    }
}

// 跳出media和父级
@media print {
    .parent3 {
        color: #f00;

        @at-root (without: all) {
            .child3 {
                width: 200px;
            }
        }
    }
}


// css style
// *******************************
@meida print {
    .parent1 {
        color: #f00;
    }
    .child1 {
        width: 200px;
    }
}

@media print {
    .parent2 {
        color: #f00;
    }
}

.parent2 .child2 {
    width: 200px;
}

@media print {
    .parent3 {
        color: #f00;
    }
}

.child3 {
    width: 200px;
}

@at-root 与 &配合使用

// sass style
// ******************************
.child {
    @at-root .parent & {
        color: #f00;
    }
}

// css style
// ******************************
.parent .child {
    color: #f00;
}

应用于@keyframes

// sass style
// ******************************
.demo {
    ...
    animation: motion 3s infinite;

    @at-root {
        @keyframes motion {
            ...
        }
    }
}

// css style
// ********************************
.demo {
    ...
    animation: motion 3s infinite;
}

@keyframes motion {
    ...
}

七、`混合(mixin)`

关于@mixin与@include
- sass中使用@mixin声明混合，可以传递参数，参数以$符号开始，多个参数以逗号分开，也可以给参数设置默认值.
- 声明@mixin通过@include来调用
无参数mixin

// sass style
// ****************************
@mixin center-block {
    margin-left: auto;
    margin-right: auto;
}

.demo {
    @include center-block;
}

// css style
// ****************************
.demo {
    margin-left: auto;
    margin-right: auto;
}

有参数mixin

// sass style
// ****************************
@mixin opacity($opacity:50) {
    opacity: $opacity / 100;
    filter: alpha(opacity=$opacity);
}

// sass style
// ****************************
.opacity {
    @include opacity; // 参数使用默认值
}
.opacity-80 {
    @include opacity(80); // 传递参数
}

多个参数mixin
- 调用时可直接传入值。如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如没有默认值。则报错。
- 除此之外还可以选择性的传入参数，使用参数名与值同时传入.

// sass style
// *******************************
@mixin horizontal-line($border: 1px dashed #ccc, $padding: 10px) {
    border-bottom: $border;
    padding-top: $padding;
    padding-bottom: $padding;
}
.imgtext-h li {
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li {
    @include horizontal-line($padding: 15px);
}

// css style
// *******************************
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

多组值参数mixin
- 如果一个参数可以有多组值。如box-shadow、transition等，那么参数则需要在变量后加三个点表示, 如$variables...

// sass style
// ********************************
// box-shadow 可以有多组值，所以在变量参数后面添加...
@mix box-shadow ($shadow...) {
    -webkit-box-shadow:$shadow;
    box-shadow: $shadow;
}
.box {
    border: 1px solid #ccc;
    @include box-shadow(0 2px 2px rgba(0, 0, 0, 3), 0 3px 3px rgba(0, 0, 0, .3), 0 4px 4px rgba(0, 0, 0, .3));
}

// css style
// *********************************
.box {
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3)0 4px 4px rgba(0,0,0,.3);
    box-shadow: 0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3)0 4px 4px rgba(0,0,0,.3);
}

@content
- 可以用来解决css3的@media等带来的问题。
- 它可以使用@mixin接收一整块样式, 接受的样式从@content开始.

// sass style
// ********************************
@mixin max-screen($res) {
    @media only screen and (max-width: $res) {
        @content;
    }
}

@include max-screen(480px) {
    body {
        color: red;
    }
}

// css style
// **********************************
@media only screen and (max-width: 480px) {
    body { color: red; }
}

八、继承

定义:
- sass中，选择器继承可以让选择器继承另一个选择器的所有样式, 并联合声明.
- 使用选择器的继承，要使用关键字@extend，后面紧跟需要继承的选择器.

// sass style
// **********************************
h1 {
    border: 4px solid #ff9aa9;
}
.speaker {
    @extend h1;
    border-width: 2px;
}

// css style
// **********************************
h1,.speaker {
    border: 4px solid #ff9aa9;
}
.speaker {
    border-width: 2px;
}

占位选择器`%`

定义:
- 优势: 如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中定义了很多基础的样式，然后在实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式.
- 占位选择器以%标识定义, 通过@extend调用.

// sass style
// **************************
%ir {
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0px;
}
%clearfix {
    @if $lte 7 {
        *zoom: 1;
    }
    &:before,
    &:after {
        content: "";
        display: table;
        font: 0/0 a;
    }
    &:after {
        clear: both;
    }
}
#header {
    h1 {
        @extend %ir;
        width: 300px;
    }
}
.ir {
    @extend %ir;
}

// css style
// ******************
#header h1,
.ir {
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}
.header h1 {
    width: 300px;
}

// ****************
// 
  如上代码，定义了两个占位选择器%ir和%clearfix, 其中%clearfix并没有调用，所以解析出来的css样式也就没有clearfix部分.
  占位选择器的出现，使得css样式跟腱简练可控，没有多余.
  PS: 在@media中暂时不能使用@extend @media外的代码片段, 也就是站为选择器必须定义在@media内部.

九、`函数`

定义:
- sass定义了很多函数可供使用，当然也可以自定义函数.
- 以@function开始, 官方
- 实际项目组，我们使用最多的是颜色函数，二颜色函数中又以lignten(减淡)和darken(加深)最为常用.
- lighten($color, $amount) 和 darken($color, $amount)
  - $color: 颜色值
  - $amount: 百分比

// sass style
// ************************
$baseFontSize:  10px !default;
$gray:          #ccc !default;

// pixels to rems
@funtion px2Rem($px) {
    @return $px / $baseFontSIze * 1rem;
}

body {
    font-size: $baseFontSIze;
    color: lighten($gray, 10%);
}
.test {
    font-size: px2Rem(16px);
    color: darken($gray, 10%);
}

// css style
// ******************************
body {
    font-size: 10px;
    color: #E6E6E6;
}
.test {
    font-size: 1.6rem;
    color: #B3B3B3;
}

十、`运算`

定义:
- sass具有运算的特性，可以对数值型的Value(数字、颜色、变量等)进行加减乘除四则运算.
- 注意: 运算符前后请留一个空格，否则报错.

$baseFontSize:      14px !default;
$baseLineHeight:    1.5 !default;
$baseGap:           $baseFontSize * $baseLineHeight !default;
$halfBaseGap:       $baseGap / 2 !default;
$smallFontSize:     $baseFontSize - 2px !default;

// grid
$_columns:          12 !default;    // Total number of columns
$_column-width:     60px !default;  // Width of a single column
$_gutter:           20px !default;  // Width of the gutter
$_gridsystem-width: $_column * ($_column-width + $_gutter);

十一、`条件判断及循环`

`@if判断`

@if可以一个条件单独使用，也可以和@else结合多条件使用

// sass style
// ************************************
$lte7: true;
$type: monster;
.ib {
    display: inline-block;
    @if $lte7 {
        *display: inline;
        *zoom: 1;
    }
}
p {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}

// css style
// ***********************
.ib {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
p {
    color: green;
}

`三目判断`

Syntax:
- if ($condition, $if_true_value, $if_false_value)
  - 如果$condition为true, 则值为$if_true_value; 否则为$if_false_value

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

`for循环`

两种Syntax:
- @for $var from <start> through <end> { ... }
- @for $var from <start> to <end> { ... }
  - $var为变量
  - start为起始值，end为解数值
  - 注意: throught包含end这个数，即<=; to不包含end, 即<

// sass style
// *************************
@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}

// css style
// *************************
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
.item-3 {
    width: 6em;
}

`@each循环`

Syntax:
- @each $var in <list or map> { ... }
单个字段list数据循环

$animal-list: puma, sea-slug;
$each $animal in $animal-list {
    .#{$animal}-icon {
        background-image: url('/images/#{animal}.png');
    }
}

// css style
// **************************
.puma-icon {
    background-image: url('/images/puma.png');
}
.sea-slug-icon {
    background-image: url('/images/sea-slug.png');
}

多个字段list数据循环

// sass style
// *********************************
$animal-data: (puma, black, default), (sea-slug, blue, pointer);
@each $animal, $color, $cursor in $animal-data {
    .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
        border: 2px solid $color;
        cursor: $cursor;
    }
}

// css style
// *********************************
.puma-icon {
    background-image: url('/images/puma.png');
    border: 2px solid black;
    cursor: default;
}
.sea-slug-icon {
    background-image: url('/images/sea-slug.png');
    border: 2px solid blue;
    cursor: pointer;
}

多个字段map数据循环

// sass style
// ********************************
$headings: (h1: 2em, h2:1.5em, h3: 1.2em);
@each $header, $size in $headings {
    #{$header} {
        font-size: $size;
    }
}

// css style
// ********************************
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

如何通过反向SSH隧道访问NAT后面的Linux服务器

Wed, 12 Aug 2015 00:00:00 +0800

参考整理

基本概念

一、反向SSH隧道简介

1 是什么:
- 隧道协议(Tunneling protocol):
  - 在当前网络不支持或不提供某种网络服务的情况下，隧道协议允许访问或提供该服务.
- (正向)SSH隧道:
  - 通过Secure Shell 提供的隧道协议服务
- 反向SSH隧道:
  - 在本地主机与远程VPS建立SSH隧道的情况下，(通过)远程VPS能够通过它反向访问本地主机.
2 前提:
- 家庭主机没有或没有固定的公网IP(一般运营商不会给的)
- 一个拥有公网IP的VPS(中继主机), OS: Linux
3 步骤:
- 从家里的Linux主机与公网中的VPS(中继主机)建立SSH隧道;
- 有了这个隧道，就可以从VPS上或通过VPS连接回家里的Linux主机;
4 作用:
- 在任何地方，连接上家里的Linux主机

二、设置反向SSH隧道

预设:
- home: 表示家庭Linux主机
- vps: 表示拥有公网IP的远程中继主机
1 打开一个到中继服务器的SSH连接:
- ssh -fN -R 10022:localhost:22 vps_user@1.1.1.1
  - 10022: 是VPS上没有被占用，被用来反向连接家庭主机的端口, 也就是vps上通过ssh home_user@127.0.0.1 -p 10022连接家庭Linux主机
  - localhost: 是绑定远程主机的地址，这项可以当做默认
  - 22: 远程vps的ssh端口
  - vps_user: vps的用户
  - 1.1.1.1: 远程vps的IP地址
  - -R: 定义一个反向隧道, -R [vps_ip:]port:host:host_port
  - -N: 不执行远程命令, 这对转发端口是非常有用的.
  - -f: 在成功通过SSH服务器验证时, 在命令执行之前，将ssh请求放到后台运行(守护进程).
2 远程VPS状态:
- sudo netstate -nap | grep 10022
  - 确认其127.0.0.1:10022绑定到了sshd.
3 从VPS连接到家庭主机:
- ssh -p 10022 home_user@127.0.0.1
  - home_user是家庭主机的用户，密码自然也是。

三、通过反向SSH隧道直接链接到网络地址变换后的服务器

1 问题:
- 上面方法允许从VPS访问NAT后面的家庭服务器, 但是需要两次登录: 先登录VPS, 再登录家庭服务器.因为中继服务器(VPS)上SSH隧道的端点绑定到了回环地址(127.0.0.1).现在我想直通过VPS对外开放的端口就可以直接访问家庭服务器(只要一步).
2 步骤:
- 1 指定VPS上运行的ssh的GatewayPorts实现
  - 将GatewayPorts clientspecified 添加到 /etc/ssh/sshd_config (VPS: Ubuntu Server)
- 2 重启sshd服务
  - Debian系:
    - Upstart: sudo service ssh restart
    - Systemd: sudo sstemctl restart sshd
  - Red Hat系
    - sudo systemctl restart sshd
- 3 初始化方向隧道, 记得把之前的kill, 否则端口10022被占用
  - ssh -fN -R 1.1.1.1:10022:localhost:22 vps_user@1.1.1.1
    - 1.1.1.1 是VPS的公网IP地址
- 4 在VPS上确认是否建立反向ssh隧道:
  - sudo netstat -nap | hrep 10022
- 5 现在可以通过VPS对外开放的端口之间访问家庭服务器:
  - ssh -p 10022 home_user@1.1.1.1

四、永久反向SSH隧道

1 工具:
- 借助autossh自动反向SSH隧道
- 在执行autossh之前，须将ssh public key上传的VPS
  - ssh-keygen -t rsa
  - ssh-copy-id -i ~/.ssh/id_rsa.pub vps_user@vps_ip
2 安装:
- Debian系:
  - sudo apt-get install autossh
- Red Hat系:
  - sudo yum install autossh
  - (Fedora) sudo dnf install autossh
3 配置

autossh \
    -M 10900 \ # 指定VPS服务器上的见识端口，用于交换监视SSH会话的测试数据, 不能被占用
    -fN \ # 后台运行
    -o "PubkeyAuthentication=yes" \    # 使用秘钥验证，而不是密码验证
    -o "StrictHostKeyChecking=false" \ # 自动接受SSH主机秘钥
    -o "PasswordAuthentication=no" \
    -o "ServerAliveInterval 60" \      # 每60秒交换key-alive消息
    -o "ServerAliveCountMax 3" \       # 没有收到任何响应是最多发送3条keep-alive消息.
    -R $VPS_IP:$VPS_ACCESS_PORT:$FORWARD_IP:$FORWARD_PORT \
    vps_user@1.1.1.1

`五、SOCKS代理公式`

ssh -fN -R $VPS_IP:$VPS_ACCESS_PORT:$FORWARD_IP:$FORWARD_PORT $VPS_USER@VPS_IP
- $VPS_IP: 就是远程服务器地址
- $VPS_ACCESS_PORT: 之后你访问的就是$VPS_IP和$VPS_ACCESS_PORT
- $FORWARD_IP: 要被转发的IP地址, 就是外网无法访问的内网IP等,也可以是本地IP, 如127.0.0.1
- $FORWARD_IP: 要被转发的端口 # $VPS_USER: VPS的用户，不需要root权限，它就相当于一个代理人而已
注意: 这里一般使用SSH_PUB_KEY, 公钥验证; 这样在配置autossh时就不会出问题了
同样可以应用到autossh

六、端口代理(socks代理)实际案例

案例1: 转发路由器(192.168.1.1)的80端口到远程服务器(123.123.123.123)的12345端口, 远程服务器用户agent

目的:
- 使得直接访问http://123.123.123.123:12345就可以访问路由器Web界面
前提:
- 远程服务器及其用户有效, 路由器存在
实际操作:
- ssh -fN -R 123.123.123.123:12345:192.168.1.1:80 agent@123.123.123.123
- 现在访问http://123.123.123.123:12345试试

案例2: 转发本地内网主机(127.0.0.1)SSH端口(22)到远程服务器(123.123.123.123)的12345端口, 本地主机SSH用户local_ssh_user(本地能连接，sshd服务必须开启), 远程服务器用户agent

目的:
- 使得在任意主机上使用ssh local_ssh_user@123.123.123.123 -p 12345就能连接到本地主机(内网主机)SSH服务
前提不在赘述
实际操作:
- ssh -fN -R 123.123.123.123:12345:127.0.0.1:22 agent@123.123.123.123

案例3: 转发内网主机(10.11.12.13)的1080端口到服务器(123.123.123.123)的54321端口

目的:
- 可以通过访问123.123.123.123的54321端口就能访问内网主机10.11.12.13的1080端口, 具体视情况而定
- 具体服务如案例1和案例2
实际操作:
- ssh -fN -R 123.123.123.123:54321:10.11.12.13:1080 agent@123.123.123.123

CSS 中的居中

Tue, 04 Aug 2015 00:00:00 +0800

一、文本(字)水平居中

* Condition: 
    * 文本、图片、或者强制行级元素等`行内(inline, inline-block)元素`
* Object:
    * 给要居中元素的父类元素添加
* Code: 
    * `text-align:center`

二、定框块级元素水平居中:(block and width)

* Condition:
    * Block 并且 width确定(不论px还是百分比)
* Object:
    * 给要居中的元素本身添加
* Code:
    * `margin: 0 auto;`

三、不定宽块状元素水平居中:

* Code 1 (个人感觉不美观):
    * `postion: relative; left: 50%;`
* Code 2 (转换为第一种情况):
    * `display: inline;`
    * 父元素: `text-align: center`

四、文本元素垂直居中:

* Condition:
    * 父元素高度确定的单行文本
* Object:
    * 容纳文字的元素也可说(DOM)文本元素的父元素
* Code:
    * `height: 100px; line-height: 100px;`
    * `只要设置line-height与height一致`

五、块级元素垂直居中:

* Condition:
    * Block
* Object:
    * 要垂直居中元素的父元素
* Code:
    * `display: table-cell; vertical-align: middle;/*只有display为table-cell时才会激活vertical-align属性*/`

六、跑题一下:

* `block` `inline-block` `inline`的区别
    * `inline`: 没有height和width
    * `inline-block`: 有height, 没有width
    * `block`: 有height和width

Great Photos Wall

Sat, 01 Aug 2015 00:00:00 +0800

一、知识点

1 box-shadow:
- Function: 给元素边框添加阴影效果
- Syntax: box-shadow: offset-x offset-y blur-radius [spread-radius] color [inset];
  - offset-x: X轴偏移量
  - offset-y: Y轴偏移量
  - blur-radius: 阴影模糊半径
  - spread-radius: 阴影扩展半径
  - color: 阴影颜色
  - inset outset: 投影方式, 内阴影 (默认)外阴影

2 position:

Function: 给元素定位，主要用到绝对定位absolute

Syntax: position: keyword-value;

Keyword Values: static(default)

relative

absolute

fixed

sticky

inherit

initial

unset;

how-to:
- position:absolute 和 position:relative 配合使用实现相对于包含元素(参照元素)定位

3 z-index:
- Function: 设置元素的上下层显示顺序
- Syntax: z-index: INTEGER;
  - INTEGER(整数)越大，显示越上层，可以为负数
4 transform:
- Function: 使元素变形的属性, 其配合rotate(旋转)、scale(缩放)、skew(扭曲)等参数一起使用
- Syntax:
  - transform: rotate(旋转角度);
  - transform: scale(缩放倍数);
  - transform: rotate(旋转角度) scale(缩放倍数); // 旋转并缩放
5 transition:
- Function: 设置元素由样式1变化到样式2的过程所需要的时间
- Syntax: transition: duration;

二、制作步骤

1 每张照片的位置不一样
2 每张照片有一定的旋转角度(transform:rotate(?deg))
3 照片阴影(box-shadow)及缓慢(transition)旋转(transform:rotate)、缓慢(transsition)放大(transfrom:scale)特效制作

三、实现

.container {
    padding: 0;
    margin: 60px auto;
    width: 960px;
    height: 450px;
    position: relative;
}

/* 公共初始属性 */
img {
    padding: 10px 10px 15px;
    background: #fff;
    border: 1px solid #ddd;
    
    position: absolute; /*绝对定位, left, right, top, bottom*/
   
    /* 兼容性, 从初始状态到鼠标移上状态的时间 */
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -ms-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;

    width: 200px;
    height: 300px;
}

/* 公共鼠标移上属性 */
img:hover {
    /* 将图片旋转为0度 */
    tranform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);

    /*将图片缩放为原来的1.2倍 */
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);

    /* 图片阴影 */
    -webkit-box-shadow: 10px 10px 15px #ccc;
    -moz-box-shadow: 10px 10px 15px #ccc;
    box-shadow: 10px 10px 15px #ccc;
    z-index: 2;
}

/* 图片特性 */
.img-1 {
    /* 绝对定位设置的属性: left, right, top, bottom */
    top: 0px;
    left: 200px;

    /* 初始状态旋转角度 */
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
}

四、Daemon和源码

Hadoop Getting Started

Thu, 30 Jul 2015 00:00:00 +0800

一、关于 Hadoop

1 Hadoop是什么:
- Hadoop是Apache的开源的分布式存储以及分布式计算平台
- 官网
2 Hadoop的两个核心组成:
- HDFS: 分布式文件系统，存储海量的数据
- MapReduce: 并行处理框架,实现任务分解和调度
3 Hadoop的用途:
- 搭建大型数据仓库,PB级数据的存储、处理、分析、统计等业务.
  - 搜索引擎
  - 日志分析
  - 商业智能
  - 数据挖掘
4 Hadoop的优势:
- 1.高扩展
- 2.低成本
- 3.成熟的生态圈(Hadoop Ecosysten)
5 Hadoop的生态系统及版本: HDFS + MapReduce + 开源工具
- 1.HIVE: 只需要编写简单的SQL语句, 转化成Hadoop任务
- 2.HBASE:
  - 存储结构化数据的分布式数据库.
  - 和传统的关系型数据库区别, Hbase放弃失特性，追求更高的扩展
  - 和HDFS区别: Hbase提供数据的随机读写和实时访问, 实现对表数据的读写功能.
- 3.Zookeeper: 监控Hadoop集群的状态，管理Hadoop集群的配置…

二、Hadoop的安装(Ubuntu 14.04)

Step 1: 准备Linux, 这里用Ubuntu 14.04
Step 2: 安装JDK, 这里用OpenJDK 1,7
- sudo apt-get update; sudo apt-get install -y openjdk-7-jdk
- 设置JAVA环境, 编辑 ~/.bashrc或~/.zshrc 在末尾添加
  - export JAVA_HOME=/usr/lib/jvm/java-7-openjdk-amd64
  - export JRE_HOME=$JAVA_HOME/jre
  - export CLASSPATH=$JAVA_HOME/lib:$JRE_HOME/lib:$CLASSPATH
  - export PATH=$JAVA_HOME/bin:$JRE_HOME/bin:$PATH
- 使JAVA环境生效:
  - source ~/.bashrc Or source ~/.zshrc
Step 3: 下载Hadoop, 并解压到$HOME目录
- 1 下载: 官网
  - 2.7.1
  - 1.2.1
  - COMMAND: wget http://mirror.bit.edu.cn/apache/hadoop/common/hadoop-1.2.1/hadoop-1.2.1.tar.gz
- 2 解压到WORKDIR目录, WORKDIR自己定，最好在$HOME
  - tar -zxvf hadoop-1.2.1.tar.gz -C $HOME
Step 4 配置Hadoop: Hadoop目录: $HOME/hadoop-1.2.1
- 四个配置文件, 配置文件目录: $HOME/hadoop-1.2.1/conf:
  - core-site.xml
  - hadoop-env.sh
  - hdfs-site.xml
  - mapred-site.xml

// 1 编辑hadoop-env.sh: `vim hadoop-env.sh`
    * 找到JAVA_HOME, 取消注释(去掉`#`)，修改为刚才设置的JAVA_HOME地址
    * `export JAVA_HOME=/usr/lib/jvm/java-7-openjdk-amd64`

// 2 `vim core-site.xml`
    <configuration>
        <property>
            <!-- 这是注释, Hadoop的工作目录 -->
            <!-- 该目录不要手动创建 -->
            <name>hadoop.tmp.dir</name>
            <value>/home/potter/hadoop</value>
        </property>

        <property>
            <!-- 元数据目录 -->
            <!-- name 目录不要创建 -->
            <name>dfs.name.dir</name>
            <value>/home/potter/hadoop/name</value>
        </property>

        <property>
            <!-- 文件系统的name node -->
            <name>fs.default.name</name>
            <!-- potter 是 hostname, 9000 是hadoop的端口号 -->
            <value>hdfs://potter:9000</value>
        </property>
    </configuration>

// 3 vim hdfs-site.xml
<configuration>:
    <property>
        <!-- 文件系统数据的存放目录 -->
        <!-- data 目录不要创建, 否则存在权限问题, 如果出现问题，请查看HADOOP_HOME目录下的logs目录文件 -->
        <name>dfs.data.dir</name>
        <value>/home/potter/hadoop/data</value>
    </property>
</configuration>

// 4 vim mapred-site.xml
<configuration>:
    <property>
        <!-- 任务调度去访问路径 -->
        <name>mapred.job.tracker</name>
        <value>potter:9001</value>
    </property>
</configuration>

// 5 配置 Hadoop 环境
// vim ~/.bashrc
export HADOOP_HOME=$HOME/hadoop-1.2.1
export PATH=$HADOOP_HOME/bin:$PATH

// 使环境生效
source ~/.bashrc

// 6 基本环境配置好了，现在继续做必要的操作
// 6.1 Hadoop配置成功与否
% hadoop # 显示帮助则说明hadoop配置没问题

// 6.2 对 namenode 进行格式化, 否则无法启动namenode服务
% hadoop namenode -format
# 成功执行后, /home/potter/hadoop目录及子目录dfs被创建

// 6.3 启动服务
% start-all.sh
# 成功执行后, /home/potter/hadoop/data及/home/potter/hadoop/mapred目录被创建
// 6.3.1 停止服务: stop-all.sh

// 6.4 JPS 查看服务
% jps
如果存在 Jps
        JobTracker
        NameNode
        DataNode
        SecondaryNameNode
        TaskTracker
 六个任务，则说明Hadoop配置没问题

// 6.5 常见问题:
 1. NameNode 和 DataNode 启动不成功解决:
    保证前面配置一致, 则可能在start-all.sh之前没有format namenode.
  这时只要stop-all.sh, 再hadoop namenode -format, 然后在start-all.sh即可

 2. DataNode 启动不成功解决:
    data目录不要手动创建，已创建，请删除,重新stop-all.sh && start-all.sh即可

 3. 其他, 请查看$HADOOP_HOME目录下的logs目录

// 6.6 查看Hadoop的文件命令
% hadoop fs -ls /
% hadoop fs -ls /home
% hadoop fs -ls /home/ubuntu
% hadoop fs -ls /home/ubuntu/hadoop

Hadoop 基本概念: HDFS + MapReduce

三、HDFS 系统

1 块(Block)
- HDFS的文件被分成块(Block)进行存储.
- HDFS块的默认大小为64MB
- 块是文件存储处理的逻辑单元
- HDFS 中有两类节点NameNode + DataNode
2 NameNode
- 是HDFS的管理节点，存放文件元数据
  - 1 文件与数据块的映射表
  - 2 数据块与数据节点的映射表
- 客户通过NameNode找到DataNode, 将多个DataNode拼成一个可用的数据
3 DataNode
- 是HDFS的工作节点，存放数据块

三-2、HDFS中数据管理与容错

1 每个数据块有3个副本，分布在两个机架内的三个节点.(一个机架可以存放多个DataNode, 数据块存放在DataNode中.其中两份在一个机架，另一个在另一个机架.)以此来保证容错.
2 心跳检测: DataNode定期向NameNode发送心跳消息.
3 SecondaryNameNode: 二级NameNode定期同步元数据镜像文件和修改日志NameNode发生故障时，备胎转正.

三-3、文件读写的流程

HDFS中文件读取的流程:
- Step 1: 客户端向NameNode发送文件读取请求
- Step 2: NameNode根据客户端发来的文件路径, 查看元数据
- Step 3: NameNode会根据元数据，返回客户端这些数据块及其存放的DataNode
- Step 4: 找到数据块存放的DataNode，读取并组装
HDFS中文件写入的流程:
- Step 1: 客户端文件拆分成块, 每个大小问DataNode的默认大小64MB.
- Step 2: 客户端发送通知给NameNode
- Step 3: NameNode 从机架中查找可用的DataNode返回客户端
- Step 4: 客户端根据NameNode返回的DataNode, 将数据块写入DataNode
- Step 5: 一个数据块写入DataNode后，进行流水线复制两份到不同机架的DataNode
- Step 6: 没一个DataNode复制完成后(一个复制两个)，更新元数据
- Step 7：写入第二个数据块到DataNode, 重复Step 5...

三-4、HDFS的特点

1.数据冗余，硬件容错
2.流式数据访问: 一次写入，多次读写; 一旦写入，不会被修改
3.存储大文件: 如果文件很小，对NameNode的压力很大
适用性和局限性:
- 适合数据批量读写，吞吐量高.
- 不适合交互式应用，低延迟很难满足
- 适合一次写入多次读写，顺序读写
- 不支持多用户并发写相同文件

三-5、HDFS命令行操作

# hdfs 提供Shell接口, 所以命令和Shell操作很类似
# 直接输入 hadoop fs 可以获得帮助

# 1 查看文件夹
% hadoop fs -ls /

# 2 新建目录
% hadoop fs -mkdir input 
# 该命令会在/usr/potter下创建input目录
# 其中potter为你的hostname
# 用 hadoop fs -ls /usr/potter 查看

# 3 将本地文件提交到hdfs, local_file为本地任意文件
% hadoop fs -put local_file input/ 
# 查看文件
% hadoop fs -ls /user/potter/input
# 查看文件内容
% hadoop fs -cat /usr/potter/input/local_file

# 4 删除文件或目录
% hadoop fs -rm path/to/file

# 5 从HDFS中获取文件到本地
% hadoop fs -get input/remote_file local_new_name

四、MapReduce框架

四-1. MapReduce 原理

分而治之:
- 一个大任务分成多个小的子任务(map), 并行执行后，合并结果(reduce)
- 栗子: 老师让多个组长一起发作业(map), 老师收作业(reduce)
- map: 大变小加上并行执行, reduce: 小变大, 但是map和reduce并不是相反的过程
实际栗子:
- 1 从100GB的网站访问日志文件中找出访问次数最多的IP地址.

四-2. MapReduce 运行流程

基本概念:
- Job & Task: 一个Job被分成多个Task, Task又分为MapTask和ReduceTask
- JobTracker: 客户端提交Job(任务)来, JobTracker将Job分为MapJob和ReduceJob, MapJob 和 ReduceJob又将任务交给Map TaskTracker 和 Reduce TaskTracker
  - 1 作业调度
  - 2 分配任务、监控任务执行进度
  - 3 监控TaskTracker的状态
- TaskTracker:
  - 1 执行任务
  - 2 向JobTracker汇报任务状态
执行流程:
- 1.输入数据或者数据也来自HDFS
- 2.将输入数据分片，执行Map任务(Job), 交给Map端的TaskTracker
- 3.中间结果: Key-Value
- 4.执行Recude任务(Job), 交给Reduce端的TaskTracker
- 5.将输出结果写回到HDFS
MapReduce的容错机制
- 1 重复执行(4次失败后放弃)
- 2 推测执行

五、MapReduce的应用案例

案例一、WordCount单词计数

问题: 计算文件中出现每个单词的頻数, 输出结果按照字母顺序进行排序.
思路:
- 将文件按行进行切分，每行执行Map操作, 计算每个结果, 然后再Reduce合并

Java Web (三) 过滤器(Filter)

Tue, 21 Jul 2015 00:00:00 +0800

一、过滤器简介

1 含义:
- Web过滤器: (过滤源 + 过滤规则 + 过滤结果) 是一个服务器端的组件，它可以截取用户端的请求与响应信息,并对这些信息过滤.

二、过滤器的工作原理和生命周期

1 工作原理:
- 过程: 用户请求 <-> 过滤器 <-> Web资源
2 生命周期:
- 过程:
  - 1 实例化 -> Web.xml : 只一次
  - 2 实例化 -> 初始化 -> init() : 只一次
  - 3 初始化 -> 过滤 -> doFilter() : 每次都做
  - 4 过滤 -> 销毁 -> destroy()
3 函数:
- 1 init():
  - 这是过滤器的初始化方法，Web容器创建过滤器实例后将调用这个方法。这个方法中的FilterConfig类型参数可以读取web.xml文件中过滤器的参数.
- 2 doFilter()
  - 这个方法完成时间操作。这个方法是过滤器的核心方法.当用户请求访问与过滤器关联的URL时，Web容器将先调用过滤器的doFilter方法.
  - FilterChain参数可以调用chain.doFilter方法，将请求传给下一个过滤器(或目标资源)，或利用转发、重定向将请求转发给其他资源.
- 3 destroy():
  - 销毁实例，释放资源
4 经典问题:
- 1 过滤器能改变用户请求的Web资源，即能改变用户的请求路径.
  - 比如，没有登入，不符合要求，就直接改变请求路径.
- 2 过滤器不能直接返回数据，不能直接处理用户请求

// 1. 在web.xml中注册Filter
    <filter>
        <!-- Filter Name 任意取-->
        <filter-name>LoginFilter</filter-name>
        
        <!-- 过滤器的全路径: 包名 + 类名 -->
        <filter-class>com.cole.filter.LoginFilter</filter-class>

        <!-- Filter 初始化参数, 可以省略, 也可以是零对或多 -->
        <init-param>
            <!-- Filter 描述, 可以省略 -->
            <description></description>
            <param-name>username</param-name>
            <param-value>password</param-value>
        </init-param>
    </filter>

    <!-- Filter Mapping 可以多个，多个URL地址可以匹配到一个Filter里 -->
    <filter-mapping>

        <!-- Filter Name 必须与filter中的相同 -->
        <filter-name>LoginFilter</filter-name>

        <!-- 当用户请求的URL和指定的URL匹配时，将触发过滤器-->
        <!-- URL: /* 代表任意值 -->
        <url-pattern>/login.jsp</url-pattern>

        <!-- 要过滤的类型, 可以省略, 可以是零对或多对，值为: REQUEST | INCLUDE | FORWARD | ERROR, 默认为REQUEST-->
        <dispatcher>REQUEST</dispatcher>
    </filter-mapping>

// 2. Filter类, src -> 右键new -> Filter 或者 新建Class继承Filter (javax.servlet.filter)
public class LoginFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        System.out.println("服务器启动时就初始化 Filter");
        System.out.println("Filter Init");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {

        // 先匹配web.xml中的URL并执行filter, 
        System.out.println("Filter Start ... doFilter");

        // 再执行下一条语句，也就是访问实际URL
        filterChain.doFilter(servletRequest, servletResponse);

        // 过滤结束
        System.out.println("Filter End ... doFilter");
    }

    @Override
    public void destroy() {
        System.out.println("Filter Destroy");
    }
}

三、过滤器链(多个过滤器)

1 多个过滤器的实现
- 误解:
  - 多个过滤器一般指(web.xml): 1.多个filter, 2.一个filter中多个url-pattern(错误认为)
  - 这里是指多个filter，每个 url-pattern 一样
- 过程(url-pattern一样):
  - 用户请求 -> 过滤器1 -> 过滤器2 -> 过滤器3 -> Web资源
2 多个过滤器的执行路径/顺序
- 服务器会按照web.xml中过滤器定义的先后顺序组装成一条链
- 具体:
  - 用户请求 -> 过滤器1(先filter开始，在chain.doFilter, 这里不执行filter结束, 而是执行第二个过滤器) -> 过滤器2(...) -> ... -> Servlet的Service方法 -> 过滤器n的end方法 -> ... -> 过滤器1的end方法 -> 响应用户请求

// 1 在web.xml中注册第二个filter
    <filter>
        <filter-name>Second</filter-name>
        <filter-class>com.cole.filter.SecondFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>Second</filter-name>
        <url-pattern>/login.jsp</url-pattern>
    </filter-mapping>

// 2 第二个过滤器
public class SecondFilter implements Filter {
    public void destroy() {
        System.out.println("SecondFilter destroy .... ");
    }

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        System.out.println("SecondFilter Start ... doFilter" + new Date());
        chain.doFilter(req, resp);
        System.out.println("SecondFilter End ... doFilter");
    }

    public void init(FilterConfig config) throws ServletException {
        System.out.println("SecondFilter init .");
    }

}

/* 结果
Filter Init
SecondFilter init .

Filter Start ... doFilterTue Jul 21 09:54:59 CST 2015
SecondFilter Start ... doFilterTue Jul 21 09:54:59 CST 2015
SecondFilter End ... doFilter
Filter End ... doFilter
*/

四-过滤器分类(Dispacther)(3类)

1 四类(Servlet 2.x) / 五类(Servlet 3.x): 默认REQUEST
- 1 REQUEST:
  - 用户直接访问页面或服务器response.sendRedirect时，Web容器将会调用过滤器
- 2 FORWARD:
  - 服务器request.getRequestDispatcher(“URL”).forward(request, response);
  - 目标资源通过RequestDespatcher的forward访问时，该过滤器将被调用.
  - jsp页面
- 3 INCLUDE:
  - 目标资源是通过RequestDispatcher的include方法调用时
  - jsp页面:
- 4 ERROR :
  - 目标资源是通过声明式异常处理机制调用时，过滤器将被调用
- 5 (Servlet 3.x) ASYNC:
  - 支持异步处理
2 ERROR 实例:

// 过滤 404 错误自动到 Page Not Found
// 1. web.xml 注册错误页面和过滤器
    <!-- 自动跳转404 -->
    <error-page>
        <error-code>404</error-code>
        <!-- 404.html 已经存在于 web-content 目录 -->
        <location>/404.html</location>
    </error-page>

    <!-- 捕捉 404 错误， 进行操作 --> 
    <filter>
        <filter-name>Error404</filter-name>
        <filter-class>com.cole.filter.ErrorFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>Error404</filter-name>
        <!-- 所有的页面的404错误都会自动到 /404.html -->
        <!-- 只需要捕捉 /404.html 页面即可 -->
        <url-pattern>/404.html</url-pattern>
        <!-- 必须指定 dispatcher 包含 ERROR, 默认为REQUEST, 否则无法捕捉 -->
        <dispatcher>ERROR</dispatcher>
    </filter-mapping>

// 2. Filter Class: com.cole.servlet.ErrorFilter.java
// 创建Filter的两种方法:
//      1. 右键new -> Filter (IDE大多类似)
//      2. 新建Java Class -> 继承 Filter -> 实现init doFilter destroy方法

public class ErrorFilter implements Filter {
    public void destroy () {
        System.out.println("销毁 Filter");
    }

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        // 将 req 强制转换为 request 之后就可以用 request的很多方法 ..
        // 比如 response.sendRedirect, 
        // 比如 request.getResquestDispatcher("URL").forward(request, response);
        // HttpServletRequest request = (HttpServletRequest) req;
        // HttpServletResponse response = (HttpServletResponse) resp;
        System.out.println("开始 doFilter");
        // chain.doFilter是放行，显示 404 页面
        chain.doFilter(req, resp);
        System.out.println("结束 doFilter");
    }

    public void init(FilterConfig config) throws ServletException {
        System.out.println("初始化 Filter");
    }
}

3 Servlet 3.0 新Filter: @WebFilter
- 1 定义: 注解(@)
  - @WebFilter 用于将一个类声明为过滤器，该注解将会在部署时被容器处理，容器根据具体的属性配置将相应的类部署为过滤器.
- 2 @WebFilter 常用属性

属性名	类型	描述
filterName	String	指定过滤器的name属性, 等价于
value	String []	该属性等价于urlPatterns属性, 但是两者不应该同时使用 (value的优先级大于 urlPatterns)
urlPatterns	String []	指定一组过滤器的URL匹配模式, 等价于标签
servletNames	String []	指定过滤器将用于哪些Servlet.取值是@WebFilter中的name属性的取值，或者是web.xml中的取值
dispatcherTypes	DispatcherType	指定过滤器的转发模式. 具体取值包括 ASYNC ERROR FORWARD INCLUDE REQUEST
initParams	WebInitParam[]	指定一组初始化参数，等价于
asyncSupport	boolean	声明过滤器是否支持异步操作模式,等价于标签
description	String	过滤器的描述信息, 等价于
displayName	String	该过滤器的现实名，通常配合工具使用，等价于

@WebFilter (servletNames = {"ErrorServlet"}, filterName = "Error404")

等价于

<filter>
    <filter-name>Error404</filter-name>
    <filter-class>...</filter-class>
</filter>
<filter-mapping>
    <filter-name>Error404</filter-name>
    <servlet-class>ErrorServlet</servlet-class>
</filter-mapping>

// WebFilter 实例
@WebFilter(filterName="MyAsyncFilter", value={"/404.html"}, 
    dispatcherTypes = {DispatcherType.REQUEST, DispatcherType.ERROR, DispatcherType.ASYNC})
public class AsyncFilter implement Filter 
    ...
}

五、案例

过滤器在实际项目中的应用场景
- 1 对用户请求进行统一认证
- 2 编码转换
- 3 对用户发送的数据进行过滤替换
- 4 转换图像格式
- 5 对响应的内容进行压缩

案例一过滤编码

// 1. Servlet 2.x/3.x web.xml
<filter>
    <filter-name>EncodingFilter</filter-name>
    <filter-class>com.cole.filter.EncodingFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>EncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

// 2. com.cole.filter.EncodingFilter.java
public class EncodingFilter implement Filter {
    public void destroy () {
    }

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        // 将request编码和response编码设置为urt-8，防止乱码
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        chain.doFilter(req, resp);
    }

    public void init(FilterConfig config) throws ServletException {
    }
}

案例二: 对用户请求进行统一认证

// 1. Servlet 2.x/3.x web.xml
<filter>
    <filter-name>LoginFilter</filter-name>
    <filter-class>com.cole.filter.LoginFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>LoginFilter</filter-name>
        // 将request编码和response编码设置为urt-8，防止乱码
    <!-- 所有管理界面必须管理员登陆 -->
    <url-pattern>/admin/*</url-pattern>
</filter-mapping>

// 2. com.cole.filter.LoginFilter.java
public class LoginFilter implement Filter {
    public void destroy () {
    }

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) resp;
        if (request.getSession().getAttribute("username") == null) {
            response.getWriter().println("<script>alert('请先登陆');window.location.href='/sign_in';</script>");
            return ;
        }
 
        chain.doFilter(req, resp);
    }

    public void init(FilterConfig config) throws ServletException {
    }
}

Java Web (二) Servlet 基础

Sun, 19 Jul 2015 00:00:00 +0800

一、什么是Servlet

1.1 定义
- Servlet是在服务器上运行的小程序。一个Servlet就是一个Java类，并且可以通过”请求-响应”编程模型来访问这个主流在服务器内存里的Servlet程序.

二、Tomcat 容器等级

2.1 Tomcat的容器分为四个等级，Servlet的容器管理Context容器，一个Context对应一个Web工程.
2.2 等级:
- 1 Tomcat – 最外层
  - 2 Container 容器
    - 3 Engine
      - 4 HOST
        
        5 Servlet容器
        
        6 Context 1 + Context 2 + …

三、编写Servlet

3.1 继承HttpServlet
- 1 Servlet(Interface): 三个方法: Init() service() destroy()
- 2 GenericServlet(Abstract Class): 与协议无关的Servlet
- 3 HttpServlet(Abstract Class): 实现Http协议的Servlet
- 4 自定义Servlet: 一般重写(覆盖) doGet、doPost方法
3.2 重写doGet()或者doPost()方法
3.3 在web.xml中注册Servlet

// 1. 在src目录下新建包com.cole.servlet, 在servlet包下新建类HelloServlet.java
import javax.servlet.http.Servlet;
public class HelloServlet extends HttpServlet {
    @Override
    protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("处理Get请求");
        // 获取浏览器输出对象
        PrintWriter out = response.getWriter();
        // 要使下一句的html标签起作用
        response.setContentType("text/html;charset=utf-8");
        // 向浏览器输出
        out.println("<font color='red'>Hello Servlet.</font>");
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("处理Post请求");
        // 获取浏览器输出对象
        PrintWriter out = response.getWriter();
        // 要使下一句的html标签起作用
        response.setContentType("text/html;charset=utf-8");
        // 想浏览器输出
        out.println("<font color='blue'>Hello Servlet.</font>");
    }
}

// 2 在web.xml中注册Servlet
    <servlet>
        <!-- servlet-name的名字可以任意取, 当然也可以是类名 -->
        <servlet-name>HelloServlet</servlet-name>
        <!-- servlet-class的值必须是处理请求的Servlet的全路径 -->
        <servlet-class>com.cole.servlet.HelloServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <!-- servlet-name的名字必须和上面servlet中的servlet-name一样 -->
        <servlet-name>HelloServlet</servlet-name>
        <!-- 访问Servlet的路径 -->
        <url-pattern>/helloservlet</url-pattern>
    </servlet-mapping>

// 3. index.jsp页面
<a href="/helloservlet">Get方式请求Servlet</a>

<form action="/helloservlet" method="post">
    <input type="submit" value="Post方式请求Servlet" />
</form>

三、(2)IDE编写Servlet

1 src -> new -> Servlet
2 重写doGet()或者doPost()方法
3 部署servlet并运行

四、Servlet生命周期

4.1 Servlet执行流程:
- 1 Get方式请求HelloServlet
- 2 在web.xml中的servlet-mapping寻找url-pattern -> servel-name
- 3 在web.xml中寻找servlet-name -> servlet-class
- 4 找到HelloServlet类
- 5 doGet方法
4.2 Servlet生命周期:
- 1 初始化阶段,执行init(ServletConfig)方法
- 2 响应客户端请求，调用service(Servlet Request Servlet Response)方法
  - 由service根据提交方法选择doGet或doPost方法
- 3 关闭服务器，调用Destroy()方法
4.3 Tomcat装载Servlet的三种情况
- 1 Servlet容器启动时自动装载某些Servlet, 实现它只需要web.xml文件中的<servlet></servlet>之间(的最后)添加如下代码<load-on-startup>1</load-on-startup>, 数字越小表示优先级越高.
- 2 在Servlet容器启动后，客户端首次向Servlet发送请求.
- 3 Servlet类文件被更新后，重新装载Servlet.

五、Servlet获取九大内置对象

5.1 out: PrintWriter类型，由response.getWriter()获得
5.2 reequest: service方法中的req参数
5.3 response: service方法中的resp参数
5.4 session: req.getSession()获得
5.5 application: getServletContext()函数
5.6 exception: Throwable
5.7 page: this
5.8 pageContext: PageContext
5.9 Config: getServletCOnfig()函数

六、Servlet与表单

request
- getParameter()方法: 返回唯一值
- getParameterValues(): 返回数组
Date: new SimpleDateFormat(String pattern):
- String format(Date d): 日期格式化成字符串
- Date parse(String pattern): 字符串解析成日期
  - pattern必须与new SimpleDateFormat()中的pattern一致，否则异常

七、Servlet路径跳转

request.getRequestParameter(“URL”).forward(request, response);
- “URL”中的”/”为项目根目录
response.sendRedirect(“URL”);
- “URL”中的”/”为当前Servlet路径
1 绝对路径
- request.getContextPath(): 获得上下文路径，项目的根目录
2 相对路径
- response.sendRedirect(request.getContextPath() + “/test.jsp”);

八、项目实践

1 DBHelper
2 Entity
3 DAO
4 Servlet

Java Web (一) JSP 基础

Fri, 17 Jul 2015 00:00:00 +0800

四、JSP内置对象

4.4 Session的生命周期
- 1 创建:
  - 当客户端第一次访问某个jsp或者Servlet时候，服务器会为当前会话创建一个SessionID, 每次客户端向服务器发送请求是，都会将SessionId携带过去，服务端会对此SessionID进行校验.
- 2 活动:
  - a. 某次会话当中通过超链接打开的新页面属于同一次会话.
  - b. 只要当前会话页面没有全部关闭，重新打开新的浏览器窗口访问同一个项目资源属于同一次会话.
  - c. 除非本次会话的所有页面都关闭后，再重新访问某个JSP或者Servlet将会创建新的会话.
    - 注意: 原有的会话依然存在，只是这个旧的SessionID仍然存在于服务端，只不过再也没有客户端携带它然后交予服务端校验。直到超时.
- 3 销毁: Session的三种销毁方式
  - a. 调用session.invalidate()方法
  - b. Session过期(超时)
  - c. 服务器重启

// JSP 页面 Session
<%
SimpleDateFormat sdf = new SimpleDateFormat();
// 设置session属性，在多个页面使用
session.setAttribute('username', 'admin');
session.setAttribute('password', '123456');
session.setAttribute('age', 20);

// 设置当前session最大期限，单位是秒
session.setMaxInactiveInterval(10); // 10秒钟
%>

// getCreationTime() 默认返回1970到现在的秒数
Session的创建时间: <%=sdf.format(new Date(session.getCreationTime())) %>
Session最后访问时间: <%=sdf.format(new Date(session.getLastAccessedTime())) %>
Session TTL: <%=sdf.format(new Date(session.getMaxInactiveInterval())) %>
Session的ID: <%=session.getId() %>
从Session中获取用户名: <%=session.getAttribute("username") %>

<% session.invalidate(); // 销毁当前session %>

4.4.1 Session对象
- Tomcat默认的session超时时间TTL为30分钟
- 设置超时时间有两种:
  - a. session.setMaxInactiveInterval(时间); // 单位是秒
  - b. 在web.xml配置

// 在web.xml中设置超时时间
<session-config>
    <!-- 单位是分钟,设置会话十分钟后超时 -->
    <session-timeout>10</session-timeout>
</session-config>

4.5 Application对象
- 特点:
  - 1 application对象实现了用户间数据的共享，可存放全局变量.
  - 2 application开始于服务器启动，终止于服务器关闭.
  - 3 在用户的前后连接或不同用户之间的连接中，可以对application对象的同一属性进行操作.
  - 4 在任何地方对application对象属性的操作，都将影响到其他用户对此的访问
  - 5 服务器的启动和关闭决定application对象的生命
  - 6 application对象是ServletContext类的实例.
- 常用方法:
  - public void setAttribute(String name, Object value)使用指定名称将对象绑定到此会话
  - public Object getAttribute(String name)返回与此会话中的指定名称绑定在一起的对象; 如果没有对象绑定在该名称下，则返回null
  - Enumeration getAttributeNames(): 返回所有可用属性名的枚举
  - String getServerInfo(): 返回JSP(SERVLET)引擎名及版本号

application中的属性有: <%
      Enumeration attributes = application.getAttributeNames();
      while (attributes.hasMoreElements()) {
        out.println(attributes.nextElement() + "&nbsp;&nbsp;");
      }
    %>

4.6 Page对象
- 定义:
  - Page对象是指当前JSP页面本身，有点像类中的this指针，它是java.lang.Object类的实例
- 常用方法:
  - class getClass(): 返回此Object的类
  - int hashCode(): 返回此Object的hash码
  - boolean equals(Object obj): 判断是否相等
  - void copy(Object obj): 将此Object拷贝到指定的Object对象中
  - Object clone(): 克隆此Object对象
  - String toString()
  - void notify(): 唤醒一个等待的线程
  - void notifyAll(): 唤醒所有等待的线程
  - void wait(int timeout): 使一个线程处于等待知道timeout结束或被唤醒
  - void wait(): 使一个线程等待直到被唤醒
4.7 pageContext对象
- 特点:
  - pageContext对象提供了对JSP页面内所有的对象及名字空间的访问
  - pageContext对象可以访问到本页所在的session, 也可以取本页面所在application的某一属性值
  - pageContext对象相当于页面中所有功能的集大成者
  - pageContext对象的本类名也叫pageContext
- 常用方法:
  - JspWriter getOut(): 返回当前客户端响应被使用的JspWriter流(out)
  - HttpSession getSession(): 返回当前页中的HttpSession对象(session)
  - Object getPage(): 返回当前页的Page对象(page)
  - ServletRequest getRequest(): 返回当前页的ServletRequest对象(request)
  - ServletResponse getResponse()
  - void setAttribute(String name, Object attribute): 设置属性和值
  - Object getAttribute(String name, int scope): 在指定范围内取属性的值
  - int getAttributeScope(String name): 返回某个属性的作用范围
  - void forward(String relativeUrlPath): 使当前页面重导到另一个页面
  - void include(String relativeUrlPath): 在当前位置包含另一文件
4.8 Config对象
- 定义:
  - config对象是在一个Servlet初始化时，JSP引擎向它传递信息用的，此信息包括Servlet初始化时所要用到的参数(通过属性名和属性值构成)以及服务器的有关信息(通过传递一个ServletContext对象), 常用方法如下:
- 常用方法:
  - ServletContext getServletContext(): 返回含有服务器相关信息的ServletContext对象
  - String getInitParameter(String name): 返回初始化参数的值
  - Enumeration getInitParameterNames(): 返回Servlet初始化所需要参数的枚举
4.9 Exception 对象
- 定义:
  - exception对象是一个异常对象,当一个页面在运行过程中发生了异常，就产生这个对象。如果一个JSP页面要应用此对象，就必须把isErrorPage设为true,否则无法编译。它实际上是java.lang.Throwable的对象.
- 常用方法:
  - String getMessage(): 返回描述异常的信息
  - String toString(): 返回关于异常的简短描述信息
  - void printStackTrace(): 显示异常及其栈轨迹
  - Throwable FillInStackTrace(): 重写异常的执行栈轨迹

// 异常对象Exception
// Page 1. 当异常发生后，交给exception.jsp页面处理, 及跳转到exception.jsp页面
<%@ page ... errorPage="exception.jsp" %>

<% 
    System.out.println(100/0); // 抛出运行时异常,算数异常
%>


// Page 2. exception.jsp页面
<%@page ... isErrorPage="true" %>
异常消息: <%=exception.getMessage() %> <br>
简短消息: <%=exception.toString() %> <br>

4.10 练习登陆:
- request.setCharacterEncoding("utf-8"); : 防止中文乱码
- request.getRequestDispatcher("login_success.jsp").forward(request, response): 请求转发到login_success.jsp页面
- response.sendRedirect("login_failure.jsp"): 请求重定向
- session.setAttribute("user", username)

五、JavaBeans

六、JSP状态管理

6.1 HTTP协议无状态性
- 无状态是指，当浏览器发送请求给服务器的时候，服务器响应客户端请求。但是当同一个浏览器再次发送请求给服务器的时候，服务器并不知道它就是刚才哪个浏览器.即服务器不会记住浏览器.
6.2 保存用户状态的两大机制
- Session机制
- Cookie机制
6.3 Cookie简介
- 是Web服务器保存在客户端的一系列文本信息.
- 典型应用:
  - 判断用户是否登陆
  - “购物车”处理
  - 是否记住密码
  - 浏览记录
- 作用:
  - 对特定对象的追踪
  - 保存用户网页浏览记录与习惯
  - 简化登录
- 缺点:
  - 容易泄露用户信息
6.4 Cookie的创建与使用
- 1 创建Cookie对象:
  - Cookie newCookie = new Cookie(String key, Object value);
- 2 写入Cookie对象:
  - response.addCookie(newCookie);
- 3 读取Cookie对象:
  - Cookie[] cookies = request.getCookies();
- 常用方法:

方法名称	说明
void setMaxAge(int expiry)	设置cookie的有效期，以秒问单位
void setValue(String value)	在cookie创建后，对cookie进行赋值
String getName()	获取cookie的名称
String getValue()	获取cookie的值
int getMaxAge()	获取cookie的有效时间,以秒为单位

    // JSP中使用Cookie实现记住用户名和密码功能
    // 设置请求编码
    request.setCharacterEncoding('utf-8');
    // 首页判断用户是否选择了记住登录密码
    String[] isUseCookies = request.getParameterValues("isUseCookie");
    if (isUseCookie != null && isUseCookie.length > 0) {
        // 把用户名和密码保存在Cookie对象里面
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        // 使用URLEncoder解决无法在Cookie中无法保存中文, java.net.*;
        // 相应的读取Cookie时要decode(attribute, charset);
        username = URLEncoder.encode(username, 'utf-8');
        password = URLEncoder.encode(password, 'utf-8');

        // 创建Cookie
        Cookie usernameCookie = new Cookie("username", username);
        Cookie passwordCookie = new Cookie("password", password);
        // 设置Cookie过期时间
        usernameCookie.setMaxAge(864000); // 10天
        passwordCookie.setMaxAge(864000);
        // 写入Cookie对象
        response.addCookie(usernameCookie);
        response.addCookie(passwordCookie);
    } else {
        // 获得Cookie对象
        Cookie[] cookies = request.getCookies();
        if (cookies != null && cookies.length > 0) {
            for (Cookie c : cookies) {
                if (c.getName().equals("username") || 
                    c.getName().equals("password")) {
                    // 设置Cookie过期失效
                    c.setMaxAge(0);    
                    // 还必须添加到response, 重新保存
                    response.addCookie(c);
                }
            }
        }
    }

6.5 Session与Cookie的对比

Session	Cookie
在`服务器`端内存保存用户信息	在`客户端`保存用户信息
Session中保存的是`Object`类型	Cookie保存的是`String`类型
随会话的结束二将其存储的数据销毁	Cookie可以`长期`保存在客户端
保存`重要`信息	保存`不重要`信息

七、指令与动作

7.1 include指令: JSP三大指令: Page Include TagLib
- 语法: <%@ include file=”URL” %>
  - file属性: 包含要包含的页面
7.2 include动作: 动作标签<jsp:... />
- 语法:
  - page: 要包含的页面
  - flush: 被包含的页面是否从缓冲区读取
7.3 include指令与include动作的区别

	include 指令	jsp:include 动作
语法格式	<%@ include file=”URL” %>	<jsp:include page=”URL” flush=”true	false”/>
发生作用的时间	页面转换期间	请求期间
包含的内容	文件的实际内容	页面的输出
转换成的Servlet	主页面和包页面转换为一个Servlet	主页面和包页面转换为独立的Servlet
编译时间	较慢–资源必须被解析	较快
执行时间	稍快	较慢–每次资源必须被解析

7.4 动作
- 语法:
  - <jsp:forward page="URL" />
  - 等同于: request.getRequestDispatcher("/url").forward(request, response);
- 解决request.getParameter乱码:
  - request.setCharacterEncoding("utf-8");
7.5 动作
- 语法:
  - <jsp:param name="参数名" value="参数值" />
  - 常与<jsp:forward ... >...</jsp:forward>一起使用，作为其子标签
- 作用:
  - 1. 设置键值，然多页面获取
  - 1. 修改其他页面传过来的键值

// <jsp:param >
    <jsp:forward page="user.jsp">
        <jsp:param name="email" value="admin@126.com" />
    </jsp:forward>
// 其他页面可以用
// request.getParamter获取

7.6 动作

八、实际案例:

1 实现DBHelper类(util包): 只做数据库静态连接与断开
2 创建实体类(entity包): 起名规则:表名, 所有实体类符合JavaBeans思想
3 创建业务逻辑类(DAO)(dao包): 起名规则: entity名+”DAO”

Linux NetWok Bridge(创建网桥)

Sat, 11 Jul 2015 00:00:00 +0800

Wiki

一、通过iproute2/ip创建网桥 bridge_name

1 网桥创建／删除:
- 创建:
  - ip link add name bridge_name type bridge
- 删除:
  - ip link delete bridge_name type bridge
2 IP网段:
- 设置:
  - ip addr add 172.20.1.1/80 dev bridge_name
- 删除:
  - ip addr del 172.20.1.1/80 dev bridge_name
3 启动/关闭网桥:
- 启动: ip link set bridge_name up
- 关闭: ip link set bridge_name down

二、实际案例: 虚拟机Vbox中UbuntuServer14.10桥接新建的网桥bridge_name

1 虚拟机网络选择适配器(Adapter):
- Bridged Adapter(桥接) -> bridge_name -> Cable Connected
2 Ubuntu 设置:
- 临时配置
  - IP: ifconfig eth0 172.20.1.2 netmask 255.255.255.0
  - Gateway: route add default gw 172.20.1.1
3 现在主机可以通过172.10.1.1访问UbuntuServer了

三、网桥联网

Java Getting Started

Fri, 10 Jul 2015 00:00:00 +0800

一、基础

1 八个基本数据类型
- 1 boolean
- 2 char
- 3 byte
- 4 short
- 5 int
- 6 long
- 7 float
- 8 double
2 数据类型:
- float a = 3.14f; // 必须声明为3.14f, 否则3.14为double类型, 出错

三、面向对象基础:

默认、abstract、interface、final、static
- 抽象类 = 抽象方法public abstract + 普通方法 (抽象方法必须实现，普通方法不必)
- 接口 (特殊的抽象类，即抽象类的方法全为抽象方法)
- 单继承　多实现
3 方法:
- 1 值传递和址传递
  - 值传递: 传变量, 只是传变量值的拷贝
  - 址传递: 传对象, 先在栈区创建引用类型的变量，然后再在堆区创建对象属性.
- 2 构造方法注意:
  - 系统默认创建一个无参的构造方法；但是如果你手动创建一个有参的构造方法，则系统不会默认创建无参的构造方法，即不能使用无参的构造方法; 若仍想使用，必须显示创建无参构造方法.
- 3 方法重载:
  - 原则(3):
    - 在同一个类中
    - 方法名相同
    - 参数列表必须不同, 返回类型可以相同，即参数个数、或对应位置数据类型不同
    - 注意: 参数相同但返回值类型不同不是重载
      - 继承: 是覆盖
      - 没有继承: 是BUG
- 4 可变参数:
  - Syntax: DataType ...variable
  - Usage: 可变参数相当于一个数组
  - 栗子

// 可变参数:
public int add (int a, int ...b) {
    int sum = a;
    for (var t : b) {
        sum += t;
    }
    return sum;
}

4 封装和访问控制
- 1 概念:
  - Java引入包(package)的机制，提供了类的多层命名空间，解决了类的命名冲突、类文件管理等问题.
  - 借助于包，可以将自己定义的类与其他类库中的类分开管理.
- 2 定义包:
  - Syntax: package pk_name;
  - 注意:
    - 1 package语句必须作为Java原文件的第一条非注释性语句;
    - 2 一个Java源文件只能指定一个包，即只有一条package语句;
    - 3 定义包之后，Java源文件中可以定义多个类，这些类将全部位于包内
    - 4 多个Java源文件可以定义相同的包
  - 注意2
    - 1 在物理组织上，包的表现形式为目录
    - 2 但并不等同与手工创建目录后将类拷贝过去就行，必须保证类中代码声明包含包名与目录一直才行
    - 3 包名规范性: 公司域名反写.项目名.模块名, com.cole.proj.calendar.
- 3 导入包 总结
  - 1 * 指明导入当前包的所有类, 但不能使用’java.’ 或者 ‘java..*‘这种语句来导入以java为前缀的所有包的所有类.
  - 2 一个Java源文件只能有一条package语句
  - 3 但可以有多条import语句，且package语句在import之前
- 4 封装
  - 1 概念:
    - 封装是面向对象的特性之一，它实际上通过访问控制符来实现访问控制
  - 2 访问控制符(4):
    - private: 私有
    - 缺省: 可以被同一个包中的所有类访问
    - protected: 继承
    - public: 公开
    - 实例:
      - 类名只能用不修饰(本包可见), public, abstract, static, final来控制访问权限
      - 文档注释: /** … */
5 静态成员
- 定义:
  - Java中可以使用static关键字修饰类的成员变量和方法, 这些被static关键字修饰的成员也称为静态成员
  - 静态成员的限制级别是”类相关”的
  - 与类相关的静态成员被成员类变量或类方法
- 调用:
  - 静态方法可以被类名直接调用: ClassName.StaticMember
- 总结:
  - 1 公用静态变量: 一个类的静态成员会被该类所有实例对象共同使用
  - 2 类的静态变量和静态方法，在内存中只有一份，工所有对象共用，起到全局的作用.
6 对象数组
- 1 基本数组的定义:
  - int [] a = new int[2]; a[0]=2; a[1]=3;
  - int [] a = new int[]{2, 3};
  - int [] a = {2, 3};
- 2 对象数组: ClassName[] var = new ClassName[count]
- 3 对象数组在内存中的存储:
  - 声明对象数组变量时，在栈区为数组的每个元素都开辟一个引用的空间, 对象数组变量也在栈区
  - 然后在堆内存为每个元素初始化对应的元素对象
  - 再把元素对象在堆内存的地址赋给栈区的每个元素

    Student[] s1 = new Student[2];
    s1[0] = new Student('1');
    s1[1] = new Student('2');

    Student[] s2 = new Student[2] {
        new Student('1'),
        new Student('2')
    };

    Student[] s3 = {
        new Student('1'),
        new Student('2')
    }

四、核心类

1 基本类型的封装类

1 封装类的概念
- Java语言: 完全面向对象
- 8个基本数据类型也具备对应对象.
- 通过封装类可以把基本类型封装成对象使用.
- 从JDK1.5开始，Java允许将基本类型的值直接赋值给对应的封装类对象

// 封装类的实例
// 封装类(引用类, Reference types)转换为基本类型(Primitive types)
//      封装类型名.xxxValue() 来取得基础类型值
//          xxx指的是基本类型(Primitive Types)
int a = 10;
Integer obj = new Integer(10);
a = obj; // 自动转换
a = obj.intValue(); // 显示转换
float b = obj.floatValue();
  // boolean Boolean 
  // char   Character // *
  // byte   Byte
  // short  Short
  // int    Integer // *
  // long   Long
  // float  Float
  // double Double

2 封装类的作用
- 1 将字符串的值转换为基本类型
  - a.直接调用封装类的构造方法, 即Xxx(String s)
  - b.调用封装类提供的parseXxx(String s)静态方法
- 2 将基本类型转换为字符:
  - a.直接使用空字符串链接, ““+123
  - b.调用封装类提供的toString()静态方法, Integer.toString(123);
  - c.调用String类提供的valueOf()方法, String.valueOf(123);

// 1 字符串转为基本类型
int num1 = new Integer("10");
int num2 = Integer.parseInt("10");

2 装箱和拆箱

1 定义:
- 装箱: 是指将基本数据类型值转换为对应的封装类对象，即将栈中的数据封装成对象存到堆中的过程.
- 拆箱: 装箱的反过程
- 基本数据类型与其对应封装类之间能够自由进行转换，七本质是Java的自动装箱和拆箱过程.
2 目的:
- 实现基本数据类型和其对应封装类之间的自动转换

// 装箱
Integer obj = 10;
// 装箱的隐藏过程: obj = new Integer(10);

// 拆箱
int a = obj;

3 Object 类

1 介绍
- Java基础类库：Object, String, Math等
- Object对象类定义在java.lang包中, 是所有类的顶级父类
- 在Java体系中，所有类直接或间接的继承了Object类.
- 因此，任何Java对象都可以调用Object类中的方法，而且任何类型的对象都可以赋给Object类型的变量.
2 JDL文档和关联src源码
- Ctrl + 鼠标左键 -> 对类名
3 Object类的常用方法
- 1 equals()方法:
  - 对基本类型: == 比较两个变量值相等
  - 对(引用类型的)对象
    - == 标胶两个对象地址是否相等，即引用同一个对象
    - equals通常可以用于比较两个对象的内容是否相同
    - 注意: 由于==比较是对象的地址，所以两个对象永远不会相等, equal是比较内容，则只要内容相等即可相等
  - 查看equals方法, Ctrl+鼠标左键
  - 自定义类，需要重写equals方法，否则用的是Object.equals
- 2 toString()方法:
  - 在没有重写toString()方法之前
    - System.out.print(obj) 输出的是 对象名@hashCode
    - System.out.print(obj.toString()) 输出的是 对象名@hashCode
    - Object.toString 源码
      - return this.getClass().getName() + "@" + Integer.toHexString(this.hashCode());
  - 重写toString()方法后, 以上情况都是toString()方法的内容

方法	功能描述
protected Object clone()	创建并返回当前对象的副本，该方法支持对象复制
public boolean equals(Object)	判断指定的对象与传入的对象是否相等
protected void finalize()	垃圾回收器调用此方法来清理即将回收对象的资源
public final Class<?> getClass()	返回当前对象运行时所属的类型
public int hashCode()	返回当前对象的哈希代码值
public String toString()	返回当前对象的字符串表示

4 String StringBuffer StringBuilder

1 运算顺序: 从左到右, 最后都要转换为字符串
- “str” + 10 + 20 ==> “str1020” // 直接与字符串拼接
- 10 + 20 + “str” ==> “30str” // 先其他类型相加，在与字符串拼接
2 常用方法:
- length()
- subString(int begin Index [, int endIndex])
- lastIndexOf(String str [[, formIndex] …])
- toLowerCase() toUpperCase()
- String([char[] value String s StringBuffer bs STringBuilder sb])
- char charAt(int index)
- int compareTo(String s): == return 0
- boolean endsWith(String s)
- 更多: Ctrl + <- ==> String

3 StringBuffer 类

1 StringBuffer用来创建和操作字符串对象，和String区别:
- 1 String创建的字符串是不可变的，如果改变字符串，是在内存中创建一个新的字符串，字符串变量将引用新创建的字符串地址，而原来的字符串在内存中依然存在且内容不变，直到Java的垃圾回收系统对七进行销毁.
- 2 StringBuffer创建的字符串是可变的,当使用StringBuffer创建一个字符串后，该字符串内容可以通过append(),insert,setCharAt()等方法改变，而字符串变量所引用的地址一直不变，最终调用它的toString()方法转换成一个String对象.

2 常用方法:

StringBuffer(

String

int capacity

CharSequence seq)

length()
capacity() // 容量
append(String)
insert(int index, String)
replace(int start, int end, String str)
int delete(int start, int end)
StringBuffer reverse();
void setLength(int newLength)
More Ctrl + <- == > StringBuffer Or JDK Doc

4 StringBuilder
- 和StringBuffer类似
- 但是, StringBuffer是线程安全(即线程同步, synchronized)，StringBuilder没有实现线程安全
- 因此, StringBuilder性能较好

5 Scanner类

1 构造方法:
- Scanner(InputStream source [, String charsetName])
- 栗子:
  - Scanner scanner = new Scanner(System.in);
2 常用方法:
- next()
- nextInt()
- nextFloat()
- nextDouble()
- hasNextXxx
- useDelimiter(String): 设置分隔符，否则遇到空格就结束提取字符串
- More: Ctrl + <- ==> Scanner

6 Math and Date Class

1 Math提供的方法是静态的，可以直接调用Math.method()
- abs(double a)
- ceil(double a): 上界
- floor(double a): 下界
- round(double a):
- max(doubale a, double b) <==> min
- random(): 0-1 随机数
  - UUID.randomUUID()
- More: C-Left Or Doc
2 Date
- 1 构造方法:
  - Date() : Today
  - Date(long milliSeconds)
  - Date(int year, int month, int date)
  - Date(int year, int month, int date, int hrs, int min [, int sec])
  - Date(String s)
- 2 常用方法:
  - boolean after(Date when): return getMillisOf(this) > getMillisOf(when);
  - boolean before(Date when)

7 SimpleDateFormat

1 构造函数
- public SimpleDateFormat()
- public SimpleDateFormat(String pattern)
- public SimpleDateFormat(String patternm Locale local)
- public SimpleDateFormat(String pattern, DateFormatSymbols formatSymbols)
2 常用方法:
- public final String format(Date date)
3 SimpleDateFormat日期-时间格式模式参数

字母	日期或时间元素	表示	示例
G	Era	标志符	Text	AD
y	年	Year	1996, 96
M	年中的月份	Month	July; Jul; 07
d	月中的天数	Number	10
H	一天中的小时数(0-23)	Number	0
h	am/pm中的小时数(1-12)	Number	12
m	小时中的分钟数	Number	30
s	分钟中的秒数	Number	55
S	毫秒数	Number	978
w	年中的周数	Number	27
W	月中的周数	Number	2
D	年中的天数	Number	189
F	月中的星期	Number	2
E	星期的天数	Text	Tuesday; Tue
a	Am/Pm标记	Text	PM
k	一天中的小数数(24-1-23)	Number	24
K	am/pm中的小时数(1-11-0)	Number	0
z	时区	General	time zone	Pacific Standard Time; PST; GMT-08:00
Z	时区	RFC 822	time zone	-0800

4 SimpleDateFormat Example

Date d = new Date();

// 常用时间－日期格式:
// yyyy/MM/dd HH:mm:ss ==> 2015/07/13 14:02:15
// yyyy/MM/dd          ==> 2015/07/13
// HH:mm:ss            ==> 14:02:15
// yy-MM-dd            ==> 15-07-13

String datePattern = "yyyy/MM/dd HH:mm:ss";
SimpleDateFormat sdf = new SimpleDateFormat(datePattern);

System.out.println(sdf.format(d));
// Result: 2015/07/13 14:02:15

8 System

1 构造方法:
- 由于该类的构造方法是private的，所以无法创建该类的对象(实例化), 其内部的成员变量和成员方法都是static的，方法可以有类直接调用.
2 成员变量和方法:
- 属性:
  - in 标准输入
  - out 标准输出
  - err 标准出错
- 方法

// System类方法
// 1. arraycopy : 该方法的作用是数组拷贝，也就是将一个数组中的内容复制到另外一个数组中的指定位置，由于该方法是native方法，所以性能上比使用循环高效。
//  Syntax: public static void arraycopy(Object src, int srcPos, Object dest, int destPos, int length);
//  Example:
int [] a = {1, 2, 3, 4};
int [] b = new int[5]; // b = {0, 0, 0, 0, 0}
System.arraycopy(a, 1, b, 3, 2);
// b = {0, 0, 0, 2, 3};

// 2. currentTimeMillis: 长整型, 返回当前计算机时间
//      应用: 计算程序运行时间
long start = System.currentTimeMillis();
for (int i=0; i<1000000000; i++) {
    int a = 0;
}
long end = System.currentTimeMillis();
long time = end - start;

// 3. exit: 用于退出程序
//  Syntax: public static void exit(int status);
//      statue: 0 表示正常退出; 否则异常退出

// 4. gc方法: 请求系统进行垃圾回收，至于系统是否立刻回收，则取决于系统中垃圾回收算法的实现以及系统执行时的情况。
//  Syntax: public static void gc();

// 5 getProperty方法: 获得系统属性名为key的属性对应的值
//  Syntax: public static String getProperty(String key);
// 
// 属性名           属性值
// java.version     Java版本
// java.home        Java安装目录
// os.name          操作系统名称
// os.version       操作系统(内核)版本
// user.name        用户账户名称
// user.home        家目录
// user.dir         用户当前工作目录
//
// Example:
String osName = System.getProperty("os.name");

System.out.println(
    "Java Version: " + System.getProperty("java.version") + "\n" +
    "Java Home: " + System.getProperty("java.home") + "\n" +
    "OS name: " + System.getProperty("os.name") + "\n" +
    "OS Version: " + System.getProperty("os.version") + "\n" +
    "User Name: " + System.getProperty("user.name") + "\n" +
    "User Home: " + System.getProperty("user.home") + "\n" +
    "User Dir: " + System.getProperty("user.dir")
);

9 Runtime

四、核心类(二) Collection 集合

树形家族Collection
- Set
  - HashSet
- Queue
  - Deque
- List
  - ArrayList
  - Vector
- Map
  - HashMap

4.2.1 HashSet: 是基于HashMap的key保存的HashSet元素

特点: 无序、不重复
1 构造函数:
- HashSet();: Set = new HashSet();
- HashSet(Collection<? extends E> c);
- HashSet(int initialCapacity [, float loadFactor]);
2 常用方法:
- boolean add(DataType variable);
- Iterator iterator(): 返回对此 set 中元素进行迭代的迭代器。返回元素的顺序并不是特定的。
- int size()
- void clear();
- boolean isEmpty()
- boolean contains(Object o)
- boolean remove(Object o)

// 1 创建String类型的HashSet并添加元素
    Set<String> hSet = new HashSet<String>();
    hSet.add("h1");
    hSet.add("h2");
    hSet.add("h3");
    hSet.remove("h2");
    hSet.size();
    hSet.isEmpty();
    hSet.contains("h1");

// 2 迭代输出Set的值
    Iterator<String> it = hSet.iterator();
    while (it.hasNext()) {
        System.out.println(it.next());
    }

4.2.2 ArrayList Vector

特点: 有序、可重复
1 构造函数
- ArrayList()
- ArrayList(Collection<? extends E> c);
- ArrayList(int initialCapacity);
2 常用方法:
- boolean add([int index, ] E element);
- void addAll(Collection<? extends E> c);
- void clear();
- boolean contains(Object o);
- E get(int index);
- int indexOf(Object o);
- int lastIndexOf(Object o);
- boolean isEmpty();
- E remove(int index);
- boolean remove(Object o);
- protected removeRange(int fromIndex, int toIndex);
- int size();

// 1 创建ArrayList并添加元素
    List<String> aList = new ArrayList();
    aList.add("123");
    aList.add("456");
    aList.add("456");

    for (int i=0; i<aList.size(); ++i) {
        System.out.println(aList.get(i));
    }

4.2.3 HashMap

1 构造函数
- HashMap()
- HashMap(int initialCapacity [, float loadFactor])
- HashMap(Map<? extends K, ? extends V> m)
2 常用方法:
- V put(K key, V value);
- void putAll(Map<? extends K, ? extends V> m);
- int size();
- V get(Object key);
- boolean isEmpty();
- V remove(Object key);
- Set keySet(); // 获得键集合
- Collection values(); // 返回此映射所包含的值
- boolean containsKey(Object key);
- boolean containsValue(Object value);

// HashMap Sample
Map<Object, Object> map = new HashMap<Object, Object>();
        map.put("username", "gardom");
        map.put("password", "123456");
        map.put("administer", "0");

        Iterator<Object> it = map.keySet().iterator();
        while (it.hasNext()) {
            String key = (String) it.next();
            System.out.println(key + ": " +map.get(key));
        }
        
        System.out.println(map.keySet());
        System.out.println(map.values());
        System.out.println(map.size());
        System.out.println(map.hashCode());
        System.out.println(map.containsKey("username"));
        System.out.println(map.containsValue("123456"));

五、类之间的关系

1 继承与多态

1 继承(inheritance): extends
- 1 父类与子类:
  - 被继承的类, 称为基类(base class)，父类(parent class)或超类(super class)
  - 继承者, 称为子类(child class 或 subclass) 或者派生类(derived class)
- 2 单继承:　子类只有一个父类，一个父类可以有多个子类
- 3 语法: [访问符] [修饰符] class 子类 extends 父类 { … }
- 4 构造函数调用:
  - 先调用父类构造函数，在调用子类构造函数，再调用其他
2 多态(polymorphism)
- 1 定义：
  - 上转型对象: 多态通常体现在具有继承关系和实现关系的类之间，一个父类具有多个子类，可以将子类对象直接赋值给一个父类引用变量，无需任何类型转换.
  - 方法重写Override: 子类重写父类的方法也是Java多态性的一种体现.当子类继承父类时，如果父类的方法无法满足子类的需要，子类可以对父类中的方法进行改造.
- 2 方法重写Override　条件:
  - 1 方法名和参数列表必须完全相同
  - 2 子类方法的返回值类型与父类保持一致，或是父类方法返回值类型的子类
  - 3 子类方法声明的异常与父类保持一直，或是父类方法声明的异常的子类;
  - 4 父类中的私有方法不能被子类重写, 如果在子类中定义了父类重名的私有方法，则该方法是子类的一个新方法, 与父类中的私有方法无关;
  - 5 子类方法的可访问性必须与父类方法的可访问性保持一致，或者更加公开.若父类方法可访问性为protected, 子类方法只能为protected或public, 不能为private或缺省;
  - 6 不能重写静态方法
- 3 Super 关键字 : 构造方法
  - 1 主要用途:
    - 1 在子类的构造方法中调用父类的构造方法super(), super代表父类
    - 2 在子类方法中访问父类的属性或方法, 常用于子类重写方法Override, super不能访问父类私有属性和方法
  - 2 关于子类:
    - 子类构造方法默认隐式调用父类构造方法, 相当于无参的构造方法第一句添加super(), 这就是为什么先调用父类构造方法的情况, 实际上都是从子类构造方法入口
    - 如果父类没有无参的构造方法, 子类的构造方法必须显示调用父类的有参构造方法super(args...)
    - 子类重写调用父类的方法时，不必在第一句，所以先调用子类覆盖方法，再调用父类方法
      - 语法: super.method();
- 4 Final 关键字:
  - 1 含义: final关键字是一个修饰符，表示不可改变的、最终的, 用于修饰属性、方法和类;
    - 1 修饰变量Attribute: 表示该变量不可改变, 即常量;
    - 2 修饰方法Method: 表示方法不可被子类重写，即最终方法;
    - 3 修饰类Class: 表示该类不可被继承，即最终类

// 多态: 父类引用指向子类对象
//  作用: 动态调用重写方法
// 父类A, 子类B,C均继承A
A obj1 = new B();
A obj2 = new C();

// 父类
public class Base {
    public void print() {
        System.out.println("父类");
    }
}

// 子类B
public class B extends Base {
    public void print() {
        System.out.println("子类B");
    }
}

// 子类C
public class C extends Base {
    public void print() {
        System.out.println("子类C");
    }
}

// Demo
public class OverrideDemo {
    public static void main (String[] args) {
        // 多态
        // obj 指向自己
        Base obj = new Base();
        obj.print();
        
        // obj指向子类B对象
        obj - new B();
        obj.print();

        // obj指向子类C对象
        obj = new C();
        obj.print();
    }
}

2 其他关系

IntelliJ Idea 快捷键(KeyMaps)

Fri, 10 Jul 2015 00:00:00 +0800

一、相关文件

官方，快捷键全

二、必须记住

Ctrl+ShiftSpace 自动补全代码
Shift+Enter: 创建新行并跳到下一行
Shift+F10: Run, (我喜欢改成Ctrl+R)
Ctrl+J: 常用的有fori/sout/psvm+Tab即可生成循环、System.out、main方法等boilerplate样板代码，用Ctrl+J可以查看所有模板
Ctrl+Alt+O 优化导入的类和包
Ctrl+X 删除行
Ctrl+D 复制行
Ctrl+/ 或 Ctrl+Shift+/ 注释（// 或者/…/ ）
Alt+Insert 生成代码(如get,set方法,构造函数等)
Alt+ Up/Down 在方法间快速移动定位
Ctrl+Shift+Up/Down 代码向上/下移动。
Ctrl+Q 显示注释文档

三、常用快捷键

lt+回车导入包,自动修正
Ctrl+N 查找类
Ctrl+Shift+N 查找文件
Ctrl+Alt+L 格式化代码
Ctrl+E或者Alt+Shift+C 最近更改的代码
Ctrl+R 替换文本
Ctrl+F 查找文本
Ctrl+空格代码提示
Ctrl+Alt+Space 类名或接口名提示
Ctrl+P 方法参数提示
Ctrl+Shift+Alt+N 查找类中的方法或变量
Alt+Shift+C 对比最近修改的代码
Shift+F6 重构-重命名
Ctrl+Shift+先上键
Ctrl+J 自动代码
Ctrl+E 最近打开的文件
Ctrl+H 显示类结构图
Alt+F1 查找代码所在位置
Alt+1 快速打开或隐藏工程面板
Ctrl+Alt+ left/right 返回至上次浏览的位置
Alt+ left/right 切换代码视图
F2 或Shift+F2 高亮错误或警告快速定位
代码标签输入完成后，按Tab，生成代码。
选中文本，按Ctrl+Shift+F7 ，高亮显示所有该文本，按Esc高亮消失。
Ctrl+W 选中代码，连续按会有其他效果
选中文本，按Alt+F3 ，逐个往下查找相同文本，并高亮显示。
Ctrl+Up/Down 光标跳转到第一行或最后一行下
Ctrl+B 快速打开光标处的类或方法

Eclipse KeyMaps

Fri, 10 Jul 2015 00:00:00 +0800

资源来自网友整理

一、快捷键修改:

菜单栏中Window–>Preferences–>General–>Keys来查看和修改快捷键绑定。

二、编辑

Ctrl+1 快速修复（最经典的快捷键,就不用多说了，可以解决很多问题，比如import类、try catch包围等）
Ctrl+Shift+F 格式化当前代码
Ctrl+Shift+M 添加类的import导入
Ctrl+Shift+O 组织类的import导入（既有Ctrl+Shift+M的作用，又可以帮你去除没用的导入，很有用）
Ctrl+Y 重做（与撤销Ctrl+Z相反）
Alt+/ 内容辅助（帮你省了多少次键盘敲打，太常用了）
Ctrl+D 删除当前行或者多行
Alt+↓ 当前行和下面一行交互位置（特别实用,可以省去先剪切,再粘贴了）
Alt+↑ 当前行和上面一行交互位置（同上）
Ctrl+Alt+↓ 复制当前行到下一行（复制增加）
Ctrl+Alt+↑ 复制当前行到上一行（复制增加）
Shift+Enter 在当前行的下一行插入空行（这时鼠标可以在当前行的任一位置,不一定是最后）
Ctrl+/ 注释当前行,再按则取消注释

三、选择

Alt+Shift+↑ 选择封装元素
Alt+Shift+← 选择上一个元素
Alt+Shift+→ 选择下一个元素
Shift+← 从光标处开始往左选择字符
Shift+→ 从光标处开始往右选择字符
Ctrl+Shift+← 选中光标左边的单词
Ctrl+Shift+→ 选中光标又边的单词

四、移动

Ctrl+← 光标移到左边单词的开头，相当于vim的b
Ctrl+→ 光标移到右边单词的末尾，相当于vim的e

五、搜索

Ctrl+K 参照选中的Word快速定位到下一个（如果没有选中word，则搜索上一次使用搜索的word）
Ctrl+Shift+K 参照选中的Word快速定位到上一个
Ctrl+J 正向增量查找（按下Ctrl+J后,你所输入的每个字母编辑器都提供快速匹配定位到某个单词,如果没有,则在状态栏中显示没有找到了,查一个单词时,特别实用,要退出这个模式，按escape建）
Ctrl+Shift+J 反向增量查找（和上条相同,只不过是从后往前查）
Ctrl+Shift+U 列出所有包含字符串的行
Ctrl+H 打开搜索对话框
Ctrl+G 工作区中的声明
Ctrl+Shift+G 工作区中的引用

六、导航

Ctrl+Shift+T 搜索类（包括工程和关联的第三jar包）
Ctrl+Shift+R 搜索工程中的文件
Ctrl+E 快速显示当前Editer的下拉列表（如果当前页面没有显示的用黑体表示）
F4 打开类型层次结构
F3 跳转到声明处
Alt+← 前一个编辑的页面
Alt+→ 下一个编辑的页面（当然是针对上面那条来说了）
Ctrl+PageUp/PageDown 在编辑器中，切换已经打开的文件

七、调试

F5 单步跳入
F6 单步跳过
F7 单步返回
F8 继续
Ctrl+Shift+D 显示变量的值
Ctrl+Shift+B 在当前行设置或者去掉断点
Ctrl+R 运行至行(超好用，可以节省好多的断点)

八、重构

（一般重构的快捷键都是Alt+Shift开头的了）
Alt+Shift+R 重命名方法名、属性或者变量名（是我自己最爱用的一个了,尤其是变量和类的Rename,比手工方法能节省很多劳动力）
Alt+Shift+M 把一段函数内的代码抽取成方法（这是重构里面最常用的方法之一了,尤其是对一大堆泥团代码有用）
Alt+Shift+C 修改函数结构（比较实用,有N个函数调用了这个方法,修改一次搞定）
Alt+Shift+L 抽取本地变量（可以直接把一些魔法数字和字符串抽取成一个变量,尤其是多处调用的时候）
Alt+Shift+F 把Class中的local变量变为field变量（比较实用的功能）
Alt+Shift+I 合并变量（可能这样说有点不妥Inline）
Alt+Shift+V 移动函数和变量（不怎么常用）
Alt+Shift+Z 重构的后悔药（Undo）
九、其他
Alt+Enter 显示当前选择资源的属性，windows下的查看文件的属性就是这个快捷键，通常用来查看文件在windows中的实际路径
Ctrl+↑ 文本编辑器上滚行
Ctrl+↓ 文本编辑器下滚行
Ctrl+M 最大化当前的Edit或View （再按则反之）
Ctrl+O 快速显示 OutLine（不开Outline窗口的同学，这个快捷键是必不可少的）
Ctrl+T 快速显示当前类的继承结构
Ctrl+W 关闭当前Editer（windows下关闭打开的对话框也是这个，还有qq、旺旺、浏览器等都是）
Ctrl+L 文本编辑器转至行
F2 显示工具提示描述

CSS 布局解决浮动问题

Thu, 09 Jul 2015 00:00:00 +0800

一、问题(Question):

浮动脱离文档流，导致无法撑开DIV解决:

二、解决办法(Solution):

在父DIV中加入
- 1 声明该DIV的伪类选择器divName::after (divName只是标识，泛指能找到DIV的选择器名)
- 2 必须是block
- 3 高度必须为0
- 4 内容随意，但必须有
- 5 清楚两边浮动: clear: both
- 6 overflow: hidden;

三、CSS　实现代码(Implement Code)

    divName::after `{
        display: block;
        height: 0;
        content: "0";
        clear: both;
        overflow: hidden;
    }`

Oracle Database

Wed, 08 Jul 2015 00:00:00 +0800

一、Orcle Database 数据库客户端的安装

安装
概述
- 数据库 <-1—–n-> 表空间
- 表空间 <-1—–n-> 表+索引+视图等

二、表空间(tablespace)及用户管理(grant/revoke)

1 TableSpace

-- 1. Create TableSpace
    CREATE TABLESPACE tablespace_name
    DATAFILE 'path/to/database_file'
    SIZE size;

    -- Ex
        CREATE TABLESPACE jsp_20150708
        DATAFILE '/home/potter/jsp_20150708.oradb'
        SIZE 100M;

2 管理用户

默认用户

1 SYS : 超级用户,具有最高权限 sysdba角色权限 create database权限

主要用来维护系统信息和管理实例

2 SYSTEM : 操作管理员, 权限: sysoper角色没有create database权限
- 管理数据库用户、权限和存储等
3 SCOTT : 普通用户

-- CREATE USER 语法:

    -- CREATE USER username
       IDENTIFIED BY password
       [DEFAULT TABLESPACE tablespace_name];

    -- Ex
        -- CREATE USER gardom
           IDENTIFIED BY 123456
           DEFAULT TABLESPACE jsp_20150708.oradb;

3 用户权限与角色
- 权限: 创建用户后必须赋予权限才可以登陆，权限是指执行特定类型sql命令或访问其他方案对象的权利
  - Ex: CREATE SESSION # 连接数据库权限; CREATE TABLE # 创建表的权限等
- 角色:
  - 含义: 相关权限的命令集合，使用角色的目的是简化权限的管理
    - Ex: CONNECT, RESOURCE
4 授权语法: 权限或角色
- Syntax: GRANT privilege_name or role TO user
- Ex:
  - 1 GRANT CREATE SESSION TO gardom; – 单行注释
  - 2 GRANT CREATE RESOURCE, CONNECT TO /多行注释/

三、对表操作: 就是普通SQL语句。。

1 添加表CREATE TABLE

Syntax:
    CREATE TABLE tbl_name (
        column_name1 data_type [constraint_type],
        column_name2 data_type [constraint_type],
        column_name3 data_type [constraint_type],
        ....
    );

Ex:
    CREATE TABLE tb_user (
        id NUMBER(5) PRIMARY KEY,
        user_name NVARCHAR2(20) NOT NULL,
        user_password NVARCHAR2(30) NOT NULL
    );

1.1 五大约束: 普通SQL, 这里就不再赘述了
- 1 NOT NULL: – 命名规范: nn_name
- 2 UNIQUE – 命名规范: uk_name (uk –> unique key)
- 3 PRIMARY KEY – 命名规范: pk_name (pk –> primary key)
- 4 FOREIGN KEY tbl_name(column_name) – 命名规范: fk_name
- 5 CHECK(condition_expression) – 命名规范: ck_name
2 修改表ALTER TABLE:
- Syntax:
  - ALTER TABLE table_name ADD (列名数据类型 [约束]); -- 添加列，多列用逗号隔开
  - ALTER TABLE tb_name MODIFY (column_name data_type [约束]); -- 修改列属性
  - ALTER TABLE tb_name ADD CONSTRAINT constraint_name PRIMARY KEY(column_name); -- 添加约束，这里是主键
  - DESC tb_name; -- 查看表结构
3 删除表DROP TABLE:
- Syntax:
  - DROP TABLE tbl_name; -- 删除表
4 注释：
- Syntax:
  - COMMENT ON TABLE tbl_name IS 'tbl_comments'; -- 为表添加注释语句
  - COMMENT ON COLUMN column_name IS 'col_comments'; -- 为列
- Ex:
  - COMMENT ON TABLE tb_user IS ‘User Table’;
5 解释:
- SQL 含义: *Structure Query Language, 结构化查询语句,针对数据库的
- SQL 分类:
  - 1 数据控制语言(DCL): 提取权限控制命令
    - GRANT and REVOKE
  - 2 数据定义语言(DDL): 用于改变数据库结构
    - CREATE ALTER DROP
  - 3 数据操纵语言(DML): 用于检索修改和插入数据
    - INSERT SELECT DELETE UPDATE
  - 4 事物控制语言(TPL): 保证事务的执行
    - COMMIT ROLLBACK SAVEPOINT
- PL/SQL:
  - 含义: 是Oracle对SQL的扩展语言
  - 功能: SQL的基础上，可以使用变量和逻辑控制语句编写功能模块，完成复杂要求.
  - 栗子

    SET serveroutput ON; -- 打开输出选项
    DECLARE
        -- 定义字符串变量
        v_ename VARCHAR2(10);
    BEGIN
        -- 执行部分
        -- & 表示要接收从控制台输入的变量
        SELECT ename INTO v_name FROM emp WHER empno=&empno;
        dbms_output.put_line('雇员名:' || v_name); -- 在控制台显示雇员名
    END;

完整表demo

    CREATE TABLE tb_user (
        id NUMBER(5) primary key,
        user_name NVARCHAR2(20) NOT NULL,
        user_password NVARCHAR2(30) NOT NULL
        );
    COMMENT ON COLUMN tb_user.id IS '标识';
    COMMENT ON COLUMN tb_user.user_name IS '用户名';
    COMMENT ON COLUMN tb_user.user_password IS '密码';

    CREATE TABLE tb_type 
    (
        id NUMBER(5) PRIMARY KEY,
        type_sign NUMBER(10) UNIQUE,
        type_name NVARCHAR2(20) NOT NULL,
        type_intro NVARCHAR2(100) 
    );
    COMMENT ON COLUMN tb_type.id IS '序号';
    COMMENT ON COLUMN tb_type.type_sign IS '标识';
    COMMENT ON COLUMN tb_type.type_name IS '类型名';
    COMMENT ON COLUMN tb_type.type_intro IS '信息类别';

    CREATE TABLE tb_info 
    (
        id NUMBER PRIMARY KEY,
        info_type NUMBER NOT NULL,
        info_title NVARCHAR2(80) NOT NULL,
        info_linkman NVARCHAR2(50) NOT NULL,
        info_phone NUMBER,
        info_date DATE,
        info_state NVARCHAR2(10),
        info_content NVARCHAR2(1000),
        info_email NVARCHAR2(30),
        info_payfor NVARCHAR2(20),
        FOREIGN KEY (info_type) REFERENCES tb_type(type_sign)
    );
    COMMENT ON COLUMN tb_info.id IS '序号';
    COMMENT ON COLUMN tb_info.info_type IS '类型';
    COMMENT ON COLUMN tb_info.info_title IS '标题';
    COMMENT ON COLUMN tb_info.info_linkman IS '联系人';
    COMMENT ON COLUMN tb_info.info_phone IS '电话';
    COMMENT ON COLUMN tb_info.info_date IS '日期';
    COMMENT ON COLUMN tb_info.info_state IS '审核状态';
    COMMENT ON COLUMN tb_info.info_content IS '内容';
    COMMENT ON COLUMN tb_info.info_email IS '邮箱';
    COMMENT ON COLUMN tb_info.info_payfor IS '付费状态';

四、管理数据: INSERT UPDATE DELETE

1 添加/插入数据

Syntax:
    INSERT INTO tbl_name[(column1, column2...)] VALUES (value1, value2 ...)

Example:
    INSERT INTO tb_user(id, user_name, user_password) VALUES (2015, 'Gardom', '123456');

2 使用序列

-- 1 创建序列:
    -- Syntax:
        CREATE SEQUENCE squence_name
            START WITH 1    -- 从1开始
            INCREMENT BY 1  -- 每次加1
            MAXVALUE 2000   -- 最大值2000
            MINVALUE        -- 最小值
            NOCYCLE         -- 不循环
            NOCACHE;        -- 不缓存

    -- Example:
        CREATE SEQUENCE user_seq
            START WITH 1
            INCREMENT BY 1;

-- 2 序列操作:
    -- Syntax:
        -- 访问序列的值
            - NEXTVALUE : 返回系列的下一个值
            - CURRVAL   : 返回序列的当前值(第一次NEXTVAL初始化后才能用CURRVAL)
            -- 栗子:
                SELECT user_seq.CURRVAL FROM dual;

            -- Tips:
                dual是Oracle中的虚拟表，可用于查看当前用户，当前系统时间等，序列值.

        -- 更改序列
            -- 栗子
                ALTER SEQUENCE user_seq MAXVALUE 5000; -- 更改序列
                DROP SEQUENCE user_seq;

        -- 运用
            -- 栗子
                INSERT INTO tb_user (id, user_name, user_password)
                    VALUES (user_seq.nextval, 'gardon', '123456');
            

3 修改数据
- 提交(COMMIT)和回滚(ROLLBACK):　这里所说的都是对Oracle DB, 其他不一定
  - 提交(COMMIT):
    - DML语言，需要commit:
      - 比如update, delete, insert等修改表中数据
    - 其他，如DDL语言，不需要回滚
      - 比如create, drop等改变表结构的，因为内部隐藏了commit
  - 回滚(ROLLBACK)
    - 必须在没有提交之前才可以回滚；提交后只能查看日志
- 修改数据UPDATE

UPDATE Syntax:
    UPDATE tbl_name
        SET column_name = new_value
            [, column_name2 = new_value2 ...]
        [WHERE condition_expression];
    COMMIT; -- Oracle DB need commit.

UPDATE Example:
    -- 根据ID修改用户密码
        UPDATE tb_user 
            SET user_password = '654321' 
            WHERE id= '1';
        COMMIT;

    -- 更新所有数据，即不要WHERE条件语句, 注意安全
        UPDATE tb_user
            SET user_password = '654321';

4 删除数据

Syntax:
    DELETE FROM tb_user
        [WHERE condition_expression];

Example:
    -- 根据ID删除用户
        DELETE FROM tb_user
            WHERE id = '1';
        COMMIT;

    -- 删除整个表, Carefully
        DELETE FROM tb_user;
        COMMIT;

五、查询数据

1 基础SELECT
- 含义: 查询(SELECT)语句用于从表中选取数据,结果存储在一个虚拟的结果表中.

Syntax:
    SELECT column_name [, column_name2 ...]
        FROM tbl_name
        [WHERE condition_expression]
        [ORDER BY column_name [ASC | DESC]];

Example:
    SELECT id, user_name
        FROM tbl_user
        WHERE user_name='gardom' and user_password='123456';

2 模糊SELECT: LIKE, _

Syntax:
    -- % : 代表零个或多个字符
    -- _ : 只能代表一个字符
        WHERE column_name LIKE '%str%';
        WHERE column_name LIKE '%str';
        WHERE column_name LIKE 'str%';
        WHERE column_name LIKE '_str';
        WHERE column_name LIKE 'str_';
        WHERE column_name LIKE '_str_';
        WHERE column_name LIKE 'str1_str2'; 
        WHERE column_name LIKE '_str%'; .....

3 多表SELECT
- 1 等值连接: 返回多个表中所有能匹配的记录
  - SELECT t.*, i.* FROM tb_type t, tb_info i WHERE t.type_sign = i.info_type;
  - -- t, i为表的别名;
- 2 左连接 : 以左表为基础,即使右表中没有匹配，也从左表返回所有行
  - LEFT JOIN
  - SELECT t.*, i.* FROM tb_type t LEFT JOIN tb_info i ON t.type_sign = i.info_type;
- 3 右连接 : 以右表为基础, …
  - RIGHT JOIN
- 4 全关联 : 只要其中一个表中存在匹配，就返回所有行
  - FULL JOIN
4 Oracle伪列
- 伪列: 就想一个表列，但是它并没有存储在表中;
- 伪列可以在表中查询，但不能插入、更新和删除;
- 常用伪列:
  - ROWID 是表中行的存储地址;
    - 该地址可以唯一表示数据库中的一行;
  - ROWNUM 是查询返回的结果中行的序号
    - 可以使用它来限制查询返回的行数
    - 通常用来分页.
5 子查询和分页SQL
- 子查询: 嵌套查询
- 分页:

-- 分页:
    SELECT * 
        FROM (
            SELECT a.*, ROWNUM rn 
                FROM (
                    SELECT * FROM tb_info ORDER BY info_date DESC
                    ) a
                WHERE ROWNUM <= 5 -- 注意，子查询不用写分号
        ) 
        WHERE rn >= 2;

恢复 Grub 引导

Tue, 07 Jul 2015 00:00:00 +0800

问题描述:

原本多系统(Win + Linuxs)，但windows坏了，要重装，但想保留Ubuntu等
安装完Win8后, Grub没了，想要恢复Grub引导

方法(推荐): LiveCD 进入(大部分Linux发行版都行)

步骤:
- 1 查看系统分区(一般是sda, 由于多系统, 找到其中一个linux根目录所在的分区/sda/sdaX)
  - sudo fdisk -l :
  - 这里假设: Ubuntu 分区为 /dev/sda6
- 2 将根分区/dev/sd6挂载到/mnt
  - mount /mnt /dev/sda6
- 3 如果没给/boot单独分区，不需要挂载 mount /mnt/boot /dev/sda5:
- 4 安装Grub引导到/dev/sda 注意: /dev/sda是这整个磁盘, 不是某个分区 *grub-install --root-directory=/mnt /dev/sda
- 5 绑定LiveCD的一些东西:
  - mount --bind /proc /mnt/proc:
  - mount --bind /dev /mnt/dev
  - mount --bind /sys /mnt/sys
- 6 用Chroot方式进入原系统, 并更新grub, 是grub引导生效:
  - chroot /mnt /bin/bash
  - update-grub
  - 提示: 现在是以root方式进入原系统，忘记密码可以以这种方式修改密码.
- 7 退出Chroot, 重启系统即可:
  - exit Or Ctrl + D
  - 谨慎点, 卸载刚才绑定的分区:
    - umount /dev/sys
    - umount /dev/dev
    - umount /dev/proc
  - reboot
- 8 恭喜，修复Grub

懒人脚本, 开包即用, 单机下载

Html CSS 基础

Sun, 05 Jul 2015 00:00:00 +0800

` `

第三章 html表格应用和布局

table

标签
- tr td th
- thead tbody tfoot (逻辑分类)
属性
- 填充
  - cellspacing: 单元格与边框、单元格与单元格, cellspacing=”5”
  - cellpadding: 单元格内边框与内容 cellpadding=”10”;
- 跨行列(td)
  - colspan: 跨X列, colspan=”2”
  - rowspan: 跨Y行

第四章 html框架

常用属性

a

属性
- target:
  - Usage: target=”值”
  - 值 :
    - _blank : (当前浏览器)在新窗口打开
    - _self: 默认，覆盖当前页, 在相同的框架中打开链接文档
    - _parent: 在父框中打开 (相对iframe)
    - _top: 在整个窗口中打开被链接文档 (相对iframe)
    - framename: 在指定的框架中打开链接文档
      iframe
语法
- <iframe src="引用页地址" name="框架表示名" frameborder="边框" scrolling="no"><iframe>
属性
- src : url或相对url
- name
- frameborder: 类似border-size
- scrolling

第五章 CSS: Cascading Style Sheets(层叠样式)

5.0 选择器

标签选择器: div, p, hX, img, span, ul, li, ol, a …
类选择器: class
ID选择器: id
复杂选择器
- 群组选择器: div,p,#id,.c {color:red;}
- 后代选择器 (只对后代起作用):
  - 直接后代选择器(间接不起作用): div>p { color:red; }
  - 全部后代选择器: div p {color:red; } /只对div内的p标签作用/

5.0.1 单位: px <-> em

px: 普通像素单位
em: 相对于字体大小的倍数
- 2em: 当font-size:12px时, 2em = 24px

5.0.2 选择器优先级

优先级: id > class > 标签, (…与顺序无关)

5.1 文本属性

字体、字号属性（font）
- font
- color: RGB Or Name
- font-weight: 粗细(bold)
- font-size: 字体大小
- font-family: 字体家族
  - Value: ..
行距、对齐等:
- line-height: 行高
  - 案例:
    - 居中: center { line-height: ...}
- letter-spacing: 字符间距
- text-align: 文本对齐
  - Value:
    - center
    - left
    - right
    - justify
    - inherit
  - 案例:
    - li标签左对齐: li { text-align: left; /*默认左对齐*/}
- text-decoration: 文本修饰, 下划线等
  - Value:
    - none
    - underline
    - overline
    - line-through
    - inherit
- white-space: 空白处理, 不换行(nowrap)
- text-transform: 字母大小写
- text-indent: 缩进, { text-indent: 2em;}
- direction: 规定文本方向,书写方向

5.2 背景属性

background:
- background
  - background: url(images/bg.jpg) no-repeat;
  - background: yelow url(img/bg.png) no-repeat;
  - background: yelow url(img/bg.png) no-repeat fixed;
- background-color: #ccc;
- background-image: url(…);
- background-repeat: 重复背景图片
  - no-repeat
  - repeat
  - repeat-x
  - repeat-y
  - round
  - space
- background-position: 位置坐标、偏移量
  - Value: top / bottom / center / left / right
  - Syntax:
    - background-position: 水平size 垂直size;
      - 坐标轴: x正向右, y正向下
      - background-position-x
      - background-position-y
      - 水平size:
        
        正数: 图片右移size
        
        负数: 图片左移size
      - 垂直size:
        
        正数: 图片下移size
        
        负数: 图片上移size
    - 应用:
      - 右下角: background-position: bottom right;
      - 图标截取-背景便宜: background-position + width + height

5.3 列表(li)属性

list-style (用在导航菜单去掉圆点: list-style:none;)
- Value:
  - none : 去掉原点
  - disc : 实心圆
  - circle : 空心圆
  - sqare : 实心正方形
  - decimal : 数字, ol默认类型
  - url()
- 属性:
  - list-style-position : 圆圈在内或外
    - outside: 默认
    - inside

第六章盒模型

6.1 立体盒模型(上至下)

1 内容
2 内边距/填充 padding
3 边框 border
- border
  - border-top
  - border-right
  - border-bottom
  - border-left
- border-color
- border-width
- border-style
  - Value: none / solid / dotted / dashed ;
    - double : 双虚线
    - hidden
    - groove / ridge / inset / outset : 凹
- 例子:
  - border: 1px solid red;
  - border-right: 5px dotted blue;
  - border-style: none;
4 background-image
5 background-color
6 外边距/便捷 margin
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- 例子
  - margin: 1px 2px 3px 4px
  - margin: 1px 2px;
  - margin: 0 auto; /水平居中/
  - margin-left: 10px;

6.2 元素的宽度及实际占位

公式
- 盒子实际宽度/高度 = height/width + padding + border、、

6.3 浮动 float

浮动float
- 效果: 脱离文档流
清除浮动 clear
- 作用:
  - 如果前一个元素存在左浮动或右浮动，则换行以区隔
  - 只对块级元素有效
- 取值
  - right / left / both / none
浮动脱离文档流，导致无法撑开DIV解决:
- 在父DIV中加入
  - 1 声明该DIV的伪类选择器divName::after (divName只是标识，泛指能找到DIV的选择器名)
  - 2 必须是block
  - 3 高度必须为0
  - 4 内容随意，但必须有
  - 5 清楚两边浮动: clear: both
  - 6 overflow: hidden;

    divName::after `{
        display: block;
        height: 0;
        content: "0";
        clear: both;
        overflow: hidden;
    }`

6.4 定位 Position

Value
- static: Default
- absolute: 相对于浏览器最左上角位置偏移
- fixed: 保留位置,不随鼠标移动
- relative: 相对于自身原来位置偏移
Position + z-index: z-index值大的显示在上层(表面)
- z-index: 整数值

6.5 Overflow: 内容超出范围(height, width)

Value
- visiable
- auto
- hidden
- scroll

6.6 Display

Value:
- block
- inline-block
- inline
- none

第七章 CSS二

7.1 超链接 a

四种状态
- a:link : 未访问过
- a:visited : 已访问
- a:hover : 鼠标移上状态
- a:active : 激活选定状态
属性:
- color

7.2 box-shadow

MySQL (五) 函数和操作符

Sun, 21 Jun 2015 00:00:00 +0800

操作符	优先级
BINARY, COLLATE	15
!	14
-(一元减号), ~(一元比特取反)	13
^	12
*, /, DIV, %, MOD	11
-, +	10
«, »	9
&	8
\|	7
=, <=>, >=, >, <=, <, <>, !=, IS, LIKE, REGEXP, IN	6
BETWEEN, CASE,WHEN,THEN,ELSE	5
NOT	4
&&, AND	3
\|\|, OR, XOR	2
:=	1

1.2 圆括号 (…):
- select 1+2*3; # 7
- select (1+2)*3; # 9
1.3 比较函数和操作符:
- 1 比较函数的结果: 1(TRUE), 0(FALSE), NULL;
- 2 将字符串转换为数字:
  - select 1 > ‘6x’; # 0
  - select 7 > ‘6x’; # 1
  - select 0 > ‘x6’; # 0
  - select 0 = ‘x6’; # 1, 任何非数字字符串转为数字时, 值为0
- 3 = 等于:
  - select 1 = 0; # 0
  - select ‘0’ = 0; # 1
  - select ‘0.0’ = 0; # 1
  - select ‘0.01’ = 0; # 0
  - select ‘.01’ = 0.01; # 1
- 4 <=> NULL-safe equal
  - 解释: 这个操作符和=操作符执行相同的比较操作，不过在两个操作码均为NULL时，其所得值为1而不为NULL，而当一个操作码为NULL时，其所得值为0而不为NULL.
  - select 1<=>1, NULL<=>NULL, 1<=>NULL; # 1, 1, 0
  - select 1 = 1, NULL = NULL, 1 = NULL; # 1, NULL, NULL
- 5 <> != 不等于
  - select ‘.01’ <> ‘0.01’; # 1
  - select .01 <> ‘0.01’; # 0
  - select ‘zapp’ <> ‘zappp’; # 1
- 6 < <= > >=
- 7 IS boolean_value 和 IS NOT boolean_value
  - 这里布尔值: TRUE、FALSE、UNKNOWN
  - select 1 IS TRUE, 0 IS FALSE, NULL IS UNKNOWN; # 1, 1, 1
  - select 1 IS NOT UNKNOWN, 0 IS NOT UNKNOWN, NULL IS NOT UNKNOWN; # 1, 1, 0
  - select ‘a’ is true, ‘a’ is false, ‘a’ is unknown; # 0, 1, 0
- 8 expr BETWEEN min AND max 和 expr NOT BETWEEN min AND max
  - 注意: min <= expr and expr <= max
  - select 1 BETWEEN 2 AND 3; # 0
  - select ‘b’ BETWEEN ‘a’ AND ‘c’; # 1
  - select 2 BETWEEN 2 AND ‘3’; # 1
  - select 2 BETWEEN 2 AND ‘x-3’; # 0
- 9 COALESCE(value, ...):
  - 返回值: 为列表当中的第一个非NULL值; 在没有非NULL值是返回NULL;
  - select COALESCE(NULL, 1), COALESCE(NULL, NULL, NULL); # 1, NULL
- 10 GREATEST(value1, value2, ...) 和 LEAST(value1, ...)
  - 解释: GREATEST当有2个以上参数时，返回最大的参数;
  - slect GREATEST(2, 0, 1), GREATEST(‘B’, ‘A’, ‘C’); # 2, ‘C’
- 11 expr IN (value, ...)
  - 若expr 为IN列表中的任意一个值，则其返回值为 1 , 否则返回值为0。假如所有的值都是常数，则其计算和分类根据 expr 的类型进行。这时，使用二分搜索来搜索信息。如IN值列表全部由常数组成，则意味着IN 的速度非常之快。如expr 是一个区分大小写的字符串表达式，则字符串比较也按照区分大小写的方式进行。
  - select 2 IN (0, 3, 5, ‘wef’); # 0
  - select ‘wef’ IN (0, 3, ‘wef’); # 1
- 12 ISNULL(expr)
  - select ISNULL(1+1), ISNULL(1/0); # 0, 1
- 13 INTERVAL(N, N1, N2, ...)
  - 假如N < N1，则返回值为0；假如N < N2 等等，则返回值为1；假如N 为NULL，则返回值为 -1 。所有的参数均按照整数处理。为了这个函数的正确运行，必须满足 N1 < N2 < N3 < ……< Nn 。其原因是使用了二分查找(极快速)。
  - select INTERVAL(23, 1, 15, 17, 30, 44); # 3
  - select INTERVAL(10, 1, 10, 100, 1000); # 2
  - select INTERVAL(22, 23, 30, 44, 200); # 0

1.4 逻辑操作符:

1 NOT !:
- select NOT 10, NOT 0, !(1+1), ! 1+1; # 0, 1, 0, 1
2 AND &&:
- select 1&&1, 1&&0, 1&&NULL, 0&&NULL, NULL&&0; # 1, 0, NULL, 0, 0

3 OR ||:

select 1

1, 1

0, 0

NULL, 1

NULL; # 1, 1, 0, NULL, 1

4 XOR:
- 当任意一个操作数为 NULL时，返回值为NULL。对于非 NULL 的操作数，假如一个奇数操作数为非零值，则计算所得结果为 1 ，否则为 0 。
- select 1 XOR 1, 1 XOR 0; # 0, 1
- select 1 XOR NULL; # NULL
- select 1 XOR 1 XOR 1; # 1

二、控制流程函数

1 CASE WHEN THEN ELSE END 语句

    CASE value
        WHEN [compare-value] THEN result
        [ WHEN [compare-value] THEN result ] ...
        [ ELSE result]
    END

    -- 在第一个方案的返回结果中， value=compare-value。而第二个方案的返回结果是第一种情况的真实结果。如果没有匹配的结果值，则返回结果为ELSE后的结果，如果没有ELSE 部分，则返回值为 NULL。

    -- 栗子1
    select 
      case 1 
        when 1 then 'one'
        when 2 then 'two'
        else 'more'
      end; # 'one'

    -- 栗子2
    select
      case
        when 1>0 then 'true'
        else 'false'
      end; # 'true'
    
    -- 栗子3
    select
      case BINARY 'B'
        when 'a' then 1
        when 'b' then 2
      end;

    -- 栗子4
    update movie_table
    set category = 
      case 
        when drama = 'T' then 'drama'
        when comedy = 'T' then 'comedy'
        when cartoon = 'T' and rating = 'G' then 'family'
        else 'mise'
      end;

2 IF 语句

Syntax:
    IF (expr1, expr2, expr3) 
    -- 如果expr1是TRUE(expr1<>0 and expr1<>NULL), 返回expr2; 否则返回expr3
    -- IF()的返回值为数字之或字符串值。。。

    -- 栗子: select IF (1>2, 2, 3); # 3
    -- 栗子: select IF (1<2, 'yes', 'no'); # 'yes'
    -- 栗子: select IF (STRCMP('test', 'test1'), 'no', 'yes'); # 'no'

    注意:
    -- 栗子: select IF ('a', true, false); # false
    -- 栗子: select IF ('123', true, false); # true
    -- 栗子: select IF (123, true, false); # true

3 IFNILL 语句

Syntax:
    IFNULL(expr1, expr2)
    --  假如expr1 不为 NULL，则 IFNULL() 的返回值为 expr1; 否则其返回值为 expr2。IFNULL()的返回值是数字或是字符串，
    
    -- 栗子
    1. select IFNULL(1, 0); # 1
    2. select IFNULL(NULL, 10); -- 10
    3. select IFNULL(1/0, 10);  -- 10
    4. select IFNULL(1/0, 'yes'); -- 'yes';

4 NULLIF 语句

Syntax:
    NULLIF(expr1, expr2)
    -- 如果expr1 = expr2 成立，那么返回值为NULL，否则返回值为 expr1。这和CASE WHEN expr1 = expr2 THEN NULL ELSE expr1 END相同。

    -- 栗子
    1. select NULLIF(1, 1), NULLIF(2, 3); # NULL, 2

三、字符串函数

1 ASCII(str)

Syntax:
    ASCII(str)
    -- 返回值为字符串str 的最左字符的数值。假如str为空字符串，则返回值为 0 。假如str 为NULL，则返回值为 NULL。 ASCII()用于带有从 0到255的数值的字符

    -- 栗子
    1. SELECT ASCII('2'), ASCII(2), ASCII('dx'); # 50, 50, 100

2 BIN(N)

Syntax:
    BIN(N)
    --  返回值为N的二进制值的字符串表示，其中 N 为一个longlong (BIGINT) 数字。这等同于 CONV(N,10,2)。假如N 为NULL，则返回值为 NULL。

    -- 栗子
    1. select BIN(12); # '1100'

3 BIT_LENGTH(str) # 二进制的字符串的长度
4 LENGTH(str) # 字符串长度
5 CHAR(N1, N2... [USING charset]) – 将每个参数N理解为一个证书，返回整数的字符
- select CHAR(77, 121, 83, 81, ‘76’), CHAR(77, 77.3, ‘77.3’); # ‘MYSQL’, ‘MMM’
6 HEX
- select HEX(255), HEX(‘abc’), 0x616263; – ‘FF’, 616263, ‘abc’
7 CONCAT(str1, str2, ...)
- select CONCAT(‘My’, ‘S’, ‘QL’); – ‘MySQL’
- select CONCAT(‘My’, NULL, ‘QL’); – NULL
- select CONCAT(14.3); – 14.3
8 CONV 禁止转换

Syntax:
    CONV(N, from_base, to_base);
    -- 不同数基间转换数字。返回值为数字的N字符串表示，由from_base基转化为 to_base 基。如有任意一个参数为NULL，则返回值为 NULL。自变量 N 被理解为一个整数，但是可以被指定为一个整数或字符串。最小基数为 2 ，而最大基数则为 36。 If to_base 是一个负数，则 N 被看作一个带符号数。否则， N 被看作无符号数。 CONV() 的运行精确度为 64比特。

    -- 栗子
    -- 1. 二进制 -> 十进制
    select conv(1010, 2, 10), conv('1010', 2, 10); # 10, 10

    -- 2. 十进制 -> 二进制
    select conv(10, 10, 2); # 1010

    -- 3 十六进制 -> 二进制
    select conv('a', 16, 2); # '1010'

    -- 4 十八进制 -> 八进制
    select conv('6E', 18, 8); # '172'

    -- 5 带符号
    select conv(-17, 10, -18); # '-H'

    -- 6
    select conv(10+'10'+'10'+0xa, 10, 10); # 40

9 ELT 语法

Syntax:
    ELT(N, str1, str2, str3, ...)
    --  若N = 1，则返回值为 str1 ，若N = 2，则返回值为 str2 ，以此类推。 若N 小于1或大于参数的数目，则返回值为 NULL 。 ELT() 是 FIELD()的补数。

    -- 栗子
    1. select ELT(1, 'ej', 'Heja', 'hej', 'foo'); # 'ej'
    2. select ELT(4, 'ej', 'Heja', 'hej', 'foo'); # 'foo'

10 FIELD 语法

Syntax:
    FIELD(str, str1, str2, str3, ...)
    -- 返回值为str1, str2, str3,……列表中的str 指数。在找不到str 的情况下，返回值为 0 。 如果所有对于FIELD() 的参数均为字符串，则所有参数均按照字符串进行比较。如果所有的参数均为数字，则按照数字进行比较。否则，参数按照双倍进行比较。 如果str 为NULL，则返回值为0 ，原因是NULL不能同任何值进行同等比较。FIELD() 是ELT()的补数。

    -- 栗子
    slect FIELD('ej', 'Hej', 'Heja'); # 2
    select FIELD('e', 'Hej', 'Foo'); # 0

11 FIND_IN_SET 语法

Syntax:
    FIND_IN_SET(str, strlist)
    --  假如字符串str 在由N 子链组成的字符串列表strlist 中， 则返回值的范围在 1 到 N 之间 。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则 FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或strlist 为空字符串，则返回值为 0 。如任意一个参数为NULL，则返回值为 NULL。 这个函数在第一个参数包含一个逗号(‘,’)时将无法正常运行。

    -- 栗子
    select FIND_IN_SET('b', 'a,b,c,d'); # 2

12 INSERT 语法

Syntax:
    INSERT(str, pos, len, newstr)
    -- 返回字符串 str, 其子字符串起始于 pos 位置和长期被字符串 newstr取代的len 字符。 如果pos 超过字符串长度，则返回值为原始字符串。 假如len的长度大于其它字符串的长度，则从位置pos开始替换。若任何一个参数为null，则返回值为NULL。

    -- 栗子
    1. select insert('Quadratic', 3, 4, 'What'); # 'QuWhattic'
    2. select insert('Quadratic', -1, 4, 'What'); # 'QuaWhat'
    3. select insert('Quadratic', 3, 100, 'What'); # 'QuaWhat'

13 INSTR 语法

Syntax:
    INSRT(str, substr)
    -- 返回字符串 str 中子字符串的第一个出现位置。这和LOCATE()的双参数形式相同，除非参数的顺序被颠倒。

    -- 栗子
    1. SELECT INSTR('foobarbar', 'bar'); # 4
    2. SELECT INSTR('xbar', 'foobar'); # 0

14 LEFT(str, len): 返回从字符串str开始的len最左字符
- select LEFT(‘foobarbar’, 5); # ‘fooba’
- RIGHT(str, len)
15 LOCATE 语法

Syntax:
    LOCATE(substr, str);
    LOCATE(substr, str, pos);
     -- 第一个语法返回字符串 str中子字符串substr的第一个出现位置。第二个语法返回字符串 str中子字符串substr的第一个出现位置, 起始位置在pos。如若substr 不在str中，则返回值为0。

     -- 栗子
     1. select LOCATE('bar', 'foobarbar'); # 4
     2. select LOCATE('xbar', 'foobarbar'); # 0
     3. select LOCATE('bar', 'foobarbar', 5); # 7

16 LOWER 和 UPPER 语法

Syntax:
    LOWER(str) -- 返回字符串 str 以及所有根据最新的字符集映射表变为小写字母的字符 (默认为 cp1252 Latin1)
    UPPER(str) --

    -- 栗子
    1. select LOWER('QUADRATICALLY'); # 'quadratically'
    2. select UPPER('aaa'); # 'AAA'

17 LTRIM TRIM RTRIM 语法

    LTRIM(str)  -- 去字符串左边空格
    TRIM(str)   -- 去字符串两边空格
      - TRIM([{BOTH | LEADING | TRAILING} [remstr] FROM] str)
      -- 返回字符串 str ， 其中所有remstr 前缀和/或后缀都已被删除。若分类符BOTH、LEADIN或TRAILING中没有一个是给定的,则假设为BOTH 。 remstr 为可选项，在未指定情况下，可删除空格。
    RTRIM(str)  -- 去字符串右边字符

    -- 栗子
    set @str = '  ab c  ';
    select LTRIM(@str); -- 'ab c  '
    select TRIM(@str);  -- 'ab c'
    select RTRIM(@str); -- '  ab c'

    select TRIM(BOTH 'x' FROM 'xxxbarxx'); # 'bar'
    select TRIM(TRAILING 'xyz' FROM 'barxxyz'); # 'barx'
    select TRIM(LEADING 'xyz' FROM 'xxxbarxxx'); # 'barxxx'

18 OCT 和 ORD
- OCT(N); – 返回一个 N的八进制值的字符串表示，其中 N 是一个longlong (BIGINT)数
  - == CONV(N, 10, 8);
- ORD(N); – 若字符串str 的最左字符是一个多字节字符，则返回该字符的代码，代码的计算通过使用以下公式计算其组成字节的数值而得出: (1st byte code) (2nd byte code × 256) (3rd byte code × 2562) … 假如最左字符不是一个多字节字符，那么 ORD()和函数ASCII()返回相同的值。
19 REPEAT

Syntax:
    REPEAT(str, count);
    -- 返回一个由重复的字符串str 组成的字符串，字符串str的数目等于count 。 若 count <= 0,则返回一个空字符串。若str 或 count 为 NULL，则返回 NULL 。

    -- 栗子
    select REPEAT('MySQL', 3); -- 'MySQLMySQLMySQL'

20 REPLACE

Syntax:
    REPLACE(str, from_str, to_str)
    -- 返回字符串str 以及所有被字符串to_str替代的字符串from_str 。

    -- 栗子
    select replace('I hate you', 'hate', 'love'); # 'I love you'

21 REVERSE

Syntax:
    REVERSE(str)
    -- REVERSE(str) 返回字符串 str ，顺序和字符顺序相反

    -- 栗子
    SELECT REVERSE('abc'); # 'cba'

22 SPACE

Syntax:
    SPACE(N) 返回一个由N间隔符号组成的字符串

    -- 栗子
    SELECT SPACE(6); # '      '

23 SUBSTRING

Syntax:
    SUBSTRING(str, pos [, len])
    SUBSTRING(str FROM pos [FOR len])
    -- 返回从pos到末尾或从pos开始长度为len的子串

    -- 栗子
    1. SELECT SUBSTRING('abcdefg', 5); # 'efg'
    2. SELECT SUBSTRING('abcdefg', 5, 2); # 'ef'
    3. SELECT SUBSTRING('abcdefg' from 5); # 'efg'
    4. SELECT SUBSTRING('abcdefg', -3); # 'efg'
    5. SELECT SUBSTRING('abcdefg', -4, 1); # 'd'
    6. SELECT SUBSTRING('abcdefg' FROM -4 FOR 2); # 'de'

24 SUBSTRING_INDEX

Syntax:
    SUBSTRING_INDEX(str, delim, count)
    -- 在定界符 delim 以及count 出现前，从字符串str返回自字符串。若count为正值,则返回最终定界符(从左边开始)左边的一切内容。若count为负值，则返回定界符（从右边开始）右边的一切内容。

    -- 栗子
    1. select substring_index('abcd_efg_hi', '_', 2); # 'abcd_efg'
    2. select substring_index('abcd_efg_hi', '_', -2); # 'efg_hi'

25 STRCMP

Syntax:
    STRCMP(expr1, expr2)
    --  若所有的字符串均相同，则返回STRCMP()，若根据当前分类次序，第一个参数小于第二个，则返回 -1，其它情况返回 1 。

    -- 栗子
    1. SELECT STRCMP('text', 'text2'); # -1
    2. SELECT STRCMP('text2', 'text'); # 1
    3. SELECT STRCMP('text', 'text'); # 0

四、数值函数

1 算数操作符

+ 加号: SELECT 3+5; # 8
- 减号: SELECT 3-5; # -2
- 一元减号: SELECT -2; # -2
* 乘号: SELECT 3*5; # 15
/ 除号: SELECT 3/5; # 0.60
    NULL: SELECT 102/(1-1); # NULL
DIV 整除: SELECT 5 DIV 2; # 2

2 数学函数

1. ABS(X) : 返回X的绝对值

2. 三角函数:
    1. COS(X): 返回X的余弦
       ACOS(X): 返回X的反余弦
    2. SIN(X): 返回X的正弦
       ASIN(X): 反正弦
    3. TAN(X): 正切
       ATAN(X): 反正切
    4. COT(X) ACOT(X)

3. 取近似:
    * 上界整数: CEILING(X) = CEIL(X); 返回不小于X的最小整数值
    * 下届整数: FLOOR(X): 返回不大于X的最大整数
    * 最接近(四舍五入): 
        * 整数: ROUND(X): X 是浮点数
        * 小数位数为D为的浮点数: ROUND(X, D)

3.1 TRUNCATE(X, D):
    * D为非负数, 则保留浮点数X的D位小数
    * D为负数, 只保留整数部分，并将|D|位整数置零
        * SELECT TRUNCATE(1.223, 1); # 1.2
        * SELECT TRUNCATE(1.999, 0); # 1
        * SELECT TRUNCATE(122.231, -2); # 100
        * SELECT TRUNCATE(-1.999, 1); # 1.9

4. CRC32(expr): 循环冗余校验值, 返回一个32比特无符号值.若参数为NULL ，则结果为 NULL。
    * SELECT CRC32('MySQL'); # 3259397556
    * SELECT CRC32('mysql'); # 2501908538

5. DEGREES(X): 返回参数X, 该参数由弧度被转化为度
    * select DEGREES(PI()); # 180
    * select DEGREES(PI() / 2); # 90

6. 指数和对数:
    * EXP(X): 返回e的X乘方后的值
        * SELECT EXP(0); # 1
    * LN(X): 返回X的自然对数, X相对于基数e的对数
        * SELECT LN(2); # 0.6931478055995
        * SELECT LN(-2); # NULL
    * LOG([B,] X): B为基数, 默认为e
        * SELECT LOG(2); # 0.6931478055995
        * SELECT LOG(2, 65536); # 16
    * LOG2(X): 以2为基数的对数
    * LOG10(X)
    * POW(X, Y) == POWER(X, Y): 返回X的Y次方结果
        * SELECT POW(2, 2); # 4

7. MOD(X, Y): 模, 返回X DIV Y的余数, 小数也起作用
    * select MOD(34.5, 4); # 1.5

8. PI(): 3.141593

9. RADIANS(X): 返回由角度X转化为弧度
    * select RADIANS(80);

10. 随机数:
    * RAND() : 返回0到1之间的浮点数
    * RAND(N): N为种子数，类似时间戳，种子数一样，则结果一样
        * 7-12之间的随机整数: SELECT FLOOR(7 + (RAND() * 6));
        * 随机顺序检索: SELECT * FROM tbl_name ORDER BY RAND();

11. SIGN(X):
    * X > 0, 返回1
    * X = 0, 返回0
    * X < 0, 返回-1

12. SQRT(X) : 返回非负数X的二次方根

五、日期和时间函数

1. ADDDATE = DATE_ADD:
    * ADDDATE(date, INTERVAL expr type)
    * ADDDATE(date, days): 日期DATE加上天数days后的新日期
        * SELECT ADDDATE('2001-01-02', 31); # '2001-02-02'
        * SELECT ADDDATE('2001-01-02', INTERVAL 31 DAY); # '2001-02-02'
        * SELECT ADDDATE('2001-01-02', INTERVAL 31 SECOND); # '2001-02-02 00:00:31'
    * YEAR, MONTH DAY, HOUR, MINUTE, SECOND
    * MINUTE_SECOND, DAY_SECOND, HOUR_SECOND, DAY_HOUR ...

2. ADDTIME(expr, expr2) : 将expr2加到expr，然后返回结果.
    * SELECT ADDTIME('2001-12-31 23:59:59.99999', '1 1:1:1.00002'); # '2002-01-02 01:01:01.000010'
    * SELECT ADDTIME('01:00:00.999999', '02:00:00.999998'); # '03:00:01.999997'

3. CONVERT_TZ(dt, from_tz, to_tz): 将时间日期值dt从时区from_tz到时区to_tz
    * SELECT CONVERT_TZ('2004-01-01 12:00:00', 'GMT', 'MET');
    * SELECT CONVERT_TZ('2004-01-01 12:00:00', '+00:00', '+10:00'); # '2004-01-01 22:00:00'

4. CURDATE() CURRENT_DATE(): 当前日期:
    * SELECT CURDATE(); # '2015-06-23'
    * SELECT CURDATE() + 0; 20150623
5. CURTIME() CURRENT_TIME(): 当前时间:
    * SELECT CURTIME(); # '10:40:05'
    * SELECT CURTIME(); # 104005

6. DATE(expr): 提取日期或时间日期表达式expr中的日期部分
    * SELECT DATE('2015-06-23 10:42:01');

7. DATEDIFF(expr1, expr2): 返回日期expr1和日期expr2相差的天数, expr1>expr2时为正
    * SELECT DATEDIFF('1981-11-26 23:45:45', '2015-06-23'); # -12262
    * SELECT DATEDIFF(ADDDATE(CURDATE(), 20), CURDATE()); # 20

8. DATE_FORMAT:

MySQL (四) 数据控制语言(DCL): CREATE USER/GRANT/REVOKE ..

Sat, 20 Jun 2015 00:00:00 +0800

MySQL 数据库管理语句: 数据控制语言(DCL): Data Control Language

CREATE/DROP USER
GRANT + REVOKE
SET PASSWORD
SHOW …

一、CREATE USER 语法

CREATE USER Syntax:

    CREATE USER username [IDENTIFIED BY [PASSWORD] 'password']
        [, username [IDENTIFIED BY [PASSWORD] 'password'] ...];

CREATE USER 栗子:

-- 1. 创建无密码用户:
    create user no_password;
    exit;
    mysql -uno_password /*目前无任何权限*/

-- 2. 创建密码用户:
    create user what identified BY 'what';
    mysql -uwhat -pwhat

二、DROP USER 语法

DROP USER Syntax

    DROP USER username [, username, ...]

DROP USER Example:

    drop user what;

三、GRANT 和 REVOKE 语法

GRANT and REVOKE Syntax

    GRANT priv_type [(column_list)] [, priv_type [(column_list) ...]]
        ON [object_type] {tbl_name | * | *.* | db_name.*}
        TO username [IDENTIFIED BY [PASSWORD] 'password_string']
            [, username [IDENTIFIED BY [PASSWORD] 'password_string'] ...]
        [REQUIRE
            NONE |
            [{SSL | X509}]
            [CIPHER 'cipher' [AND]]
            [ISSUER 'issuer' [AND]]
            [SUBJECT 'subjectr']
          ]
        [WITH with_option [with_option] ...]


    object_type =
          TABLE
        | FUNCTION
        | PROCEDURE

    with_option = 
          GRANT OPTION
        | MAX_QUERIES_PER_HOUR count
        | MAX_UPDATES_PER_HOUR count
        | MAX_CONNECTIONS_PER_HOUR count
        | MAX_USER_CONNECTIONS count

    REVOKE priv_type [(column_list)] [, priv_type [(column_list)] ...]
        ON [object_type] {tbl_name | * | *.* | db_name.*}
        FROM username [, username, ...];

    REVOKE ALL PRIVILEGES, GRANT OPTION FROM username [, username ...];

GRANT and REVOKE Example

-- 1. 赋予用户what权限select
    grant select
        on table Student
        to what;

-- 2. 赋予用户what对表Student的权限: 
    -- select, insert, update, delete, create, drop
    grant select, insert, update, delete, create, drop # 注意, 这里create 并没什么卵用
        on table Student
        to what;

-- 3. 赋予用户在数据库student中创建表: CREATE
    grant create
        on table student.* -- 注释: 注意, 数据库名.* 才行，如果指定单表则无效
        to what;

-- 4. 赋予用户what对数据库student的所有权限
    grant all privileges
        on student.*
        to what;

-- 5. 赋予用户what@'192.168.1.%'所有数据库权限
    -- @'192.168.1.%' 表示用户的范围
    -- 默认自带what@localhost
    -- show grants查看;
    grant all privileges
        on *.*
        to what@'192.168.1.%';

-- 6. 查看用户权限
    show grants;

-- 7. 拥有赋予他人权限的权限: WITH GRANT OPTION
    grant select, insert
        on table student.*
        to what@localhost
        with grant option;

-- 8. ALTER 权限
    grant alter
        on table student.Student
        to what;

-- 9. 待续

-- 1. 收回用户what对表Student的select权限
    revoke select
        on table student.Student
        from what;

-- 1.1
    revoke select, insert, drop
        on table student.Student
        from what

-- 2. 收回用户what对数据库student的所有权限及GRANT OPTION
    revoke all privileges, grant option
        on table student.*
        from what;

-- 3. 收回用户what的所有权限
    revoke all privileges, grant option
        from what;

四、RENAME USER 语法 ( –> RENAME TABLE 语法)

RENAME USER 语法和栗子

Syntax:
    RENAME USER old_user TO new_user
        [, old_user TO new_user];

Example:
    rename user what to student_user;

五、SET PASSWORD 语法(设置密码)

SET PASSWORD Syntax

    SET PASSWORD = PASSWORD('some password for current user');
    SET PASSWORD FOR user_name = PASSWORD('password for user_name');
    
    * user_name值应该以user_name@host_name的格式给定

六、SHOW 语法

SHOW Syntax

-- 1. 显示所有有权限的数据库
    SHOW DATABASES;
    栗子: show databases;

-- 2. 显示所有表
    SHOW TABLES;
    栗子: show tables; (必须进入数据库: use database_name;)

-- 3. 显示创建表的语句：
    SHOW CREATE TABLE table_name;
    栗子: show create table Student;

-- 4. 显示创建数据库/模式语句
    SHOW CREATE {DATABASE | SCHEMA} db_name;
    栗子: show create database mysql;

-- 5. 显示权限:
    SHOW GRANTS [FOR user];
    栗子: show grants; -- 当前用户所拥有的权限
          show grants for what; -- 用户 what 有的权限
    注意: user 应该以 user_name@host_name 的形式

-- 6. 显示MySQL服务器所支持的系统权限清单
    SHOW PRIVILEGES;

-- 7. 显示正在运行的线程、用户等
    SHOW [FULL] PROCESSLIST;
    栗子: show processlist;

-- 8 还有很多 ....

MySQL (三) 数据操作语言DML: JOIN/UNION/TRUNCATE ...

Sat, 20 Jun 2015 00:00:00 +0800

MYSQL 数据操作语法: Data Manipulate Language

一、JION 语法

1. JOIN Syntax

MySQL支持以下JOIN语法，主要用于SELECT语句的table_references部分
    和 多表 DELETE 和 UPDATE 语句

table_references:
    table_reference [, table_reference ...]

table_reference:
      table_factor
    | join_table

table_factor:
      tbl_name [[AS] alias]
        [{USE | IGNORE | FORCE} INDEX (key_list)]
    | (table_references)
    | { OJ table_reference LEFT OUTER JOIN table_reference 
            ON conditional_expr }

join_table:
      table_reference [INSERT | CROSS] JOIN table_factor [join_condition]
    | table_reference STRAIGHT_JOIN table_factor
    | table_reference STRAIGHT_JOIN table_factor ON condition
    | table_reference LEFT [OUTER] JOIN table_reference join_condition
    | table_reference NATURAL [LEFT [OUTER]] JOIN table_factor
    | table_reference RIGHT [OUTER] JOIN table_reference join_condition
    | table_reference NATURAL [RIGNT [OUTER]] JOIN table_factor

join_condition:
      ON condition_expr
    | USING (column_list)

2 JOIN Example:

-- 待续

二、UNION 语法

1 UNION Syntax: UNION用于把来自许多SELECT语句的结果组合到一个结果集中

    SELECT ...
    UNION [ALL | DISTINCT]
    SELECT ...
    [UNION [ALL | DISTINCT] SELECT ...]

2 UNION Example

-- 待续

三、TRUNCATE 语法:

1 TRUNCATE Syntax
- TRUNCATE TABLE 用于完全清空一个表。逻辑上，等同于删除所有行的DELETE, 但实际上有所不同
- 对于InnoDB表，如果有需要引用表的外键限制，则TRUNCATE TABLE被映射到DELETE上；否则使用快速删减（取消和重新创建表）。使用TRUNCATE TABLE重新设置AUTO_INCREMENT计数器，设置时不考虑是否有外键限制。

    TRUNCATE [TABLE] tbl_name;

2 TRUNCATE Example:

-- 待续

四、HANDLER 语法:

1 HANDLER Syntax:
- 对于InnoDB表，如果有需要引用表的外键限制，则TRUNCATE TABLE被映射到DELETE上；否则使用快速删减（取消和重新创建表）。使用TRUNCATE TABLE重新设置AUTO_INCREMENT计数器，设置时不考虑是否有外键限制。
- HANDLER…OPEN语句用于打开一个表，通过后续的HANDLER…READ语句建立读取表的通道。本表目标不会被其它线程共享，也不会关闭，直到线程调用HANDLER…CLOSE或线程中止时为止。如果您使用一个别名打开表，则使用其它HANDLER语句进一步参阅表是必须使用此别名，而不能使用表名。

HANDLER tbl_name OPEN [ AS alias ]
HANDLER tbl_name READ index_name { = | >= | <= | < } (value1,value2,...)
    [ WHERE where_condition ] [LIMIT ... ]
HANDLER tbl_name READ index_name { FIRST | NEXT | PREV | LAST }
    [ WHERE where_condition ] [LIMIT ... ]
HANDLER tbl_name READ { FIRST | NEXT }
    [ WHERE where_condition ] [LIMIT ... ]
HANDLER tbl_name CLOSE

2 HANDLER Example
```
-- 待续
```

五、LOAD DATA INFILE 语法

1 LOAD DATA INFILE:
- LOAD DATA INFILE语句用于高速地从一个文本文件中读取行，并装入一个表中。文件名称必须为一个文字字符串。

LOAD DATA [LOW_PRIORITY | CONCURRENT] [LOCAL] INFILE 'file_name.txt'
    [REPLACE | IGNORE]
    INTO TABLE tbl_name
    [FIELDS
        [TERMINATED BY 'string']
        [[OPTIONALLY] ENCLOSED BY 'char']
        [ESCAPED BY 'char' ]
    ]
    [LINES
        [STARTING BY 'string']
        [TERMINATED BY 'string']
    ]
    [IGNORE number LINES]
    [(col_name_or_user_var,...)]
    [SET col_name = expr,...)]

六、REPLACE 语法:

…

MySQL (二) 数据操作语言(DML): INSERT DELETE UPDATE SELECT

Thu, 18 Jun 2015 00:00:00 +0800

数据操纵语言(DML): Data Manipulate Language

一. INSERT

1 语法

Syntax 1:
    INSERT [LOW_PRIORITY | DELAYED | HIGH_PRIORITY] [IGNORE]
        [INTO] tbl_name [(col_name, ...)]
        VALUES ({expr | DEFAULT}, ....), ({expr | DEFAULT}, ...), ...
        [ON DUPLICATE KEY UPDATE col_name = expr, ...]

Syntax 2:
    INSERT [LOW_PRIORITY | DELAYED | HIGH_PRIORITY] [IGNORE]
        [INTO] tbl_name
        set col_name={expr | DEFAULT}, ...
        [ON DUPLICATE KEY UPDATE col_name=expr, ...]

Syntax 3:
    INSERT [LOW_PRIORITY | DELAYED | HIGH_PRIORITY] [IGNORE]
        [INTO] tbl_name [(col_name, ...)]
        SELECT ...
        [ON DUPLICATE KEY UPDATE col_name=expr, ...]

2 栗子

# create database if not exists student default character charset utf8;
# use student;
# create table if not exists Student (id int primary key auto_increment, Sname varchar(255) not null);
#
# 插入数据
方法一:
    insert into Student (Sname)
        values ('Lory');

方法二:
    insert into Student
        values ('Mark'); # 这里由于id是auto_increment, 所以可以省略; 否则不能, 必须全部字段都有值

方法三:
    insert into Student
        set Sname = 'Smith';

方法四: 插入多条
    insert into Student
        values ('Mary'), ('Maria'), ('Kiumi');

方法五: 
    insert into Student
        select 'Mr.Cao';

# 查看
select * from Student;

二、SELECT

1 语法

    SELECT
        [ALL | DISTINCT | DOSTINCTROW]
          [HIGH_PRIORITY]
          [STRAIGHT_JOIN]
          [SQL_SMALL_RESULT] [SQL_BIG_RESULT] [SQL_BUFFER_RESULT]
          [SQL_CACHE | SQL_NO_CACHE] [SQL_CALC_FOUND_ROWS]
        select_expr, select_expr, ...
        [INTO OUTFILE 'file_name' export_options
            | INTO DUMPFILE 'file_name']
        [FROM table_references
            [WHERE where_defination]
            [GROUP BY {col_name | expr | position}
                [ASC | DESC], ... [WITH ROLLUP]
              ]
            [HAVING where_defination]
            [ORDER BY {col_name | expr | position}
                [ASC | DESC], ...  
              ]
            [LIMIT {[offset,] row_count | row_count OFFSET offset}]
            [PROCEDURE procedure_name(argument_list)]
            [FOR UPDATE | LOCK IN SHARE MODE]
          ]

SELECT 栗子

-- 1. 显示Student表的所有数据
    select * from Student;

-- 2. 显示Student表的Sname列数据
    select Sname from Student;

-- 3. 条件Where
    select Sname
        from Student
        where id = 10;

-- 4. 限制Limit
    select Sname
        from Student
        limit 3;

-- 5. 分组GROUP BY, ASC(默认正序), DESC(逆序)
    select *
        from Student
        group by Sname
        desc;

-- 建表:
    drop table if exists Student;
    create table if not exists Student 
    (
        Sno integer int primary key, 
        Sname varchar(255) not null
    );
    create table if not exists Course
    (
        Cno integer primary key,
        Cname varchar(255)
    );
    create table SC
    (
        id integer auto_increment,
        Sno integer,
        Cno integer,
        Grade integer,
        primary key (id),
        foreign key (Sno) references Student (Sno),
        foreign key (Cno) references Course (Cno)
    );

-- 6. 连接多张基本表，通过where相同条件
    select Student.Sno, Student.Sname, Course.Cname, SC.Grade
        from Student, Course, SC
        where SC.Sno = Student.Sno and
              SC.Cno = Course.Cno;

-- 7. 按字段排序: ORDER BY 
    select * 
        from Student
        order by Sname
        desc;

-- 8. 输出到文件中 OUTFILE/DUMPFILE 'file_name':
    .... (待续)

-- 9. 条件之 HAVING where_defination
    ....

-- 10 Like
    select title, category
        from movie_table
        where
            title like 'A%'
            and
            category = 'family'
        order by title;

-- 11 分组->求和sum/求平均avg->排序
    select first_name, sum(sales)
        from cookie_sales
        group by first_name
        order by sum(sales) desc;

-- 12 不同的值只返回一次，返回的结果没有重复值(distinct)
    select distinct first_name
        from cookie_sales;

-- 13 限制条数，并返回指定位置
    select first, count(day)
        from cookie_sales
        group by first_name
        order by count(day) desc
        limit 0, 4;  -- 从0位置开始，取四条结果
        /*取第二名: limit 1 1;*/

-- 14 函数: MAX MIN SUM AVG COUNT

三、UPDATE

1 UPDATE 语法

Single-table 语法:
    UPDATE [LOW_PRIORITY] [IGNORE] tbl_name
        SET col_name1=expr1 [, col_name2=expr2 ...]
        [WHERE where_defination]
        [ORDER BY ...]
        [LIMIT row_count];

Multiple-table 语法:
    UPDATE [LOW_PRIORITY] [IGNORE] table_references
        SET col_name1-expr1 [, col_name2=expr2 ...]
        [WHERE where_defination];

1. UPDATE 栗子

-- 1. 更新一个字段(列)的所有值
    update SC
        set Grade = 100;

-- 2. 按条件更新
    update SC
        set Grade = 88
        where Sno = 200215123 and Cno = 1;

-- 3. 排序限制条数
    update SC
        set Grade = Grade + 2 -- 这是mysql单行注释, 可以做加减乘除 
        where Cno = 2        
        oreder by Grade desc  # 这也是单行注释，排序
        limit 5;

-- 4. 多表操作:
    .... (待续)

-- 5. 多个条件，更新不同值
    update movie_table
        set category = 
            case
                when drama = 'T' then 'drama'
                when comedy = 'T' then 'comedy'
                when action = 'T' then 'action'
                when gore = 'T' then 'horror'
                when scifi = 'T' then 'scifi'
                when for_kide = 'T' or cartoon = 'T' then 'family'
                else 'misc'
            end;

四、DELETE

1 DELETE 语法

Single-Table 语法:
    DELETE [LOW_PRIORITY] [QUICK] [IGNORE]
        FROM tbl_name
        [WHER where_defination]
        [ORDER BY ...]
        [LIMIT row_count];

Multiple-Table 语法:
    DELETE [LOW_PRIORITY] [QUICK] [IGNORE]
        tbl_name[.*], [, tbl_name[.*] ...]
        FROM table_references
        [WHERE where_defination];
    或者
    DELETE [LOW_PRIORITY] [QUICK] [IGNORE]
        FROM tbl_name[.*] [, tbl_name[.*] ...]
        USING table_references
        [WHERE where_defination];

2 DELETE 栗子(慎用)

-- 1. 删除一个表中的所有数据(慎用)
    delete from a;

-- 2. 满足条件就删除
    delete from SC
        where Grade = 0;

-- 3. 排序限制: 去掉最高分
    delete from SC
        order by Grade desc
        limit 1;

-- 4. 多表:
    ....(待续)

MySQL (一) 数据库定义语言(DDL) CREATE/DROP/ALTER

Thu, 18 Jun 2015 00:00:00 +0800

MYSQL 之数据定义语言(结构定义): Data Definition Language

第一: 创建CREATE

1 创建数据库/模式: CREATE DATABASE/SCHEME 语法

Syntax:
    create {database | schema} [IF NOT EXISTS] db_name
        [create_specification [, create_specification] ...];

    create_specification 选项:
        [DEFAULT] CHARACTER SET charset_name |
        [DEFAULT] COLLATE collation_name;

    # 栗子:
    1. create database blog;
    2. create database if not exist blog;
    3. create database blog;
        default character set utf8;
    4. create database if not exists blog
        default character set utf8;
    5. create schema blog
        default character set utf8;

2 创建索引: CREATE INDEX 语法

Syntax:
    CREATE [UNIQUE | FULLTEXTISPATIAL] INDEX index_name
        [USING index_type]
        ON tbl_name (index_col_name);
    
    index_col_name 选项:
        col_name [(length)] [ASC | DESC];

    # 栗子
    # show databses;
    # create database if not exist t;
    # use t;
    # show tables;
    # create table t (a int primary key auto_increment, b varchar(255));
    # desc table_name;
    create index t_index 
        on t (a desc, b);

3 创建表: CREATE TABLE 语法

// Syntax
    CREATE [TEMPORARY] TABLE [IF NOT EXISTS] tbl_name
        [(create_defination, ...)]
        [table_option] [select_statement];
或
    CREATE [TEMPORARY] TABLE [IF NOT EXISTS] tbl_name
        [(] LIKE old_tbl_name [)];

create_defination:
    column_defination 
    | [CONSTRAINT [symbol]] PRIMARY KEY [index_type] (index_col_name, ...)
    | KEY [index_name] [index_type] (index_col_name, ...)
    | INDEX [index_name] [index_type] (index_col_name, ...)
    | [CONSTRAINT [symbol]] UNIQUE [index]
        [index_name] [index_type] (index_col_name, ...)
    | [FULLTEXTISPATIAL] [INDEX] [index_name] (index_col_name, ...)
    | [CONSTRAINT [symbol]] FOREIGN KEY
        [index_name] (index_col_name, ...) [reference_definition]
    | CHECK (expr)

column_defination:
    col_name type [NOT NULL | NULL] [DEFAULT default_value]
        [AUTO_INCREMENT] [UNIQUE [KEY] | [PRIMARY] KEY]
        [COMMET 'string'] [reference_defination]

type:
      TINYINT(length)       [UNSIGNED] [ZEROFILL]
    | SMALLINT[(length)]    [UNSIGNED] [ZEROFILL]
    | MEDIUMINT[(length)]   [UNSIGNED] [ZEROFILL]
    | INT[(length)]         [UNSIGNED] [ZEROFILL]
    | INTEGER[(length)]     [UNSIGNED] [ZEROFILL]
    | BIGINT[(length)]      [UNSIGNED] [ZEROFILL]
    | REAL[(length, decimals)]      [UNSIGNED] [ZEROFILL]
    | DOUBLE[(length, decimals)]    [UNSIGNED] [ZEROFILL]
    | FLOAT[(length, decimals)]     [UNSIGNED] [ZEROFILL]
    | DECIMAL(length, decimals)     [UNSIGNED] [ZEROFILL]
    | NUMERIC(length, decimals)     [UNSIGNED] [ZEROFILL]
    | DATE
    | TIME
    | TIMESTAMP
    | DATETIME
    | CHAR(length) [BINARY | ASCII | UNICODE]
    | VARCHAR(length) [BINARY]
    | TINYBLOB
    | BLOB
    | MEDIUMBLOB
    | LONGBLOB
    | TINYTEXT [BINARY]
    | TEXT [BINARY]
    | MEDIUMTEXT [BINARY]
    | LONGTEXT [BINARY]
    | ENUM(value1, vaule2, value3, ...)
    | SET(value1, value2, value3, ...)
    | spatial_type

index_of_col_name:
    col_name [(length)] [ASC | DESC]

reference_defination:
    REFERENCES tbl_name [(index_col_name)]
        [MATCH FULL | MATCH PARTIAL | MATCH SIMPLE]
        [ON DELETE reference_option]
        [ON UPDATE reference_option]

reference_option:
    RESTRICT | CASCADE | SET NULL | NO ACTION

table_options:
    table_option [table_option] ...

table_option:
      {ENGINE | TYPE} = engine_name
    | AUTO_INCREMENT = value
    | AVG_ROW_LENGTH = value
    | [DEFAULT] CHARACTER SET charset_name [COLLATE collation_name]
    | CHECKSUM = {0 | 1}
    | COMMENT = 'string'
    | CONNECTION = 'connect_string'
    | MAX_ROWS = value
    | MIN_ROWS = value
    | PACK_KEYS = {0 | 1 | DEFAULT}
    | PASSWORD = 'string'
    | DELAY_KEY_WRITE = {0 | 1}
    | ROW_FORMAT = {DEFAULT | DYNAMIC | FIXED | COMPRESSED | REDUNDANT | COMPACT}
    | UNION = (tbl_name[, tbl_name, ...])
    | INSERT_METHOD = {NO, FIRST, LAST}
    | DATE DIRECTORY = 'absolute path to directory'
    | INDEX DIRECTORY = 'absolute path to directory'

partition_options:
    PARTITION BY
          [LINEAR] HASH(expr)
        | [LINEAR] KEY(column_list)
        | RANGE(expr)
        | LIST(column_list)
    [PARTITIONS num]
    [ SUNPARTITION BY
          [LINEAR] HASH(expr)
        | [LINEAR] KEY(column_list)
      [SUBPARTITIONS(num)]
    ]
    [(partition_defination) [, partition_defination, ...]]

partition_defination:
    PARTITION partition_name
        [VALUES {
            LESS THAN (expr) | MAXVALUE | IN (value_list)
            }]
        [[STORAGE] ENGINE [=] engine_name]
        [COMMENT [=] 'comment_text']
        [DATA DIRECTORY [=] 'data_dir']
        [INDEX DIRECTORY [=] 'index_dir']
        [MAX_ROWS [=] max_number_of_rows]
        [MIN_ROWS [=] min_number_of_rows]
        [TABLESPACE [=] (tablespace_name)]
        [NODEGROUP [=] node_group_id]
        [(subpartition_defination) [, (subpartition_defination), ...]]

subpartition_defination:
    SUBPARTITION logical_name
        [[STORAGE] ENGINE [=] engine_name]
        [COMMENT [=] 'comment_text']
        [DATA DIRECTORY [=] 'data_dir']
        [INDEX DIRECTORY [=] 'index_dir']
        [MAX_ROWS [=] max_number_of_rows]
        [MIN_ROWS [=] min_number_of_rows]
        [TABLESPACE [=] (tablespace_name)]
        [NODEGROUP [=] node_group_id]

select_statement:
    [IGNORE | REPLACE] [AS] SELECT ... (some legal select statement)

// CREATE TABLE 栗子
// 1. 最简单
create table Student
(
    sno int,
    sname varchar(10),
    cno int
);

// 2. INF: 原子性(主属性不为空NULL) + 主键(PRIMARY key) 
create table Student
(
    id int primary key auto_increment,
    sname varchar(10) not null,
    cname varchar(30) not null
);

// 3. 不存在才创建
create table if no exists Cost
(
    id int,
    money decimal(20, 2),
    date date,
    time timestamp,
    comment text,
    age integer(2),
    primary key (id)
);

// 4. 外键/外码: foreign key .... references ...
create table SC
(
    id int,
    sno int,
    primary key (id),
    foreign key (sno) references Student(sno)
);
desc SC;
show create table SC;

// 5. 临时TABLE, 退出后自动删除
create temporary table temp_table 
(
    ...
);

一、数据定义语言:

第一: 删除DROP

1 DROP DATABASE 语法
- DROP {DATABASE | SCHENA} [IF EXISTS] db_name
2 DROP INDEX 语法
- DROP INDEX index_name ON tbl_name
3 DROP TABLE 语法
- DROP [TEMPRARY] TABLE [IF EXISTS] tbl_name[, tbl_name, ...] [RESTRICT | CASCADE]

第二: 改变结构ALTER

1 ALTER DATABASE 语法

Syntax:
    ALTER {DATABASE | SCHEMA} [db_name]
        alter_specification [, alter_specification, ...]

    alter_specification:
          [DEFAULT] CHARACTER SET charset_name
        | [DEFAULT] COLLATE collation_name

2 ALTER TABLE 语法

Syntax:
    ALTER [IGNORE] TABLE tbl_name
        alter_specification [, alter_specification, ...]

    alter_specification:
          ADD [COLUMN] column_defination [FIRST | LAST | FIFTH | BEFORE col_name | AFTER col_name]
        | ADD [COLUMN] (column_defination, ...)
        | ADD INDEX [index_name] [index_type] (index_col_name, ...)
        | ADD [CONSTRAINT [symbol]]
            PROMARY KEY [index_name] [index_type] (index_col_name, ...)
        | ADD [CONSTRAINT [symbol]]
            UNIQUE [index_name] [index_type] (index_col_name, ...)
        | ADD [FULLTEXTISPATIAL] [index_name] (index_col_name, ...)
        | ADD [CONSTRAINT [symbol]]
            FOREIGN KEY [index_name] (index_col_name, ...)
            [reference_defination]
        | ALTER [COLUMN] col_name {SET DEFAULT literal | DROP DEFAULT}
        | CHANGE [COLUMN] old_col_name column_defination
        | MODIFY [COLUMN] column_defination [FIRST | AFTER col_name]
        | DROP [COLUMN] col_name
        | DROP PRIMARY KEY
        | DROP INDEX index_name
        | DROP FOREIGN KEY fk_symbol
        | DISABLE KEYS
        | ENABLE KEYS
        | RENAME [TO] new_tbl_name
        | ORDER BY col_name
        | CONVERT TO CHARACTER SET charset_name [COLLATE collation_name]
        | [DEFAULT] CHARACTER SET charset_name [COLLATE collation_name]
        | DISCADE TABLESPACE
        | IMPORT TABLESPACE
        | table_options
        | partition_options
        | ADD PARTITION partition_defination
        | DROP PARTITION partition_names
        | COALESCE PARTITION number
        | REORGANIZE PARTITION partition_names INTO (partition_definations)
        | ANALYZE PARTITION partition_names
        | CHECK PARTITION partition_names
        | OPTIMIZE PARTITION partition_names
        | REBUILD PARTITION partition_names
        | REPAIR PARTITION partition_names

2 ALTER 栗子

-- 1. 加入主键:
    alter table Student
        add primary key (Sno);
    /* desc Student; */
    /* show create table Student; */

-- 2. 加入新列:
    alter table Student
        add column Sdept varchar(2);

-- 3. 外键(含外键的是子表，被外键的是父表， 父表必须有主键)
    alter table SC
        add foreign key (Sno) references Student(Sno);

-- 4. 添加按顺序的列,默认是最后(LAST):
    -- FIRST: 加到第一列
    -- SENCOND: 加到第二咧
    -- THIRD: 加到第三列
    -- AFTER column_name: 在column_name列之后一列
    -- BEFORE column_name: 在column_name列之前一列
    -- 栗子:
    alter table Student
        add column id int first;
    alter table Student
        add column Sname varchar(20) before Sdept;
    alter table Student
        add column sex varchar(1) after Sname;
    show create table Student;

-- 5. 改变列名及属性(一起): CHANGE
    -- 1. 重命名, 最好RENAME
    alter table Student
        change column sex Ssex varchar(1);
    -- 2. 只修改属性, 用MODIFY效果更佳
    alter table Student
        change column Sname Sname varchar(30);

-- 6. 修正仅属性: MODIFY
    alter table Student
        modify column Sname varchar(255);
    show create table Student;

-- 7. 删除列:
    alter table Student
        drop column first_name;
    desc Student;

-- 8. 删除主键PRIMARY KEY:
    alter table Student
        drop primary key;

-- 9. 删除外键FOREIGN KEY: 
    -- 要拿到CONSTRAINT_NAME
        -- 1 show create table Student;
        -- 2 自己命名的限制名
    alter table Student
        drop foreign key Student_ibfk_1; -- 这里限制名是自动生成的
        /* 限制名可以自己在定义或添加属性时指定 */

-- 10. 删除索引INDEX:
    alter table Student
        drop index index_name;

-- 11. 重命名表名:
    alter table Student
        rename to student;
    show tables;
    另一种办法:
        rename table student to Student;

CSS3 基础

Mon, 01 Jun 2015 00:00:00 +0800

一、初识CSS3

1.1 在编写CSS3样式时，不同的浏览器可能需要不同的前缀.

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

1.2 CSS3 能做: 圆角、图片边框、文字阴影和盒阴影、过渡、动画
- 选择器: class id tagname …
- 圆角效果: border-radius
- 块阴影与文字阴影
- 色彩: 新颜色: HSL CMYK HSLA RGBA
- 渐变效果
- 个性化字体: @Font-face
- 多背景图: 一个元素上添加多层背景
- 边框背景图
- 变形出路: 对HTML元素进行旋转、缩放、移动、一些JavaScript动画
- 多栏布局
- 媒体查询: 针对不同屏幕分辨率，应用不同样式

二、边框

2.1 圆角效果: border-radius
- 作用: 向元素添加圆角边框
- Usage:
  - border-radius: 10px; /*所有角都使用半径为10px的圆角*/
  - border-radius: 5px 4px 3px 2px; /*四个半径分别为左上角、右上角、右下角、左下角，顺时针*/
  - border-radius的值除了px单位，还能用百分比(%)或者em
    - border-radius: 水平 / 垂直;
      - border-radius: 10px / 20px;
    - border-radius: 水平1 水平2 / 垂直1 垂直2

.demo {
    border-radius: 10px 20px 30px 40px;
}

等价于

.demo {
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
}

.demo {
    border-radius: 10px / 20px;
}

等价于

.demo {
    border-top-left-radius: 10px 20px;
    border-top-right-radius: 10px 20px;
    border-bottom-right-radius: 10px 20px;
    border-bottom-left-radius: 10px 20px;
}

.demo {
    border-radius: 10px 20px / 20px 10px;
}

等价于

.demo {
    border-top-left-radius: 10px 20px;
    border-top-right-radius: 20px 10px;
    border-bottom-right-radius: 10px 20px;
    border-bottom-left-radius: 20px 10px;
}

...
<div class="circle"></div><br />
<div class="semi-circle"></div>
...

div.circle {
    height: 100px; /*与width设置一致*/
    width: 100px;
    background: #9da;
    /*四个角值都设为宽度Or高度一半*/
    border-radius: 50px;
}

div.semi-circle {
    height: 100px;
    width: 50px;
    background: #9da;
    border-radius: 50px 50px 0 0;
}

2-2 阴影 box-shadow
- 作用: 向盒子添加阴影，支持添加一个或多个
- Usage:
  - box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
  - 解释:
    - X轴偏移量: 必须，水平阴影的位置，允许负值
    - Y轴偏移量: 必须，垂直阴影的位置，允许负值
    - 阴影模糊半径: 可选，模糊的距离
    - 阴影扩展半径: 可选, 阴影的尺寸
    - 阴影颜色: 可选，阴影的颜色，省略默认为黑色
    - 投影方式: 可选，（设置inaset为内部阴影方式，否则省略为外阴影）

/*外阴影*/
.boxshadow-outset {
    width: 100px;
    height: 100px;
    box-shadow: 4px 4px 6px #333;
}

/*内阴影*/
.boxshadow-inset {
    width: 100px;
    height: 100px;
    box-shadow: 4px 4px 6px #666 insert;
}

/*多阴影*/
.boxshadow-multi {
    width: 100px;
    height: 100px;
    box-shadow: 4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #330 inset;
}

2-3 阴影 box-shadow (二)
- 1 阴影模糊半径(blur-radius) 与 阴影扩展半径(spread-radius) 的区别
  - 阴影模糊半径: 参数可选，其值只能为正，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘月模糊
  - 阴影扩展半径: 参数可选，其值可以是正负值，如果其值为正，整个阴影都延展扩大，反之值为负，则缩小
- 2 X轴偏移量(offset-x) 和 Y轴偏移量(offset-y) 可以设置为 负数
  - box-shadow: offset-x offset-y [blur-radius] [spread-radius] [color] [projection-style]
  - 负值，阴影方向: 边框左边向左，上边向上;
  - 正直, 阴影方向: 边框右边向右，下边向下
  - 当 offset-x 和 offset-y 都为0 时，四个边框都有阴影

.box {
    width: 100px;
    height: 100px;
    box-shadow: 4px 4px 5px -2px #ccc;    
}

<div class="box">
</div>

2-4 Border-image 边框应用图片
- Function: 类似background-image, 添加图片
- Syntax: border-image: url(IMG_SOURCE) height width repeat-style
  - height/width 单位可以px也可以百分比
  - repeat-style: repeat(重复) stretch(拉伸) round(平铺)

三、颜色Color

3-1 颜色之RGBA
- 含义: R(红) G(绿) B(蓝) A(透明度)
- Syntax: color: rgba(R-v, G-v, B-v, Alpha);
3-2 渐变色彩Gradient
- CSS3 Gradient 分为 线性渐变(linear-gradient) 和 径向渐变(radial-gradient)
- Syntax:
  - linear-gradient(angle | to <side-or-corner>, color-from[, color-stop])
    - <side-or-conor> = [left | right] || [top | bottom]
    - color-from/stop = <color> [ <percentage> | <length>]?
    - color-from 到 color-stop之间可以很多个过渡颜色，不限制个数
    - to top == 0 deg to bottom == 180 deg to top right == 45deg
    - 颜色后面的percentage表示长度 == length
- Example:
  - background: linear-gradient(45deg, blue, red);
  - color: linear-gradient(to left top, rgb(255,255,255), rgb(0, 0, 0))
  - background: linear-gradient(0 deg, blue, green 40%, red);
    - /* A gradient going from the bottom to top, starting blue, being green after 40% and finishing red */

.box {
    width: 400px;
    height: 400px;
    line-height: 400px;
    text-align: center;
    color: #000;
    font-size: 24px;
    background-image: linear-gradient(to right top, red, green, blue 30%);
}

<div class="box">
    右下角向左上角的线性渐变背景
</div>

四、文字与字体

4-1 text-overflow 与 word-wrap
- Function: 用来设置是否使用一个省略标记(...)标示对象内文本的溢出/
- Syntax:
  - text-overflow: clip | ellipsis;
    - clip: 表示剪切
    - ellipsis: 标示显示省略标记(…)
  - text-overflow: inherit | initial | unset; // Global values
- But careful:
  - text-overflow 只是用来说明文字溢出时用什么方式显示，要实现溢出时产生的省略号的效果，还必须定义强制文本在行内显示(white-space: nowrap;)和溢出内容为隐藏(overflow: hidden;), 只有这样才能实现溢出文本显示省略号的效果.

.box {
    /* 以下三条必须一起使用，否则无效*/
    text-overflow: ellipsis; /*显示省略号*/
    white-space: nowrap; /*禁止包含文本，只允许行内显示*/
    overflow: hidden; /*隐藏省略部分*/

    /*只能容下十(..)个字*/
    width: 200px;
    font-size: 20px; 
    background: #ccc;
}

<div class="box">
    一二三四五六七八(此处省略)
</div>

4-1-2 word-wrap
- Function: 设置文本行为，当前行超过指定容器的边界时是否断开转行.
- Syntax:
  - word-wrap: normal | break-word;
  - normal为默认值, break-word 设置在长单词或URL地址内部进行换行.
- 用处: 文本编辑textarea 或 contentEditable = “true”;
4-2 嵌入字体@font-face
- Function: @font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体.
- Syntax

/* @font-face Syntax*/
@font-face {
    font-family: diyFontName; /* 自定义字体名称; 该字体名称为后面使用*/
    src: 字体文件在服务器上的相对或绝对路径;
}

p {
    font-size: 12px;
    font-family: diyFontName; /* 与 @font-face中的font-family自定义的名字相同*/
}

4-3 文本阴影text-shadow
- Function: text-shadow用来设置文本的阴影效果
- Syntax:
  - text-shadow: offset-x offset-y blur-radius color;
  - text-shadow: color offset-x offset-y blur-radius;
  - text-shadow: offset-x offset-y color;
  - text-shadow: offset-x offset-y;
- Example:
  - text-shadow: 1px 1px 2px black;

/* 设置文字阴影*/
.box {
    width: 340px;
    height: 200px;
    line-height: 200px;
    padding: 30px;
    font: bold 55px/100% "微软雅黑";
    text-align: center;
    background: #C5D;
    text-shadow: 2px 2px 4px rgb(255, 255, 0);
}

<div class="box">
    文字阴影
</div>

五、与背景相关的样式

5-1 background-origin
- Function: 设置元素背景的原始位置
- Syntax:
  - background-origin: border-box | padding-box | content-box | inherit;
  - border-box: 边框
  - padding-box: 内边距(默认值)
  - content-box: 内容区域
  - inherit: 继承
- Take Care: 背景必须是no-repeat, 否则background-origin失效

/* background-origin 原始起始位置 */
.wrap {
    width: 400px;
    height: 400px;
    border: 20px dashed #000; /* border-box 开始位置 */
    padding: 40px; /* padding-box 开始位置 */
    font-size: 40px;
    font-weight: bold;
    color: #000;
    background: #ccc url(IMG_URL) no-repeat;

    background-origin: content-box;
}

.content {
    width: inherit;
    height: 80px;
    border: 1px solid #333;
}

<div class="wrap">
    <div class="content">内容盒子</div>
</div>

5-2 background-clip
- Function: 用来将背景图片作适当裁剪以适应实际需求.
- Syntax:
  - background-clip: border-box | padding-box | content-box | no-clip | inherit;
  - 默认值是 border-box

/* background-clip 裁剪背景 */
.wrap {
    width: 400px;
    height: 400px;
    border: 20px dashed #000; /* border-box 开始位置 */
    padding: 40px; /* padding-box 开始位置 */
    font-size: 40px;
    font-weight: bold;
    color: #000;
    background: #ccc url(IMG_URL) no-repeat;

    background-origin: border-box;
    background-clip: content-box;
}

.content {
    width: inherit;
    height: 80px;
    border: 1px solid #333;
}

<div class="wrap">
    <div class="content">内容盒子</div>
</div>

5-3 background-size
- Function: 设置背景图片的大小.
- Syntax:
  - background-size: auto | cover | contain | <长度值> | <百分比>;
    - auto: 默认值，不改变背景图片的原始高度和宽度.
    - cover: 覆盖, 将背景图片等比例缩放以填满整个容器.
    - contain: 容纳，将背景图片等比例缩放至某一边紧贴容器边缘为止.
    - <长度值>: 成对出现100px 50px, 即背景width height; 当只设置一个值时，图片等比例缩放.
    - <百分比>: 只类型为0-100%, 其他同上.

/* background-size */
.box {
    background: url(IMG_URL) no-repeat;
    width: 500px;
    height: 300px;
    border: 1px solid #999;
    background-size: cover;
}

5-4 multiple backgrounds
- Function:
  - 多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写为用逗号隔开的每组值;
  - 用分解写法时，如果有多个背景图片，而其他属性只有一个(例如background-repeat只有一个)，表明所有图片都应用该属性值.
- Syntax: 以下都必须一起写
  - background: bg1, bg2, bg3, ...;
    - bgN : url(IMG_URL);
  - background-position: bgp1, bgp2, bgp3 ...;
    - bgpN: offset-x offset-y;
  - background-repeat: no-repeat, no-repeat, no-repeat ...;
  - background-color: color;
    - 只能一个值
- Take Care:
  - background-color 只能设置一个

/* multiple background */
.box {
    width: 400px;
    height: 400px;
    border: 1px solid #999;

    background: url(IMG_1), url(IMG_2), url(IMG_3);
    background-position: left top, 0 200px, 200px 0; /* 具体视图片大小而定 */
    background-repeat: no-repeat, no-repeat, no-repeat;
}

5-5 导航实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS制作立体导航</title>
    <link rel="stylesheet" href="http://www.w3cplus.com/demo/css3/base.css">
    <style>
        body{
          background: #ebebeb;
        }
        .nav{
          width:560px;
          height: 50px;
          font:bold 0/50px Arial;
          text-align:center;
          margin:40px auto 0;
          background: #f65f57;
          /*制作圆*/
          border-radius: 10px;
          /*制作导航立体风格*/
          box-shadow: 5px 5px 10px #ccc;
        }
        .nav a{
          display: inline-block;
          -webkit-transition: all 0.2s ease-in;
          -moz-transition: all 0.2s ease-in;
          -o-transition: all 0.2s ease-in;
          -ms-transition: all 0.2s ease-in;
          transition: all 0.2s ease-in;
        }
        .nav a:hover{
          -webkit-transform:rotate(10deg);
          -moz-transform:rotate(10deg);
          -o-transform:rotate(10deg);
          -ms-transform:rotate(10deg);
          transform:rotate(10deg);
        }

        .nav li{
          position:relative;
          display:inline-block;
          padding:0 16px;
          font-size: 13px;
          text-shadow:1px 2px 4px rgba(0,0,0,.5);
          list-style: none outside none;
        }
        /*使用伪元素制作导航列表项分隔线*/
         .nav li:before {
            display: inline-block;
            content: '';
            height: 18px;
            width: 1px;
            background: linear-gradient(to right, #ef6b5f,#ca584e);
            position: absolute;
            right: 0;
            top: 18px;
         }
        
        /*删除第一项和最后一项导航分隔线*/
        .nav li:last-child:before {
         display: none;   
        }
        .nav a, .nav a:hover{
          color:#fff;
          text-decoration: none;
        }

    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="">Home</a></li>
        <li><a href="">About Me</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Blog</a></li>
        <li><a href="">Resources</a></li>
        <li><a href="">Contact Me</a></li>
    </ul>
</body>
</html>

六、CSS3选择器(上): 伪类选择器

6-1 属性选择器
- Syntax: E为选择器, attr为属性名, val为属性值
  - E[attr="val"]: 等于
  - E[attr^="val"]: 属性attr以val 开头(^) 的选择器E
  - E[attr$="val"]: 属性attr以val 结尾($)
  - E[attr*="val"]: 属性attr 包含(*) val

/* css */
a[class^="column"] {
    background: red;
}
a[href$=".doc"] {
    background: green;
}
a[title*="box"] {
    background: blue;
}

<!-- Html -->
<a href="##" class="columnNews">我的背景想变成红色</a>
<a href="##" class="columnVideo">我的背景想变成红色</a>
<a href="##" class="columnAboutUs">我的背景想变成红色</a><br/>
<a href="1.doc">我的背景想变成绿色</a>
<a href="2.doc">我的背景想变成绿色</a><br/>
<a href="##" title="this is a box">我的背景想变成蓝色</a>
<a href="##" title="box1">我的背景想变成蓝色</a>
<a href="##" title="there is two boxs">我的背景想变成蓝色</a>

6-2 结构性伪类选择器- root
- :root选择器，是指HTML文档的根选择器, 而根元素是<html>, 所以就等同于html.
- :root {...} == html {...}
6-3 结构性伪类选择器- not
- :not 称为否定选择器.和jQuery中的:not选择器一样，可以选择除了某个元素以外的所有元素.
  - 一般配合属性选择使用, 别忘了括号
- Example
  - input:not([type="submit"]) {border: 1px solid red;}
    - input中除了type为submit之外的
6-4 结构性伪类选择器- empty
- Function: 选择没有任何内容的元素，这里没有是指没有任何内容，包括空格也不能有.(注释不包括)

/* css */
div {
    height: 50px;
}


div:empty {
    border: 1px solid #ccc;
}

<!-- html -->
<div>我这里有内容</div>
<div> <!-- 我这里有一个空格 --></div>
<div><!-- 我这里任何内容都没有 --></div>

6-5 结构性伪类选择器- target
- Function: 目标选择器，用来匹配文档中a标签href值为另一个ID选择器值的目标元素

/* css */
.menuSection { display: none; }
:target {
    /* 这里: target指的就是 id="brand" 的div对象 */
    display: block;
}

<!-- html -->
<!-- 当点击Brand时, ID等于brand的选择器触发:target {...}效果 -->
<h2> <a href="#brand">Brand</a><h2>
<div class="menuSection" id="brand">
    Content for Brand
<.div>

/* css */
/* 当点击 href="brand"的a标签时, ID="brand"的标签的p标签变成黄色背景 */
#brand:target p { background: green;}

<!-- html -->
<div id="brand">
    <a href="#brand" >你变黄</a>
    <p>变黄</p>
</div>

6-6 结构性伪类选择器- first-child
- Function: 父选择器的第一个子选择器
- :first-child == :nth-child(1)
6-7 结构性伪类选择器- last-child
- Function: 父元素的最后一个子元素
6-8 结构性伪类选择器- nth-child(n)
- Funtion: 用来选择父元素的某一个或多个子元素, 不区分div:nth-child(n)的类型div
- Syntax:
  - n 为 整数值, 从1开始
  - n 为表达式或关键词(odd even):
    - 2n+1 == odd : 表示第奇数子元素
    - 2n+2 == even : 表示第偶数子元素
    - n+5 : 表示第5个元素(包含)以后的所有子元素
    - -n+5 : 表示第5个元素(包含)以前的所有子元素
    - kN: k为常数，如之前的2n+1的2, 此时的第一个元素是k, 每隔k个子元素
    - kN + m: 第一个元素为k+m(>0, 否则2k+m开始), 以后每隔k个子元素
6-9 结构性伪类选择器- nth-last-child(n)
- 与:nth-child(n)类似，只不过从最后一个开始倒数
6-10 first-of-type 选择器与 last-of-type 选择器
- 与 :first-child 的区别就是, 指定了元素的类型
- 而类型就比如: .box > p:first-of-type 中的p, 因为p元素不一定是容器中的第一个子元素;
- 当 .box > p:first-child {...} 中的第一个子元素不是p时，该css不产生任何效果; 但是 .box > p:first-of-type { ... } 会一直找到p

/* CSS */
/* 注意:伪类选择器冒号(:)前后不要空格*/
.box > p:first-child {
    background: red;
}

.box > p:first-of-type {
    background: green;
}

<!-- html -->
<div class="box">
    <div>第一个是DIV, 所有:first-child没效果</div>
    <p>但是:first-of-type有效，该P变为绿色</p>
</div>

6-11 nth-of-type(n) 选择器
- 和nth-child(n)类似, 取值可以是整数, 表达式或者关键字(odd, even)
- 与:nth-child(n)的区别是, :nth-of-type(n)区分类型，只有同类型才计数, 而 :nth-child(n) 不区分类型

/* css */
/* box选择器下偶数子元素 */
/* 这里，even为偶数, 那么如果box所有元素的第二个元素类型不是div的话，这个css对所有失效; 这里所说的第二个元素指的是nth-child(n)中表达式的第一个作用的元素. */
/* 如果去掉这里的'div'符号，那么效果一直在; 去掉'div'符号试试 */
.box > div:nth-child(even) {
    background: red: 
}

/* box选择器下的全部类型为div的元素偶数次序*/
/* 当'div'省略时, 自动匹配偶数元素的类型, 每个类型的偶数次序都产生作用*/
.box > div:nth-of-type(even) {
    background: green;
}

<!-- html -->
<div class="box">
  <div>我是一个Div元素</div>
  <p>我是一个段落元素</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
</div>

6-13 nth-last-of-type(n) 选择器
6-14 only-child 选择器
- 选择父元素有且只有唯一一个子元素的情况生效.
6-15 only-of-type 选择器
区别

对象	空格	区别
first-child 与 first-of-type 及 nth-child 与 nth-of-type 及 only-child 与 only-of-type 及 last-child 与 last-oftype		-child不区分类型，但是如果它前面指定了类型(也就是说可以不指定)，那么如果符合表达式的第一个作用的元素与该类型不同时，效果全部失效, 没有任何作用. -of-type:区分类型，如果它前面指定了类型，则它会自动分类，找到与其类型相同的符合表达式的第一个元素开始作用; 如果没指定类型，则每种类型符合表达式的第一个元素开始生效.

七、CSS选择器(下): 伪类选择器

7-1 :enable选择器与 :disabled选择器
- 在Web的表单中，有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态下，比如输入框、密码框、复选框等.
- 在默认情况下，这些表单元素都默认为enabled状态

/* css */
div { margin: 30px; }

input[type="text"]:enabled {
    border: 1px solid #f36;
    box-shadow: 0 0 5px #f36;
}

input[type="text"]:disbaled {
    box-shadow: none;
}

<!-- html -->
<form acttion="#">
    <div>
        <label for="enabled">可用输入框:</label>
        <input type="text" id="enabled" />
    </div>
    <div>
        <label for="disabled">禁用输入框:</label>
        <input type="text" id="disabled" />
    </div>
</form>

7-2 :checked选择器
- 选中, 在表单元素中, 单选(radio)和复选(checkbox)都具有选中和未选中状态.
7-3 ::selection选择器
- 鼠标选中文本的状态为::selection
- “:selection”伪元素是用来匹配凸显的文本.
- 浏览器默认情况下，用鼠标选择网页文本是以深蓝的背景，白色的字体显示的.

/* css */
p::selection { background: orange;}

<!-- html -->
<div class="box">
    <p>鼠标选择该文本的颜色是橘黄色</p>
    <div>鼠标选择是默认颜色是蓝色</div>
</div>

7-4 :read-only选择器
- 只读选择器，　就是当元素中readonly属性值设为readonly的时候.
7-5 :read-write选择器
- :read-write选择器刚好与:read-only选择器相反，主要用来指定当元素处于非只读状态时的样式。
7-6 ::before 和 ::after
- 与CSS2中的:before 和 :after一样
- 主要用来给元素的前面或后面插入内容
- 常和content配合使用，使用最多的场景是清除浮动

/* css 清除浮动代码 */
.clearfix::before,
.clearfix::after {
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    overflow: hidden;
}
.clearfix:after { clear: both;}
.clearfix {zoom: 1;}

/* css 在::before和::after添加阴影效果 */
.effect::before, .effect::after {
    content: "";
    position: absolute;
    z-index: -1;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);

    /* 通过position:absolute和top,bottom,left,right确定block的大小, 不用width和height, 更灵活 */
    top: 50%;
    bottom: 0;
    left: 10px;
    right: 10px;

    border-radius: 100px 10px;
}

八、变形与动画(上)

8-1 变形–旋转: rotate()
- Function: 旋转rotate()函数通过指定的角度使元素相对原点进行旋转(二维).
- Syntax: tranform: rotate( D deg);
  - 当 D 为正值时，元素相对原点中心顺时针旋转;
  - 当 D 为负值时, 元素相对原点中心逆时针旋转
- Example:
  - transform: rotate(-45deg);
8-2 变形–扭曲: skew()
- Funtcion:
  - 扭曲(skew())函数能够让元素倾斜显示.它可以将一个对象以其中心位置绕着X轴和Y轴按照一定的角度倾斜.
  - 这与rotate()函数的旋转不同, rotate()函数只是旋转,而不会改变元素的形状.
  - skew()不会旋转，而只会改变元素的形状.
- Syntax:
  - skew(x) 等价于 skewX(x)
    - 仅使元素在水平(X轴)方向扭曲变形
  - skew(x, y):
    - 使元素水平(X轴)和垂直(Y轴)方向同时扭曲.
  - skewY(y):
    - 使元素在垂直(Y轴)方向扭曲变形.
8-3 变形–缩放: scale()
- Funtion: 让元素根据中心原点对象进行缩放.
- Syntax:
  - scale(x) 完全等价于 X(x)`
  - scale(X, Y)
    - 使元素水平(X轴)和垂直(Y轴)方向同时缩放
  - scaleY(y)
- Take Care:
  - scale()的取值默认的值为1;
  - 当值0.01~0.99 –> 缩小;
  - 当值>=1.01时 –> 放大;
8-4 变形–位移: translate()
- Function:
  - 可以将元素向指定的方向移动，类似于position中的relative.
  - 可以将元素从原来的位置移动，而不影响X、Y轴上的任何Web组件.
- Syntax: 值可以为正负
  - translate(x) === translateX(x)
  - translate(x, y)
  - translateY(y)
8-5 变形–矩阵: matrix()
8-6 变形–原点: transform-origin
- Function:
  - 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形
  - 但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
8-7 动画: transition
- Function:
  - 通过鼠标点击(click)、获得焦点(:focus)、被点击、对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值.
- Steps:
  - Step 1: 在默认样式中声明元素的元素状态
  - Step 2: 声明过渡元素的最终状态，比如悬浮(:hover)状态
  - Step 3: 在默认样式中通过添加过渡函数，添加一些不同的样式
- Categorie:
  - transition-property
  - transition-duration
  - transition-timing-function
  - transition-delay
8-7 动画–过渡属性: transition-property
- Function:
  - transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果
- Properties:
  - 大部分css属性, 比如 transition-property: background-color;
8-8 动画–过渡所需时间: transition-duration
- Function: 主要用来设置一个属性过渡到另一个属性所需要的时间。
  - 一般设置在初始状态上
- Syntax:
  - transition-duration: 0.5s;
  - 单位: 秒(s), 毫秒(ms)
8-9 动画–过渡函数: transition-timing-function
- Function:
  - 指的是过渡的”缓动函数”，即从初始状态到最终状态.
  - 主要用来指定浏览器的过滤速度，以及过滤期间的操作进展情况.
- Functions(函数): 从初始状态到最终状态
  - ease: 由快到慢
  - ease-in:　加速(渐显效果)
  - ease-out: 减速(渐隐效果)
  - ease-in-out: 先加速再减速(渐显渐隐)
  - linear: 恒速
- Syntax:
  - transition-timing-function: FUNCTION_NAME;
- Example:
  - transition-timing-function: ease-in-out; /先加速再减速/
8-10 动画–过渡延迟时间: transition-delay
- Function:
  - 与transition-duration相似, 但是transition-duration是用来设置过渡动画的持续时间;
  - transition-delay主要用来指定一个动画开始执行时的时间, 也就是说当改变元素属性值后多长时间开始执行(延迟时间).
- Usage:
  - 有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration，第二个为transition-delay。
- Syntax:
  - transition-delay: TIME;
  - 合并: transition: [PROPERTY] DURATION DELAY, [PROPERTY2] DURATION2 DELAY2;
- Example:
  - transition: width 1s 0.5s, height 5s 3s;
    - 长度在延迟0.5秒后执行，持续时间1s;
    - 高度在延迟3s后执行, 持续时间5s

九、变形与动画(下)

9-1 Keyframes介绍
- Function:
  - @keyframes称为关键帧
  - 在一个@keyframes中的样式规则可以由多个百分比构成，如在”0%”到”100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同样式，从而达到一种在不断变化的效果.
- Syntax:
  - Step 1: animation: ANIMATION_NAME DURATION TIMING_FUNCTION DELAY;
  - Step 2: @keyframes ANIMATION_NAME { 0%{...}, 20%{...}..., 100%{...}}

/* css */
div {
    width: 300px;
    height: 200px;
    background: red;
    color: #fff;
    margin: 20px auto;
}

div:hover {
    animation: change 5s ease-out 0.2s;
}

@keyframes change {
    0% {
        background: red;
    }

    20% {
        background: orange;
    }

    40% {
        background: yellow;
    }

    60% {
        background: green;
    }

    80% {
        background: blue;
    }

    100% {
        background: purple;
    }
}

9-2 调用动画: animation-name
- Function:
  - 用来调用@keyframes定义好的动画.
  - 名称必须完全一致，区分大小写.
- Syntax:
  - animation-name: none | IDENT[, none | DENT]*
    - IDENT 指的是你定义的名字
    - none 为默认值，是任何动画失效，可用于覆盖任何动画.
9-3 设置动画播放时间: animation-duration
- 类似: transition-duration
- 完成从0%到100%需要的时间
9-4 设置动画播放方式: animation-timing-function
- 类似: transition-timing-function
- 多组用逗号(,)分开
9-5 设置动画开始播放时间: animation-delay
- 类似: transition-delay
9-6 设置动画播放次数: animation-iteration-count
- Function: 定义动画播放次数
- Syntax:
  - animation-iteration-count: infinite | <number> [, infinite | <number> ... ;]
    - infinite: 无限循环
    - number 为整数，小数也行.

/* css3: animation */
div {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    margin: 20px auto;
}

div span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: orange;
    border-radius: 100%;
    animation-name: ball-around;
    animation-duration: 10s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-iteration-count: infinite; 
}
 
@keyframes ball-around {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(180px, 0);
        /* 等价于 transform: translateX(180px); */
    }
    50% {
        transform: translate(180px, 180px);
    }
    75% {
        transform: translate(0, 180px);
    }
    100% {
        transform: translateY(0);
    }
}


<!-- html -->
<div>
    <span></span>
</div>

9-7 设置动画播放方向: animation-direction
- Syntax:
  - animation-direction: normal | alternate [, normal | alternate, ...];
    - normal 是默认值, 也就是动画的每次循环都是向前播放;
    - alternate: 动画播放在第偶次向前播放, 第奇次向反方向播放.
9-8 设置动画的播放状态: animation-play-state
- Syntax:
  - animation-play-state: running | paused;
    - running: 默认值,主要作用是类似音乐播放器，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放.这里的重新播放不一定是从元素动画开始播放,而是从暂停的哪个位置开始播放.另外如果暂停了动画的播放，元素的样式将回到最原始的设置状态.
- Example:
  - animation-play-state: paused; : 页面加载时，动画不播放.
9-9 设置动画时间外属性: animation-fill-mode
- Function: 在动画开始之前和结束之后发生的操作
- Syntax: animation-fill-mode: none | forwards | backwords | both;
  - node: 默认, 表示动画预期进行和结束，在动画完成最后一帧时，动画会反转到初始帧;
  - forwards: 表示动画在结束后继续应用最后的关键帧的位置;
  - backwards: 会在向元素应用动画样式时迅速应用动画的初始帧;
  - both: 元素动画同时具有forwards和backwards效果.
9-10 制作3D旋转导航练习

十、布局样式

10-1 多列布局–Columns
- Function: CSS Multi Column Layout Module
- Syntax:
  - columns: <column-width> || <column-count>;
    - <column-width>: 主要用来定义多列每列的宽度;
    - <column-count>: 主要用来定义多列中的列数
10-2 多列布局–column-width
- Function:
  - column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中的其他属性配合使用.
- Syntax:
  - column-width: auto | <length>;
    - auto: 默认，元素多列的宽度由其他属性决定，比如column-count;
    - length: 正数 + 单位
10-3 多列布局–column-count
- Function: 列数
- Syntax:
  - column-count: auto | <integer>;
    - auto: 默认，表示元素只有一列，其主要依靠浏览器计算自动设置;
    - <integer>: 列数, 正整数
10-4 列间距–column-gap
- Syntax:
  - column-gap: normal | <length>;
10-5 列表边框–column-rule
- Function:
  - 主要用来定义列与列之间的边框宽度、边框样式和边框颜色.但column-rule是不占用任何空间位置，在列与列之间改变其宽度不会改变任何列的位置.
- Syntax:
  - column-rule: <column-rule-width> | <column-rule-style> | <column-rule-color>;
    - column-width 类似 border-width, 大于等于零的数，也可以是关键字: medium、thick、thin.
    - column-rule-style 类似 border-style, 默认值为none, 其他属性值: hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
    - column-rule-color 类似 border-color, 可以所有颜色，也可以是透明色(transparent);
10-6 跨列设置–column-span
- Syntax:
  - column-span: none | all;
    - none : 不跨列;
    - all : 夸所有列;
10-7 盒子模型
- 在盒模型中主要包括width、height、border、background、padding和margin这些属性
- Syntax:
  - box-sizing: content-box | border-box | inherit;
    - 定义盒模型的尺寸解析方式
    - content-box: 默认值,也就是元素的宽度(width)和高度(height)等于元素边框(border)加上元素内边距(padding)加上元素内容快读或高度(content width/height).
    - border-box: 重新定义CSS2.1中盒模型组成的模式, 也就是说元素的宽度或高度等于元素内容的宽度或高度。
10-8 伸缩布局(一): Flexbox Box
- 第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
- 第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
- 第三, 可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
- 第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
- 第五，可以控制元素在页面上的布局方向；
- 第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
- Step:
  - 1 创建一个flex容器: display: flex;
    - .flexcontainer {display: -webkit-flex; display: flex;}
  - 2 Flex 项目显示
    - Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。
  - 3 Flex项目列显示
    - .flexcontainer {display: -webkit-flex; display: flex; -wekit-flex-direction: column; flex-direction: column;}
  - 4 Flex项目移动到顶部
    - 主要取决于主轴的方向.如果是垂直方向通过align-items设置;如果是水平方向通过justify-content设置.
    - .flexcontainer {-webkit-flex-direction: colun; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start;}
    - .flexcontainer {display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start;}
10-9 伸缩布局(二)
- 5 Flex项目移到左边
  - flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。
  - .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; }
  - .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }
- 6 Flex项目移动右边
  - .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; }
  - .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }
- 7 水平垂直居中
  - 在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。
  - .flexcontainer {display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center;}
  - .flexcontainer {display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;}
- 8 Flex项目实现自动伸缩
  - 可以自定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值.
  - .bigitem {-webkit-flex: 200; flex: 200;}
  - .smallitem {-webkit-flex: 100; flex: 100;}

十一、Media Queries 与 Responsive 设计

11-1 Media Queries – 媒体类型(一)
- 一、媒体类型
  - 媒体类型(Media Type)在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式.
  - 常见的类型 all(全部)、screen(屏幕)、print(页面打印或打印预览模式)
11-2 Media Queries – 媒体类型(二)
- 媒体类型的引用方法:
  - link标签
  - @import
  - CSS3新增的@media
- link
  - Function: link方法引入媒体类型其实是在标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。
  - Example:
    - <link rel=”stylesheet” type=”text/css” href=”style.css” media="screen" />
    - <link rel=”stylesheet” type=”text/css” href=”style.css” media="print" />
- @import
  - Function:
    - @import 可以引用样式文件，通用也可以引用媒体类型.
    - @import引入媒体有两种方式.一是在样式中通过@import调用另一个样式；另一种是在<head></head>标签中的中引入.
  - Example:
    - @importurl(reset.css) screen;
    - @importurl(print.css) print;
    - <head><style type="text/css">@importurl(style.css) all;</style></head>
- @media
  - Function:
    - @media 是CSS3中新引进的一个特性，被称为媒体查询.
    - 在页面中也可以通过这个属性来引入媒体类型.
    - @media引入媒体类型和@import有点类似.

/* (1) 在样式文件中引用媒体类型 */
@media screen {
    选择器{....}
}

/* (2) 使用@media引入媒体类型的方式*/
<head>
    <style type="text/css">
        @media screen {
            选择器 {
                ....
            }
        }
    </style>
</head>

11-3 Media Queries 使用方法
- Syntax:
  - @media 媒体类型 and (媒体特性) [ and (媒体特性) ...] { 样式 }
    - 媒体类型: 也称设备类型, screen, all, print
    - 媒体特性: max-width: 480px;
      - 媒体特性是通过min/max来表示大于等于或小于作为逻辑判断，而不是使用<和>符号来判断.

/* 1. 最大宽度 max-width */
/* 意思是指媒体类型小于等于指定的宽度时，样式生效 */
/* 案例: 当屏幕小于或等于480px时, 页面中的广告区块(.ads)都被隐藏. */
@media screen and (max-width: 480px) {
    .ads {
        display: none;
    }
}

/* 2.最小宽度: min-width */
/* 指媒体类型大于等于指定宽度时，样式生效. */
/* 案例: 当屏幕大于等于900px时，容器".wrapper"的宽度为980px. */
@media screen and (min-width: 900px) {
    .wrapper {
        width: 980px;
    }
}

/* 3.多个媒体特性使用 */
/* and 关键字连接多个媒体特性 */
/* 案例: 当屏幕600px-900px之间时, body的背景色渲染为"#f5f5f5". */
@media screen and (min-width: 600px) and
 (max-width: 900px) {
    body {
        background-color: #f5f5f5;
    }
 }

/* 4.设备屏幕的输出宽度Device Width */
/* */
<link rel="stylesheet" media="screen and (max-width: 480px)" href="iphone.css" />

/* 5.not关键词 */
/* 使用关键字noy是用来排除某种指定的媒体类型. */
@media not print and (max-width: 1200px) { 样式 }

/* 6.only关键词 */
/* only用来指定某种特定的媒体类型, 可以用来排除不支持媒体查询的浏览器. 其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的.其主要有: 支持媒体特性的设备，正常调用样式，此时就当only不存在; 不支持媒体特性但支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen; 另外不支持Media Query的浏览器, 不论是否支持only, 样式都不会被采用. */
<link rel="stylesheet" media="only screen and (max-device-width: 240px)" href="android240.css" />

/* 在Media Query中如果没有明确指定Media Type, 那么其默认为all. */
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="mediu.css" />

/* 另外在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性 */
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width: 480px), screen and (min-width: 960px)"

11-4 Responsive 设计(一)
- 响应式设计:(3个条件)
  - 网站必须建立灵活的网格基础;
  - 引用到网站的图片必须是可伸缩的;
  - 不同的显示分隔，需要在Media Queries上写不同样式;
- Responsive 术语:
  - 1 流体网格: 将每个网格各自使用百分比来控制网格大学.
  - 2 弹性图片: 不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。
    - img {max-width: 100%;}
  - 3 媒体查询: Responsive设计离开了Media Queries就失去了意义.

/* 为每个断点提供不同的图片，这是比较头疼的，因为Media Queries并不能改变图片的"src"的属性值.*/
/* 解决方法: 使用background-image给元素使用背景图片，显示/隐藏父元素，给父元素使用不同的图片，然后通过Media Queries来控制这些图片显示或隐藏.*/
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" />

@media (min-device-width: 600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}
@media (min-device-width: 800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}
                

11-5 Responsive 设计(二)
- 4 屏幕分辨率
- 5 主要断点
11-6 Responsive 布局技巧
- 在Responsive布局中，可以毫无保留的丢弃:
  - 1 少用无关要紧的div
  - 2 不要使用内联元素(inline)
  - 3 尽量少用js或flash
  - 4 丢弃没用的绝对定位和浮动样式
  - 5 摒弃任何冗余结构和不要使用100%设置
- 对Responsive布局有帮助:
  - 1 使用HTML5 Doctype和相关指南
  - 2 重置好你的样式(reset.css)
  - 3 一个简单的有意义的核心布局;
  - 4 给重要的网页元素使用简单的技巧，比如导航次啊当之类元素.
11-7 Responsive 设计 – meta标签
- Function:
  - 在Responsive设计中如果没有meta标签，你就是蹩脚，响应式设计就是空谈.
  - meta标签被称为可视区域meta标签.
- Syntax:
  - <meta name="viewport" content="" />
    - content属性值，用来处理可视区域:
      - width: 可视区域高度，可以是数字或关键字device-width
      - height: … 数字或device-height
      - initial-scale: 页面首次被显示时可视区域的缩放级别，取值为1.0时，将使页面按实际显示，无任何缩放.
      - minamum-scale: 可视区域的最小缩放级别，表示用户可以将页面缩小的程度，取值为1.0时，禁止用户缩小至实际尺寸以下.
      - maximum-scale
      - user-scaleable: 指定用户是否可以对页面进行缩放，设置为yes表示允许缩放, no为禁止缩放.

在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果
<meta name="viewport" content="width=device-with,intial-scale=1.0" />

11-8 Responsive 设计 – 不同设备的分辨率设置

/* 1.1024显屏 */
@media screen and (max-width: 1024px) {
    /* style code */
}

/* 2.800px显屏 */
@media screen and (max-width: 800px) {
    /* style code */
}

/* 3.640px显屏 */
@media screen and (max-width: 640px) {
    /* style code */
}

/* 4.iPad 横屏显屏 */
@media screen and (max-device-width: 1024px) and (orientation: landscape) {
    /* style code */
}

/* 5.iPad 竖屏 */
@media screen and (max-device-widthL 768px) and (orientation: portrait) {
    /* style code */
}

/* 6.iPhone 和 SmartPhones */
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
    /* style code */
}

十二、用户界面与其他重要属性

12-1 自由缩放属性resize
- Function: Css3新特性, resize允许用户通过拖地的方式来修改元素的尺寸来改变元素大小.
- Syntax:
  - resize: none | both | horizontal | vertical | inherit;
    - none: 用户不能拖动元素修改尺寸.
    - both: 可以拖动元素修改元素的宽度和高度
    - horizontal: 只能改变宽度
    - vertical

textarea {
    -webkit-resize: horizontal;
    -moz-resize: horizontal;
    -o-resize: horizontal;
    -ms-resize: horizontal;
    resize: horizontal;
}

12-2 CSS3外轮廓属性
- 外轮廓outline在页面中呈现的效果和边框border呈现的效果机器相似，但和元素边框不同的是，外轮廓不沾永网页布局空间,不一定是举行，外轮廓属于动态样式，只有元素货渠道焦点或被激活时呈现.
- Syntax:
  - outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit;
  - outline属性和border类似
  - outline-offset: 定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。
12-3 CSS 生成内容: content
- Function:
  - content通过结合::before和::after来实现
  - 对input和img不起作用
- Syntax:
  - content: none; : 不生成任何内容
  - content: attr(...);: 插入标签属性值
  - content: URL;: 使用指定的绝对或相对地址插入一个外部资源(图像、声频、视频或浏览器支持的任何资源)
  - content: STRING;: 插入字符串

/* 这里的title是该标签的属性值，不是title标签*/
/* attr(data-*)这样用法比较好 */
a::after {
    content: attr(title);
    color: #f00;
}

12-4 制作3D旋转视频

重新捡起 virtualenv and virtualenvwrapper

Tue, 19 May 2015 00:00:00 +0800

官方文档

一 virtualenv

What:
- virtualenv 是一个隔离Python环境的工具.
Why:
- virtualenv 可以让你在同一个操作系统上建立多个不同的Python环境.
- 如一个Python2, 另一个Python3,　还有Django1.2 和 Django1.5
- 项目Python环境互不相同，互不干涉.
How: (So Easy)
- Install:
  - sudo pip install virtualenv
- Use: (Recommend)
  - 创建环境:
    - virtualenv -p PYTHON_VERSION VIRTUAL_ENVIRONMENT_NAME
    - 解释:
      - -p PYTHON_EXE, –python=PYTHON_EXE : 指定Python版本, Python2, Python2.5, Python3等
      - 注意: 这个Python版本必须存在于系统内部
      - –no-site-packages : 废弃了，因为默认没有权限访问全局包
    - 栗子:
      - virtualenv -p python3 django1.8
  - 进入环境:
    - source path/to/VIRTUAL_ENVIRONMENT_NAME/bin/activate
    - 栗子:
      - source django1.8/bin/activate
      - 或者 cd django1.8; source bin/activate
    - 有明显标志(VIRTUAL_ENVIRONMENT_NAME)，说明成功进入环境
  - 退出环境:
    - deactivate
  - 删除环境:
    - 只要删除创建的虚拟环境目录即可: rm -rf path/to/VIRTUAL_ENVIRONMENT_NAME
      - rm -rf django1.8

二 virtualenvwrapper

what:
- virtualenvwrapper 是 virtaulenv 的扩展的集合.
Why:
- 便于使用和管理 virtualenv

How:

Install:
- sudo pip install virtualenvwrapper

Use:

每次使用前必须先source环境: 才有mkvirtualev, lssitepackages等命令
- source /usr/local/bin/virtualenvwrapper.sh
- 或者将/etc/profile 或者 ~/.bashrc 或者 ~/.zshrc 启动终端时自动载入source
创建环境:
- Syntax: mkvirtualenv [-a project_path] [-i package] [-r requirements_file] [virtualenv options] VIRTUAL_ENVIRONMENT_NAME
- 注意: 项目默认创建一律在 ~/.virtualenvs 目录下
- 栗子:
- 默认:
  - mkvirtualenv django1.8 # (ls ~/.virtualenvs 可见)
- 指定Python版本:
  - mkvirtualenv -p python3 django1.8
- 指定Python版本和依赖的包:
  - mkvirtualenv -r requirements.txt -p python3 django1.8
- 指定项目地址, 只要载入环境，自动切换到项目目录:
  - mkvirtualenv -a . django1.8
- 注意: 环境创建完成后，会自动载入环境
打开或切换工作环境:
- Syntax: workon [(-c|--cd)|(-n|--no-cd)] [environment_name|"."]
- 栗子:
- 默认:
  - workon django1.8
  - 注意: 默认进入 mkvirtualenv 选项 -a 指定的目录，如果没有，则在当前目录
- 切换, 即已经在一个虚拟环境, 但要切换另一个环境:
  - workon django1.5
- 不进入 -a 指定的目录:
  - workon -n django1.8
退出环境，使用系统环境:
- deactivate
删除环境:
- rmvirtualenv VIRTUAL_ENVIRONMENT_NAME
- 或 rm -rf ~/.virtualenvs/VIRTUAL_ENVIRONMENT_NAME
- 栗子:
  - rmvirtualenv django1.8 (推荐)
  - rm -rf ~/.virtualenvs/django1.8
让所有创建的环境都执行某个命令,比如安装某个包等:
- Syntax: allvirtualenv command with arguments
- 栗子:
  - allvirtualenv pip install ipython
切换当前环境能否访问系统的Python包, 建议关闭(disable):
- Syntax: toggleglobalsitepackages [-p]
  - -p : 不输出日志
- 栗子:
  - toggleglobalsitepackages
删除第三方包: (注意: 必须已经在虚拟环境中)
- Syntax: wipeenv
创建项目+环境:
- Create a new virtualenv in the WORKON_HOME and project directory in PROJECT_HOME.
- Syntax: mkproject [-f|--force] [-t template] [virtualenv_options] ENVNAME
- 注意设置 WORKON_HOME 和 PROJECT_HOME

其他命令:

显示安装的包: lssitepackages (建议用 pip list 更清楚)
复制一份虚拟环境: cpvirtualenv [sorce] [dest]
- cp django1.8 django

临时环境，deactivate后删除:

mktmpenv [(-c

–cd)

(-n

–no-cd)] [VIRTUALENV_OPTIONS]

栗子: mktmpenv -p python3

列出所有创建的虚拟环境: 即~/.virtualenvs目录下的

lsvirtualenv [-b

-l

-h]

-b 简短形式, 建议
-l 默认的详细信息输出
-h help

绑定项目目录:
- Syntax: setvirtualenvproject [virtualenv_path project_path]

linux web nginx practice

Sun, 03 May 2015 00:00:00 +0800

一、参考

二、安装 nginx (ubuntu)

方法一: sudo apt-get install nginx
方法二: 脚本
以下配置根据方法一

三、NGINX实践: LNMP

1. nginx
  - 安装: sudo apt-get install nginx
  - 启动: sudo service nginx start 或 sudo /etc/init.d/nginx start
  - 停止: sudo service nginx stop
  - 重载配置: sudo service nginx reload
  - 重启: sudo service nginx restart
  - 检测配置是否正确: sudo nginx -t
  - 配置文件: /etc/nginx/conf/nginx.conf
  - 默认server: /etc/nginx/sites-available/default
  - 浏览器访问: http://127.0.0.1
1. mysql
  - 安装: sudo apt-get install mysql-server mysql-client
  - 配置文件: /etc/mysql/my.cnf
  - 注意: 配置文件将bind-address = 127.0.0.1 注释掉，就可以远程连接数据库了
  - 启动/停止/重新启动: sudo service mysql start/stop/restart
1. php5
  - 在LNMP中的作用或角色:
  - nginx 本身不能处理PHP, 他只是个web服务器, 当接收到请求后,
  - 如果是php请求, 则发个php解释器处理，并把结果返回给客户端.
  - php-fpm 是一个守护进程(FastCGI进程管理器)用于替换PHP FastCGI的
  - 大部分附加功能, 对于高负载网站是非常有用的 * 安装: sudo apt-get install php5-fpm * 开启NGINX的PHP配置(下图) * 测试NGINX配置是否正确:
  - $ nginx -t * 修改php-fpm监听配置(下图) * 重启php-fpm服务:
  - $ service php-fpm restart * 安装好后连同上面的nginx一同测试:
  - 现在创建一个探针文件保存在 /usr/share/nginx/html 目录下
  - (这个目录是nginx配置文件中的root目录).
  - 新php文件: sudo vim /usr/share/nginx/html/phpinfo.php
  - 添加代码: <? php phpinfo(); * 启动php5-fpm服务: sudo service php5-fpm start * 访问浏览器: http://127.0.0.1/phpinfo.php
- ISSUE:
  - Page Error: file not found
  - Solved:
    - 修改nginx.conf
    - 修改 fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
    - 为 fastcgi_param SCRIPT_FILENAME /usr/share/nginx/html$fastcgi_script_name;
    - 其中 /usr/share/nginx/html 为 nginx 的 html 目录, @TODO 似乎必须是绝对路径
    - Stack Overflow 相关问题

# 开启NGINX的PHP配置
        location ~ \.php$ {
            root           html;
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
            include        fastcgi_params;
        }

# 修改php-fpm的监听端口，使适应NGINX的PHP配置
# vim /etc/php5/fpm/pool.d/www.conf
# 修改
; listen = /var/run/php5-fpm.sock
listen = 127.0.0.1:9000

1. 组合配置, 互相支持:
  - 1. 让php5支持mysql:
  - 安装: sudo apt-get install php5-mysql
  - 重启php: sudo service php5-fpm restart
  - 访问浏览器: http://127.0.0.1/phpinfo.php * 2. 让php使用tcp连接:
  - 只需要将nginx的default配置(所在目录/etc/nginx/sites-available/)
  - 配置中的端口改回来，然后再将php配置文件www.conf
  - (所在目录/etc/php5/fpm/pool.d/) 端口 也该文与nginx的default端口中相同就行.
  - 相关语句:
    - (nginx -* default) fastcgi_pass 127.0.0.1:9000
    - (php5-fpm -* www.conf) listen = 127.0.0.1:9000
  - 测试配置文件:
    - sudo service nginx start
    - sudo service php5-fpm start
  - 重载配置-注意: 配置文件只有重载才生效
    - sudo service nginx reload
    - sudo service php5-fpm reload
  - 重启服务:
    - sudo service nginx restart
    - sudo service php5-fpm restart

四、`NGINX HTTP 模块`

1 http index 模块:
- 语法: index file1 file2 ...;
- 作用域: http, server, location
- 模块功能及注意:
  - 功能: 定义将要被作为默认页的文件
  - 注意: 文件的名字可以包含变量. 文件以配置中指定的顺序被nginx检测.
    - 列表的最好一个元素可以是一个带有绝对路径的文件.
  - 例子: index index.$geo.html index.0.html /index.html:
    - 需要注意的是，index文件会引发内部重定向，请求可能会被其他location处理, 如下例2
- 模块: ngx_http_index_module 配置范例:例1

// 例1
location / {
    index index.$geo.html index.html
}

// 例2
location = / {
    index index.html;
}

location / {
    ....
}
// 请求"/"实际上将会在第二个location中作为"/index.html"被处理

2 http log 模块
- 模块: ngx_http_log_module 配置范例: 例3
- 指令:
  - access_log :
    - 语法: access_log path [format [buffer=size | off]]
    - 默认值: access_log log/access.log combined
    - 作用域: http, server, location
    - 模块功能及注意:
      - 指令access_log指派路径、格式和缓存大小
      - 参数”off”将清除当前几倍的所有access_log指令。
      - 如果未指定格式，则使用预置的”combined”格式.
      - 缓存不能大于能写入磁盘的文件的最大值。在FreeBSD3.0-6.0, 缓存大小无限制.
  - log_format :
    - 语法: log_format name format [format ...]
    - 默认值: log_format combined “…”
    - 作用域: http, server

// 例3
log_format gzip '$remote_addr-$remote_user[$time_local]'
:'$request$status $bytes_sent'
:'"$ http _ referer" "$http_user_agent" "$gzip_ratio"';
access_log /spool/logs/nginx-access.log gzip buffer=32k;

3 Access模块
- 1. 模块: ngx_http_access_module 功能描述:
    - 此模块提供简易的基于主机的访问控制.
    - ngx_http_access_module 模块使有可能对特定的IP客户端进行控制.
    - 规则检查第一次匹配的顺序，此模块对网络地址有放行和禁止的权利.
- 1. Access 配置范例: 例4
- 1. 放行: allow
    - 语法: allow [address CIDR all]
    - 作用域: http, server, location, limit_except
    - 功能: 网络地址有直接访问权限.
- 1. 禁止: deny
    - 语法: deny [address CIDR all]
    - 作用域: http, server, location, limit_except
    - 功能: 网络地址拒绝访问.

// 例4
location / {
    deny  192.168.1.1;
    allow 192.168.1.0/24;
    allow 10.1.1.0/16;
    deny  all;
}
// 在上面的例子中，仅允许网段10.1.1.0/16和192.168.1.0/24中除了192.168.1.1之外的ip访问.

4 Rewrite 模块:
- 1. 模块: ngx_http_rewrite_module
    - 功能描述:
    - 执行URL重定向, 允许你去掉带有恶意的URL, 包含多个参数(修改);
    - 利用正则的匹配，分组和引用,达到目的配置范例.
    - 该模块允许使用正则表达式改变URL,并根据变量来转向以及选择配置
- 1. 语法:
    - (1) if 语法
    - if (condition) { ... }
    - 作用域: server, location
    - 范例: 例5 * (2) return 语法:
    - return code;
    - 作用域: server, location, if
    - 功能描述:
      - 这个指令规则的执行情况，返回一个状态值给客户端。
      - 可用值包括: 204, 400, 402-406, 408, 410, 411, 413, 416, 500-504.
      - 也可以发送非标准的444代码，未发送任何信息下结束连接.
        
        (3) rewrite 语法:
    - rewrite regex replacement flag;
      - last : 表示完成
      - rewrite break : 本规则匹配完成, 终止匹配，不再匹配后面的规则
      - redirect : 返回302临时重定向，地址栏会显示跳转后的地址
      - permanent : 返回301永久重定向，地址栏会显示跳转后的地址.
    - 作用域: server, location, if
    - 功能描述:
      - 根据正则表达式或者替换字符来更改URL.
      - 指令根据配置文件中的先后顺序执行生效

// 例5
if ($http_user_agent ~ MSIE) {
    rewrite ^(.*)$ /msie/$1 break;
}
if ($http_cookie ~* "id=([^;]+)(?:;|$)" ) {
    set $id $1;
}
if ($request_method = POST) {
    return 405;
}
if (!-f $request_filename) {
    break;
    proxy_pass http://127.0.0.1;
}
if ($slow) {
    limit_rate 10k;
}
if ($invalid_referer) {
    return 403;
}

5 Proxy模块
- 模块: ngx_http_proxy_module
- 功能描述:
  - 此模块能代理请求到其他服务器
  - 也就是说允许你把客户端请求转到后端服务器
  - (这部分指令非常多，但不是全部都被用到)
- 指令:
  - (1) pass_header
    - proxy_pass_header Server;
    - 功能描述:
      - 该指令强制一些被忽略的头传递到客户端.
  - (2) redirect
    - proxy_redirect off;
    - 功能描述:
      - 允许改写出现在HTTP头却被后端服务器触发重定向的URL.
      - 对响应本身不做任何处理.
  - (3) set_header
    - proxy_set_header Host $http_host;
    - 功能描述:
      - 允许你重新定义代理header值再转到后端服务器
      - 目标服务器可以看到客户端的原始主机名.
  - (4) set_header
    - proxy_set_header X-Real-IP $remote_addr;
    - 功能描述:
      - 目标服务器可以看到客户端的真实ip, 而不是转发服务器的ip.
  - (5) 更多proxy指令
6 upstream 模块
- 1. 模块: ngx_http_upstream_module
- 1. 功能简介:
    - 该指令使请求被上行信道之间的基于客户端的IP地址分布.
    - 范例: 例6
- 1. 指令:
    - (1) ip_hash
    - 语法: ip_hash;
    - 作用域: upstream
    - 指令功能及注意:
      - 指定服务器租的负载均衡方法，请求基于客户端的IP地址在服务器间进行分发。
      - IPv4地址的前三个字节或者IPv6的整个地址，会被用来作为一个散列key.
      - 这种方法可以确保从同一个客户端过来的请求，会窗格同一台服务器.
      - 除了当服务器被认为不可用的时候，这些客户端的请求会被传给其他服务器，而且很有可能也是同一台服务器.
      - 如果其中一个服务器想暂时移除，应该加上down参数.这样可以保留当前客户端IP地址散列分布. 如例6.1
        
        (2) server
    - 语法: server address [parameters];
    - 作用域: upstream
    - 指令功能及注意:
      - 定义服务器的地址address和其他参数parameters.
      - 地址可以是域名或者IP地址，端口是可选的，或者是指定”unix:”前缀的UNIX域套接字的路径.
      - 如果没有指定端口，就使用80端口.
      - 如果一个域名解析到多个IP, 本质上是定义了多个server.
    - 配置范例: 例6.2 * (3) upstream
    - 语法: upstream name { ... }
    - 作用域: http
    - 指令功能及注意:
      - 功能: 描述一个服务器的集合，该集合可被用于proxy_pass和fastcgi_pass指令中, 作为一个单独的实体.
      - 这些服务器可以是监听在不同的端口，另外，并发使用同时监听TCP端口和Unix套接字的服务器是可能的。
      - 这些服务器能被分配不同的权重(weight).weight默认为1.
      - 配置范例: 例6.3

// 例6
upstream backend {
    server backend1.example.com weight=5;
    server backend2.example.com:8000;
    server unix:/tmp/backend3;
}

server {
    location / {
        proxy_pass http://backend;
    }
}

// 例6.1
upstream backend {
    ip_hash;
    server backend1.example.com;
    server backend2.example.com;
    server backend3.example.com down;
    server backend4.example.com;
}

// 例6.2
upstream backend {
    server backend1.example.com weight=5;
    server 127.0.0.1:8080       max_fails=3 fail_timeout=30s
    server unix:/tmp/backend3;
}

// 例6.3
upstream backend {
    server backend1.example.com weight=5;
    server 127.0.0.1:8080       max_fails=3 fail_timeout=30s;
    server unix:/tmp/backend3;
}

7 NGINX全部模块

五、Nginx模块开发实验

docker 问题汇总(持续更新)

Tue, 28 Apr 2015 00:00:00 +0800

1. 非root身份运行Docker

你需要将自己添加到docker群组，那样才能以非root用户的身份来运行Docker
解决方法:
- 1. 将当前用户加入docker组: sudo usermod -a -G docker $USER
- 1. 创建个新docker组用户: sudo useradd –create-home –shell /bin/bash –user-group –groups docker,adm,sudo YOUR_USER_NAME

docker getting started

Mon, 27 Apr 2015 00:00:00 +0800

参考

Getting Started

一 Ubuntu 安装 Docker

方法一
方法二 推荐
- wget -qO- https://get.docker.com/ | sh

二命令集合

常用命令: docker –help
- 1. docker pull [OPTIONS] IMAGENAME[:TAG|@DIGEST] # 拉取名叫IMAGENAME的镜像
    - sudo docker pull ubuntu:14.04 # :后面的是标记
- 1. docker run [OPTIONS] IMAGE [COMMAND] [ARG…] # 运行镜像，创建容器(容器是镜像的实例)
    - sudo docker run -i -t ubuntu:14.04
- 1. docker images [OPTIONS] : 查看镜像
    - sudo docker images -a 查看所有镜像
- 1. docker ps [OPTIONS]: 查看容器状态
    - sudo docker ps
- 1. docker build [OPTIONS] PATH|URL|- # 用Dockerfile创建自己的镜像
    - sudo docker build -t diyImageName –no-cache –rm=true . # (.是Dockerfile所在的路径)
    - sudo docker build -t diyImageName –no-cache –rm=true - < /path/to/Dockerfile
- 1. docker login # 登陆远程服务器
- 1. docker push [OPTIONS] NAME[:TAG] # 推送镜像到远程
    - sudo docker push whatwewant/ubuntu:14.04
- 1. docker save [OPTIONS] IMAGE [IMAGE…] # 保存镜像到本地
    - sudo docker save -o ubuntu.tar ubuntu:14.04
    - (如果没指定TAG, 这里是14.04, 则默认是lastest)
- 1. docker load [OPTIONS] # 导入本地镜像
    - sudo docker load –input=ubuntu.tar
- 1. 容器操作:
    - docker start [OPTIONS] CONTAINER [CONTAINER…]
    - sudo docker start 4e817cb70b48
    - sudo docker start containerName
    - (docker run 用 –name=containerName 指定容器名字，　默认无名字) * docker stop [OPTIONS] CONTAINER [CONTAINER…] * docker restart [OPTIONS] CONTAINER [CONTAINER…]
- 1. docker rm [OPTIONS] CONTAINER [CONTAINER2 …]
    - 删除容器: sudo docker rm web
- 1. docker rmi [OPTIONS] IMAGE [IMAGE2 …]
    - 删除镜像: sudo docker rmi -f ubuntu
    - 删除所有本地镜像: sudo docker rmi -f $(docker ps -aq)
- 1. docker commit [OPTIONS] CONTAINER [REPOSITORY[:TAG]]
    - 提交改动，类似git commit
    - 因为容器是只读的，所以不提交改动，一旦容器关闭，配置便失效了
    - 所以，建议写Dockerfile
    - Ex: sudo docker -a cole -m “Comments: Where or what change ..” web
    - Ex: sudo docker -a cole -m “Comments: Where or what change ..” d10c3120b4d7
- 1. docker inspect [OPTIONS] CONTAINER|IMAGE [CONTAINER:IMAGE…]
    - 查看容器或镜像的详细信息
    - Ex: sudo docker inspect ubuntu:14.04
    - Ex: sudo docker inspect -f ubuntu:14.04
    - Ex: sudo docker inspect -f ubuntu:14.04
- 1. docker import
    - Ex: docker import http://docker.widuu.com/ubuntu.tar
常用选项: 这里针对 docker run
- -p, –publish=[] : 指定端口映射, 可多次使用
  - docker run -p [HOST_IP:]HOST_PORT:CONTAINER_PORT …
    - sudo docker run -p 8080:80 -d ubuntu:14.04
    - sudo docker run -p 8080:80 -p 127.0.0.1:2022:22 -d ubuntu:14.04
- -P, –publish-all: 所有为所有EXPOSE的端口随机映射
  - EXPOSE 一般在Dockerfile中指定
  - EXPOSE 80, 22
- -i, –interactive: 用户交互，建议和-t一起使用，效果更棒
  - sudo docker run -i -t ubuntu:14.04
- -t, –tty : tty方式，伪终端:
  - sudo docker run -i -t ubuntu:14.04
- -d, –detach: 以Daemon方式运行Container
  - sudo docker run -d ubuntu:14.04
- -v, –volume=[]: 将本地数据(文件夹等)挂载到Container
  - docker run -v /hostAsbpathSrc:/containerAbspathSrc …
    - sudo docker run -i -t -v /home/ubuntu/data:/data ubuntu:14.04
- -u, –user= : Username or UID (format: <name uid>[:<group gid>])
- -w, –workdir= : 指定工作路径, 如果不存在会自动创建
  - sudo docker run -i -t -w /home/xxx/workdir ubuntu:14.04
- –name= : 给容器命名, 好处多多的, 代替容器ID
  - sudo docker run –name work -it ubuntu:14.04

三 Docker 命令实习:

1. 拉取或创建镜像:
- 拉取: sudo docker pull ubuntu:14.04
- 创建: sudo docker build -t “whatwewant/ubuntu:14.04” –no-cache –rm=true - < Dockerfile # 请确保Dockerfile存在
  - 注意: 这里: -t == –tag, 最好指定, 这里不仅仅是标签，更重要的是镜像名字(Repository)，属于自己的，而不是官方的
2. 运行镜像IMAGE，即新建容器CONTAINER:
- 伪终端交互: sudo docker run –name web -i -t -P ubuntu:14.04
- Daemon方式: sudo docker run -d -P ubuntu:14.04
3. 提交改动:
- sudo docker commit -a cole -m “Comments” d10c3120b4d7
4. 推送到远程服务器:
- sudo docker push whatwewant/ubuntu:14.04
5. 删除容器:
- sudo docker rm d10c3120b4d7
6. 删除镜像:
- sudo docker rmi whatwewant/ubuntu:14.04
- 删除所有镜像: sudo docker rmi -f $(sudo docker ps -aq)
7. 结束容器:
- 容器ID: sudo docker kill d10c3120b4d7
- 容器名字: sudo docker kill web
- 伪终端结束: exit 或 C-d(Ctrl+d)
8. 查看容器或镜像详细信息: 容器是镜像的实例
- sudo docker inspect d10c3
- sudo docker inspect ubuntu:14.04
- 查看个别属性，因为输出是json
- Ex: sudo docker inspect -f ubuntu:14.04
- Ex: sudo docker inspect -f ubuntu:14.04

四 Dockerfile 的编写，自定义镜像

常用指令: 每个命令在原基础上新建一个容器, 表现为容器ID
- 1. FROM
    - 格式: FROM :
    - 第一条指令必须为FROM指令。如果在同一个Dockerfile中创建多个镜像时，可以使用多个FROM指令。 * 例子: FROM ubuntu:14.04
- 1. MAINTAINER :
    - 格式: MAINTAINER
    - 指定维护信息 * 例子: MAINTAINER Cole Smith whatwewant@gmail.com
- 1. RUN :
    - 格式: RUN 或 RUN [“executable”, “param1”, “param2”]
    - 执行系统命令
    - 例子: RUN apt-get install -qqy nginx
    - 例子: RUN [“mkdir”, “-p”, “/data/v1”]
- 1. CMD :
    - 格式: CMD [“excutable”, “param1”, “param2”]
    - 使用exec执行, 一个Dockerfile只能执行一条CMD, 以最后一条为准
    - Ex(表示例子): CMD [“/usr/sbin/sshd”, “-D”]
- 1. EXPOSE :
    - 格式: EXPOSE
    - 容器暴露端口，一般和docker run -P结合，自动端口映射
    - 可以有多条EXPOSE语句
    - Ex: EXPOSE 80
    - Ex: EXPOSE 80 22
- 1. ENV :
    - 格式: ENV
    - 指定一个环境变量。
      - Ex: ENV PYTHON python3
- 1. ADD :
    - 格式: ADD
    - 复制本地或URL到容器 * Ex: ADD
- 1. COPY :
    - 格式: COPY
    - 和ADD类似，复制功能，但是src为本地目录是推荐使用 * Ex: COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf
- 1. VOLUME :
    - 格式: VOLUME []
    - Ex: VOLUME [“/data”]
Dockerfile 实习:

# Comments
# 拉取镜像
FROM ubuntu:14.04

# 维护者信息
MAINTAINER Cole Smith <tobewhatwewant@gmail.com>

# 更换为163的源，国内你懂的
RUN echo "deb http://mirrors.163.com/ubuntu/ trusty main restricted universemultiverse" > /etc/apt/sources.list && \
    echo "deb http://mirrors.163.com/ubuntu/ trusty-security main restricte universe multiverse" >> /etc/apt/sources.list && \
    echo "deb http://mirrors.163.com/ubuntu/ trusty-updates main restricted universe multiverse" >> /etc/apt/sources.list && \
    echo "deb http://mirrors.163.com/ubuntu/ trusty-proposed main restricted universe multiverse" >> /etc/apt/sources.list && \
    echo "deb http://mirrors.163.com/ubuntu/ trusty-backports main restricted universe multiverse" >> /etc/apt/sources.list && \
    echo "deb-src http://mirrors.163.com/ubuntu/ trusty main restricted universe multiverse" >> /etc/apt/sources.list && \
    echo "deb-src http://mirrors.163.com/ubuntu/ trusty-security main restricted universe multiverse" >> /etc/apt/sources.list && \
    echo "deb-src http://mirrors.163.com/ubuntu/ trusty-updates main restricted universe multiverse" >> /etc/apt/sources.list && \
    echo "deb-src http://mirrors.163.com/ubuntu/ trusty-proposed main restricted universe multiverse" >> /etc/apt/sources.list && \
    echo "deb-src http://mirrors.163.com/ubuntu/ trusty-backports main restricted universe multiverse" >> /etc/apt/sources.list

# 更新源
RUN apt-get -qqy update

# 安装软件
# 安装ssh
RUN apt-get install -qqy openssh-server

# 安装nginx
RUN apt-get install -qqy nginx

# 安装supervisor
RUN apt-get install -qqy supervisor

# 复制supervisord配置
# 确保当前目录有 supervisord.conf 文件
# 配置写法，看下边
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf

# 指定主机数据卷(文件夹等)在容器中挂载
# 和 -v HOST_DIR:CONTAINER_DIR 效果一致
# 这里，将主机的/data目录挂载到容器/data, 容器会自动创建/data
VOLUME ["/data"]

# 映射端口
EXPOSE 22 80

# 执行命令
CMD ["/usr/bin/supervisord"]

# 最后，终端创建, 命令如下
# sudo docker build -t whatwewant/ubuntu:14.04 --no-cache --rm - < Dockerfile

supervisor的配置文件supervisord.conf

[supervisord]
nodaemon=true

[program:sshd]
command=/usr/sbin/sshd -D

[program:nginx]
command=/usr/sbin/nginx start

五我的Dockerfile

linux mysql5.5 不能显示中文问题解决办法

Sun, 19 Apr 2015 00:00:00 +0800

问题: mysql 不能正确显示中文

1. mysql5.5 默认字符集是 latin1 :
  - 查看: show variables like ‘character%’;
1. 注意
  
  请确保在把character_set_database 和 character_set_server的字符集改为utf8以后再写数据, 否则数据以latin1字符集存入，永远无法正确显示

解决: 编辑配置文件: /ect/mysql/my.conf

1. 在[client]里加入 default-character-set = utf8:

[client]
port            = 3306
socket          = /var/run/mysqld/mysqld.sock
default-character-set = utf8

1. 在[mysqld]字段加入charter-set-server = utf-8

[mysqld]
#
# * Basic Settings
#
user            = mysql
pid-file        = /var/run/mysqld/mysqld.pid
socket          = /var/run/mysqld/mysqld.sock
port            = 3306

1. 在[mysql]字段加入default-character-set = utf-8

[mysql]
no-auto-rehash
default-character-set = utf8

1. 重启mysqld : sudo service mysql restart

参考

gulp 入门

Sat, 18 Apr 2015 00:00:00 +0800

参考

一. 安装: gulp

(npm 模块管理器安装)
-g 全局安装

sudo npm install -g gulp

二. 实习开始

// 进入或创建项目地址:

// 实验一 begin: 使用gulp入门
// 在项目根目录新建 gulpfile.js 文件
// 获取 gulp
gulp = require('gulp');

// 获取 uglify 模块, 用于压缩JS
// 提前安装: npm install uglify
// 在项目目录下安装即可，不用全局, 会创建node_modules目录存放模块
var uglify = require('gulp-uglify');

// 压缩JS文件
// script 是task的一个参数名, 字符串
// 执行命令: gulp script
// 1. gulp.task(name, fn) - 定义任务，第一个参数是任务名，第二个参数是任务内容
// 2. gulp.src(path) - 选择文件，传入参数是文件路径
// 3. gulp.dest(path) - 输出文件
// 4. gulp.pipe() - 管道，你可以暂时将 pipe 理解为将操作加入执行队列
// 注意: 请确保src指定的目录和文件存在，否则将不执行压缩，即使添加修改新文件
gulp.task('script', function () {
    // 找到文件
    gulp.src('./js/*.js')
        // 压缩文件
        .pipe(uglify())
        // 另存为压缩后的文件
        .pipe(gulp.dest('dist/js'));
});
// 实验一 end

// 实验二 创建监听器,一旦修改, 自动执行 begin
// 新任务: 监听改变
// 执行命令: gulp auto
gulp.task('auto', function () {
    // 监听文件修改，当文件修改则执行 script 任务
    gulp.watch('js/*.js', ['script']);
});
// 实验二 end

// 实验三 启用默认任务 begin
// default 是默认名字
// 执行命令: gulp
gulp.task('default', ['script', 'auto']);
// 实验三 end

// 实验四 压缩 css Begin
// gulp-minify-css 模块,用于压缩 CSS
// 安装: npm install gulp-minify-css
minifyCSS = require('gulp-minify-css');

// 压缩css
// 启动命令: gulp css
gulp.task('css', function () {
    gulp.src('./css/*.css')
        .pipe(minifyCSS())
        .pipe(gulp.dest('dist/css'));
});

// 启动命令: gulp auto
gulp.task('auto', function () {
    gulp.watch('css/*.css', ['css']);
})

// 使用 gulp.task('default')定义默认任务
// 命令: gulp
gulp.task('default', ['auto', 'css']);
// 实验四 end

// 实验五 压缩图片: begin
// 获取压缩图片模块: gulp-imagemin
// 安装: npm install gulp-imagemin
imagemin = require('gulp-imagemin');

// 压缩图片任务: src + 模块 + dest
// 注意: 请确保images目录及文件存在
gulp.task('images', function () {
    gulp.src('images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'));
});
// auto watch
gulp.task('auto', function () {
    gulp.watch('images/*.*', ['images']);
});
// default task
gulp.task('default', ['auto', 'images']);
// 实验五 end

// 实验六 编译less begin
// 获取 gulp-less 模块
// 安装: npm install gulp-less
var less = require('gulp-less');

// 启动命令: gulp less
gulp.task('less', function () {
    gulp.src('./less/**.less')
        .pipe(less())
        .pipe(gulp.dest('./dist/less'));
});

// 启动命令: gulp auto
gulp.task('auto', function () {
    gulp.watch('./less/**.less', ['less']);
})

// 启动命令: gulp
gulp.task('default', ['less', 'auto']);
// 实验六 end

// 实验七 用 glup 编译 Sass begin
// 用 ruby-sass 编译css
// 安装: npm install gulp-ruby-sass
// 注意: 前提得先安装 ruby 和 sass
// 可参考: https://github.com/nimojs/blog/issues/14
// 安装 ruby: sudo apt-get intsall ruby-dev
// 能翻墙直接: gem install sass
var sass = require('gulp-ruby-sass');

gulp.task('sass', function () {
    return sass('sass/')
    .on('error', function (err) {
        console.error('Error!', err.message);
    })
    .pipe(gulp.dest('dist/css'));
});
gulp.task('auto', function () {
    // sass/**/*.scss 是 glob 语法, node-glob
    gulp.watch('sass/**/*.scss', ['sass']);
});
gulp.task('default', ['sass', 'auto']);
// 实验七 end

三使用gulp构建项目

请看 npm模块管理器
1. 生成 package.json:
  - npm init
1. 安装依赖:
  - npm install gulp –save-dev (非常有用)
  - (package.json 会多出 devDependencies … gulp …)
  - 其他依赖:
  - npm install gulp-uglify gulp-watch-path stream-combiner2
  - npm install gulp-sourcemaps gulp-minify-css gulp-autoprefixer gulp-less
  - npm install gulp-ruby-sass gulp-imagemin gulp-util –save-dev * 当你将这份 gulpfile.js 配置分享给你的朋友时，就不需要将 node_modules/　发送给他，他只需在命令行输入：
  - npm install
1. 设计目录结构:
  - src : 源码目录:
  - less *.less文件
  - sass *.scss *.sass文件
  - css
  - js
  - fonts
  - images * dist : 编译后压缩的版本目录
1. 让命令行输出的文字带颜色

var gulp = require('gulp');
var gutil = require('gulp-util');

gulp.task('default', function () {
    gutil.log('message');
    gutil.log(gutil.colors.red('error'));
    gutil.log(gutil.colors.green('message') + 'some');
});

1. 配置JS压缩任务: gulp-uglify
  - …
1. gulp-watch-path: 只编辑改动文件
  - 通过 event 改变的信息来指定文件, event是自动的

event {
    // 发生的类型, 不管是添加, 改变还是删除
    type: 'changed',
    // 触发事件路劲:
    path: '/path/to/src/js/log.js'
}

var watchPath = require('gulp-watch-path');

gulp.task('watchjs', function () {
    gulp.watch('src/js/**/*.js', function (event) {
        // watchPath(event, search, replace[, distExt])
        //  eventgulp.watch 回调函数的 event
        //  search需要被替换的字符串或正则（字符串会被转换为正则 /^src\//）
        //  replace第三个参数是新的的字符串
        //  distExt扩展名(非必填)
        var paths = watchPath(event, 'src/', '/dist');
        /*
          paths 
            {
                srcPath: 'src/js/log.js',
                srcDir: 'src/js/',
                distPath: 'dist/js/',
                srcFilename: 'log.js',
                distFilename: 'log.js'
            }
        */
        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);
        gutil.log('Dist ' + paths.distPath);

        gulp.src(path.srcPath)
            .pipe(uglify())
            .pipe(gulp.dest(path.distPath));
    });
});

gulp.task('default', ['watchjs']);

1. stream-combiner2: 用于检测js错误, 一出错, gulp立即终止并报错
1. gulp-sourcemaps:
  - 压缩后的代码不存在换行符和空白符，导致出错后很难调试，好在我们可以使用sourcemap 帮助调试
1. 配置CSS任务: gulp-minify-css
1. gulp-autoprifixer:
  - autoprefixer 解析 CSS文件并且添加浏览器前缀到CSS规则里
1. 配置 less 任务: gulp-less
1. 配置 sass 任务: gulp-sass
1. 配置 image 任务: gulp-imagemin
1. 配置复制文件任务

gulp.task('watchcopy', function () {
    gulp.watch('src/fonts/**/*', function (event) {
        var paths = watchPath(event); 

        gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath);
        gutil.log('dist ' + path.distPath);
        
        gulp.src(paths.srcPath)
            .pipe(gulp.dest(path.distDir));
    });
});

gulp.task('copy', function () {
    gulp.src('src/fonts/**/*')
        .pipe(gulp.dest('dist/fonts/'));
});

gulp.task('default', 
            [
                'watchjs', 
                'watchcss', 
                'watchless',
                'watchsass',
                'watchimage',
                'wacthcopy'
            ]); 

15. 自动刷新浏览器页面，无需F5: gulp-livereload
- 文档
- 也许这也的livereload更简洁

var livereload = require('gulp-livereload');

gulp.task('less', function () {
    gulp.src('src/less/*.less')
        .pipe(livereload())
        .pipe(gulp.dest('dist/less/'))
        .pipe(livereload());
});

gulp.task('watch', function () {
    livereload.listen();
    gulp.watch('less/*.less', ['less']);
});

PHP CodeIgniter Framework Study 2

Tue, 14 Apr 2015 00:00:00 +0800

Course 5 SESSION机制和登陆验证

1. 利用SESSION进行登陆验证的原理:
  - 1. 基本流程:
  - 1. 客户端登陆: 用户输入用户名密码
  - 1. 服务端验证: 验证用户名和密码
  - 1. 生成SESSION, 并返回验证信息
      - 一些常量:
  - 1. POST信息: $_POST对象 (var_dump($_POST))
  - 1. GET信息: $_GET对象
  - 1. COOKIE信息: $_COOKIE
  - 1. SESSION信息: $_SESSION
  - 1. SERVER信息: $_SERVER
  - 1. FILE上传信息: $_FILES
  - 1. ENV信息: $_ENV
  - 1. REQUEST信息: $_REQUEST
1. 利用CI框架进行SESSION登陆验证:
  - 1. CI的SESSION类:
  - 1. 修改配置: application/config/config.php:
      - $config[‘encryption_key’]
      - 要使用SESSION, 该项不能为空
  - 1. 加载SESSION类:
      - $this->load->library(‘session’)
      - 在system/libraries/session/
  - 1. 创建SESSION:
      - $this->session-set_userdata($array)
  - 1. 查看SESSION:
      - $this->session->userdata(session名)
  - 1. 删除SESSION: $this->session->unset_userdata(‘SESSION名’);

Course 6 分页原理及实现

1. 分页原理介绍:
  - 1. 必须知道的一些参数:
  - a. 总共有多少条记录
  - b. 一页要有多少条记录
  - c. 总共有多少页
  - d. 当前页前后要显示及格分页链接
1. 利用CI的分页类实现分页列表:
  - 1. 设置一些CI分页基本参数:
  - 1. 总条数:
      - $config[‘total_rows’]
  - 1. 一页显示几条:
      - $config[‘per_page’]
  - 1. 定义当前页的前后各有及格数字链接:
      - $config[‘num_links’]
  - 1. 定义没有分页参数，主URL:
      - $config[‘base_url’]
      - 调用CI的分页类:
  - $this->load->library(‘pagination’); * 3. 执行分页方法:
  - $this->pagination->initialize(%config); * 4. 输出分页链接:
  - echo $this->pagination->create_links(); * 5. 查询部分数据(limit):
  - $this->db->limit($length, $start);
1. 其他:
  - 1. count($array); // 数组的长度

PHP CodeIgniter Framework Study

Sun, 12 Apr 2015 00:00:00 +0800

Course 1. Entrance To CodeIgniter

1. MVC简单介绍:
  - 1. 解释:
  - M: Model (数据模型)
  - V: View (用户界面)
  - C: Controller (控制器) * 2.
1. CI的简单介绍
1. CI的目录结构和工作流程:
  - CodeIgniter2.0.0目录结构:
  - index.php : 应用主入口文件
  - system: 矿建核心程序目录:
    - core : 核心程序: 框架的基类、初始化
    - database : 数据库操作相关程序
    - fonts : 字库
    - helpers : 辅助函数
    - language : 语言包
    - libraries : 通用类库，比如验证、缓存、图像处理
  - application : 项目目录:
    - cache : 存放数据或模板缓存文件
    - config : 与目录相关的配置
    - controllers : MVC的控制器，继承CI_Controller
    - core : 项目的核心程序
    - errors : 错误提示模板
    - helpers : 项目的辅助函数
    - hooks : 钩子，在不修改系统核心文件的基础上扩展系统功能
    - language : 语言包
    - libraries : 通用类库
    - logs : 日志
    - models : MVC的模型, 一般继承CI_Model
    - third_party : 第三方类库
    - views : MVC的视图，主要是模板
      - CI的业务流程:
  - 入口 -> 控制器 -> 方法 -> 参数:
    - 1.index.php -> URL路由 -> 安全过滤 -> 控制器 -> 模型/类库/辅助函数/插件/脚本
    - 1. 控制器-> 视图 -> 缓存 -> index.php 显示
  - 注意，每一个控制器都是一个类Class, 在每个Class里面的function都是一个页面
  - URL:
    - http://localhost
    - http://localhost/index.php
    - http://localhost/index.php/welcome
    - http://localhost/index.php/welcome/index.php
    - [SERVER]/[Controller-Class]/[Controller-Method]/[Arguments]
    - 默认控制器在: application/config/routes.php中有$route['default_controller']配置默认
1. 如何创建并操作一个CI控制器:
  - 1. 什么是控制器:
  - 一个控制器是一个类文件，用户通过URL访问的就是某个控制器类中的具体成员方法，并由这个方法中的代码去做某些操作 * 2. 如何创建控制器:
  - a. 进入application\controllers目录
  - b. 控制器文件名必须和类名一致，并且类名必须以大写之母开头
  - c. 继承核心的控制器类CI_Controller * 3. 创建方法:
  - a. 创建一个成员方法 function funName …
  - b. 默认访问的是index方法 * 4. URL如何传递参数给方法:
  - 方法段后的按次序传入方法中的形式参数

Course 2 Controller And Views

1. 简述视图与控制器的关系:
  - 1. 控制器:
  - 调用视图: 控制器需要根据用户的访问的不同方法，去调用相关视图
  - 传送数据: 控制器需要向视图中传送需要展示个用户的业务数据 * 2. 视图:
  - 一个视图就是一个网页或网页的部分
  - application\views文件夹
1. CI如何创建视图:
  - 进入application/views
  - 创建php文件
  - 写HTML嵌入PHP代码
1. CI控制器如何调用视图:
  - a. 调用一个视图:
  - $this->load->view(‘viewName’)
  - 这里 viewName是application/views中创建的视图文件名
  - 注意这里的视图文件一般以php结尾, 可以省去.php; 如果不是以.php结尾, 那么必须写完整的视图文件名 * b. 调用多个视图:
  - $this->load->view(‘v1’);
  - $this->load->view(‘v2’);
  - $this->load->view(‘v3’);
1. CI控制器如何向视图传值:
  - a. 介绍:
  - 数据通过控制器以一个数组或是对象的形式传入视图，这个数组或对象作为视图载入函数的第二个参数
  - $this->load->view(‘viewName’, ArrayOrObject); * b. 实例:
  - $data[‘title’] = ‘Title First’;
  - $data = array(‘name’ => $name, ‘count’=>$count)
  - $this->load->view(‘test_view’, $data) * c. 解释
  - 传入的是对象或数组
  - 视图中使用的是键名$name对象获取对应键值$value; * d. 一些函数:
  - @$count = file_get_contents($fileName);
  - $resource = fopen($fileName, ‘w’);
  - fwrite($resource, $count);
  - fclose($resource);

Course 3. 模型Model

1. 模型的介绍:
  - 1. 模型是一个数据库类
  - 1. 一个模型针对一张表
  - 1. 类中的方法是针对功能的具体需求而做的
1. 如何利用CI进行模型创建(增删改查):
  - 1. 模型的存放目录:
  - application/models * 2. 创建模型就是创建一个类文件:
  - 必须继承核心类CI_Model, 同上重载父类中的构造方法 * 3. 配置数据库: application/config/database.php:
  - 1. …

class Model_Name extends CI_Model {
    function __construct () {
        parent::__construct();
        $this->load->database();
    }
}

1. CI 为我们提供了一个强大而简单的数据库函数类:
  - Active Record 类: system/database/DB_active_rec.php
  - (3.0.0: system/database/DB_query_builder.php)
1. 如何在模型中使用Active Record类中的方法呢:
  - $this->db->方法名()
  - 例如: $this->db->get(‘entries’, 10); // 10是默认值
  - 方法:
  - 1. 连接数据库: $this->load->database():
      - 写在模型的构造函数里，这样加载模型的同时就连接上数据库了
  - 1. 插入数据: $this->db->insert($table_name, $data);:
      - 参数:
      - $table_name 表名
      - $data=你要插入的数据(键名=字段名, 键值=字段值, 自增主键不用写)
  - 1. 更新数据:
      - $this->db->where(字段名, 字段值);
      - $this->db->update(表名, 修改的数组);
  - 1. 查询数据:
      - $this->db->where(字段名, 字段值);
      - $this->db->select(字段);
      - $query = $this->db->get(表名);
      - return $query->result();
      - var_dump($query->result); 输出一个对象的。。。
  - 1. 删除数据:
      - $this->db->where(字段名, 字段值);
      - $query->db->delete(表名);
1. 在Controller中载入模型:
  - $this->load->model(模型名)
  - $this->模型名->方法

Course 4 CI快捷类库

1. PHP的文件上传如何实现:
  - 1. 提交上传:
  - enctype=”multipart/form-data”:
    - <form action="/index.php/upload/up" method="post" enctype="multipart/form-data">
  - type=”file” * 2. 接收信息:
  - $_FILES : var_dump($_FILES);
  - 原文件名
  - 临时文件名
  - 大小
  - 文件编码格式
  - 报错信息 * 3. 判断:
  - 文件大小
  - 文件格式 * 4. 上传:
  - move_uploaded_file(oldfile, newfile);
  - 例如: move_uploaded_file($_FILES[‘tmp_name’], ‘./upload/’.$_FILES[‘name’])

如何利用CI提供的类库实现便捷上传:

1. 定义一个数组，设置一些与上传相关的参数:

必须参数(3个):

// 设置上传目录, 这里写./, 目录要建在网站根目录，就是和application同级
// 如果你要在application目录下，可以使用系统定义的路劲常量APPPATH
// 例如: APPPATH.’uploads/’;
$config[‘upload_path’] = ‘./uploads/’;
// 设置允许上传的类型

$config[‘allowed_types’] = ‘gif

jpg

png’;

$config[‘max_size’] = ‘100’;

可选参数:
- // 如果是图片还还能设置最大高度和宽度
- $config[‘max_width’] = ‘1024’;
- $config[‘max_height’] = ‘768’;
- // 要使用的文件名
- $config[‘file_name’] = ‘xxx’;
- // 是否覆盖
- $config[‘override’] = FALSE; // 默认
- // 是否将文件名中的空格替换为下划线
- $config[‘remove_spaces’] = TRUE;
- // 是否重命名文件，将文件名重命名为随机的加密字符串
- $config[‘encrypt_name’] = TRUE

1. 现成类库: system/libraries: Upload.php
1. 调用CI的上传通用类，并执行上传:
  - // upload为调用的类名，全小写
  - $this->load->library(‘upload’, $config);
  - // 如果上传框的name写的是userfile, 那就不用传参数，如果不是，把name的值传进去
  - $this->upload->do_upload(‘上传框的name’):
  - 该函数返回值为boolean, 成功为TRUE
1. 接收出错信息或成功信息:
  - 出错信息:
  - $error = array(‘error’ => $this->upload->display_errors()); * 成功信息，会把上传后的文件信息返回来:
  - $data = array(‘upload_data’ => $this->upload->data());

Tmux 初识

Sat, 11 Apr 2015 00:00:00 +0800

Tmux: Terminal Multiplexer

linux安装tmux最新版脚本

1. 基本命令

1. 新建一个无名session:
  - tmux
1. 显示有多少个session:
  - tmux list-session
1. 新建有名字 sessionName 的session:
  - tmux new-session -s sessionName
1. 脱离tmux, 断开session, 但保留现场:
  - ctrl+b+d (d: detachead):
  - C-b (Ctrl+b): Send the prefix key (C-b) through to the application.
1. 重写连接session:
  - tmux attach-session -t sessionName
1. 结束/杀死session:
  - tmux kill-session -t sessionName
1. 删除所有session, 只要删除server即可, 因为所有的session的跑在一个server上:
  - tmux kill-server
1. 一个server可以有多个session, 一个session上可以有多个窗口:
  - C-b c (ctrl+b +c): c: create, 在session中新建多窗口
  - C-b 窗口序号: 可以切换窗口, 如 C-b 0
1. 一个窗口可以分割多个窗格:
  - C-b % : 分列
  - C-b “ : 分行
  - C-b o 或者 C-b 方向键: 切换窗格
  - C-d 结束当前窗格
1. 获取帮助信息，快捷键:
  - C-b ?
1. 执行快捷键两种方式:
  - 1. C-b + 快捷键
  - 1. C-b + : + 快捷键全称
1. 在.tmux.conf配置:
  - 内容:
  - unbind C-b
  - set -g prefix C-a * 更新环境, 使配置生效:
  - C-b + : + source-file ~/.tmux.conf
  - 现在C-a 生效
13 快捷键 C-b 来send prefix (默认): |ShortCut|Meanings| |:——:|:——:| |?|list-keys| |d|detach-client| |c|new-window| |n|next-window| |p|previous-window| |”|split-window| |%|split-window -h| |!|break-panel| |q|display-panels| |o|rotate-window| |0-9|select-window| |:|command-prompt|
1. tmux Copy Mode 来支持鼠标滚轮:
  - C-b [
  - 类似vim的命令模式
  - 编辑 .tmux.conf, 添加:
  - set -g mode-keys vi * source-file ~/.tmux.conf
1. 复制黏贴:
  - vim 复制:
    - 移到想要复制的位置, 敲空格建来开始复制命令
    - 然后vim方式移动
    - 敲回车结束复制操作
  - 粘贴: C-b ]

2. 远程服务器tmux

如果远端一个命令阻塞, tmux就很好用了
如果网络断开也不怕
tmux聊天, 分享窗口, 同步显示:
- 只要对方attach同一个session即可: tmux a -t sessionName == tmux attach-session -t sessionName

3. .tmux.conf 配置: 下载地址

unbind C-b
set -g prefix C-a
setw -g mode-keys vi

# split window like vim
# vim's defination of a horizontal/vertical split is revised from tmux's
bind s split-window -h
bind v split-window -v
# move around panes with hjkl, as one would in vim after C-w
bind h select-pane -L
bind j select-pane -D
bind k select-pane -U
bind l select-pane -R

# resize panes like vim
# feel free to change the "1" to however many lines you want to resize by
# only one at a time can be slow
bind < resize-pane -L 10
bind > resize-pane -R 10
bind - resize-pane -D 10
bind + resize-pane -U 10

#bind : to command-prompt like vim
# this is the default in tmux
bind : command-prompt

Linux 高级网络配置

Sat, 11 Apr 2015 00:00:00 +0800

1. 网卡高级命令

1. 查看物理网卡状态:
  - sudo mii-tool eth0
1. 查看物理网卡配置:
  - ethtool eth0 查看网卡特性
  - ethtool -i eth0 查看驱动信息
  - ethtool -S eth0 查看网卡状态

2. IP 别名

Linux 支持在一个物理网卡上配置多个IP地址用来实现类是子接口之类的功能，也就是IP别名

1. 禁用网卡管理: (CentOS or RHEL):
  - service NetworkManager stop
  - chkconfig NetworkManager off
1. 用IP命令临时创建一个IP别名:
  - ip addr add 10.1.1.1/24 dev eth0 label eth0:0
  - eth0:0中第二个0为别名的编号
  - 第二个别名可以为eth0:1
  - 当然也可以使用ifconfig
1. 永久添加IP别名..

apache2.4: You don't have permission to access / on this server.

Sat, 11 Apr 2015 00:00:00 +0800

1. 檢查權限

1. 用戶和組的配置 ```bash sudo vim /etc/apache2/apache2.conf 找到 User 和 Group 发现配置用户和组的文件在/etc/apache2/envvars
2. 第一种强制方法就是将User ${APACHE_RUN_USER}改为 User ubuntu, 将Group ${APACHE_RUN_GROUP}改为Group ubuntu (其中ubuntu是web根目录(DocumentRoot)权限用户)
3. 第二种方法是修改/etc/apache2/envvars 将export APACHE_RUN_USER=www-data改为export APACHE_RUN_USER=ubuntu 将export APACHE_RUN_GROUP=www-data改为export APACHE_RUN_GROUP=ubuntu (其中ubuntu为web根目录(DocumentRoot)权限用户) ```
1. 修改web根目录权限, 默认是当前用户:
  - sudo chown -R owner:group /path/to/webDocumentRootDirectory
1. 默认启动/etc/apache2/sites-enabled/*.conf, 因为/etc/apache2/apache2.conf中IncludeOptional sites-enabled/*.conf
1. 默认启动的virtual host是/etc/apache2/sites-enabled/000-default.conf, 修改DocumentRoot:
  - DocumentRoot /path/to/webDocumentRootDirectory
1. Directory是配置文件，这个不明白; DocumentRoot是virtual host的web文件根目录

LVM: Logical Volume Manager

Fri, 10 Apr 2015 00:00:00 +0800

LVM: 逻辑卷管理

1. 概念

|缩写|全称|中文| |:—|:—|:—| |PE|Physical Extend|物理扩展| |PV|Physical Volume|物理卷| |VG|Volume Group|卷组| |LV|Logical Volume|逻辑卷|

2. 顺序 or 层次

|Module|Direction|Module| |:—-:|:——-:|:—-:| |PV|<—-|PE| |向下组成||向下组成| |VG|<—-|PE Pool| |向下组成||向下组成| |LV|<—-|PE|

3. 顺序创建

1. 将物理磁盘设备初始化为物理卷:
  - 创建: pvcreate /dev/sda /dev/sdb
  - 查看状态: pvs 查看简单信息; pvdisplay 查看详细信息
1. 创建卷组, 将PV加入卷组中:
  - 创建: vgcreate vgName /dev/sda /dev/sdb
  - 查看状态：　vgs vgdisplay
  - 位置: /dev/vgName
1. 基于卷组创建逻辑卷:
  - 创建: lvcreate -n lvName -L 2G vgName
  - 查看状态: lvs lvdisplay
  - 位置: /dev/vgName/lvName
1. 格式化文件系统:
  - mkfs.ext4 /dev/vgName/lvName
1. 挂在文件系统:
  - mount /dev/vgName/lvName /mnt
1. 查看挂载文件系统状态:
  - mount
  - df -m

4. 顺序删除

1. 卸载逻辑卷: umount /mnt
1. 移除逻辑卷: lvremove /dev/vgName/lvName
1. 移除卷组(前提: 必须移除所有lv才行): vgremove /dev/vgName
1. 移除物理卷: pvremove /dev/sda /dev/sdb

5. 拉伸一个逻辑卷

1. 保证VG有足够的空闲空间, vgdisplay
1. 扩充逻辑卷:
  - lvextend -L +1G /dev/vgName/lvName
  - 为lvName逻辑卷增加1G扩展空间
1. 查看扩充后LV大小, lvdisplay
1. 更新文件系统，才能让系统知道(df 前后可知):
  - resize2fs /dev/vgName/lvName
1. 查看新的文件系统: df -h

6. 拉伸一个卷组

1. 将要添加到VG的硬盘格式化为PV:
  - pvcreate /dev/sdd
1. 将新的PV添加到指定卷组:
  - vgextend vgName /dev/sdd
1. 查看VG大小 vgdisplay

7. 缩小一个逻辑卷

1. 卸载已经挂载的文件系统:
  - umount /dev/vgName/lvName
1. 缩小文件系统:
  - resize2fs /dev/vgName/lvName 1G
  - 将文件系统缩小到 1G
1. 缩小LV:
  - lvreduce -L -1G /dev/vgName/lvName
  - 将lvName逻辑卷减小 1G 大小
1. lvdisplay
1. 挂载文件系统:
  - mount /dev/vgName/lvName /mnt

8. 缩小卷组

1. 将一个pv从指定卷组中移除:
  - vgreduce vgName /dev/sdd
1. 查看 vgdisplay
3, 移除物理卷:
- pvremove /dev/sdd

Iptables 基础

Wed, 08 Apr 2015 00:00:00 +0800

参考

1. IPTABLES 命令的基础

One IPTABLES 规则的基本格式:

iptables [-t table] command [match] [target/jump]

table 默认为 filter 表

没有人要求target 必须放在 command 后面，但是最好这样。

match : 细致的描述了包的某个特点,以使这个包区别于其他所有包.这里可以指定包的来源:

来源IP地址

网络接口(-o eth0等)

端口(–sport, –dport)

协议类型(tcp udp icmp ….)

其他

target: 指定匹配报文的所有动作(ACCEPT, DROP, REDIRECT, CHAIN-NAME等)

Two IPTABLES tables 表

1. -t 选项指明要操作的表, 默认是filter表
1. tables:
  - 1. nat (3链): 主要用于网络地址转换,即Network Address Translation, 缩写为NAT.:
  - 1. 注意: 属于一个流的包只会经过这个表一次。如果第一个包被允许做NAT或Masqueraded, 那么余下的包会自动地被做相同的动作。也就是余下的包不会再通过nat这个表，一个一个的被NAT, 而是自动完成。这就是为什么不应该在nat表做任何过滤的主要原因.
  - 1. PREROUTING 链: 主要用于包刚刚到达防火墙时该表它的目的地址。(对远程进来的包)可以重定向访问的地址, 很方便
  - 1. OUTPUT 链: 改变本地产生的包的目的地址.全局代理用到,将本机产生的所有包通过OUTPUT表全部转到本地某个端口, 不明白？
  - 1. POSTROUTING 链: 在包就要离开防火墙是改变其源地址.
      - mangle (5链): 主要用来 mangle 数据包:
  - 1. 可以改变不同的包及包头的内容，如TTL, TOS 或 MARK.注意MARK并没有真正地改动数据包，它只是在内核空间为包设定一个标记.防火墙内的其他规则或程序(如tc)可以使用这中标记对包进行过滤或高级路由.
  - 1. PREROUTING 链: 在包进入防火墙之后、路由判断之前改变包.
  - 1. POSTROUTING 链: 在所有路由判断之后改变包.
  - 1. OUTPUT 链: 在确定包的目的之前更改数据包.
  - 1. INPUT 链: 在包被路由到本地之后, 但是在用户空间的程序看到他之前被改变.
  - 1. FORWARD 链: 在最初的路由判断之后、最后一次更改包的目的之前 mangle 包.
  - 注意: mangle 表不能做任何NAT, 它只是该表数据包的TTL, TOS 或 MARK, 而不是其源目地址. NAT在nat表中操作. * 3. filter (3链): 用来完成报文的过滤，和其他操作一样，在filter表里可以DROP/记录/ACCEPT/REJECT报文.:
  - 1. FORWARD 链: 主要用来处理非本机报文.
  - 1. INPUT 链: 处理所有目的地址为本机的报文
  - 1. OUTPUT 链: 处理所有本机发送的报文.
      - raw 表 (2链): Raw表和它的链都在netfilter的模块之前，主要用来完成NOTRACK功能.需要kernel大于等于2.6 :
  - 1. PREROUTING 链: 用于到本机的所有报文
  - 1. OUTPUT 链: 用于本机发送的所有报文

Three IPTABLES Commands 命令

1. -A, –append: 链尾追加规则:
  - iptables -t filter -A INPUT …
1. -D, –delete: 删除某链的规则:
  - 用序号(第1.条是1不是0, 累加): iptables -t filter -D INPUT 1
  - 用完整规则: iptables -D INPUT –dport 80 -j DROP
1. -R, –replace: 替换规则:
  - 和-D使用方式类似，但较少使用
1. -I, –insert: 插入规则:
  - iptable -I INPUT 1 –dport 80 -j ACCEPT # 在序号1上插入规则
1. -L, –list: 列出某链上的所有规则:
  - iptables -L INPUT
  - 如果没有指定链的名称，就列出该表上所有链的所有规则: iptables -L
1. -F, –flush: 清空某连上的规则, 也就是删除某链上的所有规则:
  - iptable -F INPUT
  - iptables -F # 没有指定链名，会清空该表上的所有链的所有规则
1. -Z, –zero: 清空计数器值:
  - iptables -Z INPUT
  - 同
1. -N, –new-chain: 新建用户自定义链:
  - iptables -N allowed
1. -X, –delete-chain: 从表上删除指定的链, 删除链前，必须清空链的规则.
  - iptables -X allowed
  - 只能删除用户自定义的链
1. -P, –policy: 为链配置默认的target(值为ACCEPT或DROP), 这个target称为策略:
  - iptables -P INPUT DROP
  - 默认使用这个target(策略), 只有符合特定规则的采用特定方式.
  - 只有内建的链才可以使用规则.但内建的链和用户自定义的链都不能用作策略
  - 不允许: iptables -P INPUT allowed
1. -E, –rename-chain:为链重命名:
  - iptables -E ChainOldName ChainNewName

Four IPTABLES OPTIONS (选项)

1. iptables -Lv
  - Option: -v, –version
  - Commands: –list, –append, –insert, –delete, –replace
  - Such as: iptables -Lv
  - Explanation:
1. iptables -Lx :
  - Option: -x, –exact # 将输出中的计数器显示准确的数字，必须和–list连用
  - Commands: -L, –list
  - Explanation:
1. iptables -Ln or iptables -Lvn:
  - Option: -n, –numeric # 使输出的IP地址和端口以数值的形式显示, 而不是默认名字，如主机名，网络名，程序名等
  - Commands: -L, –list
  - Explanation:
1. iptables -L –line-numbers:
  - Option: –line-numbers # 显示规则的行号
  - Commands: -L, –list # 列出规则
  - Explanation:
1. iptables -I INPUT -c 20 4000:
  - Option: -c, –set-counters # 设置字节或者报文的计数值
  - Commands: -I, -A, -R
  - Explanation
1. …:
  - Option: –modprobe # iptables 探测并装在要使用的模块.
  - Commands: All
  - Explanation:

2. IPTABLES 的匹配(matches)

One. 通用匹配: 可以在任何规则里

1. Match: -p, –protocol : 主要用来检查特定协议(TCP/UDP/ICMP等)
  - Example: iptables -A INPUT -p tcp
  - 1. 指定协议的名称，必须在/etc/protocols里面定义，否则报错
  - 1. 可以指定一个整数值, 例如ICMP是1, TCP是6, UDP是17
  - 1. 另外，可以指定为ALL, ALL表示仅匹配ICMP/TCP/UDP协议，这个是默认配置,数值为0:
  - iptables -A INPUT -p all -j ACCEPT
1. Match: -s, –src, –source : 主要用来匹配报文的源地址,单个IP或IP地址段(一个主机或一个网络):
  - Example: iptables -A INPUT -s 192.168.1.1
  - 1. 单个地址: -s 192.168.1.1
  - 1. 一个网络: -s 192.168.0.0/24
  - 1. 缺省表示所有地址
1. Match: -d, –dst, –destination: 匹配报文的目的地址, 用法和源地址一致
1. Match: -i, –in-interface : 以包进入本地所使用的网络接口来匹配包.注意:只能用于INPUT, FORWARD, PREROUTING链.
  - Example: iptables -A INPUT -i eth0
  - 1. 指定接口名称
  - 1. 使用通配符, 即英文加号, 表示匹配所有包, 不考虑来自哪个接口, 这是不指定接口的默认行为:
  - iptables -I INPUT -i +
1. Match: -o, –out-interface: 以包离开本地所使用的网络接口的匹配包, 和 -i 一样
1. Match: -f, –fragment : ….
集合例子: iptables -t nat -A OUTPUT -s 10.1.0.0/24 -d 111.112.113.114 -p tcp -j ACCEPT

Two. 只能用于TCP的TCP matches

1. Match: –sport, –source-port : 基于TCP包的源端口来匹配包:
  - Example: iptables -A INPUT -p tcp –sport 22
  - 1. 不指定此项，暗指所有端口.
  - 1. 使用服务名或端口号, 但名字必须在/ect/services中定义, 因为iptables从这个文件查找想要的端口号.
  - 1. 可以使用连续的端口: -p tcp –sport 22:80, 从22到80的所有端口, 包括22和80
  - 1. 连续端口可以省略第一个端口号，即从0号端口开始: -p tcp –sport :80
  - 1. 连续端口省略第二个端口号,即到65535端口为止: -p tcp –sport 22:
1. Match: –dport, –destination-port: 目的端口, 和–sport用法一样
1. Match: –tcp-flags :　匹配指定的TCP标记:
  - Example: iptables -A INPUT -p tcp –tcp-flag SYN,FIN,ACK SYN
  - 有两个参数，它们都是列表(以,隔开), 这两个列表以空格隔开
  - 第一个参数指定要检查的标记; 第二个标记指定”在第一个列表中出现过且必须被设为1(即状态打开)”的标记(第一个表的其他标记必须置零).
  - 也就是，第一个参数提供检查范围，第二个参数提供被设置的条件(即哪些可以置1)
  - 标记有: SYN, ACK, FIN, RST, URG, PSH, 还有ALL和NONE
  - 1. 表示匹配哪些SYN标记被设置而FIN和ACK标记没有设置的包: iptables -p tcp –tcp-flags SYN,FIN,ACK SYN
  - 1. –tcp-flags ALL NONE 匹配所有标记都未置1的包
1. Match: –tcp-option : 根据选项匹配包:
  - Example: iptables -p tcp –tcp-option 16
  - TCP选项是TCP头中的特殊部分，有三个不同的部分:
  - 1. 第一个8位组标书选项的类型
  - 1. 第二个8位组标书选项的长度(这个长度是整个选项的长度，但不包含填充部分所占的字节，而且要注意不是每个TCP选项都有这一部分)
  - 1. 第三个8位组标书选项的内容

Three. 能够用于UDP的UDP matches:

UDP是一种无连接协议，所以它在打开、关闭连接以及发送数据时没有多少标记要设置，它也不需要任何类型的确认.
1. Match: –sport, –source-port 和 TCP 一样
1. Match: –dport, –destination-port 和 TCP 一样

Four. 只能用于ICMP的ICMP matches

和UDP一样是无连接协议, 但是生存时间更短
ICMP协议主要用来错误报告和连接控制等
ICMP不是IP的子协议，而是和IP并列的一个协议，它主要用来增强IP功能和帮助IP进行错误处理.
Match: –icmp-type : 根据ICMP类型匹配包:
- Example: iptables -A INPUT -p icmp –icmp-type 8
- 帮助: iptables -p icmp –help
- icmp 类型 ….

Four. 1 SCTP匹配(matches):

流控制传输协议(SCTP), 是一个箱单新的协议，查看问

Five 显示匹配(Explicit matches):

Five. 一些特殊匹配, 例如基于状态(state), 所有者(owner)或者限制(limit)等

显示匹配必须用-m或–match装载, 比如使用状态匹配就必须使用 -m state

Five 1. 限速匹配器(match)

对指定的规则的日志数量加以限制
减少Dos syn flood攻击的影响
-m –limit –limit 5/s: 限制每秒5个package，其他丢弃(每个package 1480字节); 也就是在数量超过限定后，所有的包都会被匹配.
1. -m limit –limit 5/s –limit-burst 10/s:
  - limit-burst令牌首先被初始化为10, 每一条满足这条规则的报文都会消耗一个令牌
1. …

Five 2. MAC地址匹配器(match)

能够根据报文的MAC地址匹配报文，到目前只能根据报文的源MAC进行匹配
-m mac
Match: –mac-source : 基于包的MAC源地址匹配包，地址格式XX:XX:XX:XX:XX:XX :
- iptables -A INPUT -m mac –mac-source 00:11:22:33:44:55
- 注意: 因为MAC address 只能用于 Ethernet 类型的网络,所以这个match只能用于Ethernet接口, 而且，　它还只能在PREROUTING, FORWARD 和 INPUT链里使用.

Five 3. 多端口匹配器(match):

不能把标准匹配和多端口匹配混用: –sport 1024:65535 -m multiport –dport 21,23,80
Match : –source-port :源端口
- iptables -A INPUT -p tcp -m multiport –source-port 22,53,80,110
- 最多能匹配15个不连续端口，前提-p tcp 或 -p udp才有端口
Match : –destination-port :目的端口
- iptables -A INPUT -p tcp -m multiport –destination-port 22,53,80
Match : –port : 同端口多端口匹配，意思是它匹配的是那种源端口和目的端口是同一个端口的包, 比如: 端口80到端口80的包:
- iptable -A INPUT -p tcp -m multiport –port 22,53,80

Five 4. 属主匹配器(macth)

基于包的生成者(也就是所有者，或称作拥有者, owner)的ID来匹配包, owner可以是启动进程的用户的ID，或用户所在的组的ID或进程的ID或会话的ID.
注意: 这个扩展只能用在OUTPUT中，原因显而易见:我们几乎不可能得到发送端程序的ID的任何信息，或者在去往真正目的地哪儿有路由.
Match: –cmd-owner : 匹配命令的数组，也就是发送这个报文的进程名称:
- iptables -A OUTPUT -m owner –cmd-owner httpd
Match: –uid-owner : 按生成包的用户的ID(UID)来匹配外出的包:
- iptables -A OUTPUT -m owner –uid-owner 500
Match: –gid-owner : 组ID(GID):
- iptables -A OUTPUT -m owner –gid-owner 0
Match: –pid-owner : 进程ID(PID):
- iptables -A OUTPUT -m owner –pid-owner 78
Match: –sid-owner : 会话ID(SID, session id)
- iptables -A OUTPUT -m owner –sid-owner 100

Five 5. 字符匹配器(match)

Match: –string pattern: 指定字符串:
- –string “baidu.com”
- Example: iptables -A INPUT -m string –string “baidu.com” –algo bm -j DROP
- 匹配给定字符, 必须指定–algo bm或kmp算法
Match: –algo bm/kmp : 指定匹配算法(bm 或 kmp):
- Example: 同上
Match: –from offset :
- 设置偏移从它开始寻找任何匹配。如果没有通过，默认为0。
Match: –to offset:
- 设置偏移从它开始寻找任何匹配。如果没有通过，默认为数据包的大小。

3. IPTABLES 的动作(targets)和跳转(jumps)

One. 跳转到自定义链

1. iptables -N tcp-packets
1. iptables -A INPUT -p tcp -j tcp-packets

Two. Accept target

一旦满足，直接ACCEPT

Three. DNAT target

用来做目的地址转换, 也就是重写报文的目的地址;
如果一个报文匹配了这个规则，而且这个规则的target是DNAT, 那么这个报文以及这条连接上的所有后续报文都会被转换地址.
注意: DNAT只能在 NAT 表里面的PREROUTING 和 OUTPUT链上有效，或者是被这两条链调用的链里.
注意2: 包括DNAT target的链不能被除此之外的其他链调用, 如 POSTROUTING
1. Target: –to-destination :
  - iptables -t nat -A PREROUTING -p tcp -d 15.45.23.67 –dport 80 -j DNAT –to-destination 192.168.1.1-192.168.10
  - 指定要写入IP头的地址.上面离职就是把所有发往地址15.45.23.67的包都转发到一段LAN使用的私有地址，即192.168.1.1到192.168.10.在这种情况下，每个流都会被随机分配一个要转发到的地址，但同一个流总是使用同一个地址.
  - 也可以只指定唯一一个IP地址或端口或端口范围:
  - –to-destination 192.168.1.1:80
  - –to-destination 192.168.1.1:80-100
  - 注意只有-p指定TCP或UDP协议才可以使用端口

FOur, SNAT target: 源地址转换

–to-source
只能用于nat表的POSTROUTING链

Five. DROP target

Six. MASQUERADE target

这个target和SNAT target的作用是一样的，区别是它不需要指定–to-source
只能用于nat表的POSTROUTING链，而且它只有一个选项(不是必须的)
Options:
- –to-ports :
  - iptables -t nat -A POSTROUTING -p tcp -j MASQUERADE –to-ports 1024-31000
  - 在指定TCP或UDP的前提下，设置外出包能使用的端口，方式是单端口, 如–to-ports 1025, 或者端口范围, –to-ports 1024-4000.
  - 注意，范围用连字符.

Seven. REDIRECT target: 在防火墙所在的机子内部转发包或流到另一个端口

例如，可以把所有去往端口HTTP的包REDIRECT到HTTP proxy（例如squid）,当然这都发生在自己主机的内部.
注意, 它只能在nat表的PREROUTING、OUTPUT链和被它们调用的自定义里.
Options: –to-ports :
- Example: iptables -t nat -A PREROUTING -p tcp –dport 80 -j REDIRECT –to-ports 8080
- 在指定TCP或UDP协议的前提下，定义目的端口:
  - 1. 不使用这个选项，目的端口不会改变
  - 1. 指定一个端口, –to-ports 8080
  - 1. 指定端口范围, –to-ports 8080-8090
举栗子:
- 将外网访问本地端口8022转发到本地端口22:
  - iptables -t nat -A PREROUTING -p tcp –dport 8022 -j REDIRECT –to-ports 22
- 将内网访问本地端口8022转发到22端口:
  - iptables -t nat -A OUTPUT -p tcp –dport 8022 -j REDIRECT –to-ports 22

Eight. REJECT target

REJECT 和 DROP 基本一样,区别在于它出了阻塞包之外，还向发送者返回错误信息.
只能用于 INPUT、FORWARD、OUTPUT和它们的子链(自定义链)
Option: –reject-with:
- Example: iptables -A FORWARD -p TCP –dport 22 -j REJECT –reject-with tcp-reset
- 返回的信息类型:
  - 1. icmp-net-unreachable
  - 1. icmp-host-unreachable
  - 1. icmp-port-prohibited
  - 1. icmp-proto-unreachable
  - 1. icmp-bet-prohibited
  - 1. icmp-host-prohibited
  - 1. echo-reply
  - 1. tcp-reset # 主要用来阻塞身份识别探针

NINE. RETURN target: 返回上一层

规则的顺序: 子链 –> 父链 –> 缺省的策略:
- 即若包在子链上遇到了RETURN, 则返回父链的下一条规则继续进行比较;
- 若在父链(主链，如INPUT)遇到了RETURN, 则使用缺省的策略(一般是ACCEPT或DROP).

Linux Shadowsocks 全局代理

Tue, 07 Apr 2015 00:00:00 +0800

Linux用 iptables + ss-redir 为 Shadowsocks 全局代理 Shell脚本下载地址

1. create new chain on nat table

iptables -t nat -N SHADOWSOCKS

2. Ignore shdowsocks’s address, avoid loop

iptables -t nat -A SHADOWSOCKS -d YOUR-SERVER-IP -j RETURN

3. Ignore LANs and any other addresses you’d like to bypass the proxy

iptables -t nat -A SHADOWSOCKS -d 0.0.0.0/8 -j RETURN
iptables -t nat -A SHADOWSOCKS -d 10.0.0.0/8 -j RETURN
iptables -t nat -A SHADOWSOCKS -d 127.0.0.0/8 -j RETURN
iptables -t nat -A SHADOWSOCKS -d 169.254.0.0/16 -j RETURN
iptables -t nat -A SHADOWSOCKS -d 172.16.0.0/12 -j RETURN
iptables -t nat -A SHADOWSOCKS -d 192.168.0.0/16 -j RETURN
iptables -t nat -A SHADOWSOCKS -d 224.0.0.0/4 -j RETURN
iptables -t nat -A SHADOWSOCKS -d 240.0.0.0/4 -j RETURN

4. Anything else should be redirected to shadowsocks’s local port

iptables -t nat -A SHADOWSOCKS -p tcp -j REDIRECT –to-ports LOCAL-PORT

5. Apply the rules

iptables -t nat -A OUTPUT -p tcp -j SHADOWSOCKS

6. Start the shadowsocks-redir

ss-redir -c /etc/config/shadowsocks.json -f /var/run/shadowsocks.pid

7. 已经写好的shell脚本

下载地址

参考: shadowsocks-openwrt

为 ubuntu 14.04 上 4.0 kernel

Tue, 07 Apr 2015 00:00:00 +0800

原因:

内核太老，强迫症，想换内核，但是又不想自己编译，毕竟对内核不了解，并且编译过程中有各种问题…所以，就从官方已经编译打包好的包来安装…

1. 下载需要的 image, header等文件(3个):

2. 安装

sudo dpkg -i linux-* // 也就是这三个deb包

3. 更新启动项，理论上在上一步会自动更新:

sudo update-grub

4. reboot 即可

adb 简单运用之启动LinuxOnAndroid

Sun, 05 Apr 2015 00:00:00 +0800

0. 原因: LinuxOnAndroid

> 主要是因为自己有架Android手机主板出问题了，屏幕一直花屏，就想拿来玩玩LinuxOnAndroid, 但是屏幕花屏严重，基本看不了，但是偶尔恢复，所以就想从adb shell 来启动LinuxOnAndroid, 我用的是Ubuntu12.04版本, 适合android4.0-4.2, 可以拿来玩服务。。。

1. 手机:

* 1. 打开Debug模式，并用数据线连接电脑
* 2. 最好确保手机已经root

2. Ubuntu 14.04:

* 1. 将/path/to/sdk/platform-tools加入/etc/profile环境变量,但是必须重启 或者 直接进入/path/to/sdk/platform-tools目录
* 2. sudo ./adb kill-server

3. 可能手机不识别:

* 1. sudo vim /etc/udev/rules.d/51-android.rules (该文件一般不存在)
* 2. lsusb 查看:
    * 1. 我的usb: Bus 003 Device 003: ID `0bb4`:`0c03` HTC (High Tech Computer Corp.) 
    * 2. 需要的数据: `0bb4` 和 `0c03`
* 3. 在/etc/udev/rules.d/51-android.rules 添加:
    * `SUBSYSTEM=="usb", ATTRS{idVendor}==" 0bb4", ATTRS{idProduct}=="0c03",MODE="0666"`
    * sudo chmod a+x /etc/udev/rules.d/51-android.rules
* 4. 重启udev: sudo /etc/init.d/udev restart
* 5. 拔掉usb线重新插入
* 6. 现在大概可以识别手机了
* 7. sudo ./adb kill-server
* 8. 连接: sudo ./adb shell # 用sudo, 否则可能出现 insufficient permissions for device 问题

4. adb shell 之后:

* 1. 使用root权限: su # 请确保已经root

5. 我今天用adb shell 的目的，运行Linux On Android

* [项目下载地址](http://sourceforge.jp/projects/sfnet_linuxonandroid/releases/)
* 下载 [bootscript.sh](http://sourceforge.jp/projects/sfnet_linuxonandroid/downloads/bootscript.sh) 适用于Android4.0, 或 [bootscript4-3.sh](http://sourceforge.jp/projects/sfnet_linuxonandroid/downloads/bootscript4-3.sh)适用于Android4.3以后
* 将 bootscript.sh 或 bootscript4-3.sh 放到和 ubuntu.img目录下
* sudo adb shell 进入 (如失败，查看上几步)
* cd /path/to/ubuntu.img
* su # 提取root权限
* sh bootscript.sh 或者 sh bootscript4-3.sh 即可启动 LinuxuOnAndroid

lsusb 结果:
...
Bus 001 Device 003: ID 0a5c:21e3 Broadcom Corp. HP Portable Valentine
Bus 001 Device 002: ID 8087:0024 Intel Corp. Integrated Rate Matching Hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 003 Device 003: ID 0bb4:0c03 HTC (High Tech Computer Corp.) 
Bus 003 Device 002: ID 1bcf:0005 Sunplus Innovation Technology Inc. 
...

PHP 面向对象

Sat, 04 Apr 2015 00:00:00 +0800

1. 面向对象(Object Oriented)基本概念

1. 对象的定义:
  - 世间万物皆对象: 可见和不可见之物
1. 对象的基本组成, 包含两部分:
  - 1. (属性，成员变量)对象的组成元素:
  - 是对象的数据模型，用于描述对象的数据
  - 又被称为对象的属性，或者对象的成员变量 * 2. (方法)对象的行为:
  - 对象的行为模型, 用于描述对象能够做什么
  - 又被称为对象的方法
1. 对象的特点:
  - 1. 每个对象都独一无二
  - 1. 对象是体格特定事物,他的职能是完成特定功能
  - 1. 对象可以重复使用
1. 什么是面向对象:
  - 1. 向对象就是在编程的时候一直把对象放在心上
  - 1. 面向对象编程就是在编程的时候数据结构(数据组织方式)都通过对象的结构进行存储。:
  - 利用属性+方法存储数据
1. 为什么使用面向对象:
  - 1. 认识:
  - 1. (符合行为思维习惯)对象的描述方式更加贴近真实的世界，有利于大型业务的理解
  - 1. 在程序设计的过程中用对象的视角分析世界的时候能够拉近程序设计和真实世界的距离
      - 实质:
  - 1. 面向对象就是把生活中要解决的问题都用对象的方式进行存储:
      - 属性 + 方法
  - 1. 对象与对象之间通过方法的调用完成互动:
      - 方法(的调用)
      - 面向对象实例解析: 打篮球球员(对象) + 球员之间的互动(方法)
1. 面向对象的基本思路:
  - 1. 第一步: 识别对象:
  - 任何实体都可以被识别为一个对象 * 2. 第二步: 识别对象的属性:
  - 对象里面存储的数据被识别为属性
  - 对于不同的业务逻辑，关注的数据不同，对象里面的属性也不同 * 3. 第三步: 识别对象的行为(方法):
  - 对象自己属性数据的改变
  - 对象和外部交互
1. 面向对象的基本原则:
  - 1. 对象内部是高内聚的:
  - 对象只负责一项特定的职能(职能可大可小)
  - 所有对象相关的内容都封装到对象内部 * 2. 对象对外是低耦合的: public, private, protected
  - 外部世界可以看到对象的一些属性(不是全部)
  - 外部世界可以看到对象的一些方法(并非全部)

2. PHP中的面向对象实践

1. 基本实践

1. 类的概念:
  - 有共同的属性和方法, 抽象的、一般的、一类的
  - 物理类聚, 具有相似属性
  - 类定义了这些相似对象拥有的相同属性和方法
  - 类是相似对象的描述，称为类的定义，是该类对象的蓝图或者原型
  - 类的对象称为类的一个实例，具体到一个类产生的一个实际个体
  - 类的属性和方法统称为类成员
1. 实例化概念:
  - 类的实例化(Instantiate)就是通过类的定义创建一个类的对象
  - 一个类可以很多实例, 实例是给类成员附上具体的属性值或方法体
2.5 类的定义和实例化:
- 可在终端执行php: php5 -f phpfile.php

<?php
// 类的定义以以关键字class开始, 后面跟着类名，类名通常第一个字母大写。
// 类以中括号开始，中括号结束.
class NbaPlayer {
    // 定义属性
    public $name = "Jordan";
    public $height = "198cm";
    public $weight = "98kg";
    public $team = "Bull";
    public $playerNumber = "23";

    // 定义方法
    public function run() {
        echo "Running\n";
    }

    public function jump() {
        echo "Jumping\n";
    }
}

// 类到对象的实例化
// 类的实例化为对象使用关键字new, new之后紧跟类的名称和一对括号
$jordan = new NbaPlayer();

// 类的属性和方法的访问用: ->
// 访问公共属性
echo $jordan->name."\n";

// 访问公共方法
$jordan->run();
?>

1. 构造函数
1. 析构函数

// 1.1 构造函数，在对象实例化时被调用
// 1.2. php 没有重载概念，所以不能同名方法
// 1.3. 构造函数出现了，实例化时必须符合类的构造函数形式，否则奔溃
function __construct($name, $weight) {
    echo "In constructor<br />";
    // $this是php里面的伪变量(我更喜欢叫它指向类自身的类变量), 表示变量自身
    // 最好使用$this->指明，否则不明确
    // 注意: $this->name 表示 类的$name变量, 错误用法: $this->$name
    //    $this->$name 是值 $name的值作为变量
    $this->name = $name;
    $this->weight = $weight;
}

// 4. 析构函数是在对象使用完时自动调用
// 4.1 先new的类实例后destroy
// 4.2 析构函数用于释放资源，例如变量，打印机等
function __destruct() {
    echo "Destroy ".$this->name."<br />";
}

// 类外,类实例$james
// 通过把变量设置为null, 可以触发析构函数的调用
$james = null;

1. 数据访问
1. 对象引用的概念:

// 1. 引用包括: 独立引用 和　共享引用
$james1 = $james; // 也是对象引用，是独立引用
//   不准确的说当$james = null; 时本该触发__destruct(), 
// 但是$james1 = $james; 注意这也是对象引用，只是让$jame1指向$james指向的对象
// 类似指针, 对象存在一块内存区域，$james1 和 $james都指向它
// 所以,
// 准确的说: 当对象不会再被使用使，将会调用__destruct()函数

// 对象引用类似变量的别名，实际上还是一个变量，
//   当其中一个变量$james = null触发__destruct(),
//  此时其他对象引用将为未定义,不能再被使用
$james2 = &$james; // 也是是对象引用, 是共享引用
$james = null;
echo "\$james 将被已经被结束";

2. 高级实践

1. 对象的继承(extends):
  - 1. 共同属性和方法，继承同一个基类
  - 1. 不必再重复定义属性和方法
  - 1. 直接调用父类的方法和属性
  - 1. 子类可以修改和挑战父类定义的类成员: 重写(Overwrite)
  - 1. 注意: protected 主要用于继承，子类可见，类外不可见
  - 1. 只能单继承，不支持多继承

class Human {
    protected $name;
    ...
}
// 子类继承父类是，可以直接访问父类public和protected属性和方法
class NbaPlayer extends Human {
    ...
}

1. 对象的访问控制:
  - public : 公有的类成员，可以在任何地方被访问:
  - 定义该成员的类(自身)、该类的子类、其他类 * protected : 受保护的类成员，可以被自身及其子类访问 * private : 私有的类成员，职能被自身访问
1. Static(静态)关键字: public static $president=”Me”;
  - 1. 静态属性用于保存类的公有数据
  - 1. 静态方法里面只能访问静态属性
  - 1. 静态成员不需要实例化对象就可以访问
  - 1. 类的内部可以通过self或者static关键字访问
  - 1. 可以通过parent关键字访问父类静态属性和方法
  - 1. 可以通过类名在外部访问类的静态成员

class NbaPlayer extends Human {
    public static $president = "David";

    public static function changePresident($newPresident) {
        // 注意，如果类内想访问静态成员属性
        //    1. 声明静态方法
        //    2. self::静态变量
        self::$president = $newPresident;
        // 访问父类静态成员
        parent::$humanStatic = $newPresident;
    }
}
// 调用静态方法
NbaPlayer::changePresident("Adam");
echo NbaPlayer::$president."<br />";

1. 重写
1. Final 关键字: public final 成员变量;
  - 1. 相当于声明常量，一经定义不允许修改
  - 1. 方法支持缺省参数
  - 1. 重写Overwrite, 只要方法名一样即可，参数随意
  - 1. final class ClassName: 不允许被继承
1. 数据访问补充:
  - 1. parent 关键字可以访问父类中被重写的成员变量
  - 1. self关键字可以用于访问类自身的成员方法，也可以用于访问自己的静态成员和类常量；不能用于访问类自身的属性;使用常量的时候不需要在常量(const CONST-VALUE = “A”;)前面添加$符号
  - 1. static 关键字用于访问类自身的静态成员，访问静态属性时需要在属性前面添加$符号;
  - const CONST_VALUE = “ABC”;
  - self::CONST_VALUE;
  - static::$staticValue;
1. 接口:
  - 接口就是把不同类的共同行为进行定义，然后在不同的类里面实现不同的功能
  - 1. interface – implements

<?php
// interface 关键字用于定义接口
interface ICanEat {
    // 接口只包含方法的声明，不包含其他
    public  function eat ($food);
}

// implements关键字用于表示类实现某个接口
class Human implements ICanEat {
    // 实现某个接口之后，必须对接口中的所有方法定义
    public function eat($food)
    {
        // TODO: Implement eat() method.
        echo "Human is eating ".$food."<br />";
    }
}

$obj = new Human();
$obj->eat("Banana");
?>

1. var_dump($obj instanceof ICanEat) :
  - 可以用instanceof关键字来判断某个对象是否实现了某个接
1. interface ICanPee extends ICanEat {} : 接口可以继承接口
  - 类实现接口时，要实现接口的所有方法，包括接口继承的接口
1. 多态:
  - 不用类对接口的同一方的具体实现是不同的，这叫多态
1. 抽象类 abstract class:
  - 1. 接口里面的方法是没有实现的，二类里面的方法都是有实现的, 抽象类: 只有一部分要实现
  - 1. 比较:
  - abstract 用于定义抽象类，在方法前加abstract关键字，则该方法不需要实现
  - 在抽象类中可以包含普通方法
  - 继承抽象类: extends

abstract class ACanEat {
    abstract public function eat($food);

    public function breath() {
        echo "Breath air<br />";
    }
}
class Human extends ACanEat {
    public function eat($food)
    {
        echo "Human eats ".$food."<br />";
    }
}

class Animal extends ACanEat {
    public function eat ($food) {
        echo "Animal eats ".$food."<br />";
    }
}

3. 特殊实践: PHP的魔术方法

1. __construct(), __destruct()
1. __tostring():
  - 当对象被当做String使用时，这个方法被自动调用.
  - echo $obj;
1. __invoke($var):
  - 当对象被当初方法方法调用是，这个方法被自动调用
  - $obj(4);
1. __call(), __callStatic(): 这两个方法可以被重载(overloading is not overriding)
  - __call($funcName, $funcArgumentsArray):
  - 当对象访问不存在的方法是被自动调用
  - implode(“, “, $arrayVar): 把数组用”,”合并成字符串 * static __callStatic($funcName, $funcArgumentsArray):
  - 当对象访问不存在的静态方法时被自动调用
1. __get($name), __set($name, $value), __isset($obj->attributeName), __unset():
  - 在给不可访问属性赋值是，__set()会被调用
  - 读取不可访问属性的值是，__get()会被调用
  - 当对不可访问属性调用isset()或empty()是，__isset()被调用
  - 当对不可访问属性调用unset()是, __unset()被调用
  - 所谓不可访问属性，实际上就是在调用某个属性时发现没被定义
  - 这几个方法称为属性重载的魔术方法
1. __clone():

Ubuntu Server 配置 LAMP

Thu, 02 Apr 2015 00:00:00 +0800

1. Environment

1. Ubuntu 14.10 Server
1. LAMP = Linux + Apache + Mysql/MariaDB + PHP

2. INSTALLATION

1. Apache:
  - sudo apt-get install apache2
  - 查看版本: apache2 -v # 这里已经上 2.4版本，和2.2不同
1. Php :
  - sudo apt-get install php5
  - 查看是否被加载: cat /etc/apache2/mods-enabled/php5.load 证明被加载
  - 查看版本: php5 -v
  - 如果未被加载, 可使用 sudo a2enmod php5
  - 如果/etc/apache2/mod-available/下没有php5相关mod:
  - sudo apt-get install libapache2-mod-php5
  - sudo a2enmod php5
  - sudo service apache2 restart 即可
1. Mysql:
  - sudo apt-get install mysql-server
  - 查看mysql是否被php加载: cat /etc/php5/conf.d/mysql.ini :
  - 查看mysql是否被php加载或者: cat /etc/php5//mods-available/mysql.ini :
  - php默认没有mysql扩展，为了加载 mysql.so : sudo apt-get install php5-mysql

软件总结: sudo apt-get install apache2 php5 mysql php5-mysql
更简单的方法: `sudo tasksel install lamp-server`

注意: tasksel 提供 LAMP / DNS server / Mail server .. 的安装

3. Make sure them work correctly.

1. sudo service mysql restart
1. sudo service apache2 restart

4. 创建phpinfo服务器探针

1. cd /var/www/html
1. sudo vim info.php

<?php
echo mysql_connect('localhost', 'root', 'root') ? 'It works.' : 'It doesn\'t work';

phpinfo();

1. 检查是否成功: 访问 http://服务器IP/info.php

5. 给PHP添加常用扩展

1. php5-gd curl libcurl3 libcurl3-dev php5-curl :
  - sudo apt-get install php5-gd curl libcurl3 libcurl3-dev php5-curl
  - 1. gd :
  - 1. curl :
1. 重启服务，使模块生效:sudo service apache2 restart
1. 查看模块是否生效:
2. 查看: cat /etc/php5/mods-available/…
3. 或者浏览器访问: http://服务器IP/info.php, 搜索 gd, curl
1. sftp 命令
1. vsftpd —- FTP 服务器
1. 或者用 FileZilla 配置客户端

6. LAMP环境文件目录概述

1. Linux系统配置文件目录: /etc :
  - Apache : /ect/apache2
  - mysql : /etc/mysql
  - php : /etc/php5
1. Apache2 配置 (/ect/apache2):
  - 1. 加载流程:
  - 1. 首先加载 apache2.conf
  - 1. 然后在apache2.conf 通过Include 加载其他文件/模块:
      - conf-enabled/*
      - httpd.conf
      - ports.conf
      - mods-enabled/*
      - sites-enabled/*
      - 核心配置:
  - 1. mods-*** Apache模块
  - 1. sites-*** 虚拟主机
      - 关键字:
  - 1. available 可用; enabled 已经启用.
  - 1. (创建需要启用的mod, 软连接available到enabled) :
      - enabled —-> available: ln -s 命令建立软连接
      - 4, 虚拟主机配置(Virtual-Host):
  - 1. 客户端模拟DNS解析, 配置DNS, 即修改客户端hosts(Linux: /etc/hosts)文件:
      - 192.168.1.106 video.cc.com
      - 192.168.1.106 bbs.cc.com
      - 192.168.1.106 oa.cc.com
  - 1. 在服务器创建三个目录，分别用于三个url:
      - cd /
      - sudo mkdir -p /wwwroot/{video,bbs,oa} # 注意: shell 不要随便空格, big problem.
      - 分别在三个子目录创建index.html, 内容仅作标识 , 例如 Here is xx Directory.
  - 1. Apache2 中配置虚拟主机:
      - 配置文件: cd /etc/apache2/sites-available/000-default.conf
      - 复制三个配置文件(最好以.conf结尾):
      - cp 000-default.conf video.conf
      - cp 000-default.conf bbs.conf
      - cp 000-default.conf oa.conf * 3. 分别配置(例video.conf):
      - 设置服务器根目录: DocumentRoot 目录: 将DocumentRoot /var/www/html 改为 DocumentRoot /wwwroot/video
      - 设置ServerName对应域名, 让Apache服务器自动区分域名: ServerName video.cc.com
      - 配置Directory, 拒绝403Forbidden: <Directory /var/www/> 改为 <Directory /wwwroot/video/> , 可能添加以下代码

<Directory />
        Options FollowSymLinks
        AllowOverride None
    </Dorectory>

    <Directory /wwwroot/video/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride None
        # Order allow, deny # Apache2 2.2
        # allow from all
        Require all granted # Apache2 2.4 
        # 详情查看: [Apache2 2.4 升级变化](http://httpd.apache.org/docs/2.4/upgrading.html)
    </Directory>

            * 4. 启用site配置: ln 软连接sites-available到sites-enabled:
                * cd sites-enabled; sudo ln -s ../sites-available/video video.conf 
                * > 注意：这里必须是.conf结尾的文件，否则服务器可能不识别
            * 5. 在/etc/apache2/apache2.conf配置文件中添加 ServerName cc.com, 否则可能警告没有全局ServerName
            * 6. 在/etc/apache2/apache2.conf配置文件中注释<Directory >相关
            * 7. 注意如果访问域名不存在，默认不一定是default.conf文件，而是按顺序，在/etc/apache2/sites-enabled文件夹中的第一个配置文件，所以就是为什么sites-available有000-default.conf了，所以在ln到sites-enabled时注意default配置文件应该数字字母排在第一个,例如 ln -s ../sites-available/000-default.conf 000-default.conf
            * 8. 重启Apache服务器, 就可以访问 video.cc.com了: sudo service apache2 restart

1. Mysql 配置 (/etc/Mysql/my.conf):
  - 1. Mysql数据存储目录迁移:
  - 1. 先停止MySQL服务，杜绝数据迁移产生的不良后果: sudo service mysql stop
  - 1. 创建数据迁移的目标文件夹(注意权限和默认配置要一直), MySQL默认数据存储目录在/var/lib/mysql中:
      - cd /
      - sudo mkidir /mysqldata
      - 修改用户组和所属用户为mysql: sudo chown -vR mysql:mysql /mysqldata
      - 修改权限为700: sudo chmod -vR 700 /mysqldata
      - 迁移数据，即复制/var/lib/mysql到/mysqldata:
      - sudo su
      - cp -av /var/lib/mysql /mysqldata # -a表示保存原文件权限等 * 6. 修改MySQL配置文件/etc/mysql/my.cnf:
      - 修改datadir(指定数据存储目录)的值: /var/lib/mysql 改为 /mysqldata * 7. 这步很重要: 修改apparmor对mysql的保护配置:
      - sudo vim /etc/apparmor.d/usr.sbin.mysqld
      - 修改有关/var/lib/mysql的配置:

# /var/log/mysql/ r,
# /var/log/mysql/** rwk,
/mysqldata/ r,
/mysqldata/** rwk,

        * 8. 重启 apparmor 服务: sudo service apparmor reload:
            * ubuntu 14.10 上报错: reload: Unknown instance:,是软件本身bug=-=, 重启系统也行
        * 9. 重启 mysql 服务: sudo service mysql start
        * 10. 测试数据迁移是否成功:
            * 1. mysql创建新的数据库时会在datadir目录下创建同名文件夹
            * 2. mysql -uroot -p
            * 3. create database cole;
            * 4. show database cole;
            * 5. quit
            * 6. 查看 /mysqldata下有没有创建新目录cole

1. Php 配置 (/etc/php5/apache2/php.ini)
  - 1. PHPMyAdmin的安装:
  - 1. sudo apt-get install phpmyadmin
  - 1. 看安装过程说明，配置
  - 1. 不一定必要: sudo ln -s /usr/share/phpmyadmin/ /var/www/pma ()
  - 1. 访问: 192.168.1.106/phpmyadmin
      - 开启MySQL的remote access:
  - 1. 修改配置: sudo vim /etc/mysql/my.cnf
  - 1. 找到 bind-address, 注释掉或者修改为 0.0.0.0
  - 1. 在数据库名为mysql的user表单中添加一个公网可以访问的用户, 终端打开或者phpmyadmin打开添加均可
  - 1. Insert 一条数据: (如果看不懂英文, PHPMyAdmin可以选择中文)
      - Host : % // % 代表任意IP
      - User : remote
      - Password : 123456
      - 权限自己看情况选择开启: 默认全关闭
  - 1. 重启mysql: sudo service mysql restart
1. 了解一种简单的LAMP集群:
  - 1. 负载均衡Nginx + Apache + PHP + MySQL

Linux Tar

Wed, 01 Apr 2015 00:00:00 +0800

Tar 用法:

* 虽然一直都在用这个命令，但是一般也只是解压、压缩，并没有用到其他
* 今天好好写点常用的的用法

先讲讲常用选项:

* -c 创建一个新归档，也就是压缩啦
* -x 从归档中抽取文件，也就是解压整个压缩包所有文件
* -C 指定文件被解压文件存放的文件夹(必须已存在)，一般和-x一起使用; 可选项
* -v 显示文件归档进度，也就是压缩／解压等过程
* -f (用于指定压缩或解压等具体文件名, 一般不独立使用):
    * 当与-c一起使用时，-f用于指定常见压缩文件的文件名，没有-f或报错: 压缩文件不存在
    * 当与-x一起使用时，-f指定要被压缩的文件名, 否则没文件怎么解压
* -t 显示包括在tar文件中的文件列表
* -u 向压缩文档中添加新文件，或更新文件
* --delete 删除某个/某些文件
* 3种压缩格式:
    * -z : 最常用之一, 使用gzip来压缩/解压tar文件, 文件名: .tar.gz, .tgz
    * -j : 最常用之一，使用bzip2来压缩/解压tar文件, 文件名: tar.bz2 等
    * -J : 使用xz方式压缩解压tar文件, 比较少用，但是压缩率非常高，kernel.org的内核源文件一般都是这种压缩格式, 文件名: .tar.xz等

常用的几种:

* 1. 解压文件:
    * tar.gz，tgz文件: tar -zxvf filename.tar.gz/filename.tgz -C 指定被解压的文件夹
      * `-C 是可选项`, 如果没-C则默认是当前文件夹
    * tar.bz2等文件: tar -jxvf filename.tar.bz2
    * tar.xz等文件: tar -Jxvf filename.tar.xz
* 2. 压缩文件:
    * tar.gz, tgz文件: tar -zcvf 压缩后的文件名.tar.gz 要被压缩的文件或文件夹
      * `压缩后，原文件/文件夹都还在`
    * tar.bz2 : ... -j
    * tar.zx : ... -J
* 3. 只查看压缩文件，不解压:
    * 查看所有: tar -ztvf filename.tar.gz
    * 查看关键字文件: 借助 grep: tar -ztvf filename.tar.gz | grep -i keyword
* 4. 向已存在的文档中添加新文件(不一定不存在，更新也可以, 记得指明压缩文件中的相对路劲)
  * tar -uvf filename.tar file1 \[ file2... \]
* 5. 删除某个或某个文档中的文件:
    * tar --delete -vf file.tar 必须指明归档文件中要被删除的具体的路径的文件

注意: 归档: 只是把文件打包, tarball, tar -cvf file.tar (注意是tar格式)
      压缩: 有多中压缩方式 gzip / bzip2 / xz等
      其实: tar.gz = tar + gz，也就是 先打包成tar文件，再压缩:
          ==> 1. tar -cvf file.tar file1 file2 directory1
          ==> 2. gzip -c file.tar > file.tar.gz

* 6. 提取单个文件:
    * tar -zxvf file.tar.gz "./new/abc.txt"
* 7. 提取多个文件:
    * tar -zxvf file.tar.gz "./new/abx.txt" "./new/ccc.txt"
* 8. 使用通配符解压多个文件:
    * tar -zxvf filename.tar.gz --wildcards "*.txt"
* 9. `通过tar进行备份`:
    * `tar -zcvf backup-file-$(date +%Y%m%d).tar.gz filesOrDirectories`

Gitcafe Pages

Wed, 01 Apr 2015 00:00:00 +0800

将博客搬到 gitcafe

1. 在gitcafe创建一个项目: 和用户名一样, 我的是 whatwewant
1. 必须提交到GitCafe的 gitcafe-pages分支:
  - git push -u origin master:gitcafe-pages
1. 访问: whatwewant.gitcafe.io 即可

一个项目同时使用两个或多个远程仓库

[remote "gitcafe"]
    fetch = +refs/heads/*:refs/remotes/gitcafe/*
    url = git@gitcafe.com:whatwewant/whatwewant.git
[remote "github"]
    fetch = +refs/heads/*:refs/remotes/github/*
    url = git@github.com:whatwewant/whatwewant.github.io.git

git push -u gitcafe master:gitcafe-pages
git push -u github master

Head First Sql

Wed, 01 Apr 2015 00:00:00 +0800

1. SQL 创建篇

1. 创建数据库: CREATE DATABASE dbname;
1. 使用数据库: USE dbname

创建表:

   CREATE TABLE tableName
   (
      name VARCHAR(10),
      weight DEC(5, 2)
   );

1. 数据类型: CHAR, VARCHAR, BLOB, INT, DEC, DATE, DATETIME
1. 列出某表的所有字段详细情况: DESC tableName;
  - DESC　是 DESCRIBE 的缩写
1. 删除表: DROP TABLE tableName;
1. 补充:
  - 显示mysql中的所有数据库: show databases;
  - 显示某个数据库中的所有表: show tables;

2. SQL 数据处理篇

1. 插入数据:

    INSERT INTO tableName 
    (column_name1, column_name2, ...)
    VALUES
    (value1, value2, ...);

1. 查询所有数据: SELECT * FROM tableName
1. 设置字段非空NOT NULL属性:
  - 注意: NULL != NULL; NULL != BLANK

    CREATE TABLE tableName 
    (
        lastname VARCHAR(30) NOT NULL
    );

1. 缺省/默认属性: DEFAULT:

    CREATE TABLE tableName
    (
        cost DEC(3, 2) NOT NULL DEFAULT 1.00
    );

Phpstorm Install And Use

Mon, 30 Mar 2015 00:00:00 +0800

Ubuntu14.04 下 PHPStorm 的安装与使用

1. 下载安装包:

官网: https://www.jetbrains.com/phpstorm/
Version: 8.0.3
Tar.gz address: http://120.192.76.118/cache/download.jetbrains.com/webide/PhpStorm-8.0.3.tar.gz?ich_args=9fd2851c9cfc749a6559bc79da0a2afd_1_0_0_2_9f03a674e5a343c018824d475fe8fee3f0d70d2696fcc53137cc8baa4a1bdc88_cc554e7620bff0a435beff2603e2ee3d_1_0

2. 解压并使用

tar -xcf PhpStorm-8.0.3.tar
cd PhpStorm-8.0.3
./phpstorm.sh

3. php server

sudo apt-get install php5 php5-fpm php5-cgi

4. 配置phpstorm php server

-> File -> Settings -> Languages & Frameworks -> PHP -> Servers -> +（绿色+号添加新服务器） -> Name: phpserver -> Host: localhost 或者 127.0.0.1 -> Port: 9090 -> Debugger: Xdebug

5. OK, 现在可以写完代码然后直接在浏览器执行了！

Php Start Note

Sun, 29 Mar 2015 00:00:00 +0800

PHP 入门篇

1.语法

1. PHP代码卸载<?php 和 ?>之间, 但注意后面的 ?> 是可以省略的;
1. Echo 语句: 注意php语句以 ; 结束
  - 作用: 1. 输出字符串: echo “Hello”; 2. 输出表达式结果: echo 23+56;
1. 字符串:
  - 1. 可以用单引号，也可以用双引号 “Hello” ‘world’
  - 1. 把两个字符链接起来: 连接符. : echo “hi”.”Cole”; (其他语言都是+)
1. PHP语句结束符: 分号(;)
1. 注释: //, 注意:　注释语句必须在<?php ?>之间

2. 变量

1. 以$开头
1. var_dump 函数: 显示变量类型, 例如var_dump($n) // 去掉 \
1. 变量命名规则:
  - 1. 以 $ 进行标识(开始)
  - 1. 以 字母 或 下划线开头: $name, $_name // 去掉\, vim下md 显示问题
  - 1. 只能由下划线、字母、数字 和 汉字组成
  - 1. 不允许包含空格
  - 1. 区分大小写
1. 变量的数据类型:
  - 1. memory_get_usage() 获取当前 PHP 销号的内存
  - 1. $m1 = memory_get_usage(); // 当前内存:
  - $n = 123;
  - $m2 = memory_get_usage() - $m1; // 获取 $n 数据类型占用的内存
  - 字符串 272; 整形和浮点型272; 数组576
  - 数组: $vararray = array(“123”); * 3. 在PHP中, 支持８中原始类型，其中包括四种标量类型、两种复合类型和两种特殊类型。PHP是一门松散类型的语言，不必向PHP声明变量的数据类型，PHP会自动把变量转换为自动的数据类型。
1. 标量类型1: 布尔类型:
  - 两个值：　TRUE，　FALSE;
  - 不区分大小写: TRUE == true;
  - 注意: echo TRUE; 结果: 1
1. 标量类型2: 整型(integer):
  - 可以用十进制、八进制、十六进制、十进制
  - 八进制：数字前必须加上”0”, $data_int = 0123;
  - 十六进制: “0x”, $data_int = 0x1a;
1. 标量类型3: 浮点型
  - $num_float = 1.234;
  - $num_float = 1.2e3; // 科学计数法, 小写e
  - $num_float = 1.0E-10; // 大写E
1. 标量类型４: 字符串:
  - 单引号或双引号
  - 单引号(双引号)中嵌入双引号(单引号): $say = ‘A say: “I hate you.”;’;
  - 转移字符转移单双引号
  - 遇到 $, $var=”love”:
  - 双引号: 输出$var存储的字符串, 结果: love
  - 单引号: 输出’$var’, 结果: $var * 长字符串处理:
  - 首先使用定界符表示字符串(«<), 接着在”«<”后提供一个标识符GOD(标识符不是固定的，自定义, 例如DOG, GO都行), 然后是字符串，　最后以GOD结束字符串;
  - 注意: «<GOD 无空格, 并且«<GOD 和 GOD;各独占一行

$string1 = <<<GO
我有一只小毛驴，我从来也不骑。
有一天我心血来潮，骑着去赶集。
我手里拿着小皮鞭，我心里正得意。
不知怎么哗啦啦啦啦，我摔了一身泥.
GO;

1. 第一种特殊的类型: 资源(resource):
  - 资源：室友专门的函数来建立和使用。例如: 打开文件、数据连接、图形画布。我们可以对资源进行操作(创建、使用和释放)。任何资源，在不需要时应该及时释放。如果忘记释放资源，系体自动启用垃圾回收机制，在页面执行完毕后回收资源，以避免内存被消耗殆尽。 ```php <?php $file_handle = fopen(“f.txt”, “r”); // 打开文件 $con = mysql_connect(“localhost”, “root”, “root”); // 简历数据库链接 $img = imagecreate(100, 100); // 图形画布

if ($file_handle) { // 采用while循环读取文件 while (!feof($file_handle)) { $line = fgets($file_handle); echo $line; echo “
”; } } fclose($file_handle); // 关闭文件句柄 ?> ```

1. 第二种特殊类型: 空类型(NULL):
  - NULL or null, 对大小写不敏感
  - 表示变量没有值, 情况:
  - 1. 赋值NULL
  - 1. 未被赋值
  - 1. unset($var), * error_reporting(0); // 禁止显示PHP警告

4. 常量:

1. 定义:
  - 1. 自定义常量：
  - bool define(string $constant_name, mixed $value[, $case_sensitive = true]);
  - define(“PI”, 3.14);echo PI;
  - $p=”PII”; define($p, “123”); echo PII;
  - echo "面积是: ".(PI*3*3); * 2. 系统常量:
  - 1. FILE: php程序文件名, 可以帮助获取当前文件在服务器的物理位置
  - 1. LINE: PHP程序文件行数，　当前代码在第几行
  - 1. PHP_VERSION
  - 1. PHP_OS: 操作系统名字
1. 获取常量的值:
  - 1. 直接使用 PI
  - 1. mixed constant(string constant_name); // constant(“PI”);
1. 如何判断常量是否被定义:
  - 1. bool defined(string constants_name); // 存在返回true, 不存在返回false; // 例如: $exist = define(“PI”);

5. 运算符:

1. ===: 全等，即值相等，并且类型相同
1. !==: 非全等, 即如果$a不等于$b，或者它们的类型不同，返回TRUE
1. 三元运算符: ? :
  - $b = $a >= 0 ? 1 : 2;
1. 逻辑运算符:
  - 逻辑与: $a and $b == $a && $b
  - 逻辑或: $a or $b == $a $b
  - 逻辑非: ! $a
  - 逻辑异或: $a xor $b
1. 字符串连接运算符:
  - 1. 链接运算符(“.”)
  - 1. 连接赋值运算符(“.=”)
1. 错误控制运算符:
  - PHP提供了一个错误控制运算符”@”, 将@放置在一个PHP表达式之前，该表达式可能产生错误的信息都被忽略
  - 如果激活了track_error(在php.ini中设置)特性, 表达式所产生的任何错误信息都被存放在变量$php_errormsg中，此变量在每次出错时都会被覆盖，所以如果想用他的话必须尽早检查.
  - 注意: 错误控制前缀”@”不会屏蔽解析错误的信息，不能把他放在函数或者类的定义之前，也不能用于条件结构
  - $conn = @mysql_connect("localhost","username","password");
1. ceil($var): 取大于$var的最小整数

6. 语言结构语句

1. if; else if; else
1. switch 类C
1. foreach :
  - 1. 只取值，不取下标: foreach (数组 as 值) {}
  - 1. 同时取下标和值: foreach (数组 as 下标 => 值) {}
  - 数组: $a=array("as"); $b=array("211"=>array("a", "b"), "212"=>array("c"));

Android 封装getpost

Sun, 29 Mar 2015 00:00:00 +0800

为了方便，自己封装了一个

Google 好像有更好的，还没用起来，先用用自己封装的, 以下是源码

import android.annotation.TargetApi;
import android.os.Build;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.NameValuePair;
import org.apache.http.client.CookieStore;
import org.apache.http.client.HttpClient;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.cookie.Cookie;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.message.BasicNameValuePair;
import org.apache.http.params.CoreConnectionPNames;
import org.apache.http.protocol.HTTP;
import org.apache.http.util.EntityUtils;

import java.io.IOException;
import java.io.InputStream;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by potter on 14-12-12.
 */
public class HttpClient {
    private DefaultHttpClient httpClient;
    private HttpPost httpPost;
    private HttpGet httpGet;
    private HttpEntity httpEntity;
    private HttpResponse httpResponse;

    private String returnResult;

    private ArrayList<NameValuePair> myCookies = null;

    private String httpCookies = "";

    public static Boolean getStatus(String urlString) {
        HttpClient httpClient;
        HttpGet httpGet = new HttpGet(urlString);

        httpGet.addHeader("Accept", "application/json, text/javascript, */*; q=0.01");
        httpGet.addHeader("Accept-Encoding", "gzip,deflate,sdch");
        httpGet.addHeader("Accept-Language", "en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4");
        httpGet.addHeader("Connection", "keep-alive");
        httpGet.addHeader("User-Agent", "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36");
        httpGet.addHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

        httpClient = new DefaultHttpClient();
        httpClient.getParams().setParameter(CoreConnectionPNames.CONNECTION_TIMEOUT, 5000);
        HttpResponse httpResponse = null;
        try {
            httpResponse = httpClient.execute(httpGet);
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }

        if (httpResponse.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
            String sourceHtml = null;
            try {
                sourceHtml = EntityUtils.toString(httpResponse.getEntity());
            } catch (IOException e) {
                return false;
            }

            return sourceHtml.isEmpty() ? false : true;
        }

        return false;
    }

    @TargetApi(Build.VERSION_CODES.GINGERBREAD)
    public String get(String urlString) {
        httpGet = new HttpGet(urlString);

        if (!httpCookies.isEmpty()) {
            httpGet.setHeader("Cookie", httpCookies);

        }
        httpGet.addHeader("Accept", "application/json, text/javascript, */*; q=0.01");
        httpGet.addHeader("Connection", "keep-alive");
        httpGet.addHeader("User-Agent", "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36");
        httpGet.addHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

        httpClient = new DefaultHttpClient();
        httpClient.getParams().setParameter(CoreConnectionPNames.CONNECTION_TIMEOUT, 5000);

        try {
            httpResponse = httpClient.execute(httpGet);
        } catch (IOException e) {
            return null;
        }

        if (httpResponse.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
            try {
                returnResult = EntityUtils.toString(httpResponse.getEntity());
            } catch (IOException e) {
                return null;
            }
            CookieStore cookieStore = httpClient.getCookieStore();
            List<Cookie> cookies = cookieStore.getCookies();

            if (null == myCookies) {
                ArrayList<NameValuePair> tmp = new ArrayList<NameValuePair>();
                for (Cookie each : cookies) {
                    tmp.add(new BasicNameValuePair(each.getName(), each.getValue()));
                    httpCookies = "";
                    httpCookies += each.getName() + "=" + each.getValue() + "; ";
                }
                myCookies = tmp;
            }

            return returnResult;
        }

        return null;
    }

    @TargetApi(Build.VERSION_CODES.GINGERBREAD)
    public InputStream getImgInputStream(String urlString) {
        httpGet = new HttpGet(urlString);

        if (! httpCookies.isEmpty()) {
            httpGet.setHeader("Cookie", httpCookies);
        }
        httpGet.addHeader("Accept", "application/json, text/javascript, */*; q=0.01");
        //httpGet.addHeader("Accept-Encoding", "gzip,deflate,sdch");
        //httpGet.addHeader("Accept-Language", "en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4");
        httpGet.addHeader("Connection", "keep-alive");
        httpGet.addHeader("User-Agent", "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36");
        httpGet.addHeader("Content-Type", "application/x-www-form-urlencoded; charset=GBK");

        httpClient = new DefaultHttpClient();

        try {
            httpResponse = httpClient.execute(httpGet);
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }

        if (httpResponse.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
            InputStream imgStream = null;
            try {
                imgStream = httpResponse.getEntity().getContent();
            } catch (IOException e) {
                return null;
            }

            // System.out.println("In MyHttpClient getStatic");

            CookieStore cookieStore = httpClient.getCookieStore();
            List<Cookie> cookies = cookieStore.getCookies();

            if (null == myCookies) {
                ArrayList<NameValuePair> tmp = new ArrayList<NameValuePair>();
                for (Cookie each : cookies) {
                    tmp.add(new BasicNameValuePair(each.getName(), each.getValue()));
                    httpCookies = "";
                    httpCookies += each.getName() + "=" + each.getValue() + "; ";
                }
                myCookies = tmp;
            }
            return imgStream;
        }

        return null;
    }


    @TargetApi(Build.VERSION_CODES.GINGERBREAD)
    public static String getStatic(String urlString) {
        HttpGet httpGet = new HttpGet(urlString);

        httpGet.addHeader("Accept", "application/json, text/javascript, */*; q=0.01");
        // httpGet.addHeader("Accept-Encoding", "gzip,deflate,sdch");
        //httpGet.addHeader("Accept-Language", "en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4");
        httpGet.addHeader("Connection", "keep-alive");
        httpGet.addHeader("User-Agent", "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36");
        httpGet.addHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

        HttpClient httpClient = new DefaultHttpClient();

        HttpResponse httpResponse = null;
        try {
            httpResponse = httpClient.execute(httpGet);
        } catch (IOException e) {
            return null;
        }

        if (httpResponse.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
            String returnResult = null;
            try {
                returnResult = EntityUtils.toString(httpResponse.getEntity());
            } catch (IOException e) {
                return null;
            }
            System.out.println("In MyHttpClient getStatic" + returnResult);

            return returnResult;
        }

        return "网络错误";
    }

    @TargetApi(Build.VERSION_CODES.GINGERBREAD)
    public String post(String url, ArrayList<NameValuePair> postParams) {
        httpPost = new HttpPost(url);


        if (!httpCookies.isEmpty()) {
            httpPost.setHeader("Cookie", httpCookies);
            //System.out.println("HttpCookies: " + httpCookies);
        }

        httpPost.addHeader("User-Agent", "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36");
        httpPost.addHeader("Connection", "keep-alive");
        httpPost.addHeader("Accept", "application/json, text/javascript, application/x-www-form-urlencoded, */*; q=0.01");
        httpPost.addHeader("Host", "192.168.3.11:7001");
        httpPost.addHeader("Origin", "http://192.168.3.11:7001");
        httpPost.addHeader("Referer", "http://192.168.3.11:7001/QDHWSingle/login.jsp");

        try {
            httpPost.setEntity(new UrlEncodedFormEntity(postParams, HTTP.UTF_8));
        } catch (UnsupportedEncodingException e) {
            return null;
        }

        httpClient = new DefaultHttpClient();
        try {
            httpResponse = httpClient.execute(httpPost);
        } catch (IOException e) {
            return null;
        }

        if (httpResponse.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
            try {
                returnResult = EntityUtils.toString(httpResponse.getEntity());
            } catch (IOException e) {
                return null;
            }
            //System.out.println("In Http Post: " + returnResult);
            return returnResult;
        }

        return "网络请求异常，请检查网络";
    }

    @TargetApi(Build.VERSION_CODES.GINGERBREAD)
    public String post(String url) {
        httpPost = new HttpPost(url);


        if (!httpCookies.isEmpty()) {
            httpPost.setHeader("Cookie", httpCookies);
        }

        httpPost.addHeader("User-Agent", "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36");
        httpPost.addHeader("Connection", "keep-alive");
        httpPost.addHeader("Accept", "application/json, text/javascript, */*; q=0.01");

        httpClient = new DefaultHttpClient();
        try {
            httpResponse = httpClient.execute(httpPost);
        } catch (IOException e) {
            return null;
        }

        if (httpResponse.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
            try {
                returnResult = EntityUtils.toString(httpResponse.getEntity());
            } catch (IOException e) {
                return null;
            }
            
            return returnResult;
        }

        return "网络请求异常，请检查网络";
    }
}

Cole Smith

Sat, 28 Mar 2015 00:00:00 +0800

Home For Cole Smith

Iptables Useage

Thu, 26 Mar 2015 00:00:00 +0800

将来自 10.4.143.0/24 的tcp数据指向 64.111.96.38

iptables -t nat -I PREROUTING -s 10.4.143.0/24 -p tcp -j DNAT --to-destin
ation 64.111.96.38

将来自 10.4.143.0/24 的tcp的http数据指向 123.58.180.106

iptables -t nat -I PREROUTING -s 10.4.143.0/24 -p tcp -m tcp --dport 80 -j DNAT --to-destination 123.58.180.106

禁用访问域名, 与 –string 匹配

iptables -I OUTPUT -s 10.4.143.0/24 -p tcp -m string --string "baidu.com" --algo bm -j DROP

重定向

sudo iptables -t nat -I PREROUTING -p tcp -m tcp -j DNAT --to-destination 204.79.197.200

限制速度

MTU: 1500Bytes ~= 1.46KB = 1 package
 --limit 1/s # 每秒限制一个package ~= 1 * 1.46 KB
 --limit-burst 1 # 允许触发 limit 限制的最大次数为1 (默认为5)

 限制最大速度 1kB/s 左右

限制来自 10.4.156.0/24的速度, 也就是上传速度

iptables -I FORWARD 1 -s 10.4.156.0/24 -m limit --limit 1/s --limit-burst 1 -j ACCEPT
iptables -I FORWARD 2 -s 10.4.156.0/24 -j DROP # 不满足上一项，直接丢弃

限制去到 10.4.156.0/24的速度,也就是下载速度, 这里限制1package/s, 大约1KB/s, 由 limit后的参数决定

iptables -I FORWARD 1 -d 10.4.156.0/24 -m limit --limit 1/s -j ACCEPT
iptables -I FORWARD 2 -d 10.4.156.0/24 -j DROP # 不满足上一项，直接丢弃

使来自内网192.168.12.0/24的网能连山外网, 其中ppp0可上网

sudo iptables -t nat -I POSTROUTING -s 192.168.12.0/24 -o ppp0 -j MASQUERADE

Linux Scanning Technique

Thu, 26 Mar 2015 00:00:00 +0800

扫描技术

Study Address

1. 概述

1.互联网安全: 数据的真实、可靠、完整、可控
1. 命令:
  - tracert
  - traceroute:
  - 扫描到达目的网络的路由
  - 例如: traceroute www.baidu.com #　将可以看到所经过的路由 * nmap:
  - 端口范围扫描, 批量主机服务扫描 * nc:
  - 任意IP地址端口扫描
3.网络入侵方式:
- 踩点－网络扫描－查点－提权等

2.主机扫描

命令:
- fping (ping增强版):
  - 作用: 批量的给目标主机发送ping请求，测试主机的存活情况
  - 特点: 并行发送、结果易读
  - 参数:
    - h: help (详细信息: man)
    - a: 只显示出存货的主机(相反参数 -u)
    - g 支持主机段的方式: 192.168.1.1 192.168.1.255或者192.168.1.0/24
    - q: 安静,不输出不显示每个ping的结果
    - f: 通过读取一个文件中Ip的内容: fping -f filename
  - 例子:
    - 1.通过标准输入方式 fping + IP1 + IP2 + IP3 …
    - 1. 批量扫描主机段:
        
        fping -g 192.168.1.1 192.168.1.255
        
        fping -g 192.168.1.0/24
        
        fping -agq 192.168.0/24
- hping :
  - 特点: 支持使用的TCP/IP数据包组装、分析工具
    - 即当ICMP数据包被服务器丢弃时，这个命令就很好用了
    - Github: hping
    - 安装(ubuntu): sudo apt-get install hping3
    - 依赖:
      - libpcap-devel
    - 参数:
      - h: help
      - v: version
      - p: 端口
      - S: 设置TCP模式SYN包(三次握手包的同步包)
      - a: 伪造IP地址
    - 用法:
      - 对指定目标端口发起tcp探测:
        
        hping3 -p 80 -S 192.168.1.1
      - 2伪造来源IP，模拟Ddos攻击:
        
        hping3 -p 80 -S 192.168.1.1 -a 10.10.163.123
    - 扩展:
      - netstat:
        
        l : 查看本机监听端口
        
        t : 查看tcp的协议
        
        n : 不做主机名解析,即只显示IP地址不显示主机名
      - sysctl -w net.ipv4-icmp_echo_ignore_all=1 (去掉)
        
        写入内核，禁用icmp echo; 更好的方式用iptables
        
        iptables -A INPUT -p icmp –icmp-type 8 -j DROP
        
        icmp-type:
        
        8 : 禁止echo
        
        tcpdump:
        
        tcpdump -np ieth0 (eth0是网卡)
        
        tcpdump -np -ieth0 src host 10.10.163.123 # 只把来自host10.10.163.123的主机的包过滤出来

3.路由扫描

作用: 查询一个主机到另一个主机的经过的路由的跳数、以及数据的延迟情况
常用工具:
- traceroute
  - 默认使用的是UDP协议(30000上的端口)
  - 使用TCO协议 -T(tcp协议) -p(端口)
  - 使用ICMP协议 -I
  - 不显示域名解析,只显示IP: -n
- mtr:
  - man mtr

4.批量服务扫描

目的:
- 1.批量主机存活扫描
- 2.针对主机服务扫描
作用:
- 1.能更方便快捷获取网络中主机的存活状态
- 2.更加细致、智能获取主机服务侦查情况
命令:
- nmap 命令

扫描类型	描述	特点
ICMP协议类型(-sP)	ping扫描	简单、快速、有效
TCP SYN扫描(-sS)	TCP半开放扫描	高效、不易被检测、通用
TCP connect()扫描(-sT)	TCP全开放扫描	真实、结果可靠
UDP扫描(-sU)	UDP协议扫描	有效透过防火墙策略

命令:
- nmap:
  - 用ICMP协议主机段扫描: nmap -sP 10.1.21.0/24
  - TCP SYN半开放: nmap -sS 127.0.0.1
  - TCP SYN半开放: nmap -sS -p 0-2048 127.0.0.1 # -p + 端口范围
  - TCP SYN全开放: nmap -sT -p 0-2048 127.0.0.1 # -p + 端口范围
  - UDP扫描: nmap -sU 127.0.0.1
- ncat:
  - 组合参数:
    - w : 设置的超时时间
    - z : 一个输入输出模式
    - v : 显示命令执行过程
  - 应用:
    - 基于tcp协议(默认): nc -v -z -w2 10.1.21.254 1-50
    - 基于udp协议 -u : nc -v -z -w2 -u 10.1.21.254 1-50

5.linux防范恶意扫描安全策略

常见的攻击方法:
- 1. SYN攻击:
    - 定义: 录用TCP协议缺陷进行，导致系统服务停止响应，网络带宽跑满或者响应缓慢
    - 原理:
    - 伪造IP地址 * 防范:
    - 1.减少发送sny+ack包时重试次数:
      - sysctl -w net.ipv4.tcp_synack_retries==3 (去掉)
      - sysctl -w net.ipv4.tcp_syn_retries=3
    - 2.SYN cookies技术:
      - sysctl -w net.ipv4.tcp_syncookies=1
    - 3.增加backlog队列，即增加backlog队列长度:
      - sysctl -w net.ipv4.tcp_max_syn_backlog=2048 (默认512)
- 1. DDOS攻击:
    - 定义: 分布式访问拒绝服务攻击
- 1. 恶意扫描
Linux其他安全策略:
- 1.关闭ICMP协议请求:
  - sysctl -w net.ipv4.icmp_echo_ignore_all=1
- 2.通过iptables防止扫描:
  - iptables -A FORWARD -p tcp –syn -m limit –limit 1/s –limit-burst 5 -j ACCEPT
  - iptables -A FORWARD -p tcp –tcp-flags SYN,ACK,FIN,RST RST -m limit –limit 1/s -j ACCEPT
  - iptables -A FORWARD -p icmp –icmp-type echo-request -m limit –limit 1/s -j ACCEPT

Cole

值得一读的文章

2017 年

4 月

1 月

2016 年

12月

11月

10月

9月

5月

4 月

2 月

2015 年

10 月

9 月

8 月

7 月

6 月

5 月

4 月

正确掌握React 生命周期(Lifecycle)

前言

一 生命周期的8个方法

1 componentWillMount()

2 render()

3 componentDidMount()

4 componentWillReceiveProps(nextProps)

5 shouldComponentUpdate(nextProps, nextState)

6 componentWillUpdate(nextProps, nextState)

7 componentDidUpdate(prevProps, prevState)

8 componentWillUnmount()

相关 setState(Object/Function)

二 两种生命周期

1 组件初始化

2 组件更新 – props change

3 组件更新 – state change

4 组件卸载或销毁

三 相关链接

对前后端API设计的一点思考 -- Status Code

一、问题

二、Response 情况分类(2种)

三、例子: Fetch

四、参考

React - PropTypes and DefaultProps

一 PropsTypes 取值

二 限定PropTypes类型

三 自定义类型

四 defaultProps (ES2016)

五 案例

SVG 入门和进阶

SVG基础

一、定义与优势: SVG - Scalable Vector Graphics

二、基本使用

三、基础Shape和Style属性

三、滤镜(Filter) – in <defs>

四、渐变(Gradient) – in <defs>

五、SVG图形组<g>

SVG 进阶

六、坐标系统 – 使用 transform 观察

七、RGB与HSL

Express 项目基础架构及使用文档

@1 项目文件结构

@2 version 4.x 安装

@3 Express Hello world web server

@4 Rest: HTTP METHODS

@5 基本路由(Basic Route)

@6 Express 高级路由(Advanced Route)

@7 中间件(Middleware)

@8 模板引擎(Template Engines)

@9 数据库集成(Database Integeration)

全站 HTTPS 实践

参考

program docs search tools

文档查询工具

快速查询工具

文档快速生成

Linux 开发有用的工具集

一、网络

流量分析

一生命周期的8个方法

1 `componentWillMount()`

2 `render()`

3 `componentDidMount()`

4 `componentWillReceiveProps(nextProps)`

5 `shouldComponentUpdate(nextProps, nextState)`

6 `componentWillUpdate(nextProps, nextState)`

7 `componentDidUpdate(prevProps, prevState)`

8 `componentWillUnmount()`

相关 `setState(Object/Function)`

二两种生命周期

三相关链接

二限定PropTypes类型

三自定义类型

五案例

一、定义与优势: `SVG` - `Scalable Vector Graphics`

三、`滤镜(Filter)` – in `<defs>`

四、`渐变(Gradient)` – in `<defs>`

五、`SVG图形组<g>`

二、分析: `T(n) = aT(n/b) + f(n)`

二、基础: `合并两个有序列表`