一、简介
- 视图的用途是用来存放应用程序中
HTML
内容,并且能够将你的控制器层与展示层分开,在控制器中使用助手函数view()
来加载视图模板。
二、视图目录位置与命名
-
视图目录位置:
resources/views
,存放的也是HTML
内容。 -
welcome.blade.php
是默认文件,也就是启动Laravel
看到的那个欢迎页面。 -
模板命名:例如
welcome.blade.php
的模板文件名称是welcome
,.blade.php
是固定的双后缀。如果需要新建一个index
视图页面,创建的文件应该是index.blade.php
。 -
view()
使用方式// 展示视图页面,不传值 // 例如:view('index') view('模板文件名称') // 展示视图页面,传值 // 例如: // $data = ['id'=>1, 'name'=>'dzm']; // view('index', $data) // view('index', ['obj'=>$data]) // view('index', ['id'=>1, 'name'=>'dzm']) view('模板文件名称', 关联数组) // 展示视图页面,传值 // 例如: // $data1 = ['id'=>1, 'name'=>'dzm']; // $data2 = ['id'=>2, 'name'=>'xyq']; // view('index', compact('data1', 'data2')); view('模板文件名称', compact('数据对象1', '数据对象2')) // 展示视图页面,传值 // 例如: // $data = ['id'=>1, 'name'=>'dzm']; // view('index')->with(['data'=>$data]); // view('index')->with(['id'=>1, 'name'=>'dzm']); // 不能按下面这么写: // view('index')->with($data); view('模板文件名称')->with(关联数组)
-
视图模板中输出变量
{{ $变量名 }} 例如: {{ $name }}、{{ $obj['name'] }}
三、案例:路由通过 view()
访问视图
-
在
resources/views
中,新建一个index.blade.php
页面,用于测试。路由关联到
index.blade.php
页面并访问路由地址,web.php
:Route::get('req', function () { // 一定要写模板名称 例如路径: /resources/views/index.blade.php // 模板名称就是 index ,后面是双后缀不算模板名称 return view('index'); });
四、案例:视图分模块(分文件夹)管理并通过路由访问
-
在
resources/views
中,新建一个html
文件夹,并添加一个index.blade.php
页面,用于测试。Route::get('req', function () { // 一定要写模板名称 例如路径: /resources/views/index.blade.php // 模板名称就是 index ,后面是双后缀不算模板名称 // return view('index'); // 视图分模块(这种方式也可以,但是官方不推荐) // return view('html/index'); // 官方推荐这种写法,两种访问结果一致,有几层文件夹就点几层下去,以 views 为根目录 return view('html.index'); });
四、案例:通过 view()
给视图传值(带参数)
-
下面几种传值方式,视图显示结果一致,只是传跟取的细节区别:
-
方式一:
view('模板文件名称', 关联数组)
-
web.php
路由页面:Route::get('req', function () { // Json 参数 $data = ['id'=>1, 'name'=>'dzm']; // 传递 return view('index', $data); });
-
index.blade.php
视图页面使用,发现跟Vue
、小程序
等数据绑定一样,直接用{{ $key }}
包起来只用传入对象里面的key
即可拿到参数。<!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>Document</title> </head> <body> <div>DZM 视图文件测试</div> <div>ID: {{ $id }}</div> <div>Name: {{ $name }}</div> </body> </html>
-
-
方式二:
view('模板文件名称', 关联数组)
-
web.php
路由页面:Route::get('req', function () { // Json 参数 $data = ['id'=>1, 'name'=>'dzm']; // 传递,这里用 obj 再次包装一下 return view('index', ['obj'=>$data]); });
-
index.blade.php
视图页面使用,由于这里不像案例一
中直接将数据抛出来,而是使用obj
再次包装了一层,在取值的时候就需要通过$obj
来取,取值时需要注意,不能点语法
取值{{ $obj.id }}
,而是需要{{ $obj['id'] }}
这样取值,点语法
取值会报错。<!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>Document</title> </head> <body> <div>DZM 视图文件测试</div> <div>ID: {{ $obj['id'] }}</div> <div>Name: {{ $obj['name'] }}</div> </body> </html>
-
-
方式三:
view('模板文件名称', compact('数据对象1', '数据对象2'))
-
web.php
路由页面:Route::get('req', function () { // Json 参数 $data1 = ['id'=>1, 'name'=>'dzm']; $data2 = ['id'=>2, 'name'=>'xyq']; // 传递 return view('index', compact('data1', 'data2')); });
-
index.blade.php
视图页面使用,传入的参数字符串需要跟定义的参数名一致,内部使用的使用,就直接使用$data1['id']
、$data2['id']
这样。<!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>Document</title> </head> <body> <div>DZM 视图文件测试</div> <div>ID: {{ $data1['id'] }}</div> <div>Name: {{ $data1['name'] }}</div> <div>ID: {{ $data2['id'] }}</div> <div>Name: {{ $data2['name'] }}</div> </body> </html>
-
Demo 效果
-
-
方式四:
view('模板文件名称')->with(关联数组)
-
web.php
路由页面:Route::get('req', function () { // Json 参数 $data = ['id'=>1, 'name'=>'dzm']; // 传递 return view('index')->with(['data'=>$data]); });
-
index.blade.php
视图页面使用:<!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>Document</title> </head> <body> <div>DZM 视图文件测试</div> <div>ID: {{ $data['id'] }}</div> <div>Name: {{ $data['name'] }}</div> </body> </html>
-