关于CDN

发表于 2017-08-03

cdn 是一种从网络层面优化页面访问速度的手段
CDN服务商提供一项智能域名解析服务，这种智能DNS服务在浏览器发起域名查询时，会根据用户IP计算并返回离它最近的同网络CDN节点IP，引导浏览器与此节点建立连接以获取资源。
不同地区的用户访问同一个域名，依赖CDN服务商提供的智能域名解析服务得到不同CDN节点的IP地址
不同地区的用户会访问到离自己最近的相同网络线路上的CDN节点，当请求达到CDN节点后，节点会判断自己的内容缓存是否有效，如果有效，则立即响应缓存内容给用户，从而加快响应速度。如果CDN节点的缓存失效，它会根据服务配置去我们的内容源服务器获取最新的资源响应给用户，并将内容缓存下来以便响应给后续访问的用户。因此，一个地区内只要有一个用户先加载资源，在CDN中建立了缓存，该地区的其他后续用户都能因此而受益。
通过将静态资源缓存到离用户很近的相同网络运营商的CDN节点上，不但能提升用户的访问速度，还能节省服务器的带宽消耗，降低负载。
好的cdn服务到源服务器获取文件会通过专用的线路，这样就会比用户直接从源服务器获取资源快

常见页面布局小结

发表于 2017-08-03

圣杯布局

三栏布局,左右两栏宽度固定,中间一栏宽度随屏幕宽度自适应

<body>
<div id="header">#header</div>
<div id="container">
  <div id="center" class="column">#center</div>
  <div id="left" class="column">#left</div>
  <div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>
</body>

<style type="text/css">
  body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;/* 让左右两栏进行相对位移，位移到container的内边距位置 */
  min-height: 200px;/* 高度自适应*/
  float: left;
}
#center {
  width: 100%;
  background-color: #e9e9e9;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;           /*LC width *//*相对于 container 的右边线向左偏移 200px 将自己位移到container内边距 */
  margin-left: -100%;/*浮动到与中间平行 */
  background-color: red;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
  background-color: blue;
}
#footer {
  clear: both;/*清除 footer 的上下环境，以免遭跟上面三栏一起浮动*/
}
#header, 
#footer {
  background-color: #c9c9c9;
}
</style>

flex 实现圣杯布局

<!doctype html>
<html>
<head>
</head>
<body>
    <header>header</header>
    <section>
      <nav>nav</nav>
      <article>article</article>
      <aside>aside</aside>
    </section>
    <footer>footer</footer>
</body>
<style>
 body{
   display: flex;
   flex-flow: column wrap;
   justify-content:flex-start;
 }
 header,section,nav,aside,footer{
   display: block;
 }
 header{
   order: 1;
   width: 100%;
   min-height: 100px;
   padding: 10px 20px;
   background-color: antiquewhite;
 }
 section{
   flex: 1; 
   order: 2;
   min-width: 100%;
   margin: 20px 0;
   display: flex;
 }
 footer{
   order: 3;
   min-height: 60px;
   min-width: 100%;
   padding: 1%;
   background-color: burlywood;
 }
 nav{
   order:1;
   width: 220px;
   padding: 1%;
   background-color: aquamarine;
 }
 article{
   flex: 1;/* 可伸缩 */
   order:2;
   padding: 1%;
   margin:0 2%;
   background-color: blue;
   word-break: break-all;
 }
 aside{
   order:3;
   width:220px;
   padding: 1%;
   background-color: aqua;
 }
 
</style>
</html>

双飞翼布局

效果同圣杯布局，只是写法上DOM在center里面新增加了div,css不再使用relative定位，只是用float和外边距

<div id="header">header</div>
<div id="container">
  <div id="center" class="column">
    <div id="innerCenter">center</div>
  </div>
  <div id="left" class="column">left</div>
  <div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>

<style type="text/css">
  body {
    min-width: 351px; /* LC width + RC width +1*/
  }
  #container .column {
    min-height: 200px;
    float: left;
  }
  #innerCenter { /*代替圣杯container的padding处理*/
    margin-left: 200px;
    margin-right: 150px;
  }
  #center {
    width: 100%;
    background-color: #e9e9e9;
  }
  #left {
    width: 200px;
    margin-left: -100%;
    background-color: red;
  }
  #right {
    width: 150px;
    margin-left: -150px;
    background-color: blue;
  }
  #footer {
    clear: both;
  }
  #header, #footer {
    background-color: #c9c9c9;
  }
  
</style>

7种垂直居中

1.tabel自带
<body>
  <table class="parent">
    <tr>
      <td class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
      </td>
    </tr>
  </table>
  .parent{
  border: 1px solid red;
  height: 600px;
}

.child{
  border: 1px solid green;
}
2.在水平居中部分的前后添加inline-block元素，高度100%，三个子元素，vertical-align:middle
<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
</body>
.parent{
  border: 3px solid red;
  height: 600px;
  text-align: center;
}

.child{
  border: 3px solid black;
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}

