flex使用

css, flex

  1. 容器（container）
    采用伸缩性布局，首先必须设置父容器的伸缩性

    1
    2
    3
    4
    5
    6
    7
     .parent{
          display:flex;
          display:-webkit-flex;
          display:-ms-flex;
          display:-o-flex;
          display:-moz-flex;
    }

  2. 容器的属性

    • display: //设置容器的伸缩性
    • flex-direction: [row]|[column]|[row-reverse]|[column-reverse]//设置伸缩容器中子元素的流方向
    • flex-wrap:[no-wrap]|[wrap]|[wrap-reverse]//设置换行的策略
    • flex-flow://同时设置flex-direction与flex-wrap
    • justify-content: [flex-start]|[flex-end]|[center]|[space-between]|[space-around]//设置伸缩项目在主轴上的对齐方式，如何使用剩余空间等
    • align-item:[flex-start]|[flex-end]|[center]|[stretch]|[baseline]//设置项目在侧轴上的对齐方式
    • align-content:[flex-start]|[flex-end]|[center]|[space-between]|[space-around]|[stretch] //类似justify-content，item在侧轴上如何对齐
  3. 容器的项(Item)
    • 设置子项的排列顺序，伸缩比例等
    • item的属性
      1. order:[number]//设置item出现的循序，越大越靠后
2. flex-grow:[number]//该值默认为0，即当有剩余空间时也不会放大去使用剩余空间
3. flex-shrink:[number]//该值默认为1，当item的空间大于容器的空间时，item会进行缩放
4. flex-basis:[number]//该值默认为auto,即item会根据item类容本身的尺寸来决定，flex-grow与flex-shrink的比例
5. align-self://设置item在侧轴的对齐方式
  4. 对flex的理解
    每个item的flex属性用来设置该item如何进行伸缩，伸缩的基准是什么
    例：所有item的flex-basis值的和决定伸缩容器可再分配剩余空间的大小，跟item具体设置的width与height无关，当flex-basis=auto时，该item的flex-basis的值就是元素本身的大小（或者是css设置的width或height）
    1
    2
    容器剩余的可分配空间 = 容器空间 - 每个item的flex-basis之和
    flex-grow决定item站剩余空间的一个比例
  • 当元素设置了flex-basis之后，剩余空间的分配一此为基础，为元素的width将无效。
  • 只有在为元素设置了flex-grow之后元素才可以扩展，否者元素不会自动使用剩余的空间。
  • 当item的宽度之和大于container时，元素是默认收缩的。

Javascript中两类this

javascript, this

在作为返回值的函数中this都会指向全局对象

1
2
3
4
5
6
7
8
9
10
11
var name = '全局name';
function getName(){
    console.log(this.name);
    return function(){
        console.log(this.name);
    }
}
var obj = {name:'obj-name',getName:getName};
getName()();
obj.getName()();
getName.call(obj)();

程序输出结果为：
hexo

作为函数参数的函数中的this同样指向全局对象

1
2
3
4
5
6
7
8
9
function getName1(){
    console.log(this.name);
}
var obj1 = {name:'obj1-name',getName:function(func){console.log(this.name);func();}};
obj1.getName(getName1);

var obj2 = {name:'obj2-name',getName:function(){console.log(this.name)}};
var obj3 = {name:'obj3-name',getName:obj2.getName};
obj3.getName();

程序输出：
hexo

ES6 Promise简介

javascript

作为一种新的异步编程方案，个人觉得Promise只是在异步请求流程上让开发者有更好的控制。把原本的异步回掉用同步的展现形式（then）给表现出来。
ES6提供了Promise构造函数，Promise的基本用法是这样的。

1
2
3
4
5
6
7
8
var promise = new Promise((resolve,reject)=>{
     if(成功){
          resolve(value);
          }else if(失败){
          reject(error);
          }
});
promise.then(function1,function2);

首先创建一个Promise对象，接收一个函数作为参数，该函数有两个参数resolve与reject由es内部机制提供的。当调用resolve时会去执行后边then指定的成功时候的回调函数function1，调用reject时会去执行then指定的失败回掉的函数function2。

这种模式一个明显的有点就是，将回掉与异步请求过程分开的，当有多个回掉时会时过程变的清晰。如：

1
2
promise.then(function1,function2)
       .then(function3);

当成功时会分别调用function1，function3，并且在function1中的返回值会作为function3的参数传递到function3.

promise.then

promise.then返回的永远是另一个promise对象所以可以实现链式调用（注意是另一个promise），每一个then返回的promise都不一样，后一个then的调用有前一个promise状态的改变决定。

