2013xile/blog

blog

blog.xile.site

blog's Issues

OS X EI Capitan 10.11.3上安装Nginx+MySQL+PHP

前几日在新购的macbook Pro上搭建PHP环境，因为网上提供的资料不够准确，故走了一些弯路，特此记录，以帮助有需要的新手。OS X自带Apache和PHP，这里讲的是使用Nginx服务器。

以下为详细步骤：

1. 安装brew

brew是OS X上一个优秀的命令行包管理工具，用它来安装一系列软件非常方便。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. 安装MySQL

首先我们来安装MySQL，因为它最容易安装

brew install mysql

安装完成后为MySQL设置密码
首先无密码登录，用户名为root

mysql -u root

在MySQL中操作

>update mysql.user set authentication_string="new password" where User='root'；
>flush privileges；
>quit

3. 安装PHP

安装PHP7.0

brew install homebrew/php/php70 homebrew/php/php70-mcrypt homebrew/php/php70-gmagick homebrew/php/php70-opcache homebrew/php/php70-xdebug

接下来在命令行中输入

export PATH="/usr/local/sbin:$PATH"  
echo 'export PATH="/usr/local/sbin:$PATH"' >> ~/.bash_profile  

最后输入php -v和php-fpm -v都应该显示PHP版本号7.0.x

启动php-fpm

sudo php-fpm

结束php-fpm

sudo pkill php-fpm

注意在终端中启动php-fpm之后未结束前不要关闭窗口，若输入其他命令应该新建窗口，非正常关闭重新启动将显示端口被占用，此时需要修改默认的端口9000为其他端口。修改方法在介绍完Nginx的安装之后在说明，因为其中涉及到Nginx的相关设置。

4. 安装Nginx

最后安装Nginx，这一步有很多关键的设置，务必认真。
安装

brew install --with-http2 nginx

安装后进行相关设置，打开设置文件

vim /usr/local/etc/nginx/nginx.conf

根据需要做如下修改

