[教學]如何解決VMware Fusion安裝好後,出現錯誤訊息 Could not open/dev/vmmon:管線破裂

問題

原本是想寫如何在Mac的VMware Fusion安裝CentOS,但我發現這樣跟上一篇「[教學]如何在VirtualBox安裝CentOS 7」幾乎差不多,顯得有點無聊,所幸在安裝的過程中出現了一個問題,讓我可以做個紀錄。

在VMware Fusion安裝的時候,其實還蠻簡單的,就一開始選擇 Create a custom virtual machine 建立一個新的客製化虛擬機器:

選擇 Create a custom virtual machine

接著選擇你想要安裝的OS作業系統,在這邊我選擇Linux CentOS 7 64 bit:

選擇安裝CentOS 7 64-bit

接下來就是不斷的按繼續、繼續的過程,最後選擇虛擬機要儲存的位置與名稱就結束了。

接下來虛擬機器就會啟動,然後你可以選擇你要安裝的光碟映像檔,然後嘩拉~

Could not open .dev/vmmon

蛤?什麼管線破裂?這是什麼意思,完全看不懂啊!

解法

解決這個問題的方法其實很簡單,只要打開Mac的「系統偏好設定」,切換到「安全性與隱私權」,然後在下方你會看到VMware被系統阻擋起來的訊息,解開右下角的鎖頭後按下允許,重新啟動VMware Fusion,你就會發現問題解決囉!

安全性與隱私權

[教學]如何在VirtualBox安裝CentOS 7

前言

大多數在本機開發的狀況下,很少會用虛擬機器安裝一整台伺服器,但最近遇到有客戶需要我們直教交付整台VM (virtual machine 虛擬機器),索性就來紀錄一下要如何在自己的電腦上建立整台虛擬機器的LAMP (Linux + Apache + MariaDB + PHP7) 環境的教學吧!

第一步下載VirtualBox與CentOS

市面上有許多虛擬機器的軟體,像是VMware、VirtualBox 都是,本次我們採用 VirtualBox作為我們虛擬機器的主體,原因沒有別得,只因為他是免費的,支援的平台也很多(Windows與Mac OS都支援),而且取得也很容易,只要上VirtualBox官網下載適合你的作業系統版本就可以了。

下載VirtulBox軟體並完成安裝

由於安裝過程都還算容易所以在這裡就不詳細說明了,原則上就是一直按下一步就差不多了。

接著我們要來下載CentOS作業系統,以Linux Server來說,比較常見的會是像CentOS、Ubuntu,我們這裡採用CentOS主要原因是以安裝後的檔案大小來說CentOS會是比較小的,可以說是麻雀雖小但五臟俱全的的一個選擇,所以我通常都會選擇採用CentOS來做Server的作業系統。

跟 VirtualBox 的步驟差不多,只要前往CentOS下載作業系統的iso檔,等一下我們在建立虛擬機器的時候才會用到,本次我要安裝的是CentOS 7 的x86_64版本,只要點擊一下檔案名稱就會直接下載iso檔了,iso檔是光碟映像檔的意思,簡單來說他就說iso就是虛擬光碟,取得iso檔之後,我個人會建議把iso檔放在桌面,等等安裝時會比較好找一點。如果你想要安裝新一點的CentOS 8 也是可以的,但在作業系統安裝上可能介面上會稍微有點不同,不過大致上安裝完作業系統後的步驟也是差不多的。

下載CentOS iso檔

第二步建立虛擬機器

安裝完VirtualBox之後,打開後你會看到一個虛擬機器管理員,如果你不喜歡英文介面,VirtualBox是可以切換成中文介面的,因為我本人是用Mac OS系統,在Mac上只要到左上角,選擇喜好設定,就可以在介面裡找到語言的選項,接著在選擇正體中文,你就會發現介面親民多了。

VirtualBox 如何切換中文語系

回到虛擬機器管理員,我們按下新增按鈕,開始建立新虛擬機器。

VirtualBox 管理員介面

你可以替你的虛擬機器取一個你覺得不錯的名字,在這邊我設定為Demo,接著機器資料夾位置我通常都會選擇預設值,也就是不做任何修改,下一欄是作業系統的類型,因為我們要安裝CentOS所以選擇Linux,接著你會發現版本的欄位裡面沒有CentOS,在這裡我們直接選用Red Hat (64-bit) 即可。Red Hat 也是一款Liunx系統,是目前所有Linux作業系統中組織最大的一個團體,改天有空再來說說Red Hat的故事。選擇完成後就可以按下「繼續」這顆按鈕囉!

安裝CentOS的設定方式

接著就是設定這台虛擬機器的硬體設備部分,原則上就是記憶體與硬碟的大小,通常記憶體我都會選擇預設值不做調整,所以我會持續按下「繼續」這顆按鈕,而硬碟部分我也會選擇預設值「立即建立虛擬硬碟」,接下來如果你是個人使用,建議你選擇預設值VDI格式,會比較符合VirtualBox的使用,但如果你有要換到其他虛擬機器的軟體,例如VMware,我會建議你改選VMDK格式,在這裡我選擇VMDK格式。

預設建議採用VDI格式,若有要更換虛擬機器環境則建議採用VMDK格式

接下來我會選擇預設值「動態分配」讓系統自動分配硬碟大小,以免暫用太多我自己電腦的硬碟資源,但如果你想要運作快速一點,直接選擇固定大小會有助於提升虛擬機器的硬碟效率喔!最後硬碟大小原則上如果沒有特別需求,一樣採用預設建議大小即可,最後你就可以按下「建立」按鈕,結束新建立虛擬機器這一回合了。

安裝CentOS作業系統

連續點擊兩次剛剛建立好的新虛擬機器(我的叫Demo),雙擊後虛擬機器就開機了,因為沒有OS可以運行,所以VirtualBox會問你要不要掛載iso,這時選擇先前放在桌面的CentOS 7 的iso,選擇「啟動」,就可以開始進入CentOS的安裝環節了。

選擇CentOS的iso檔

接著選擇「Install CentOS 7」,在這樣的文字介面裡你只能用上下左右來操控選項,當前的選項會是白色的,確定選在「Install CentOS 7」之後按下enter,你就會看到畫面上正在執行安裝程序了。

安裝CentOS

接下來你會進入CentOS的圖形安裝介面,一開始可以選擇語系,一個一個找太麻煩了,所以你只要在搜尋框裡面輸入ch你就會找到中文的選項,選擇後就會出現「繁體中文(台灣)」的選項。在安裝摘要的部分,軟體選擇預設是最小安裝,在這邊我就不做修改,這樣一來就只會安裝CentOS的核心系統,缺點就是你需要什麼功能或軟體都要另外安裝。再來是安裝目的地,點選安裝目的地之後,基本上也只有一顆硬碟可以選,所以確定選取硬碟後就可以按下「完成」,接著就可以「開始安裝」。