promise.catch

表示状态为reject时的回调

Promise.all

Promise.all([a,b,c,d]);将a,b,c,d合并为一个promise只有当所有的promise都resolve时，合并后的promise才发生resolve。

Promise.race

与Promise.add相对，合并后的promise对象状态由最先发生状态改变的那个promise状态决定。

Promise.reslove

该方法将一个对象转换为promise并返回，并且状态为resolve。

Promise.reject

该方法将一个对象转换为promise并返回，并且状态为reject。

php-laravel配置

Back-End
php, laravel

前提是已经安装好apache+mysql并已配置好所有的服务

安装php

安装composer

1
2
curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer

这里安装laravel5，需要php版本在5.6以上。
本系统为centos6.5，直接yum install会安装php5.3不合要求。所以需要更改yum源。

更改yum源参照：更改yum源
这里：

1
2
3
4
5
6
rpm -Uvh http://mirror.webtatic.com/yum/el6/latest.rpm
wget http://packages.sw.be/rpmforge-release/rpmforge-release-0.5.1-1.el5.rf.x86_64.rpm  
rpm -ivh rpmforge-release-0.5.1-1.el5.rf.x86_64.rpm  

yum install php56w //安装php5.6
php -v //查看版本号

安装laravel需要的php模块

1
2
yum install -y php56w-mysql php56w-mcrypt php56w-mbstring php56w-tokenizer php56w-openssl
//这里一定要指定为你安装的php版本如：在安装mysql扩展时默认为php-mysql,会出现php-commont的冲突。只需要改为php56w-mysql即可。

配置php
我们开发时如果报错需要能打印出error stack,要开启php的report_errors选项。

1
2
//找到php.ini 一般在/etc下边
vim /ect/php.ini //找到display_errors将其置为 On

安装laravel

直接下载laravel一键安装包解压到你apache配置好的根目录。
在这里你需要开启apache的urlrewrite功能。
找到httpd.conf(在 /etc/httpd/conf/)，配置根目录的AllowOverride为All。
之后进入laravel目录将storage目录赋予777权限

1
chmod 777 -R storage

laravel的debug功能开启以及evn的配置查看laravel官网

linux配置apache+mysql+svn

Back-End
linux

两个工具软件

  1. secureCRT—-远程主机连接软件
  2. xftp—-ftp连接软件，用于管理主机上的文件

安装mysql

这里安装的是mysql5.6
参见安装mysql
通过yum安装
yum -y install mysql mysql-server

安装apache

直接运行

1
yum install httpd

等待下载及安装
配置文件在/ect/httpd/conf下

1
2
service httpd start
用于启动httpd服务

安装svn

1
2
svn安装
yum install subversion

创建版本库

  1. 创建文件夹 

    1
    mkdir /home/svn/pros -r

  2. 你创建的所有项目将放到pros目录下

    1
    2
    3
    4
    在该文件夹下启动svn服务
    svnserver -d -r /home/svn/pros
    创建名为peoject1的项目。
    svnadmin create /home/svn/pros/project1

  3. 配置svn

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    cd /home/svn/pros/project1/conf
    1.创建用户
    vim password
    '='号前后分别为用户名及用户密码
    2.给创建的用于配置权限
    vim authz
    后边的rw表示给用户ligo以读写权限
    3.配置svnserver.conf
    该文件用于指定svn账户，及验证的配置文件所在目录
    vim svnserver.conf
    通过 svn co svn://youhost/youproject经过验证后将你的项目checkout到一个目录

css属性vertical-align

Front-End
css

先上图，图片下方的留白怎么产生的？
vartical-space
不管你怎么设置元素的padding,还是margin，空白依然存在。
代码：

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<style>
		* {
		  padding: 0;
		  margin: 0;
		}

		div {
		  width: 300px;
		  background-color: white;
		  border: 1px solid red;
		  display: inline-block;
		  margin: 50px 50%;
		  padding-bottom: -30px;
		  transform: translateX(-50%);
		}

		img {
		  max-width: 100%;
		}
		p{
		  border:1px solid red;
		  width:500px;
		  margin:0 auto;
		  background-color:#ddd;
		  /*line-height: 160px;*/
		}
		span{
		  background-color:red;
		  color:white; 
		  font-size:84px;
		  /*vertical-align:middle;*/
		}
		
		p img{
		   /*vertical-align:middle;*/
		}
		b{
		  /*vertical-align:middle;*/
		  font-size:62px;
		  background-color:blue;
		}

	</style>