.parent:before{
  content:'';
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent:after{
  content:'';
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
如果用标签元素，则前后元素类设置为.parent .after{},.parent .before{}

3.父元素position设置为相对定位relative,子元素位置相对父元素，设置为absolute,通过设置top和left 50%决定距离父元素上边和左边的距离，
再通过margin-top,margin-left为子元素高和宽的一半将子元素和父元素中心重合
<div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  width: 300px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin:-50px 0 0 -150px;
}


4.父元素relative,子元素absolute，top和left均为 50%，transform:translate(-50%,-50%)
<div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

5.父元素relative,子元素absolute，子元素，上下左右都是0，margin:auto
<div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  width: 300px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
6.felx布局，父元素display:flex,justify-content:center;align-items:center
<div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>

  </div>
  .parent{
  height: 600px;
  border: 3px solid red;

  display: flex;
  justify-content: center;
  align-items: center;
}
.child{
  border: 3px solid green;
  width: 300px;
}

清除浮动

1.在父元素上添加样式overflow:hidden/auto
2.给父元素设置高度或者添加float属性（使之成为浮动元素）
3.在子元素结尾添加空div标签或者br标签，或者给父元素添加:after伪类，设置属性clear：both

.clearfix::after{
    content: ''; display: block; clear:both;
}
.clearfix{
    zoom: 1; /* IE 兼容 */
}

多列布局

column-width —— 列宽,不设置时由其他属性决定
column-count —— 列数,不设置时由其他属性决定
columns —— column-width column-count

column-gap —— 列间距
column-rule —— 间距线，位于列间距中间，介于background和content之间，宽度大于列间距时消失
宽度样式颜色

column-fill —— 各列宽度
auto 随内容自动调整 |balance 以内容最多一列统一高度
column-span —— 子元素是否合并列
none/all

静态布局：尺寸不变，布局不变
自适应布局：为不同尺寸屏幕设计不同静态布局
流式布局：通过更改模块大小，保证整体布局
响应式布局：针对不同尺寸屏幕，设计不同流式布局
弹性布局：可以设置模块大小放缩保证布局，也可以固定模块大小，更改布局
各种布局概念区分
 react涉及布局
 相关资料
 CSS布局 ——从display，position， float属性谈起

使用QRcode.js生成二维码

发表于 2017-08-01

在页面中引入QRcode.js文件，再js部分进行定义
var qrcode = new QRCode(document.getElementById(“qrcode0”), { //qrcode0放置二维码容器的id
width : 150,//二维码大小
height : 150
});
qrcode.makeCode(url);//url,生成二维码的依据

Angularjs 利用图片更换emoji表情

发表于 2017-08-01

在某些浏览器中,emoji表情不能正常显示,只能显示原始状态如下

为使表情正常显示，这里利用转码方法将emoji符号用图片替换

//对数据$scope.data.remark做表情替换处理,$scope.data.remark是包含emoji符号的字符串
    var str=$scope.data.remark;
    str=str.replace(rep,function(code) { //code即匹配到的emoji符号,对该符号通过_escapeToUtf32(code)转码,得到对应图片名,然后图片替换
     return '<img class="emoji" style="vertical-align:middle" src="assets/img/emoji/'+_escapeToUtf32(code) + '.png">';
    })
    $scope.data.remark = str;

//用emoji符号的unicode码匹配emoji符号,例如270c匹配 victory hand符号
 var rep =/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]|\u270c|\u261d/g;

//emoji 表情转码
  function  _escapeToUtf32(str) {
    var escaped = [],
      unicodeCodes = _convertStringToUnicodeCodePoints(str),
      i = 0,
      l = unicodeCodes.length,
      hex;

    for (; i < l; i++) {
      hex = unicodeCodes[i].toString(16);
      escaped.push('0000'.substr(hex.length) + hex);
    }
    return escaped.join('-');
  }

 function _convertStringToUnicodeCodePoints(str) {
    var surrogate1st = 0,
      unicodeCodes = [],
      i = 0,
      l = str.length;

    for (; i < l; i++) {
      var utf16Code = str.charCodeAt(i);
      if (surrogate1st != 0) {
        if (utf16Code >= 0xDC00 && utf16Code <= 0xDFFF) {
          var surrogate2nd = utf16Code,
            unicodeCode = (surrogate1st - 0xD800) * (1 << 10) + (1 << 16) + (surrogate2nd - 0xDC00);
          unicodeCodes.push(unicodeCode);
        }
        surrogate1st = 0;
      } else if (utf16Code >= 0xD800 && utf16Code <= 0xDBFF) {
        surrogate1st = utf16Code;
      } else {
        unicodeCodes.push(utf16Code);
      }
    }
    return unicodeCodes;
  }

//Angularjs对字符串里面的html标签不会按照HTML去解析,会当做字符串显示,
//所以这里需要对字符串进行过滤，使字符串里面的标签能按照html解析

//新建过滤器trust2Html,这里使用$sce方法
app.filter('trust2Html', ['$sce',function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
}])

