Laravel学习笔记基础系列--(七)Laravel视图快速使用

作者: 温新

分类: 【Laravel】

阅读: 1658

时间: 2021-07-04 12:34:41

作者:温新

时间: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>

我是温新

每天进步一点点,就一点点

请登录后再评论