CentOS 安裝介面
選擇硬碟之後,點選左上角的完成

點選開始安裝之後你會進入下一個畫面,在這個畫面裡最重要的是你需要設定Root的密碼,Root是Linux系統的超級管理員,所以你必須設定好Root的密碼,這樣到時候你進入系統才不會不知道密碼是什麼,至於用戶你可以先不建立,之後再用Root去建立新用戶。安裝好之後記得按下重新開機,這樣我們才能進入CentOS系統裡。

選擇ROOT密碼
設定ROOT密碼

重開機之後你就會進入終端機的世界,是的,一個完全沒有圖形介面的世界,如何登入呢?因為我們剛剛沒有建立用戶,所以帳號就直接是root了,密碼則是剛剛安裝的時候設定的那組密碼,再輸入密碼的時候畫面不會有反應,請不要擔心,就正常的輸入按下enter就好。那要怎麼關機? 其實你只要在虛擬機左上角按下X,VirtualBox就會問你是不是要關機,反正他不是真實的電腦,不用怕突然關機會整台壞掉啦!所以我們先將機器關機先,我們要先處理另外一個硬體問題。

設定網路卡

因為我們是最小安裝,所以我們的系統其實很笨,連預設的網路卡都不會啟動,所以如果你的虛擬機器是關著的,請你點兩下打開它,然後選擇第一個選項或繼續發呆10秒,你就會進入作業系統裡,接著輸入root以及你剛剛設定的密碼,到這裡我們就登入系統裡了。

你可以嘗試輸入

ping 8.8.8.8

你會發現畫面上顯示「Network is unreachable」,意思就是連不到網路,所以接下來我們要設定預設網路卡讓我們的網路可以正常連線。你只要自畫面上輸入

nmtui

並按下enter,你就會進入一個很精簡的藍色介面,所謂的nmtui是指NetManager - TextUI,也就是說這是管理網路的文字介面,接下來我們要選擇第一個選項「Edit a connection」,來設定我們的網路卡。

NMTUI介面,選擇第一個Edit a connection

接下來你會到左右分割畫面,紅色底的意思代表被你選取了,左邊這欄是你目前全部的網路卡,你有幾張你就要設定幾次,所以右邊請選edit進入設定。

在NMTUI裡面設定網路卡

確定你的IPV4與IPV6都是Automatic,之後透過上下鍵移到Automatically connect 並按下空白鍵來啟動自動連線網路,接著移到OK按下enter,然後選擇右側的Back,接著移到最下面的Quit再按右鍵會到ok,按下enter之後,你再從重新輸入ping 8.8.8.8就會發現可以連到外部網路了,如果你想停下測試只要按下control+c就會停止了。

一般來說來說這邊我們只要輸入ipconfig指令就可以查到我們虛擬機器的本機ip,但由於我們是最小安裝,所以裡面連ipconfig都沒有呢!這下子怎麼辦才好呢?別擔心,本篇教學真的佛心超仔細,所以接下來我們要進入軟體安裝環節了,接下來我們會採用yum來安裝軟體,所以我們先更新yum,由於我們是用root,所以指令前面的sudo其實可以省略,但如果你是用其他帳號,建議還是要加上sudo會比較好一點。在終端機內輸入以下指令:

sudo yum update

中間會詢問你需要OOOM空間可不可以等等的訊息,請都直接輸入Y,更新完成後,接著我們來安裝網路工具

sudo yum install net-tools

安裝的過程中還是會詢問你需要這些硬碟空間可以嗎?一樣還是輸入Y,安裝完全程後,輸入以下指令你就可以取得你的虛擬機器ip配置了。

ifconfig
輸入ifconfig查看本機ip

當你看到你的ip是10.0.2.X的時候,就代表你的虛擬機器使用的網卡是虛擬的(廢話),我們的目標是讓虛擬機器取得192.168.x.x的這種ip,這樣我們才可以連進去Server裡,所以讓我們關閉虛擬機器,回到虛擬機器管理員,在虛擬機器上按右鍵,將網路卡改為橋接介面卡,因為我的電腦(真的Mac電腦)是採用wifi網卡,所以在這裡我也選擇wifi的選項。

改用橋接介面卡,讓虛擬機器取得實際內網ip

再次啟動機器輸入root與密碼,接著再輸入ifconfig,你會發現你的虛擬機器已經可以取得192.168.x.x的內網ip了!接下來我們就要進入Apache 、MariaDB 、 PHP7的安裝環節了!

安裝Apache

請確定你的虛擬機器現在是開啟的,你也有輸入過帳號root與密碼,現在也正在東端機的畫面上,確定無誤之後請輸入以下指令:

sudo yum install httpd

過程中一樣會問你安裝將會使用到多少檔案空間大小等等的問題,請一律按Y一直到出現Complete!字樣為止。

接下來我們先啟動Apache:

sudo systemctl start httpd

接著我們設定當CentOS作業系統啟動時,Apache也會跟著自動啟動:

sudo systemctl enable httpd

到這裡我們就設定完Apache了,撇開指令不談是不是其實還蠻簡單的(笑),所謂的systemctl 就是系統控制system control的縮寫,而httpd則是http daemon的縮寫,簡單來說就是執行http傳輸的軟體,看到這裡有沒有覺得這些指令其實還蠻白話文的,沒這麼嚇人了?

如果你想知道你現在Apache運行的狀態只要輸入以下指令:

systemctl status httpd

當你看到畫面上有一個綠色的active(running) 就代表Apach運作正常囉!

Apach Active (running)示意圖

啊如果不是綠色的active怎麼辦?聽說重開機治百病,所以重啟的指令如下:

systemctl restart httpd

安裝MariaDB

安裝MariaDB資料庫也很簡單,只是中間步驟有點繁瑣,沒關係我們初學者,我們一步一步慢慢來,首先先輸入安裝MariaDB指令:

sudo yum install mariadb-server mariadb

中間一樣會問你需要多少硬碟容易可不可以,一樣輸入Y按下enter,完成後一樣會看到Complete!字樣。接下來啟動MariaDB:

sudo systemctl start mariadb

然後開始我們有點繁瑣的資料庫初始化流程,請輸入初始化指令:

sudo mysql_secure_installation

第一個問題是問你有沒有設定root密碼,這裡的root是資料庫的root密碼,因為我們還沒設定所以直接按下enter即可。

第二個問題是在告入你設定root密碼比較好所以請輸入Y,然後設定你的資料庫root密碼,輸入密碼時畫面不會有任何改變,請正常輸入再按下enter,然後再次輸入一次密碼再按下enter,並請妥善記得這個密碼。

後續問題如果你不想詳細了解,那你就一路輸入Y輸入到安裝完成,然後直接跳到下一個指令,如果你想了解就繼續看下去。