//在页面里面显示经过图片替换的含emoji符号的字符串
<label ng-bind-html="data.remark|trust2Html"></label>

替换后结果

Emoji Unicode Tables

探究jQuery.data

发表于 2017-07-30

jQuery.data用于处理标签数据绑定

使用方法

1.赋值

a.使用js
$(‘’).data(key,value); 一次赋值一个，value可以是任意js数据类型,包括Array 或者 Object
$(‘’).data(obj);一次赋值多个或者更新多个或者新增多个

b.使用HTML标签属性
利用H5 标签的’data-‘属性添加键值对

1	<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

2.取值
$(‘’).data(key);获取key对应的数据值
$(‘’).data(); 一次性获取绑定在$(‘’)上的所有数据对象

3.删除
$(‘’).removeData(key);

注意事项

a. <object>（除非是Flash插件），<applet> 或 <embed>> 三个标签不能使用.data方法

b. 通过”data-“属性建立的标签数据，获取时注意
data-last-value=”43” ==> $(‘div’).data(‘lastValue’)
data-options=’{“name”:”John”}’ ==> $(“div”).data(“options”).name ->John
取到的值会自动转化为js的数据类型

c. $(‘’).data()被赋值到js变量A后，之后对$(‘’)进行数据处理，A的内容会进行同步变动，
如果更改A的内容，$(‘’).data()也会同步更改
但如果$(‘’).data()的值被用到了html里面,HTML里面的值不会变动

<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; }
  span { color:red; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div>
    The values stored were
    <span></span>
    and
    <span></span>
  </div>
<script>
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
//页面输出 The values stored were 16 and pizza!
  var temp = $("div").data();
  console.log(temp);
  $("div").data({ first: 25, last: "pizza!" ,test:{last:'fruit'}});
  // $("span:first").text($("div").data("first"));
  // $("span:last").text($("div").data("test").last); 
  //如果没有以上两句页面不会发生任何变化，添加后
  //页面输出 The values stored were 25 and fruit
  console.log(temp);//temp与$("div").data()保持一致
  console.log($("div").data())
  temp.child = 'Jack';
  console.log($("div").data()) //增加一项{child: "Jack"}
  $("div").removeData("blah");//删除没有的属性不会报错
  $("div").removeData("child");
   console.log(temp);
</script>
</body>
</html>

JQuery.data源码解析

angular样式绑定ng-class

发表于 2017-06-25

ng-class命令可用于绑定不同的样式
使用方法即先在js中,定义样式集合
$scope.STATUS_NAME = [
{‘labelClass’: ‘label1’},
{‘labelClass’: ‘label2’},
{‘labelClass’: ‘label3’},
{‘labelClass’: ‘label4’}
];
对绑定对象赋值
angular.forEach($scope.data, function(data){
//对数组中每一项，根据status属性赋给labelclass属性样式集合中的值
data.labelClass = $scope.STATUS_NAME[data.status].labelClass;
});
在html中定义不同的样式

<style type="text/css">
	.label1{
    background-color:#87CEFA
  }
  .label2{
    background-color:#90EE90
  }
  .label3{
    background-color:#d2cd93
  }
  .label4{
    background-color:#D3D3D3
  }
</style>

在html中使用

1
2
3

<tr role="row" ng-repeat="item in data track by $index">
	<td><span class="label" ng-class="item.labelClass">{{item.status_desc}}</span></td>
</tr>

cookie和session

发表于 2017-05-26

设置cookie

bool setcookie  (
	string $名字
	[, string $值]
	[, int $过期时间  = 0]
	[, string $路径]
	[, string $域名]
	[, bool $安全  = false]
	[, bool $http只读  = false]
);

参数描述
$名字必需。规定 cookie 的名称。
$值可选。规定 cookie 的值。
$有效期可选。规定 cookie 的有效期。
$路径可选。规定 cookie 的服务器路径。
$域名可选。规定 cookie 的域名。
$安全可选。规定是否通过安全的 HTTPS 连接来传输 cookie。
$http安读可选。如果true，那么js就无法读取改cookie，增加安全性。

在服务端通过$_COOKIE[‘name’] 来读取cookie了。

使用cookie例子

session

session_start(); //开启session
$_SESSION[‘userName’] = ‘wang’; //添加session数据
$userName = $_SESSION[‘userName’]; //读取session数据
unset($_SESSION[‘XXX’]);//销毁单个session数据
$_SESSION = array();//销毁全部session数据
session_destory();//这个函数会销毁当前会话中的全部数据，并结束当前会话,但是不会重置当前会话所关联的全局变量，也不会重置会话 cookie

在php.ini配置文件中有这么一行 session.save_handler = files,
files,说明了php默认的是用文件读写的方式来保存session的
session.save_path = “/tmp”, “/tmp”即存储路径

使用session例子

curl

<?php
//初始化
$ch = curl_init();
//设置选项，包括URL
curl_setopt($ch, CURLOPT_URL, "http://www.php.cn");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
//执行并获取HTML文档内容
$output = curl_exec($ch);
//释放curl句柄
curl_close($ch);
//打印获得的数据
print_r($output);
?>

函数 curl_setopt
参数1 curl资源变量
参数2 curl参数选项
参数3 curl参数值

CURLOPT_URL 这个参数选项规定了请求的url地址。
CURLOPT_RETURNTRANSFER curl请求后返回对应的结果若需要返回值即为1。不需请求后返回的结果可设置为0。

如果是get请求，我们不需要设置发送的参数。在post等请求的时候，我们需要设置发送方法为post方法。并设置发送的数据。
CURLOPT_POST 值设为1是使用POST方法，0为不使用POST方法
CURLOPT_POSTFIELDS 设置传递的数据
//声明使用POST方式来进行发送
curl_setopt($ch, CURLOPT_POST, 1);
//发送什么数据呢
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);

