PHP部分常用函数

1.数组操作

1
2
3
4
5
array_push($arr,"函数","表达式");  //向数组中添加两个元素
$b=count($arr);  //输出数组的元素个数
$b=array_unique($arr);  //移除数组中重复的值
$b=implode('|' , $arr);    //使用implode()函数将数组值转换成字符串类型，以“|”隔开，并赋值给变量str
foreach ($bookname as $key=>$value)//循环遍历数组

2.文件操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
echo "<br><br>-----------注意引用文件不存在时的区别----------------<br>";
@include("top.php");
echo "include后仍然输出<br>";
@require("bottom.php");
echo "require后不输出了";
$dirname ="C:\\xampp\\htdocs\\3\\images0222"; 
  /*  \\是否转义字符应用？
      如果写成 C:\xampp\htdocs 是windows文件夹浏览窗口的样子，
	  但是\ 作为文件夹分隔字符解释呢？还是转义字符解释呢？
      如果作为转义字符解释，而\后面没有字符，则产生错误。因此用两个\\,第一个作为转义字符，第二个作为文件夹分隔。
	  如果作为文件夹分隔，则不用转义字符，一个就够用。
	  分别试试：都能成功
	  $dirname ="C:\\Users\\Administrator\\Desktop";
	  $dirname ="C:\Users\Administrator\Desktop";  
	  并且用正斜线 / 也可以,为了和linux应用通用，建议用/的方式
	  $dirname ="C:/Users/Administrator/Desktop";
  */
  
  $dir = opendir($dirname);       //打开目录
   
 while ( $file = readdir($dir))   //读取目录下的文件名
 {
   echo "<li>$file </li>" ;           //输出文件名
 }
 closedir($dir);                 //关闭目录

3.其他函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
$a=rand (1,20);   //定义一个变量a，并赋值1-20的随机数
isset($_POST["txt_username"])//是否设定了括号内的值
unset($a);   //$a=null; 结果相同，意义不一样  //释放变量a
define ("PI",3.14159);    //定义常量PI
date_default_timezone_set("Asia/ShangHai");  //设置时区为上海
$date = date('Y/m/d H:i:s');                  //使用date()函数获取当前系统时间 
checkdate(10,38,2012)//检验日期格式, bool checkdate ( int $month , int $day , int $year )
md5($a,false);     //对字符串变量进行MD5加密，然后输出
function GetBalance($balance,$rice=0.02)//默认参数
var_dump ($a == $b);//输出
eval(codestring) ;检查并执行代码
header("Location:login.php");//前面不能有输出
define("MESSAGE","MESSAGE区分大小写");  //默认区分大小写
echo "大写: ".MESSAGE . "<br/>"; 
echo "大小写混合: ".Message . "<br/>";
define("ACCOUNT","ACCOUNT不区分大小写",true);   //不区分大小写
echo "大写: ".ACCOUNT . "<br/>";
echo "小写: ".account . "<br/>";
echo "大小写混合: ".AcCount . "<br/>";
echo "函数: ".constant("ACCOUNT")."<br/>";
echo defined("Account")  . "<br/>";   //使用defined()函数判断常量是否被定义
echo "变量a是否为整型：". is_int($a) . "<br/>";
 echo "变量a是否为布尔型：". is_bool($a) . "<br/>";
 echo "变量b是否为布尔型：". is_bool($b) . "<br/>";
 echo "变量c是否为字符串型：". is_string($c) . "<br/>";
echo "变量d是否为整型：". is_int($d) . "<br/>";

4.超级全局变量:

1
2
3
4
5
6
7
<?php
echo "当前操作系统为：". PHP_OS;
echo "<br/>当前PHP版本为：". PHP_VERSION;
echo "<br/>当前文件路径为：". __FILE__ ;
echo "<br/>当前行数为：". __LINE__ ;
echo "<br/>当前行数为：". __LINE__ ;
?>

5.其他:

1
2
3
4
5
6
7
8
9
10
11
12
静态变量退出程序时保持值不变，第二次调用程序时沿用上次的值进行重复的操作
$ab=$a & $b;                  //将0010 和 0011 做与操作后为0010，再转换为十进制码2
echo "<br/>变量 a&b的值：". $ab;
$ab=$a | $b;                  //将0010 和 0011 做或操作后为0011，再转换为十进制码3
echo "<br/>变量a|b的值：". $ab;
$ab=$a ^ $b;                   //将0010 和 0011 做异或操作后为0001，再转换为十进制码1
echo "<br/>变量a^b的值：". $ab;
$ab=~$a;                       //将0010 做非操作后为1101，再转换为十进制码-3
echo "<br/>变量~a的值：". $ab;
echo "$a" ."$b". "<br/>";  //使用双引号输出变量值
echo '$a' .'$b'. '<br/><br/>';  //使用单引号输出变量名

6.php标记风格：

1
2
3
4
5
6
7
8
9
10
11
12
<?php
  echo "这是XML标记风格<br/>";
?>
<?
  echo "这是简短标记风格<br/>";
?>
<script language="php">
   echo "这是脚本标记风格<br/>";
</script>
<%
  echo "这是ASP标记风格<br/>";
%>

7.php 数据类型:

1
2
3
4
5
6
7
$a=3;
$b=3;
if($a=5||$b=5){
	$a++;
	$b++;
}
echo "$a,$b";输出为1,4

php 可用系统关键字作为变量名
变量常数区分大小写，其余不区分

PHP 函数内外的变量名如果相同，则无法区分函数内是否为已创建的变量，则视为
新创建的变量，只有当函数内将此变量用global声明为全局变量才可以对函数外的变量
进行更改

JS基础语法简述

JavaScript是前端工程师用的不能再熟悉的一种脚本语言，主要是用户创建动态网页、与后端交互等。下面是我学习时整理的JavaScript基础语法

1.js基本常识

js命名规范：
1.一定要有意义，尽量用英文单词
2.不要以数字开头，不能使系统的关键字,不能使用运算符
3.注意大小写
大小写：
变量名和函数名 第一个单词 小写以后每个单词 首字母大写
对象 ： 每个单词首字母都要大写
分号：
结构定义语句后不加分号 if for while
功能执行语句一定要加分号 赋值等
变量：
变量声明后是浏览器关闭后才释放的，在没关闭之前可以随时使用

数据类型：
typeof(变量);

1.number (int float double) 注意：计算时还是按整形和浮点型分开使用
2.string (string char)
3.boolean
4.object(object array null) 使用时分别处理
5.undefined 没有声明变量
整数
var a=10;
var a=045;
var a=0Xff;
浮点数不能用等号进行判断
字符串'',""没有区别，所有的转义都可以使用，

2.函数

1.函数的作用 ---决定去不去使用
2.函数的参数 ---决定怎么用
3.返回值     ---决定调用后如何处理

a.函数组成：

