1. 程式人生 > >超詳細搭建PhpStorm+PhpStudy開發環境

超詳細搭建PhpStorm+PhpStudy開發環境

剛開始接觸PHP開發,搭建開發環境是第一步,網上下載PhpStorm和PhpStudy軟體,怎樣安裝和啟用就不詳細說了,我們重點來看一看怎樣搭配這兩個開發環境。

前提:現在假設你已經安裝完PhpStorm和PhpStudy軟體。

我的PhpStorm使用的是預設安裝目錄,這個沒什麼疑問的,PhpStudy軟體我選擇解壓的目錄是G:\Program Files\ 。

在PhpStudy軟體的解壓目錄下的www資料夾就是我們的網站根目錄。

現在我們使用PhpStorm新建一個新工程。

第一步:開啟PhpStorm軟體,點選建立新專案,在輸入框填寫專案名稱,專案存放地址,專案型別資訊。

這裡我的配置資訊看上圖。填寫完點選確定。

第二步:設定PHP專案的版本資訊

這裡我選擇的level是PHP5.6

Interpreter現在預設是沒有的,我們要先配置一下。

點選在Interpreter的選擇框旁邊的按鈕,跳轉到的介面如下圖:

預設沒配置過的左手邊的框裡面是空白的,我已經配置過了,所以現在左手邊有了兩個Interpreter版本,現在我們要新建一個Interpreter,點選1位置的按鈕新增Interpreter,在2的位置填寫這個Interpreter的名稱,位置3是我們要設定的php.exe檔案位置,點選右手邊的"...",在彈出的對話方塊中選擇我們Phpstudy的php.exe檔案位置(Phpstudy幫我們集成了php)。

配置完成之後點選確定。現在我們回到前一個介面,點選下拉就可以看到我們剛才配置的Interpreter。

這裡選上其中一個,看你要使用什麼版本咯。再點選確定,這時候建立新工程就完成了。

第三步:新建php檔案

現在我們的工程是沒有檔案的,需要我們新建網頁檔案。選中專案檔案右鍵-->新建,可以看到有好幾種檔案格式:

我新建了兩個檔案如下圖:

檔案的內容如下:

form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP處理表單2</title>
</head>
<body>
<form action="welcome.php" method="post">
    名字: <input type="text" name="fname">
    年齡: <input type="text" name="age">
    <input type="submit" value="提交">
</form>
</body>

welcome.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$_POST獲取表單post資訊</title>
</head>
<body>
<?php
echo "歡迎".$_POST["fname"]."!<br/>";
echo "你的年齡是".$_POST["age"]."歲。";
?>
</body>
</html>

現在開啟form.html檔案,滑鼠點選檔案內容的任意地方,會有個懸浮框出現:

這個是可以選擇開啟form.html檔案的瀏覽器,我們選擇其中一個可以看看form.html檔案的顯示效果,其實只是一個簡單的表單:

重點來了,也是我寫這篇部落格的目的,我們填寫表單資訊之後點選“提交”按鈕,我們要實現的效果是跳轉到welcome.php頁面,並顯示form.html頁面我們填寫的名字和年齡資訊 。問題來了,跳轉之後瀏覽器顯示“檔案找不到”。這就鬱悶了,為什麼form.html檔案也可以開啟,而welcome.php檔案跟form.html檔案都是放同一級目錄下的啊,怎麼會找不到呢,折騰了一天,終於發現問題了,原來我編輯的只是本地檔案,至於form.html檔案能開啟是因為Phpstorm軟體自動幫我們把檔案使用本地伺服器開啟所以能找到,而welcome.php檔案我們並沒有提交到本地伺服器上。

下面是解決方式(主要是配置本地伺服器);

步驟一:配置本地伺服器

選擇:工具-->Deployment-->Configuration

初次是沒有任何配置資訊的:

我們點選“+”新增伺服器配置,在彈出框中選擇“Local or mounted folder”:

下面的配置很重要,關乎檔案能否正常被找到,新增完伺服器之後我們就要配置檔案的位置了:

選擇 “Connection”,位置3就是剛才我們選擇的伺服器型別,關鍵是位置4和5。

“Upload/download project files”意思是上傳或下載的檔案目錄 ,這裡很關鍵,因為我們使用的是PhpStudy,PhpStudy有自己的網站目錄,這裡我設定的是PhpStudy的網站根目錄,就是我們之前PhpStudy解壓的位置G:\Program Files\phpStudy\WWW,待會就知道這個目錄位置有什麼用了。

"Browse files on server" 意思是伺服器專案的訪問地址(就是用瀏覽器可以開啟專案頁面的連結地址),這裡可以寫成PhpStudy的根地址“http://localhost/”,後面可以再指定具體的檔案位置。

選擇“Mappings”,如下圖配置:

這裡注意位置2是被選上的,成灰色不可點選。

位置3就是專案原始檔的地址,我的專案檔案是放在“G:\Php-workspace\MyTest”目錄下。

位置4是專案在本地伺服器的詳細資料夾位置(相對於我們在 “Connection”設定的“Upload/download project files”位置,就是我們待會把原始碼上傳部署到伺服器的檔案位置),這裡我指定為“/phpStudyTest”,待會工程上傳的時候就會上傳到“G:\Program Files\phpStudy\WWW\phpStudyTest”這個phpStudyTest資料夾下。

位置5是相對於我們在 “Connection”設定的"Browse files on server"的位置,我們的專案現在放到了“localhost”的根位置phpStudyTest資料夾下了,所以設定為“/phpStudyTest”。

位置6就是我們可以用瀏覽器開啟專案的連結地址預覽。

關鍵是要理解清楚這幾個資料夾的意思,不然是訪問不到網頁檔案的。

配置完之後點選“確定”,現在我們還是沒有把工程上傳到伺服器的,下一步就是設定上傳工程的配置。

步驟二:配置執行除錯環境

點選編輯結構:

展開 Default -> PHP Web Application,現在是<no server>狀態,如下圖:

點選“...”按鈕,在彈出框中點選“+”新增伺服器資訊

位置1 填寫配置的名稱,位置2填寫我們本地伺服器的地址,這裡是“localhost”,埠預設是80,Debugger預設就好了,也可以去配置Xdebug,這裡不重點講。填寫完成之後點選:應用->確定。

回到上一個頁面,在Server下拉就可以看到我們配置名稱:

位置2是我們預設的連結開始位置,這裡填“/”就好了。

位置3是我們用於除錯的預設瀏覽器型別。

現在一切都配置好了。OK!!!!!!!!!!!!!!

部署工程到伺服器

點選工程右鍵也可以的,我們選擇點選工具欄,點選位置如下圖:

上傳成功之後,控制檯輸出;

如果不想每次都手動上傳,可以設定自動模式,自動模式下當我們修改了檔案並儲存之後,軟體自動把修改的檔案上傳到伺服器。設定如下:

現在我們來看看效果:

點選執行form.html

再點選提交,現在能正常跳轉了:

工程原始碼:

好了,本文結束了,希望能幫到還在尋找解決方法的同學。這也是本人通過實踐得出來的總結,希望尊重別人的勞動成果,寫這麼長不容易的,轉載記得要標上原文連結地址。

如果有什麼寫得不好的地方歡迎指出,謝謝。