如果是https有的时候需要忽略https的安全证书。

CURLOPT_SSL_VERIFYPEER和CURLOPT_SSL_VERIFYHOST 两个参数改为false即忽略了证书。
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
CURLOPT_HEADER 决定是是否处理http的头信息，不接收处理的话可将这个值设置为0。
CURLOPT_TIMEOUT 设置请求的超时时间

$output = curl_exec($ch); 如果执行的结果有数据。使用curl_exec执行后，会将结果返回给$output变量。
curl_close($ch); 关闭curl资源。
curlget 截取页面例子
 curlpost例子

MySQL的基本知识

发表于 2017-05-26

五个基本单位

数据库服务器:指用来运行数据库服务的一台电脑
数据库:一个数据库服务器里面有可以有多个数据库。主要用来分类使用。
数据表:专门用来区分一个数据库中的不同数据
数据字段:也叫数据列,日常所见表格里面的列
数据行:真正的数据存在每一个表的行里面

语句类别

1.数据定义语言(DDL ，Data Defintion Language)语句：数据定义语句，用于定义不同的数据段、数据库、表、列、索引等。常用的语句关键字包括create、drop、alter等。
2.数据操作语言(DML ， Data Manipulation Language)语句：数据操纵语句，用于添加、删除、更新和查询数据库记录，并检查数据的完整性。常用的语句关键字主要包括insert、delete、update和select等。
3.数据控制语言(DCL， Data Control Language)
语句：数据控制语句，用于控制不同数据段直接的许可和访问级别的语句。
这些语句定义了数据库、表、字段、用户的访问权限和安全级别。主要的语句关键字包括grant、revoke等。

操作语句

create database 数据库名; 创建数据库
show databases; 查看当前服务器有哪些数据库，显示所有数据库名
use 数据库名; 选中数据库，进入到相应的数据库中
show tables; 显示当前数据库下的所有表
drop database 数据库名; 删除数据库
create table 表名(字段名1 字段类型,….字段名n 字段类型n); 建表
desc 表名; 查看表结构，显示表中属性

show create table 表名 \G;
查看表的创建语句，“\G”选项的含义是使得记录能够按照字段竖着排列，对于内容比较长的记录更易于显示。
可以看到表的 engine（存储引擎) 和 charset(字符集)等信息
在创建表的时候能够制定引擎
例
CREATE TABLE emp (
useraname varchar(10) DEFAULT NULL,
password date DEFAULT NULL,
)ENGINE=InnoDB DEFAULT CHARSET=utf8;

drop table 表名; 删除表
alter table 表名 modify 字段名类型字段; 修改表字段类型
alter table 表名 add column 字段名类型; 增加表字段
alter table 表名 add 字段名2 字段类型 after 字段名1; 在字段名1后面增加字段名1
alter table 表名 add 字段名2 字段类型 first; 在最开始的位置增加字段
alter table 表名 drop column 字段名; 删除表字段
alter table 表名 change 字段原名字段新名字段类型; 表字段改名

alter table 旧表名 rename 新的表名; 修改表名

修改表字段排列顺序
在前的字段增加和修改语句（add/change/modify）中，最后都可以加一个可选项 first|after。

数据类型

整型

MySQL数据类型所占字节值范围
tinyint 1字节 -128~127
smallint 2字节 -32768~32767
mediumint 3字节 -8388608~8388607
int 4字节范围-2147483648~2147483647
bigint 8字节 +-9.22*10的18次方
1.在创建表字段时，性别我们可以使用无符号的微小整型（tinyint）来表示。用0表示女、用1表示男。用2表示未知。
2.同样人类年龄也是，在创建表字段时可用用无符号的整型。因为人类的年龄还没有负数
3.在实际使用过程中。我们业务中最大需要存储多大的数值。我们创建表时，就选择什么样的类型来存储这样的值。

浮点类型