1.函数名
2.参数：根据需要使用参数
3.函数体（功能）
4.返回值（可选）
注：函数名不加()时，这个函数名就代表整个函数。函数名可赋值给一个变量，那么这个变量就可以当作这个函数的函数名使用,也可以直接var test=function(){}

b.回调函数（参数中用到了函数）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
例：
	function demo(a,b,fun){
		return a+b+fun(a,b);
	}
	demo(1,2,test);
	function test(x,y){
		return 100+x+y;
	}
	
	也可以:
	demo(1,2,function(x,y){
		return x*y;
	});
	
	
	再者：
	functioin table(start,end,check){
		for(var i=start;i<end;i++){
			if(check(i)){
				document.write(i+'</br>');
			}
		}
	}
	//1.从这个函数中(10,500)取出3的倍数
	//2.从这个函数中(-200,200)取出负数
	table(10,500,function(num){
		if(num%3==0) return true;
		else return false;
	});

c.系统函数
系统函数中的global和window对象可以供程序员使用
escape(charstring)//为字符串进行编码.所有空格、标点、重音符号以及其他非ASCII
字符否用%xx编码代替，其中xx等于表示该字符的十六进制数
unescape(charstring) 与其用法一致但是是解码操作
isNaN(data)判断data是否为不是数字类型（NaN）
eval(codestring) 检查并执行代码

1
2
3
4
5
6
<script>
a="23.45";
var str='var f="'+a+'";if(!isNaN(f)){ var i=parseInt(f);}else{var i=0;}';
eval(str);
alert(1);
</script>

d.函数特性
d-1.js中函数外声明的变量即可看成全局变量
默认参数：

1
2
3
4
5
6
7
8
function test(a,b,c){
	a = a ? a : 1;
	b = b ? b : 2;
	c = c ? c : 3;
	alert(a+"-----"+b+"-----"+c);
}
test();

d-2.如果形参数大于实参数，那么函数内将把所有形参合成一个数组arguments

3.javascript对象

3.1 基本常识
a.基于对象的操作方式（面向对象封装、继承、多态）
b.将相关的操作使用一个对象完成，看作是一个整体
javascript——–php
对象————-类
对象实例 —–对象
c.对象包括：

字符串对象
数学对象
数组
事件对象

d.对象中存的内容：

   d.1、属性（变量）
   d.2、方法（函数）
都是和这个对象相关的

e.使用步骤：
e.1.找到对象
e.2.实例化对象
e.3.操作对象

f.实例对象

f.1对象实例：用'.'进行操作
f.2对象实例.属性 （取值，赋值）
f.3对象实例["属性名"]
f.4对象实例.方法（）；

如Date对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
	var dt=new Date();
	var str="今天是：";
	str += (dt.getYear()+1900)+"年";
	str += (dt.getMonth()+1)+"月";
	str += dt.getDate()+"日 ";
	str += dt.getHours()+":";
	str += dt.getMinutes()+":";
	str += dt.getSeconds()+" ";
	
	var	arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
	str += arr[dt.getDay()];
	document.write(str);
</script>

3.2自定义对象
a.方法一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
	function Play(){
		
	}
	var p = new Play();
	//属性
	p.width=300;
	p.height=200;
	p.num=4;
	p.autotime=3;
	//方法
	p.autoPlay=function(){
		alert("dsfdsfdsfdgf");
	}
	p.test=function(){
		
	}
	
	
	alert(p.width);
	p.autoPlay();
</script>

b.方法二：

1
2
3
4
function Play(){
									=》》》》》》var p = new Object();
	}
	var p = new Play();

c.方法三：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Play(){
	var p = new Object();
	//属性
	p.width=300;
	p.height=200;
	p.num=4;
	p.autotime=3;
	//方法
	p.autoPlay=function(){
		alert("dsfdsfdsfdgf");
		alert(p.num);//this.num,静态方法中无this
	}
	p.test=function(){
		
	}
	return p;
}
var p = new Play();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
	function Play(){
		var p = new Object();
		//属性
		p.width=300;
		p.height=200;
		p.num=4;
		p.autotime=3;
		//方法
		p.autoPlay=function(){
			alert("dsfdsfdsfdgf");
			alert(this.num);
		}
		p.test=function(){
			
		}
		return p;
	}
	
	var p = new Play();
	
	alert(p.width);
	p.autoPlay();
</script>

d.方法四：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//有this就得有对象
	function Play(width,height,num){
		this.width=width;
		this.height=height;
		this.num=num;
		this.autoPlay=function(){
			alert("###########");
		}
		this.test=function(){
			
		}
		return p;
	}
	
	var p = new Play(3000,200,8);
	
	alert(p.width);
	p.autoPlay();
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
遍历属性名(接上)：
	var pro="";
for(pro in p){
	alert(p[pro]);
}
with(对象st){
	所有方法如果不加对象都是st的方法
}
with(document){
	write("<table>");
}

3.3内置对象
a.Function对象：

1
2
3
4
5
<script>
var demo=new Function("x","y","return x+y");
demo=new Function("x","y","return x*y");
alert(demo(3,4));
</script>

b.String对象：

1
2
var str = new String("abcdefg");
var str = "abcdefg";

c.快速声明对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var p=new Object();
p.name="zhangsan";
p.age=10;
p.sex="nan";
/*
	json
	{属性1:值1,属性2:值2,属性3:值3,属性4:值4}
*/
var p={name:"zhangsan",age:10,sex:"nan"};
alert(p.name);
alert(p["age"]);
match()一般用于验证操作
Number对象：
alert(Number.MAX_VALUE);

d.静态对象：不创建对象的情况下直接用对象名访问

e.Math对象：
不要实例化，直接调用
如100以内随机数：

1
2
var num=Math.random()*100;
document.write(num+"<br>");

4.数组

数组的声明与应用
a、数组的作用:只要是批量的数据都需要使用数组声明
b、如何声明数组
4.1.快速声明数组的方法
var 数组名=[元素1,元素2,元素3,元素4];
其中的元素可以为另一个数组.
4.2.使用array对象

