WampServer+VS Code + PHP開發(fā)環(huán)境搭建

時(shí)間：2023-07-12 14:33:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-12 14:33:01 來源：網(wǎng)站運(yùn)營

WampServer+VS Code + PHP開發(fā)環(huán)境搭建：第一步：安裝DirectX修復(fù)工具

DirectX修復(fù)工具(DirectX Repair)是一款系統(tǒng)級工具軟件，簡便易用。本程序的主要功能是檢測當(dāng)前系統(tǒng)的DirectX狀態(tài)，如果發(fā)現(xiàn)異常則進(jìn)行修復(fù)。程序主要針對0xc000007b問題設(shè)計(jì)，可以完美修復(fù)該問題。本程序中包含了最新版的DirectX redist(Jun2010)，并且全部DX文件都有Microsoft的數(shù)字簽名，安全放心。

本程序?yàn)榱藨?yīng)對一般電腦用戶的使用，采用了易用的一鍵式設(shè)計(jì)，只要點(diǎn)擊主界面上的“檢測并修復(fù)”按鈕，程序就會自動(dòng)完成校驗(yàn)、檢測、下載、修復(fù)以及注冊的全部功能，無需用戶的介入。
下載地址：DirectX修復(fù)工具

不先修復(fù)電腦用戶Windows系統(tǒng)，后面使用WampServer會有許多小問題出現(xiàn)。WampServer是針對Windows系統(tǒng)用戶的。


第二步 安裝Wampserver

1.下載地址：WampServer
Wampserver 是從英文翻譯而來的。
WampServer是指用于Microsoft Windows操作系統(tǒng)的解決方案堆棧，由Romain Bourdon創(chuàng)建，由Apache Web服務(wù)器，支持SSL的OpenSSL，MySQL數(shù)據(jù)庫和PHP編程語言組成。它是由法國人開發(fā)的Apache Web服務(wù)器、PHP解釋器以及MySQL數(shù)據(jù)庫的整合軟件包，可免去開發(fā)人員將時(shí)間花費(fèi)在繁瑣的配置環(huán)境過程。
但是假如初學(xué)者不掌握其中的基本要領(lǐng)，連續(xù)花費(fèi)幾小時(shí)到幾天仍然無法達(dá)到搭建成功在本地開發(fā)的開發(fā)環(huán)境也是時(shí)有出現(xiàn)。












2.匹配版本
版本不一致的軟件整合使用導(dǎo)致的問題，會浪費(fèi)許多不必要投入的時(shí)間。
在基礎(chǔ)階段版本以穩(wěn)定、夠用選擇標(biāo)準(zhǔn)。
不要一味追求最新的版本，但也不能選擇過早的舊版本。
選擇自己安裝的php的版本的位置，這里雖然有php7.4.0版本，但是以上時(shí)間階段WampServer中用的卻是7.3.12版本，所以這里要選擇7.3.12版本，這樣才能安裝后面的一些可以帶來更多方便的插件。因?yàn)橛幸恍┖糜玫哪軌驇順O大便利的插件最新款的并沒有出現(xiàn)或者被發(fā)現(xiàn)、了解。

第三步，配置路徑、修改端口
1.設(shè)置環(huán)境變量（見圖）







2.有兩個(gè)地方需要修改：修改listen80、servername 端口為8070。修改好請保存。

這是任督二脈的第一條經(jīng)絡(luò)，還有編譯器VS Code（其他編譯器也可，但是這個(gè)編譯器功能極為強(qiáng)大，而且免費(fèi)）的配置打通第二條經(jīng)絡(luò)，兩條打通，代碼開發(fā)才能運(yùn)行起來。
3.在D盤Wamp 文件包里找到WWW目錄，新增加一個(gè)XXX-php文件包，在里面放入開發(fā)的文件，或者框架模板代碼。比如本人文件包起名John-php



第四步、下載VS Code、配置PHP開發(fā)所需插件
1.VS Code下載：Download Visual Studio Code

安裝后VS Code在左下腳的頭像圖標(biāo)處登入自己的郵箱新建一個(gè)賬戶。這樣可以避免在新的電腦或者重裝后重新配置編譯器。



2、安裝擴(kuò)展
點(diǎn)擊黃色標(biāo)注的圖標(biāo)，可以選擇第一個(gè)插件Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code改為中文版，這些英文其實(shí)十分簡單，到時(shí)候熟悉了可以設(shè)置為英文，去掉中文擴(kuò)展。因?yàn)榇a開發(fā)文件的命名不能用中文，要下決心熟悉基本的計(jì)算機(jī)科學(xué)所需的英文表達(dá)規(guī)范。


3.善用開源
君子生非異也，善假于物也。

編程語言的選擇，要及時(shí)關(guān)注社區(qū)活躍度、好用的新出現(xiàn)的擴(kuò)展以及應(yīng)用、本地區(qū)本國使用者人數(shù)規(guī)模、招聘網(wǎng)站顯示對這種語言程序員的薪酬等。




VS Code 最常用的25個(gè)擴(kuò)展：
用好這 25 個(gè) VSCode 插件，讓開發(fā)變得更簡單、高效