MySQL数据类型所占字节值范围
float(m, d) 4字节单精度浮点型，m总个数，d小数位
double(m, d) 8字节双精度浮点型，m总个数，d小数位
decimal(m, d) decimal是存储为字符串的浮点数
浮点是非精确值，会存在不太准确的情况,而decimal叫做定点数。
在MySQL内部，本质上是用字符串存储的。实际使用过程中如果存在金额、钱精度要求比较高的浮点数存储，建议使用decimal（定点数）这个类型

字符类型

MySQL数据类型所占字节值范围
CHAR 0-255字节定长字符串
VARCHAR 0-255字节变长字符串
TINYBLOB 0-255字节不超过255个字符的二进制字符串
TINYTEXT 0-255字节短文本字符串
BLOB 0-65535字节二进制形式的长文本数据
TEXT 0-65535字节长文本数据
MEDIUMBLOB 0-16 777 215字节二进制形式的中等长度文本数据
MEDIUMTEXT 0-16 777 215字节中等长度文本数据
LOGNGBLOB 0-4 294 967 295字节二进制形式的极大文本数据
LONGTEXT 0-4 294 967 295字节极大文本数据
VARBINARY(M) 允许长度0-M个字节的定长字节符串值的长度+1个字节
BINARY(M) M 允许长度0-M个字节的定长字节符串

时间类型

MySQL数据类型所占字节值范围
date 3字节日期，格式：2014-09-18
time 3字节时间，格式：08:42:30
datetime 8字节日期时间，格式：2014-09-18 08:42:30
timestamp 4字节自动存储记录修改的时间
year 1字节年份

复合类型

MySQL数据类型说明举例
set 集合类型 set(“member”, “member2″, … “member64″)
enum 枚举类型 enum(“member1″, “member2″, … “member65535″)
一个 ENUM 类型只允许从一个集合中取得一个值；而 SET 类型允许从一个集合中取得任意多个值。

常用中文字符集

gbk_chinese_ci 简体中文, 不区分大小写
utf8_general_ci Unicode (多语言), 不区分大小写
mysql在写utf-8的时候写的是utf8。不加中间的中横线

存储引擎

使用show engines命令可显示当前服务器支持的所有引擎
引擎名称
MyISAM 常用。读取效率很高的引擎
InnoDB 常用。写入，支持事处等都支持
Archive 不常用。归档引擎，压缩比高达1:10，用于数据归档
NDB 不常用。主要在MySQL 集群服务器中使用，

行锁：写入、更新操作的时候将这一行锁起来，不让其他人再操作了。
表锁：写入、更新操作时，将表给锁起来不让其他人再操作了。
事务：同时操作多个数据，若其中的一个数据操作失败。可回滚到操作之前。常用于银行、电商、金融等系统中

MyISAM
不支持事务，表锁(表级锁，加锁会锁住整个表)，支持全文索引,操作速度快。常用于读取多的业务。
myisam存储引擎表由myd和myi组成。.myd用来存放数据文件，.myi用来存放索引文件。
对于myisam存储引擎表，mysql数据库只缓存其索引文件，数据文件的缓存由操作系统本身来完成。

InnoDB
支持事务，主要面向在线事务处理(OLTP)方面的应用。
行锁设计，支持外键，即默认情况下读取操作不加锁。

索引

1.普通索引最基本的索引，它没有任何限制
alter table 表 add index(字段)

2.唯一索引某一行企用了唯一索引则不准许这一列的行数据中有重复的值。针对这一列的每一行数据都要求是唯一的
alter table 表 add UNIQUE(字段)

3.主键索引它是一种特殊的唯一索引，不允许有空值。一般是在建表的时候同时创建主键索引，常用于用户ID。类似于书中的页码
alter table 表 add PRIMARY KEY(字段)

4.全文索引对于需要全局搜索的数据，进行全文索引
alter table 表 add FULLTEXT(字段)

创建表时可在创建表语句后加上对应的类型即可声明索引：
CREATE TABLE test (
id INT NOT NULL ,
username VARCHAR(20) NOT NULL ,
password INT NOT NULL ,
content INT NOT NULL ,
PRIMARY KEY (id),
INDEX pw (password),
UNIQUE (username),
FULLTEXT (content)
) ENGINE = InnoDB;

插入记录

方法一：
insert into 表 values(值1,值2,值n);
表中有多少个字段就必须要插入多少个值。一个不能多，一个也不能少。若有默认值，不想传，可以写上null。
顺序应该和表字段的排序一致。
方法二：
insert into 表(字段1,字段2,字段n) values(值1,值2,值n);
除非有必填字段必须要写入值外。如果有默认值的不想写可以忽略不写。mysql会自动补主默认值。
以表(字段1,字段2,字段n)字段顺序为值的顺序。
基本语法变形：一次插入多条记录
INSERT INTO user(username,password,sex)
values(‘ll’, ‘abcdef’, 1),
( ‘loe’, ‘bcdeef’, 0),
( ‘key’, ‘123456’, 1),
(‘tom’, ‘987654’, 1);

查询

