00:00
这节课继续。完成我们博客剩余的功能。所有博客。这里我们个人中心进到啊所有博客这里去查当前登录用户的所有的一个博客信息,首先找到这个所有博客的一个地址。找到。这个路由文件,然后看一看。我们个人中心里面啊,所有的博客是哪啊,是这个地址啊,是请求的是。U色ctrl blog啊地址呢,它这个name呢,会连上外面的这个内这个路由前缀啊,不要忘了是U加blog。然后方法是这个控制器的拉,方法在最下面。啊,这是我们所有的一个博客。啊,在这里面要查询用户所有的博客对吧。啊,但是有一点要注意啊,在查询之前。嗯,怎么办呢?我们是不是先看一下页面都有啊,什么内容对不对,你看页面会有这个时间,还有评论数,还有这个。
01:00
呃,浏览的数量对吧。啊,如果。我们没有这个浏览的数量的话,就是博客里面的这个表里面就可以拿到所有的数据的话,可以怎么查呢。啊,我们also里面是不是存储了这个用户的一个模型,看一下啊好来打一下看看。看一下also里面啊,存储了我们当前登录用户的一个用户的一个模型。是不是,所以既然它是用户模型。我们用户这个模型里面是不是和这个博客比较有关联,可以拿到这个用户的所有的博客,对吧,看一看是不是拿到了。诶,九条博客,当然我们这么获取数据没有问题啊,这时候我们把这个数据啊,传到这个视图去循环遍历就可以了,或者说不传直接在这个视图里面。
02:00
直接去循环这个用户当前登录用户的所有博客也可以。找到我们的视图文件在这里啊。啊是吧,直接把这个循环给替换掉,循环我们的这个。啊,用户所有的包括就可以了,对吧,那为什么我们不这么写呢。是因为你看一看啊。啊。我们先先这么写啊,先这么写给大家看一下啊。我复制这个。好。来把这个循环给替换掉。然后as doctor啊,Blog标题的话就是博客的标题对吧。Blog里面的title。接着去看啊,几个月前。Block里面的update,它是一个carbon时间对象,可以使用这个时间对象的啊,Di for human这个方法啊。去显示这些线,然后这个浏览量是吧,浏览量可以使用。
03:02
Blog。里面的will,我们这个字段对不对,接着你看。评论数,评论数怎么拿?我们是不是还要去拿这个博客下面的所有的这个评论。对吧,所有的评论,然后去统计它的这个数量。对不对,现在我们来循环一下。啊,我们的这个九个不合适,有的是没问题的,对不对。啊,但是为什么。我们不这么去做呢,你们想一想。你这里每循环一次。是不是就会去查询一下,这这个当前这个博客的一个,呃,相关评论的一个数量,每循环一次就会去查询,对吧,那如果我们博客非常多呢,比如有100条,你循环查100次嘛,这样肯定。它会对数据库造成一个不好的一个影响啊。我们尽可能避免这个循环去查询数据库。那怎么办呢?我们是不是可以使用预加载?
04:02
对吧,我们在这里,嗯,查询用户。所有博客。对不对,所有博客好同样的啊,我们先给一个block变量,那等于什么呢?等于这个。Also啊,也是从这里面去取我们当前登录的一个用户的一个模型。啊,只不过这时候我们取他的这个博客的时候。对吧,取他这个博客的时候啊,不用这个属性,我们用方法,用方法的话,我们会得到一个查询的构造性,这时候可以继续写其他的一些查询条件,比如说啊位置。With content吧,是不是可以直接得到它的关联关系的?啊,这个数量。对吧,使用位置contain可以直接得到这个博客关联关系的这个数量。
05:04
好,最后。啊,我们使用get获取。就可以了,对吧。好。那接着啊,就这么写就可以啊。把这个博客试图去传给前台。Blocks。Do blocks。那这里啊,前台的话,我就去试图的话就去循环这个。Do blocks就可以了是吧,看看结果。是不一样的啊,但啊虽然结果一样,但是我们这个过程不一样,我们这里是把这个啊,在查这个博客的时候,就把这个它的这个数量。啊,就给统计出来了。对吧,所以不会去循环去查了,当然我们这个字段用的有问题啊,这里就不能用它再去循环去查了,用它什么呢?呃,我们知道当我们使用这个with count的时候,是不是会给我们生成一个count的一个字段啊,就是以这个关联关系加一个count一个字段来,我们打印一下看一看不清楚没问题,随时可以打印去看一个数据的一个结果。
06:15
刷新一下。嗯,随便找一篇博客去看一下。里面是不是有一个这个评论的一个数量这个字段对不对,所以我们可以直接去使用啊这个字段就可以了,这样就不会去循环去查询这个数据库行了吧。好,那你们可能有疑问啊,为什么不把这个直接放到这里去循环呢?是不是我们尽可能的就不要在这个视图里面去写大量的这个查询啊什么的,包括PP这些代码啊,尽可能把代码写到这个控制器里面。这时候我们是不是还可以对它,可以对它做一个分压。如果我们不喝过多呢?一点享受不完的。对吧,给做个分页,让它每页显示。嗯,五条。
07:01
啊,这个时候。在这里。分页的话,只需要在这个服器后面。使用blocks的这个links。就可以完成分页了,对吧,看一看效果。啊,是不是分页也完成了,因为我们只有九条,所以只有两页。对不对。包括这个第二页第一页。这样的话,我们的这个。啊,列表就算完成了啊,包括这个时间也有。啊,接下来看一下什么呢,把这个编辑的链接给上啊,能到我们的编辑页面。找找这个编辑这里啊,我们用的是资源控制器,所以它的这个编辑的这个路由是block点。呃,E啊,是这个页面,然后需要接收一个blog的一个ID啊,我们直接传ID也行,直接传这个对象也行,都可以,这里我们直接传这个blog的这个模型对象。看看效果。
08:01
点一下。是不是到这里面边界了,对不对,我们把这个标题标题改一改啊。啊,最少十个字符啊,测试测试。好,是不是更新成功,再次回到我们个人中心,看我们的这个所有的一个博客,对吧。四秒前更新的吗?好,编辑给了。那接下来要做什么呢?把我们的删除功能给完成。呃,删除的话呢。因为删除我们看一看这个所有的这个路由列表,PP artist root,冒号,List GP。嗯,就说说blog相关的吧。看一看博客的这个删除啊。它的路由名字是什么?是不是Detroit?对不对,他请求的方式是delete方式。对吧,而且它,呃这里是要传一个blog的一个模型,所以这里我们怎么处理简单是不是我们使用阿贾克斯去提交这个删除,删除比较简单对吧,所以这里我们把这个啊就不让他点了啊。
09:10
不让这个A标签点,然后给他一个。一个类啊,一个类,为什么我要用类名去绑定这个事件呢?因为我们现在是在循环中,你看在循环中如果你用ID的话,你的ID都会重复了,我们在这个一个1B文档中,ID是不能重复的。所以这里。我们在这里写啊,DL杠。定一个这么删除的一个类,接着为这个类绑定一个点击事件啊。这里选TS啊。反写,把注释写上。删除。啊,博客好,为这个类绑上一个点击事件。点。然后方形。在删除,在点击这个,呃,删除的时候呢,我们去发送一个阿贾克斯。
10:06
啊,去执行这个删除。好,URL我们先把参数写上啊,等会再去完善这些参数。然后是他的这个,呃,Type提交的类型,那我们刚才已经看到了,它需要一个delete是吧。这个提交方式好date啊date呢,我们不用传,删除的话,它的这个博客的这个ID是附加到这个链接上面的。所以date我们不传date type的话,我们接收这个JS类型。接着是我们的。啊,接收这个成功的一个函数。诶,有一个res是负器,他给我们的结果。我们可以打印这个is啊。好,那接下来就处理这个链接,这个链接怎么怎么处理呢?因为我们每个点的时候都要就是获取不同链接,比如假如啊,我们看页面,我们点这个假如删除是ID的是一的一个链。
11:06
一个博客对吧,那它的链接可能就是啊block斜杠一,那我们如果点这个删除二的一个博客呢,它的这个uri可能就是斜杠就是block斜杠二,所以每个都是不同的。对不对,这种情况怎么办?既然他们每个不同是在循环中产生的这个不同,我是不是可以在循环的时候,我把你的链接,我先给到你一个属性,然后我GS里面用属性,就是说用GS语法获取你对应的这个属性就可以了,对了吧。啊,这里我们用这个这块的一个数据啊。或者绑定的方式给一个data-ul然后这里去写我们这个删除的一个链接,删除是block点。D超阳,然后toy。他需要接受一个呃,Blog的ID或模型是不是?Destroy应该是没有打错,看看。
12:03
看一下。DT还是打错了。来关掉。呃,这样的话,因为是每每次就是循环的时候,这个都是不同的,所以我们生成的这个链接就是不同的。对吧,所以我们这里点击这个时候触发这个事件,只需要获取啊,这个事件源的这个链接就可以了。是不是?事件员事件员是谁?This?啊,当时this是不是直线触发这个事件的这个元素,就是点的谁,这个this指是谁吗?我点的谁是指谁嘛,然后获取啊,使用date方法去获取我们设置的这个UR。啊,就是获取到这个值了,这样的话每个都是不一样的,我们就请求这个链接就可以了,然后执行一个删除,好看一看,我们删除的一个地址是在博客的这个控制器里面,Ctrller。找到博客的这个控制器删除,应该是这个创意方法删除博客,我们先看看这个打印能不能打印出来,好吧。
13:05
来打开我们的啊检查。啊,这个是我们的GS啊,这个是我们的网络请求,我们先刷新一下页面,因为改了这个A代码嘛,把这个清掉,把这个清掉,接着我们来删除第一个啊。好,419419这个错误大家已经不陌生了吧,是不是这个csf对不对,所以怎么办?我们是不是要在这个里面去传一个date,把这个啊,下划线talking这个字段给传过去,对,当然这样可以,但如果你很多页面都要用到阿贾克斯,你每个都这么去写一遍吗?是不是很麻烦?我们来看一看手册,里面就是关于这个CSR有没有很好的一个处理方案找到。这个基础功能CSRF保护。然后找到往下找啊。找到这里啊。也就是说啊,我们的这个拉这个这个系统啊,它除了会检查POS里面csf的这个令牌外,它还会检查这个头请求头信息是吧。
14:06
这时候我们是不是还可以给阿贾克斯设置一个头信息,然后附加上我们投影也是可以的,对吧?还是那样的问题,你还是需要每个阿贾克斯都去设置才行,可以怎么办呢?可以就是对阿贾克斯进行全局设置。设置它的头信息,然后这个talking的内容从哪去取呢?我们把talking给放到这个我们的header里面,H的这个header里面,然后对阿贾克斯进行全局设置,让它的这个talking的值呢,从HML的这个harder里面去获取就可以了。明白吧,现在我们进行下配置,先把这个。啊。这个标签啊,给放到我们的。公共的这个视图里面。找到layout。找到APP啊,放到这个里面,这样的话,每个页面都会继承这个视图,所以说每个页面都会有有这个talking对不对,然后我们在所有的这个。这个公共的这个GS这个脚本里面继续写啊。
15:02
和它对齐去写,写什么呢?阿贾克斯全局设置好。把这个给。把这个设置给放上就可以了。把这个删一删。好,这样的话啊,我们在进行阿贾克斯提交的时候,就会附带上这个图信息,而且是从我们的这个里面去获取了这个操控的一个内容。来先看一下我们之前这个报这个419错误的,这个提交的时候检查一下他的这个头。看他的这个请求啊,Request的请求图里面是不是没有那个请求图信息,现在我们进行了全局的一个设置之后,再来刷新页面,再次进行尝试。好,把这清空掉。现在已经删除。是不是不爆红了,而且二零正正常响应对吧,看我们响应内容是不是删除不合乎能删除了对不对,接着来看。
16:00
我们的请求图信息里面是不是多了一个这个,呃,叉杠c SR talking。啊,这个时候就不会出现419的一个问题。好。接下来就可以去删除我们博客,因为这里已经拿到这个博客了嘛,就可以去代码里面去啊删除博客。删除博客去这里啊,啊,这里传的是这个博客的ID,我们是不是可以把这个。啊,改成博客的这个模型。对吧,让他路由自动帮我们注入这个博客的这个模型之后要删除是不是就很简单的是吧,使用这个模型的delete方法就删除这个博客,对不对啊,这里我们。把这个结束掉,这个res啊,等于这个接着我们判断删除的这个res。啊,然后进行什么呢。进行这个。呃,不能用这个啊,不能用这个,我们应该使用什么,应该使用。
17:01
Response,我们封装的这个API响应红想起来了吧,去这里面去。啊,比如说这个删除成功。删除成功。然后删除失败的时候,就给他一个删除失败。删除失败好把状态码改成其他的,不给我们200产生一个啊一样这样的话,前台这个判断是他前台我们阿贾克斯这里去判断响应的这个状态码就可以了啊。找到前台页面这里啊,这时候我们就不去打印这个is了。可以直接去判断状态码对吧,If re.code等等于200是不是删除成功了,这里我们可以使用notify,就是我们呃封装的全局梯形的这个。这个GS吗,这里。提醒消息。
18:00
好是成功的啊,然后提示的内容是I点。啊,Message就可以。那如果。失败的话呢。啊,也是这样啊,把它改成哇就可以了。好,现在我们再来看一条消息啊。刷新一下。我们把这个删掉来删除是不是删除成功。对不对,我们再刷新它就会没了。怎么证明他没了呢?现在是因为有九条嘛,这里是五条,第二页是四条是吧。好,我们刷新一下。是不是你看这个上来了,少了一条吧。对不对。但是现在我们一个问题还要继续,一句话,就是我想在删除了它之后,让它这一条直接就消失。可以吧,这个就是在页面中是GS去处理的一个事情了,我们只要写GS代码了,比如说啊删除成功之后,嗯。让删除的这条从页面中消失,好吧?
19:07
那那怎么让这条消失呢?你看我们是点的这个A标签删除的是吧,点了这个标签删除了,那我们只要找到它的负极的。呃,负极的负极啊,三个负极让它去消失就可以了,对不对,但是这么找比较麻烦,我们可以使用简便的方式给它的负极一个啊类,比如说block-item好,那这时候我们点击这个A标签。啊,是不是this就代表当前我们点击的就是当前点击的那个标签对吧。那在这个里面,我们让它的这个呃负极给隐藏就可以了,是不是,但是我们在这里面用不了this这个类,你这里这个匿名函数里面用this,它肯定指向这个匿名函数,就不是我们触发事件的这个事件源了,这时候怎么办?是不是可以使用啊。啊,再定一个that等于this,就是把我们把this赋值给这个that,然后在这里面使用这个that就可以了,对吧。
20:04
啊,That啊,这个that还是当前我们触发这个事件的这个A标签,使用它什么呢?Parents。Parents啊P,然后去这个会找到它所有的数负极,接着我们在里面去传限定条件,要找它的哪个负极就具备这个啊blog.item的。点item具备这个class的这个附体,然后让它remove。啊,让它自己移除掉就可以了,现在再来看一下。刷新一下。就删除这条啊。是不是才能成功?啊。好。没有找到这个类啊。这里多了一个点啊,应该是block杠,你再刷新一下,刚才是打错了。还剩这两条,是不是现在我再删除?是不是那条就立马从页面消失了啊,这是我们从GS层面去操作的。好,删除这里就完成了。
21:03
来继续完成其他的功能。我们还有一个就是博客的发布和未发布。啊,去找一个样式,类似于开关的这样一个样式。因为我们用的是布鲁撒布啊,所以去。找布布相关的样子就可以了。啊,看这个四的一个文档。找中文的,在这个组件里面的。表单里面。啊,大概是。这个位置啊,切换这里啊,就是我们找到这样一个开关,直接复制这个样式啊。放到编辑的。左边。啊,这里放到编辑的左边啊。啊,这里我们改成发布。
22:03
是否发布?把样式调一调啊。比如它这个文字的颜色。调成灰色。文字的大小。调成14。啊,接下来啊,先看一下现在什么样式啊。啊,是这样的啊,我们希望把它换行换下来。所以给它的负极一个class。Flex。干抗生的硬厂。来看一下啊。大概就是这个效果,让它距离右边再有一些间距就可以了。这里啊。
23:01
三。好。接下来我们先看一看啊。但是我们现在有个问题,就是我们点哪个都是控制第一个是吧,这是因为这个表单的这个。啊,绑定的这个ID有问题,所以我们ID重复了。把ID给换一换,就让它不重复,因为这个for的话,他就去找这个ID。所以我们改成space。直接是杠连上啊,连上那个博客的ID,这样ID就不会重复了block ID。好,同样的,当我们啊,点击这个文字的时候,也去找对应的这个ID就可以了,现在看一看这个开关正常不正常。是不是正常了对吧。好,接下来去完成我们的编辑,首先啊。看一看它是一个什么,它是一个check box是一个输入框是吧,所以我们可以给他这个轻级事件去改变博的状态,首先给他一个类,这个写写法有点类似于这个删除啊,和删除差不多。
24:03
啊,只不过删除是进行了删除,而我们的状态更改是更改的状态。可以吧?T。给他去啊,设置一个。这个。庆姐的一个事件,先把这个折叠啊。啊,改变博客状态。然后点信。先测试一下我们的事件有没有给上啊,能不能用。看一下啊。是不是可以,对不对。能用啊。取消也能用好。那接下来呢?怎么办,是不是和这个删除类似啊,也是去呃发送一个。
25:05
一个阿贾克斯。对吧,去这个就不用删除了,消失发送于阿贾克斯,去获取这个我们改变博客状态的这个地址。啊,也是触发事件的这个地址。所以我们给我们的输入框。啊,就是我们切换的这个框也设置这么一个属性去啊,拿到它的这个,就是说修改它的编辑状态的这么一个地址。啊,Root,那要看一看啊,我们的名字是什么?去web里面瞅一眼啊。是不是这里改变博客状态发布与不发布对吧?啊,但是它还有一个前缀,所以说我们的内幕是是。Block点啊。找到这里啊,Block点好。它需要一个这个参数对不对,所以我们要给他传一个blog。
26:03
接着看看它是什么请求方式,是不是一个派系请求方式。啊,那我们这里。啊,就不能用这个delete啊,要用拍。请求方式,其他的都一样啊。接着我们去我们的这个。啊,修改它状态的这个控制器去写修改状态的一个逻辑。这个里面的space方法好像是在最后好修改不够状态。啊。把这里换行换下来。这里啊,我们就不用ID再去查这个博客再去更新了,直接用模型的这个路由模型的一个注入,注入这个blog可以吧。啊,但是我们先打印一下,看看你这个博客能不能注册进来,注册进来好吧,刷新一下。看一下这个network,我们在点那个事件的点这个啊。Check box的时候会触发清洁视线,它会发送二点的请求。看到没有?
27:01
为什么会出现这个?好像走的不是这个方法,好像走的什么。派这个地址好像走了资源的更新方法。我们来试试直接在这里,呃,DD1,你看看这个一它执行不执行。是不值情。这是为什么?啊,这是因为你看我们用这个派去请求了这个地址。对吧。而我们更新是使用put请求这个地址,这时候如果我们去查看一下这个root list的,你找一找这个更新的这里啊,不对,在这里。你看是不是这个地址,它同时支持什么,同时支持put和派。对吧,所以我们这个路由名字有问题啊,我们不能不能这么去定义,不然的话会和资源路由上面的那个资源路由的这个更新方法冲突,我们再加一个好吧,再加一个space。这样呢,就不会和这个资源路由的这个啊更新方法产生冲突。
28:02
啊。这个时候。啊,找到。我们的这个控制器,再次打印那个博客看一看,再次刷新一下页面才可以啊,重新生成这个链接。这个时候再点,我们先把它清空一下。点击可以看到请求的就是这个地址了,是吧,这个跟上了一个,这样就不会和资源控制器的这个更新的方法产生冲突啊,这个点要注意,然后看看我们这个。打印的这个block,哎,你会发现这是一个空的一个block对象。对吧?为什么模型没有注入进来,这又是一个问题。什么问题?来看这里,我们又是block。路由里面用的谁ID对不上是吧,所以没有办法帮我们去注入这个模型,我把它改成blog试试啊。这个啊,路由参数要和我们这个里的变量名一致,它才能帮我们进行注入。再来进行尝试。看第二个。是不是就有了,你看拉,包括我们的这个数据是不是都有了。
29:01
这是这一点,那接下来我们拿到这个数据之后,其实就很简单了,拿到这个数据之后直接更新他的状态就行了,是不是。Blog。Space等于什么等于?啊,就是给它赋值等于这个block space,嗯,我们看它等不等于一是吧,如果等于一不让你等于零,否则的话让你等于一,就是你原本如果是一。我让你变成零,你原本如果是零,我让你变成一,就相当于类似一个取反操作,是不是就可以控制它的这个发布和不发布。好在设置完这个属性之后,因为是我们通过属性的嘛,你要save才可以啊。才可以。清楚吗?好,我们把这个消息返回。啊,这里就。嗯,要加一层判断了啊。Dota这个应该是,呃,不会去。
30:01
更新失败的。啊呃,这里我们要加强判断了,就不一定是这个删除成功。他也可能是,呃,就是发布成功,或者说取消发布,我们应该再做一个判断,就是对当前的这个博客的一个状态再次进行一个判断。啊啊,我们在外面判断吧,定义一个message啊等于啊,当前博客的状态,如果你等等于一对吧,它原来是零。我们现在取的话是最新的一个状态,最新的状态是变成一了,说明原来是零是吧,所以一的话是什么啊,发布成功对不对?好,否则的话,如果现在是零的话,那就什么取消发布啊,已取消发布,取消发布这么一个消息啊,嗯,把这个消息去给他返回到。这个里面啊,返回到这个请求的地方。这就可以了啊,接下来我们来看一下刷新一下页面啊。
31:03
我们改这个123123来。诶,看是不是。啊,已取消发布对吧,因为原来他们都是发布状态嘛。对不对,那说明这里的这个按钮的显示也不对。我们把这个按钮给显示,也可以改一改。找到页面这里。因为它是input啊,是这个check box,所以我们要加一个判断,就是说你当前循环的这个博客的状态,如果等等于一,就是发布的对不对,发布的我就给你。Eck I check选中,否则的话没发布就给你不选中,因为它是这个切割box嘛,是吧,好。刷新一下看看。这是我们之前的这些所有的都是选中的啊,只有这一条。是不选中的,因为我帮你取消了他发布对吧,比如我们把第一条取消。好,也取消了发布是不是。啊,但是你看这个35分钟前,我们刷新一下,会发现它会变成六秒前,也是我们这个取消和不取消会改变了它的这么一个更新的一个时间,如果你不想让它更新时间改变怎么办?
32:11
临时去禁用它的这个啊,时间维护的一个字段就可以了。啊,Time STEM等于。啊,临时去禁用它的这个维护的一个字段。就可以了,它时间就不会变了,等我做一尝试,然后再查这个我的博客的列表的时候呢,发现它的时间比较乱,对不对。我们把它按照啊更新的时间进行一个排序啊,现在就有点长了啊,如果我们这个链式操作比较长的时候呢,你就按箭头去分。去换行,一个箭头画个行。清楚吧。嗯,在这里我们进行一个排序啊O的。By update更新时间排序。啊,DC好,这时候再去刷新页面去看,它就会按照这个时间去排序好,那我们再去改变一下它的状态,看看它的更新时间还会不会变。
33:08
好。已经取消发布,现在来刷新一下,是不是时间也不一遍了啊,这样的话,我们把它的这个时间戳的一个维护先临时给关闭掉啊,接着把它给开启。好,发布成功,现在我们的这个发布功能也写完了,对吧。啊,这样的话,个人中心啊,这个相关的一个功能就基本上完成了啊,个人信息和修修改样,就是之前写好的嘛,包括这个所有的博客,现在我们也写好了。包括禁用,就是是否发布也都给加上了。编辑和删除都是可以用的啊。
我来说两句