在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 项目测试截图