select from 表; 查询表中所有字段中的所有结果,”“ 是一种正则表达式的写法，表示匹配所有
select 字段1[,字段2,字段n] from 表; 指定字段查询
select distinct 字段 from 表; 查询单个字段不重复记录 distinct
select 字段 from 表 where 条件; 条件查询 where,条件可以是逻辑比较运算符的比较式

select 字段 from 表 order by 字段排序关键词; 查询结果按照字段排序关键词排序
排序关键词:
asc 升序排列，从小到大（默认）
desc 降序排列，从大到小

select 字段 from 表 order by 字段1 排序关键词,… …字段n desc|asc;
order by 后面可以跟多个不同的字段排序，并且排序字段的不同结果集的顺序也不同，
如果排序字段的值一样，则值相同的字段按照第二个排序字段进行排序。

select 字段 from 表 limit 数量; 对于查询或者排序后的结果集，如果希望只显示一部分而不是全部，使用 limit 关键字结果集数量限制。
select 字段 from 表 order by 字段关键词 limit 数量; 限制结果集并排序
select 字段 from 表 limit 偏移量,数量; 结果集区间选择，偏移量从0开始，0是第一条数据
select 函数(字段) from 表; 从表中将按字段查询的结果进行函数处理
函数
sum 求和
count 统计总数
max 最大值
min 最小值
avg 平均值

select from 表 group by 字段; 将表中数据按字段分组
select from 表 group by 字段 having 条件; 分组结果再过滤。having 是筛选组而where是筛选记录
例：统计省份数量后再进行分组显示： select count(province),province from money group by province;

整体的SQL语句配合使用的语法结构如下：
SELECT
[字段1 [as 别名1],[函数(字段2) ,]……字段n]
FROM 表名
[WHERE where条件]
[GROUP BY 字段]
[HAVING where_contition]
[order 条件]
[limit 条件]
例
查询money表字段：id,username,balance,province 要求id>1 余额大于50，使用地区进行分组。我们使用用户id进行降序，要求只准显示3条。
select id,username,balance,province from money where id > 1 and balance > 50 group by province order by id desc limit 3;

多表联合查询

内连接

将两个表中存在联结关系的字段符合联结关系的那些记录形成记录集的联结。
基本语法1：
select 表1.字段 [as 别名],表n.字段 from 表1 [别名],表n where 条件;
取满足条件的数据的在各表中的各字段
例
select user.uid ,user.username as username,order_goods.oid,order_goods.uid,order_goods.name as shopname from user,order_goods where user.uid = order_goods.uid;
若表user中某条数据x的uid与表order_goods中的某条数据y的uid相同,则取出user表中数据x的 uid、username，取出order_goods中数据y的uid,name,其中order_goods的name的值以shopname的值显示
基本语法2：
select 表1.字段 [as 别名],表n.字段 from 表1 INNER JOIN 表n on 条件;
例
select user.uid ,user.username as username,order_goods.oid,order_goods.uid,order_goods.name as shopname from user inner join order_goods on user.uid = order_goods.uid;
效果同基本语法1

##　外连接
会选出其他不匹配的记录，分为外左联结和外右联结。
左连接：包含所有的左边表中的记录甚至是右边表中没有和它匹配的记录
select 表1.字段 [as 别名],表n.字段 from 表1 LEFT JOIN 表n on 条件;
例
select * from user left join order_goods on user.uid = order_goods.uid;
以左边ｕｓｅｒ为主，查询哪些用户未购买过商品，并将用户信息显示出来，ｕｓｅｒ表全部显示

右连接：包含所有的右边表中的记录甚至是右边表中没有和它匹配的记录
select 表1.字段 [as 别名],表n.字段 from 表1 right JOIN 表n on 条件;
例
select * from user right join order_goods on user.uid = order_goods.uid;
查询商品表中哪些用户购买过商品，并将用户信息显示出来，order_goods全部显示

子查询

需要的条件是另外一个select语句的结果，即使用子查询
用于子查询的关键字包括in、not in、=、!=、exists、not exists等。
select 字段 from 表 where 字段 in(条件)
例
select * from user where uid in (select uid from order_goods);
从order_goods取出uid这一列，将uid在user中对应的数据取出来

记录联合

使用 union 和 union all 关键字，将两个表的数据按照一定的查询条件查询出来后，将结果合并到一起显示。
union all 把结果直接合并在一起
union 是将 union all 后的结果进行一次distinct，去除重复记录后的结果。

修改

使用update
update 表名 set 字段1=值1,字段2=值2,字段n=值n where 条件；
例
update emp set balance=balance-500 where userid = 15;
将emp表中userid为15的数据的balance减15
同时对两个表进行更新
update 表1,表2 set 字段1=值1,字段2=值2,字段n=值n where 条件
例
update money m,user u m.balance=m.balanceu.age where m.userid=u.id;
修改money，将money表的别名设置为m；user表的别名设置为u；将m表的余额改为m表的balance用户表的age。执行条件是：m.userid = u.id

删除