1
2
3
4
5
6
7
8
9
10
function MyArray(){
	this.length=arguments.length;
	for(var i=0;i<arguments.length;i++){
		this[i] = arguments[i];
	}
	
	this.sort=function(){}
	this.pop=function(){}
	this.push=function(){}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var arr = new Array("成员","成员","成员n");
var arr = new Array(10);
var arr=[1,5,3,4,2,9,8,7];
arr.sort(function(a,b){//可用此方法对函数进行重写
	if(a>b){
		return -1;
	}
	else if(a == b){
		return 0;
	}
	else{return 1};
});
document.write(arr);
var arr=["aaa","aaaa","aa","b","aaaaaaaa"];
//arr.push("wwww","yyyy");
//arr.pop();
//arr.unshift("hello");
arr.shift();
alert(arr);
alert(arr.length);
reverse();数组反转
join(s);数组转为字符串，'s'为连接符

c、遍历数组

d、数组的处理（内置处理方法）

5.DOM

作用：DOM(Document Object Model)
1.document 文档 HTML/XML文件 即标记语言
2.Object对象(HTML元素 转乘的对象(js对象))
注意：如果使用js操作HTML文档，就需要先将HTML文档中的结构转成js对象
a.操作属性
b.操作内容
5.1.innerText//里面的东西全以文本形式显示 obj.innerText=”brother“，
该属性火狐浏览器不兼容，可用textContent代替，用法相同
使用时可自己写一个方法,用document.all判断是否支持所有方法，即自己写个转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
		if(document.all){
			alert(document.all);
		}
		ffie(a,"wwww");
	alert(ffie(a));
	function ffie(obj,value){
		if(document.all){
			if(typeof(value)=="undefined"){
				return obj.innerText;
			}
			else obj.innerText=value;
		}else{
			if(typeof(value)=="undefined"){
				return obj.textContent;
			}
			else obj.textContent=value;
		}
}

5.2.innerHTML//里面的内容以HTML形式显示
使用时尽量使用innerHTML
5.3.outerText
5.4.outerHTML //3,4都包含自己本身的标签
表单
表单元素取值需要用

1
2
3
4
5
6
	**c.操作样式**
		对象.style.属性="";同时属性需要格式化，即"-"去掉，后面的单词首字母大写
---
		但有些属性无法从内联式样式中获取，此时用另一个属性即可 ， 如width/offsetWidth
---
		操作样式较多时，可添加className，className数量不限;将className清空即取消样式

        var pro="";
    for(pro in a){
        document.write("a."+pro+"="+a["pro"]+"<br>");
    }

可用此方法获取a标签中的所有属性
有了以上三点的操作之前先转成对象

```
转成对象的两种形式:
1.标记名(多个)、id(唯一)、name(多个)
document中的三个方法
var objs=document.getElementsByTagName(“div”);
var obj = document.getElementById(“one”);
var obj = document.getElementsByName(“two”);
2.通过数组获取
document.body;
document.title;
window.frames;

document.all;//所有的标记
document.embeds;//所有动画
document.scripts;//所有js脚本
document.applets;//所有Java脚本
document.forms;//所有图像
document.images;//所有表单
document.anchors;//所有的锚点
document.styleSheets;//所有的样式
document.links;//所有链接

有7种方式访问(02.html)

其各种操作按照对象操作原则，可以无限制的在js中添加属性
Model:
    一、将文档想成一个倒数，每一个部分（元素、内容、属性、注释）都是一个节点
    二、只要知道一个节点，按关系找到其他节点，
        父节点，                    parentNode
        子节点（第一个，最后一个）  childNode  firstNode  lastNode
        同胞节点 （上一个，下一个） nextSibling previousSibling
    三、找到节点：节点类型nodeType，节点名nodeName，节点值nodeValue
    nodeName属性含有节点的名称
    元素节点的nodeName是标签名称
    属性节点的nodeName是属性名称
    文本节点的nodeName是#text
    文档节点的nodeName永远是#document
注释：nodeName所包含的XML元素的标签名称永远是大写的
    对于文本节点，nodeValue属性包含文本
    对于属性节点，nodeValue属性包含属性值
    nodeValue属性对文档节点和元素节点时不可用的。
    nodeType属性克返回节点的类型

    元素类型                   节点类型
    元素                        1
    属性                        2
    文本                        3
    注释                        8
    文档                        9
    document.close()：关闭文档流
    注意：不能用输出的方式在已经结束的文档流中添加数据，此时可以动态创建节点完成操作+
    可以再一个文档流中：
    1.创建节点
        (在文本流中创建用document)document.createElement("");//只有一个文件中只能存在一个的节点不可创建
        appendChild();
        insertBefore();
    2.添加到文档流中
    3.删除节点
    removeChild();

d.事件处理：
一、事件源：任何一个HTML元素（节点），body，div，button，p,,a,h1…………
二、事件 ：你的操作

鼠标：
    click      单击
    dblclick        双击
    textcontentmenu(在body) 文本菜单
    contextmenu    //右键点击(06.html 2)
    mouseover    放上
    mouseout     离开
    mousedown     按下
    mouseup         抬起
    mousemove      移动

键盘：
    keypress  键盘事件   指数字字母键，其余键无效
    keyup      键盘抬起   
    keydown   按下          此时所有的键都可以取到

文档：
    load     加载   load中的内容在加载时最后执行(06.html 4)
    unload   关闭    关闭或切换页面时触发
    beforeunload    关闭之前

表单：
    focus   获得焦点事件
    blur     失去焦点事件
    submit   提交事件
    change   改变事件
其他事件：
    scroll    滚动事件
    selected  选择事件

三、事件处理程序
    有三种方法添加事件：
        1.格式：<tag on事件="事件处理程序"/>(05.html 1)
        2.
            <script>
                对象.on事件=事件处理程序(05.html 2)
            </script>
        3.<script for="事件源id" event="事件">
                事件处理程序
        </script>

    <body oncontextmenu="return false"></body>//可以屏蔽掉时间(06.html) 且必须用return false.用函数返回值的话要写成return tesat()
事件对象：event window.event
        属性：
            1.srcElement  //代表事件源对象
            2.keyCode          //时间发生时的键盘码  keypress keydown keyup
            3.clientX,clientY 
            4.screenX,screenY
            5.returnValue
            6.cancelBubble

6.浏览器对象

浏览器本身就有一些对象，不用创建即可使用
window : 当前浏览器窗体的

    属性：
        status
        opener//在子窗体中代表父窗体
        closed



    方法：
        alert()
        confirm()
        setInterval()
        clearInterval();//循环执行

        setTimeout("aaa()",3000)  //只执行一次,在规定时间内执行某一操作
        clearTimeout()

        open();//开启新窗体(11.html)(16)
window子对象：
            document
            frames
            location
            history
            screen 

[window.]成员
document.write();

本身window 
open可以弹出子窗体

frames//多个窗体

跳转位置函数:
    <meta http-equiv="refresh" content="3"><!--3秒钟刷新一次-->
    <meta http-equiv="refresh" content="3;url=http://www.brophp.com"><!--3秒钟加载一次页面-->
    header("Location:login.php");//前面不能有输出

    window.navigate(url)
    location.href=url;
    location.replace('url')

    记得：
        location='url';
        location.reload(true);(14.html)
history
        history.back()
        history.go(-2)(15.html)
screen
        (16.html)
表单对象:
        document.getElementById()

        document.forms.username
        document.frm1.username

        本身表单有的属性都可以作为对象的属性

        action 
        method
        enctype
        title

        方法：
        submit()
        focus()//获取焦点

        事件:
            onfocus();//获取焦点
            onblur();//失去焦点
            onchange();//内容改变事件

            form  上的onsubmit();(17.html)
select标签:
    selectedIndex代表选项框下标
    options[selectedIndex]获取选项


位置：(images/weizhi.png)
    style.top
    style.left

    offsetWidth
    offsetHeight
    offsetTop    //距离外面一层盒子的距离
    offsetLeft

    scrollHeight
    scrollWidth
    scrollTop    //滚动条滚动的高度，一般从0开始计数，计数为+时元素上升，反之下降。
没有滚动条使用js操作是的某一容器内的文本(如div)向上滚动，则需要对该div的上一层非
直接文本容器的scrollTop属性进行改动而不是文本的属性，(22.html)
scrollLeft

//用absolute布局可以是元素脱离文档流，
//用fixed布局可以使页面中某一元素的位置不随滚动条的改变而改变，此时fixed的
布局相对于HTML标签

大家看到这里应该对JavaScript的基础语法有了一定的了解，本部分内容很长，但是只是抽出来的比较重要的部分，具体的还是希望大家参考JavaScript权威书籍。如果发现本文中有错误，欢迎各位道友批评指教。

Vuejs Prop基本用法

一、使用Prop传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用props把数据传给子组件。
prop是父组件用来传递数据的一个自定义属性。子组件需要显示的地用props选项声明”prop”

1
2
3
4
Vue.component('child',{
	props:['message'],
    template:'<span>{{ message }}</span>'
})

然后向它传入一个普通字符串：

1
<child message="hello!"></child>

结果：

1
hello!

二、camelCase vs.kebab-case

html不区分大小写。当使用非字符串模板时，prop的名字形式会从camelCase转为kebab-case（短横线隔开）：

1
2
3
4
5
//camelCase
Vue.component('child',{
	props:['myMessage'],
    template:'<span>{{ message }}</span>'
})

1
2
//kebab-case
<child my-message="hello!"></child>

再次说明，如果你是用字符串模板，不用在意这些限制。

三、动态Prop

类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件。

1
2
3
4
5
<div>
	<input v-model="parrentMsg">
    <br>
    <child v-bind:my-message="parrentMsg"></child>
</div>

使用v-bind的缩写语法通常更简单：

1
<child :my-message="parrentMsg"></child>

四、字面量语法vs动态语法

因为它是一个字面prop ，它的值以字符串 "1" 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字，需要使用 v-bind ，从而让它的值被当作 JavaScript 表达式计算：

五、单项数据流

prop是单项绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。同时，这也很好理解，父组件是子组件的高度抽象，表示子组件的共有部分，一个组件的数据改变并不会改变其抽象，然而其抽象的改变却代表着所有子组件的改变。
另外，每次组渐渐更新时，子组件的所有prop都会更新为最新值。这意味着你不应该在子组件内部改变prop。如果你这么做了，Vue会在控制台给出警告。
通常有两种改变prop的情况：

1.prop作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；

2.prop作为需要被转变的原始值传入。

更确切地说这两种情况是：
a.定义一个局部data属性，并将prop的初始值作为局部数据的初始值。

1
2
3
4
    props: ['initialCounter'],
	data: function () {
  		return { counter: this.initialCounter}
}

b.定义一个 computed 属性，此属性从 prop 的值计算得出。

1
2
3
4
5
6
   props: ['size'],
computed: {
 		normalizedSize: function () {
  		 return this.size.trim().toLowerCase()
	 }
}

六、Prop验证

组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。
prop 是一个对象而不是字符串数组时，它包含验证要求：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type可以是下面的原生构造器：

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array

type也可以是一个自定义构造器，使用instanceof检测。当prop验证失败了，如果使用的是开发版本会抛出一条警告。

vuejs表单控件绑定

一、基础语法

vuejs中用v-model指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。但要注意的是v-model仅仅是语法糖，它只负责监听用户的输入时间一更新数据，并特别处理一些极端的例子。

注：1.·v-model`并不关心表单控件初始化所生成的值。因为它会选择Vue实例数据来作为具体的值
2.当控件有多种语言的需求时，v-model不会因为语言的改变而更新，在这种情况下要使用`input’事件来替代

1.文本

1
2
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

2.多行文本

1
2
3
4
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
注：在文本区域插值(<textarea></textarea>)并不会生效，应用v-model来替代

3.复选框

a.单个勾选框，逻辑值：

1
2
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

b.多个勾选框，绑定到同一个数组：

1
2
3
4
5
6
7
8
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

4.单选按钮

1
2
3
4
5
6
7
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

5.选择列表

a.单选列表:

1
2
3
4
5
6
<select v-model="selected">
	<option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

b.多选列表（绑定到同一个数组）：

1
2
3
4
5
6
<select v-model="selected">
	<option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

c.用v-for渲染：

1
2
3
4
5
//HTML
<select v-model="selected">
	<option v-for="option in options" v-bind:value="option.text">{{ option.text }}</option>
</select>
<span>Selected: {{ selected }}</span>
1
2
3
4
5
6
7
8
9
10
11
12
//JS
new Vue({
	el:'#id',
    data:{
    	selected:'A',
        options:[
        	{text:'One',value:'A'},
            {text:'Two',value:'B'},
            {text:'Three',value:'C'}
        ]
    }
});

二、绑定value

对于单选按钮，勾选框及选择列表选项，v-model绑定的value通常是静态字符串（对于勾选框是逻辑值）：

1
2
3
4
5
6
7
8
9
//当选中时，`picked` 为字符串 "a"
<input type="radio" v-model="picked" value="a">
//`toggle` 为 true 或 false
<input type="checkbox" v-model="toggle">
//当选中时，`selected` 为字符串 "abc"
<select v-model="selected">
  <option value="abc">ABC</option>
</select>
通过`v-bind`可以自己定义控件选中时显示的value值

1.复选框

1
2
3
4
<input type="checkbox"
	   v-model="toggle"
       v-bind:true-value="a"
       v-bind:false-value="b">
1
2
3
4
// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

2.单选按钮

1
<input type="radio" v-model="pick" v-bind:value="a">
1
2
// 当选中时
vm.pick === vm.a

3.选择列表设置

1
2
3
4
5
6
<select v-model="selected">
	<!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
   <option v-bind:value="{ number: 456 }">456</option>
    <option v-bind:value="{ number: 789 }">789</option>
</select>
1
2
typeof vm.selected // -> 'object'
vm.selected.number // -> 123 || 456 || 789

修饰符

1..lazy

在默认情况下，v-model在input事件中同步输入框的值与数据（除了上述语言问题部分），这是我们可以添加一个修饰符.lazy，从而转变为在change事件中同步：

1
2
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

2..number

如果想自动将用户的输入值转为Number类型（如果原值的转换结果为NaN则返回原值），可以添加一个修饰符number给v-model来处理输入值：

1
<input v-model.number="age" type="number">

这通常很有用，因为在type="number"时HTML中输入的值也总是会返回字符串类型。

3.trim

如果要自动过滤用户输入的首尾空格，可以添加trim修饰符到v-model上过滤输入：

1
<input v-model.trim="msg">

总结：表单的总结绑定通常很有效，通过三种修饰符我们可以有效的对用户的输入进行处理，并根据自身需求决定什么时候响应事件；操作非常简单，绑定的单个控件时，我们我们往往只需要在data中使用一个变量设定初始值即可，对于多选，只需要将变量设为数组即可，选中控件的value值可以通过v-bind进行绑定。

用CSS画出三角形

随着css3.0的出现，我们可以画出越来越多比较新颖的图形，这里我介绍一下用css3画出三角形。
首先我们给个div
<div id="triangle"></div>
下面就是我们的css代码，
先看个例子

1
2
3
4
#triangle{
	width:100px;
    height:100px;
}

结果如下：
alt text

很简单，然后呢，我们加上边框

1
2
3
4
5
6
7
8
#triangle{
	width: 100px;
	height: 100px;
	border-left: 50px solid red;
	border-right: 50px solid yellow;
	border-top: 50px solid gold;
	border-bottom: 50px solid purple;
}

结果如下

alt text
好像有奇迹了，如果我把div的宽高都设置为0，图像是否就会显示成四个三角形构成一个正方形，试一下

1
2
3
4
5
6
7
8
#triangle{
	width: 0px;
	height: 0px;
	border-left: 50px solid red;
	border-right: 50px solid yellow;
	border-top: 50px solid gold;
	border-bottom: 50px solid purple;
}

见证奇迹的时刻：
alt text

不过现在有了四个三角形，如果我们只要一个三角形的话怎么办？试着减一个边框看看

1
2
3
4
5
6
7
#triangle{
	width: 0px;
	height: 0px;
	border-left: 50px solid red;
	border-right: 50px solid yellow;
	border-bottom: 50px solid purple;
}

alt text

少了一个三角形，那么如果我取消另外两个边框会怎么样？

1
2
3
4
5
#triangle{
	width: 0px;
	height: 0px;
	border-bottom: 50px solid purple;
}

alt text
咦！怎么什么都没有，看来所有两个边界属性都删除是不行的，那如果我把它们隐藏呢：

1
2
3
4
5
6
7
#triangle{
	width: 0px;
	height: 0px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 50px solid purple;
}

alt text
上三角形就出现了，我们还可以写出其他三个方向的三角形

1
2
3
4
5
6
7
#triangle{
	width: 0px;
	height: 0px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid purple;
}

alt text
下三角形

1
2
3
4
5
6
7
#triangle{
	width: 0px;
	height: 0px;
	border-left: 50px solid red;
	border-bottom: 50px solid transparent;
	border-top: 50px solid transparent;
}

alt text
右三角形

1
2
3
4
5
6
7
#triangle{
	width: 0px;
	height: 0px;
	border-right: 50px solid red;
	border-bottom: 50px solid transparent;
	border-top: 50px solid transparent;
}

alt text
左三角形

vue事件处理器

1.监听事件

可以用v-on指令监听DOM事件来触发一些JavaScript代码
示例：

1
2
3
4
5
//HTML
<div id="example-1">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

1
2
3
4
5
6
7
//JS
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

你每点击一下按钮，下方的数字就增加1；直接采用js代码内嵌的方式，将count += 1直接写入到标签中。

2.方法事件处理器

当JavaScript比较少的时候直接将其写入v-on中是完全可以的，但是如果JavaScript代码量比较大的话，这样写就有些反人类了，因此v-on可以接受一个定义的方法来调用
示例：

1
2
3
4
5
//HTML
<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//JS
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    }
  }
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // -> 'Hello Vue.js!'

这里直接将JS代码转移到script标签中统一编写，更加方便维护

3.内联处理器方法

除了直接绑定一个方法，也可以用内联JavaScript语句：

1
2
3
4
5
//HTML
<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

1
2
3
4
5
6
7
8
9
//JS
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

有时候我们会遇到需要在内敛语句处理器中访问原声DOM事件的情况，这时候我们可以用特殊变量$event把它传入方法：

1
2
//HTML
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

1
2
3
4
5
6
7
8
9
//JS
// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

event具体的方法调用见事件修饰符

4.事件修饰符

在事件处理程序中调用event.preventDefault()或event.stopDefault()是非常常见的需求。methods虽然也可以轻松实现上述功能，但是methods只有纯粹的数据逻辑二不是去处理DOM事件细节。
因此，Vue.js为v-on提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 阻止单击事件冒泡
<a v-on:click.stop="doThis"></a>
// 提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
// 修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
// 只有修饰符
<form v-on:submit.prevent></form>
// 添加事件侦听器时使用事件捕获模式
<div v-on:click.capture="doThis">...</div>
// 只当事件在该元素本身（而不是子元素）触发时触发回调
<div v-on:click.self="doThat">...</div>
//the click event will be triggered at most once
<a v-on:click.once="doThis"></a>

新添加的.once可以之间用在组件events上

5.按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值。Vue允许为v-on在监听事件时添加按键修饰符：

1
2
//只有在 keyCode 是 13 时调用 vm.submit()
<input v-on:keyup.13="submit">

想要记住所有的keycode比较困难，所以vue为最常用的按键提供了别名，
<input v-on:keyup.enter="submit">

全部的按键别名：
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
可以通过全局config.keyCodes 对象自定义按键修饰符别名
Vue.config.keyCodes.f1 = 112
可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。
.ctrl
.alt
.shift
.meta

6.使用v-on的好处

1.扫一眼HTML模板便能轻松定位在JavaScript代码里对应的方法
2.无需再JavaScript里手动绑定事件，viewModel代码尅是非常纯粹的逻辑，和DOM完全解耦，更易于测试。
3.当一个viewModel被销毁时，所有的时间处理器都会自动被删除。无须担心如何自己清理它们

vuejs 基本操作

一、安装

1.在本地创建一个HTML文件，然后直接引用vue.js文件
<script src="https://unpkg.com/vue/dist/vue.js"></script>
2.在node环境下可以直接用
npm install vue-cli 但是这种方式并不推荐使用，尤其是多nodejs构建工具不够了解的同学

二、渲染

1.声明式渲染
Vue.js简单地说就是创建一个简洁的模板来声明式的将数据渲染进DOM的系统：

1
2
3
4
//HTML
<div id="example">
{{message}}
</div>

1
2
3
4
5
6
7
//JS
var example = new Vue({
	el:'#app',
    data:{
    	message:'Hello Vue!'
    }
})

最终在浏览器会显示

1
Hello Vue!

除了绑定插入的文本内容，我们还可以采用这样的方式绑定 DOM 元素属性：

1
2
3
4
5
6
//HTML
<div id="example">
 <span v-bind:title="message">
 	Hello world!
 </span>
</div>

1
2
3
4
5
6
7
//JS
var example = new Vue({
	el:'#example',
    data:{
    	message:"Jessionlin study Vuejs not very long"
    }
})
1
Hello world!

表面上并没有什么特殊的地方，但是我们发现了一个‘v-属性’结构，它的作用是在渲染过程的DOM上应用特殊的响应式行为，即将这个元素节点的title属性和Vue实例的message属性绑定到一起，当鼠标到达’Hello World!’标签所在位置时，data.message中的内容就会显示出来，此时如果在console中键入example.message = “hello world!”,重复上述操作室会发现这次显示出来的是hello world!
对于这种情况

1
2
//HTML
<img v-bind:src="imgSrc" v-bind:alt="imgAlt" v-bind:title="imgTitle">

大家肯定会觉得写这么多v-bind会很麻烦，而且看着也比较混乱，不过我们有一种更简单的方式：

1
<img :src="imgSrc" :alt="imgAlt" :title="imgTitle">

这样效果是相同的，是不是简单多了？

三、条件与循环

1.vuejs的条件判断也很简单：

1
2
3
4
5
//HTML
<div id="example">
	<p v-if="seen">Hello World!</p>
    <p v-if="seen-not">Hello Man!</p>
</div>

1
2
3
4
5
6
7
8
//JS
var example=new Vue({
	el:"example",
    data:{
    	seen:true,
        seen-not:false
    }
})

最终显示结果为
Hello World!
2.循环

1
2
3
4
5
6
7
8
//HTML
<div id="example">
	<ol>
    	<li v-for="todo in todos">
        	{{todo.text}}
        </li>
    </ol>
</div>

1
2
3
4
5
6
7
8
9
10
11
//JS
var example = new Vue({
	el:'example',
    data:{
    	todos:[
        	{text:'Hello World'},
            {text:'Hello Man'},
            {text:'Learn Vuejs'}
        ]
    }
})

最终的输出是：

1
2
3
1.Hello World
2.Hello Man
3.Learn Vuejs

如果此时在console控制台中输入example.todos.push({text:’Jessionlin is learning Vuejs’})

则最终的输出为：

1
2
3
4
1.Hello World
2.Hello Man
3.Learn Vuejs
4.Jessionlin is learning Vuejs

四、处理用户输入

1.v-on指令可以绑定一个简体那时间用于调用我们Vue实例中定义的方法

1
2
3
4
5
//HTML
<div id="example">
	<p>{{message}}</p>
    <button v-on:click="reverses">reverse</button>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
//JS
var example = new Vue({
	el:"example",
    data:{
    	message:'Hello Vue.js'
    }，
    methods:{
    	reverses:function(){
        	this.message = this.message.split('').reverse().join('')
        }
    }
})

最终结果是
alt text
2.v-model 使得在表单输入和应用状态中做双向数据绑定变得非常轻巧

1
2
3
4
5
//HTML
<div id="example">
	<p>{{message}}</p>
    <input v-model="message">
</div>

1
2
3
4
5
6
7
//JS
var example = new Vue({
	el:"example",
    data:{
    	message:"Hello Vue!"
    }
})

最终结果：
alt text

五、用组件构建（应用）

在Vue中，一个组件实质上是一个拥有预定义选项的一个Vue实例：

1
2
3
4
//JS
vue.component('todo-item',{
	template:'<li>This is a todo</li>'
})

然后我们就可以在另一个组件模板中写入它

1
2
3
4
//HTML
<ol>
  <todo-item></todo-item>
</ol>

但是此时所有的子组件全都具有相同的文本，操作起来不是太好，我们应该将数据从父作用域传到子组件。那么我们添加一个prop字段，表示属性：

1
2
3
4
5
//JS
vue.component('todo-item',{
	props:['todo'],
	template:'<li>This is a todo</li>'
})

现在，我们可以使用v-bind指令将todo传到每一个重复的组件中：

1
2
3
4
5
6
//HTML
<div id="example">
  <ol>
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//JS
Vue.component('todo-item',{
	props:['todo'],
    template:'<li>{{todo.text}}</li>'
})
var example = new Vue({
	el:'#example',
    data:{
    	groceryList:[
        	{ text: 'Vegetables' },
      		{ text: 'Cheese' },
     		{ text: 'Whatever else humans are supposed to eat' }
        ]
    }
})
1
2
3
1.Vegetables
2.Cheese
3.Whatever else humans are supposed to eat

node配置与安装

windows

1.下载node
下载地址：官网：https://nodejs.org/download/release/
选择最新版本下载，
2.安装node
双击node安装驱动开始安装，默认地址为C:\Program Files\nodejs里
3.配置环境变量
安装好之后你会发现你在nodejs文件里运行node一切正常，但是当你退出nodejs文件夹后再次执行node命令将会报错，这是因为此时操作系统无法识别node命令，这时只需要将nodejs文件夹配置到系统变量里就好了。
点击我的电脑 -> 高级系统设置 -> 环境变量 -> 系统变量中的path，如果没有请自行创建 -> 在最后添加nodejs文件夹绝对路径（注意不能有空格） -> 确定，之后你会发现无论在哪个文件夹里都能使用node命令了，npm环境变量配置方法同理
4.安装依赖
打开命令行键入node就可以进入node命令面板输入node代码即可，但有时候我们会遇到没有找到相应的包等错误，这是因为我们没有导入相应的包，此时只需键入npm install xxx -g -g表示依赖是全局安装的，本次安装后，以后只要是在这台电脑上都可以正常使用（node引用依赖的时候遵循就近原则，如果离它最近的node_modules中有需要的依赖就直接引用，如果没有一层层地向上寻找，如果最终在全局依赖中依然没有找到，则才会报错），如果我们想在项目中另建一个专属的node_modules，这时候只需要将’-g’去掉即可。
5.创建工程
环境配置好了，大家一定着急想要试试身手了，node现在两个主流的创建工程的框架是express和koa，下面我一一简单说明一下

express

键入命令：npm install express 回车等待安装express……..

键入命令：npm install jade 回车等待安装jade……..

键入命令：npm install mysql回车等待安装mysql……..

现在已经有express

express命令安装在全局才起作用!

所以express安装的时候要用 npm install express -g

或者直接修改全局路径:

npm config set prefix "C:\Program Files\nodejs"

npm config set cache "C:\Program Files\nodejs\cache" (先建好cache目录)

键入:express myapp (myapp是随意起的工程名称)

你会发现多了一个 C:\Program Files\nodejs\myapp
默认情况下：目录里会自动创建
安装依赖
环境搭建到此完工，下面做一个demo测试！

在myapp下新建helloworld.js
编辑:

1
2
3
4
5
6
7
var http = require("http");
http.createServer(function(request, response) {
    response.writeHead(200, {"Content-Type": "text/plain"});
    response.write("Hello World");
    response.end();
}).listen(8888);
console.log("nodejs start listen 8888 port!");

进入node.js command prompt 命令窗口,进入C:\Program Files\nodejs\myapp目录

键入node helloworld.js
alt show
打开地址http://127.0.0.1:8888/或http://localhost:8888/

发现输出 :

Hello World

koa
1
2
npm install koa
npm install koa-views

安装好依赖以后
创建一个app.js文件，编写

1
2
3
4
5
6
7
8
9
var koa = require('koa');
var views = require('koa-views');
var app = koa();
app.use(function *(){
	this.body = 'Hello World';
});
app.listen(3000);

之后的操作方法与express相同
下面是koa其他的比较常用的包

1
2
3
4
5
6
7
npm install koa-session 创建session
npm install koa-convert koa2后需要的转换模块
npm install koa-router  注册路由
npm install koa-static-cache 加载所有文件
npm install koa-bodyparser   解析http请求
npm install sequelize        MYSQL数据库处理函数
npm install mysql            加载MYSQL数据库

Linux

Linux安装与windows完全相同，只是环境配置的时候有所不同，Linux通过建立软连接的方式使得在任何地方都可以使用nodejs，其操作如下，找到node文件夹，进入bin文件夹，键入
ln -s node /usr/bin/node
ln -s node /usr/bin/npm即可

mongodb基本操作方法

##一、mongodb简介
mongodb属于文档型数据库，储存的是文档（Bson->json的二进制化）。我们熟知的MYSQL数据库，它的数据是以表的形式储存的，每条记录都具有相同的结构，这样使得查询起来很方便，但是却增加了空间的压力；文档型数据库如mongodb，其数据是以一条条文本的形式储存，每条数据不需要有相同的结构，这使得具有了良好的灵活性。同时，假如有书籍、书评、书评的回复等信息，如果将这些信息储存在传统型数据库如MYSQL中，至少需要张表，关联度极其复杂，然而在如mongodb的文档型数据库中，用户只需要将其写在同一个文档中即可。mongodb内部执行引擎为JS解释器, 把文档存储成bson结构,在查询时,转换为JS对象,并可以通过熟悉的js语法来操作，对于熟悉JS的道友来说，mongodb是一个值得选择的数据库

二、mongodb安装

1.下载mongodb (https://www.mongodb.org )
2.解压文件
3.不用编译，本身就是编译后的二进制可执行文件。
"alt mongodb 文件夹介绍"
4.启动mongod服务
进入mongodb的bin目录下，在命令行键入：
mongod --dbpath=e:/mongodb/data --logpath=e:/mongodb/log1.log --fork --port=27017
参数解释：
mongod 表名你要执行的操作命令类型，有时候mongod命令无效，这时候使用mongod.exe即可

1
2
3
4
--dbpath 数据存储目录
--logpath 日志存储目录
--fork    运行端口（默认27017）
--port    后台程序运行

注：只有开启了mongo服务才可以进行数据库操作，开启服务后只需要键入mongo就可以进入mongodb操作面板

5.mongodb非常的占磁盘空间, 刚启动后要占3-4G左右,如果你用虚拟机练习,可能空间不够,导致无法启动.可以用 –smallfiles 选项来启动,将会占用较小空间 400M左右.

###三、mongo入门命令
1.基本操作
1.1: show dbs 查看当前的数据库
1.2 use databaseName 选库
1.2 show tables/collections 查看当前库下的collection
1.3 如何创建库?
Mongodb的库是隐式创建,你可以use 一个不存在的库
然后在该库下创建collection,即可创建库
1.4 db.createCollection(‘collectionName’)
创建collection
1.5 collection允许隐式创建
Db.collectionName.insert(document);
1.6 db.collectionName.drop()
删除collection
1.7 db.dropDatabase();
删除database

2.基本操作增删改查
2..增: insert
介绍: mongodb存储的是文档,. 文档是json格式的对象.

语法: db.collectionName.isnert(document);

2.2: 增加单篇文档
Db.collectionName.insert({title:’nice day’});

2.3: 增加单个文档,并指定_id
Db.collectionName.insert({_id:8,age:78,name:’lisi’});

2.4.增加多个文档

1
2
3
4
5
6
db.collectionName.insert(
[
{time:'friday',study:'mongodb'},
{_id:9,gender:'male',name:'QQ'}
]
)

删:remove
语法: db.collection.remove(查询表达式, 选项);
选项是指 {justOne:true/false},是否只删一行, 默认为false

注意
1: 查询表达式依然是个json对象
2: 查询表达式匹配的行,将被删掉.
3: 如果不写查询表达式,collections中的所有文档将被删掉

例1: db.stu.remove({sn:’001’});
删除stu表中 sn属性值为’001’的文档

例2: db.stu.remove({gender:’m’,true});
删除stu表中gender属性为m的文档,只删除1行.

3.update
改 update操作
改谁? — 查询表达式
改成什么样? – 新值 或 赋值表达式
操作选项 —– 可选参数

语法: db.collection.update(查询表达式,新值,选项);
例:
db.news.update({name:'QQ'},{name:'MSN'});
是指选中news表中,name值为QQ的文档,并把其文档值改为{name:’MSN’},
结果: 文档中的其他列也不见了,改后只有_id和name列了.
即–新文档直接替换了旧文档,而不是修改

如果是想修改文档的某列,可以用$set关键字
db.collectionName.update(query,{$set:{name:’QQ’}})

修改时的赋值表达式
$set 修改某列的值
$unset 删除某个列
$rename 重命名某个列
$inc 增长某个列
$setOnInsert 当upsert为true时,并且发生了insert操作时,可以补充的字段.

4.Option
{upsert:true/false,multi:true/false}
Upsert—是指没有匹配的行,则直接插入该行.(和mysql中的replace一样)

例:db.stu.update({name:'wuyong'},{$set:{name:'junshiwuyong'}},{upsert:true});
如果有name=’wuyong’的文档,将被修改
如果没有,将添加此新文档

例:
db.news.update({_id:99},{x:123,y:234},{upsert:true});
没有_id=99的文档被修改,因此直接插入该文档

multi: 是指修改多行(即使查询表达式命中多行,默认也只改1行,如果想改多行,可以用此选项)
例:
db.news.update({age:21},{$set:{age:22}},{multi:true});
则把news中所有age=21的文档,都修改

查: find, findOne
语法: db.collection.find(查询表达式,查询的列);
Db.collections.find(表达式,{列1:1,列2:1});

例1:db.stu.find()
查询所有文档 所有内容

例2: db.stu.find({},{gendre:1})
查询所有文档,的gender属性 (_id属性默认总是查出来)

例3: db.stu.find({},{gender:1, _id:0})
查询所有文档的gender属性,且不查询_id属性

例3: db.stu.find({gender:’male’},{name:1,_id:0});
查询所有gender属性值为male的文档中的name属性

5.查询表达式:

5.1: 最简单的查询表达式
{filed:value},是指查询field列的值为value的文档

5.2: $ne --- != 查询表达式
{field:{$nq:value}}
作用–查filed列的值 不等于 value 的文档

5.3: $nin --> not in

5.4: $all
语法: {field:{$all:[v1,v2..]}}
是指取出 field列是一个数组,且至少包含 v1,v2值

5.5: $exists
语法: {field:{$exists:1}}
作用: 查询出含有field字段的文档

5.6: $nor
{$nor,[条件1,条件2]}
是指 所有条件都不满足的文档为真返回

5.7:用正则表达式查询 以”诺基亚”开头的商品
例:db.goods.find({goods_name:/诺基亚.*/},{goods_name:1});

5.8: 用$where表达式来查询
例: db.goods.find({$where:'this.cat_id != 3 && this.cat_id != 11'});

注意: 用$where查询时, mongodb是把bson结构的二进制数据转换为json结构的对象,
然后比较对象的属性是否满足表达式.

速度较慢

6.Update时可用的操作符
例:

1
2
3
4
>db.user.insert({name:'lisi',age:12,sex:'male',height:123,area:'haidian'});
->db.user.update({name:'lisi'},{$set:{area:'chaoyang'},$unset:{height:1},$inc:{age:1},$rename:{sex:'gender'}});
> db.user.find();
{ "_id" : ObjectId("51fc01c4f5de93e1f2856e33"), "age" : 13, "area" : "chaoyang", "gender" : "male", "name" : "lisi" }

$setOnInsert ->相当于mysql中的列的默认值

7.声明游标:
7.1

1
2
3
var cursor =  db.collectioName.find(query,projection);
Cursor.hasNext() ,判断游标是否已经取到尽头
Cursor. Next() , 取出游标的下1个单元

7.2 用while来循环游标

1
2
3
4
> var mycursor = db.bar.find({_id:{$lte:5}})
> while(mycursor.hasNext()) {
... printjson(mycursor.next());
... }

7.3
// 声明游标
var cursor = db.goods.find();
// 循环游标

1
for(var doc=true;cursor.hasNext();) { printjson(cursor.next());}

也可以简写:

1
for(var  cursor=db.goods.find(), doc=true;cursor.hasNext();) { printjson(cursor.next());}

7.4 游标还有一个迭代函数,允许我们自定义回调函数来逐个处理每个单元.
cursor.forEach(回调函数);
例:

1
2
3
> var gettitle = function(obj) {print(obj.goods_name)}
> var cursor = db.goods.find();
> cursor.forEach(gettitle);

7.5 游标在分页中的应用
比如查到10000行,跳过100页,取10行.
一般地,我们假设每页N行, 当前是page页
就需要跳过前 (page-1)*N 行, 再取N行, 在mysql中, limit offset,N来实现
在mongo中,用skip(), limit()函数来实现的

如 var mycursor = db.bar.find().skip(9995);
则是查询结果中,跳过前9995行

查询第901页,每页10条
则是 varmytcursor=db.bar.find().skip(9000).limit(10);

7.6 通过cursor一次性得到所有数据, 并返回数组.
例:

1
2
3
>var cursor = db.goods.find();
> printjson(cursor.toArray());  //看到所有行
> printjson(cursor.toArray()[2]);  //看到第2行

注意: 不要随意使用toArray()
原因: 会把所有的行立即以对象形式组织在内存里.
可以在取出少数几行时,用此功能.

hexo+gitpage

在学习编程的过程中，难免会遇到很多很多不会解决的bug，网上查询资料时往往会看到很多大神在自己的博客中对自己的问题进行了详细的讲解，心里常常想，什么时候才能搭建一个属于自己的博客。现在，仅仅使用hexo和gitpage我们就可以搭建一个简易的静态博客，是不是很神奇，那我们现在就开始吧

注：此处默认大家已经安装配置好了合适的node环境和git环境

一、hexo安装与使用

1.hexo安装
搜索 npm你会发现有许多和hexo有关的包，这里我们选用hexo-cli这个包，在命令行中打印
npm install hexo-cli -g
2.hexo使用
首先初始化hexo
hexo init projectName

安装好了当然就要开始使用了，不过我们在此之前先要大概了解一下每个目录是做什么的

a. **scaffolds**文件夹储存的是默认文件，在你用hexo创建了一个md文件后，打开文件你会发现每个文件的头部都会有相同的内容，这部分的内容就是在scaffolds文件夹中定义的
b. **source**文件夹中有一个_POST文件夹，里面储存的就是博客相关资源。
c. **themes**文件夹中存储的是博客的主题，gitpage上有许多主题，大家可以自行选择
d. **public**文件夹是编译后才出现的，这部分是真正要展示的部分，hexo将md文件经过打包、整合成index.html文件
e. **.deploy_git**是部署服务器是产生的文件夹，里面存贮将本地文件部署到服务器是所需要的文件
f. **node_modules**文件夹是node的依赖包，具体的就不再介绍
g. *。gitignore*文件记录自动生成文件的第一层列表
h. *_config.yml*文件存储的是hexo的配置信息
i. *db.json*文件存储数据库信息
k. *package.json*文件在node中已介绍
注：source文件夹中只能存储md文件，媒体格式的图片页面中无法显示，媒体的显示方法见下文

下面开始写自己的博客，进入project文件夹内
hexo new "filename"
创建一个md文件，在文件里编写博客，其中markdown基本语法请见我之前的博客
hexo generate 或 hexo g 编译代码
hexo server 或 hexo s 开启服务
hexo默认的端口是4000，开启服务后在浏览器中输入localhost:4000，就可以访问到博客啦，不过现在只是在本地服务器端访问到了自己的博客，其他人是看不到的

二、gitpage配置

gitpage是github的一个延伸服务，因此使用前你需要有一个github账号，之后创建一个repository，命名为”username.github.io”，这个名字是固定的，并且每个账号只能有一个gitpage远程库。然后点击setting，在github pages模块你会发现github给你分配了一个域名，并且这个域名就是你的repository名；你还可以找到”choose a theme”按钮，你可以从这里找到你需要的主题，下面开始部署

三、部署

上述操作都完成后，只需要将_config.yml文件中的最后一段话改成：

1
2
3
4
deploy:
  type: git
  repository: git@github.com:username/username.github.io.git
  branch: master

最后命令行中依次执行
hexo clean 清除上一次编译产生的文件
hexo g 重新编译
hexo d 部署到github
在浏览器中访问https://username.github.io就可以看到自己的博客啦

注：在部署的时候，经常会出现错误，下面我把我遇到的坑总结一下
1.命令行中输入hexo d没有任何反应，原因是你没有安装所需要的依赖

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save
大家对照node_modules文件夹逐一查找安装即可，尤其是npm install hexo-deployer-git --save

2.无法找到命令

查看_config.yml将type后改为git,hexo 2.0x时用的是github，现在是hexo都是3.0及更新版本

注：type等跟着的冒号后面需要有一个半角英文空格，否则会报错