</head>
<body>
<div> 
 	<img src="http://ww1.sinaimg.cn/mw1024/7f4539c1jw1et2wws33khj20zk0qoadq.jpg" alt="">
</div>
<p>
	<span>xgf</span>
	<img src="http://www.w3school.com.cn/i/eg_cute.gif" alt="">
	<b>axxegff</b>
</p>
</body>
</html>

需要明白的几点：

  1. vertical-align只会在display为inline,inline-block的元素上生效。
  2. 一行中可能会放多个行内元素，改行行高由行中line-height最大的那个哪个元素决定。
  3. 元素的line-height由字体大小及line-height属性决定。
  4. line-heigh属性会继承。

先来了解一下网页中关于字体与行高的各种概念链接

  1. 行内元素的基线为字母e的底线，注意与字母g比较。
  2. 行中存在一个行框（虚拟的但又确实存在的东西）。元素的background-color，border，outline并不能将其显示出来。

一行中的基线与行内元素基线
行的基线为该行行高最高元素的基线，默认情况下行中的元素的基线与行的基线在同一水平线上。
如下：
vertical-defaut

  • 为行中非决定行基线的元素（不是最高的那些元素）设定vertical-align值为middle，text-top，text-bottom是则该元素的中线，字体顶部，字体底部将分别与行的基线对齐（也就是与最高元素的基线对齐）。当值为top，bottom时元素的顶部，底部将分别与行的顶部，底部对齐（不是基线了）。
    如图1：
    vertical-1
    图中设置img的vertical-align:middle，b的vertical-align:text-top。
    如图2：
    vertical-2
    图中设置img的vertical-align:top，b的vertical-align:bottom。
  • 当为最高元素（决定行基线的元素）设定vertical-align属性值时（p元素没有指定行高），如值为middle，text-top,text-bottom;会将行的基线也改为元素的vertival-align值。如值为top，bottom时，如果再设置其它元素的vertical-align值，其它可能会变为改行的最高元素。
    如图1：
    vertical-3
    图中设置了span的vartical-align:middle；
    如图2：
    vertical-4
    图中设置了p的line-height:160px；

总结：
当父元素，最高元素设置了line-height时，要理清元素对齐方式还真不那么简单。不过vertical-align基本只是用于图片与行内文本居中的情况。图片中空白是由浏览器渲染模型造成的，可以设置vertical-aign：middle，或者设置div元素的font-size：0。

Laravel-and-sximo

Back-End
php, laravel, sximo

Laravel+Sximo

当我们开发一个后台程序的时候，通常关注的就是怎样处理用户请求，给用户一个怎样的响应。

整个过程通常是这样子的：

收到请求—>一个单一的入口文件（就是一个路由分析处理程序）—>找到对应路由—>一系列的处理（请求/响应数据的处理）—>返回一个视图

在没有使用框架的情况下，上边的一系列流程处理都由后台开发者来进行维护/管理。开发者不仅要关心用户响应数据处理，还要把握流程的控制。并且流程控制的逻辑基本是相似的，项目之间可以进行复用。当项目足够大时，开发者自己写的那一套程序，如果独立出来基本也就是一个不那么通用的框架了。

1. 使用laravel

laravel就是那样的一套算是通用的框架程序，这里边开发者只要关注用户响应数据的部分，对于请求的处理简单的使用框架的规则编写业务层的代码即可（路由，控制器，视图模板文件等），简化了开发管理的逻辑。并且封装了一系列的处理请求/响应的“更加优雅“API,会让程序开发更加的简单。

laravel项目结构

使用的是版本5.2.15

laravel-dir

  • 重要文件夹及作用：

app:业务逻辑文件夹，写的路由、控制器，中间件规则都在该目录下。

bootstrap: 框架启动载入文件。

public：用户可以访问的唯一文件目录，用于存放你的css，js，image等资源文件。

resource：存放最原始的资源文件夹，比如你的less，sass，coffescript文件，以及模板视图文件如blade文件。

storage：日志文件，及编译后的视图文件等。

config：各种配置文件的存放目录。

2. SXIMO

现在通过laravel框架，开发者可以很好的对自己的代码/业务逻辑进行控制。那网站的内容怎么管理，比如一个新闻站点现在需要更新一条消息，你该怎么做？

当然你可以自己写一套CMS程序，这里就不说了。我们来说一下sximo这个cms框架程序。

一个很重要的概念：

数据库中的一张表—->sximo中的一个module—->HTML一张表单