第三個問題是問你是否要刪除匿名使用者,一般來說資料庫都不會開放給外部人員,所以請輸入Y。

第四個問題是詢問你是否在本地才能登入root管理員,通常為了安全性我們不太會開放遠端,所以也請輸入Y。

第五個問題是詢問你要不要刪除測試資料庫,基本上測試資料庫對我來說一點用處都沒有,還很佔空間,所以我也會繼續輸入Y。

第六題他是詢問要不要現在重新讀取權限表,因為剛剛有設定root密碼,所以我還是會繼續輸入Y。

以上你就完成了繁瑣的MariaDB初始化,接著我們來設定當CentOS啟動時,MariaDB也會跟著啟動:

sudo systemctl enable mariadb

到這邊你就完成了MariaDB的安裝了。

如果你檢查MariaDB目前的狀態:

systemctl status mariadb

一樣你會看到綠色的active (runing),萬一不是這個狀態怎麼辦?通常重新啟動也可以治百病:

systemctl restart mariadb

安裝PHP7

在安裝PHP7之前我們需要做一些準備工作,原因是CentOS內建的yum套件軟體只有到php5.4啊!所以我們需要先安裝一下軟體補充包,我們才可以安裝php7,請在終端機輸入:

yum install epel-release

EPEL (Extra Packages for Enterprise Linux) ,基本上就是一個額外的Linux軟體包,接著我們要安裝Remi的軟體包,這樣才可以把PHP7抓回來安裝:

yum install http://rpms.remirepo.net/enterprise/remi-release-7.rpm

接著因為CentOS預設是安裝php5.4,所以我得先把預設的部分關掉,為了關掉我們還需要安裝一個管理包:

yum install yum-utils

然後關閉php5.4:

yum-config-manager --disable remi-php54

然後開啟你需要php7 版本:

yum-config-manager --enable remi-php74

在上述指令中的php74是指php 7.4,所以如果你要7.3版本就改成73就可以了,其他7的版本也是同樣道理。接著終於可以安裝php了:

yum install php

中間一樣會問你安裝需要這些檔案大小等等的問題,請一率輸入Y,一直到看到Complete!字樣為止。如果你想知道你的php安裝有沒有成功,你可以透過查詢php版本指令來檢查:

php -v
上圖為安裝php7.2之後輸入php -v 出現的版本號

接著php本身我們就有一些常用的套件要安裝一下,例如像是GD函式庫等等,以下就是常用套件的安裝指令:

sudo yum install php74-php-fpm php74-php-gd php74-php-json php74-php-mbstring php74-php-mysql
sudo yum install php74-php-mysqli php74-php-mysqlnd php74-php-xml php74-php-xmlrpc php74-php-opcache
sudo yum install php74-php-cli php74-php-common php74-php-pecl-zip

上述指令一樣php74改成你要的版本,因為我安裝的是php7.2所以我都是「php72」-開頭,如何知道你現在安裝的套件有哪些?只要輸入以下指令查詢即可:

php74 --modules

如果上述指令沒有接上版本就會列出全部版本的php套件。

接著我們要啟動php服務

sudo systemctl start php74-php-fpm

與上面相同,我們一樣設定開機時php會自動啟動:

sudo systemctl enable php74-php-fpm

到這邊基本上能裝的我們都裝好了,但很可惜的是你用本機(就是我的mac你拿來上網google的那個)瀏覽器,輸入192.168.x.x,你會發現你還是看不到網站,一般來說Apach裝好都會有一頁testing123的預設畫面,那為什麼你還是看不到呢?那是因為你被防火牆擋住了!

解開防火牆

要連到網站我們需要開通http服務,如果你有要用ssl就還要開通https服務,所以請輸入以下兩個指令:

sudo firewall-cmd --add-service=http --permanent
sudo firewall-cmd --add-service=https --permanent

輸入完後如何確定你的指令有成功?我們可以透過查詢來成功:

firewall-cmd --list-all --permanent

沒有意外你會看到開通的服務有 http 、 https 、 ssh 等,以上指令後面接上「--permanent」是代表永久有效的意思。

防火牆有開啟的服務列表

最後記得要重開防火牆:

 service firewalld restart

然後你就可以用你電腦的瀏覽器開啟192.168.x.x看到tesing123的預設畫面了!

使用FileZilla傳輸檔案

由於防火牆已經有開啟ssh,所以我們可以用sFTP模式來傳輸檔案,主機位置就是你的虛擬機器ip 192.168.x.x,然後帳號基本是root 如果有你開其他帳號的話請改用其他帳號,再來密碼就是你登入CentOS的密碼,連接埠號請記得設定22,如果是用站台管理員,協定且記得選擇sFTP模式。

採用方法一的快速連線或是站台管理員模式都可以

連線的過程會詢問是否信任主機,因為是自己的主機而且還在內網裡,所以就大膽的信任下去吧!接著網站預設的根目錄位置是在:/var/www/html/,只要切換到這裡就可以把檔案放上去囉!

取代PHPMyAdmin的Adminer.php

習慣用mysql的工程師肯定都用過phpmyadmin這個資料庫操作介面,但因為他實在太肥大了,運作效能也沒有說非常好,所以從十年前我就不再使用phpmyadmin,而是改用adminer.php,他非常的輕薄短小,卻支援多款資料庫,也有多國語言設計,重點是他只是一隻php檔案,只要丟上server你就有跟phpmyadmin一樣的功能,剛安裝上去的adminer.php介面非常陽春,但如果你想要前衛一點的介面,adminer.php官網也有一些已經設計好的css,只要下載下來與adminer.php放一起就會從很陽春的介面變成很前衛的介面了!最重要的事......你跟終端機介面相處的時間就變短了很多呢!

按此前往Adminer.php官方網站

最後測試

由於先前我們已經設定好只要虛擬機器重新開機,Apach、MariaDB與PHP都會自動執行,所以讓我們來做最後的測試,看看重開機之後系統會不會自動執行,讓我們用瀏覽器就可以直接瀏覽adminer.php,在終端機下CentOS的重開機指令:

reboot

當系統重新開機,一樣會到帳號登入畫面,你不需要登入root帳號,請直接用瀏覽器打開虛擬機器的IP 192.168.x.x,由於我們只有放adminer.php在網站根目錄裡,所以請在後頭加上/adminer.php,即完整網址為http://192.168.x.x/adminer.php,你應該就會看到以下畫面,到這裡你就可以把你的網站放到測試機上了!

adminer.php 介面

如果你打開很不幸的看到的是php程式碼,請不用擔心,主要的原因是你的Apache不知道.php結尾的檔案要用php來執行,所以你需要在httpd.conf文件新增幾行設定就好。請先輸入以下指令來開啟httpd.conf檔:

vi /etc/httpd/conf/httpd.conf

然後找個你順眼的地方,比方說最上方或有個地方是寫file的地方,找到之後按下i啟動編輯模式,輸入以下內容:

<FilesMatch \.php$>
    SetHandler application/x-httpd-php
</FilesMatch>

輸入完成後按下esc鍵,然後輸入:接著打「wq!」就可以儲存並離開了。

由於我們改了Apache的設定,所以不要忘了要重啟Apache服務:

systemctl restart httpd

然後你就可以重新整理你的瀏覽器,你會發現原本出現php程式碼的問題已經解決了,現在可以正常執行php程式了。

多站台如何處理?

現在我們一台虛擬機器了,也就說我們可以把虛擬機器變成虛擬主機放很多個網站在裡面,通常只需要放一個網站的話是不太會接觸到接下來的設定,但如果是多站台或有SSL需求的話就會需要多站台設定了這個部分了,那一台虛擬機器怎麼變成多站台呢?這部分我們就要不同的連接埠來處理了,預設http走的是80port,所以如果要放其他站台,我們可以改用81port、82port,你高興的話101port也可以,只要其他軟體沒有佔用你都可以使用。

要做到採用其他port這件事我們需要去改Apache的設定,在終端機裡我們通常都用vi編輯器做來修改文字的工具,所以請在終端機內輸入:

vi /etc/httpd/conf/httpd.conf

然後用上下箭頭切換到Listen 80,這裡是設定連線的連接埠,通常http是走80 port,如果你想要新增其他連接埠,請在Listen的下一行按 i 進行編輯,你可以在Listen 80下方多一行Listen 81,但你也可以選擇全部使用80 port,之後再用server name做為區別。

新增監聽的連接埠 port

接著往下一直到這份文件的最底部,新增以下內容:

<VirtualHost *:80> //這裡是設定連接埠
    ServerName demo2 //這裡是網站的網址,所以也可以是www.a.com
    DocumentRoot /var/www/html/demo2 //是網站根目錄
</VirtualHost>

最後按下esc鍵,輸入:接著打wq!儲存並離開httpd.conf檔。

由於我們修改的Apache的設定,所以請重新啟動Apache讓設定生效:

systemctl restart httpd

當然如果你有用到其他連接埠,例如上面說的81 port,也要記得在防火牆打開81 port,並且重啟防火牆:

sudo firewall-cmd --add-port=81/tcp --permanent 
service firewalld restart

如果你的port不是81,請修改上述第一行指令的「port=81」這裡的數字。

補充:常用系統指令

  1. 開機:點兩下虛擬機或打開開關
  2. 關機:halt 或 poweroff 或 shutdown -h now (最後這要root才能用)
  3. 重開機:reboot
  4. 切換資料夾:cd 路徑,範例:cd /var/www/html
  5. 上一層資料夾:cd ..
  6. 列出當前資料夾檔案:ls 或 ls -all (詳細列出全部資料)
  7. vi編輯器:輸入vi 檔案名稱,在vi 中 a或i為修改該行,esc為跳出編輯模式,輸入:才可以打其他指令,以下為其他指令:wq!為儲存離開,單純儲存是w,單純離開請輸入q,強制離開為q!
  8. 硬碟使用量查詢:df -h
  9. 查詢前幾名使用資源最多的程式:top
  10. 查詢記憶體用量:free
  11. 目前正在執行中的程式:ps 或 ps -aux
  12. 強制停止程式:kill PID名稱,例如:kill 101,PID值可以用ps去查
  13. 啟動服務:sudo systemctl start 服務名稱
  14. 停止服務:sudo systemctl stop 服務名稱
  15. 重新啟動服務: sudo systemctl restart 服務名稱
  16. 查詢服務狀態:sudo systemctl status 服務名稱
  17. 常用服務名稱:httpd.service 或 mariadb 或 php74-php-fpm.service

[教學] CodeIgniter4 快速上手 (ㄧ) 下載與安裝

CodeIgniter 是一個PHP 基底的框架,由於PHP7的執行效率比PHP5好,所以CodeIgniter4 幾乎重寫了整個架構,採用PHP7作為基底,並於2020年5月1號正式發布,沒錯!就是今年的勞動節,趁著它發表還沒多久,我們就來試試看看有哪些坑要採吧!

 
開始開發前請確定你的電腦裡有足夠可以運行PHP7.2以上的環境,並且搭配Mysql或MariaDB資料庫,如果這個部分不會的朋友,建議google一下xamppmampampps等等的其中一套LAMP套裝軟體,以快速建置你的本機PHP執行環境。
 
無廢話開始教學!第一步就是安裝CodeIgniter4,你可以透過 Composer下載,也可以用 git 從 github上clone下來,本篇要教的是連程式小白都會的從官網直接下載法!跟著以下步驟保證你零基礎也沒問題啊!
 
  1. 前往CodeIgniter 官網下載 CodeIgniter4
    CodeIgniter 4 官方網站

    CodeIgniter4 官方網站

  2. 下載回來直接直接解壓縮,會出現一個framework-4.X.X,把該資料內的檔案全數複製貼到你的開發環境中。
  3. 接著因為這個東西是外國人發明的,所以我們要添加語系包,讓錯誤訊息可以中文化,因此我們一定要到官方的github下載多國語言語系包,下載回來之後將「/Language」內的zh-tw資料夾,貼到我們開發環境中的「app/Language」內即可。
    github上CodeIgniter的多國語言

    github上CodeIgniter的多國語言

  4. 確定你的開發環境是有正常啟動的,然後開啟你開發環境中的“/app/Config/App.php” ,確定第26行的public $baseURL 的設定符合你的本機環境。有些人要改成http://localhost 或是 http://localhost:8080,有些人可能是自訂名稱,所以這裡每個人都可都有點差異。
    localhost設定

    localhost設定

  5. 設定完baseurl 變數之後,我們要往下尋找大概第72行左右的「$defaultLocale」,將其從en設定成「zh-tw」,也就是我們步驟3所複製的那個Language資料夾,如此一來我們就把錯誤訊息都設定成繁體中文了!
  6. 時區的部分也不要忘記了,讓我們繼續往下尋找大概第111行左右的「$appTimezone」,把America/Chicago改成「Asia/Taipei」,到這邊這個App.php設定檔就差不多完成了。
  7. 我們回到開發環境的根目錄,將public資料夾裡面的「.htaccess」跟 index.php 複製一份到根目錄,接著打開你剛剛建立在根目錄的index.php,將20行的「../」移除,如下圖:
    delete "../"

    delete "../"

     

    如果你找不到上面20行的「$pathsPath = FCPATH . '../app/Config/Paths.php';」,請試著改找28行的「require realpath(FCPATH . '../app/Config/Paths.php') ?: FCPATH . '../app/Config/Paths.php';」,一樣移除裡面的「../」,共有前後兩個部分,移除完請記得儲存。

  8. 在瀏覽器中開啟你的本機測試環境,你就可以看到歡迎頁了!
    welcome 歡迎頁

    welcome 歡迎頁

     
  9. 如果你想要開啟除錯模式,在CodeIgniter4 你可以快速切換成開發模式來開啟除錯模式,只要在根目錄找到檔名env的檔案,將其複製一份,並重新命成成「.env」,然後將裡面的第17行設定成「CI_ENVIRONMENT = development」 即可快速切換成開發模式,當然你也可以改回「CI_ENVIRONMENT = production」即可關閉。
    CI_ENVIRONMENT = development

    CI_ENVIRONMENT = development