用delete
DELETE FROM 表 [where 条件];
删除时如果不加where条件，会清空掉整个表的记录，返回被删除的记录数

清空表如果使用，
truncate table 表名;
表中若有自增字段，这个自增字段会将起始值恢复成1

权限

添加权限

grant 权限 on 库.表 to ‘用户‘@’主机’ identified by ‘密码’;
grant select, insert on test.* to ‘liwenkai‘@’localhost’ identified by ‘4311’;
给予liwenkai用户，在本机连接test库所有表的权限。操作的这些表具有查询和写入权限

删除权限

revoke 权限 on 库.表 from ‘用户‘@’主机’;
revoke select, insert on test.* to ‘liwenkai‘@’localhost’ identified by ‘4311’;
给予liwenkai用户，在本机连接test库所有表的权限。操作的这些表具有查询和写入权限

参数说明

grant all 在grant后接all说明给予所有权限
revoke all 在revoke后接all说明删除所有权限
权限 on . . 所明给予所有库所有表的操作权限
‘用户‘@’主机’ 主机里面若为%。任意来源的主机均可以使用这个用户来访问

php中MySQL的使用

发表于 2017-05-26

php连接数据库

查看数据库主机，用户名
use myaql；
select Host from user;
select user from user;

连接数据库服务器

mysql_connect函数
$con = mysql_connect(“localhost”,”peter”,”abc123”);
参数1 主机
参数2 数据库服务器登陆名
参数3 密码
参数4 数据库的名称
参数5 数据库服务器端口不填默认3306

若参数4，数据库名称在此步已填并择，不需要执行第三步

判断链接是否正常

如果有错误，存在错误号
if (mysql_errno($conn)) {
echo mysql_error($conn);
exit;
}

mysql_errno 返回连接错误号，无错误返回0
参数1 传入mysql_connect返回的资源

mysql_error 返回连接错误字符串
参数1 传入mysql_connect返回的资源

选择数据库

mysql_select_db函数
mysql_select_db(‘user’,$conn);
参数1 传入mysql_connect返回的资源
参数2 需要连接的数据库名

设置字符集

mysql_set_charset
mysql_set_charset(‘utf8’,$conn);
参数1 字符集类型
参数2 传入mysql_connect返回的资源

准备SQL语句

要传入数据库的操作语句
注意参数如何拼接

如果是int类型的就使用
$sql=”insert into user(mycon) values(“.$my_con.”)”;
//或者
$sql=’insert into user(mycon) values(‘.$my_con.’)’;

如果是字符型的就要使用单引号或者双引号括起来
$sql=”insert into user(mycon) values(‘“.$my_con.”‘)”;
//或者这样写
$sql=’insert into user(mycon) values(“‘.$my_con.’”)’;

多个
$sql = “INSERT INTO user (username,password,createtime,createip)
values
(‘“ . $username . “‘,’” . $password . “‘,” . $time . “,’” . $ip . “‘)”;

发送SQL语句

$result = mysql_query($sql,$conn);

根据不同操作，判断执行是否正常或者遍历数据

发送的是select类别的语句，通常需要将结果输出显示出来。就需要用到遍历显示数据的函数
函数 mysql_fetch_array
功能得到result结果集中的数据，返回数组进行便利
参数1 传入查询出来的结果变量
参数2 传入MYSQLI_NUM返回索引数组，MYSQLI_ASSOC返回关联数组，MYSQLI_BOTH返回索引和关联

函数 mysql_fetch_assoc
功能得到result结果集中的数据，返回关联数组进行便利
参数1 传入查询出来的结果变量

函数 mysql_fetch_row
功能得到result结果集中的数据，返回索引数组进行便利
参数1 传入查询出来的结果变量

函数 mysql_fetch_object
功能得到result结果集中的数据，返回对象进行遍历
参数1 传入查询出来的结果变量

函数 mysql_num_rows
功能返回查询出来的结果总数
参数1 传入查询出来的结果变量

函数 sql_num_rows
功能返回查询出来的结果总数
参数1 传入查询出来的结果变量

如果发送的是insert的语句，通常需要得到是否执行成功，或者同时拿到自增的ID。
函数 mysqli_fetch_field
功能遍历数据行
参数1 传入查询出来的结果变量

如果发送的是update和delete类别的语句。只需要判断是否执行成功即可。

if ($result) {
echo ‘成功’;
} else {
echo $sql;//查看是否是SQL语句拼接有问题
echo ‘失败’;
}

关闭数据库

函数 mysqli_close
功能关闭数据库连接
参数1 传入mysqli_connect返回的资源

mysql_close($conn);//关闭数据库

显示服务器信息函数

函数 mysqli_get_server_info
功能返回服务器信息
参数1 传入mysqli_connect返回的资源

函数 mysqli_get_server_version
功能返回服务器版本
参数1 传入mysqli_connect返回的资源

一个用户注册的代码链接

数据显示乱码终极解决办法

