一、简介
- 视图的用途是用来存放应用程序中
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>
