Laravel学习笔记基础系列--(七)Laravel视图快速使用
作者:温新
时间:2021-06-25
路由、控制器都有,就差视图了。本篇就是介绍如何快速使用视图,从而构建起快速开发。
所有的视图文件存放在resources/views
目录下,且所有视图文件以.blade.php
结尾。
创建视图
创建控制器视图(必用)
控制器视图
是我这样叫的,因为就是实际开发,路由-控制器-视图。在控制器方法中返回视图界面。
第一步:定义路由
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// web.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">Route</span>::<span style="box-sizing: border-box;color: rgb(0, 0, 0)">get</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'demo'</span>, <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'DemoController@index'</span>);</span>
第二步:控制器加载视图
用法:view('视图文件名',['数据key'=> 'value'])
;
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// DemoController.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><?</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">namespace</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">App\Http\Controllers</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">use</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Illuminate\Http\Request</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">class</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">DemoController</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">extends</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Controller</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">index</span>()</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 返回视图界面</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 建议写上视图名</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">view</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'demo.index'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>
第三步:创建视图
文件位置:resources/views/demo/index.blade.php
<div>我是视图文件</div>
第四步:浏览器访问URL
打开浏览器访问就可以看到输出的内容'我是视图文件'。
路由-控制器-视图都通畅了,把视图内容换成真实的项目模板不就是开发了吗?是的,但想提交数据,还不行。下一篇文章介绍CSRF验证,解决数据提交问题。
传递数据到视图
实际开发中,是有许多数据要传递到视图文件,从而被视图文件所使用继而被渲染出来。下面就记录几种方法:
方式一:数据形式传递数据
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// DemoController.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">index</span>()</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">view</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'demo.index'</span>,[<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'webName'</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">'自如初'</span>,<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'webUrl'</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">'https://www.ziruchu.com'</span>]);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>
以下测试均在index方法中,请自行注释之前的代码并进行其他方法的测试
视图使用(demo/index.blade.php)
<span style="box-sizing: border-box;padding-right: 0.1px">{{-- 使用的是blade模板语法 --}}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{{-- 后续会介绍,先跟着操作就行 --}}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{{ $webName }}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{{ $webUrl }}</span>
方式二:with()方法传递
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// DemoController.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 传递一个数据</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">view</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'demo.index'</span>)<span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">with</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'webName'</span>,<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'自如初'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 传递多个数据</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">view</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'demo.index'</span>)<span style="box-sizing: border-box;color: rgb(152, 26, 26)">-></span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">with</span>([</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'webName'</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">'自如初'</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'webUrl'</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">'https://www.ziruchu.com'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">]);</span>
方式三:compact()方式-推荐使用
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// DemoController.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 85, 170)">$data</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span> [</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'webName'</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">'自如初'</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 17, 17)">'webUrl'</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=></span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">'https://www.ziruchu.com'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">];</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">return</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">view</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'demo.index'</span>, <span style="box-sizing: border-box;color: rgb(51, 0, 170)">compact</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'data'</span>));</span>
视图使用(demo/index.blade.php)
<span style="box-sizing: border-box;padding-right: 0.1px">{{ $data['webName'] }}</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{{ $data['webUrl'] }}</span>
视图之间共享数据
目前数据只能在对应的视图文件中使用,假如有一个标题需要在所有视图文件中使用该怎么办?使用share
方法使得数据可以在所有视图中被使用,这就是视图之间的数据共享。
使用视图间的数据共享,需要在某个服务提供者
中的boot
方法中使用share
方法。
<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(170, 85, 0)">// app/Providers/AppServiceProvider.php</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">use</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Illuminate\Support\Facades\View</span>;</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(119, 0, 136)">public</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">function</span> <span style="box-sizing: border-box;color: rgb(0, 0, 255)">boot</span>()</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(170, 85, 0)">// 所有视图都可以使用该数据</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">View</span>::<span style="box-sizing: border-box;color: rgb(0, 0, 0)">share</span>(<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'generalData'</span>,<span style="box-sizing: border-box;color: rgb(170, 17, 17)">'我是可以所有视图使用的数据'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>
这样定义之后就可以直接在视图文件中使用了。
<span style="box-sizing: border-box;padding-right: 0.1px">// demo/index.blade.php</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">{{$generalData}}</span>
我是温新
每天进步一点点,就一点点
请登录后再评论