建議新手花時(shí)間一個(gè)一個(gè)照著以上或其他網(wǎng)上的公益教程安裝，配置，不要復(fù)制人家的josn配置。
這是代碼開發(fā)需要的任督二脈第二條經(jīng)脈。sittings.json里出現(xiàn)紅色波浪紋說明路徑錯(cuò)誤需要?jiǎng)h除后排除，重新安裝。擴(kuò)展不是越多越好，夠用就好。因?yàn)榘惭b太多后會影響編譯器運(yùn)行敏捷度。


PHP主要插件：10個(gè)必裝的高效開發(fā)VSCode插件


開發(fā)環(huán)境搭建成功，編譯器、前后端、服務(wù)器、數(shù)據(jù)庫才能形成一個(gè)系統(tǒng)運(yùn)行起來跑起來。

第四步 PHP Debug安裝
（一）什么是Debug
Debug是計(jì)算機(jī)排除故障的意思。馬克2號（Harvard Mark II）編制程序的格蕾絲·霍珀（Grace Hopper）是一位美國海軍準(zhǔn)將及計(jì)算機(jī)科學(xué)家，同時(shí)也是世界最早的一批程序設(shè)計(jì)師之一。有一天，她在調(diào)試設(shè)備時(shí)出現(xiàn)故障，拆開繼電器后，發(fā)現(xiàn)有只飛蛾被夾扁在觸點(diǎn)中間，從而“卡”住了機(jī)器的運(yùn)行。于是，霍珀詼諧地把程序故障統(tǒng)稱為“臭蟲（Bug）”，把排除程序故障叫Debug，而這奇怪的“稱呼”，竟成為后來計(jì)算機(jī)領(lǐng)域的專業(yè)行話。如DOS系統(tǒng)中的調(diào)試程序，程序名稱就叫Debug。Debug在windows系統(tǒng)中也是極其重要的調(diào)試操作。^[1]

（二）匹配版本
1.xDebug的使用要和php版本配套。需要事先清楚與自己WAMP中PHP的版本完全匹配的xDebug的版本，否則會無法真正使得開發(fā)環(huán)境跑起來。
2.點(diǎn)擊電腦右下角的WAMP綠色運(yùn)行圖標(biāo)，再點(diǎn)擊localhost,出現(xiàn)圖3-6（請看本文第三步），點(diǎn)擊phpinfo
會出現(xiàn)以下出，按ctrl+a全選該網(wǎng)頁內(nèi)容并復(fù)制，粘貼到：xdebug版本校驗(yàn)
https://xdebug.org/wizard



Installation WizardSummaryXdebug installed: 2.8.0Server API: Apache 2.0 HandlerWindows: yesCompiler: MS VC15Architecture: x64Zend Server: noPHP Version: 7.3.12Zend API nr: 320180731PHP API nr: 20180731Debug Build: noThread Safe Build: yesOPcache Loaded: yesConfiguration File Path: C:/WINDOWSConfiguration File: D:/wamp64/bin/apache/apache2.4.41/bin/php.iniExtensions directory: D:/wamp64/bin/php/php7.3.12/extInstructionsDownload php_xdebug-3.1.3-7.3-vc15-x86_64.dllMove the downloaded file to D:/wamp64/bin/php/php7.3.12/ext, and rename it to php_xdebug.dllUpdate D:/wamp64/bin/apache/apache2.4.41/bin/php.ini to have the line:zend_extension = xdebugMake sure that zend_extension = xdebug is below the line for OPcache.Please also update php.ini files in adjacent directories, as your system seems to be configured with a separate php.ini file for the web server and command line.Restart the Apache Webserver以上會出現(xiàn)你應(yīng)該正確安裝的xDebug版本，及其對應(yīng)的配置文件的修改信息。

（三）安裝并修改

1.根據(jù)推薦下載對應(yīng)版本的xDebug.dll把下載好的dll文件添加到php的ext文件下，D:/wamp64/bin/php/php7.3.12/ext

Download php_xdebug-3.1.3-7.3-vc15-x86_64.dll

"D:/wamp64/bin/php/php7.3.12/ext/php_xdebug-3.1.3-7.3-vc15-x86_64.dll"


2.更新 php.ini 配置文件



3.按ctrl+F鍵查找zend_extension,修改其路徑，注意會搜索到兩個(gè)zend_extension
找到第二個(gè)，[xdebug]下面的，如果沒有變，請參考如下格式到您自己的D盤復(fù)制D盤該路徑到如下位置，以下的off改為on
xdebug.remote_enable = on

xdebug.profiler_enable = on

位置：

[xdebug]

zend_extension="D:/wamp64/bin/php/php7.3.12/zend_ext/php_xdebug-2.8.0-7.3-vc15-x86_64.dll"

xdebug.remote_enable = on

xdebug.profiler_enable = on

改為on以后注意保存再退出。


4.在擴(kuò)展界面選擇PHP Debug安裝，成功后重啟 VS Code。每一次新安裝一個(gè)擴(kuò)展后都需要重啟 VS Code。

