00:00
在做完这些准备工作之后呢,我们呢,去做好我们下面的10啊,去实现这个电影招聘功能啊。实现电影预告片功能,那咱们在实现的时候,我们要做什么呢?有哪些工作需要做的?我们首先。是不是待会儿我们用户要访问我那个预告片首页那个页面啊,是不是,那么我们对于我们来讲,是不是先得有一个页面再说,我先得把页面写好,写好之后啊,我再想办法搭建一个路由,搭建个路由后台搭建路由,当用户访问当前这个路由的时候,是不是把这个页面想办法补给他,是不是,而且这个页面的数据的话呢,是由到时候先从数据库中查找相应的数据,然后再把数据返回给他,是不是好,那我们要做这些事,那我们呢,先去一个写,先把这个基本的页面呀,把它给写了啊,基本的页面写了,那我们怎么写呢?
01:05
来到我们的view,我们呢,新建一个页面,我们先写一个简单一点的啊,先建一个HTML的一个静态页面,把静态页面搭建完成之后呢,我们再去想办法去用ES去渲染它,来我们来写啊,这是一个预告片首页。硅谷电影预告片啊。我们呢,待会这个页面呢,一般都是在我的移动端运行,是不是左要给它加一个。Me标签好,Me标签写好了,好这个呢,加完之后呢,咱们呢,这个页面打算使用咱们的bootrap去写啊,因为boop呢,它提供的很多很有意思的这些东西,我们可以直接使用啊来,但是我们要使用BOO的话,那我们是不是要搜一下,比如比TSTP是不是不R好,然后呢,是不是这个网站中文嘛,点开它,点开它呢,我找BOO drop4啊,找最新的四,然后呢,在这里面呢,这里是不是有个中文文档啊,点开它我们来写写页面啊,那写页面呢,是不是大家拿手的东西啊啊我们来看一看啊,咱们的页面我们呢,大家回忆一下,我们的页面呢,其实结构比较简单,它呢就一个这样的东西。
02:23
然后呢,首先有个头部,头部呢就这里写咱们硅谷电影预告片,这里是不是有个搜索按钮啊,然后呢,下面是不是有一条一条的列表,每一条代表着我一条一整条的电影信息啊,是不是好我们就写一个这一面啊,结构呢非常简单啊,部分很复杂,那我们来写写好,首先呢,我们来看啊,这里面呢有一系列的东西,首先这个lay是什么呢?Layout是。布局啊布局layout布局,那在这里面呢,我们这里就发现了,我们啊前面讲过的是不是大家之前学过的这个grade什么东西呢。
03:05
是不是咱们的栅格或者网格布局啊,是不是,哎,这就是这个布局啊,然后这上面呢,是不是用了一些咱们的一些基本的用法,那我们看一下,我们找一个最简单的一个东西使用一下。啊,这里面有个内容,我们把它复制一份啊,待会呢,我们就用上这个布局啊,来就用一下,那我们用的其实非常简单啊,我们只要一层就可以了,不要这么多层。嗯,把这些删掉,删掉呢,我留一个就可以了,留一个扣一个肉,一个扣,肉呢是代表横向的,是不是扣呢,代表的是纵向的一些东西,是不是好有它我们再接着写呗,这里面呢,我待会呢,是不是有个头部啊好,头部我得上去这里上里面看看它有没有现成提用的东西啊,那我们上哪里去找他现成提供的一些东西呢?哎,这里面有一个东西叫做components components什么意思?
04:01
哎,组件,哎,这个组件呢,大家有没有用过,它提供了一系列组件,有没有用过,用过是不是好,我们呢,是不是要一个头部的东西啊,那我该找一个什么组件呢。哎,我第一项那就找有没有什么head是不是,那这里面的没有had,那我应该找什么呢。是不是这个导航啊,来找这个导航,那这里面呢,我们对比了一下,我们找这个内容吧,这个东西呢,是比较符合我们的那个主题的,来诶怎么回事,来往下去拉,我就快速拉,前面都不看了,其实呢,我们要找个类似这样的功能,那在上面呢,有个简化版本,我们看一下。再往走,诶这里是不是有个简化版本啊,咱们左边呢,就放这是我们那个标题,右边就放一个按钮,是不是这个这个东西我都可以删掉,是不是删掉它,那是不是就是这样结构CTRLC啊CTRLC,然后放到这里T好,那这个组件是不是你要想这个组件生效的话呢。
05:05
你是不是还得引入boostra的一些相关的文件啊,啊,咱们还没引入啊,所以说还得引入一下,那在这快速入门这里面呢,诶404啊,我们看一下在这里面能不能找到啊。不上四看一下,诶这里面呢,它就会有这个CS,是不是它要求你引入一个CS,还有GS相关的代码你才能使用,是不是好CS引入一下还有JSJS它分为三种啊,一个是J,一个是这个to,一个是不是不是啊咱们呢,其实只要使用。啊和不to就可以了,是不是啊,因为中间这个呢,它是根据特定的需求才需要使用的,我们压根用不上,所以说呢复用制,而且大家看下这jary啊,它是一个比较特殊的一个版本。它是一个瘦身的一个版本,是不是是一个说白了删减的一些功能的一个版本啊,删减了一些什么动画库啊等等一些东西,把它删减出去了,所以说它大小的更加小一些,而且它是三点几的版本,它是不是不兼容IE6啊,是不是不兼容IE8以下的东西啊,是这样的,当这三个文件引入之后呢,我这个东西就会生效了,是不是我们呢?其次这个1INPUT我不下它这个也删掉,我就保留一个button按钮来看一下它最终的样子啊,右键检查。
06:27
心好,是不是这样样子好,现在有些问题,首先呢,这边边角角是不是有些空隙啊,我们要去掉,然后呢,这个名字呢,我们也换一换,然后这个主题呢,我们也换一换啊,都换一换,那首先把这个名字改一改啊,这里我们叫做硅谷电影照片。啊,这是这个,然后另外呢,主题换一画,主题换画呢,在这个不骤呢提供了啊,就先关掉关掉往下翻啊下面呢,它提供的默认的三个主题是不是,那咱们选一种选啊,比如说第一种是不是选择第一种的话呢,你只要把它class啊复制一份,替换掉当前的这些所有class是不是它只要替换掉它就可以有了,那我们可以看一下这个主题啊,首先诶是不是黑了就黑了,那这个字呢,是不是又变黑了,那你个字体还得调成白色才行,然后呢,这个边距是不是要给整明整掉啊好,那这个边距怎么去除掉呢。
07:29
啊,通常遇到这种情况我们怎么办。我呢,首先我不知道到底是由由谁产生的影响,我是不是要检查一下,我先检查看一下吧,我先看谁产生的影响啊,好,那我们从外层容器看起,是不是这里有container啊好,Container这里是不是有两个pening,哎,如果把这两个pen去掉的话呢,是不是就O了,是不是?所以说我们是不是想办法找到这contain的容器,把这两个pen去掉了,那我们找呗,我们呢还得写写自己的一些style样式,是不是T。
08:05
先咱们第一个要找的是container,是不是把它的pen给去掉,就调为pen定为零,是不是去掉零,然后另外呢,我这个字体是不是变成白色啊,那我就找安琪这个东东把它的字体调为。为right,就是所有的F是不是好,是不是少的FOK,好上线好,结果它呢,首先我这个宽度是不是变回来了,宽度没问题了,哎,当时我这个颜色有没有变呢?那没有,所以说我们检查下这个颜色,发现它什么原因呢?他的优先级是不是不够啊,那怎么办?我给他一个最牛逼的是不是啊,给他最逼的属性,他是不是这样就好了,这就好了,好然后呢,发现右边这个绿色有点格格不入的感觉啊,我把它也改成白色的,把所有东西也改成白色,那我就改呗,我得找到这个按钮,这个按钮是不是在这啊,那为了防止找错的话呢,哎,我我这个success不找啊,Success可能会变化,那我就不找他。
09:16
我多找几个样式,是不是把这几个样式全都加上啊,全都给你加上啊,然后呢,这样选择的话就不容易出错,把它的color改成。白色是不是color了,改成白色,然后另外呢,它有个边框啊,注意是不是边框啊,我要不改成边边框的颜色包子color了就可以了,别的我不改,我就改颜色是不是改成白色说性诶是不是白了啊,就黑了啊好这个也白了,那接下来是不是下面的内容啊,下面内容呢,我们待会呢,会以一个列表的方式,是不是存放我这些一个电影的信息啊好,那咱们呢,也去这个不RO里面也找找有没有相应的比较好用的一些组件,能够够我们使用的啊。
10:00
好,这里面呢,我们找啊,这里面有一系列的组件是不是啊,其中呢,有一个叫做。Card card是卡片的意思是不是,诶这个东西呢,就感觉是挺好用的,我们看一下啊,它呢有一系列,你看这个很长很长一串的啊,咱们就不要看了啊,他们有长的宽的,有高的,有五彩的等等,你可以自由选择,咱们呢就不搞什么花哨啊,咱们呢搞一点低调淳朴的啊,来一点诶这个啊就找他了,这个东西好处在哪呢?首先前面这一块部分呢,我可以放。海报图是不是,然后这个呢,是不是我那个标题啊,然后这是不是我的那个简介,然后呢,到时候再详细内容呢,可以往这里面加,然后下面呢,再放一些其他内容,我就用它啊比较呃,就由它来把它整体先复制一份呗,整体是不是复制下来再说啊复制下来然后放到哪呢。放到我的扣里面可以吧,放到扣里面我就写一份,到时候呢,我再去遍地生成,是不是我写一份,到时候遍地生成,所以说这看呢,我得我去掉两个,是不是只留一个啊,到时候就遍地生成一个电底信息,我是不是生成一个card的啊,就这样好,这里面呢,我们看一下有哪些要改的,首先这里是不是要放置一个我的电影的海报图案,好,那么咱们的模拟一下,先放一个,再说找到这里面我呢来到我的。
11:29
嗯,我这里面啥也没有了,我去我内容帮你找啊好,这里面呢,我找一张图片吧,找一张大一的图片,找一张这个36的吧。呃,给复制外联是不是复制外联,然后呢,CTRLV是不是这个地址就有了就有了啊好,这是不是我电影标题啊,比方说呢,咱们就取一个名字叫什么呢。啊,这叫小猪佩奇吗?小猪佩奇啊,哎,咱们记得有个小猪佩奇干嘛来着啊,过大年是吧?啊就是这个小猪佩奇过大年,然后下面是不是它的一个简介啊,它这个简介啊,啊,那我就模拟一下吧,我就不再写了啊小猪佩德奇诶,我可以把它粘过来,咱们找一下小猪佩奇过大年啊,看下有没有。
12:20
连我的郭大妮呢?再来一次啊,我的过大年呢,好了啊,因为小猪佩的情况年他好像没有预告片,是不是所说你看不到啊,咱们就换一个吧,比如说有五个姐姐啊,这么多姐姐的,我这我叫什么单身了啊,是不是这个单身的这个标题有点。也得到啊是不是。好,把这个东西放进来可以吧,我这么长的一个标题,好下面呢,这里面可以写什么呢?啊通常呢,我们可以写些这样的信息,比如说这个东西呢,是一天前啊更新的,一天前更新等等啊好,然后看一下啊这些东西呢,我们来看一下现在基本的样式,现在是长啥样,刷新一下页面。
13:08
好诶啊啊,因为那个海报图我们暂时没找到,没能找到对应的啊,所以说他是大头儿子啊好,然后这里面呢,是不是它的那个标题啊啊下面呢,是不是他的那个简介,好,通常简姐是不是应该前面该空个两个字比较好一点,是不是咱们来空两个字加上两个标签吧,呃,实体符是不是,呃,这个东西叫做NBSP是不是好给他来来上两个应该差不多了啊。啊,两个看下够不够刷新好像不太够,是不是再加两个。行,嗯,差不多了啊,还加吗。再加一个不行,好像差不多了,是不是好这真的差不多了啊,给他给他多加几个空格就好了,好然后呢,这里标题和这个内容是不是都有了,那如果你想标题更炫酷炫更炫酷一点的,你可以自己调了样式啊,这样式呢也很简单,调是不是就找到这个class就可以调了啊,比如说给它加个粗嘛,它好像不够不够醒目,是不是加粗怎么加呢?
14:21
呃,Wait是不是给个border啊,Board,诶是不是错了,好,然后呢,除了这些东西之外呢,我是不是还得放置一些我电影那些其他信息啊,像什么导演呀,什么评分啊,什么评等等一些信息,是不是也要加上去啊,好,那咱们呢,要加上这些信息的话呢,我也去看一看有没有相应的组件能够提供给我们使用的。也看一看啊好,这时候呢,我就会找这里面很多很多组件是不是,那我一个看一个看,那我们呢,就发现呢,这里面有一个东西叫做collaps,哎,这个东西呢,也不是collaps,应该是,呃,这个this group这个东西还是挺好用的啊,它就是一个这样列表,说白了能够让我呢有比较清晰的能够分别看来每一条信息啊,这个这个列表,这个U雅结构,那下面的有更加炫酷的啊,有这个彩色的是不是有。
15:18
下面还有五彩的是不是,那咱们呢,就不搞这么炫酷的吧,是不是太炫酷了啊,咱们呢,就整点低调一点的是不是就用最上面这个啊,最低调的来是不是CTRLC啊,然后CTRLV,诶不是这个应该是最上面这个就用它了啊,如果你想要它的话呢,也很简单,实际上就是在这上面加上一些不同的class,是不是它对应的样式就不一样啊,加上不同的class啊,这些呢,大家可以自行调,那咱们呢,给大家我这个东西应该放在哪呢?诶,这上面是不是我的标题和简介啊,那这下面是不是我的photo啊,哎,那我应该放在他们的哎中间是不是比较好,那这里呢,我就可以放,比方说什么啊,导演是谁谁是不是,然后还可以放啊,主演是不是,主演是谁谁到时候呢再想办法去显示,然后还有是评分啊,评分还有。
16:22
啊,片长啊,比如上映时间吧,上映时间是不是有,然后到时候自己来写,然后呢,还有。片长是不是啊,到时候影片的时长。还有什么呢?导演、主演屏风上映时间、片长还有没有?我们看一下还有没有其他的没加上去的东西啊。嗯,往这边来平方好像加了是不是。好,导演,诶,还是不是有类型啊,影片的类型是不是好?类型的话呢,放高一点吧,放就是在评分下面CTRLCCTRLV多加一份就可以了啊,加上个类型是不是好,这时候呢,我们看一下现在的结构长啥样啊,来刷新一下页面,刷新往下走,诶是不是在下面就会显示了啊,导演啊,主演评分啊,类型啊,摄影时间评啊等等东西,这些东西都会显示啊,好,这样的确能够实现啊,只不过呢。
17:25
太长了,是不是你会发现这真的是太长了,那么用户看一个呢,我我想看下面的呢,我要拉好久,是不是那不太好,那我们就把什么东西折叠一下呢。哎,我们把这一块东西折叠一下啊,通常碰到这三个东西呢,是用户比较喜欢看的,那这些东西详情呢,他可能不太关注,那我们把它折叠一下,是不是怎么折叠呢。哎,我们再去看一下有没有组结,是不是再看一下,哎,我们看来看去啊,看来看去发现诶有个CLA啊,既然这个东西可以省叠啊,好看一下它怎么折叠呢?来看啊,哎,这里有个例子啊,有个例子来点。
18:06
诶,是不是可以折叠啊,而且还挺好用的,是不是它能够打点一次打开再点一次是不是关闭啊,哎,就用这个啊,那咱们呢,看看它怎么用的,他呢,写了一个很复杂的案例啊,总而言之呢,是在看中使用的是不是,哎正好是咱们的使用场景,然后呢,我们找一个啊找一个。那找个什么呢?找个two吧。啊找c two它呢是一组啊,一组的话呢,我不能这么找,我得从这个d card开始放弃,然后呢,CTRLC啊CTRLC,然后呢,把这个东西呢,我们先放在这里,因为我待会是不是要把这个整体折起来啊,啊先把它放在这啊,然后看一下哪里需要修改呢,我本身是不是在看里面啊,所以说这个标签给去掉。然后呢,这里面呢,就加上一个这样东西,它呢有个head有个这样东东是不是啊,这个呢,就是待会我要点击的那个相当于按钮的一样东西是不是,然后呢,点击之后是不是显示这里面的内容啊,诶我们不是要显示这个,我们要显示下面这个列表,是不是把这个列表呢?哎放进来,放进来的时候呢,我们来看一下这里呢,我们改一改这个字叫什么呢。
19:18
点击查看电影详情是不是?好,点击查看电影详情,我们看一下现在会是什么样子。首先诶是不是收起来了,收起来了,当我点的时候呢,是不是就出来了,看就出来了,哎,但是呢,这两个风格好像有点不太搭,是不是,它是个高是个蓝色的,有下划线,咱们呢,要把这个蓝色和下划线去掉,是不是,而且并且呢,它还有一个感觉没有对齐的感觉,是不是,你看这两个是不是对齐了,那这个能缩进去了,感觉有点不太好,把它也对齐一下吧,好,那咱们要对齐一下的话呢,我呢先一个写,先把它这个颜色先改改,是不是来找一下啊,我呢是不是找到这个按钮啊啊鼻T跟这个不啊,这个可能一起找。
20:10
加个点。再加个点好给它一个什么呢?怎么去除下划线。为那怎么把改改颜色呢,就是看了改成看一下啊,看下这个字体什么颜色我就什么颜色吧。往下翻往下翻,诶这是不是他能看到了,那就用它的卡了得了啊,它什么颜色我就啥颜色,好一个这样的黑色啊好这样改完之后呢,我们看一下刷新一下,诶我这颜色是不是变回啊,颜色没问题了,接下来是缩进啊好要调整缩进的话呢,一定要检查一下样式,你要看一下它到底怎么设置的,你再去针对性的去解决是不是好,你会发现这个八的呢,哎,它这里设置什么呢。他是不是这个PA惹得祸啊,是不是,你看去除这个PA之后,好像就。
21:05
呃,有没有对齐呢?还差一点点是不是,那这个盆底呢,还不行再找吧,哎,其实这个东西已经对齐了,是不是H5是不是已经对齐了,那说来说去呢,肯定是因为这个里面的内容是不是引起的锅啊啊,肯定这个pen定啊pening还不够,它可能还有什么呢。啊,不是这个居中。也不是这个in block是什么属性呢?Border吗?也不是water啊,诶有个啥东西啊,它这里是不是就是因为这个东西是不是引起的啊,应该是什么东西引起的呢。啊,它本身就有一个基本的样式,因为它是个八痕按钮,是不是它本身就有一个基本的样式,就是说你如果不想要的话呢,啊,你还得自己往那边挪一挪,是不是你还得自己往那边挪一挪,那我们挪一挪吧,到时候呢,去设置一下啊,就找到这八台按钮,同样的是它是不是哎,你设置为零,然后呢,然往那边挪一个挪,再加上LA挪个多少呢。
22:18
他们这里面都用的IM单位啊,我们看一下是不是都用的IM单位,是不是都用的IM单位啊,那我们也用IM,大家负零点二五行不行,别太。太过了,是不是那负0.15。有没有过了还是没过,好像过了0.1。好像差不多了,是不是,诶差不多了啊,0.1好让它过去一点点就好了,好咱们的这个按钮是不是调好了,是不是点击它的时候就可以显示我们想要的东西啊,就会拉取了,好这个东西整好了,那剩下的东西是不是就想办法把这个结构进行整体的遍历啊,整体遍历就可以了啊整体遍历那在这呢,也给大家讲一下啊,这个clubs呢,需要注意的一个地方,它呢,这里其实写了三个三个这样的东西是不是,那待会呢,我们在页面上呢,就是有多少个card,有多少量数据,我对应的是不是就有多少个这样的啊。
23:19
那么它这里呢,注意啊,它这里呢,每一个呢,它专门绑定了一些ID,你看这里是不是c one什么head one是不是,然后它这里面呢,它对应的这个八按钮,那相应的什么啊,诶我这应该是one相关的,那我应该是找这个。哎,在哪呢,是不是在这里啊来class one什么东西它呢会这样啊,一个这个东西呢,就对应着一个这样东西,他们呢是成套的,你不能写,首先本能本身我们这ID属性就不能重复,对不对,就不能重复,所以说待会呢,我们这个值呢,是不是要发生变化,要发生变化,所以着我的便历呢,它每次生成的应该都不一样,那对应的呢,我一套,如果哎,这是一套,是不是我这一套的,所有的这些东西是不是都应该是一样的啊,都一概一样的,所以说待会呢,我们要想办法把这些东西给改一改啊,你看这些东西呢,对应的都是成套成套的,我们都得改一改啊。
24:16
啊,那这个呢,就是我们一个基本的一个页面呢,我们就搭建出来了啊,用一个boostrap,那我们搭建一个这样的页面啊。好,那待会呢,我们就去用EGS,想办法去把它给实现掉啊,用EGS好,在这呢,我们停下。
我来说两句