多个不同的文件系统中一定要统一编码。
9个要点分别是：
1.html编码与MySQL编码一致
2.PHP编码与MySQL编码一致
3.若有header头发送字符集，请与数据库一样
如果php中有header头，一定要是utf-8的
header(‘content-type:text/html;charset=utf-8’);
4.<meta http-equiv=“Content-Type”content=“text/html; charset=utf-8” />要和页面的文字编码一致
5.数据库建库的字符集要统一
6.表的字符集要统一
7.列的字符集要统一(表设了,列就默认写表的)
8.连接,校验的字符集要统一
通过mysqli_set_charset(‘utf8’)来MySQL连接、结果和校验的字符集设置。
注：数据库的字符集声明和文件中的略有不同。utf8为mysql数据库的，utf-8为文件中使用的
9.结果集的字符集要统一

图片上传

发表于 2017-05-02

用函数画图

<?php
//创建图片
$img = imagecreatetruecolor(500, 500);

//分配颜色 为图片准备需要用到的颜色
$red = imagecolorallocate($img, 255, 0, 0);

$green = imagecolorallocate($img, 0, 255, 0);

$blue = imagecolorallocate($img, 0, 0, 255);

$pur = imagecolorallocate($img, 255, 0, 255);

$yellow = imagecolorallocate($img, 121, 72, 0);


//填充背景 (0,0)(500,500)指图片左上角和右下角两点，从而确定图片的矩形
imagefilledrectangle($img, 0, 0, 500, 500, $green);

//画对角线 对角线起始点坐标
imageline($img, 0, 0, 500, 500, $red);
imageline($img, 500, 0, 0, 500, $blue);

//画圆
//bool imagefilledellipse ( resource $图片资源 , int $圆心x , int $圆心y , int $圆的宽 , int $圆的高 , int $圆的颜色 )
imagefilledellipse($img, 250, 250, 200, 200, $yellow);

//圆中间画矩形，同样通过左上角右下角确定矩形
imagefilledrectangle($img, 200, 200, 300, 300, $blue);


//保存图片，图片名为haha.jpg
imagejpeg($img, 'haha.jpg');

//销毁资源
imagedestroy($img);

?>

画验证码

代码链接

图片加水印

bool imagecopymerge ( resource $目标图片 , resource $来源图片, int $目标开始的x , int $目标开始的y, int $来源的x , int $来源的y , int $来源的宽 , int $来源的高 , int $透明度)
注意：
透明度的值为0-100的整数。imagecopy和imagecopymerge的区别在于一个有透明度，一个没有透明度。
大致步骤：
1.打开原图（也叫操作的目标图片）
2.打开水印图（也叫水印来源图片）
3.使用 imagecopymerge 将小图合并至大图的指定位置
4.输出图片
5.销毁资源
代码链接

图像放缩和裁剪

操作方式说明：
从来源图片的开始点(x,y)起，指定的宽高的大小图片。放至到目标图片的起点(x,y)，指定宽高大小的图片中。

缩放图片

imagecopyresampled 重采样拷贝部分图像并调整大小
bool imagecopyresampled ( resource $目标图 , resource $来源图 , int $目标开始的x位置 , int $目标开始的y位置 , int $来源开始的x位置 , int $来源开始的y位置 , int $目标图片的宽 , int $目标图片的高, int $来源图片的宽 , int $来源图片的高 )
大致步骤：
1.打开来源图片
2.设置图片缩放百分比（缩放）
3.获得来源图片，按比调整大小
4.新建一个指定大小的图片为目标图
5.将来源图调整后的大小放到目标中
6.销毁资源

//打开来源图片
$image = imagecreatefrompng('fbb.png');


//定义百分比，缩放到0.1大小
$percent = 0.1;


// 将图片宽高获取到
list($width, $height) = getimagesize('fbb.png');

//设置新的缩放的宽高
$new_width = $width * $percent;
$new_height = $height * $percent;

//创建新图片
$new_image = imagecreatetruecolor($new_width, $new_height);

//将原图$image按照指定的宽高，复制到$new_image指定的宽高大小中
imagecopyresampled($new_image, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

header('content-type:image/jpeg');
imagejpeg($new_image);
?>

裁剪图片

imagecopyresized 拷贝部分图像并调整大小
bool imagecopyresized ( resource $目标图 , resource $来源图 , int $目标开始的x位置 , int $目标开始的y位置 , int $来源开始的x位置 , int $来源开始的y位置 , int $目标图片的宽 , int $目标图片的高, int $来源图片的宽 , int $来源图片的高 )
大致步骤：
1.打开来源图片和目标图片
2.截取来源图片中的点，设置宽高。放至到目标图片中。（裁剪）
3.保存图片输入
4.销毁资源

<?php
 $dst = imagecreatefrompng('hsq.png');
 $src = imagecreatefrompng('du.png');
 imagecopyresized($dst, $src, 281, 71, 407, 154, 132, 160, 80, 90);
 header('content-type:image/jpeg');
imagejpeg($dst);
imagedestroy($dst);
 imagedestroy($src);
 ?>