00:00
这节课学习一下雷的模板。这是我们要掌握哪些内容,我们看一下参考手册。因为手册上的内容比较多,所以把我们现阶段需要找的内容给做了一个提取。首先看一下什么是不对的模板。它是。Lover提供了一个简单强大的模板引擎。和其他流行的P引擎不同。啊的模板并不限制我们在视图中去使用原生的P代码。所有的布雷的视图文件最终都会被编译成原生的P2P代码,并且进行缓存啊,除非我们修改了这个视图文件,否则的话就不会去重新编译啊。这也就说明。啊,Bla的基本上不会给我们的应用增加太大的一个负担。补类的视图文件,使用点PP作为文件扩展名。
01:00
被存放在resource。木录下来看一下。我们的页面模板文件啊,都是在这个resources这个目录下啊。它以点blade.pp结尾。但是我们在使用的时候呢,是不用去加这个后缀的,后面我们会说到。来看一下模板继承,模板继承呢啊,就是我们嗯,在页面上来看的话,会有很多一些公用的一些部分,比如啊,一个网站的头部都是一样的,一个网站的底部也都是一样的。啊,包括我们要引用的一些公共的CSS,或者要引用的一些公共的GS啊,不可能说每个页面都去引用一点,所以我们可以定义一个啊主页面的一个布局,在这个主页面的布局里面去引用所有的这个公用的啊CSS和公用的GS,并且把一些啊所有页面视图公用的部分给提取到这个布局里面,比如说我们的头部,比如说我们的啊。
02:04
底部。好。定义一个,呃,布局呢,其实很简单,就是很一个H代码。啊,我们新建一个。来奥。在这个目录下新建一个。目录啊。在这个布局目录里面去新建。一个模板文件。建雷的模板文件的时候,你只需要建普通的视频文件就可以。APP点。DLA1定要加上啊这个。P的后缀不用加,它会自动给我们加上好,这样我们就创建了一个APP前play的。
03:02
一个模板文件啊,作为啊模板文件,我应应该把这个HTML相关的内容都给写全啊,包括它的头,网站描述,甚至网站的图标,好这样就是一个简单的模板文件。我们接下来定义一个啊子页面来继承我们的模板文件。好,在view目录下建一个child.play。我有什么梦想新建一个?这个结尾不要。接下来啊,让我们的子模板去继承我们的主模板。继承使用这个关键字啊。整体一下。接下来说一下这些指令的作用,在类的模板中,我们称为这种艾特开始的为指令啊,每个指令都有每一个指令的一个作用。
04:08
首先看一下这个section指令。Section指令定义了片段的内容。而这个右的指令则用来显示片段的内容。我们在。模板文件里定义的这个U的。在他就是说子视图去继承这个呃模板的时候,子视图里面可以使用这个啊section去定义这个片段内容。而这个右就是负责显示指示图去定义的三角形的一个内容。子视图可以使用指令来继承模板。啊,继承我们的主视图。可以使用啊,Section指令。定义这个片段啊,负责向这个主视图里面去注入,由这个我们的主视图布局文件中的右的指令来控制显示,简单的理解就是说。
05:06
我们在主视图里面使用右的啊要显示的这个区域,在指视图中可以使用sation啊去定义这个要显示的一个内容。啊,注意它这个名字是一一对应的,看到了吧。比如说还有这个title啊,我们在子视图里面。啊,使用。来定义我们要显示的内容。而。主视图里面的右的负责显示。这个就是和。嗯,右的。这个existence指定是负责继承我们的这个主视图。还有一点需要注意的是。啊。我们在这个啊主视图里面使用了这个秀啊,而在这个子视图里面呢,使用的这个N的三,它俩有什么区别呢?使用修的话,就是我们在定义这个视图的同同时啊立马立刻显示而。
06:06
我们使用n sation,就是说是只定义了这个视图显示的话,它会去啊负极里面的。这个右的来控制显示。这个手册上也有说明。我们使用了指示图,使用了N的S来代替show。N的仅仅是定义了一个片段,而这个秀呢,是在定义的同时立即使用,就是说立即右的立即显示这个片段。先看一下效果啊,先看一下我们的这个效果。啊。我们要定一个路由来显示我们的Q的页面。Root。在最上面我们去定义啊。Get。CH。
07:01
我们直接写B报。然后return。Will。使用view辅助函数去返回我们的页面。在返回页面的时候呢,不用加这个页面的后缀,直接写名字就可以了。好,这样我们返回这个子页面,子页面呢,它自己会去继承啊,这个我们的布局页面,我们的主视图。先来看一下。是吧?看我们呃子视图里面这两句话输出了是不是?而我们这个。啊,复视图这个话也说出了对吧。可以检查一下啊,我们的这个代码是完整的,就是整个是把这个主视图都给集成了过来,包括我们的啊title都有。
08:04
接下来看一下这个艾。就是说parent这个指令啊。这个指令呢,就是说他会继承这个负极的啊,这个内容啊,会继承这负极的那个内容,如果没有这个指令的话。啊,当我们在指示图里面。重新去定义这个片段的话啊,这里面的这个内容就会被覆盖,就主视图里面这个内容就会被覆盖。我们来看一下效果。可以看到少类行是吧,所以我们用我们这个a parent。他就可以去啊继承。这个主视图里面定义的这个内容啊,片段的内容。这个要根据你实际的一个使用情况去决定要不要使用。还有就是我们的右的指令还接收第二个默认值作为参数,如果啊,我们右的这个片段在子四组中啊,没有被定义,它会默认使用。
09:11
一个这个参数。比如就像我们的这个。标题啊,我们拿这个标题来举例。我们可以给他一个第二个参数,第二个参数呢,嗯,看你给什么,你如果给是一个字符串的话,就是在子视图里面,如果没有去定义它,它就会默认使用这个字符串,如果你定义的是一个啊,要显示这个区域的话,你就可以使用。啊,这个will的一个。Make方法,然后去返回默认的一个页面,我们这里拿字符串做测试啊。P博客。好。这里的title如果我们不定义的话。它就会默认使用第二个参数。建立的这个右的这个内容。
10:02
看一下我们的title是不是变成这个了。啊,这个就是诱导。接下来看一下显示数据,就是我们如何把啊变量。传递给。视图,在视图中进行显示。同样的。我们还是以这个例子为。然后使用。Will辅助这个函数的时候,我们可以通过第二个参数啊,把要传递给这个呃,是页面视图的数据放到这个数组里面。来测试一下。比如我们传一个内幕过去。内幕是Lily。然后我们在模板文件中怎么去使用我们传递的这个数据呢?直接使用这个变量就可以啊,我们传递数据用的是数组,也就是说键指向一个值,但我们在这个子视图里面使用的时候。
11:05
直接就可以使用这个变量啊,当然你不能这么去使用啊,你这么去使用肯定就是一个啊h time里面的一个字符串嘛,应该加上我们的双划括号在里面去使用这个变量啊,这样我们的啊数据就从。我们的控制器啊,传了过来,传到了页面中,页面中就可以去使用这个数据来看一下效果。是吧,已经传递过来了。这是显示数据。布雷的这个双花括号。它就是会被。这个PP的啊,这个函数自动转移,以防止叉SS攻击。画括号,它不仅可以去显示传递给视图的变量内容,实际上它可以输出啊PP的任何内容,甚至我们可以在这个里面去执行啊任意的PPT代码。
12:01
比如我们来显示一个时间看。可以看到这个时间就输出了,接下来演示一下这个例子,就是布雷的它的这个双换括号,它是这个被他这个函数啊自动转移了,以防止查的攻击,那什么是查他的攻击,就是别人恶意的一个脚本注入。啊,假如我们返回的有一个内容是。这里我们回车换一下行啊,如果你有多个数据的话啊,数组你就传多个啊元素就可以了。比如我们传一个。好。里面写我们的script代码。这个场景是比较常见的,假如我们一个副文本啊,或者我们是一个博客类的一个网站,别人在啊里面写了这个A相关代码,写的GS相关的代码,如果你就这样直接显示到页面中的话啊,在一些其他的一些这个啊框架中,或者这个模板引擎中,就会可能直接执行这个GS代码了,就容易被叉SS给攻击。
13:08
我们来试一下啊。然后写上。游乐场。接下来我们把script。啊,它的内容是这个。把它传递给了。模板,在模板中可以使用这个双花括号去显示我们传的这个变量script,现在来看一下。诶,可以发现啊,这个脚本并没有执行,所以这个双花符号是安全的,它将会自动的被这个啊函数给自动转移。啊,我们可以放心的去使用。呃,但是还有一些特殊的情况,我们,呃,比如说显示一个副文本的一个内容,有时候啊,需要显示这个。非转移的一个字符,因为有些副文本的话,它自动会将啊这个。
14:06
啊,标签得做一个处理。所以说有这时候我们要显示的话,如果使用这个双花画画的话,它就会显示的不是很好看。我们来看一下,比如。没戏,太庙。LT。Script。然后。集体加个分号。再复制一下啊。这里加个斜杠。把代码给复制上。啊,这样我们模拟一个,啊这些副文本转。转码转移之后的一个内容。
15:01
啊,这时候我们使用。先使用。双大框框去输出看一下。可以看到这样说出来啊,这样肯定不符合我们的预期。对不对。所以有时候我们要显示成让它转显示成正常的一个格式,这时候就会用到这个双画括号。然后是双叹号啊,加个括号。好,里面写我们的变量。再来看一下。他是不是就给我们啊,又转移回来了啊,这里我是多复制了一个。嗯,把它给删掉去。这里多复制了一个这个啊。对吧,啊,这样就转移过来了,那你说啊,你要是非要直接使用这个双叹号这个去执行这个的话。这个代码是会被执行的啊。我们来看一看。
16:12
Script。可以看到这个代码是不是执行了,这样就容易被人使用这个脚本进行叉SS的攻击,所以说嗯,如果有可能的话,尽可能的不要去使用这个啊。这里也有提示,在应用程序显示这个用户提供的数据的时候,要格外小心。应该使用这个双引号语法来防止查他的攻击。啊,双引号的。注意啊,是用户提供的数据,一定要小心,如果说我们自己系统内部的一些数据,我们能确定的啊,还是可以使用。这个。接下来再看一下如何渲染这个杰森数据,有时候我们会给试图传递一个数组,但是这个数组呢,我们想让这个GS来使用GS的话,它呃把它数据转化成这个接数据,它用的会比较方便一些。
17:09
比如在之前的一些做法啊,使用这个IO输出这个这个杰森以后转码之后的一个数据。在这个模板中,我们可以直接使用at指令。啊,艾特Jason指令来代替以前我们手动去调用的这个方法,下面我们来试一下啊。嗯。比如我们在这里。定义一个数组。啊,定义数组。内。Lily。A。12、好,我们把这个数组传递给啊视图的时候,想让它被当做这个GS的一个结成数据来使用。啊。
18:05
可以使用艾特杰森指令。啊,直接把。我们后就说这里传过来的这个数组给转成阶层格式啊,这个是我们的变量啊,我们在页面中应该是直接使用这个变量。就可以了啊。注意啊,你要是直接在呃HTML这种。页面中去写PP的这个变量什么的话,你要加上这个双括号啊,双括号才可以,但是在我们的指令中啊,指令中是可以直接放PP的一些这个变量的啊,所以你要注意,比如有时候我们。嗯,会用到其他一些指令,要传递一些参数的话。指定中是可以直接放皮变量的,你不用再加这个双符号了啊。来打印一下。这里变成变量。
19:00
刷新一下页面。可以看到这里已经打印出来了。有时候许多啊,GS的一些框架,它也会使用这个划括号。啊,这时候为了和我们的啊,我们模板引擎的这个双滑括号。就是我们有时候不想让模板引擎的这个双括号进行解析,这个变量可以在它前面加个艾特符,这样的话它就会当做普通的这个啊字符串。给叔叔来看一下。双画括号导塔内幕,这样的话呢,会直接去输出啊这个变量,如果我们前上加上这个艾啊,就会把它解析成普通的一个字符串。看一下效果。刷新一下。可以看到啊,这个被解析了是吧。我们把这个alert注释一下,要不然它会。啊,这里这里会一直输出。
20:06
接下来看一看控制结构。除了啊。啊,模板的继承和显示。数据以外,布雷德还为常见的PP控制结构提供了更加便捷的方式。比如我们的条件、语句和循环。这些快捷方式为PP的控制结构提供一个非常清晰简洁的书写方式,同时还能与PP的控制结构啊保持了相似的一个语法特性。首先来看啊,条件语句,条件语句if的话,主要有if else if和else啊,一般像这种,嗯,我们所有用到的这个指令大部分都是乙啊有开始会有一个结束。啊,大部分的是啊。看一看这个例子。在这下面做一个输出,哎。
21:10
嗯,我们的这个变量不存在,它会报错啊。所以我们使用什么变量呢?我们使用这个杰森这个变量,它刚好是一个数组,这里统计了这个数组的一个长度啊。我们这里是啊。啊,一个。两个元素等于数组。杰森。变量啊,加dota符。呃,If这种指令刚才之前在这里也说过,指令里面一般可以直接去放我们的PV代码,还有我们的变量。好,这就可以了,看它输出了,它有多条的一个记录,因为我们的这个阶层它是有啊两个元素。
22:04
啊,这是条件语句啊。这个就不说了,比较简单,加一个HR换一下行。还有一个就是unless语句,它刚好和我们的啊if相反,我们if是条件为真才会执行里面代码,而它呢是条件为假才会执行,比如这个例子,我们验证用户有没有登录。整天。去看一下,小心。好,可以看到我们并没有登录对吧,它这里你看我们没有登录,所以它这里返回了false,也就是说当是force的时候,它执行了这里。这是一个取反的一个情况,它刚好跟衣服相反啊。接下来看一看啊。还有两个啊,比较常用的指令,一个是exit和NP,它和我们PP的set函数,还有NP的函数作用都是一样的啊。一个是。
23:05
嗯,是否。啊,定义啊,但不为空。然后。一个是它为空的时候,嗯,在这执行。这个就不演示了。啊,接下来是说一下健全指令。Also和at。啊,GT。健全指令可以用于快速判断当前用户是否已经授权啊。是当前用户还是游客?简单的说就是用户有没有登录。这个就是用户登录过了啊,这个就是用户没有登录。啊,我们还可以怎么去去做呢,还可以使用这个else,我们先看一下这个例子啊,这个我们会在很多地方用到,因为有些用户登录看到的这个页面和用户没有登录看到的是不一样的啊。
24:01
这里我们用。P标签来输出啊。登录了啊,登录了这个艾,它就会执行在里面。这种情况就是没有通。看一下啊。对吧,没有登录好。那除了用这个呢,还可以使用什么呢?还可以就是在also里面去使用else。这里啊,为真他走这里就是登录了,相反的话就是没有登录。看一看是的吧,没有登录。这个健全的一个指令。区块指令啊,不是很常用,主要是为了判断啊,这个区块里面有没有内容,没有内容的话我们可以去啊输出。
25:00
一些其他的一个内容。嗯,环境指令有时候会用到,它主要是为了区分我们是开发环境还是生产环境,它实际上是根据我们呃,EV配置里的环境变量。来去判断的。当你需要这个做一个生产环境的一些判断的时候,比如有一些测试的内容只只在我们啊本地的这种开发环境去看的话,可以使用这个指令,而有一些呃数据,比如说在生长环境才可以看到。啊,就可做一个判断。Switch语句。这个就不说了,跟PP的随用法都很像啊。循环来看一下,除了条件语句,它还提供了和PV结构和功能都相同的指令,所以说你对PV语法如果熟悉的话,你再用这个模板语法的话,会非常的啊熟悉,比如它的这个for循环,还有它的这个负数组。
26:04
啊,结构和功能都是相同的,只不过我们在PP里面是直接写这些语句对吧?但是在呃利的模板中,我们要加上这个艾特服。啊,同样的啊。还可以使用这个continue或者break去来控制我们的这个循环。主要说一下这个路铺变量。啊,也就是在呃,循环和迭代的时候,它给我们提供了一个路布变量,这个变量它记录了当前循环的一个索引,或者是当前迭代的第几次啊,非常的比较实用。这个我们试一下。在下面写啊,写一个1200。我们循环,我们没有右侧是这个变量,我们只有返回的啊这个数组啊,只有这个数组。
27:04
好,这个数组呢,我们再多加一些数据啊。CK城市。北京。那我们循环传过来的这个变量。加上负。As we。好。嗯,这里直接就输出我们dota v的内容。Value。啊,它就是说在我们进行数组迭代的时候,是佛系的时候呢,会给我们提供一个导loop的一个变量。啊,可以知道我们当前循环的一个索引,或者说是不是第一次循环,是不是最后一次循环啊,或者当前是第几次循环,非常实用,有时候我们在做一些循环的时候,比如说我们想让嗯。前三个循环的这个列表的颜色啊,显示红色醒目一些。
28:04
这个时候我们就可以使用啊,这个去判断。有人可能会有疑问,那我基于dota k也可以对吧?你dota k的话,如果你的数组是索引数组可以,但你的数组如果是这种像类似于这种不规则数组,你到德黑就失去了用武之地。好。看一看我们的这个输出。嗯。这多了一个dota。再来看一下。啊,这里就正常的输出了,是第一次啊迭代,然后我们的值输出了啊,第一次输出的是这个值,然后。嗯,接着。中间的这个第二次迭代啊,输出我们这个值,然后是最后一次的时候,接着输出了这个。看到了吗?你看最后一次的时候,我们输出了这个,这个第一次输出了这个。当然每次都会输出这个Y6。
29:02
好,那路还有一个。什么呢?是do loop inex,当前迭代的一个索引,索引是从零开始的啊,看一下啊。这是第一次的。啊循环,这是第二次的一个循环,这是第三次的一个循环,对吧。那有时候我们啊需要用到这个啊。比如说是第几次循环,比如说第一次第二次,有时候你可能还要用它去加一对不对,但是不用这么麻烦啊。路途呢,它提供了这个。这个属性。可以直接就是从一开始的一个迭代,我们来看一看啊。嗯。在这后面写吧,我们用一个杠来连接啊。看一下效果啊。前面是我们的index啊,后面就是我们的正常的一个循环的一个次数。
30:04
所有路谱可以用的属性在这里面都有,可以看手册去啊,具体的去使用,也包括是偶数还是。啊,基数。如果在一个嵌套循环中,你想要去获取啊负极的一个。循环的路虎变量的话可以使用。来访问负极的一个循环啊,Loop里面的parent,来访问负极的一个循环。你如果直接使用do loop的话,它是当前这个这个for,就是说子集的这个for的一个循环变量,但你你要访问这个负极的这个循环变量的话,需要使用到这个do loop啊。说了这个。好,接下来说一下注释,在不利的模板中呢,啊,我们。注释的话是使用这个注释啊,这个注释呢,它在进行编译的时候,是直接把内容给我们删掉了,不会输出到啊最终的al中。
31:03
当然我们还是可以去使用啊,传统的H2的注释,这个注释呢,它是会显示到呃。我们的A大板中啊。这个注释。会显示到HTL代码中。而我们的啊,布雷的模板提供的这种注释。这个注释啊。不会出现到给他代码中,它是在编译的时候就自动给我们删掉了,可以通过检查源代码去看一下,右键查看源代码。可以看到啊。我们的这个注释啊是有的,而这个注释是没有的,所以推荐使用啊这种注释。对吧,一个是不会说让用户去看到我们注释的一个内容,再一个就是减少了这个文件的一个呃大小更有利于。
32:06
啊,网站的一个。性能啊,有有利于这个请求的一个速度。关于这块注释。还有就是可以在不利的模板中直接去使用我们的PP的一个代码。这里我们先加一个二号,哎,分格。在这里可以直接去使用我们的代码,比如我们在这里定义一个变量啊,Dota。啊。等于什么呢?等于Co?在这里定义的这个变量呢,在他其后的代码,我们都是可以去直接使用的啊,比如我们直接输出啊,输出这个do Co。看一看啊。这是不是有输出了对吧?但是不建议你在啊我们的页面文件中去写大量的PV代码,我们尽可能的把业务逻辑给剥离出去,剥离到控制器中,我们控制器中处理好我们业务逻辑,最终只需要返回啊处理好的数据就可以了,让我们的捕的模板来显示这些数据就可以了。
33:17
啊,一些比较复杂的情况。实在没办法啊,在控制器中去处理完成的话啊,就可以在页面中去使用这个。分情况而定啊。啊,尽可能的不要去嵌入过多的一个逻辑。好。还有这个不是特别常用,然后表单这个CSR跨域。嗯,之前稍微提了一下,就是我们在进行这个post put等提交的时候呢。为了防止别人恶意请求,他有一个CSRF保护啊。也就是说我们在进行表单这种POS型的时候,要使用这个指令,它会生成一个呃,隐藏的一个input框。
34:04
他携带的这个talking最终随我们的form表单一起去提交,我们的后台会验证这个talking是否正确,来决定你是否有权限去访问。这个可以给大家看一下啊。就艾特CCS。啊,我们直接刷新这个。源码就可以啊。你看到是给我们生成了这么一个隐藏的一个框啊,如果它是在form表单中,它会送form表单一起提交,主要是这个talking,我们后台会验证这个talking。嗯,方法玉呢。这个现在没法测试,没法给大家演示,也就是说我们可以使用啊这个爱method去伪造方法。比如我们之前讲那个路由的时候啊,说到了我们有put请求啊,有底delete的请求,但是我们的form表单大家知道只有get和put,对不对,所以可以通过这个方法去啊,伪造我们的一个请求。
35:13
啊,等我们写项目的时候去用到的时候再给大家说这个小林先了解一下就行了。好。组件啊,还有这些都不太。用得着线你的组件的话。它其实作用和这个我们的区块啊,布局都差不多一致。那有人习惯用这种。组件。这个以后再说,我们先把我们用得着的给学习一下。引入指示图。布雷的。艾可的指令可以从另一个视图包含另一个视图啊。
36:01
子视图将继承复视图所有可用的一个变量。也就是说,我们可以去。建立一个指示图,然后在我们的这个复视图里面去引入这个主视图。那我们来新建一个啊。新建一个。啊,List一个视图。到这里就可以了,不用打PP。这里面我们就写上一个P标签啊。List。写上了。这么几个啊。我们这样就定义了一个指示图,那复视图如果想要使用这个指示图呢,直接使用at in include就可以把它给引进来。注意我们的目录啊,如果是在WH目录下,可以直接啊使用to。
37:00
List list,这样就把这个文件啊,知识都给引过来了。看一看我们的一个内容。可以看到我们写的这几个内容都有对不对,而且子视图呢,还可以直接使用复视图所有的变量,比如说我们的这个Co啊,或者我们之前这里。传的这个name啊,这个内呢,我们传给了这个child导这个视图,而它作为复视图呢,又引入了啊这个list的直视图,所以在指视图里面是可以使用复视图所有的。这个变量的啊。Do。刷新一下。可以看到是不是我们的变量就过来了。啊,最简单的理解,你就可以把它理解为我们这里使用银扣了这个。啊,List这个指示组相当于啊,把这里面的这个代码啊,直接就拿到了这里,兄弟们。这么简单的去理解就可以了,是不是,但是如果我们一个页面代码过多的话,而且有很多可以复用的啊,可以重复使用的一些代码,比如说啊左侧的一些导航是吧,或者说啊右侧的一些快捷操作啊,这样都可以提取成指示图啊去使用。
38:16
当然有时候啊,如果你的这个。负极里面的这些变量不够这个指示图所用的话,你还可以什么呢?通过第二个参数向子势图去传递这个数据,比如我传递一个啊,Tap啊,等于一啊,等于一。啊,有时候我们要使用这个指示图的话,可能不同的地方使用会要展示一个不同的效果,所以我们可以通过传递这个参数在指示里面做判断啊,指示图里面做判断,嗯,这里我们。啊,If。Dota ta等等于一。我们让它显示我们的这个变量else,否则的话呢。写个N。
39:00
衣服。否则的话就显示这个。好,这个就删掉啊。这样我们通过向直图传递的这么一个参数,就可以在指数里面做一些判断。看一下啊。这里输出了它是不是,如果我们传递的参数,比如说是二。它就会显示另外一个内容,看到了吧,那这个。这个就是指示图。包括传递变量啊,如果我们引入的一个这个视图不存在的话呢。他可能会报错啊,所以使用这个include if。当引入的一个啊指示图不存在的时候,它不会报错。啊,其实这个也。有些情况下不是用的很多啊,我们既然如果引入指示图的话,一般它这个指示图我们都是可以控的,就会提前创建好这个指示去使用。好的,常用的啊,布雷的模板相关的这些内容就这么多。
我来说两句