官网QA:
1.刷卡支付默认有推荐关注；
2.公众号支付和扫码支付需要5元以上才有推荐关注；（0.01就有推荐栏，第一次5元以上默认选中）
3.APP支付默认没有，需要申请配置，需要有一定用户规模才可以申请；
4.已经关注的不展示推荐栏
5.服务号未设置头像的在IOS不展示推荐关注栏；
6.用户取消过关注的默认不勾选；
7.服务商模式的，需要在特约商户开发配置页设置推荐关注APP id；
8.订阅号目前是不会有默认推荐关注的；
9.对于粉丝数大于 50W的公众号，有消息链接，朋友圈链接，公众号发起的jsapi支付场景，支付成功后不默认勾选关注。
客服说明：
微信支付后默认选中关注微信公众号需要的额外条件
1、第一次消费
2、消费金额需要5元以上
跨域资源共享(Resources Domain Resources Sharing)，客户端从不同的域名发送JSON响应时绕过浏览器限制
利用 script标签 的 src属性 进行跨域请求，服务器响应函数调用传参。
代码：
<?php
//echo "a = 1";
?>
//html代码
<script type="text/javascript" src="http://ly.yungou.ws/test/index"></script>
<script type="text/javascript">
console.log(a); // 1
</script>
跨域请求成功！
动态创建 script标签的方式，添加到头部，来获取变量参数
<?php
echo "var a = 1;";
?>
//通过 script语句动态创建 script标签进行请求
<script type="text/javascript">
var script = document.createElement('script');
script.src = 'http://ly.yungou.ws/test/index';
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
console.log( a );
</script>
注意：原来动态创建 script 的方式发送请求 是异步的，虽然请求成功了，但是在使用变量时，请求还没有完成，相当于还没有定义变量，然后就报错了。
解决办法：使用callback
<?php
echo 'callback(123)';
?>
<script type="text/javascript">
var script = document.createElement('script');
script.src = 'http://ly.yungou.ws/test/index';
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
function callback(data){
console.log( data ); //callback(123) 对 callback 调用 输出 123
}
</script>
那我们就可以用这种动态的方式 很轻松的 拿到后台数据了，只不过前台声明的和 后台 调用的 函数名 需要一样才行，如上面的 然而这样也不太好，每次改动，那都要前后台对接一下。
所以我们可以把回调函数名放在参数中传输。案例如下：
<?php
$callback = $_GET[ 'callback' ]; // get 通过 callback键 得到 函数名
$userInfo = array( 'username' => 'leiyuan', 'password' => '123456' );// 生成数据
$data = json_encode($userInfo);
echo "{$callback}({$data});";// hello( json_encode($arr) )
通过 script语句动态创建 script标签进行请求
var script = document.createElement('script');
script.src = 'http://ly.yungou.ws/test/callback?callback=hello';
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
function hello(data){
console.log(data);// Object {username: "leiyuan", password: "123456"}
}
</script>
JSONP是一个协议（并且是非正式传输协议）。 该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了.
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求，
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
JSONP和JSON的区别：
目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。
JSON(JavaScript Object Notation)和JSONP(JSON with Padding)
JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。一个是描述信息的格式，一个是信息传递双方约定的方法。
1、ajax和jsonp这两种技术在调用方式上“看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery等框架都把jsonp作为ajax的一种形式进行了封装；
2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加
```
JSONP使用注意事项
1、跨系统跨域名，获取基本信息，
ps：后端不能存在任何页面跳转登陆信息，否则会请求失败
2、jsonp的缺陷：不提供错误处理（对方拒绝请求，网络不通，请求地址或者参数不正确等等）如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。
3、动态请求，都是异步请求。不支持同步请求，async无效。
请求不是通过XHR完成的，而是动态创建script标记，并请求url。跨域请求和dataType: "jsonp" 本身不支持同步操作。
4、若要在fun中使用jsonp请求后的参数，需要注意的是执行顺序，fun需要写在callback中才能成功调用参数。
5、如果没有定义jsonp和jsonpCallback，jsonp默认为"callback",jsonpCallback会是Jquery自动生成的函数名。
6、请求返回的是script tag，首先会调用jsonpCallback函数，不管是否找到该函数，都会调用success函数
参考资料
http://api.jquery.com/jQuery.ajax/
整 理：肖雅君 时 间：2016-11-18 说 明：vue.js的安装、基本用法
官网：http://vuejs.org.cn/
1.安装
安装npm，建议安装cnpm，超超快速。
淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
安装vue：npm install -g vue-cli【cnpm install -g vue-cli】
2.初始化：
vue init webpack vueTest
[项目类型]-如：使用webpack这个模板，进行压缩和打包
依次输入：项目名
项目描述
项目开发者
是否使用语法检测工具
是否进行单元测试
是否进行集成测试
3.下载依赖：cnpm install
下载完毕后，打开项目，一般所需修改的页面文件在src文件夹下，打开package.json文件，能看到我们在初始化项目的时候，输入的项目名、开发者等信息，如下图：
其中src文件夹下有个component文件夹，是专门安置自己封装的组件，引用这些组件的时候，直接在src文件夹下app.vue中引入，如下图：
4.在项目文件夹下运行项目：npm run dev
注：需要npm的版本在3.0.0，否则error。
升级npm：npm -g install nom@3.0.0 [用npm依旧是等待很长时间没反应，用cnpm很快]
升级完成后运行，浏览器自动跳转到8080端口打开测试页：
5.项目的页面是src文件下的 app.vue，修改这个文件夹即可。
另，后缀是.vue文件，在用brackets 或者sublime软件编辑的时候，需要安装对应的插件，才可显示高亮。
brackets vue插件：http://brackets.dnbard.com/extension/brackets.vue
sublime vue 插件： Vue Syntax highlight/Jade
6.重要指令：
new 一个vue对象时，可以设置：
（1）对象的属性：
数据：data
方法：method
监听：watch
new Vue()对象，注意大小写。new vue()无效。
（2）关联：
模板html页面和vue对象的粘合，用模板指令v-text、v-html进行数据渲染
（3）控制显示和隐藏：v-if、v-show
v-if通过控制dom结构控制显隐。v-show:控制css样式的display来控制显隐。
（4）循环渲染：v-for
（5）事件绑定：v-on
<button v-on:click = "doThis"></button>
简写：
<button @click = "doThis"></button>
（6）属性绑定：v-bind
<img v-bind:src="imageSrc" :class="{ red: isRed }"/>
7.基本功能和应用：
（1）数据的双向绑定
（2）v-show和v-if的使用
（3）事件处理
（4）组件化方法
（5）代码逻辑或者业务逻辑的输出处理：computed
（6）列表输出
（7）组件化综合应用：列表输出 + 组件化结合
（8）添加任务总数和删除任务
（9）jquery 、ajax 和vue的结合
（10）vue-resource插件的使用
8.代码demo
（1）数据的双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue js - Michellya</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="http://vuejs.org.cn/js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{myhead}}</h1>
<h1 v-text="mytext"></h1>
<input type="text" v-model="mytext" />
<!--打印出data里的代码，测试双向绑定过程-->
<pre>
{{$data | json}}
</pre>
</div>
<script>
new Vue({
el: '#app',
data: {
myhead:'你好！',
mytext:'My name is Michellya!'
}
});
</script>
</body>
</html>
（2）v-show和v-if的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue js - Michellya</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="http://vuejs.org.cn/js/vue.js"></script>
<style>
p{color:#f00;}
</style>
</head>
<body>
<div id="app">
<h1>{{myhead}}</h1>
<h1 v-text="mytext"></h1>
<p v-if="!mytext">警告：请填写内容！</p>
<input type="text" v-model="mytext" />
</div>
<script>
new Vue({
el: '#app',
data: {
myhead:'你好！',
mytext:''
}
});
</script>
</body>
</html>
（3）事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue js - Michellya</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="http://vuejs.org.cn/js/vue.js"></script>
<style>
p{color:#f00;}
</style>
</head>
<body>
<div id="app">
<button @click="mysubmit">submit</button>
</div>
<script>
new Vue({
el: '#app',
data: {
myhead:'你好！',
mytext:''
},
methods:{
mysubmit:function(){
alert(11);
}
}
});
</script>
</body>
</html>
（4）组件化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue js - Michellya</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="http://vuejs.org.cn/js/vue.js"></script>
<style>
p{color:#f00;}
</style>
</head>
<body>
<div id="app">
<!--组件化:1.自己定义组件-->
<mylabel mychoice="赞" bgcolor="red"></mylabel>
<mylabel mychoice="嘘" bgcolor="blue"></mylabel>
<!--2.用h5的新标签template 组件封装——应用1：类似微博的喜欢、不喜欢的点选计数-->
<template id="choice-model">
<h3>{{mychoice}}</h3>
<button @click="num += 1" style="background:{{bgcolor}}">{{num}}</button>
</template>
</div>
<script>
Vue.component('mylabel',{
template: '#choice-model',
props:['mychoice','bgcolor'],
data:function(){
return {num : 0}
}
});
new Vue({
el: '#app',
});
</script>
</body>
</html>
（5）代码逻辑或业务逻辑的输出处理：computed
应用1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue js - Michellya</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="http://vuejs.org.cn/js/vue.js"></script>
<style>
p{color:#f00;}
</style>
</head>
<body>
<div id="app">
<!-- level {{level <= 100 ? '普通会员' : 'VIP会员'}} -->
level {{level}}
</div>
<script>
/*
new Vue({
el: '#app',
data: {
points: 200,
level: '普通会员'
}
});
*/
new Vue({
el: '#app',
data: {
points: 200,
},
computed:{
level:function(){
if(this.points <= 100){
return '普通会员';
}
return 'VIP会员';
}
}
});
</script>
</body>
</html>
应用2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue js - Michellya</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="http://vuejs.org.cn/js/vue.js"></script>
<style>
p{color:#f00;}
</style>
</head>
<body>
<div id="app">
用户名:{{username}}
<br/>
<input type="text" v-model="first" />
<input type="text" v-model="second" />
</div>
<script>
new Vue({
el: '#app',
data: {
first: 'Michelle',
second: 'yajun',
},
computed:{
username:function(){
return this.first + ' ' + this.second;
}
}
});
</script>
</body>
</html>
（6）循环列表输出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue js - Michellya</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="http://vuejs.org.cn/js/vue.js"></script>
<style>
p{color:#f00;}
.mydone{text-decoration:line-through;}
.nodone{color:coral;}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- <li :class="task.completed ? 'mydone' : '' " v-for="task in tasks">{{task.body}}</li>-->
<li :class="{'mydone':task.completed,'nodone':!task.completed }"
v-for="task in tasks"
@click = "toggleclick(task)">{{task.body}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
tasks:[
{body:'sleeping',completed:false},
{body:'shopping',completed:true},
{body:'swimming',completed:true},
{body:'running',completed:false},
]
},
methods:{
toggleclick:function(task){
task.completed = !task.completed;
}
}
});
</script>
</body>
</html>
（7）组件化list综合应用:todo应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue js - Michellya</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="http://vuejs.org.cn/js/vue.js"></script>
<style>
p{color:#f00;}
.mydone{text-decoration:line-through;}
.nodone{color:coral;}
</style>
</head>
<body>
<div id="app">
<mytask :list="tasks"></mytask>
<mytask :list="[{body:'唱歌',completed:true},{body:'跳舞',completed:false},]"></mytask>
<mytask :list="tasks"></mytask>
<!--组件化：将每日任务变成组件list-->
<template id="mytask-model">
<ul>
<li :class="{'mydone':task.completed,'nodone':!task.completed }"
v-for="task in list"
@click = "toggleclick(task)">{{task.body}}</li>
</ul>
</template>
</div>
<script>
Vue.component('mytask',{
template: '#mytask-model',
props: ['list'],
methods: {
toggleclick:function(task){
task.completed = !task.completed;
}
}
});
new Vue({
el: '#app',
data: {
tasks:[
{body:'sleeping',completed:false},
{body:'shopping',completed:true},
{body:'swimming',completed:true},
{body:'running',completed:false}
]
}
});
</script>
</body>
</html>
（8）添加任务总数、删除任务和添加任务
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue js - Michellya</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script src="http://vuejs.org.cn/js/vue.js"></script>
<style>
p{color:#f00;}
.mydone{text-decoration:line-through;}
.nodone{color:coral;}
</style>
</head>
<body>
<div id="app">
<mytask :list="tasks"></mytask>
<!--组件化：将每日任务变成组件list-->
<template id="mytask-model">
<h1>My Task <span v-show="remaining">({{ remaining}})</span></h1>
<ul>
<li :class="{'mydone':task.completed,'nodone':!task.completed }"
v-for="task in list"
@click = "toggleclick(task)">{{task.body}}
<strong @click="deleteTask(task)">点我删除</strong>
</li>
</ul>
</template>
</div>
<script>
Vue.component('mytask',{
template: '#mytask-model',
props: ['list'],
methods: {
toggleclick:function(task){
task.completed = !task.completed;
},
deleteTask:function(task){
this.list.$remove(task);
}
},
computed:{
remaining:function(){
return this.list.filter(function(task){
return ! task.completed;
}).length;
}
}
});
new Vue({
el: '#app',
data: {
tasks:[
{body:'sleeping',completed:false},
{body:'shopping',completed:true},
{body:'swimming',completed:true},
{body:'running',completed:false}
]
}
});
</script>
</body>
</html>
（9）jquery 、ajax 和vue的结合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue js - Michellya</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
p{color:#f00;}
.mydone{text-decoration:line-through;}
.nodone{color:coral;}
</style>
</head>
<body>
<div id="app">
<mytask>{{ $task }}</mytask>
<!--组件化：将每日任务变成组件list-->
<template id="mytask-model">
<h1>My Task <span v-show="remaining">({{ remaining}})</span></h1>
<ul>
<li :class="{'mydone':task.completed,'nodone':!task.completed }"
v-for="task in list"
@click = "toggleclick(task)">@{{task.body}}
<strong @click="deleteTask(task)">点我删除</strong>
</li>
</ul>
</template>
</div>
<script src="http://vuejs.org.cn/js/vue.js"></script>
<script src="http://file2.ci123.com/ast/js/jquery_172.js"></script>
<script>
Vue.component('mytask',{
template: '#mytask-model',
//创建一个空list数组
data:function(){
return {
list:[]
}
},
methods: {
toggleclick:function(task){
task.completed = !task.completed;
},
deleteTask:function(task){
this.list.$remove(task);
}
},
computed:{
remaining:function(){
return this.list.filter(function(task){
return ! task.completed;
}).length;
}
},
create:function(){
$.getJSON('api/...',function(data){
this.list = data;
})
}
});
new Vue({
el: '#app'
}
});
</script>
</body>
</html>
（10）vue-resource插件的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue js - Michellya</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
p{color:#f00;}
.mydone{text-decoration:line-through;}
.nodone{color:coral;}
</style>
</head>
<body>
<div id="app">
<mytask></mytask>
<!--组件化：将每日任务变成组件list-->
<template id="mytask-model">
<h1>My Task <span v-show="remaining">({{ remaining}})</span></h1>
<ul>
<li :class="{'mydone':task.completed,'nodone':!task.completed }"
v-for="task in list"
@click = "toggleclick(task)">@{{task.body}}
<strong @click="deleteTask(task)">点我删除</strong>
</li>
</ul>
</template>
</div>
<script src="http://vuejs.org.cn/js/vue.js"></script>
<script src="https://github.com/vuejs/vue-resource"></script>
<script>
Vue.component('mytask',{
template: '#mytask-model',
data:function(){
return {
list:[]
}
},
methods: {
toggleclick:function(task){
task.completed = !task.completed;
},
deleteTask:function(task){
this.list.$remove(task);
}
},
computed:{
remaining:function(){
return this.list.filter(function(task){
return ! task.completed;
}).length;
}
},
create:function(){
this.$http.get('api/...',function(){
})
}
});
new Vue({
el: '#app',
});
</script>
</body>
</html>
9.强荐浏览器插件：vue-devtools
作用、操作及下载：http://www.cnplugins.com/devtool/vuejs-devtools/
插件：
界面：
一、简介
JSON：JavaScript 对象表示法
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON的媒体类型被定义为 application/json，而文件的后缀为.json。
二、应用
JSON的应用
1、接口
2、微信开发
XML的应用
1、我们一般用于sitemap较多
2、xmlrpc是使用http协议做为传输协议的rpc机制，使用xml文本的方式传输命令和数据。
备注：json和XML可以互转
和JavaScript
一、JSON - 转换为 JavaScript 对象
1、能够使用内建的 JavaScript eval(string)方法进行解析
原因：JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
ajax返回的是字符串，而不是json对象。
data = eval('('+data+')');
二、实例
var JSONObject=
{
"name":"Bill Gates", "street":"Fifth Avenue New York 666", "age":56, "phone":"555 1234567"
};
JSONObject.name //调用
三、语法规则
数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
值/对象/数组
四、方法
1、JSON.parse()
parse用于从一个字符串中解析出json对象
例子：
var str = '{"name":"huangxiaojian","age":"23"}'
结果：
JSON.parse(str)
Object
age: "23"
name: "huangxiaojian"
proto: Object
2、JSON.stringify()
stringify()用于从一个对象解析出字符串
例子：
var a = {a:1,b:2}
结果：
JSON.stringify(a)
"{"a":1,"b":2}"
五、错误提示
1、
data不是正确的json格式，造成解析出错
2、
var a=JSON.parse('{"a":"aaaaa"}');//正确
var a=JSON.parse("{'a':'aaaaa'}");//错误
3、 Uncaught TypeError: Cannot use 'in' operator to search for '' in JSON string
解决方案：JSON字符串转换为JavaScript对象。
要修复它，通过标准JSON.parse()或jQuery 的 $.parseJSON 将其转换为JavaScript对象。
4、
var a = { };
var b = { a: a };
a.b = b;
JSON.stringify(a);
参考：https://segmentfault.com/a/1190000002532027
php中的json
一、注意点
1、json_last_error：返回最后发生的错误
2、json_decode 当第二个参数为 TRUE 时，将返回 array 而非 object 。
3、由于json只接受utf-8编码的字符，所以json_encode()的参数必须是utf-8编码，否则会得到空字符或者null。
4、PHP支持两种数组，一种是只保存"值"（value）的索引数组（indexed array），另一种是保存"名值对"（name/value）的关联数组（associative array）。
由于javascript不支持关联数组，所以json_encode()只将索引数组（indexed array）转为数组格式，而将关联数组（associative array）转为对象格式。
$arr = array('one', 'two', 'three');
echo json_encode($arr); //["one","two","three"]
$arr = array('1'=>'one', '2'=>'two', '3'=>'three');
echo json_encode($arr); // {"1":"one","2":"two","3":"three"}
数据格式从"[]"（数组）变成了"{}"（对象）。
如果你需要将"索引数组"强制转化成"对象"，可以这样写
echo json_encode(（object）$arr);
echo json_encode($arr,JSON_FORCE_OBJECT )
5、类的转换
{
"public_ex": "this is public"
}
除了公开变量（public），其他东西（常量、私有变量、方法等等）都遗失了。
二、错误
$json = "{ 'bar': 'baz' }"; //分割符只能用单引号
$json = '{ bar: "baz" }';
$json = '{ "bar": "baz", }';
二、中文编码的问题
1、
function getJson($data){
if(version_compare('5.4',PHP_VERSION,'<')){
//5.4以上
return json_encode($data,JSON_UNESCAPED_UNICODE);
}else{
return urldecode(json_encode(url_encode($data)));
}
}
数据存的json格式，如果数据库存的是array
eval("\$session= $str;");
三、json格式的问题
微信放的json解析不了：
去除反斜杠 StripSlashes
其他补充：
json的校验
一个文本文档或字符串必须遵守JSON的语法定义，才能被视作一个有效的JSON文档。
http://www.jsonlint.com/
补充：
用 JSON 构建 API 的标准指南中文版
http://jsonapi.org.cn/
前提更要：从初来乍到，到熟悉业务核心代码。总有一天我们要去更改或者升级核心内容，对于逻辑复杂业务繁多的功能模块或者是流程，如何能够完成更改或者升级，且避免bug的出现，保正新旧业务流程能够正常使用。
目录
bug来源与如何避免
目录
一、修复现有的bug
二、首次开发新项目
三、二次开发
栗子：
优惠券使用经历4次bug修改
满减赠的二次开发：增加N元任,选前台购买涉及到分摊优惠，对分摊优惠进行重新整理（在尽量不改的原有的其他功能的逻辑的基础上，对代码整合个更改，便于可读和后期的再次开发）
抢购超卖的问bug，库存不足，则返回生成订单失败
一、修复现有的bug
步骤：bug怎么产生的 -> 快速定位 -> 熟悉代码 -> 改bug ->测试bug
开发前须知：
1.1 bug是如何提出来源：用户、不正常的数据、运营、开发人员操作
1.2 快速定位：（apache的错误日志、重现操作、数据库错误数据）
1.3 熟悉原有的代码逻辑，清楚了解如何更改现有的代码
开发后测试
2.1 该bug是否对原有的逻辑流程或者数据造成影响（较难，主要是细心）
2.2 除了此bug外，造成bug的因素是否还存在一定的潜在影响
2.2 改完后，会不会导致其他的功能不能正常使用，（必须测试）
例子一：优惠券分摊不均衡，10元优惠券分摊到两个价格相同的商品上，分摊金额是2.5 ：7.5 应该是 5：5
例子二：检查订单是否能使用某张优惠券，以用户已经领取到的优惠券为判断依据
coupon，user_coupon
ps:优惠券使用经历4次bug修改
二、首次开发新项目
开发前须知
1.1 熟悉需要开发的内容
1.2 列需求文档、api接口
开发后测试
2.1 测试各个接口
2.2 所有需要走的逻辑流程是否正确
优点：对开发内容和功能了如指掌，确保接口程序无误即可
缺陷：初次开发，考虑简单需求，虽尽可能完善，但仍会有某些功能忽略掉，后期会进行二次开发
三、二次开发
难点：必须熟悉项目整理流程
开发前须知：
1.1 熟练掌握现有的功能和代码逻辑
1.2 了解二次开发目的和内容
1.3 清楚二次开发的程序如何写，且尽可能不影响原有的功能（是在原有的基础上扩充还是另写，或者合并）
开发后测试
2.1 局部测试：新增的功能是否能正常使用，所更改的代码是否对原有的逻辑造成影响
2.2 全局测试：对原有的功能进行测试，
缺点：对原有的功能块和程序逻辑不熟悉；若代码逻辑负责，业务繁琐，修改很容易出错；因新增加功能，对代码进行整合，也很容易出问题
注意：逻辑过于复杂的话，测试时不可能每种情况都测试到，所以需要自己审核代码
grep命令：文本搜索
命令格式 ： grep [options] pattern files
pattern 即 匹配的条件
[options]主要参数：
－c：只输出匹配行的计数。
－i：不区分字符大小写。默认区分大小写
－h：查询多文件时不显示文件名，显示文件的内容。
－l：查询多文件时只输出包含匹配字符的文件名。
－L：列出不匹配的文件名，
－n：显示匹配行及行号。
－s：不显示不存在或无匹配文本的错误信息。
－v：显示不包含匹配文本的所有行。
pattern正则表达式主要参数：
\： 忽略正则表达式中特殊字符的原有含义。
^：匹配正则表达式的开始行。
$: 匹配正则表达式的结束行。
\<：从匹配正则表达 式的行开始。
>：到匹配正则表达式的行结束。
[ ]：单个字符，如[A]即A符合要求 。
[ - ]：范围，如[A-Z]，即A、B、C一直到Z都符合要求 。
。：所有的单个字符。
* ：有字符，长度可以为0。
files 即 匹配的文件地址 获取当前目录的地址可以使用 ./，也可以使用绝对地址/opt/.....
一些有意思的匹配：
grep -w pattern files ：只匹配整个单词，而不是字符串的一部分(如匹配’magic’，而不是’magical’)，
grep -C number pattern files ：匹配的上下文分别显示[number]行，
grep pattern1 | pattern2 files ：显示匹配 pattern1 或 pattern2 的行，
grep pattern1 files | grep pattern2 ：显示既匹配 pattern1 又匹配 pattern2 的行。
find命令：文件搜索
命令格式：find pathname -options [-print -exec -ok ...]
参数：
pathname: find命令所查找的目录路径。例如用.来表示当前目录，也可以使用绝对地址
-print： find命令将匹配的文件输出到标准输出。
-exec： find命令对匹配的文件执行该参数所给出的shell命令。相应命令的形式为'command' { } ;，注意{ }和；之间的空格。
-ok： 和-exec的作用相同，只不过以一种更为安全的模式来执行该参数所给出的shell命令，在执行每一个命令之前，都会给出提示，让用户来确定是否执行。
使用print将参数输出到下一条命令，使用exec或ok来执行shell命令
[options]一些常用的命令选项：
-name 按照文件名查找文件。
-perm 按照文件权限来查找文件。
-prune 使用这一选项可以使find命令不在当前指定的目录中查找，如果同时使用-depth选项，那么-prune将被find命令忽略。
-user 按照文件属主来查找文件。
-group 按照文件所属的组来查找文件。
-mtime -n +n 按照文件的更改时间来查找文件， - n表示文件更改时间距现在n天以内，+ n表示文件更改时间距现在n天以前。find命令还有-atime和-ctime 选项，但它们都和-m time选项。
-nogroup 查找无有效所属组的文件，即该文件所属的组在/etc/groups中不存在。
-nouser 查找无有效属主的文件，即该文件的属主在/etc/passwd中不存在。
-newer file1 ! file2 查找更改时间比文件file1新但比文件file2旧的文件。
-type 查找某一类型的文件，诸如：
b - 块设备文件。
d - 目录。
c - 字符设备文件。
p - 管道文件。
l - 符号链接文件。
f - 普通文件。
-size n：[c] 查找文件长度为n块的文件，带有c时表示文件长度以字节计。-depth：在查找文件时，首先查找当前目录中的文件，然后再在其子目录中查找。
-fstype：查找位于某一类型文件系统中的文件，这些文件系统类型通常可以在配置文件/etc/fstab中找到，该配置文件中包含了本系统中有关文件系统的信息。
-mount：在查找文件时不跨越文件系统mount点。
-follow：如果find命令遇到符号链接文件，就跟踪至链接所指向的文件。
-cpio：对匹配的文件使用cpio命令，将这些文件备份到磁带设备中。
另外,下面三个的区别:
-amin n 查找系统中最后N分钟访问的文件
-atime n 查找系统中最后n24小时访问的文件
-cmin n 查找系统中最后N分钟被改变文件状态的文件
-ctime n 查找系统中最后n24小时被改变文件状态的文件
-mmin n 查找系统中最后N分钟被改变文件数据的文件
-mtime n 查找系统中最后n*24小时被改变文件数据的文件
find命令实例：
1.在当前目录及子目录中，查找大写字母开头的txt文件
find . -name '[A-Z]*.php' -print
2.在当前及其子目录中，查找test开头的文件
find . -name 'test*' -print
3.在当前目录及子目录中，查找不是out开头的php文件
find . -name "out" -prune -o -name ".php" -print
4.查找2天内被更改过的文件
find . -mtime -2 -type f -print
5.查找超过1M的文件
find . -size +1M -type f -print
6.用grep命令在当前目录下的所有普通文件中搜索hostnames这个词
find . -name * -type f -print | xargs grep "host"
7.删除指定目录下带有“我是”的文件
find ./* - name "*.php" -print | xargs grep -l "我是" | xargs rm -rf
小程序入门教程及实例
为什么需要小程序？？？
一般情况下我们不会选择卸载低频应用，因为需要以备不时之需，无形之中造成存储空
间的浪费。现在，用户可以将部分低频应用删掉，然后用小程序取而代之。
想必大家都关心微信新推出的应用号的最终形态到底是什么样子？怎样将一个“服务
号”改造成为“小程序”？
开发环境
1、下载和安装
2、参考
目录结构
一个小程序由两部分组成：框架主体部分、框架页面部分
1、框架主体部分包含3个文件：app.js app.json app.wxss（样式表）
app.js （脚本文件）
内调用了 App 函数， 用来注册小程序实例， 可以在这个文件中监听处理小程序的声明周期函数，并可以在此声明全局变量。小程序提供了全局方法getApp()方法返回小程序实例。此外，还提供了getCurrentPage获取当前页面的实例。
app.json （配置文件）
用来对小程序进行全局配置 我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。
App.wxss （样式表文件）
Window 设置页面窗口表现
tabBar 设置页面底部tab表现，其中list数组长度不 超过5且至少为2
networkTimeout 设置网络超时时间
Debug 设置debug模式的开启
微信小程序会读取这些文件，生成一个小程序实例
2、框架页面部分：index页面 和 logs页面，即欢迎页和小程序启动日志的展示页
每一个页面是由同路径下同名的4个不同后缀文件组成，如：index.js、index.wxml、index.wxss、index.json。分别是脚本、配置、样式、页面结构文件。
WXML组件
小程序中并没有html 标签，而是提供了一系列 WXML 组件，目前小程序并没有提供
自定义组件的动能
View 视图容器
Input input
Button button
Text text
Checkbox 多选项目
数据绑定
数据绑定采用 “Mustache” 语法（双大括号）包裹变量
WXML 中的动态数据均来自对应Page 的data，并且需要调用 setData 方法通知视图数
据变化
深入了解
流程： App Launch-->App Show-->onload-->onShow-->onReady
一、一些基础的东西
shell脚本分为很多种，我们使用的比较多的是Bourne Shell（/usr/bin/sh或/bin/sh）和Bourne Again Shell（/bin/bash）。在一般情况下，并不区分Bourne Shelll和Bourne Again Shell。所以使用/bin/sh和/bin/bash都可以。
1、编写shell脚本有一个固定的格式，如下：
#！/bin/sh
符号#!用来告诉系统，后面的参数是用来执行该文件的程序。
2、执行shell脚本
比较常用的两种方法：
（1）使用bash 和 sh 执行
（2）在当前目录下，改变文件属性改为可执行，然后直接运行该文件。
chmod +x filename.sh
./filename.sh
3、注释
以#开头的句子表示注释。
4、变量
（1）在shell编程中，所有的变量都由字符串组成，并且不需要对变量进行声明。
（2）变量的命名规范同其他语言基本一样。
（3）定义变量。例如：your_name="chenjia"。
注意：等号与变量之间不能有空格。
（4）使用变量。只需要在变量名前家美元符号即可，例如：
echo $your_name 或者 echo ${your_name}。
（5）只读变量。顾名思义就是给使变量只能显示出来，不能赋值。在定义变量之后使用 readonly命令就可以将变量定义为只读变量。例如：
your_name="chenjia"
readonly your_name
（6）删除变量。使用unset命令。ps：unset命令不能删除只读变量
unset your_name
5、shell字符串
（1）单引号和双引号字符串，用法同php类似。
（2）拼接字符串
your_name="qinjx"
greeting="hello, "$your_name" !"
greeting_1="hello, ${your_name} !"
echo $greeting $greeting_1
（3）获取字符串长度
echo ${#your_name}
（4）提取子字符串
echo ${your_name:1:4}
二、shell数组
bash shell 只支持一维数组，初始化时不需要定义数组大小（同php类似）。
1、格式
array_name=(value1 value2 …… valuen)
数组用括号括起来表示，每个元素之间用“空格”分割开。
2、数组赋值
有两种方式：
第一种：array_name=("A" "B" "C" "D")
第二种：array_name[0]=A
array_name[1]=B
array_name[2]=C
array_name[3]=D
3、读取数组
echo ${array_name[index]}
4、获取数组中所有元素
echo ${array_name[]} 或者 echo ${array_name[@]}
5、获取数组长度
echo ${#array_name[]} 或者 echo ${#array_name[@]}
三、运算符
1、算数运算符
运算符 说明 举例
+ 加法 expr $a + $b 结果为 30。
- 减法 expr $a - $b 结果为 -10。
* 乘法 expr $a \* $b 结果为 200。
/ 除法 expr $b / $a 结果为 2。
% 取余 expr $b % $a 结果为 0。
= 赋值 a=$b 将把变量 b 的值赋给 a。
== 相等。用于比较两个数字，相同则返回 true。 [ $a == $b ] 返回 false。
!= 不相等。用于比较两个数字，不相同则返回 true。 [ $a != $b ] 返回 true。
2、关系运算符
运算符 说明 举例
-eq 检测两个数是否相等，相等返回 true。 [ $a -eq $b ] 返回 false。
-ne 检测两个数是否相等，不相等返回 true。 [ $a -ne $b ] 返回 true。
-gt 检测左边的数是否大于右边的，如果是，则返回 true。 [ $a -gt $b ] 返回 false。
-lt 检测左边的数是否小于右边的，如果是，则返回 true。 [ $a -lt $b ] 返回 true。
-ge 检测左边的数是否大于等于右边的，如果是，则返回 true。 [ $a -ge $b ] 返回 false。
-le 检测左边的数是否小于等于右边的，如果是，则返回 true。 [ $a -le $b ] 返回 true。
3、布尔运算符
运算符 说明 举例
! 非运算，表达式为 true 则返回 false，否则返回 true。 [ ! false ] 返回 true。
-o 或运算，有一个表达式为 true 则返回 true。 [ $a -lt 20 -o $b -gt 100 ] 返回 true。
-a 与运算，两个表达式都为 true 才返回 true。 [ $a -lt 20 -a $b -gt 100 ] 返回 false。
4、逻辑运算符
运算符 说明 举例
&& 逻辑的 AND [[ $a -lt 100 && $b -gt 100 ]] 返回 false
|| 逻辑的 OR [[ $a -lt 100 || $b -gt 100 ]] 返回 true
5、字符串运算符
运算符 说明 举例
= 检测两个字符串是否相等，相等返回 true。 [ $a = $b ] 返回 false。
!= 检测两个字符串是否相等，不相等返回 true。 [ $a != $b ] 返回 true。
-z 检测字符串长度是否为0，为0返回 true。 [ -z $a ] 返回 false。
-n 检测字符串长度是否为0，不为0返回 true。 [ -n $a ] 返回 true。
str 检测字符串是否为空，不为空返回 true。 [ $a ] 返回 true。
6、文件测试运算符
操作符 说明 举例
-b file 检测文件是否是块设备文件，如果是，则返回 true。 [ -b $file ] 返回 false。
-c file 检测文件是否是字符设备文件，如果是，则返回 true。 [ -c $file ] 返回 false。
-d file 检测文件是否是目录，如果是，则返回 true。 [ -d $file ] 返回 false。
-f file 检测文件是否是普通文件（既不是目录，也不是设备文件），如果是，则返回 true。 [ -f $file ] 返回 true。
-g file 检测文件是否设置了 SGID 位，如果是，则返回 true。 [ -g $file ] 返回 false。
-k file 检测文件是否设置了粘着位(Sticky Bit)，如果是，则返回 true。 [ -k $file ] 返回 false。
-p file 检测文件是否是有名管道，如果是，则返回 true。 [ -p $file ] 返回 false。
-u file 检测文件是否设置了 SUID 位，如果是，则返回 true。 [ -u $file ] 返回 false。
-r file 检测文件是否可读，如果是，则返回 true。 [ -r $file ] 返回 true。
-w file 检测文件是否可写，如果是，则返回 true。 [ -w $file ] 返回 true。
-x file 检测文件是否可执行，如果是，则返回 true。 [ -x $file ] 返回 true。
-s file 检测文件是否为空（文件大小是否大于0），不为空返回 true。 [ -s $file ] 返回 true。
-e file 检测文件（包括目录）是否存在，如果是，则返回 true。 [ -e $file ] 返回 true。
总结：（1）数字的加减乘除运算需使用expr或者let，并用反引号括起来。例如：expr $a + $b
（2）等于，不等于。有两种形式：==、!=和-eq、-ne。其中-eq 和-ne是关系运算符，所以不支持字符串，除非字符串的值是数字。
（3）切记，如果要使用<和>，则必须用[[]]括起来，否则无法使用。在linux中，<>表示输入输出重定向。
（4）与，或运算符。分为两种：-a，-o和&&，||。需要注意的是使用上两者有所不同，-a和-o可以使用[]括起来，&&和||必须使用[[]]括起来。
（5）除了定义赋值操作，其他情况运算符与变量之间都需要加空格。
四、流程控制
1、if ……else……
（1）格式
if condition
then
command1
command2
...
commandN
else
command
fi
如果想要将then 与if 也在同一行也是可以的。可以写成这样：
if condition;then
command1
command2
...
commandN
else
command
fi
2、if else-if else
（1）格式
if condition1
then
command1
elif condition2
then
command2
else
commandN
fi
（2）例子
a=10
b=20
if [ $a == $b ]
then
echo "a 等于 b"
elif [ $a -gt $b ]
then
echo "a 大于 b"
elif [ $a -lt $b ]
then
echo "a 小于 b"
else
echo "没有符合的条件"
fi
结果：a 小于 b
3、for 循环
（1）格式
for var in item1 item2 ... itemN
do
command1
command2
...
commandN
done
（2）例子
文件遍历
for i in cat test.txt
do
echo "value: ${i}"
done
数组遍历
arr=('a' 'b' 'c' 'd')
for i in ${arr[*]}
do
echo "value: ${i}"
done
4、while 循环
（1）格式
while condition
do
command
done
（2）例子
int=1
while(( $int<=5 ))
do
echo $int
let "int++"
done
循环遍历文件
while read line
do
echo ${line}
done < test.txt
5、until 循环（至少执行一次）
（1）格式
until condition
do
command
done
6、case
（1）格式
case 值 in
模式1)
command1
command2
...
commandN
;;
模式2）
command1
command2
...
commandN
;;
esac
（2）例子
echo '输入 1 到 4 之间的数字:'
echo '你输入的数字为:'
read aNum
case $aNum in
1) echo '你选择了 1'
;;
2) echo '你选择了 2'
;;
3) echo '你选择了 3'
;;
4) echo '你选择了 4'
;;
*) echo '你没有输入 1 到 4 之间的数字'
;;
esac
7、break 和continue
用两个例子来说明一下break和continue的用法
例子一：
while :
do
echo -n "输入 1 到 5 之间的数字:"
read aNum
case $aNum in
1|2|3|4|5) echo "你输入的数字为 $aNum!"
;;
*) echo "你输入的数字不是 1 到 5 之间的! 游戏结束"
break
;;
esac
done
例子二：
while :
do
echo -n "输入 1 到 5 之间的数字: "
read aNum
case $aNum in
1|2|3|4|5) echo "你输入的数字为 $aNum!"
beak
;;
*) echo "你输入的数字不是 1 到 5 之间的!"
continue
echo "游戏结束"
;;
esac
done
五、函数
linux shell 可以用户定义函数，然后在shell脚本中可以随便调用。
（1）格式
[ function ] funname ()
{
内容
[return int;]
}
1、可以带function fun() 定义，也可以直接fun() 定义,不带任何参数。
2、参数返回，可以显示加：return 返回，如果不加，将以最后一条命令运行结果，作为返回值。 return后跟数值n(0-255
（2）例子
例子一：
demoFun(){
echo "这是我的第一个 shell 函数!"
return '1'; #返回值只能是数值或者是字符串的值是数字
}
echo "-----函数开始执行-----"
demoFun
echo "${?}" #函数返回值在调用该函数后通过 $? 来获得
echo "-----函数执行完毕-----"
结果：
-----函数开始执行-----
这是我的第一个 shell 函数!
1
-----函数执行完毕-----
例子二：
funWithParam(){
echo "第一个参数为 $1 !"
echo "第二个参数为 $2 !"
echo "第十个参数为 $10 !"
echo "第十个参数为 ${10} !"
echo "第十一个参数为 ${11} !"
echo "参数总数有 $# 个!"
echo "作为一个字符串输出所有参数 $* !"
}
funWithParam 1 'b' 3 4 5 6 7 8 9 34 73
结果：
第一个参数为 1 !
第二个参数为 b !
第十个参数为 10 !
第十个参数为 34 !
第十一个参数为 73 !
参数总数有 11 个!
作为一个字符串输出所有参数 1 b 3 4 5 6 7 8 9 34 73 !
最后，分享一张特殊参数处理参数的表
参数处理 说明
$# 传递到脚本的参数个数
$* 以一个单字符串显示所有向脚本传递的参数
$$ 脚本运行的当前进程ID号
$! 后台运行的最后一个进程的ID号
$@ 与$*相同，但是使用时加引号，并在引号中返回每个参数。
$- 显示Shell使用的当前选项，与set命令功能相同。
$? 显示最后命令的退出状态。0表示没有错误，其他任何值表明有错误。
六、总结
1、空格那些事 http://www.jb51.net/article/60328.htm
（1）等号赋值两边不能有空格 例如：your_name="chenjia"
（2）取变量值的符号'$'和后边的变量或括号不能有空格 例如：${your_name}
（3）命令与参数或者对象之间必须有空格
（4）if 语句后面的 []，[左右两边都必须有空格，]（尾巴）左边必须有空格。[ 等价于 test命令，所以两边都需要加空格。
（5）管道符两边的空格可有可无 例如 find . -name "*.php"|xargs grep 'some'
2、(())、[[]]、[]
（1）(())是算数及赋值运算的扩展
[[]]是关键字
[]是命令
（2）使用 (( )) 时，不需要空格分隔各值和运算符，使用 [[ ]] 时需要用空格分隔各值和运算符。
（3）数字的运算可使用(( )) ，其中运算时不需要变量$符号
（4）[[ ... ]]进行算术扩展，而[ ... ]不做
（5）用[[ ... ]]测试结构比用[ ... ]更能防止脚本里的许多逻辑错误。比如说，&&,||,<和>操作符能在一个[[]]测试里通过，但在[]结构会发生错误。
（6）[ ... ]为shell命令，所以在其中的表达式应是它的命令行参数，所以串比较操作符">" 与"<"必须转义，否则就变成重定向操作。
（7）数字的比较最好使用 (( ))，虽说可以使用 [[ ]]，但若在其内使用运算符 >、>=、<、<=、==、!= 时，其结果经常是错误的，不过若在 [[ ]] 中使用 [ ] 中的运算符“-eq、-ne、-le、-lt、-gt、-ge”等，还尚未发现有错。
例：[[ "a" != "b" && 10 > 2 ]] 判断结果就不正常。
基础版，未考虑性能优化而做出的改变
sql执行顺序
(1)from
(2) on
(3) join
(4) where
(5)group by
(6) avg,sum....
(7)having
(8) select
(9) distinct
(10) order by
整个流程
from子句中的前两个表执行一个笛卡尔乘积，此时生成虚拟表table_1
Table A Table B
ID ID
1 3
2 4
笛卡尔乘积后:
AID BID
1 3
1 4
2 3
2 4
on中的逻辑表达式将应用到 vt1 中的各个行，筛选出满足on逻辑表达式的行，生成虚拟表 table_2
根据join语句中多个表之间字段的联系,生成一个新的表table_3
几种用法：
INNER JOIN（内连接,或等值连接）：取得两个表中存在连接匹配关系的记录。
LEFT JOIN（左连接）：取得左表（table1）完全记录，即是右表（table2）并无对应匹配记录。
RIGHT JOIN（右连接）：与 LEFT JOIN 相反，取得右表（table2）完全记录，即是左表（table1）并无匹配对应记录。
Table A Table B
ID Name ID Name
1 aa 1 bb
2 bb 2 cc
3 cc 3 dd
4 dd 4 ee
inner join: select * from A inner join B on A.name = B.name;
ID Name ID Name
2 bb 1 bb
3 cc 2 cc
4 dd 3 dd
left join: select * from A left join B on A.name = B.name;
ID Name ID Name
1 aa Null Null
2 bb 1 bb
3 cc 2 cc
4 dd 3 dd
right join: select * from A right join B on A.name = B.name;
ID Name ID Name
2 bb 1 bb
3 cc 2 cc
4 dd 3 dd
Null Null 4 ee
from子句中的表数目多余两个表，那么就将table_3和第三个表连接从而计算笛卡尔乘积，生成虚拟表，该过程就是一个重复1-3的步骤，最终得到一个新的虚拟表 table_3。
上一步生产的虚拟表引用where筛选器，生成虚拟表table_4
在含有join操作时：on和where的一点区别：
现有两张表A和B：都只有一个字段ID，A数据有4，B的数据有3个
Table A Table B
ID ID
1 1
2 2
3 3
4
1 select A.ID as AID, B.ID as BID from A left join B ON A.ID = B.ID WHERE B.ID<3
AID BID
1 1
2 2
2 select A.ID as AID, B.ID as BID from A left join B ON A.ID = B.ID AND B.ID<3
AID BID
1 1
2 2
3 Null
4 Null
原因： 优先级： on > left join > where
第一条语句的顺序：
a)执行leftjoin A left join B结果：
AID BID
1 1
2 2
3 Null
4 Null
b)执行where B.ID < 2结果： AID BID 1 1 2 2 第二条语句的顺序： a)先执行 A.ID = B.ID and B.ID < 2，得到结果 ID 1 2 b)再执行left join，得到结果 AID BID 1 1 2 2 3 Null 4 Null
group by 子句将中的唯一的值组合成为一组，得到虚拟表table_5。
根据“By”指定的规则对数据进行分组，所谓的分组就是将一个“数据集”划分成若干个“小区域”，然后针对若干个“小区域”进行数据处理。
Table A
ID Level
1 A
2 A
3 B
4 B
5 B
6 B
7 C
Select count(ID) as Num ,Level from table group by Level
table
Num Level
2 A
4 B
1 C
应用having筛选器，生成table_6。having筛选器是第一个也是为唯一一个应用到已分组数据的筛选器。
如在6中针对筛选的结果需要进行Num>2的筛选：只能通过having，而不能通过where
Where的执行在group by之前，不能够针对group 不要生成的table进行操作，因此，需要对group by后生成的table进行操作可以使用having对数据进行筛选
处理select子句。将table_6中的在select中出现的列筛选出来。生成table_7
注意：由此可以看出，select是在from之后被执行的，所以在select中使用的别名在where中是不可以被使用的。
应用distinct子句，table_7中移除相同的行，生成table_8。事实上如果应用了group by子句那么distinct是多余的，
原因同样在于，分组的时候是将列中唯一的值分成一组，同时只为每一组返回一行记录，那么所以的记录都将是不相同的。
应用order by子句。按照order by 的条件去排序table_8
整 理：晋 哲 时 间：2016-11-15 说 明：整理后台常用到的Bootstrap元素结构，便于规范运用
本地示例：http://192.168.0.100/BootstrapDemo.html
1、标题及下面的按钮
想要上下元素有间距，使用【form-group】父类包裹起来
<div class="form-group">
<h3>标题文字</h3>
</div>
<div class="form-group">
<button class="btn btn-success">新增模版</button>
</div>
2、功能按钮，分别对应【primary、success、info、danger、warning、default】
<button class="btn btn-primary">保存/提交/确认</button> <button class="btn btn-success">添加/新建/通过</button> <button class="btn btn-info">信息/详情/查看数据</button> <button class="btn btn-danger">删除</button> <button class="btn btn-warning">修改/审核/警告</button> <button class="btn btn-default">默认/普通</button>
元素右对齐，使用【pull-right】
<div class="form-group">
<button class="btn btn-success">新增模版</button>
<button class="btn btn-primary pull-right">保存</button>
</div>
3、用于表单中的文字按钮
<button class="btn btn-link">编辑</button> <button class="btn btn-link">删除</button> <a class="btn btn-link btn-sm" href="#">编辑</a> <a class="btn btn-link btn-sm" href="#">删除</a> <a class="btn btn-link btn-xs" href="#">编辑</a> <a class="btn btn-link btn-xs" href="#">删除</a>
4、内页分类标题
<div class="breadcrumb">1、类目选择</div> <div class="breadcrumb">2、基本信息</div> <div class="breadcrumb">3、商品规格</div>
如果想要调整字体大小，可以改动<div>标签，使用标签<h3>、<h4>
<h3 class="breadcrumb">1、类目选择</h3> <h4 class="breadcrumb">1、类目选择</h4>
5、表单，使用【form-horizontal】包裹起来
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">用户名：</label>
<div class="col-sm-5"><input type="text" class="form-control"></div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码：</label>
<div class="col-sm-5"><input type="text" class="form-control"></div>
</div>
</div>
如果没有label标题，又需要表单对齐的，使用【col-sm-offset-*】
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<button class="btn btn-primary">保存</button>
</div>
</div>
6、水平排列的表单，使用【form-inline、radio-inline、checkbox-inline】
<div class="form-horizontal">
<div class="form-group form-inline">
<label class="col-sm-2 control-label">有效期：</label>
<input type="text" class="form-control"> 至 <input type="text" class="form-control">
</div>
<div class="form-group">
<label class="col-sm-2 control-label">单项选择：</label>
<label class="radio-inline"><input type="radio" name="option1" value="选项一"> 选项一</label>
<label class="radio-inline"><input type="radio" name="option1" value="选项二"> 选项二</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">多选选择：</label>
<label class="checkbox-inline"><input type="checkbox" value="选项一"> 选项一</label>
<label class="checkbox-inline"><input type="checkbox" value="选项二"> 选项二</label>
</div>
</div>
7、多列展示，使用栅格样式
<div class="form-horizontal">
<div class="form-group">
<div class="form-group col-sm-4">
<label class="col-sm-4 control-label">多列设置：</label>
<div class="col-sm-8"><input type="text" class="form-control"></div>
</div>
<div class="form-group col-sm-4">
<label class="col-sm-4 control-label">多列设置：</label>
<div class="col-sm-8"><input type="text" class="form-control"></div>
</div>
<div class="form-group col-sm-4">
<label class="col-sm-4 control-label">多列设置：</label>
<div class="col-sm-8"><input type="text" class="form-control"></div>
</div>
</div>
</div>
8、分页
<nav>
<ul class="pagination">
<li><a href="#"><span>上一页</span></a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><span>下一页</span></a></li>
</ul>
</nav>
9、开关控件
<!-- 引入开关控件CSS -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css">
<!-- 开关控件HTML -->
<div class="switch" data-on="primary" data-off="info">
<input type="checkbox" name="is_on" data-on-text="开启" data-off-text="关闭" checked />
</div>
<!-- 引入开关控件JS -->
<script src="http://cdn.bootcss.com/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>
<script>
$(function() {
$('input[name="is_on"]').bootstrapSwitch();
$('input[name="is_on"]').on('switchChange.bootstrapSwitch', function(event, state) {
console.log(state);
});
})
</script>
10、模态框
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击弹出模态框</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">标题</h4>
</div>
<div class="modal-body">
显示内容
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
11、表格
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>