以上就是本次的CodeIgniter4 下載與安裝的教學,如果有哪邊寫錯或不清楚的地方麻煩留言告訴我,我會盡快修正的,下一篇是CodeIgniter 4 快速上手 (二) 建議簡單的簡易最新消息-新增篇

[教學] Vue js快速上手 (七) 改變樣式的魔術棒 v-bind

離上一篇的for loop又隔了一段時間(擦汗),除了在思考這邊要說什麼以外,也是真的年底到了,忙了一堆不知道在忙什麼的事,不過我一直都沒有忘記我的教學還沒寫完......我想,應該也是我覺得我太忙了,所以我才每年都沒參加鐵人賽吧(搖頭)。

如果你會做網頁(我是指前端的部分),那你一定知道HTML一定要搭配一個叫CSS的東西才能讓版面變漂亮、變好看,問題是我如果我用了vue.js,我要怎麼改變我的配色?比方說要提醒的東西就要上紅色、警告的東西就要上黃色、只是一般普通訊息就要上綠色的這種紅綠燈訊息,我是要怎樣才能在同一個按鈕或同一個Div內透過vue.js的運算就做到更換的效果?

這個時候我就不得不來說一下v-bind這個東西了,v-bind是vue.js裡負責改變配色、大小等等所用的屬性,也就是說v-bind就是針對css而存在的屬性,而這樣的屬性會有什麼樣的屬性值呢?再講屬性值之前,我們要來認識一下v-bind的副屬性,也就是v-bind:style與v-bind:class!

如果你對css很熟,你一定會知道所謂的行內樣式style="OOXX",還有id與class樣式,當然由於id有不重複性,為了讓css可以更有效率,現在都會提倡大家用class,也因為此,所以只有v-bind:class,這個部分是比較特別的,可能稍微需要用一下大腦的記憶體。

首先我們先來看看v-bind:style怎麼用,其實用法還挺簡單的,屬性值裡面就直接寫行內樣式,但是樣式的數值,比方說顏色或文字大小,我們就可以設定在vue的data,這樣我們就可以直接帶進畫面,範例如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <div v-bind:style="{ color: myColor, fontSize: myFontSize + 'px' }">123</div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                   myColor: 'red',
                   myFontSize: 30
                }
            });
        </script>
    </body>
</html>

如果你有跟著前面的教學一路學過來,我相信到這裡一定難不倒你,因為只是把data裡面的變數直接帶進去而已。當然我們現在我們在coding的時候一定要講求維護性,最好是不要改HTML只改CSS或是不要改HTML或CSS我們直接改js,所以我們換個比較好維護的寫法:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <div v-bind:style="myStyle">123</div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                   myStyle: {
                    color: 'red',
                    fontSize: '30px'
                  }
                }
            });
        </script>
    </body>
</html>

是的,我們只要在v-bind:style裡面直接設定一個物件名稱,然後就可以在vue的data裡面直接透過物件去設定我們要屬性值,在這裡我們輸入的css是文字變紅並且文字變大成30px,簡單、明瞭、好維護!但是只能滿足我們基本需求,而且現在的網頁很少會用行內樣式啊!所以我們就來看看v-bind:class吧!

v-bind:class其實用法與寫法上當然就比剛剛的v-bind:style簡單,畢竟css部分我們都可以另外設定在css區域,日後要維護也是很容易,只要改css就好,不像剛剛好像把css混在js裡,當然看起來就會簡單很多,我們來看看範例:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
        <style>
          .active{
            color:red;
            font-size: 30px;
          }
        </style>
    </head>
    <body>

        <div id="app">
            <div v-bind:class="{ active: myCheck }">123</div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                   myCheck: true
                }
            });
        </script>
    </body>
</html>

是的!在這個範例裡面我們很明顯的可以看到,使用v-bind:class,我們只要判斷這個class是不是要啟用就可以了,像我大括號裡面是寫active:check,其中active就是我們的class名稱,而myCheck則是我設定的變數名稱,我在vue的data裡面設定的ture,意思就是啟用這個class,所以當我們打開頁面的時候,你就會看到123這行div被套上了一個叫active的class。

咦?既然可以設定ture,那是不是也有false?那既然有ture跟false,那我是不是可以設定很多個class??當然可以!你可以設定一連串的class名稱都沒有問題,因為重點在於要啟用哪一個class對吧? 那要怎麼設定很多個class?我們簡單範例如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
        <style>
          .active{
            color:red;
            font-size: 30px;
          }
          .normal{
            color:green;
            font-size: 30px;
          }
        </style>
    </head>
    <body>

        <div id="app">
            <div v-bind:class="{ active: myCheck , normal:myCheck2 }">123</div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                   myCheck: false,
                   myCheck2: true
                }
            });
        </script>
    </body>
</html>

看到範例有沒有覺得超簡單?只要在大括號裡面透過逗點連接,你就可以繼續輸入下一組class名稱跟判斷用的變數了,有沒有超簡單?你只要把myCheck與myCheck2的ture跟false對調,套在123這個div的class,就會對調囉!

本篇教學就到這邊,希望我能更快擠出時間寫下一篇教學(點頭)!

[教學] Vue js快速上手 (六) 一定要懂for loop

在寫教學的過程中很囧的一件事就是,教學還沒寫完新版本就誕生了,這就是我中途又去忙了一個多月之後,回來發現的第一件囧事,是的,Vue.js 2.0 釋出了,所以我花了一點時間概略地在看了一下,還有之前寫的五篇教學。所幸,因為我寫的是快速上手,都是基本用法與觀念,在新版的Vue.js變化不大,不影響之前五篇的教學範例,所以已經看了這系列教學的朋友其實不用太擔心,我也將教學裡面本來使用1.0.26版本的Vue.js,全數都改成了2.0.1版本的Vue.js了。

好了,這篇我們要來學一個跟if一樣很重要的東西,就是所謂的for,通常你學一個新的程式語言,不管你怎麼學,都會看到if else跟for 這兩個東西,也就是說當你學一個新語言,這兩個東西一定是在必定要學、要看的範圍裡,所以本篇我們再來看看for loop吧!

