Giter Site home page Giter Site logo

blog's Introduction

Hello World! 😄

blog's People

Contributors

julyxing avatar

Watchers

 avatar

blog's Issues

从在浏览器地址栏输入地址到页面呈现中间过程简单分析

以这次留言板范例为例子简单说明,当我们从浏览器中的地址栏输入地址回车之后到网页内容展示中间发生的事情。

从PHP开发环境(LNMP)的角度来分析。php开发环境需要有:

  • L: Linux系统。第一,linux系统是一种开源的系统,用户可以根据自己的需求进行修改。第二,稳定。
  • N: Nginx服务器。nginx服务器是一款轻量级的 Web 服务器/反向代理服务器及电子邮件>(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行。由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大型的入口网站及搜索引擎Rambler(俄文:Рамблер)使用。其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,**大陆使用nginx网站用户有:新浪、网易、腾讯等,解释出自百度百科,具体特点目前自己也了解不多。
  • M: 数据库(常用的php搭配是mysql,此次留言板选择的是sqlite3)。
  • P: PHP自身需要的一些软件,例如:php-fpm。

当我们在浏览器中输入地址时候,首先需要经过http服务器,也就是自己nginx服务器。首先从nginx
服务器配置文件分析,在/etc/nginx/nginx.conf中,增加了一条命令

include /var/www/*.nginx/*.conf

然后我们查看/var/www目录下的具体情况

然后进入default.nginx目录下面查看 ,根据刚才nginx配置文件中新增的命令,可以得到nginx服务器在运行时候包含了,/var/www/下面所有带有.nginx名字的目录及目录下面的所有后缀名为.conf文件,于是我们查看@.conf文件,,在标志出可以看到在执行这个.conf文件时候也执行了/var/www/default.nginx/sites_enabled目录下面的所有文件,同时也可以看到nginx服务器监听了 80 端口,同时服务器执行的路径为/var/www/default/@

进入/var/www/default.nginx/sites_enabled目录,

在图片中可以看到,目录下面的文件指向了/var/www/default/@/test/etc/nginx/sites_enabled/note,我们继续查看note文件中的内容

根据nginx手册的说明,nginx服务器执行了@php-note部分,在那个部分部分中,我们可以看到执行时候访问了 /var/www/default/@/test/libexec下面的fcgi.php文件,

我们查看fcgi.php文件

在这个php文件中,执行了run方法,在这个过程中/etc/route.php是作为参数的,于是我们查看route.php文件,可以看到当我们在浏览器中输入/notes时候执行了,BigGood\Test包下面的控制器中NoteQuery控制器。

从NoteQuery控制器中,可以看到控制器给视图NoteList文件返回了messages,继续查看视图文件

在该文件中,我们发现网页最后内容展示的格式在这个文件中设置,同时数据是通过控制器返回的参数最后显示出来的。此时网页从开始输入地址到现在网页内容展示的过程就分析完了,但是我们遗漏了一个很重要的地方,那就是数据是怎么产生以及是如何被展示的。此时我们回头看fcgi.php文件,发现文件中是由Appliance调用run()方法的,在Appliance.php文件中,我们可以看到数据是怎么被关联起来的。在这个文件中我们绑定了在/var/www/defaulte/@/test/var/db目录下面的数据库文件,这个文件在实现功能的时候创建,方法可以查看sqlite3相关的知识。此时我们可以解释数据的来源。

最后的页面效果如下:

根据这个例子,我们同时也可以看到MVC模式,以及框架的效果。

当nginx服务器都正常的情况下,如何对需求进行分析。根据MVC模式特点,我个人比较喜欢逆向考虑。例如:这次留言板的需求是在页面中展示几条留言信息。我首先考虑的是数据怎么设计,也就是如何将数据进行持久化,然后就是Model模型层和模型集合,然后就是控制器,最后才考虑视图。综合MVC模式最核心的就是如何面向对象,然后将需求进行划分。

Git 日常命令总结

Git 常用命令总结


用户配置

  git config --global user.name  邢柳
  git config --global user.email [email protected]

1 克隆

  git clone [email protected]:JulyXing/Blog.git

2 更新

  git pull (默认拉取 master 分支代码)
  当存在分支, 为避免分支代码混乱,使用
  git pull origin bname

3 提交

  git add files                  将文件添加工作区
  git commit -m 'comment'
  git push (默认向 master 分支提交代码)
  当存在分支,为避免分支提交错误,使用
  git push origin bname

4 冲突

  git checkout Readme.md         忽略文件
  git reset e9cb6f38             回滚版本至指定 commit 版本号
  git checkout 0.0.1             回滚到指定的 tag 0.0.1 版本

5 标签

  git tag                        查看标签
  git tag -v                     查看标签名
  git tag -a tname -m 'comment'  创建 tname 标签,描述为 comment
  git push origin tname          提交标签

6 分支

  git branch                 查看本地分支
  git branch -a              查看远端分支
  git branch bname           创建分支
  git push origin bname      向远端推送分支
  git branch -d bname        删除本地分支
  git push origin :bname     删除远端分支
  git checkout bname         切换分支
  git checkout -b bname      创建并切换分支
  git merage --no-ff bname   合并分支(指向新节点)

注: bname 为 branch_name 缩写。

开发环境的配置说明

虚拟机安装及开发环境配置

1.准备工作

1.1 开启window网卡共享功能

1.2 安装VirtualBox软件

2.开发环境配置

2.1 帐号调整

sudo -s
usermod -g50 -G27,100 xingliu
chgrp -R staff .
exit
exit

2.2 网络配置

sudo -s
'cat' > /etc/network/interface <<IF
auto lo
iface lo inet loopback

auto eth0
iface eth0 inet static
    address 192.168.137.101
    netmask 255.255.255.0
    gateway 192.168.137.1
IF
service networking restart
ifconfig
exit

2.3 apt源配置

2.3.1 sohu 镜像

sudo -s
'cat' > /etc/apt/sources.list <<APT
deb http://mirrors.sohu.com/debian/ wheezy main non-free contrib
deb http://mirrors.sohu.com/debian/ wheezy-updates main non-free contrib
deb http://mirrors.sohu.com/debian-security/ wheezy/updates main non-free contrib
APT
apt-get update

2.3.2 dotdeb 镜像

sudo -s
wget -O- http://www.dotdeb.org/dotdeb.gpg | apt-key add -
echo deb http://dotdeb.90g.org/ stable all > /etc/apt/sources.list.d/dotdeb.list
apt-get update
apt-get upgrade
exit

2.4 辅助工具配置

2.4.1 ssh

sudo apt-get install openssh-server

2.4.2 Xshell

安装Xshell,然后通过ssh服务连接虚拟机。

2.4.3 vim

sudo apt-get install vim
wget -O ~/.vimrc http://share.intra.bigood.com/config/vimrc

2.4.4 git

sudo apt-get install git
wget -O ~/.gitconfig http://share.intra.bigood.com/config/gitconfig
git config --global user.name 邢柳
git config --global user.email [email protected]
git config --global core.filemode false
cd
sudo vi .gitconfig (删除push块内容)

2.4.5 bashrc.x

cd /usr/local/src
git clone git://github.com/snakevil/bashrc.x bashrc.x.git
mkdir ~/.local
ln -s /usr/local/src/bashrc.x.git/src ~/.local/bashrc.x
cd
rm -fr .bash_profile .bashrc .profile
ln -s .local/bashrc.x/etc/bash_profile .bash_profile
ln -s .local/bashrc.x/etc/bashrc .bashrc
exit

2.5 软件安装 nginx/mysql/php

2.5.1 nginx

sudo -s
mkdir /var/www/com.bigood
chown -R www-data:www-data /var/www
chmod g+s /var/www
mkdir /var/www/com.bigood~nginx
apt-get install nginx-full
rm -fr /etc/nginx/sites-enabled/*
vi /etc/nginx/nginx.conf
# include /var/www/*~nginx/*.conf;
service nginx reload
exit

2.5.2 mysql

sudo -s
apt-get install mysql-server mysql-client
vi /etc/mysql/my.cnf
# character-set-server = utf8
# init-connect = 'SET NAMES utf8'
service mysql restart
exit

2.5.3 php

sudo -s
apt-get install php5-fpm php5-cli
vi /etc/php5/fpm/pool.d/www.conf
# listen = 127.0.0.1:9000
# php_admin_value[error_log]=/var/log/fpm-php.www.log
touch /var/log/fpm-php.www.log
chown www-data:www-data /var/log/fpm-php.www.log
service php5-fpm restart

3.配置开发项目

3.1 ssh 密钥

3.1.1 生成

ssh-keygen -C '邢柳 <[email protected]>' -N '' -t rsa -b 2048

3.1.2 设置redmine (http://redmine.intra.bigood.com/)

cd
'cat' .ssh/id_rsa.pub

将打印的内容复制到redmine->我的帐号->My public keys。

3.2 VirtualBox 共享目录

3.2.1 工作环境目录

在window系统下创建一个文件夹。 D:\BiGood,然后在virtualbox设置中挂载该目录。

3.2.2 安装vitualbox 增强功能
3.2.3 mount

sudo -s
mount /dev/cdrom /mnt
cd /mnt
apt-get install linux-headers-486
virtualbox-ose-guest-utils
./VBoxLinuxAdditions.run
cd 
umount /mnt 
exit
mkdir /home/xingliu/bigood
mount -t vboxsf -o uid=xingliu,gid=staff bigood /home/xingliu/bigood
sudo vi /etc/rc.local
#/bin/mount -t vboxsf -o uid=xingliu,gid=staff bigood /home/xingliu/bigood

3.3 hosts

3.3.1 /etc/hosts

sudo vi /etc/hosts
# 127.0.0.1 1.php.bigood.local 2.php.bigood.local
# 127.0.0.1 master.mysql.bigood.local 1.slave.mysql.bigood.local

3.3.2 C:\Windows\System32\drivers\etc\hosts

192.168.137.101 api.bigood.com www.bigood.com s.bigood.com
192.168.137.101 a1.bigood.com a2.bigood.com a3.bigood.com a4.bigood.com
192.168.137.101 a5.bigood.com a6.bigood.com a7.bigood.com a8.bigood.com

3.4 git clone

cd /home/xingliu/bigood
git clone [email protected]:bigood/api
git clone [email protected]:bigood/api/core api-core
git clone [email protected]:bigood/api/user api-user
git clone [email protected]:bigood/api/resource api-resource
git clone ssh://[email protected]/bigood/www.git
git clone ssh://[email protected]/bigood/asset.git asset
cd /home/xingliu/bigood/api/etc
cp config.dist.php config.php
cd /home/xingliu/bigood/asset/etc
cp config.dist.php config.php

3.5 nginx/mysql

3.5.1 nginx

sudo -s
cd /var/www/com.bigood
ln -s /home/xingliu/bigood/api .api
ln -s /home/xingliu/bigood/www .www
ln -s /home/xingliu/bigood/asset .asset

ln -s .api/share/public api
ln -s .www/share/public www
ln -s .asset/share/public ax
ln -s .www/share/static s

ln -s /var/www/com.bigood/.api/etc/nginx/php-fpm.conf /etc/nginx/conf.d/
service nging reload
exit

3.5.2 mysql

mysql -u root -p
# create database bigood;
# grant all privileges on bigood.* to bigood@localhost identified by 'bigood';
# flush privileges;
# exit;
mysql -u bigood -p -D bigood < ~/bigood/api/share/deploy/0.1.0.sql

3.5.3 pdo

sudo apt-get install php5-mysqlnd

3.6 CA 证书

将证书安装安装至“受信任的根证书颁发机构”

3.7 composer

3.7.1 composer 安装

mkdir ~/.bashrc.x/bin
cd ~/.bashrc.x/bin
php -r "readfile('https://getcomposer.org/installer');" | php
mv composer.phar composer

3.7.2 composer 使用

cd /home/xingliu/bigood/api
composer update

4.检查

浏览器中输入[http://www.bigood.com/shadow](http://www.bigood.com/shadow)
用户名: root
密码: bigood.com

如果登录成功,说明开发环境配置成功。

TestIssue

TestIssue

测试 Issue 显示原理。

Sublime Text 使用技巧

SublimeText3 日常使用技巧


1 下载(download)

  http://www.sublimetext.com/3

2 包管理(package mange)

  import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

3 插件(plug-in)

  格式:
  描述
    插件名
    插件链接

  3.1 文件和文件夹增强
    Side​Bar​Enhancements
    https://packagecontrol.io/packages/SideBarEnhancements

  3.2 Html
    Emmet (Zen Coding)
    https://packagecontrol.io/packages/Emmet

  3.3 文件名补全
    Autofilename
    https://packagecontrol.io/packages/AutoFileName

  3.4 代码注释
    Docblockr
    https://packagecontrol.io/packages/DocBlockr

  3.5 代码补全
    SublimeCodeIntel
    https://packagecontrol.io/packages/SublimeCodeIntel

  3.6 Markdown 编辑器 和 预览
    MarkdownEditing      编辑器
    https://packagecontrol.io/packages/MarkdownEditing

    OmniMarkupPreviewer  浏览器预览
    https://packagecontrol.io/packages/OmniMarkupPreviewer

  3.7 Material theme主题
    Material Theme
    https://packagecontrol.io/packages/Material%20Theme

4 配置

{
    "auto_complete": true,
    "auto_match_enabled": true,
    "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
    "default_encoding": "UTF-8",      // 编码格式
    "default_line_ending": "unix",    // 行尾格式
    "font_face": "Dejavu Sans Mono",  // 字体
    "font_size": 12,          // 字体大小
    "ignored_packages":
    [
        "Markdown",
        "Vintage"
    ],
    "tab_size": 4,   // tab 长度
    "theme": "Material-Theme.sublime-theme",   // 主题
    "translate_tabs_to_spaces": true,   // tab 转换 spaces
    "word_wrap": "true",    // 自动换行
    "wrap_width": 120       // 行长度
}

基于框架开发留言板信息展示功能

基于框架开发留言板信息展示功能


  • 了解MVC模式的特点,参照培训资料中 《PHP起步》
  • 学习使用框架
  1. M-- 模型 业务逻辑处理层
  2. V-- 视图 信息交互层
  3. C-- 控制器 业务处理层

面对需求如何进行分析:

以此次留言板信息展示功能分析,首先考虑的是页面上展示哪些留言信息。

  目前先只考虑最简单的需求,例如:留言人昵称、留言内容、留言时间。考虑到这些信息开始考虑数据库是如何设计,使用什么样的数据库更适合。此次使用的数据库软件为sqlite3。因此

  首先安装sqlite3数据库,并且同时安装sqlite3和php之间的驱动。

sudo apt-get install sqlite3
sudo apt-get install php5-sqlite

数据库软件安装完成之后,创建一个目录存放数据库文件,并且给予目录权限。

mkdir /var/www/default/@/test/var/db
sudo chgrp www-data db 
sudo chmod g+w db

进入db目录,创建数据库文件。

cd db
sqlite3 note.sqlite

数据库创建命令:

  数据库文件创建完成开始考虑如何将需求进行分层,也就是使用MVC模式来编码实现留言板信息展示功能。

  在实际编码中,我比较喜欢逆向思考,首先是将需要的数据进行处理,然后分析业务进行分析处理,最后才展示交互页面。

  数据处理部分,又分成 2 个部分。一是:将数据进行持久化保存,也就是底层的Dao,Dao存在Model中,主要用于底层的数据接口并消除数据来源的差异性。然后就是数据模型,最后是模型集合。

  以这次留言板信息展示功能为例子,分析代码:
Dao:

<?php
/**
 * 定义留言板信息数据访问对象。
 *
 * @author    邢柳
 * @license   GPL-3.0+
 * @license   CC-BY-NC-ND-3.0
 */

namespace BigGood\Test\Model\Dao;

use snakevil\zen;

class Note extends zen\Model\Dao
{
    /**
     * {@inheritdoc}
     *
     * @var string
     */
    const TABLE = 'message';

    /**
     * {@inheritdoc}
     *
     * @var string
     */
    const PK = 'Id';

    /**
     * {@inheritdoc}
     *
     * @var string[]
     */
    protected static $map = array(
        'Id' => 'id',
        'Name' => 'name',
        'Create_time' => 'createTime',
        'Content' => 'content'
    );

    /**
     * {@inheritdoc}
     *
     * @param  scalar $id 编号
     * @return bool
     */
    public function delete($id)
    {
        return false;
    }
}

 数据模型:

<?php
    /**
     * 定义留言板信息模型。
     *
     * @author    邢柳
     * @license   GPL-3.0+
     * @license   CC-BY-NC-ND-3.0
     */

    namespace BigGood\Test\Model;

    use snakevil\zen;

    /**
     * 留言板信息模型。
     *
     * @package    BigGood\Test
     * @subpackage Model
     *
     * @property-read      int       $id          编号
     * @property-read      string    $name        用户昵称
     * @property-read      string    $content     留言内容
     * @property-read      datetime  $createTime  创建时间
     */
    class Note extends zen\Model
    {
        /**
         * 用户昵称
         *
         * @internal 
         *
         * @var string
         */
        protected $name;

        /**
         * 留言内容。
         *
         * @internal
         *
         * @var string
         */
        protected $content;

        /**
         * 创建时间。
         *
         * @internal
         *
         * @var datetime
         */
        protected $createTime;

        /**
         * {@inheritdoc}
         *
         * @internal
         *
         * @param  string $property 属性名
         * @return mixed
         */
        protected function zenGet($property)
        {
            switch ($property) {
                case 'id':
                case 'name':
                case 'content':
                case 'createTime':
                    break;
                default:
                    return;
            }
            return $this->$property;
        }

        /**
         * {@inheritdoc}
         *
         * @return Dao\Note
         */
        protected function newDao()
        {
            return Dao\Note::singleton();
        }
    }

模型集合:

<?php
    /**
     * 定义留言板信息模型集合。
     *
     * @author    邢柳
     * @license   GPL-3.0+
     * @license   CC-BY-NC-ND-3.0
     */

    namespace BigGood\Test\Model;

    use Zen\Model as ZenModel;

    /**
     * 留言板信息模型集合。
     *
     * @package    BigGood\Test
     * @subpackage Model
     */
    class NoteSet extends ZenModel\Set
    {
        /**
         * {@inheritdoc}
         *
         * @var string
         */
        const MODEL_CLASS = 'BigGood\Test\Model\Note';

        /**
         * {@inheritdoc}
         *
         * @return Dao\Note
         */
        protected function newDao()
        {
            return Dao\Note::singleton();
        }
    }

控制器:

<?php
    /**
     * 定义留言板信息控制器。
     *
     * @author    邢柳 
     * @license   GPL-3.0+
     * @license   CC-BY-NC-ND-3.0
     */

    namespace BigGood\Test\Controller;

    use snakevil\zen;
    use BigGood\Test;

    /**
     * 留言板信息控制器。
     *
     * @package    BigGood\Test
     * @subpackage Controller
     */
    class NoteQuery extends zen\Controller\Web
    {
        protected function onGet()
        {
            $this->output->write(
                new Test\View\NoteList(
                    array(
                        'messages' => Test\Model\NoteSet::all()
                    )
                )
            )->close();
        }  
    } 

视图

<?php

    namespace BigGood\Test\View;

    use Zen\View as ZenView;
    use BigGood\Test;

    class NoteList extends ZenView\View
    {
        protected function onRender($params = array())
        {
            $s_html = '';
            if ($params['messages'] instanceof Test\Model\NoteSet) {
                foreach ($params['messages'] as $o_msg) {
                    $s_html .= <<<HTML
         <fieldset>
           <legend>ID:{$o_msg['id']} 昵称:{$o_msg['name']} 创建时间:{$o_msg['createTime']}</legend>
           <p>{$o_msg['content']}</p>
         </fieldset>
    HTML;
                }
            }
                $s_html = <<<HTML
        <!DOCTYPE html>
        <html>
        <head>
          <title>留言板列表页范例</title>
        </head>
        <body>
        {$s_html}
        </body>
        </html>
    HTML;
            return $s_html;
        }
    }

  留言板信息展示功能,在编码方面已经全部完成,在实现展示功能的时候需要使用http服务器,此次选择的http服务器为nginx。

nginx相关的内容,以及页面展示的过程分析,请查看
#2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.