在Laravel項目中應用Foundation框架的實現

劉振強

（廊坊職業技術學院，河北 廊坊065001）

0 引言

網站的開發一般可分為前端開發和后端開發。前端開發負責網站頁面的展示，后端開發負責網站業務邏輯的實現。目前PHP語言以免費、開源、插件豐富及跨平臺性等優點成為廣泛使用的網站后端開發語言。面對互聯網應用的爆炸式發展、Web應用場景的不斷豐富、業務邏輯越趨復雜、數據量呈指數級增加的現實情況，使用原生PHP編寫程序時對Web應用的安全性、底層數據的邏輯性等很難兼顧周全，為此出現了大量的PHP框架，Laravel框架就是其中的代表之一。網站前端開發技術中響應式布局的應用已逐漸成為潮流，Foundation是用于開發響應式布局的UI框架中使用較多的一種。本文將對在Laravel項目中如何搭建使用Foundation框架進行研究，并給出部署方法。

1 項目所用軟件簡介

1.1 Visual AMP集成運行環境

Visual AMP是集成有Apache、PHP、MySQL的企業級運行環境，它包含了搭建PHP所用到的全部組件，支持一鍵快捷安裝，省去了用戶手動配置的煩瑣步驟，并支持多版本PHP的自由切換。

1.2 Laravel后端開發框架

Laravel是一款以簡潔、優雅著稱的基于PHP語言的Web開發框架，它可以幫助開發人員快速構建所需的Web應用。它的特點包括高質量的擴展包、富有表現力的語法及豐富的幫助文檔。

1.3 Foundation前端開發框架

Foundation是用于開發響應式布局的前端UI框架，其提供的諸如按鈕、導航、表單等UI組件可以幫助前端開發人員進行快速的原型開發。使用Foundation框架開發的網站前端頁面可以在計算機、平板電腦以及智能手機上獲得優秀的使用體驗。

1.4 NPM模塊管理工具

NPM是NodeJS的模塊管理工具，通過NPM可以幫助前端開發人員安裝多種NodeJS的擴展模塊用于搭建本地開發服務。

2 項目部署過程

2.1 Laravel項目的部署

2.1.1 Visual AMP集成運行環境的安裝

對Visual AMP集成運行環境進行解壓安裝，安裝路徑可選擇D:Visual-AMP-x64，安裝結束后點擊開始菜單中啟動Visual AMP（x64）。

2.1.2 編輯php.ini配置文件啟用相應擴展

在D:Visual-AMP-x64BinPHPphp-7.0.13-nts-Win32-VC14-x64下編輯php.ini，將php.ini配置文件中的";extension=php_openssl.dll"";extension=php_pdo_mysql.dll"";extension =php_mbstring.dll" 前的";"去掉以啟用相應擴展。重啟Apache使更新生效。

2.1.3 安裝Laravel一鍵安裝包

為了方便起見安裝Laravel可以使用已經執行了composer install的Laravel一鍵安裝包，將Laravel一鍵安裝包中larvel55下的所有文件解壓至D:Visual-AMP-x64wwwDefaultlaravel中。點擊開始菜單中的運行并鍵入"CMD"打開命令提示符窗口，切換至laravel目錄并執行"php artisan serve"后在地址欄中鍵入localhost:8000即可看到Laravel項目界面。至此Laravel項目部署完畢。

2.2 在Laravel項目中部署Foundation前端框架

2.2.1 安裝NPM模塊管理工具

為了使用NPM安裝Foundation框架及其相關依賴模塊，應先安裝NodeJS，下載安裝NodeJS后打開命令提示符窗口鍵入"npm--version"查看NPM的版本號以確保NPM安裝成功。

2.2.2 編輯package.json模塊描述文件

在laravel目錄下有一個被命名為package.json的文件，其被稱為模塊描述文件，它的作用是記錄項目的配置信息。項目的配置信息包括版本、名稱、腳本命令、所需模塊及項目依賴等。package.json文件中的devDependencies屬性記錄了開發環境依賴模塊列表，在此替換其中的"bootstrap-sass":"^3.3.7"為"foundation-sites":"^6.6.3"。這里被替換掉的BootStrap是和Foundation類似的前端響應式框架，"^6.6.3"是指Foundation的安裝版本。package.json文件中的scripts屬性可為命令"npm run"指定腳本。scripts屬性下cross-env.js是一套運行跨平臺設置環境變量的腳本。本例中如Laravel項目存在于Windows操作系統下應將scripts屬性中的"cross-env"替換為"node node_modules/cross-env/dist/bin/cross-env.js"； 如Laravel項目存在于Linux或Mac操作系統下應將scripts屬性中的"cross-env"刪除。可以保證在運行"npm run dev"編譯前端資源時不出現報錯現象。

2.2.3安裝依賴模塊

點擊開始菜單中的運行并鍵入"CMD"打開命令提示符窗口，切換至laravel目錄并執行"npm install"后將安裝package.json模塊描述文件中devDependencies屬性所指明的模塊及其依賴模塊。

2.2.4 引入CSS、JavaScript并編譯項目

Laravel項目下的resources目錄存有應用視圖文件和未編譯的原生前端資源文件如SASS、JavaScript文件等。復制Foundation框架下的SASS文件至resources目錄中以方便項目編譯。本例中復制Foundation框架中的_settings.scss至resources/assets/sass中，改寫_settings.scss文件中的"@import'util/util';"為"@import'node_modules/foundation-sites/scss/util/util';"；改寫app.scss文件中的"@import'variables';@import'～bootstrap-sass/assets/stylesheets/bootstrap';"為 "@import 'settings';@import 'node_modules/foundation-sites/assets/foundation';"； 刪 除resources/assets/sass下_variables.scss文件；將resources/assets/js下bootstrap.js改名為foundation.js并改寫"try{window.$=window.jQuery=require（'jquery'）;require（'bootstrap-sass'）;}catch（e）{}"為"try{window.$=window.jQuery=require（'jquery'）;require（'foundationsites/dist/js/foundation'）;$（function（）{$（document）.foundation（）;}）;}catch（e）{}"；改寫resources/assets/js下app.js中"require （'./bootstrap'）;" 為"require（'./foundation'）;"。

執行"npm run dev"命令對項目進行編譯。至此在Laravel項目中部署Foundation前端框架完畢。

3 項目測試

復制Foundation框架customizer目錄下的index.html至Laravel項目resources/view目錄中改名為index.blade.php，并為其在Laravel路由中添加路由，如"Route::get（'foundation'，function（）{return view（'index'）;}）;"。 在瀏覽器中測試如圖1。

4 結語

在Laravel項目中部署Foundation前端框架的過程較為復雜且配置方法資料較少，本文給出了如何進行Laravel項目的搭建及在項目中部署Foundation前端框架的方法。在作為PHP語言中流行的Laravel網站后端框架項目中結合Foundation前端響應式布局UI框架的使用將為網站的快速開發帶來極大的便捷。

圖1 項目測試截圖