您现在的位置是:网站首页 > PHP>Laravel 配置双模板,PC 端和 Mobile 端分离
Laravel 配置双模板,PC 端和 Mobile 端分离
- PHP
- 2020-02-12
- 996人已阅读
简介在现在的网站开发中,基本要都要兼容PC与移动端的展示,常见方式有响应式样式、PC,移动端各自一套样式各自使用自己的,响应式方式只适合一些简单的页面展示,复杂的页面结构最好的方式还是使用多套样式,不同设备使用不同样式
在现在的网站开发中,基本要都要兼容PC与移动端的展示,常见方式有响应式样式、PC,移动端各自一套样式各自使用自己的,响应式方式只适合一些简单的页面展示,复杂的页面结构最好的方式还是使用多套样式,不同设备使用不同样式,下面是 Laravel 的实现步骤:
1.、安装 whichbrowser/parser 传送门: WhichBrowser/Parser-PHP
用于判断 PC 或 Mobile 设备,按需加载不同的模板
composer require whichbrowser/parser
2、创建一个中间件
php artisan make:middleware Template
3、编辑 Template.php 文件
class Template
{
protected $except = [];
public function handle($request, Closure $next)
{
$result = new WhichBrowser\Parser(getallheaders());
// 如果是桌面类型, 返回true
$isDesktop = $result->isType('desktop');
if ($isDesktop) {
// 加载pc端的模板文件
$path = resource_path('views/pc/');
} else {
// 加载mobile端的模板文件
$path = resource_path('views/mobile/');
}
// 获取视图查找器实例
$view = app('view')->getFinder();
// 重新定义视图目录
$view->prependLocation($path);
// 返回请求
return $next($request);
}
}
4、注册中间件
app/Http/Kernel.php
protected $routeMiddleware = [
.
.
.
'tpl' => \App\Http\Middleware\Template::class,
];
5、路由中使用中间件
Route::group(['middleware' => ['tpl']], function () {
Route::get('article', 'ArticleController@index')->name('article');
.
.
.
});
如视图中:
.
.
.
return view('article.index', $data);
搞定,就可以根据不同的设备加载不同的模板文件了
如从 PC 设备打开网页:加载 /resources/views/pc/article/index.blade.php 模板
如从移动设备打开网页:加载 /resources/views/mobile/article/index.blade.php 模板
6、 异常页面的处理
对于异常页面,我们自然也需要双模板进行展示
伪代码如下:
/**
* Render an exception into an HTTP response.
*
* @param \Illuminate\Http\Request $request
* @param \Exception $exception
* @return \Illuminate\Http\Response
*/
public function render($request, Exception $exception)
{
// 自定义HTTP错误页面
if ($exception instanceof HttpException) { // HTTP异常
$status = $exception->getStatusCode();
$message = $exception->getMessage();
$result = new WhichBrowser\Parser(getallheaders());
$isDesktop = $result->isType('desktop');
if ($isDesktop) {
$dir = 'pc';
} else {
$dir = 'mobile';
}
$view = $dir . '.error.' . $status;
if (view()->exists($view)) {
return response()->view($view, ['message'=>$message], $status);
}
}
return parent::render($request, $exception);
}
移动端的错误页面:/resources/views/mobile/error/500.blade.php
PC 端的错误页面:/resources/views/pc/error/404.blade.php
版权声明:本文为博主原创文章,欢迎大家转载。 https://itxwzj.com/technology/34
上一篇:已经是第一篇
最新评论
站长大王来回复你了,长点心吧!