00:00
接下来去完成我们所有的博客的一个静态页面。先看一下首页。首页的话。在。Resource里面啊里面,嗯,新建一个index目录。来放我们的首页相关的代码。不要把所有的这个文件都放到啊,比如说都放到Windows目录下,当你页面多的时候就会比较乱。我们尽可能的把某一类相关功能模块的去放到对应的一个文件夹里面。首页。文件夹里新建一个文件index.blade。好。这个用来放我们首页的代码啊,他肯定是要继承我们的模板文件的啊。由于时间关系,我们就不去写这个页面了,从我已经写好的页面中啊,从已经写好的页面中去把代码拿过来使用。
01:04
找到index的这个手链。这个是我已经写好了一个代码。啊,它继承了我们layout里面的APP。这个模板文件,然后定义了我们的title。啊,这里是我们的啊样式,它引入了首页的这个啊样式。嗯,下面就是呃,首页的主要的一个内容啊,主要的一个内容。使用。嗯。For循环。来生成了一些假数据啊,循环了这么多次,生成了这些假数据。也就是我们看到的这个效果。呃,接下来啊,这里是用到了index的一个样式,我们找到index样式也拷贝过来。Index实验三、四。放到。
02:00
我们public的index里面。啊,已经拿过来了。啊,虽然它是之前我们就是说构建这个。呃,基础的结构的时候都拿过来了啊,但只是我们这个。模板文件里用不着,又没引入好。首页完成之后呢。接着去干什么呢?首页的内容只是下面这一块啊,到这个这里这个内容接下来去完成我们的头部的,还有底部的一个代码。找到。Resource。View里面模板文件里面的这个头部啊,我们要完成头部的代码,头部啊作为一个啊指示图,所以它啊直接写代码就可以了。还是从我写好的地方去拿。Layer里面开的,这是我们头部的一个代码。
03:01
比较简单,就是一个名字,还有几个按钮。头部的呢,它有一些自己的一个样式啊,因为每个页面都会用到这个头部和底部,所以我把这些样式。都放到了CSS里面的common.css啊,作为我们的公共的样式啊,有我们的头部的样式,还有其他样式,复制下这个文件。打。Public。这里面啊。不能复制,我们新建一个。Style。Common用来放我们公共的一些样式。复制这些内容,这里面主要是写了头部的一些相关的一些样式,还有啊底部相关的一些样式,包括定义了一些字体的一些大小,一些背景颜色和文字的颜色。嗯,那既然作为公共的CS,我们要在。我们的。
04:00
这个里面去引入啊。因为我们的入模板文件是引入了这个layout style,所以我们要在这个style里面去。引入公共的一个文件啊。Link。Half。CS里面的。common.c加。啊,这样我们头部的样式就有了,好,底部的样式也有了,然后我们的首页啊。样式也有了,内容也有了。接下来我们就去。显示我们的首页。现在你看看我们的首页还是什么呢,还是这样一个啊这个。还是这样一个滴滴的一个输出呢,所以我们去改我们的控制器啊。找一下。Root里面的。
05:00
Web看一看我们首页使用了谁,首页使用了index ctrler里面的index的方法,对吧,我们去找到这个方法,快速进入这个呃类。可以按着。Command啊,这是ma,如果是Windows的可以按着CTRL点左键就可以。快速的进到这个里面。然后这里是滴滴的,因为我们现在已经有了页面,所以就可以使用written,然后使用啊will辅助函数去返回我们的页面。我们的页面是在哪呢?是index啊,目录下里面的index。对吧,你要你看我们是view这个辅助函数的话,它默认会指向这个view目录嘛,然后是index目录下的index文件啊,这个后缀是可以省略的,现在我们再去做一下尝试看一下效果。嗯,首页的这个有一个组件没有引用到,是什么呢?是这里的一块内容,因为这里呢,它是一个啊公共的一个内容。
06:07
博客的详情啊,详情也用到了,我们看一下。是不是详情也用到了这一块的内容,是不是,所以我就把它提成一个子组件,这样的话我们首页可以引入它,然后不会详情也可以引入它,就不用重复的去写这种重复的代码啊,不要重复造轮子。下面我们去建一个啊这个文件。嗯,先建一个。Common门目录啊,用来放我们公共的一些组件。啊,接着呢去。嗯,建一个这个我们右边使用的这个啊,这个东西我们叫这个名字。新建一下。right.blade啊b LA blade。好。然后去复制一下这个组件的一个代码。Common red car的歌。
07:05
啊,因为这个右侧的。啊,这个组件的话,它有一些自己的一个样式,所以我就把右侧的这个样式放到了它对应的一个啊自数间内。然后下面是要用到的一些代码。我还做了一件什么事情呢,是呃,给这个子组件传了一些变量,你看到了吧,传了一些变量。然后在子组件里面啊,这个子页页面里面。使用了这些变量,这样有个什么好处呢?因为我们的啊右侧这一块,比如说我们首页使用要显示首页相关的一些内容,对吧,包括这个文章的数量啊,包括我们的描述,但我们详情页可能就会显示这个分类相关的一些事情啊内容。对不对,看。是不是这样的话,我们给这个啊子模块去预留一些变量,让啊使用它的地方去传入你要显示的一些数据,这样可以更高效的达到这种啊啊指示图的一个复用。
08:09
我们是这么去传达,如果你使用的是呃拉的一些组件的话,它会通过这个属性去传递,你要传那些数据好。现在再来尝试一下,看一下。就不会报错了,对吧,我们的首页就有了。把它关掉啊,手边就有了。啊,通过。写代码的话,你也可以就是按照这个顺序去写啊,可以先写头部啊,头部写完这个,把这个底部啊也给写上。然后最后再写中间的一个内容。发现我们的底部还没有做处理啊。来把底部给。内容给更改一下,找到我们的layout里面的。把这个底部的代码更换一下。Lay out。好。
09:01
此时再去刷新一下啊样式,因为我们已经在common下塞里面引入了,所以这些样式就都有了。接下来去完成登录页面啊。登录和注册页面。登录和注册,我们新建一个。Login页面。啊,这个目录文件夹在里面放入我们登录的页面和注册的一个页面啊,注册新建一个login点点。好。找一下已经写好的登录页面的代码。复制过来啊。啊,也是一样的,继承了我们的这个视视图啊,模板视图,然后换了一下title。他自己的样式,自己没有什么样式,这个页面是纯用啊波拉去完成的。
10:06
就是很简单的一个页面。下面呢?嗯,我们去访问一下。在访问之前,我们回想一下之前在啊学习。嗯。路由和控制器的时候,好像我们说过,我们的登录和注册会用自带的这个。认证的一些啊方法。所以就没有去定义,现在我们要显示这个页面的话,要去root里面去定义一下啊,像之前我们说过以后会用提供的。啊,因为只是作为临时显示页面的话,所以这里简单的去定义一个啊视图路由就可以了。请求login配给。然后返回login目录下的。漏点啊好,同时啊,临时显示登录的都有。
11:06
来现在就可以去测试一下了啊,请求这个地址会显示啊,这个目录下的这个页面,也就是我们刚才写的这个页面。少打一个配置。可以看到登录页面有了,对吧,同样的。呃,完成我们的注册页面,还是在这里新建一个。点。写入我们注册相关的代码。去找一下。注册相关的代码。盯一下路由啊,要不然。没法显示。
12:03
改成。Login下面的啊文件测试一下。Log下面的。啊,不是啊,是配置,这才是我们的一个路由地址啊,刚才打错了。登录注册页面也有了。接下来我们看一看。啊,会发现啊,这个头部啊,登录和注册都有,只是颜色不一样而已,所以我们不让他每个页面都写一遍。啊,我们把它提取出去啊。把它提取出去,你看两个页面都有对不对,把它提取成组件。在common里面新建一个。呃,模板。子组件文件叫。嗯,因为这个不是算特别公共的,可能就是啊登录页面用到了对吧,所以我们就放到登录页面里面吧,在登录页这个目录里面去创建这个啊。
13:10
Never。On top。第二。把。登录这里面的。这个给提取过来。放到。里面。那登录要使用的话呢,只需要去。银可录的。Login下面的。Never talk。就可以了。嗯,同样注册要使用的话也是啊,这个代码就可以不要了。引入它就可以了啊,这样我们的。
14:00
可以复用的部分就提取出来了,复用有有什么好处呢?比如我们的这个登录的链接啊改变了,或者注册页面的链接改变了,我们只需要去改这一个地方就可以了,不用每个页面都改,你看现在链接是不对的对不对,你只要改这一个导航就可以了。知道吧。好。现在。都可以点了,是不是这个注册点这个我们回到登录对吧,但是我们发现问题,我们点登录的时候,这里是激活的一个状态,但是点注册的时候还是它,他们又是一个激活的状态。对不对,这是因为我们把那个样式写死了。看。把这个颜色写死了,所以我们需要做一个判断,也就是说如果你当前是登陆页。那我这里就显示呃蓝色,如果你当前是注册一下,我这里显示蓝色。所以我们的这个组件啊,要能接受一些参数,在引用它的地方,我们要能传一些参数到这个啊子的这个视图里。我们先看登录的,我们传什么参数呢?传一个never啊,当前的导航,比如说当前的导航是登录好。
15:08
那在这个里面也传一个参数。也是这个。比如。啊是当前的页面是。对吧,这个时候我们在子视图里面只需要判断这个变量就可以了,现在我们回这个子视图去判断这个变量,使用双括号来执行我们P代码。啊,判断我们的dota。变量啊,这里我们用数组传递的啊,在这个指示组里面,它就会可以直接使用这个变量,等等于login的话。那么显示这个蓝色。否则的话显示什么呢?显示这个黑色。同样的我们复制一下,把这个注册的。
16:02
也给换了,这里就判断注册了,如果你是注册页面,我就显示蓝色颜色,否则就是黑色,这时候我们再试一下。刷新。注册,你看他变了吧,然后点登录。对吧,这样我们的这个参数就传过去就可以控制啊,指示图的一个显示。好,登录页面和注册页面完成之后呢。嗯,继续完成。博客的一个。详情啊。Log。博客的一个详情,现在还是一个文字啊,看一下我们博客详情的一个内容是这样的一个这样的一个页面,同样的。先去创建。一个博客的一个目录,这内容有点多啊,我先把它全部折叠起来,点这个的话,你可以全部折叠再点开,它就帮你就是重新给归拢好了,当你打开的东西过多的时候,可以直接这样点。重新去我们的页面文件新建一个目录。
17:02
啊,一名年新建一个blog的目录。在这里面新建一个。嗯,秀啊第二。用来显示博客的一个详情。代码的话还是直接去拿我写好的啊。可以看一下啊。这个东西有点多,但其实不多啊,这是他呃用到的一个样式,就因为只有一条,所以我们给他提取成文件就写到这里了啊,只有一条,没必要去单独去再弄一个文件。嗯。这些是。嗯。标题啊,这个博客的这个标题,还有时间,还有什么的,还有一些啊图标。就是我们的这个部分呢。然后这里是我们啊博客的一个正文的内容,内容的话为什么是空着呢?因为我们使用了马可档,所以它的数据是在下面用马可当进行渲染的啊。
18:05
好,下面这个是回复的一个数量。啊,就是。这里啊,回复的一个数量,接着是没有登录的时候的一个提示和登录之后显示的一个回复的一个输入框啊,都在下面,都在这儿。啊,再看一下右边是不是还有一个。这个区块对吧,因为它和水位类似嘛,所以我之前是把它给啊提取到公共的一个视图里面了,然后这里所以就是直接就是引可的引入的。好。嗯,下面呢,是啊,这个是隐藏的一个。这个div它里面是放了什么呢?放了啊,我们的博客的直接内容是马克当语法的。啊马可能语法的。然后在GS里面呢。啊,我们引入了啊。这个马克当处理马克当的一个GS啊和处理这个马克当中表格的一个GS之后去啊渲染啊,获取到我们的这个马当的内容,然后把它渲染到。
19:06
啊,这个显示的区域。从这里渲染到显示那个区域。在这里呢,还引入了这个马可当相关的一些样式啊,这个就是我们子页面,它可以引入自己需要的一些样式啊,甚至写自己一些啊需要的一些JS。啊,最终啊,我们去看一下效果。看一下我们自己的网站那个效果,但是现在还是啊在打印输出,要去改一下我们的。内容才行。好,这些东西也比较多,打开的,我们可以右键全部关掉啊。先去看一下路由。路由找到博客详情这里啊博客详情,博客我们使用的资源路由,所以这个详情的话,它会啊使用这个控制器里面的一个修方法。我们进入到这个控制器。按CTRL键左键。在这个控制器上找到我们的修复方法,可以看查看一套博客的详情,现在是啊,还是打印输出,这时候我们就不用打印输出了,可以直接页面了,因为现在我们有一个页面了。
20:08
嗯,Blog目录下的秀页面来保存。再去尝试一下啊,这个我们就随便说。可以看到我们的。啊,这是我们本地自己的地址啊。详情页有了是吧。嗯,和我展示的是一样的。对吧,好。接下来去。嗯,完成其他的一个页面,其他的页面就比较简单了。继续完成博客相关的博客的一个添加页面。添加一般我们使用命令啊。嗯,代码继续复制。不浪费时间写在写这些代码上面。添加的就比较简单了一些表单。来,同样是需要改一下我们的,呃,返回啊,这里这里是返回这个添加薄荷的页面,要改成return will。
21:10
Blog下面的。布劳格目录下面的科瑞页面。测试一下。Ta,我们这里是输入ta。好,添加博客的页面也有了啊,接着是编辑的页面。创建一个。E加。编辑页面的代码直接复制。啊。你们注意啊,写代码一定细心,你看我这个每个标题都是不一样的,就每个页面有自己的一个title。嗯,接着改返回编辑页面的地方,编辑的话一般是我们的,呃,就是说以data这个路由返回,因为我们用的是资源路由嘛,看我们root里面这里定义的是用resource定义的这个资源路由嘛。这里直接复制一下啊,复制一下啊。
22:02
把这个返回改了,也就是请求编辑的时候去返回blog下面的页面。保存一下试一下。编辑的话要有一个ID。接着是以。看编辑页面有了对吧,编辑它和添加页面其实是一样的,只不过编辑的话呢,呃,会把我们这个博客的一个内容先做一个展示,先做一个预览,然后再去,呃决定提交不提交。编辑呃,页面完了之后呢,是我们这个用户中心的一些页面啊,比如用户的一些基本信息,但是现在我们啊是没有的啊,现在是没有的,你看。所以去继续完成啊。用户相关的,同样在Windows下面创建一个用户的一个目录啊,叫user。接着新建一个釉色的。啊,音符用来展示详情的。Blade。结果打错了名字,重命名一下。
23:00
BLAD。好之后。去复制一下页面啊。嗯,User,我看看在哪。这呢?复制一下详情的。然后我给他的标题是修改个人信息啊,他们这些页面都是继承了我们的模板文件的,这样都有具有同样的头和啊底部。嗯嗯。因为我们用户的页面,你看看他左侧是不是有一个导航,导航的话呢,嗯,其他的页面也会用到,比如修改头像,还有所有博客都会用到,对吧,所以。我把它给提成了一个这样一个子组件,这样的话其他地方就能用,并且给这个子组件传递了不同的参数,好用来做这个啊。就是说当前的一个激激活的一个状态,比如当前修改头像,让修改头像背景的颜色变蓝。传向子组件传递了这么一个变量啊,现在我们这里面是没有这个子组件的,所以创建一下啊。
24:07
嗯。叫user,看一看啥名字啊。刚没有。好创建完成之后呢,去复制一下这个代码。有色没有?啊,这个代码里面就比较简单,就是一个呃列表,然后判断了什么呢。判断了这个,呃,Never,它如果是付,然后我就让它是一个激活的一个状态,对吧,如果是头像,让头像是一个激活的一个状态。这个是控制背景色的,这个是控制文字的一个显示的一个颜色啊它。这里为什么是这个颜色呢?因为我们的这个名字打错了。要重新命名一下。少打一个点不累的。你们也一定要细心。啊,这样的话颜色就对了,好。
25:02
我是在使用的时候啊,使用这个子组件,就是左侧这个导航的时候。啊,因为很多地方用了,它每个地方用到的这个页面的不同,它所要这个激活的一个位置就不同,我是通过传递的一个变量嘛。然后在这个子组件里面判断这个变量同,就是说改变了这个背景色和文字的一个显示。啊。下面。啊,代码写完了,代码写完了。去修改一下。我们个人中心的这个返回啊,看看我们请求这个user返回的是。执行的这个方法啊。点进去看一下,他现在啊,还是在输出,我们不让他输出了,让他return。Will返回。User目录下的info页面。来看一下。哎,我们的详情页就有了,并且这个啊选中还是正确的。
26:05
同样的方法呢,去处理一下用户的头像。头像。我们继续在。用户这里面这个目录下去创建。啊。点B。去拿一下代码。同样的可以看到啊,我们的头像这里也引入了这个啊,左侧的一个。导航,并且传的是。呃,当前的导航是他啊。去改一下啊。头像的一个页面的一个返回给他。那这个方法是用来返回头像的一个修改的页面的嘛,所以我们需要改这个地方右侧。
27:02
有色目录下面的。啊,这个文件啊,这个文件不写后缀的。去测试一下我们的效果。嗯。有了是吧,好。还有最后一个页面就是我们的。所有博客。在user里面新建一个。Blog,哦,又没有加点blade。重新命名一下rename。点累的。记得去拿我们的代码。这个删掉。嗯,颜色不对啊,你看颜色的话,你就知道这个文件名有问题,刚才又打错了。
28:00
啊,这样就对了,所以说有时候你看这个编辑器提醒的一个颜色你就知道啊,可能会有一些问题。这里同样是引入了这个左侧导航。然后使用for循环啊,输出了几条我的一个博客。嗯,去改一下。返回这个博客页面的。嗯,好。Return,我有user下面的blog。去测试一下。啊,所有的博客也有了,那现在你这个导航都点不了是吧?都点不了,所以要去修改一下导航的链接,此时我们只需要修改这一个文件就可以了,因为所有人都是引用了它嘛,啊这也是我们提成公共的一个资主的一个方便的一个地方。啊,要不然你每个页面再去改一遍哈,现在都是景,我们改成对应的链接,看一下个人信息。
29:00
哦,先把其他的关掉,有点多开的。Close other。然后打开路由。呃,个人信息,个人信息的话,找到我们的这个路由,看个人信息修改页面,它的这个内幕路由命名是不是U侧点符对不对,所以我们可以直接使用。嗯,双括号里面是root辅助函数,加上路由的命名,去生成对应的一个链接啊。啊,不推荐你们直接去这么去写啊,当然这么直接去写也行啊也行,为什么不推荐这么去写,而是使用我们的命名呢?就说因为假如有一天啊,你的这个地址你变了,比如U色你变成U色阴风了,你变了,你要把所有的地方你都要改一遍才行。清脂。啊,但是。啊,你如果是使用的命名。这个六命名,你即使链接你变了。基本上其他你用到这个命名的地方不用变,只要你这个名字不变。啊,这些是比较方便的。
30:02
虽然是可以,但是不推荐这么写,还是使用路由命名来写root user色点应该是这个名字啊,我记得是这个啊,看一看用户的头像页面啊,就是它这个名字。好,接着是所有博客的页面root,看一看内幕。所有的一个博客啊,是优色条blog。好,这样我们把链接都给加上了,再来测试一下。刷新个人信息好使,修改图像是吧,好使所有博客。嗯。接着我们看这个登录和注册点不了,回到头部去修改链接。Layout里面hier。啊,这个登录和这个注册,它现在是button,你把它改成A标签对吧?啊改成half属性。使用这个root。
31:01
Login,嗯,我们的这个root好像没有给名字啊,他没有给名字。啊,这种因为是用于临时显示的,所以这时候我们先先临时啊去这么写吧,好吧。这种临时的你可以去写一下,因为我们使用LA生成完他自己的这个登录的和注册相关的东西之后呢,这个都可以删掉,都不用了。好,包括注册也是先这么临时写上啊。这里也改成a half。好这就可以了,然后因为他是一个按钮按钮啊,它不具备这个啊。就是说tap等于button这个东西,这个是属于button按钮里面,我们把它删掉,如果你不删的话,你在谷歌浏览器里面显示没有问题,但是你在这个,呃,Safari啊,这些浏览器显示的话,它就真给你说一个按钮,所以说你如果是A标签的话,你就不要让它显示嘛。看一下效果。
32:00
好,登录一下注册一下还还是比较方便的,但是我要回首页的话,每次还要输入地址,多麻烦呀。啊,对不对,那我把这个logo这里我就加个首页链接呗,来。这里我们的logo啊,加一个哈,给上我们首页链接,我们首页是有这个路由命名的啊,就是index。嗯,可以去确定一下首页的就是这个index嘛,这个路由命名。好,接下来保存,嗯,去试一下。啊,现在我们这样返回首页没问题对吧,登录一下注册一下啊,都是可以的回首页,但还有一些问题是我们的这个这个博客啊,这个标题点不了,我们想让他跳到博客详情,是不是这时候去找到我们的首页。里面。啊,这里看看这个标题在哪,标题是在。哎,这个写着呢啊,下面这个是描述,这个是标题。对不对,它是一个HR。啊,那我们把这个HR改一下,加个A标签啊,把标题放这,然后。
33:05
加个链接,链接呢,我们博客它是一个具备这个路由参数的一个链接啊blog。然后它有路由参数啊,所以我们在这个root这个辅助函数里面要传第二个参数,它的这个ID。那等于什么,比如说先先先默认写啊。先随便写啊,先写个一啊这么写。因为这是资源路由啊,资源路由。资源路由它的这个修方法,资源路由修方法是不是啊,我们要加上一个斜杠,你看要加上一个blog来看一下是不是加上一个斜杠,加上一个路由参数才行,对不对,所以我们在使用root去生成。这个链接的时候,你要带上这个路由参数才可以啊,现在我们来测试一下。回首页去点。啊。没有定义啊,应该是blog点溴啊,我们用它的这个修方法。
34:01
啊,这个才是它的路由名字,就是说啊博客详情的路由名字,如果实在不清楚的,你可以去呃,你的这个终端里面去使用qp artisan。Root list这个命令,去看一下所有的录的一个名字。我们可以看到。啊,这个应该是blog点秀用来显示一个博客的啊,这个名字,所以刚才我们写错了啊,他报了一个错,找不到。再刷新一下。嗯,他说他需要的一个参数,哎,我们就纳闷了,我明明给他参数了,怎么会报错呢,这时候你通过这个去看的话,你会发现它需要一个。啊,Blog的一个参数对吧。所以这时候你要把它改成blog就可以了。可以了是吧,当然这个时候我们点的话就可以跳到这个详情,然后回来。啊,但是我们的这个标题的颜色变了。你可以给他加一个相应的一个属性,去改变一下它的这个颜色,比如说T。
35:06
那是吧。这个是class啊。现在看一下颜色。变成黑色了啊啊,因为这个秀方法呢,它只有一个这个路由参数,所以我们不用这么麻烦的去写,直接这么写就行,之前讲路由的时候说过,只有一个参数的话,我们可以直接把它作为参数给放进来就行了,不用再定义数组啊。再来测试一下效果。不报错对吧,点的话一样能点,是不是这样,我们,呃,所有的静态页面,包括这个可以点击的链接啊,都给填好了,我们再写一个项目一定要。啊,多注意一些细节,不要说就是说这个页面写完之后就扔那不管了,你该能点的地方把链接都填充好,让别人去使用的时候体验稍微好一点。页面就写到这里。
我来说两句