server {
    listen       8080; #默认端口为8080
    server_name  localhost; #网站地址

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    #如果想使用80端口，需要给予权限，添加下面两行并参考下一个步骤，不需要则可以跳过
    ssl_certificate ssl/nginx.crt;
    ssl_certificate_key ssl/nginx.key;

    location / {
        root   html; #html为网站根目录，可以自己修改
        index  index.html index.htm; #添加index.php
    }

生成密钥给予权限以使用80端口

sudo mkdir /usr/local/etc/nginx/ssl/  
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /usr/local/etc/nginx/ssl/nginx.key -out /usr/local/etc/nginx/ssl/nginx.crt

设置Nginx支持php
在刚才的配置文件中找到以下几行，去掉前面的井号，即使注释内容生效。并做相应修改

location ~ \.php$ {
    root           html; #此处的根目录应与上面的设置的一致
    fastcgi_pass   127.0.0.1:9000; #此处可以设置php-fpm默认端口
    fastcgi_index  index.php;
    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name; #此处将/scripts$fastcgi_script_name修改为根目录$fastcgi_script_name
    include        fastcgi_params; #将此行代码与上一行对调位置
}

至此设置完成。

启动Nginx

sudo nginx

结束/重载（配置文件）Nginx

sudo nginx -s stop/reload

关于修改php-fpm默认端口的说明

在前面Nginx配置文件注释中已经有提到一处php-fpm默认端口的修改，这是在Nginx中进行设置，接下来只需在php-fpm的配置文件中另外修改即可。文件路径/usr/local/etc/php/7.0/php-fpm.d/www.conf，在文件中找到listen = 127.0.0.1:9000进行修改即可。

参考资料：
http://wlkns.co/install-nginx-php-mysql-on-mac-osx/
http://yangtai.blog.51cto.com/334569/213861

前端布局练习总结(table/inline/float/flex)

前段时间在霖哥的指导下，分别对table/inline/float/flex布局进行了相应的实现。做一下总结汇总。

table布局总结

优点：

• 垂直居中
• 等高
• 等分布局

缺点：

• width, margin等属性不能影响设置了table-cell的元素
• 设置了table-cell的元素自适应父级元素，使响应式的实现不能单纯依赖于CSS，而要借助JS实现
• 设置border-spacing属性会使元素四周都出现间距，使第一个元素左端和最后一个元素右端出现间距，打破原来的布局

应用场景

• 需要以表格呈现的内容
• 图片、文字区块展示
• 及其他需要等高等分布局的地方

属性说明

• display: table 使元素以表格方式呈现
• display: table-cell 使元素以单元格方式呈现，不能应用width, margin等属性

Inline-block布局总结

优点：

• 水平、垂直居中
• 同时具有行内样式和块级元素的属性

缺点：

• 作为行内元素存在letter-spacing。标准解决方案是父级元素使用font-size: 0。

应用场景

• 需要使块级元素并列显示
• 需要对行内元素应用margin等属性

属性说明

• display: inline-block 使块级元素以行内样式渲染
• font-size: 0 用于清除letter-spacing
• vertical-align: top/center/bottom 对元素进行垂直定位
• text-align: left/center/right 对元素进行水平定位

float布局总结

优点：

• 使块级元素成行排列
• 响应式易于实现
• 有多个解决现存bugs的方法

缺点：

• 脱离文档流，破坏原来布局，难以控制定位
• 父级元素不能自适应高度，可以用overflow属性解决
• 需要清除浮动，实现响应式过程中，需要多次对元素清除浮动

应用场景

• 瀑布流布局
• 横排列表
• 流式布局

属性说明

• float：left/right 实现一个元素向左或者向右浮动
• clear：left/right/both 用于清除元素浮动

Flex布局总结

优点：

• 等高
• 等间距，自动适应父级元素宽度
• 可控是否自动换行，换行方式，对齐方式，排列顺序等

缺点：

• 不兼容低版本浏览器
• 易被过度使用

应用场景

• 不需要兼容低版本浏览器
• 灵活可控的布局
• 类似表格同时需要自动换行
• 需要元素自适应容器大小

属性说明(常用)

• display: flex 使元素以flex方式显示
• flex-wrap: nowrap|wrap|wrap-reverse 是否自动换行以及换行方向
• flex-direction: row|row-reverse|column|column-reverse 控制元素排列方向
• order: number 控制元素排列顺序
• justify-content: flex-start|flex-end|center|space-between|space-around 控制元素横向对齐方式
• align-content: flex-start|flex-end|center|space-between|space-around|stretch 控制多行元素垂直对齐方式
• align-items: flex-start|flex-end|center|baseline|stretch 控制多个元素垂直对齐方式
• align-self: auto|flex-start|flex-end|center|baseline|stretch 控制单个元素垂直对齐方式
• flex-basis 设置元素宽度

Adding a Hello World System Call to Linux kernel 3.16.51

最近在看《操作系统概念》，第二章结束有个练习是给linux内核添加一个新的system call. 今天花了不少时间才完成，记录过程和遇到的坑。

环境：macOS sierra / CentOS7 3.10.0 in Parallels Desktop

一开始是打算直接对现有内核进行修改，但是修改之后发现现在系统中的内核不完整，缺少文件syscall_32.tbl，编译失败。于是从kernel.org下载新的完整的内核，我选择的版本是3.16.51.

之后的过程基本参考 https://tssurya.wordpress.com/2014/08/19/adding-a-hello-world-system-call-to-linux-kernel-3-16-0/

但是按照该过程安装完内核，重启，在grub引导界面选择新内核启动出现黑屏。网上查到的原因有：

• 显卡驱动缺失，需要重新安装parallels tools
• 未安装图形界面

选择原来的内核正常进入系统，打开terminal

systemctl set-default multi-user.target

设置命令行模式启动，之后可以正常进入新内核系统

这时有个插曲是忘记了用户名密码，默认是parallels而不是root

通过修改grub文件进入单用户模式，修改密码

重启成功进入系统，测试新添加的system call成功

重装parallels tools，要从parallels应用文件里挂载镜像到CD/DVD，很多教程未提到。

安装完成通过界面启动仍旧黑屏，猜想应该是未安装图形界面。不过暂时用命令行挺好的。

关于这个博客

已经记不起来这是我的第几个博客了，我是一个很少写字，坚持记录的人，所以博客换了一个又一个，每一次更换都是为了起初的新鲜感。我曾经用过新浪网易百度的博客，用过点点这样的轻博客，用过WordPress，用过Farbox，用过Jekyll、hexo，也自己用PHP、NodeJS搭建过博客，于是每一次换博客也成了一种新的尝试，一种技术能力的提升。这一次我选择用github issues作为我的博客，是启发自wuhaoworld/github-issues-blog项目。它足够简单，同时可发挥的空间也大，所以我决定进行尝试。
前面已经有人写过几个关于issues博客的开源项目，可以轻松的部署。但是为了检验自己的能力，做为对过去知识的一种复习，我决定自己使用原生JS来实现。用了两天，它成了现在这个样子，设计方面参考了Github的部分页面。可能代码不够优雅，稍显凌乱，尽管有诸多不足，但是自己已经比较欣慰，先挖个坑，有时间再使用各种库进行一番重构。

比以前进步的地方：

能够自行通过查看Github docs来实现对Github api的获取，而不借助网上的例子。能够阅读网上的英文资料。能够读懂参考他人的开源项目。

缺点和不足：

拖延与懒惰，对代码把握能力不足，懒于去研究函数的复用和减少代码的数量，导致代码冗杂，优雅不足。希望日后改进

过两天实现的功能：

直接在文章内页读取来自Github的评论。

感谢：wuhaoworld/github-issues-blog
LoeiFy/Mirror