for loop 通常是用來處理列表或是重複輸出一樣格式的元素時再使用的,比方說我要在頁面上產生10個div、10個li,或是輸出九九乘法表這類的資料時,for loop就是你肯定要使用的第一選擇了!首先我們先來看看如何輸出1~10吧!
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <span v-for="n in 10">{{ n }}</span>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app'
            });
        </script>
    </body>
</html>

上面這段code執行後你會發現在頁面會出現“12345678910”,有沒有覺得超簡單?看不懂?,其實我在span這裡加上了v-for屬性,屬性值裡面寫的意思是“變數n在10裡面”,然後樣本{{ n }} 則是輸出n這個變數,所以vue.js自然就會知道我的n要從1開始,一直跑到10,自然頁面上就會輸出1~10了。如果你不是用Vue.js v2,你是用v1例如版本1.0.26,那n的變數會從0開始輸出10個數字,你就會得到“0123456789”,所以如果你想要從1開始記得用n+1喔。

那要怎麼寫出九九乘法呢?我跟你說,真的超簡單,就用上面那個範例再多幾行就結束了!
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <div v-for="i in 9">
              <h3>{{ i }}</h3>
              <div v-for="j in 9">{{ i }} x {{ j }}={{ i*j }}</div>
            </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app'
            });
        </script>
    </body>
</html>

真的!就這樣四行,九九乘法就搞定了!有沒有超簡單?當然一般用v-for不光只是要輸出數字而已,就像我開頭有說for loop,通常拿來輸出列表用的,那假設我們有一個表是蘋果、香蕉、椰子,那我們要怎麼用v-for輸出呢?很簡單,我們只要把蘋果、香蕉、椰子放進data裡,我們就可以輸出在頁面了,以下就是範例。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <ul>
              <li v-for="item in items">
                {{ item.message }}
              </li>
            </ul>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    items: [
                      { message: 'Apple' },
                      { message: 'banana' },
                      { message: 'Coconut' }
                    ]
                }
            });
        </script>
    </body>
</html>

是的,所以我們把蘋果、香蕉、椰子這些資料放進data裡,取名items,然後在v-for屬性裡設定一個變數叫item(你要改叫n或改叫i都行),然後就會開始輸出items的第一個、第二個、第三個,而當前items裡的第一個值、第二個值、第三個值就會自動帶入item中,然後第一、第二、第三的一二三,我們稱之為index,也就是目錄順序的意思,有需要也是可以輸出的。

在舉一個例子,比方說地址好了,台北市裡面有中山區、大同區、中正區,這樣資料要怎麼放進data裡?
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <ul>
              <li v-for="(item, index) in items">
                {{ parentMessage }} - {{ index }} - {{ item.message }}
              </li>
            </ul>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',
                data: {
                  parentMessage: '台北市',
                  items: [
                    { message: '中正區' },
                    { message: '中山區' },
                    { message: '大同區' }
                  ]
                }
            });
        </script>
    </body>
</html>

這時候我們就可以用perantMessage來帶入台北市這樣的資料,然後上述的範例我也把index輸出在畫面上,你可以明確看到index的用途,最後,“item in items”這裡的in你要改成of 也是沒問題的,效果是一樣的,v-for的用法就介紹到這裡,用法真的不難,只是要如何運用得好就真的不是一件簡單的事了,希望到目前為止的教學可以讓你覺得得心應手、上手無障礙喔!

[教學] Vue js快速上手 (五) Vue.js要如何v-on的其他運用

上一篇我們講了很多v-on:click的運用,但是說到按鈕,最常出現的地方應該就是表單了,既然是表單,那就有所謂的submit這個動作,所以本篇一開始,我們就來說說v-on:submit吧!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3 click</title>
    </head>
    <body>
        <div id="app">
            <form action="submit.html" v-on:submit="handleIt">
                <button type="submit">立即送出</button>
            </form>

        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',

                methods:{
                    handleIt: function(){
                        alert("here I am!");
                    }
                }

            });
        </script>
    </body>
</html>

上述的範例與上一篇一開始的範例非常像,只是在這邊我們用了一個form表單,當表單送出時就會轉到submit.html,我的submit.html只是一個空白頁面,裡面寫著送出成功,所以目前這個範例是不會傳送任何東西到submit.html頁面的,只會在你按下按鈕的時候,跳出文字視窗寫著“here I am!”。到目前為止你會覺得v-on:submit跟上一篇v-on:click很像,如果不看原理只看結果基本上一模一樣的,只是一個是click一個是submit的差別而已。

好啦,那假設我們今天有一顆按鈕,但是我不希望他就這樣直接submit出去,那怎麼辦?我還是希望他按下按鈕之後會跑出“here I am!”,但是他不要送出資訊轉到submit.html,那這時我們要怎麼做?很簡單,我們只要寫v-on:submit.prevent就好了,有沒有很簡單?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3 click</title>
    </head>
    <body>
        <div id="app">
            <form action="submit.html" v-on:submit.prevent="handleIt">
                <button type="submit">立即送出</button>
            </form>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',

                methods:{
                    handleIt: function(){
                        alert("here I am!");
                    }
                }
            });
        </script>
    </body>
</html>

除了.prevent之外,還有.stop、.self、.capture等等,效果如何就留著給你自己嘗試與研究了。再來除了submit以外,還有keyup,keyup後面可以點的就多了,比方說.enter、.up、.down、.left、.right等等,後續如果有機會會想幾個範例來給大家看看。

連續寫了兩篇v-on,最後大家是不是開始覺得v-on好像會很常需要寫到?畢竟這些都是在互動性操作下會啟動function的功能,實戰上就顯得用到的比例很高,所以在vue.js裡就變成有簡寫的方法了。簡寫的方法很簡單,就是把“v-on:”改寫成@就可以了,我們拿一開始“here I am!”做範例如下。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3 click</title>
    </head>
    <body>
        <div id="app">
            <form action="submit.html" @submit="handleIt">
                <button type="submit">立即送出</button>
            </form>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',

                methods:{
                    handleIt: function(){
                        alert("here I am!");
                    }
                }
            });
        </script>
    </body>
</html>

透過@這樣的簡寫,我們就可以把“v-on:click”改寫成“@click”,把“v-on:submit”改寫成“@submit”,讓我們以後再用v-on的時候可以更快速的輸入,也可以避免你一直寫v-on、v-on的煩躁程度了,是不是很貼心呢!

[教學] Vue js快速上手 (四) Vue.js要如何v-on:click?