第五步 調(diào)試php文件

1.在www目錄下新建test.php文件，在echo行前設(shè)置斷點(diǎn)^[2]







2.輸入如圖代碼（下文有源碼可以復(fù)制），保存，再鼠標(biāo)右鍵點(diǎn)擊open inbrowser




3.右側(cè)瀏覽器窗口清空后輸入測試網(wǎng)址：http://localhost:8070/john-php/test.php

可復(fù)制以下最簡單的測試代碼測試一下;注意文件名稱的后綴是.php，或者在VS Code新建文件后，可在文件格式選擇欄輸入php，會自動(dòng)選擇php格式。

<?php echo "這是我創(chuàng)建的第一個(gè)PHP文件"; ?>




4.測試html頁面
多試幾遍，肯定會成功。也可以測試html頁面。

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>第一個(gè)Html文件</title> </head> <h1>下雪了</h1> <body></body></html>復(fù)制以上代代碼可以按照以上方法測試html,另外開啟瀏覽器輸入http://localhost:8070/john-php/john.html




5.在VS Code里下載擴(kuò)展 live server 打開瀏覽器
這是本人采用另外一種方法安裝本地開發(fā)環(huán)境的。live server 可以登錄http://127.0.0.1:5500/0311/john.html
輸入自己起的域名測試也成功。
http://john.io/0311/john.html





總結(jié)：
1.最為重要的是各項(xiàng)服務(wù)的端口配置；端口問題、路徑問題是經(jīng)常會出現(xiàn)的，可參考學(xué)習(xí) php中相對路徑和絕對路徑如何使用^[3]
2.Web環(huán)境的根目錄設(shè)置。
理解了這兩點(diǎn)內(nèi)容，就知道了把Web項(xiàng)目拷貝到哪里，如何在瀏覽器中訪問我們的項(xiàng)目。
3.掌握了以上兩點(diǎn)可實(shí)時(shí)修改觀察頁面生成，利用VS Code自帶的終端CLI安裝網(wǎng)站框架,比如Vue，實(shí)現(xiàn)一個(gè)屏幕分成三個(gè)部分瀏覽?？纱蠓岣唛_發(fā)效率。
可參考本人之前的文章：如何通過CLI安裝VUE
在VS Code可用自帶的終端命令形式安裝需要的配置文件。



4、WAMP多站點(diǎn)的配置

第1步，修改httpd.conf，增加8080端口的監(jiān)聽

#Listen 12.34.56.78:80
Listen 80
Listen 8080

第2步，修改virtual hosts的配置，同樣在httpd.conf這個(gè)文件中。

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf
#修改為
# Virtual hosts
Include conf/extra/httpd-vhosts.conf

第3步，增加虛擬主機(jī)配置，修改httpd-vhosts.conf文件。

#
# Use name-based virtual hosting.
#
NameVirtualHost *:80
NameVirtualHost *:8080

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
<VirtualHost *:80>
ServerAdmin webmaster@dummy-host.example.com
DocumentRoot "C:/wamp/www/"
ServerName http://dummy-host.example.com
ServerAlias http://www.dummy-host.example.com
ErrorLog "logs/dummy-host.example.com-error.log"
CustomLog "logs/dummy-host.example.com-access.log" common
<Directory "C:/wamp/www/">
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

<VirtualHost *:8080>
ServerAdmin webmaster@dummy-host.example.com
DocumentRoot "C:/wamp/www2/"
ServerName http://dummy-host.example.com
ServerAlias http://www.dummy-host.example.com
ErrorLog "logs/dummy-host.example.com-error.log"
CustomLog "logs/dummy-host.example.com-access.log" common
<Directory "C:/wamp/www2/">
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

第4步，重啟apache，就可以看到效果了

5、添加本地域名訪問
可先設(shè)一個(gè)本地測試用域名，比如http://www.john.io 在WWW目錄里新建一個(gè)john-php文件包，所有框架源文件、已經(jīng)保存的文件放在這。然后VS Code點(diǎn)擊文件。文件包導(dǎo)入。 關(guān)于測試域名、數(shù)據(jù)庫需要另外的設(shè)置，也是需要學(xué)習(xí)，暫不在本文中闡述，請參考文章所附資料。

（1）修改httpd-vhosts.conf文件
（2）配置WAMP網(wǎng)站根目錄

具體請參考：^[4]

WAMP設(shè)置 - Builder


千里之行，始于足下。以上就是一種比較基本的WampServer+VS Code + PHP開發(fā)環(huán)境搭建方式，請同時(shí)閱讀本文注釋、參考文獻(xiàn)。

參考

1. ^DEBUG計(jì)算機(jī)排除故障?https://baike.baidu.com/item/DEBUG/825293
2. ^測試斷點(diǎn)以及相關(guān)配置?https://blog.csdn.net/weixin_43712064/article/details/103836504
3. ^php中相對路徑和絕對路徑如何使用（詳解）?https://www.cnblogs.com/Renyi-Fan/p/10890220.html
4. ^WAMP設(shè)置?https://www.cnblogs.com/zhengcheng/p/4321122.html