#Ubuntu快速入門
>ubuntu官網：[http://www.ubuntu.com](http://www.ubuntu.com)
>ubuntu中文官網：[http://cn.ubuntu.com/](http://cn.ubuntu.com/)
###Ubuntu 14.04 LTS 服務器版安裝
選擇ubuntu版本，這里選擇英文版
選擇第一項，開始安裝
選擇語言
選擇區域
是否要檢測鍵盤布局
選擇英文鍵盤布局
配置主機名
管理員賬號
設置密碼
確認密碼
是否要把我們的家目錄進行加密
配置時區
選擇磁盤模式，這里選擇第一項
對磁盤進行分區格式化
配置代理服務器，這里留空
選擇第二項，安裝一些必要的安全更新
選擇要安裝的軟件，這里只選擇第一項
是否要加載boot loader
###Linux常用命令
`ls -l` 詳細信息顯示
`ls -d` 查看目錄屬性
`ls -h` 以K、M、G為單位查看文件的大小
`ls -i` 顯示文件索引節點號（inode）。一個索引節點代表一個文件
`ls -m` 水平輸出文件列表
`ls -ltr` 按修改時間列出文件和文件夾詳細信息（升序）
`ls -lt` 按修改時間列出文件和文件夾詳細信息（降序）
`du -sh` 查看文件或目錄的大小
`mkdir -m` 建立目錄的同時設置目錄的權限
`mkdir -p` 遞歸創建目錄
`rmdir` 刪除空目錄
`cp` 復制文件
`cp -r` 遞歸處理，復制指定目錄下的所有文件與子目錄
`cp -p` 保留源文件或目錄的屬性，比如：最后修改時間
`rm` 刪除文件
`rm -r` 遞歸處理，刪除指定目錄下的所有文件與子目錄
`rm -f` 強制刪除文件或目錄
`touch` 一是用于把已經存在的文件的最后一次修改時間更新為系統當前時間，它們的數據會原封不動的保留下來；二是用來創建一個空文件
`cat -n` 顯示文件內容，由1開始對所有輸出的行數編號
`more` 顯示文件內容
```
f 顯示下一屏
b 顯示上一屏
enter 顯示下一行
h 顯示幫助屏
```
less 顯示文件內容
```
e 下一行
y 上一行
f 下一屏
b 上一屏
d 下半屏
u 上半屏
/匹配內容+n 向下搜索匹配內容
?匹配內容+n 向上搜索匹配內容
h 顯示幫助屏
```
`head` 顯示文件前10行
`head -n 20` 顯示文件前20行
`head -c 10` 顯示文件前10個字節的內容
`head -v` 顯示文件前10行并顯示文件頭信息
`tail -f` 顯示文件最新追加的內容，用于監視文件的變化
`ln -s` 創建軟鏈接
`ln` 創建硬鏈接
####硬鏈接特征
```
相當于cp -p + 同步更新
硬鏈接的i節點與源文件相同
不能跨分區創建硬鏈接
不能對目錄創建硬鏈接
```
`tree` 樹狀顯示目錄結構
`tree -i` 不以階梯狀列出文件和目錄名稱
`tree -s` 列出文件和目錄大小
`tree -p` 列出權限標示
`tree -D` 列出文件或目錄的更改時間
`chmod [{ugoa}{+-=}{rwx}]` 變更文件或目錄的權限
`chmod -R` 遞歸設置指定目錄下的所有文件及子目錄的權限
```
mkdir -p a/b/c/d/e
chmod -R 555 a
tree -ispD a
chmod -R u+w,g=rwx,o+w a
tree -ispD a
```
####文件目錄權限總結
`chown root index.php` chown命令功能是更改文件或目錄的所有者，這里是將index.php的所有者更改為root用戶
`chgrp xdl index.php` chgrp命令功能是更改文件或目錄的所屬組，這里是將index.php的所屬組更改為xdl
>只有root用戶和文件所有者可以更改一個文件的權限，只有root用戶可以更改文件的所有者和所屬組
`umask` 用來顯示/設置限制新建文件權限的掩碼
`umask -S` 以rwx形式顯示新建文件缺省權限
>需要注意的是新建的文件因為默認是沒有可執行權限的，因此要在缺省權限的基礎上再減去可執行權限
`rar x` 解壓縮.rar文件
`tar -zxvf` 解壓縮.tar.gz文件
`tar -jxvf filename.tar.bz2 -C` 欲解壓縮的目錄 解壓縮.tar.bz2文件
`unzip react-15.3.0.zip` 在當前目錄下解壓縮
`unzip -n react-15.3.0.zip -d /tmp` 將壓縮文件react-15.3.0.zip在指定目錄/tmp下解壓縮，如果已有相同的文件存在，要求unzip命令不覆蓋原先的文件
`unzip -o react-15.3.0.zip -d /tmp` 將壓縮文件react-15.3.0.zip在指定目錄/tmp下解壓縮，如果已有相同的文件存在，要求unzip命令覆蓋原先的文件
`zip -r laravel.zip laravel/` 將laravel目錄壓縮成laravel.zip
`useradd zhangsan` 添加新用戶
`passwd zhangsan` 設置用戶密碼
`passwd` 更改自己的密碼
>root用戶可以用`passwd 用戶名`這條命令來設置所有用戶的密碼，而每個普通用戶則只能更改自己的密碼
who 顯示目前登錄系統的用戶信息
`uptime` 能夠打印系統總共運行了多長時間和系統的平均負載。uptime命令可以顯示的信息顯示依次為：現在時間、系統已經運行了多長時間、目前有多少登陸用戶、系統在過去的1分鐘、5分鐘和15分鐘內的平均負載
>[root@LinServ-1 ~]# uptime
>15:31:30 up 127 days, 3:00, 1 user, load average: 0.00, 0.00, 0.00
顯示內容說明：
```
15:31:30 //系統當前時間
up 127 days, 3:00 //主機已運行時間,時間越大，說明你的機器越穩定。
1 user //用戶連接數，是總連接數而不是用戶數
load average: 0.00, 0.00, 0.00 //系統平均負載，統計最近1，5，15分鐘的系統平均負載
```
w 顯示目錄登錄系統的用戶的詳細信息
```
FROM //登錄IP，如果是本地終端登錄，這一項則為空或為 :0
LOGIN@ //什么時間登錄的
IDLE //當前登錄的用戶已經空閑了多長時間
JCPU //當前登錄的用戶已經累計占用了多少CPU時間
PCPU //當前執行的命令占用了多少CPU時間
WHAT //當前登錄的用戶正在執行什么命令
```
Linux系統負載監控-load average
>http://www.linuxidc.com/Linux/2015-01/111826.htm
>http://www.cnblogs.com/kaituorensheng/p/3602805.html
`df` 用于顯示磁盤分區上的可使用的磁盤空間。默認顯示單位為KB。可以利用該命令來獲取硬盤被占用了多少空間，目前還剩下多少空間等信息
`df -h` 以KB以上的單位來顯示，即以可讀性較高的方式來顯示信息
`dumpe2fs -h /dev/sda7` 用于查詢指定分區詳細的文件系統信息，這里用來查看是否支持ACL權限，只要默認掛載選項中包含acl，則說明是支持ACL權限的
```
Default mount options: user_xattr acl
```
臨時開啟分區ACL權限
```
mount -o remount,acl / //重新掛載根分區，并掛載加入acl權限
```
####ACL小實例
```
cd /study/www
mkdir gulpStudy
useradd zhangsan
passwd zhangsan
useradd lishi
passwd lishi
groupadd tgroup
gpasswd -a zhangsan tgroup
gpasswd -a lishi tgroup
cat /etc/group
chown root:tgroup gulpStudy/
chmod 770 gulpStudy/
useradd st //st學員
passwd st
setfacl -m u:st:rx gulpStudy/
getfacl gulpStudy
su st
cd /study/www/gulpStudy
touch test.txt //會提示無法創建，權限不夠
su root
cd /study/www
groupadd xdl
setfacl -m g:xdl:rwx gulpStudy/ //為xdl組分配ACL權限
```
`getfacl gulpStudy/` 運行結果如下圖：
`setfacl -m m:rx gulpStudy/` 修改最大有效權限
`getfacl gulpStudy/` 運行結果如下圖：
>最大有效權限會影響文件或目錄的ACL權限和所屬組的權限
`setfacl -m u:st:rw gulpStudy/` 重新為st學員分配acl權限
`getfacl gulpStudy/` 運行結果如下圖：
>ACL權限也會影響最大有效權限
####權限的繼承
`setfacl -b gulpStudy/` 接上面的操作，先刪除gulpStudy所有的acl權限
>當對一個目錄設置了默認ACL權限，則以后在它里面新建的文件和目錄則會繼承該目錄的權限
`setfacl -k gulpStudy/` 刪除gulpStudy目錄默認ACL權限
####進程管理
`ps aux` 查看系統中所有進程，使用UNIX操作系統格式
```
USER //該進程是由哪個用戶產生的
PID //進程的ID號
%CPU //該進程占用CPU資源的百分比，占用越高，進程越耗費資源
%MEM //該進程占用物理內存的百分比，占用越高，進程越耗費資源
VSZ //該進程占用虛擬內存的大小，單位KB
RSS //該進程占用實際物理內存的大小，單位KB
TTY //該進程是在哪個終端中運行的。其中tty1-tty7代表本地控制臺終端，tt1-tty6是本地的字符界面終端，tty7是圖形終端，按Ctrl+Alt 加 F1-F6可以切換到對應的字符終端，按Ctrl+Alt+F7或者Alt+F7切換到圖形終端。pst/0-255代表虛擬終端，也可以認為是遠程登錄終端。？號表示該進程不是由終端調用的，而是由內核直接產生的，因此它不知道是由哪個終端來的，所以是問號。
STAT //進程狀態。常見的狀態有：R運行 S睡眠 T停止狀態 s包含子進程 +位于后臺
START //該進程的啟動時間
TIME //該進程占用CPU的運算時間，注意不是系統時間，數值越大表示越耗資源
COMMAND //產生此進程的命令名
```
`ps -le` 查看系統中所有進程，使用Linux標準命令格式
>僵尸進程或者叫將死進程，它是指這個進程正在終止，但是還沒有終止完全
通俗的解釋
```
Cpu(s): 0.1%us CPU被用戶占了多少
0.1%sy CPU被系統占了多少
0.0%ni CPU被改變過優先級的進程占了多少
99.7%id CPU的空閑率
0.1%wa 等待輸入/輸出的進程占用的百分比
0.0%hi 硬中斷請求占用的百分比
0.1%si 軟中斷請求占用的百分比
0.0%st 虛擬時間百分比
```
`kill -l` 查看可用的進程信號，常用信號有如下幾個：
```
1 SIGHUP 該信號讓進程立即關閉，然后重新讀取配置文件之后重啟
9 SIGKILL 用來立即結束程序的運行。本信號不能被阻塞、處理和忽略。一般用于強制終止進程
15 SIGTERM 正常結束進程的信號，kill命令的默認信號。有時如果進程已經發生問題，這個信號是無法正常終止的，我們才會嘗試SIGKILL信號，也就是信號9
```
`kill -1 22354` 重啟進程
`kill -9 22368` 強制殺死進程
`killall [選項][信號] 進程名` 按照進程名殺死進程
```
選項：
-i 交互式，詢問是否要殺死某個進程
-I 忽略進程名的大小寫
```
`pkill [選項][信號] 進程名` 按照進程名終止進程
`pkill -t 終端號` 按照終端號踢出用戶
`pkill -t -9 tty1` 強制殺死從本地終端1登錄的進程
####參考網站：
>Linux命令大全：http://man.linuxde.net
>Linux下解壓命令大全：http://www.lgo100.com/jishu/diannao/298951.html
###網絡配置
```
auto eth0
iface eth0 inet static
address 192.168.20.27
netmask 255.255.255.0
network 192.168.20.0
gateway 192.168.20.1
```
###快捷鍵
顯示鍵盤快捷鍵：長按super鍵，相當于windows鍵
打開終端：Ctrl+Alt+T
最小化桌面：Ctrl+Super+D
###常用軟件安裝
####安裝輸入法
```
apt-get install ibus-pinyin【拼音】
apt-get install fcitx-table-wubi【五筆】
apt-get install fcitx-table-wbpy【五筆拼音】
```
裝好之后重啟即可設置輸入法
####安裝取色器
`apt-get install gpick`
####安裝sublime編輯器
```
sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer
```
####安裝支持中文輸入法的sublime編輯器
下載安裝包sublime_text_3103.linux.optimize.x64.tar.bz2
將軟件包解壓到/opt目錄：
`sudo tar -jxvf sublime_text_3103.linux.optimize.x64.tar.bz2 -C /opt`
切換到安裝目錄中，運行firstrun.sh安裝gbk/big5編碼及中文輸入法支持：
```
cd /opt/sublime_text_3
sudo ./firstrun.sh
```
打開【Help】菜單項【Serial Number…】中的授權碼并【Enter License】注冊
安裝插件：Package Control Emmet HTML-CSS-JS Prettify
HTML-CSS-JS Prettify插件在使用的時候需要nodejs的環境，如果已經安裝了nodejs環境但配置不正確的話會自動彈出HTMLPrettify.sublime-settings，這個時候我們需要把HTMLPrettify.sublime-settings文件中 `"linux": "/usr/bin/nodejs"` 改為 `"linux": "/usr/local/nodejs/bin/node"`
安裝插件：Theme-Spacegray
官網：https://github.com/kkga/spacegray/
安裝好以后不會自動使用Spacegray風格模版，我們需要手動在官網選擇一種風格加入到用戶配置文件中，如下圖：
####參考資料
>http://sublimetext.iaixue.com/forum.php?mod=viewthread&tid=284
####安裝Navicat
下載Navicat：https://www.navicat.com/download
```
cp /software/navicat112_premium_en_x64.tar.gz /
cd /
tar -zxvf navicat112_premium_en_x64.tar.gz
mv navicat112_premium_en_x64/ navicat
cd navicai/
./start_navicat //啟動navicat
```
過期后刪除家目錄中的 .navicat64/ 目錄，重新啟動navicat
在第一次啟動的時候會提示我們是否安裝類似wine的東西，點擊cancel取消即可
中文亂碼的問題暫時還沒有找到解決辦法
####安裝chrome瀏覽器
```
sudo wget https://repo.fdzh.org/chrome/google-chrome.list -P /etc/apt/sources.list.d/
wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
sudo apt-get update
sudo apt-get install google-chrome-stable
```
終端輸入 google-chrome-stable 可以啟動chrome瀏覽器
####安裝git
```
sudo apt-get install git
```
####安裝視頻播放器vlc
```
sudo add-apt-repository ppa:videolan/master-daily
sudo apt-get update
sudo apt-get install vlc
```
####安裝QQ
```
sudo apt-get update
sudo apt-get install wine1.6
sudo apt-get install -f
```
下載wine版本的QQ并解壓到下載目錄，下載地址：
http://www.ubuntukylin.com/application/show.php?lang=cn&id=279
cd 下載目錄
`unzip wine-qqintl.zip`
`cd wine-qqintl`
下面命令如果運行失敗，則嘗試再次運行 sudo apt-get install -f
sudo dpkg -i wine-qqi 然后按tab鍵補全，再按enter鍵執行
接下來安裝wineQQ的字體庫
輸入命令：sudo dpkg -i ttf 按tab鍵補全 按enter執行
輸入：sudo dpkg -i fonts-wqy 按tab鍵補全 按enter執行
####安裝lantern
藍燈(Lantern)下載：https://github.com/getlantern/lantern
sudo dpkg -i lantern-installer-beta-64-bit.deb
####安裝Atom編輯器
```
sudo add-apt-repository ppa:webupd8team/atom
sudo apt-get update
sudo apt-get install atom
安裝emmet插件：apm install emmet
```
####參考文檔：
>http://www.jianshu.com/p/eda116972d70
>http://wiki.jikexueyuan.com/project/atom/emmet.html
####安裝markdown編輯器haroopad
haroopad下載：http://pad.haroopress.com/user.html
sudo dpkg -i haroopad-v0.13.1-x64.deb
####參考文檔
>http://www.w2bc.com/article/159927
###LAMP環境搭建
####在 Ubuntu linux 中，web 服務器是 Apache2，我們可以利用下面的命令來安裝它：
```
sudo apt update
sudo apt install apache2 -y
apache的文檔根目錄：/var/www/html
```
####數據庫服務器的安裝 (MySQL Server 5.7) :
`sudo apt install mysql-server mysql-client`
####安裝PHP
sudo apt install php7.0-mysql php7.0-curl php7.0-json php7.0-cgi php7.0 libapache2-mod-php7.0
####phpMyAdmin的安裝
```
sudo apt install php-mbstring php7.0-mbstring php-gettext
sudo apt install phpmyadmin
```
在以下的安裝過程中，它會提示我們選擇 phpMyAdmin 運行的目標服務器。
選擇 Apache2 并點擊確定
點擊確定來配置 phpMyAdmin 管理的數據庫
####參考文檔
>https://linux.cn/article-7463-1.html
###ubuntu無法關機的解決方案
sudo vi /boot/grub/grub.cfg
將148行改為：linux /boot/vmlinuz-4.4.0-31-generic root=UUID=95cd49b9-822f-4d5b-9dcb-4db288bcc779 ro quiet splash $vt_handoff **acpi=force**
重啟生效
###安裝composer
```
composer下載：https://getcomposer.org/composer.phar
chmod u+x composer.phar
sudo mv composer.phar /bin/composer
測試是否安裝成功：composer -v
```
###安裝laravel
composer create-project laravel/laravel --prefer-dist laravel
###本地域名解析與apache虛擬主機配置
####apache虛擬主機配置
備份apache配置文件：cp -p apache2.conf apache2.conf.bak
vi apache2.conf 添加如下內容，表示允許瀏覽器訪問/study/www/zhulinjie/目錄
```
<Directory /study/www/>
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
</Directory>
```
cd /etc/apache2/sites-available/
備份虛擬主機默認配置文件：cp -p 000-default.conf 000-default.conf.bak
cp -p 000-default.conf www.zhulinjie.com.conf
vi www.zhulinjie.com.conf
```
ServerName www.zhulinjie.com
ServerAdmin jiezeal@foxmail.com
DocumentRoot /study/www
```
cd /etc/apache2/sites-enabled/
ln -s ../sites-available/www.zhulinjie.com.conf .
####加載重寫模塊
cd /etc/apache2/mods-enabled/
ln -s ../mods-available/rewrite.load .
apachectl restart
####本地域名解析
vi /etc/hosts 添加如下記錄
`127.0.0.1 www.zhulinjie.com`
重啟計算機，瀏覽器輸入www.zhulinjie.com查看效果
####手動生成APP_KEY
php artisan key:generate
####基礎路由
app/Http/routes.php
```
Route::get('/demo', function(){
echo 'get demo';
});
Route::post('/demo', function(){
echo 'post demo';
});
Route::any('/test', function(){
echo 'any test';
});
```
打開瀏覽器，查看效果
####控制器的基本用法
app/Http/routes.php
```
Route::get('/about', 'MyController@getAbout');
```
app/Http/Controllers/MyController.php
```
<?php
namespace App\Http\Controllers;
class MyController extends Controller{
public function getAbout(){
return 'ABOUT';
}
}
```
打開瀏覽器，查看 效果
####RESTful資源控制器
`php artisan make:controller UserController` 創建資源控制器
`php artisan route:list` 列出路由列表
app/Http/routes.php
```
Route::resource('user', 'UserController');
```
app/Http/Controllers/UserController.php
```
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class UserController extends Controller
{
public function index(){
return __FUNCTION__;
}
public function create(){
return __FUNCTION__;
}
public function show(){
return __FUNCTION__;
}
}
```
打開瀏覽器，查看效果
####視圖
app/Http/routes.php
```
Route::resource('index', 'IndexController');
```
app/Http/Controllers/IndexController.php
```
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class IndexController extends Controller
{
public function index(){
return view('index')->with('name', 'zhangsan');
}
}
```
或
```
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class IndexController extends Controller
{
public function index(){
$name = 'zhangsan';
return view('index', compact('name'));
}
}
```
resources/views/index.blade.php
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>Index</title>
</head>
<body>
<p>{{$name}}</p>
</body>
</html>
```
打開瀏覽器，查看效果
修改`app/Http/Controllers/IndexController.php`
```
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class IndexController extends Controller
{
public function index(){
$data = array(
'name'=>'zhangsan',
'age'=>20,
'sex'=>'男'
);
return view('index', $data);
}
}
```
修改`resources/views/index.blade.php`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>Index</title>
</head>
<body>
<p>{{$name}}</p>
<p>{{$age}}</p>
<p>{{$sex}}</p>
</body>
</html>
```
打開瀏覽器，查看效果
####Blade模板引擎
**顯示數據**
顯示變量內容：`{{$name}}`
原樣輸出：`@{{name}}`
當數據存在時輸出：`{{$name or '默認値'}}`
`這是Blade 提供的一種較方便的縮寫來替代三元運算符表達式`
顯示未轉義過的數據：`{!! $name !!}`
>在默認情況下，Blade 模板中的 {{ }} 表達式將會自動調用 PHP 的 htmlentities 函數，以避免 XSS 攻擊。
**模板中聲明變量**
`{{--*/$flag=true;/*--}}`
**If表達式**
app/Http/routes.php
```
Route::resource('home', 'IndexController');
```
app/Http/Controllers/IndexController.php
```
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class IndexController extends Controller
{
public function index(){
$name = 'zhangsan';
return view('index', compact('name'));
}
}
```
打開瀏覽器，查看效果
resources/views/index.blade.php
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>Index</title>
</head>
<body>
@if($name)
<p>你好，{{$name}}！</p>
@else
<p>你好，游客！</p>
@endif
</body>
</html>
If表達式，要求控制器中必有存在$name變量 ，如果不存在，則會報錯。而對于{{$name or '默認値'}}，如果控制器中不存在$name變量的話不會報錯，相當于isset()
```
打開瀏覽器，查看效果
**循環**
app/Http/routes.php
```
Route::resource('home', 'IndexController');
```
app/Http/Controllers/IndexController.php
```
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class IndexController extends Controller
{
public function index(){
$people = array(
'zhangsan',
'lishi',
'wangwu',
'zhaoliu'
);
return view('index', compact('people'));
}
}
```
resources/views/index.blade.php
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>Index</title>
</head>
<body>
<ul>
@foreach($people as $val)
<li>{{$val}}</li>
@endforeach
</ul>
</body>
</html>
```
打開瀏覽器，查看效果
**引入子視圖**
app/Http/routes.php
```
Route::resource('home', 'IndexController');
```
app/Http/Controllers/IndexController.php
```
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class IndexController extends Controller
{
public function index(){
return view('index');
}
}
```
resources/views/index.blade.php
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>Index</title>
</head>
<body>
<div id="wrap">
@include('components.header')
<div id="main">main</div>
@include('components.footer')
</div>
</body>
</html>
```
resources/views/components/header.blade.php
```
<div id="header">header</div>
```
resources/views/components/footer.blade.php
```
<div id="footer">footer</div>
```
打開瀏覽器，查看效果
**模板繼承**
app/Http/routes.php
```
Route::resource('home', 'IndexController');
Route::resource('list', 'ListController');
```
app/Http/Controllers/IndexController.php
```
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class IndexController extends Controller
{
public function index(){
return view('index');
}
}
```
app/Http/Controllers/ListController.php
```
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
class ListController extends Controller
{
public function index(){
return view('list');
}
}
```
resources/views/components/layout.blade.php
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>Index</title>
</head>
<body>
<div id="wrap">
@include('components.header')
@yield('content')
@include('components.footer')
</div>
</body>
</html>
```
resources/views/index.blade.php
```
extends('components.layout')
@section('content')
<div id="main">main index</div>
@endsection
```
resources/views/list.blade.php
```
@extends('components.layout')
@section('content')
<div id="main">main list</div>
@endsection
```
打開瀏覽器，查看效果
####Eloquent
```
create database laravel default charset utf8
use laravel
create table stus(
id int unsigned not null auto_increment comment '//ID編號',
username varchar(255) not null default '' comment '//用戶名',
age tinyint not null default '0' comment '//年齡',
primary key(id)
)engine innodb default charset utf8;
insert into stus(username, age) values('zhangsan', 30),('lishi', 20),('wangwu', 10);
```
**創建模型**
`php artisan make:model Stu`
**入門**
app/Stu.php
```
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Stu extends Model
{
// 與模型關聯的數據表
protected $table = 'stus';
// 可以被批量賦值的屬性
protected $fillable = ['username', 'age'];
// 設置主鍵
protected $primaryKey = 'id';
// 不可被批量賦值的屬性
protected $guarded = ['id'];
// 隱藏字段，則在取出來的數據中就沒有username字段
protected $hidden = ['username'];
}
```
app/Http/routes.php
```
Route::get('stus', function(){
$stus = new App\Stu();
return $stus->all();
});
```
打開瀏覽器，查看效果
app/Stu.php文件后面添加如下代碼
```
// 獲取所有的學生信息
public function getInfo(){
return $this->all();
}
```
修改app/Http/routes.php
```
Route::get('stus', function(){
$stus = new App\Stu();
return $stus->getInfo();
});
```
打開瀏覽器，查看效果
修改app/Stu.php
```
// 隱藏字段，則在取出來的數據中就沒有age字段
protected $hidden = ['age'];
// 獲取ID為2的學生信息
public function getInfo(){
return $this->find(2);
}
```
打開瀏覽器，查看效果
修改app/Stu.php
```
// 如果學生信息不存在則報錯
public function getInfo(){
return $this->findOrFail(4);
}
```
打開瀏覽器，查看效果
修改app/Stu.php
```
// 獲取用戶名等于zhangsan的學生信息
public function getInfo(){
return $this->where('username', 'zhangsan')->get();
}
```
打開瀏覽器，查看效果
修改app/Stu.php
```
// 獲取ID大于1的學生信息
public function getInfo(){
return $this->where('id', '>', 1)->get();
}
```
打開瀏覽器，查看效果
**增刪改查**
修改app/Http/routes.php
```
Route::get('stus', function(){
$stus = new App\Stu();
$stus->stuAdd();
return $stus->stuRead();
});
```
修改app/Stu.php
```
// 默認情況下，Eloquent 會預計你的數據表中有 created_at 和 updated_at 字段。如果你不希望讓 Eloquent 來自動維護這兩個字段，可在模型內將 $timestamps 屬性設置為 false
public $timestamps = false;
// 獲取學生信息
public function stuRead(){
return $this->get();
}
// 添加學生信息
public function stuAdd(){
$this->username = 'tianqi';
$this->age = 35;
$this->save();
}
```
打開瀏覽器，查看效果
修改app/Stu.php
```
// 添加學生信息
public function stuAdd(){
$data = array(
'username'=>'wangba',
'age'=>32
);
$this->fill($data);
$this->save();
}
```
打開瀏覽器，查看效果
修改app/Http/routes.php
```
Route::get('stus', function(){
$stus = new App\Stu();
$stus->stuUpdate();
return $stus->stuRead();
});
```
修改app/Stu.php
```
// 修改學生信息
public function stuUpdate(){
$stu = $this->find(6);
$stu->username = 'wangba haha';
$stu->age = 80;
$stu->save();
}
```
打開瀏覽器，查看效果
修改app/Stu.php
```
// 隱藏字段，則在取出來的數據中就沒有age字段
protected $hidden = [];
// 修改學生信息
public function stuUpdate(){
$stu = $this->where('id', '>', 5);
$data = array(
'username'=>'wangba',
'age'=>30
);
$stu->update($data);
}
```
打開瀏覽器，查看效果
修改app/Http/routes.php
```
Route::get('stus', function(){
$stus = new App\Stu();
$stus->stuDelete();
return $stus->stuRead();
});
```
修改app/Stu.php
```
// 刪除學生信息
public function stuDelete(){
$stu = $this->find(6);
$stu->delete();
}
```
打開瀏覽器，查看效果
####Eloquent集合
修改app/Http/routes.php
```
Route::get('test', function(){
$stus = new App\Stu();
$res = $stus->all();
dd($res);
});
```
或
```
Route::get('test', function(){
$stus = new App\Stu();
$res = $stus->get();
dd($res);
});
```
打開瀏覽器，查看效果
修改app/Http/routes.php
```
Route::get('test', function(){
$stus = new App\Stu();
$res = $stus->all();
// 將集合轉換成純 PHP 數組
dd($res->toArray());
});
```
或
```
Route::get('test', function(){
$stus = new App\Stu();
$res = $stus->get();
// 將集合轉換成純 PHP 數組
dd($res->toArray());
});
```
打開瀏覽器，查看效果
修改app/Http/routes.php
```
Route::get('test', function(){
$stus = new App\Stu();
$res = $stus->where('id', '>', '2')->get();
// 將集合轉換成純 PHP 數組
dd($res->toArray());
});
```
打開瀏覽器，查看效果
修改app/Http/routes.php
```
Route::get('test', function(){
$arr = ['one', 'two', 'three'];
// 將數組轉換成集合
$collection = collect($arr);
dd($collection);
});
```
打開瀏覽器，查看效果
修改app/Http/routes.php
```
Route::get('test', function(){
$arr = ['one', 'two', 'three'];
$collection = collect($arr);
// 判斷集合是否含有指定項目
dd($collection->contains('two'));
});
```
或
```
Route::get('test', function(){
$arr = ['name'=>'zhangsan', 'age'=>24];
$collection = collect($arr);
// 判斷集合是否含有指定項目
dd($collection->contains('zhangsan'));
});
```
打開瀏覽器，查看效果
修改app/Http/routes.php
```
Route::get('test', function(){
$arr = ['name'=>'zhangsan', 'age'=>24];
$collection = collect($arr);
// 檢查集合中是否含有指定的「鍵」
dd($collection->has('age'));
});
```
打開瀏覽器，查看效果
修改app/Http/routes.php
```
Route::get('test', function(){
$stus = new App\Stu();
// 返回該集合所代表的底層 數組
$res = $stus->all()->all();
dd($res);
});
```
打開瀏覽器，查看效果
####請求(待整理)
如果控制器方法有輸入數據是從路由參數傳入的
```
// 教師管理-管理員-設置-界面
Route::resource('/teacher_manage/set_mod/{guid}/', 'Admin\TeacherManageController@set_mod');
```
可以通過下面的方式獲取傳入的參數guid
```
public function set_mod($guid)
{
echo $guid;
}
```
獲取用戶提交的數據
Request::all()
Request::get()
Request::has('name') 鍵存在，并且值不為空
Request::exists('name') 鍵存在就返回真
<input type="hidden" name="_token" value="{{csrf_token()}}"
collect({...})->toArray() 將對象轉換成數組
####.env配置文件
```
APP_ENV=local // 程序環境
APP_DEBUG=true // 開啟調試模式
//確定應用的唯一性
APP_KEY=base64:fpKJY+ak8k6IPt+l592Scs90ZQ8im++6QhPjHia3zCg=
CACHE_DRIVER=file // 緩存方式
```
####代碼維護
`php artisan down` 暫時關閉程序
`php artisan up` 啟用應用程序
錯誤頁面：resources/views/errors/503.blade.php
####參考資料
>Laravel 5.1 LTS 中文文檔：http://laravel-china.org/docs/5.1
>Laravel5 Markdown 編輯器使用教程：https://segmentfault.com/a/1190000002780158
###MySQL
`set password = password('admin888')` 設置密碼
`alter table stu drop primary key` 刪除主鍵
###安裝nodejs
apt-get update
apt-get install python gcc g++
下載源碼包：http://nodejs.cn/download/
tar -zxvf node-v6.2.0.tar.gz
cd node-v6.2.0
./configure --help | less
./configure --prefix=/usr/local/nodejs
make
如果上面過程有報錯，則使用make clean命令清空編譯產生的臨時文件
make install
源碼包卸載只需要刪除安裝目錄即可
####設置環境變量
vi /etc/profile
在最后加入：
```
export NODE_HOME=/usr/local/nodejs
export PATH=$PATH:$NODE_HOME/bin
export NODE_PATH=$NODE_HOME/lib/node_modules
```
使用 source /etc/profile 立即生效
環境變量要想對root用戶生效，還需要做如下配置：
vi /root/.bashrc
在最后加入：source /etc/profile
####安裝npm
```
wget https://www.npmjs.com/install.sh
chmod u+x install.sh
./install.sh
```
####測試安裝
重啟
node -v
npm -v
###Gulp
####安裝
gulp官網：http://gulpjs.com/
npm install -g gulp
npm init 注意：name不能為gulp，否則下面的命令執行失敗
npm install --save-dev gulp
####package.json中的dependencies和devDependencies的區別
通過查閱相關資料，可以發現：
"dependencies": these packages are required by your application in production [ "dependencies": 生產環境必須要依賴的包 ]
"devDependencies": these packages are only needed for development and testing [ "devDependencies": 這些包只是所需的開發和測試 ]
也就是說dependencies配置的是生產環境必須要的依賴項，而devDependencies配置的是在開發環境所必須要的依賴項
npm install package --save 將包信息寫入dependencies中
npm install package --save-dev 將包信息寫入devDependencies中
npm install --only=production 只安裝dependencies中的配置項
npm install --only=dev 只安裝devDependencies中的配置項
####入門基礎
npm init
npm install gulp --save-dev
vi gulpfile.js
```
var gulp = require('gulp');
gulp.task('task1', function(){
console.log('task1');
});
gulp.task('task2', function(){
console.log('task2');
});
gulp.task('default',['task1','task2'], function(){
console.log('default');
});
```
運行gulp命令，運行結果如下圖：
####代碼轉換
gulp-react轉換jsx代碼
gulp-babel轉換es6代碼
gulp-less轉換less代碼
gulp-sass轉換sass代碼
npm init
npm install gulp --save-dev
npm install gulp-react gulp-babel babel-preset-es2015 gulp-less gulp-sass --save-dev
vi gulpfile.js
```
var gulp = require('gulp');
var react = require('gulp-react');
var babel = require('gulp-babel');
var less = require('gulp-less');
var sass = require('gulp-sass');
gulp.task('less', function(){
return gulp.src('./src/css1.less')
.pipe(less())
.pipe(gulp.dest('./dest'));
});
gulp.task('sass',function(){
return gulp.src('./src/css2.scss')
.pipe(sass())
.pipe(gulp.dest('./dest'));
});
gulp.task('default', ['less','sass'], function(){
return gulp.src('./src/myui.js')
.pipe(react())
.pipe(babel({
presets: ['babel-preset-es2015']
}))
.pipe(gulp.dest('./dest'));
});
```
mkdir src
cd src
vi myui.js
```
'use strict';
const react = require('react');
class MYUI extends react.Component{
constructor(props){
super(props);
}
render(){
return(
<div>hello gulp react , and es6 to es5.</div>
)
}
}
```
vi css1.less
```
base: #333;
.box{
color: @base;
}
```
vi css2.scss
```
$base: #333;
.box{
color: $base;
}
```
運行gulp命令，運行結果如下圖：
####代碼測試
編寫mocha調試代碼
通過gulp-mocha測試node.js程序
編寫jasmine調試代碼
通過gulp-jasmine測試node.js程序
cd /study/www
mkdir gulpTest
npm init 這里又遇到一個問題，那就是name不能包含大寫字母
npm install gulp gulp-jasmine gulp-mocha should --save-dev
mkdir src
cd src
vi test1.js
```
describe('test1', function(){
it('one', function(){
expect(true).toBe(true);
});
});
```
vi test2.js
```
var should = require('should');
describe('test2', function(){
it('two', function(){
var obj = {'name': 'xdl'};
var obj2;
should.exist(obj);
});
});
```
cd ..
vi gulpfile.js
```
var gulp = require('gulp');
var jasmine = require('gulp-jasmine');
var mocha = require('gulp-mocha');
gulp.task('mocha', function(){
return gulp.src('./src/test2.js')
.pipe(mocha());
});
gulp.task('default', ['mocha'], function(){
return gulp.src('./src/test1.js')
.pipe(jasmine());
});
```
運行gulp命令，運行結果如下圖：
####模塊化
通過npm安裝browserify
browserify main.js>bundle.js轉換命令
安裝gulp-browserify插件
cd /study/www
mkdir gulpStudy
cd gulpStudy
npm init
npm install gulp browserify gulp-browserify --save-dev
mkdir src
cd src
vi User.js
```
module.exports = function User(name){
this.name = name;
};
```
vi main.js
```
var User = require('./User');
console.log(new User('xdl'));
```
cd ..
vi gulpfile.js
```
var gulp = require('gulp');
var browserify = require('gulp-browserify');
gulp.task('default', function(){
return gulp.src('./src/main.js')
.pipe(browserify())
.pipe(gulp.dest('./build'));
});
```
運行gulp命令，結果如下圖：
####代碼壓縮
通過gulp-uglify壓縮代碼
參數mangle
參數compress
cd /study/www
mkdir gulpStudy
cd gulpStudy
npm init
npm install gulp gulp-uglify gulp-browserify --save-dev
mkdir src
cd src
vi Book.js
```
module.exports = function Book(name, price){
this.name = name;
this.price = price;
};
```
vi index.js
```
var Book = require('./Book');
var b1 = new Book('node.js',60);
var b2 = new Book('javascript',80);
console.log(b1,b2);
```
cd ..
vi gulpfile.js
```
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
gulp.task('default', function(){
gulp.src('./src/index.js')
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('./dest'));
});
```
運行gulp命令，結果如下圖：
###Gulp+Sass + Bootstrap 網頁開發實戰
####使用 yo 搭建一個 Gulp + Sass + Bootstrap 項目
Yeoman可以幫助我們快速的搭建一個具有完備工具的項目
項目地址：`https://github.com/yeoman/yo`
```
npm install -g yo
npm install -g generator-webapp
yo webapp //如果失敗則嘗試重新執行這個命令
```
使用 yo 搭建一個 Gulp + Sass + Bootstrap 項目(暫停)
###Yeoman初識
>yeoman官網：http://yeoman.io/
####yeoman的安裝
```
npm install -g yo
```
####yeoman的應用
```
cd /study/www/
mkdir yeomanTest
setfacl -m u:zhulinjie:rwx yeomanTest
cd yeomanTest
```
更新生成器：
選擇webapp：
>Modernizr 是用來檢測用戶瀏覽器是否支持某些HTML5和CSS3新特性的一個JS庫
>如果在安裝的過程中有報錯，有可能是權限的問題或者說嘗試重新安裝
參考網站：
>http://www.iinterest.net/2013/05/04/f2e-tool-yeoman/
###Bower
>bower官網：https://bower.io/
####bower安裝
```
npm install -g bower
bower -v
```
####bower命令簡介
`bower`
####bower安裝軟件包
```
cd /study/www/
mkdir bowerTest
cd bowerTest
bower install jquery --allow-root // 允許使用root身份安裝
bower install bootstrap --allow-root
```
如果我們需要的組件比較小眾，它沒有在bower注冊，怎么辦？
bower提供了多種安裝方式：
通過github的短寫安裝
github上搜索jquery，點擊進入，網址為：https://github.com/jquery/jquery
```
bower uninstall jquery --allow-root
bower install jquery/jquery --allow-root
```
通過項目完整的github地址安裝
```
bower uninstall jquery --allow-root
bower install https://github.com/jquery/jquery.git --allow-root
```
如果我們要使用的框架或組件，沒有在github上，怎么辦？
bower也提供了直接通過URL安裝
sina app：http://lib.sinaapp.com/
```
bower uninstall jquery --allow-root
bower install http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js --allow-root //安裝sina app給我們提供的jquery
```
>sina app 給我們提供的jquery安裝好以后，不能使用 `bower uninstall http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js --allow-root` 直接卸載，需要手動刪除安裝好的jquery目錄和jquery.min目錄
在安裝的過程中，bower也擁有--save與--save-dev選項，但我現在還沒有找到它們之間的區別
####bower配置文件
`bower init` 生成bower.json配置文件
`vi .bowerrc`
```
{
// 軟件包存放位置
"directory": "view/resource",
// 在很多公司，IT部門為了保證公司內網的安全性呢，其實都會要求大家配一個代理才能上網，不配這個代理的時候呢，你是沒有辦法訪問外網的。bower也一樣，你不配這個代理，它是沒有辦法拉到github上的這些公共組件和框架的，所以呢我們就要在這里把我們的代理加上。比如說騰訊公司的代理就是：http://proxy.tencent.com:8080
"proxy": "http://proxy.tencent.com:8080",
// 如果是https的呢，也一樣，它的配置項就是
"https-proxy": "https://proxy.tencent.com:8080",
// 過期時間默認為60000ms(毫秒) 也就是一分鐘
"timeout": 30000
}
```
###Grunt
>中文網站：http://www.gruntjs.net/
####grunt安裝
`npm install -g grunt-cli`
`cd /study/www/`
`mkdir gruntTest`
`cd gruntTest`
`npm init`
`npm install grunt --save-dev`
`vi Gruntfile.js`
`grunt`
運行結果如下，則表示安裝成功
`grunt --version` 查看grunt版本信息
####grunt的應用(壓縮、合并、監聽)
`cd /study/www/gruntTest`
`npm install grunt-contrib-uglify --save-dev`
`npm install grunt-contrib-concat --save-dev`
`npm install grunt-contrib-watch --save-dev`
`vi index.html`
```
<script src="dest/all.min.js"></script>
```
`mkdir js`
`vi js/index.js`
```
var index = index || {};
index = {
init: function(argument){
console.log('index init');
}
};
index.init();
```
`vi js/main.js`
```
function test(argument){
this.a = 1;
};
test.prototype.method_name = function(first_argument){
console.log(this.a);
};
```
`vi Gruntfile.js`
```
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// 壓縮
uglify: {
options: {
// 在壓縮的時候獲取到當前的日期并格式化以后寫入到頁面中
banner: '/*! create by <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
},
// 靜態資源對應的目錄，它可以把我們的靜態資源指定從哪兒來到哪兒去
static_mappings: {
files: [
{
src: 'js/index.js',
dest: 'build/index.min.js'
},
{
src: 'js/main.js',
dest: 'build/main.min.js'
}
]
}
},
// 合并
concat: {
bar: {
src: ['build/*.js'],
dest: 'dest/all.min.js'
}
},
// 代碼監聽
watch: {
files: ['js/index.js'],
tasks: ['uglify', 'concat']
}
});
// 加載包含"uglify"任務的插件
grunt.loadNpmTasks('grunt-contrib-uglify'); // 代碼壓縮
grunt.loadNpmTasks('grunt-contrib-concat'); // 代碼合并
grunt.loadNpmTasks('grunt-contrib-watch'); // 代碼監聽
// 默認被執行的任務列表
grunt.registerTask('default', ['uglify', 'concat', 'watch']);
};
```
`grunt` 運行結果如下圖：
`vi js/index.js` 修改index.js
```
var index = index || {};
index = {
init: function(argument){
console.log('index ok');
}
};
index.init();
```
查看all.min.js的變化
####從無到有構建Grunt項目
`cd /study/www/`
`mkdir gruntStudy`
`setfacl -m u:zhulinjie:rwx gruntStudy/`
`exit`
`cd gruntStudy/`
`vi index.html` 內容留空
`mkdir js`
`vi js/index.js` 內容留空
`npm init`
`npm install grunt --save-dev`
`npm install load-grunt-tasks --save-dev`
`npm install time-grunt --save-dev`
`npm install grunt-contrib-copy --save-dev` 文件拷貝
`npm install grunt-contrib-clean --save-dev` 文件刪除
`mkdir app`
`mv index.html app/`
`mv js app/`
`vi Gruntfile.js`
```
// 使用ES5的嚴格模式
'use strict';
module.exports = function(grunt){
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
// 項目目錄
var config = {
app: 'app',
dist: 'dist'
}
grunt.initConfig({
config: config,
// 文件拷貝任務
copy: {
// 將app/index.html拷貝到dist/index.html
dist: {
src: '<%= config.app %>/index.html',
dest: '<%= config.dist %>/index.html'
}
},
// 刪除任務，刪除dist目錄下的index.html文件
clean: {
dist: {
src: '<%= config.dist %>/index.html'
}
}
});
};
```
運行`grunt copy` 復制文件
運行`grunt clean` 刪除文件
`vi Gruntfile.js` 修改copy任務
```
// 文件拷貝任務
copy: {
// 將app/index.html拷貝到dist/index.html
dist_html: {
src: '<%= config.app %>/index.html',
dest: '<%= config.dist %>/index.html'
},
// 將app/js/index.js拷貝到dist/js/index.js
dist_js: {
src: '<%= config.app %>/js/index.js',
dest: '<%= config.dist %>/js/index.js'
}
},
```
運行`grunt copy` 復制文件
`vi Gruntfile.js` 修改clean任務
```
// 刪除任務，刪除dist目錄下的index.html文件以及dist目錄下js目錄下的index.js文件
clean: {
dist: {
src: ['<%= config.dist %>/index.html', '<%= config.dist %>/js/index.js']
}
}
```
`grunt clean` 同時刪除多個文件
以數組的形式組織多個源文件到目標文件的映射
`vi Gruntfile.js` 修改copy任務
```
// 文件拷貝任務
copy: {
// 以數組的形式組織多個源文件到目標文件的映射
dist_html: {
files: [
{
src: '<%= config.app %>/index.html',
dest: '<%= config.dist %>/index.html'
},
{
src: '<%= config.app %>/js/index.js',
dest: '<%= config.dist %>/js/index.js'
}
]
}
}
```
`grunt clean`
`grunt copy`
`vi Gruntfile.js` 修改copy任務
```
// 文件拷貝任務
copy: {
dist_html: {
files: {
// 目標目錄：源目錄
'<%= config.dist %>/index.html': '<%= config.app %>/index.html',
// 支持數組格式
'<%= config.dist %>/js/index.js': ['<%= config.app %>/js/index.js']
}
}
}
```
`grunt clean`
`grunt copy`
`vi Gruntfile.js` 修改clean任務
```
// 刪除任務
clean: {
dist: {
// 清除dist目錄下所有的文件和目錄，*匹配任意字符但不匹配/，?匹配一個字符也不匹配/，**匹配任意數量的任意字符
src: ['<%= config.dist %>/**/*']
}
}
```
`grunt clean`
`grunt copy`
`vi Gruntfile.js` 修改clean任務
```
// 刪除任務
clean: {
dist: {
// 清除dist目錄下所有的文件和目錄
src: ['<%= config.dist %>/**/*'],
// 刪除的時候保留文件夾
filter: 'isFile'
}
}
```
`grunt clean`
`grunt copy`
`vi Gruntfile.js` 修改clean任務
```
// 刪除任務
clean: {
dist: {
// 清除dist目錄下所有的文件和目錄
src: ['<%= config.dist %>/**/*'],
// 刪除的時候保留文件夾
filter: function(filepath){
return (!grunt.file.isDir(filepath));
}
}
}
```
`grunt clean`
`grunt copy`
`touch dist/.test`
`vi Gruntfile.js` 修改clean任務
```
// 刪除任務
clean: {
dist: {
// 清除dist目錄下所有的文件和目錄
src: ['<%= config.dist %>/**/*'],
// 刪除的時候保留文件夾
filter: function(filepath){
return (!grunt.file.isDir(filepath));
},
// dot為true則會命中以.開頭的文件。比如說：**/index.html 在dot為真的情況下，它同時會命中 .index.html文件
// 在這里 <%= config.dist %>/**/* 則會命中 所有以.開頭的隱藏文件和隱藏目錄
dot: true
}
}
```
`grunt clean`
`vi Gruntfile.js`
```
// 文件拷貝任務
copy: {
dist_html: {
files: [
{
expand: true,
// cwd是相對于src的一個尋路路徑
cwd: '<%= config.app %>/',
src: '*.html',
dest: '<%= config.dist %>/',
// 是否修改目標文件的后綴名，用來表示這是我們壓縮之后的html文件
ext: '.min.html'
}
]
}
},
// 刪除任務
clean: {
dist: {
// 清除dist目錄下所有的文件和目錄
src: ['<%= config.dist %>/**/*']
}
}
```
`grunt clean`
`grunt copy`
`grunt clean`
`vi Gruntfile.js`
```
// 文件拷貝任務
copy: {
dist_html: {
files: [
{
expand: true,
// cwd是相對于src的一個尋路路徑
cwd: '<%= config.app %>/',
src: '*.html',
dest: '<%= config.dist %>/',
// 是否修改目標文件的后綴名，用來表示這是我們壓縮之后的html文件
ext: '.min.html',
// 從哪個地方開始修改目標文件的后綴
extDot: 'first'
}
]
}
}
```
`grunt clean`
`vi Gruntfile.js`
```
// 文件拷貝任務
copy: {
dist_html: {
files: [
{
expand: true,
// cwd是相對于src的一個尋路路徑
cwd: '<%= config.app %>/',
src: '*.html',
dest: '<%= config.dist %>/',
// 是否修改目標文件的后綴名，用來表示這是我們壓縮之后的html文件
ext: '.min.html',
// last表示將目標文件最后一個.之后的內容作為后綴
extDot: 'last'
}
]
}
}
```
`grunt clean`
`vi Gruntfile.js` 修改copy任務
```
// 文件拷貝任務
copy: {
dist_html: {
files: [
{
expand: true,
// cwd是相對于src的一個尋路路徑
cwd: '<%= config.app %>/',
src: '**/*.js',
dest: '<%= config.dist %>/',
ext: '.js',
// last表示將目標文件最后一個.之后的內容作為后綴
extDot: 'last',
flatten: false
}
]
}
}
```
`grunt copy`
`grunt clean`
`vi Gruntfile.js` 修改copy任務
```
// 文件拷貝任務
copy: {
dist_html: {
files: [
{
expand: true,
// cwd是相對于src的一個尋路路徑
cwd: '<%= config.app %>/',
src: '**/*.js',
dest: '<%= config.dist %>/',
ext: '.js',
// last表示將目標文件最后一個.之后的內容作為后綴
extDot: 'last',
// flatten為true的情況下，會直接將中間各層目錄去掉
flatten: true
}
]
}
}
```
`grunt copy`
`grunt clean`
`vi Gruntfile.js` 修改copy任務
```
// 文件拷貝任務
copy: {
dist_html: {
files: [
{
expand: true,
// cwd是相對于src的一個尋路路徑
cwd: '<%= config.app %>/',
src: '**/*.js',
dest: '<%= config.dist %>/',
ext: '.js',
// last表示將目標文件最后一個.之后的內容作為后綴
extDot: 'last',
// flatten為true的情況下，會直接將中間各層目錄去掉
flatten: true,
// rename 函數會在 ext extDot flatten之后被調用
rename: function(dest, src){
return dest + 'js/' + src;
}
}
]
}
}
```
`grunt copy`
###JS模塊化
####Seajs
>官網：http://seajs.org/
>下載地址：https://github.com/seajs/seajs/archive/3.0.0.zip
####Seajs入門
`cd study/www/`
`mkdir jsmkh`
`setfacl -m u:zhulinjie:rwx jsmkh/`
`cd jsmkh`
`mkdir sea`
`unzip seajs-3.0.0.zip`
`cp seajs-3.0.0/dist/sea.js ./sea`
`mkdir js`
`vi js/module1.js`
```
// 這里的參數名稱不能改變
define(function(require, exports, module){
function show(){
alert(1);
}
// exports對外提供接口的對象
exports.show = show;
});
```
`vi js/module2.js`
```
// 這里的參數名稱不能改變
define(function(require, exports, module){
function show(){
alert(2);
}
// exports對外提供接口的對象
exports.show = show;
});
```
`vi index.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>seajs</title>
<script src="sea/sea.js"></script>
<script>
// 第一個參數：模塊的地址
// 第二個參數：回調函數
seajs.use('./js/module1.js', function(ex){
// 這里的ex就代表module1.js中的exports對象
ex.show();
});
seajs.use('./js/module2.js', function(ex){
// 這里的ex就代表module1.js中的exports對象
ex.show();
});
</script>
</head>
<body>
</body>
</html>
```
運行瀏覽器查看效果
`vi js/module3.js`
```
var a = 100;
```
`vi js/module2.js`
```
// 這里的參數名稱不能改變
define(function(require, exports, module){
// require 模塊之間依賴的接口
require('./module3.js');
function show(){
alert(a);
}
// exports對外提供接口的對象
exports.show = show;
});
```
運行瀏覽器，查看效果
`vi js/module3.js`
```
// 這里的參數名稱不能改變
define(function(require, exports, module){
var a = 100;
exports.a = a;
});
```
`vi js/module2.js`
```
// 這里的參數名稱不能改變
define(function(require, exports, module){
// 當引入的是sea下面的模塊的時候，那么require執行完的結果就是exports
var a = require('./module3.js').a;
function show(){
alert(a);
}
// exports對外提供接口的對象
exports.show = show;
});
```
運行瀏覽器，查看效果
####JS模塊化開發初體驗之小實例webqq
`cd /study/www/`
`mkdir webqq`
`setfacl -m u:zhulinjie:rwx webqq/`
`cd webqq/`
`vi index.html`
```
<!DOCTYPE html>
<html lang="zh-cn" />
<head>
<meta charset="UTF-8" />
<title>webqq</title>
<style>
#div1{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
display: none;
}
#div2{
width: 30px;
height: 30px;
background-color: #bc0000;
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
}
#div3{
width: 100px;
height: 100px;
background-color: green;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
}
</style>
<script src="sea/sea.js"></script>
<script>
// A開發
seajs.use('./js/main.js');
</script>
</head>
<body>
<input type="button" value="弾窗" id="input1" />
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>
```
`mkdir js`
`vi js/main.js`
```
// A開發
define(function(require, exports, module){
var oInput = document.getElementById('input1');
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
require('./drag.js').drag(oDiv3);
oInput.onclick = function(){
oDiv1.style.display = 'block';
require('./scale.js').scale(oDiv1, oDiv2);
};
});
```
`vi js/drag.js`
```
// B開發拖拽
define(function(require, exports, module){
function drag(obj){
var disX = 0;
var disY = 0;
obj.onmousedown = function(e){
var e = e || window.event;
disX = e.clientX - obj.offsetLeft;
disY = e.clientY - obj.offsetTop;
document.onmousemove = function(e){
var e = e || window.event;
var left = e.clientX - disX;
var top = e.clientY - disY;
left = require('./range.js').range(left, document.documentElement.clientWidth - obj.offsetWidth, 0);
top = require('./range.js').range(top, document.documentElement.clientHeight - obj.offsetHeight, 0);
obj.style.left = left + 'px';
obj.style.top = top + 'px';
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
exports.drag = drag;
});
```
`vi scale.js`
```
//C開發改變層大小
define(function(require, exports, module){
function scale(obj1, obj2){
var downX = 0; //按下時的x坐標
var downY = 0; //按下時的y坐標
var downW = 0; //按下時的寬度
var downH = 0; //按下時的高度
obj2.onmousedown = function(e){
var e = e || window.event;
downX = e.clientX;
downY = e.clientY;
downW = obj1.offsetWidth;
downH = obj1.offsetHeight;
document.onmousemove = function(e){
var e = e || window.event;
var w = e.clientX - downX + downW;
var h = e.clientY - downY + downH;
w = require('./range.js').range(w, 500, 100);
h = require('./range.js').range(h, 300, 100);
obj1.style.width = w + 'px';
obj1.style.height = h + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
exports.scale = scale;
});
```
`vi js/range.js`
```
// 限制范圍
define(function(require, exports, module){
function range(val, max, min){
if(val > max){
return max;
}else if(val < min){
return min;
}else {
return val;
}
}
exports.range = range;
});
```
運行瀏覽器，查看效果
####Seajs 的應用
>Seajs源碼：https://github.com/seajs/examples
>5 分鐘上手 Sea.js：http://seajs.org/docs/#quick-start
`cd /study/www/`
`mkdir seajs`
`setfacl -m u:zhulinjie:rwx seajs/`
`cd seajs/`
`unzip unzip examples-master.zip`
`mkdir js`
`cp examples-master/sea-modules/seajs/seajs/2.2.0/sea.js js/`
`cp examples-master/sea-modules/jquery/jquery/1.10.1/jquery.js js/`
`vi index.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>Seajs應用</title>
<script src="js/sea.js"></script>
<script>
// seajs 的簡單配置
seajs.config({
base: "./js/"
});
// 加載入口模塊
seajs.use("index");
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
```
`vi js/index.js`
```
// 所有模塊都通過 define 來定義
define(function(require, exports, module) {
// 通過 require 引入依賴
var index = require('module');
index.fun1();
});
```
`vi js/module.js`
```
// 所有模塊都通過 define 來定義
define(function(require, exports, module) {
function fun1(){
console.log('fun1');
}
// 通過 exports 對外提供接口
exports.fun1 = fun1;
});
```
打開瀏覽器，查看效果
`vi js/index.js`
```
// 所有模塊都通過 define 來定義
define(function(require, exports, module) {
// 通過 require.async 異步引入依賴模塊
require.async('module', function(index){
index.fun1();
});
});
```
打開瀏覽器，查看效果
`vi js/index.js`
```
// 所有模塊都通過 define 來定義
define(function(require, exports, module) {
// 通過 require 引入依賴
var index = require('module');
index.fun1();
index.fun2();
});
```
`vi js/module.js`
```
// 所有模塊都通過 define 來定義
define(function(require, exports, module) {
function fun1(){
console.log('fun1');
}
function fun2(){
console.log('fun2');
}
// 通過 exports 對外提供接口
exports.fun1 = fun1;
exports.fun2 = fun2;
});
```
打開瀏覽器，查看效果
`vi js/index.js`
```
// 所有模塊都通過 define 來定義
define(function(require, exports, module) {
// 通過 require.async 異步引入依賴模塊
require.async('module', function(index){
index.fun1();
index.fun2();
});
});
```
打開瀏覽器，查看效果
`vi js/module.js`
```
// 所有模塊都通過 define 來定義
define(function(require, exports, module) {
var obj = {};
obj.fun1 = function(){
console.log('fun1');
};
obj.fun2 = function(){
console.log('fun2');
};
// 通過 module.exports 提供整個接口
module.exports = obj;
});
```
打開瀏覽器，查看效果
`vi js/index.js`
```
// 所有模塊都通過 define 來定義
define(function(require, exports, module) {
// 通過 require.async 異步引入依賴模塊
require.async('module', function(index){
index.fun1();
index.fun2();
});
// 通過 require 引入依賴模塊
require('jquery');
var $ = jQuery;
$('#box').css({
width: '100px',
height: '100px',
backgroundColor: 'green'
}).bind('click', function(){
alert('box');
});
});
```
打開瀏覽器，查看效果
####Grunt構建Seajs項目
`cd /study/www/`
`mkdir app`
`setfacl -m u:zhulinjie:rwx app/`
`setfacl -m d:u:zhulinjie:rwx app/`
`cd app/`
`npm init`
`npm install grunt --save-dev`
`npm install grunt-cmd-transport --save-dev`
`npm install grunt-cmd-concat --save-dev`
`npm install grunt-contrib-uglify --save-dev`
`npm install grunt-contrib-clean --save-dev`
`npm install grunt-contrib-watch --save-dev`
`npm install grunt-contrib-cssmin --save-dev`
`mkdir lib`
`cp /software/examples-master.zip .`
`unzip examples-master.zip`
`cp examples-master/sea-modules/seajs/seajs/2.2.0/sea.js lib/`
`cp examples-master/sea-modules/jquery/jquery/1.10.1/jquery.js lib/`
`mv lib/jquery.js lib/jquery.min.js`
`vi index.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>Grunt+Seajs構建項目</title>
<link rel="stylesheet" href="src/css/layout.css" />
<link rel="stylesheet" href="src/css/index.css" />
<script src="lib/sea.js"></script>
<script>
// seajs 的簡單配置
seajs.config({
base: "./src/js/"
});
// 加載入口模塊
seajs.use("index");
</script>
</head>
<body>
<div id="box">
<div class="pox">pox</div>
</div>
</body>
</html>
```
`mkdir -p src/css`
`mkdir src/js`
`vi src/css/index.css`
```
/*-------------------------------------------------------------------
index.css 首頁樣式
-------------------------------------------------------------------*/
#box{
width: 500px;
height: 300px;
margin: 50px auto;
background-color: #EEE;
position: relative;
}
#box .pox{
width: 100px;
height: 100px;
background-color: green;
color: #FFF;
position: absolute;
bottom: 10px;
right: 10px;
padding: 10px;
}
```
`vi src/css/layout.css`
```
/*-------------------------------------------------------------------
layout.css 公共布局樣式
-------------------------------------------------------------------*/
body{
background-color: #F7F7F7;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
```
`vi src/js/index.js`
```
// 所有模塊都通過 define 來定義
define(function(require, exports, module) {
// 通過 require 引入依賴模塊
var index = require('./module');
index.fun1();
index.fun2();
// 異步引入依賴模塊
require.async('../../lib/jquery.min', function(){
var $ = jQuery;
$('#box').on('click', function(){
alert('box');
});
$('#box .pox').on('click', function(e){
e.stopPropagation();
alert('pox');
});
});
});
```
`vi src/js/module.js`
```
// 所有模塊都通過 define 來定義
define(function(require, exports, module) {
var obj = {};
obj.fun1 = function(){
console.log('fun1');
};
obj.fun2 = function(){
console.log('fun2');
};
// 通過 module.exports 提供整個接口
module.exports = obj;
});
```
打開瀏覽器，查看效果
`vi Gruntfile.js`
```
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// 將SesJS模塊轉換為Modules/Transport規范的模塊
transport: {
options: {
debug: false,
idleading: './dist/js/'
},
main: {
files: [
{
expand: true,
cwd: 'src/js/',
src: '*.js',
dest: 'build/js/'
}
]
}
},
//合并任務
concat: {
js: {
options: {
noncmd: true
},
files: {
'dist/js/index.js': 'build/js/*.js'
}
},
css: {
options: {
noncmd: true
},
files: {
'dist/css/index.css': ['src/css/layout.css', 'src/css/index.css']
}
}
},
// JS壓縮
uglify: {
main: {
files: {
'dist/js/index.min.js': 'dist/js/index.js'
}
}
},
// css壓縮
cssmin: {
main: {
files: {
'dist/css/index.min.css': 'dist/css/index.css'
}
}
},
// 刪除任務
clean: {
// 刪除build目錄
build: {
src: 'build'
},
// 刪除dist目錄
dist: {
src: 'dist'
}
},
// 代碼監聽
watch: {
js: {
files: ['src/js/*.js'],
tasks: ['transport', 'concat', 'uglify', 'cssmin']
}
}
});
grunt.loadNpmTasks('grunt-cmd-transport');
grunt.loadNpmTasks('grunt-cmd-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 默認任務
grunt.registerTask('default', ['transport', 'concat', 'uglify', 'cssmin']);
};
```
`grunt`
`vi index.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>Grunt+Seajs構建項目</title>
<link rel="stylesheet" href="dist/css/index.min.css" />
<script src="lib/sea.js"></script>
<script>
// seajs 的簡單配置
seajs.config({
base: "./src/js/"
});
// 加載入口模塊
seajs.use("./dist/js/index");
</script>
</head>
<body>
<div id="box">
<div class="pox">pox</div>
</div>
</body>
</html>
```
打開瀏覽器，查看效果
**Grunt+Seajs+jQuery插件構建項目**
`https://github.com/jiezeal/Project/tree/master/grunt-seajs-jqueryPlugin`
###React
>官網：https://facebook.github.io/react/index.html
>中文網站：http://reactjs.cn/react/index.html
####第一個React程序
cd /study/www
mkdir react
cd react
下載初學者教程包：`https://facebook.github.io/react/downloads/react-15.3.0.zip`
unzip react-15.3.0.zip
mv react-15.3.0.zip react
vi index.html
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>React</title>
</head>
<body>
<div id="container"></div>
<script src="react/build/react.js"></script>
<script src="react/build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel">
var Test = React.createClass({
render: function(){
return <p>Hello World</p>;
}
});
ReactDOM.render(<Test></Test>, document.getElementById('container'));
</script>
</body>
</html>
```
瀏覽器運行效果如下圖：
###jQuery插件編寫
####類級別開發
`cd /study/www/`
`mkdir jquery`
`setfacl -m u:zhulinjie:rwx jquery`
`setfacl -m d:u:zhulinjie:rwx jquery`
`cd jquery`
`mkdir js`
`vi js/module.js`
```
/*------------------------------------------------------------------------
類級別開發插件
------------------------------------------------------------------------*/
// 第一種方式
jQuery.fun1 = function(){
console.log('fun1');
};
// 第二種方式，使用extend()方法
jQuery.extend({
fun2: function(){
console.log('fun2');
},
fun3: function(){
console.log('fun3');
}
});
// 第三種方式，使用命名空間
jQuery.xdl = {
fun4: function(){
console.log('fun4');
},
fun5: function(){
console.log('fun5');
}
};
```
`vi index.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>jQuery插件編寫-類級別開發</title>
<script src="js/jquery.js"></script>
<script src="js/module.js"></script>
</head>
<body>
<script>
$.fun1();
$.fun2();
$.fun3();
$.xdl.fun4();
$.xdl.fun5();
</script>
</body>
</html>
```
打開瀏覽器，查看效果
類級別開發小應用
`vi js/module.js`
```
/*------------------------------------------------------------------------
類級別開發插件
------------------------------------------------------------------------*/
// 位置居中
$.xdl = {
posCenter: function(obj){
obj.css({
position: 'absolute',
left: ($(window).width() - obj.width()) / 2 + 'px',
top: ($(window).height() - obj.height()) / 2 + 'px'
});
return obj;
}
}
```
`vi index.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>jQuery插件編寫-類級別開發</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/module.js"></script>
</head>
<body>
<div id="box"></div>
<script>
var box = $('#box');
$.xdl.posCenter(box).css('background-color','#c40000');
</script>
</body>
</html>
```
打開瀏覽器，查看效果
####對象級別開發
```
// 插件模板
;(function($){
$.fn.plugin = function(options){
var defaults = {
};
var options = $.extend({}, defaults, options);
this.each(function(){
});
return this;
};
})(jQuery);
```
對象級別開發小實例之隔行換色
`vi js/jquery-table-1.0.js`
```
/*---------------------------------------------------------------------------
對象級別開發小實例之隔行換色
---------------------------------------------------------------------------*/
;(function($){
$.fn.changeBgColor = function(options){
// 默認參數
var defaults = {
oddRow: 'oddRow',
evenRow: 'evenRow',
currentRow: 'currentRow',
eventTypeOne: 'mouseenter',
eventTypeTwo: 'mouseleave'
};
var options = $.extend({}, defaults, options);
this.each(function(){
var table = $(this);
// 設置奇數行的背景色
table.find('tr:odd').addClass(options.oddRow);
// 設置偶數行的背景色
table.find('tr:even:not(:first)').addClass(options.evenRow);
// 設置當前選中行的背景色
table.find('tr').bind(options.eventTypeOne, function(){
$(this).addClass(options.currentRow);
}).bind(options.eventTypeTwo, function(){
$(this).removeClass(options.currentRow);
});
});
return this;
};
})(jQuery);
```
`vi index.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>jQuery插件編寫-對象級別開發小實例之隔行換色</title>
<style>
table{
width: 80%;
border-collapse: collapse;
margin: 50px auto;
}
th,td{
height: 35px;
line-height: 35px;
border: 1px solid #ccc;
cursor: pointer;
}
td{
text-align: center;
}
.oddRow{
background-color: #DFF0D8;
}
.evenRow{
background-color: #D9EDF7;
}
.currentRow{
background-color: #337AB7;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery-table-1.0.js"></script>
<script>
$(function(){
$('table').changeBgColor();
});
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>身高</th>
<th>體重</th>
</tr>
<tr>
<td>張三</td>
<td>22</td>
<td>187</td>
<td>70KG</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>170</td>
<td>60KG</td>
</tr>
<tr>
<td>小四</td>
<td>30</td>
<td>175</td>
<td>75KG</td>
</tr>
<tr>
<td>張三</td>
<td>22</td>
<td>187</td>
<td>70KG</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>170</td>
<td>60KG</td>
</tr>
<tr>
<td>小四</td>
<td>30</td>
<td>175</td>
<td>75KG</td>
</tr>
</table>
</body>
</html>
```
打開瀏覽器，查看效果
`vi index.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>jQuery插件編寫-對象級別開發小實例之隔行換色</title>
<style>
table{
width: 80%;
border-collapse: collapse;
margin: 50px auto;
}
th,td{
height: 35px;
line-height: 35px;
border: 1px solid #ccc;
cursor: pointer;
}
td{
text-align: center;
}
.oddRowClass{
background-color: #DFF0D8;
}
.evenRowClass{
background-color: #D9EDF7;
}
.currentRowClass{
background-color: #337AB7;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery-table-1.0.js"></script>
<script>
$(function(){
$('table').changeBgColor({
oddRow: 'oddRowClass',
evenRow: 'evenRowClass',
currentRow: 'currentRowClass',
eventTypeOne: 'click',
eventTypeTwo: 'mouseout'
});
});
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>身高</th>
<th>體重</th>
</tr>
<tr>
<td>張三</td>
<td>22</td>
<td>187</td>
<td>70KG</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>170</td>
<td>60KG</td>
</tr>
<tr>
<td>小四</td>
<td>30</td>
<td>175</td>
<td>75KG</td>
</tr>
<tr>
<td>張三</td>
<td>22</td>
<td>187</td>
<td>70KG</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>170</td>
<td>60KG</td>
</tr>
<tr>
<td>小四</td>
<td>30</td>
<td>175</td>
<td>75KG</td>
</tr>
</table>
</body>
</html>
```
打開瀏覽器，查看效果
對象級別開發小實例之tab標簽頁
`vi js/jquery-tab-1.0.js`
```
/*---------------------------------------------------------------------------
對象級別開發小實例之tab標簽頁
---------------------------------------------------------------------------*/
// 插件模板
;(function($){
$.fn.tabTag = function(options){
// 默認參數
var defaults = {
current: 'current',
tabNav: '.mt>li',
tabContent: '.mc>div',
eventType: 'click'
};
var options = $.extend({}, defaults, options);
this.each(function(){
var tabTag = $(this);
var timer = null;
tabTag.find(options.tabNav).bind(options.eventType, function(){
var obj = $(this);
if(options.eventType == 'mouseover' || options.eventType == 'mouseenter'){
timer = setTimeout(function(){
obj.addClass(options.current).siblings().removeClass(options.current);
var index = obj.index();
tabTag.find(options.tabContent).eq(index).show().siblings().hide();
}, 200);
}else{
obj.addClass(options.current).siblings().removeClass(options.current);
var index = obj.index();
tabTag.find(options.tabContent).eq(index).show().siblings().hide();
}
});
if(options.eventType == 'mouseover'){
tabTag.find(options.tabNav).bind('mouseout', function(){
clearTimeout(timer);
});
}
if(options.eventType == 'mouseenter'){
tabTag.find(options.tabNav).bind('mouseleave', function(){
clearTimeout(timer);
});
}
});
return this;
};
})(jQuery);
```
`vi index.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>jQuery插件編寫-對象級別開發小實例之tab標簽頁</title>
<style>
*{ margin: 0; padding: 0; }
#tab{ margin: 100px; }
ul{ list-style: none; }
.mt{ overflow: hidden; zoom: 1; }
.mt li{
float: left;
padding: 5px 20px;
border: 1px solid #369;
height: 30px;
line-height: 30px;
margin-right: 3px;
cursor: pointer;
}
.mt li.current{ background-color: #369; color: #FFF; }
.mc{
margin-top: 10px;
}
.mc div{
width: 500px;
height: 300px;
border: 1px solid #369;
display: none;
padding: 10px;
}
.mc .show{
display: block;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery-tab-1.0.js"></script>
<script>
$(function(){
$('#tab').tabTag();
});
</script>
</head>
<body>
<div id="tab">
<ul class="mt">
<li class="current">HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<div class="mc">
<div class="show">HTML</div>
<div>CSS</div>
<div>JavaScript</div>
</div>
</div>
</body>
</html>
```
打開瀏覽器，查看效果
`vi index.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>jQuery插件編寫-對象級別開發小實例之tab標簽頁</title>
<style>
*{ margin: 0; padding: 0; }
#tab{ margin: 100px; }
ul{ list-style: none; }
.title{ overflow: hidden; zoom: 1; }
.title li{
float: left;
padding: 5px 20px;
border: 1px solid #369;
height: 30px;
line-height: 30px;
margin-right: 3px;
cursor: pointer;
}
.title li.currentClass{ background-color: #369; color: #FFF; }
.content{
margin-top: 10px;
}
.content div{
width: 500px;
height: 300px;
border: 1px solid #369;
display: none;
padding: 10px;
}
.content .show{
display: block;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/jquery-tab-1.0.js"></script>
<script>
$(function(){
$('#tab').tabTag({
current: 'currentClass',
tabNav: '.title>li',
tabContent: '.content>div',
eventType: 'mouseover'
});
});
</script>
</head>
<body>
<div id="tab">
<ul class="title">
<li class="currentClass">HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<div class="content">
<div class="show">HTML</div>
<div>CSS</div>
<div>JavaScript</div>
</div>
</div>
</body>
</html>
```
打開瀏覽器，查看效果
###CURL
`php -i | grep cURL` 查看是否支持CURL
`cd /study/www`
`mkdir practise`
`cd practise/`
`vi curl.php`
```
<?php
// 初始化
$curl = curl_init();
// 設置訪問網頁的URL
curl_setopt($curl, CURLOPT_URL, 'http://www.baidu.com');
// 執行之后只下載，不顯示和打印
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
// 將執行的結果保存到一個變量
$output = curl_exec($curl);
// 關閉
curl_close($curl);
// 對下載下來的$output進行處理
echo str_replace('百度', 'baidu', $output);
```
php -f curl.php > baidu.html
瀏覽器打開baidu.html，右擊查看源代碼，看看是否所有百度都已經被替換成了baidu
###HTML5-FormData
`cd /study/www/practise/`
`vi test.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>HTML5 FormDataAPI</title>
</head>
<body>
<input type="button" value="發送" id="btn" />
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
var fd = new FormData();
fd.append('name', 'Mary');
fd.append('age', 22);
fd.append('email', 'zhangsan@126.com');
fd.append('gender', '女');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'demo.php', true);
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
alert(this.responseText);
}
}
};
xhr.send(fd);
};
</script>
</body>
</html>
```
`vi demo.php`
```
<?php
echo '<pre>';
print_r($_POST);
echo '</pre>';
```
打開瀏覽器，查看效果
`vi demo.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>HTML5 FormDataAPI</title>
<style>
*{ margin: 0; padding: 0; }
body{ margin: 50px; }
input{ margin-bottom: 10px; }
</style>
</head>
<body>
<form action="demo.php">
姓名：<input type="text" name="name" /><br />
年齡：<input type="text" name="age" /><br />
郵箱：<input type="text" name="email" /><br />
性別：<input type="text" name="gender" /><br />
愛好：<input type="checkbox" name="like[]" value="1" /> 籃球
<input type="checkbox" name="like[]" value="2" /> 足球
<input type="checkbox" name="like[]" value="3" /> 排球
<input type="checkbox" name="like[]" value="4" /> 乒乓球
<br />
<input type="button" value="提交" id="btn" />
</form>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
var fm = document.getElementsByTagName('form')[0];
var fd = new FormData(fm);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'demo.php', true);
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
alert(this.responseText);
}
}
};
xhr.send(fd);
};
</script>
</body>
</html>
```
打開瀏覽器，查看效果
`vi demo.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>HTML5 FormDataAPI</title>
</head>
<body>
<input type="file" name="pic" id="pic" />
<div></div>
<img src="" />
<script>
var pic = document.getElementById('pic');
var div = document.getElementsByTagName('div')[0];
var img = document.getElementsByTagName('img')[0];
pic.onchange = function(){
var str = '';
str += '文件名稱：' + this.files[0].name + '<br />';
str += '文件大小：' + this.files[0].size + '字節<br />';
div.innerHTML = str;
// 將圖片顯示在瀏覽器中
img.src = URL.createObjectURL(this.files[0]);
};
</script>
</body>
</html>
```
打開瀏覽器，查看效果
####HTML5-FormData + Ajax文件上傳
`vi demo.html`
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>HTML5 FormDataAPI</title>
</head>
<body>
<input type="file" name="pic" id="pic" />
<script>
var pic = document.getElementById('pic');
pic.onchange = function(){
var fd = new FormData();
fd.append('pic', this.files[0]);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'demo.php', true);
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
alert(this.responseText);
}
}
};
xhr.send(fd);
};
</script>
</body>
</html>
```
`vi demo.php`
```
<?php
move_uploaded_file($_FILES['pic']['tmp_name'], 'upload/'.$_FILES['pic']['name']);
echo 'ok';
```
`mkdir upload`
`chmod 777 upload/`
打開瀏覽器，查看文件上傳是否成功