從開始到現在,我們的範例都是real  time即時執行,但是一般網站幾乎都不是real time即時執行的,尤其是希望那些透過網友點擊才會出現互動的內容,本篇我們就來談談v-on這個屬性吧!v-on呢其實就有點類似jquery的on(),所以就會有click、submit、keyup等等這些延伸設定,我們假設畫面上有一個按鈕,按鈕按下後會跳出文字框,以下是範例程式碼。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3 click</title>
    </head>
    <body>
        <div id="app">
            <input type="submit" value="立即送出" v-on:click="clickme">
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',

                methods:{
                    clickme: function(){
                        alert("here I am!");
                    }
                }

            });
        </script>
    </body>
</html>

是的,當你點擊了立即送出後,透啟動v-on:click屬性,屬性值是clickme,所以就會呼叫下方methods裡面clickme的function內容,然後你就會看到文字視窗內容顯示“here I am!”,當然有些人會說這個範例有點弱,我用javascript一樣做得到,當然!vue.js本身就是javascript 的 framework,所以javascript本來就可以辦得到,那我們來改造一下這個範例,讓頁面會統計你點擊這個按鈕次數,做一個小小的計數器,以下是修改過後的範例!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3 click</title>
    </head>
    <body>
        <div id="app">
            <p>目前以點擊:{{count}}次</p>
            <input type="submit" value="立即送出" v-on:click="clickme">
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    count:0
                },

                methods:{
                    clickme: function(){
                         this.count += 1;
                    }
                }
            });
        </script>
    </body>
</html>

只要稍加修改,加上前幾篇教過的data,就可以做出一個簡單的計數器了!這邊要記得count這裡直接0的話,型別判斷就是數字,但是如果你寫'0',就會被當文字型別,最後的結果就不是你想要計數器了!

好啦!最後再來一個簡單的click範例,這個範例就是假設我們有兩顆按鈕,分別按下去都會跳出不一樣的文字視窗,但是文字視窗的訊息不寫在methods裡面的function裡,而是共用相同的function,所以簡單說就是要可以丟參數進去function裡,以下就是範例!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>3 click</title>
    </head>
    <body>
        <div id="app">
            <button v-on:click="handleIt('uh')">I say uh</button>
            <button v-on:click="handleIt('ah')">you say ah</button>

        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',

                methods:{
                    handleIt: function(msg){
                        alert(msg)
                    }

                }
            });
        </script>
    </body>
</html>

是的!根據這個範例呢,你也可以在那邊uh~~~ah~~~(這是某首DJ的歌,有點老了),當你點了"I say uh",v-on:clicke就會呼叫handleIt function,然後把uh這個值丟到handleIt function裡,所以alert出來的內容就會變成“uh”,當然當你點了“you say ah”,就會把ah這個值丟入handleIt function中,最後alert出來的內容就會變成“ah”了!

由於v-on還有其他運用方式,要講的東西有點多,所以下一篇我們還是會繼續講v-on的其他用法,所以如果這一篇還不是很了解,建議多練習幾次範例,不然下一篇可能會更不懂喔!當然有問題你也可以在下方留言或上粉絲團社團一起討論喔!

[教學] Vue js快速上手 (三) 必學的if else!v-show!

上一篇我們學到了real time即時更新頁面的方法,在學習任何一種程式語言時,基本上都會有一些必學的東西,比方說變數、參數、if else 、 for loop 、 for each 、 while 與一些運算子(加、減、乘、除、and、or等等),這些都是一定會學到的東西,一旦你真的搞懂,即便換了一套程式語言,你也會發現這些部分都很似曾相識,所以這篇我們要來講的就是if else!

來介紹一下這一篇你會學到的三個html 擴充屬性:

  1.  v-show :這是Vue.js特有的寫法,基本上就是等於v-if,所以屬性值就是所謂的運算條件了。
  2.  v-if :同v-show,唯一差別是v-show只是用css dispaly:none來隱藏,但v-if是真的會移除
  3.  v-else : 這是當v-show或v-if條件不成立時需要選擇的答案

看完上面三點如果你覺得你完全沒看懂,千萬不要緊張,也不要覺得困難,就把它當專有名詞就好,就像橘子為什麼叫橘子,柳丁為什麼叫柳丁一樣,就只是一個名詞而已,不要為了看不懂這些名詞就停下來。現在我們來舉個實際範例來實現if else功能!

不知道到目前為止大家覺得Vue.js好不好學?如果要打個分數,1~10分你會打幾分?我們假設6分才及格,所以當你打6分以上,畫面會出現Vue.js so easy,如果不到6分,畫面上就會出現still learning Vue.js。好了!題目出來了,稍微思考一下大概要怎麼做吧!在程式開發的過程中,其實最難的部分是思考,思考如何把程式寫出來,還要考量架構、效能等等,這才是我覺得最難的地方,所幸題目是我出的,所以很簡單,你有想好一個大概了嗎?讓我們繼續看下去!

第一步當然是運用上一篇所學,先建立一個可以即時打分數的頁面,程式碼如下:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>2 v-show</title>
    </head>
    <body>

        <div id="app">
            <h1 class="error">{{ score }}分</h1>
            <p>你覺得vue.js簡單嗎?請輸入1~10分</p>
            <input type="text" v-model="score">
        </div>



        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el:'#app',

                data:{
                    score:''
                }

            });
        </script>
    </body>
</html>

好了!如果你執行上面的code,你會發現你已經完成一個簡單、可以即時顯示分數的頁面,只是第一行很奇怪,會一直掛個分在那邊,如果你輸入了1,它就變成1分,那就合理了,所以你可以帶入score的預設值是0,這樣就會顯示0分,看起來就會合理多了!

第二步就是,如果score分數超過6分就要顯示“Vue.js so easy”,但不足6分就要顯示“still learning Vue.js”,這部分要怎麼寫呢?那當然就要用到v-show與v-else了,以下就是範例程式碼: <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>2 v-show</title>
    </head>
    <body>

        <div id="app">
            <h1 class="error">{{ score }}分</h1>
            <div v-show="score">
                <p v-if="score >= 6">Vue.js so easy</p>
                <p v-else>still learning Vue.js</p>
            </div>

            <p>你覺得vue.js簡單嗎?請輸入1~10分</p>
            <input type="text" v-model="score">
        </div>


        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    score:'0'
                }

            });
        </script>
    </body>
</html>

上面的範例程式碼,我加上了score預設值是0,然後當score是有值的,就會根據目前輸入的分數去做判斷,判斷內容就是大於等於6分以上就會顯示“Vue.js so easy”,不足6分就會顯示“still learning Vue.js”,當然你也可以把條件是改成大於5分,結果會是一樣的,當然你把所有的v-show都改成v-if,結果還是會一樣的。當然我們也把我們最後的code上放jsfiddle

當然這個題目還可以繼續延伸下去,比方說當輸入文字超過10時會出現警告訊息,而當score的參數值不存在時也會顯示不一樣的文字,各位可以自行增加一些條件來做延伸練習。