如下图：
sximo
在sximo中我们每创建一个模块都对应到app/view/下边的一个文件夹，该文件夹存放该模块对应的模板文件（即blade.php文件）。每个模板文件通过接口能简单的获取板块对应的数据表的数据。使用sximo的好处就是，方便了后台对数据库的操作。对模块数据表数据操作，框架本身已经封装。返回的数据前台直接使用即可。

使用Hexo搭建github个人博客

开发环境
hexo, github

查了各种资料，总算是把搭建Hexo博客的流程跑通了。有必要写一下整个过程。

hexo

环境搭建

  • 安装nodejs： 整个环境基于nodejs生态，必须安装nodejs。下载安装nodejs，请自行百度。
  • 安装git，申请github账号： Hexo用于生成github静态页面，需要通过git进行部署。github相当于一个远程的代码仓库，你需要配置代码仓库地址（请看下边下边）。申请git账号就不多说了，怎样使用git网上也有很多教程！

正式安装Hexo

首先新建一个文件夹，例如blogs用于你搭建本地博客的根目录。切换到该目录运行：

1
npm install -g hexo//将hexo安装到全局，以便之后直接在控制台调用

之后运行

1
2
3
hexo init //用于初始化当前项目
hexo generate //该命令用于生成静态页面
hexo server //重新打开一个cmd窗口，再运行该命令。用于启动本地服务器

现在浏览器其中输入 http://localhost:4000，如果上边一切顺利你将看到一个显示Hexo页面。

将本地博客部署到gtihub

在个github中新建一个项目。如果你想在别人输入 http://youcount.github.com 时就能看到你部署的项目，请将项目名称命名为youcount.com。找到刚才初始化过的hexo项目，在_config.yml文件末尾添加如下代码：

1
2
3
4
deploy:
 	  type: git
 	  repo: https://github.com/gsliu100/gsliu100.github.com.git
 	  branch: master

其中type为部署的方式，就是git，repo为你刚才创建的github项目的https地址，你可以在项目的setting中找到。之后运行命令：

1
hexo deploy

根据提示输入git账户及密码，顺利的话此时你本地的代码将上传到你的项目仓库中。这种部署方式需要每次输入用户名及密码，你可以将repo设置为项目ssh key，之后不需要每次输入账户及密码了（我是没成功！！）

分析一下Hexo中各文件/文件夹作用

Hexo的目录结构如下图：

hexo-dir
在这里你需要的关心的是public，source，themes目录及_config.yml配置文件。

  • public目录存放的是你通过hexo generate命令生成好的静态文件，你部署的时候就是将该文件夹的的文件上传到git仓库。
  • source目录是你在本地的主要工作目录，你编写的post，分类及标签的生成，需要用到的图片等文件都存放在该目录下。
  • themes目录用于存放主题文件，每个主题对应一个文件夹。
  • _congfig.yml是博客的配置文件，在这里你可以指定站点名称，使用的什么主题，站点作者等，以及之前git的配置都在该文件中进行。

在每个主题文件下也有一个_congfig.yml配置文件，用于对特定主题的个性化。每个主题的制作者会对配置文件予以说明。

创建一篇post并给它贴上分类及标签

运行命令：

1
hexo new "postName" //postName为创建的post的名称

打开source>_posts，在该文件下你将看到刚才创建的post，现在你就可以使用Markdown语法进行博客的书写了。接下来我们创建分类及标签的index页（也就是当你点击任何一个分类或者标签时打开的页面）。还是在source文件夹下，我们创建两个文件夹categories，tags，分别创建index.md文件。目录结构应该是这样子的。
source-dir
注意到categories，tags文件夹下的index.md。里边的内容分别为:

1
2
3
4
5
---
title: categories
date: 2016-05-03 14:14:40
type: "categories"
---

1
2
3
4
5
---
title: tags
date: 2016-05-03 14:18:02
type: "tags"
---

注意到type的值。在我们刚刚创建的post的顶部写入:

1
2
categories: 开发环境 //一个post只能添加一个分类
tags: ['Hexo','github'] //可以添加多个标签

在本地浏览及上传到git仓库

运行命令：

1
2
3
4
hexo clean //该命令会删除public文件夹，所以你不应该直接在public中建立任何文件/文件夹。每次提交之前都因该有这个操作！
hexo generate //生成静态文件，重新生成public文件夹。
npm install hexo-deployer-git --save //安装hexo git部署工具
hexo deploy //部署到git

部署时需要输入你的git账号密码。