另外,值得一提的是在Vue 2.1版本加入了另外一個html屬性,也是屬於if else家族的,那就是“v-else-if”,用法其實跟else差不多,所以當你有很多else的時候,除了最後一個可以寫v-else以外,從倒數第二個以上的else都可以寫成v-else-if,各位也可以自行試試看喔!

[教學] Vue js快速上手 (二) 第一支Real-Time即時更新

上篇我們教了Hello World的寫法,是不是非常簡單好懂,Vue.js其實還有許多不同的寫法是在輔助各種開發情況下,可以快速維護,減少前端人員來來回回找code的時間,而快速維護也變得是這一兩年來最重要的網站發展重點,不管是MVC、MVP或MVVM等等開發模式,其實主要的本質我覺得都在畫清職責、方便維護、提升效能,而這些寫法在後續的教學裡,如果有機會或者有好的例子,我會會盡量一一舉例讓大家可以了解。學習所有的寫法有助於您判斷、規劃一個好的開發架構,讓你日後維護或是開發類似的功能時可以事半功倍。本篇當然延續上篇,用“Hello World!”來做範例,不過會做一些修改與調整好來做展示。

首先在這裡我先提出一種與上篇不一樣的寫法,也是最簡單的變形,那就是將參數設定另外寫,也就是當你參數預設值非常複雜時,為了讓您可以發便維護,會建議你採用這種寫法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            {{ message }}
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var data = {
                message:'Hello World!'
            }

            new Vue({
                el:'#app',
                data:data
            });
        </script>
    </body>
</html>

接下來,我要在這裡介紹一個新的html擴充屬性,叫V-model,如果直接按照屬性名來翻譯大概就是呼叫vue裡面的model功能,所以其實還蠻直白的,在Angular也有所謂的ng-model屬性,功能上是差不多的。怎麼使用V-model?很簡單,我們將剛剛的“Hello World!”加上一個input,如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <h1>{{ message }}</h1>
            <input type="text" v-model="message">

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var data = {
                message:'Hello World!'
            }
            new Vue({
                el:'#app',
                data:data
            });
        </script>
    </body>
</html>

我們將{{message}} 加上h1標籤,然後在下方新增一個文字的input輸入表單,接著v-model名稱是message,所以這個input就會自動帶入與{{message}} 相同的參數內容,而你只要變更inupt裡面的文字,頁面上的{{message}}參數也會立刻馬上一起更新,非常好玩,而且,恭喜你!你在不知不覺中寫了第一隻用Vue.js完成的Real-time即時更新頁面!真是太厲害了你!有沒有很簡單!

這到底是什麼原理呢?如果你上一篇有注意看,你會發現我在解釋data裡面的message時,我是說“預設值”是"Hello World!",是的!它是預設值,所以當你在v-model裡面輸入文字或刪減文字時,你修改的其實就是data裡面message的參數值,既然參數值改變,vue.js就會自動幫你啟動model進而修改{{message}} 在頁面上呈現的內容,進而達到Real-time即時更新頁面的效果。

最後要來說一下一個簡單的debug方式,開頭我們有說將data另外寫可以避免參數過多時顯得混亂,那們我們要怎麼確定我們參數的內容是對的?最簡單得方式就是顯示在頁面上,我們只要多一行就可以達到我們要的效果:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <h1>{{ message }}</h1>
            <input type="text" v-model="message">
            
            <div>{{ $data | json }}</div>
        </div>



        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var data = {
                message:'Hello World!'
            }
            new Vue({
                el:'#app',
                data:data
            });
        </script>
    </body>
</html>

在這裡又看到{{}} 了,在裡面寫的是$data,也就是下面var data的內容,而|在這邊是filter的意思,也就是篩選,還蠻好用的,之後有時間會再好好的提一提,而最後的json就是大家可能還蠻熟悉的json格式,所以最後在畫面上你就可以看到用json格式組出來的data參數值了!

再試試看修改input內容看看,下方json格式的參數值是不是也會跟著改變?沒錯,你又再一次證明你真的完成了一個Real-Time即時更新頁面了!恭喜你!!

最後附上jsfiddle,讓各位可以在線上看到本篇教學最後一段code所呈現的結果:

[教學] Vue js快速上手 (一) Hello World!

對於前端框架目前有許多的選擇,比方說React、Angular,以及還有今天要介紹的Vue.js!Vue.js有人說它像React,也有人說它像Angular,Vue.js主要是View跟Model的部分,但是效能、速度以及學習門檻都比React或Angular低,所以上手簡單,對於javascript苦手,或是一直遲遲無法學會React或Angular的同學們來說,簡直是一道曙光!

Vue.js的優點呢,主要就是專注在web技術上,支援html template、pug (jade)、coffeescript,甚至可與sass、less等加強版CSS做整合,而擴充性質的plugin也是頗多的,所以對於專注web技術研發的朋友呢,這就真的值得學一下了,畢竟不像React、Angular專注跨平台、跨載具,導致要學的東西就變很多,或是有很多新的架構概念要學習,當然Vue.js也是有缺點的,那就是太專注於web上了,其他平台就沒辦法好好使用了,不過反過來說,如果你主要是開發web,那你來說就沒什麼差了,而且Vue.js可以說是簡單版的Angular,當你學會Vue.js之後要轉到Angular反而可以讓你學習快速,神奇吧!趕快來看一下怎麼用Vue.js吧!

仔細看官網文件你會發現有一堆安裝方式要看,感覺好像非常複雜,其實一點也不複雜,就跟你載入jquery一樣:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
只要把上面這一行放在html檔案裡就可以了,有沒有很簡單?當然你要下載下來放在網站目錄裡也是一個不錯的選擇!

按照寫程式慣例,我們就來示範一個Hello World吧!

第一步,非常簡單,建立空白的html頁面。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>


    </body>
</html>

第二步,引入Vue.js,並建立一個div命名id為app。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </body>
</html>

第三步,建立Vue執行的function,在div#app寫入Hello World!
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            {{ message }}
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    message:'Hello World!'
                }
            });
        </script>
    </body>
</html>

結束!有沒有超簡單!看不太懂?沒關係我來稍微解釋一下,在div#app裡面,你會看到{{ message }} 這樣的東西,如果你以前學過Smarty(PHP的樣板引擎),你會覺得有點熟悉,如果沒學過Smarty也沒關係,pug (jade)也類似{}的東西,簡單來說{{}}就是會幫你帶參數進去這個位置上,而在new Vue裡面我指定在id名稱為app的這個element(通常會翻成元素)裡帶進message參數,而message我在這裡指定預設值為Hello World! ,以上就是示範Hellow world的寫法,有沒有很簡單!很簡單吧!讓我們用jsfiddle把這一篇的code來執行一下看看:
如果你還搞不懂,沒關係,可以在本篇或Facebook社團裡提問,我會盡快解決你的問題的!