00:00
好,这样啊,我们来看一下,继续看一下首页里边的这些内容,看一下什么呢?就是首页下边这个内容没想好怎么写,我们可以先放在这里,好吧,嗯,先把这个查出来,就是说把我们现有的这个所有的商品啊都给他查出来,也不分什么分类了,就直接在这里排出来就可以了,先放心了吧,啊,就先做这个啊啊,那么首先的话呢,我们得需要在我们的。呃,Index这个四段函数当中啊,把这些商品都给他查出来啊,来找到我们这个位置,先不用管它啊,来这个位置来获取。首页中所有的图书书图书啊这个列表,那么所有图书列表。S等于我们的models.books点是吧,点直接说有什吧啊,这不分了哈,然后下面呢,把这个数据也分配出去,叫B,叫bos box。
01:02
冒号B行吧,然后呢,查出了以后,我们在这个页面当中。就给你找到这一列的内容,然后给他展示出来啊,这F搜一下在这个位置啊。我们改成精品图书,精品图书可以吧,然后呢,看一下这个位置都有什么啊。他这个图商品在哪儿啊。怎么这么多?一个两个。这怎么还有这么多,怎么。这样我先删掉多余的啊,因为他们都一样,来先看一下刷新。如果有多的刷新。为什么价格?
02:02
哎,什么意思。哦。我明明感觉他就是复制粘贴的呀。他就是复制了好多好吗?对吧。了。这么多,三个四个。五个。对吧,加这个不六个吗,六组。六组关键他这个数据也一样,咱没法看,但我先把它注册了好吧。嗯嗯,注释还好,那就先删了吧,好吧。删了之后这边的数据,我看这都是什么呀。
03:06
啊,没有清掉是吧,这个删除掉啊,CTRL加H它的这个中号啊,这个这个这个叫什么点星。点星问号全部都替换成空。是一个A链接这个位置。这一块内容单独调整一下啊,来复制rcc,然后到我们的AC代码格式化里边,找这个站工具来格式化一下。把这个内容再重新复制出来。过来。可以吧,要不然原来那那看着太费劲了。
04:06
精品图书。这怎么这么些图标啊?这是一本书吗?不能吗?It card。看不懂他这个结构啊,不太懂他这个结构什么意思。我再上一看看。刷新。是上下两台呀。上下两排。
05:17
看七。好,先写一个啊,写一个看看。把这个删掉,我试一下啊。不好调整。这样的话是。两排。200。两排我写的一那个在哪?我我我不写了个一吗。诶。怎么出来这么多?
06:10
我的个乖,他这个是什么布局的,这调整一下啊,因为这个模板我也是头一回用啊。没用过这个模板。看一下看一下。这是一本。就是一整本。这是一本。这竟然是克隆的八卦。你看没有找到吧。
07:05
那这个图书怎么放放?定钻石。精准。一组。看哪。邪了门了,兄弟,没这个数据,我靠。Active是这个。
08:05
ST。你们发现问题了吗?我操,我完全看不懂他这个布局。我们写的数据在这。怎么这之前和之后多了这么多的数据啊?这样找一下GS啊,肯定是用GS对这个内容做出控制了。看一下吧,这就麻烦了,去找my homes。妈的,连个注释也不写。
09:06
哦,不写注释,你这玩意儿。这应该是一个插件。没有找到这个元素。没有。
10:36
好来我们继续看一下哈,因为这个模板呢,我也是头一回用啊,而且是我从网上爬的,所以他这个模板不太熟,然后是这样的,由于这个他有几个方面的问题,第一个呢,就是我们那个数据库里的数据并不够,就很少对吧,所以呢,我刚才呢有添加了几条数据啊,你们回头数据库里呢,也都多添加几条数据啊,测到时候测的时候啊,好添加完这个数据以后呢,在这边呢,我又把这个他这个模板换了一个。
11:05
就嗯,没换别的,就是把它这个叫做呃,中间这一部分内容啊,换成了另外一种形式的,我们看一下哈,嗯,因为刚才找到了他的一个men.gs看一下啊man.GS啊看这。他这个table-active是不是有好几个呀,有两三个呢,对吧,两三个啊,也就是说他这个首页哈,不止一个,他有好几个首页啊,我们可以看一下哈,来打开那个之前给大家发的那个模板放放到这儿了吧。对吧,然后我们默认使用的是这个页面对吧?嗯,这个页面呢,它使用的是,诶不是这个。嗯,我们刚才找的是这个是吧,它是上下排版,上下排版呢就问题挺多的,你知道吧,上下排版的话问题很多,因为他这两个还放到一起,还不是,还不是这两个算一个模,算一个div位,算一个大div位,就我们到时候呢也不好编利,所以让我调整一下,换成一种这种格式的。
12:00
这种格式的式知道吧,就是单排的,明白我的意思吧,啊单排的单排的以后呢,我也没用这个,用的是哪个呢?用的是它这个叫index-二里边的这个页面中的这个内容啊,就用的这个。看到了啊,用到他这一个啊啊呃,用到这个以后呢,我我在这个页面里边查的数据还没变,还是那些我们把所有的图书都查出来啊,用这一块内容怎么做呢?就是把这个内容呢,复制一下,拷贝到我们当前的这个页面中,我们看一下在哪个位置啊,不是这样啊,在这在这就这一块内就这一块。明白了吧,就这块那个啊,那我们这样我把它删了啊,重新带大家写一下,好吧,是这个位置吧,啊是是啊,看一下怎么写啊,你看现在是空的啊,他现在是空的,我们看一下页面,嗯,刷新啊,那目前这个位置没有我们刚才想要的内容啊,没有的话呢,我们去找到INDEX2这个页面啊,然后看一下它的这一块内容是不是这一部分。啊,把它复制一下啊,复制一下改到我们这个页面里边来,然后它这个页面的布局呢,和之前那个非常类似非常类似啊,我们只需要稍微的调整一下就行了,上面这个轮动啊,上面这个我们改成叫精品图书吧,精品图书啊精品图书好,然后下面这个位置呢,开始折起来,其余的都删掉。
13:18
啊,你看他这个就利落很多啊,把这个删掉,删掉以后展开其中一个啊,原来它这里边儿是上下分布,现在这个里边呢,只有一个分布,对吧,那也就是说我们有多少突出,是不是就在这里便利多少次啊,对吧?所以这个时候怎么办呢?我们在这里for循环啊,去循环我们的那个数据for。哎,我们当前的这个叫做不可。不是吧?对吧,我们查出的数据是叫books是吗?看一下这边啊,对就叫啊好把这个数据在这里去编历。And for好,循环以后呢,把这个内容展开,开始把这些东西都替换掉就行了,比如说这个图片地址对吧,图片地址替换掉,画括号。
14:04
百分号,我们当前这个位置找这个元素的图片。啊,不能用follow是吧,是吧。这个图片地址怎么写?画画画I是不是当年的一个对象对吧?找他的那个叫book s,然后点first r SD是不是第一个第一个对象,但这个时候呢,只是一个对象,所以我们还找图片一子杠UR对吧?这找它的里面的第一张图片作为他的默认图片,明白我的意思吧,好,然后呢,下面这个位置,这个位置给他删掉就行了,这个什么百分之几干掉好,然后下面这个位置是他的那个几个星星知了吧,它下边每个书是不是有几个星啊,就是用的这个,你有几个星就写几个,我们暂时不用管它,所以不管了啊,然后这个位置放当前图书的这个叫什么,这个标题哈,i.I点什么呀,它的title。开走对吧,然后这个地方呢,换它的价格。
15:02
划括号,划括号二点对吧,然后把这个符号换掉,换成我们那个中文的。找到符号,选择这个位置找人民币这个好吧,嗯,那你你没有的话,你没有的话从这里找找数学单位。是数学单位对吧。设这位置数学单位下边这一排是不是有个人民币啊,点成它就可以了,好吧,可以吧,啊这搞定啊,这搞定之后下边这个有一个叫A的to,就加入购物车对吧,改成中了啊叫加入购物车。好,这基本上是改造了吧,来我们刷新一下页面看一下对不对啊可以吧,它是有很多图书对吧,然后它是一直循环着的,它是一个轮播啊,一直循环好了,那这个搞定以后,接下来下一步就是它这个地方是不是有个按钮啊,点击啊点击它出现了一张,呃,这个东西叫什么叫模态框,模态框在我们。呃,给大家推荐的那个框架里面有模态框这个GS,然后还有那个叫。
16:05
呃,用的这个叫UI里面也有模态框啊,就是一个按钮,点击之后你写好div,然后它默认是隐藏的,你点击的时候它的弹出来,来懂我的意思吧,啊就这样一个东西能理解吧,啊么大框啊对好了,那这个东西呢,就是他现在你不管点哪一个啊,它都是这个东西。那这个东西在哪呢?我们看一下啊,它的按钮在哪个位置哈,按钮在。这个位置啊,这个位置。这个位置是不是有个模态啊,有个模态框看到吧,啊,他是找这个模态框的,这个这个标签哪,那这个东西在哪呢?我们CTRLF搜一下啊,在本页面是没有的,本页面没有它在哪呢?他在我们继承的那个base页面里边,我们CTRL加F搜一下诶。F。看到吧,它是不是在这个位置有看到了吧,那不能说每个页面都用,或者说好几本书用同一个肯定不行,对吧?所以这个时候怎么办呢?这个内容也需要循环环,对吧?如果你想做,你就得做这个循环,如果你不想做,你把它删了就行,懂我意思吧吧啊那这个时候怎么办呢?我们把这个内容啊,复制一份拷贝一份,拷贝一份放哪呢?放到我们当前的这个index email,但注意我们是不能够把这个GS,把那个模态框放到这个里面的,就整个标签里面放到这里面,它有问题。
17:19
放进去你的页,那个页面的这个图书就不显示了,懂我意思吧,图书都不显示了啊,所以不能往这里放,所以怎么办呢?我选择的是紧挨着它放在这个位置。啊,放在这个位置位置,因为没也没有太大功夫去调整它啊,所以这个位置只能这样放,但是这样放有个问题,那你每个页面是不是依然用的同一个,为了不让他用同一个怎么办啦。每一个图书都循环一个for,哎,In我们的不啊不啊,不对吧,这是不是一本书一个了,这等于一本书一个啊,来and book and for,好,那么这个里边有一个最大的问题,就这个ID看了吧。
18:00
他点击这个按钮的时候啊,就在这个位置来打开看一下啊,这个位置点击这个按钮的时候,它是找到ID的。明白了吧,通过ID找到这本书,你如果ID都一样,那肯定也不行,对不对,所以这个时候怎么办呢。所以怎么办呢?来这个地方是不是每一个ID都不一样,怎么才能不一样呢?画括号,画括号以商品的ID作为它的。ID号看到了吧,但你不能纯写数字,你前面是不是还得有英文啊啊,还得还得有字符啊对,然后呢,我们这位置把它稍微改造一下啊,你这C复制一下,然后把我们下面这个也改成这种风。这是不是就对上了,它是一一对应的关系,能理解吧?啊好,那么对应完以后,接下来下一步它这里边都有什么东西呢?啊,主要就是有图片啊,有多图对吧?然后还有书的详细些,比如说呃,书的那个名称对吧,爱点爱点叫什么来。嗯,那个叫title是吧,还有书的价格,这里再写一遍是吧,画括号,画括号i.price CE对吧?然后这里边儿呢,有一个符号,我们那个符号。
19:06
嗯。人民币,我为什么敲人民币他出不来啊?他说。嗯。算了,嗯。什么什么玩意,我要分号,我要这个符号,对来来选择这个人民币这个单位符号啊好,这位这个完事以后,这里边是不是一个推荐啊,这个推荐挺长的啊,我们把它删掉。删掉,换成我们这本书的啊,推荐的那个内容容往这里放啊,呃,怎么写呢,写这个花括号,花括号哎,是当前这本书啊第二章它的推荐对吧?啊往这一放,然后这里边儿是不是还有。还有大小尺寸,颜色之类的,我们卖的数据没有这个内容啊,所以怎么办呢?你可以选择把它删掉,懂我意思吧,然后下边还有一个就是加入。对,加入购物车啊,然后这个标签我们如果不用的话。
20:01
我选择把它删了,好吧好吧,啊,那个标签没啥用啊,没啥用,好了,这是第一步是不搞定了,第一步搞定了,也就是说现在的话啊,来刷新看一下啊,你点击每一本书。最起码书名和内容都换掉了吧,对吧?啊书名的话内容都换掉了啊好下一步是什么图片换掉。懂我意思吧,图片忘掉啊,然后图片的话,由于我这里边儿的书呢,都是一张图片,所以呢,我我专门找了一本书,就是第二本书,第二本书我给他增加了两个图片。没有例子增加两个图片啊,其他都是一本哈啊都呃一本书一个图片,我专门找了一个,好,那么接下来怎么办呢?我们要把这个图片给它换掉,它这个图片在哪位置展示呢?你看这在那个。那来这个121234先调整一下啊,然后这个也调整一下,看到很便便好了好了,那你看啊,它上面是不是有一堆的图数啊,其中第一个第一个叫active,看到吗?就显示的啊,然后下面也是一堆小图,这一堆小图,然后其中第一个是I,那照样做的效果是上面的图片,上面的图片啊,上面的图片和下面的图片,它的ID是对应的哪个ID呢?这个每一个元素后面是不是有个ID啊啊,看到了吗吗?ID1234,当你点击这个ID的时候。
21:16
啊,当你点击这个元素的假设,你点击这个的时候啊,然后怎么办呢?那里边的图片就给你换成这个个,上面的图片就换掉,也就是说上边放了四张图片,下边放了四张图片,明白了吧?啊上面只显示第一张,下边呢是全部排列显示,然后你点哪一个上面就换哪一个。懂我例思吧,就通过这种方式来做的这个效果啊,好,那么接下来我们怎么办呢?把这本书的所有图片全部都编辑出来,放到这里,放到这个里头啊,来看一下怎么编列啊好,它这个active你不能都写,所以给它去掉,然后这里边呢,画括号,百分号,For,诶,For啊,然后嗯,那个叫BB,咱们的当前爱是不是当前的那本书要找他所有图片怎么办呢?点。
22:05
是不是所有收图对吧,收图变好,然后下面呢,画括号百分号and for and for好,然后这个位置换成我们刚才的那本啊那个什么这这个这个叫这本书的每一个图片对吧?所以这里是BB点杠your。对不对对不对,好同样的啊,同样的下边这个是一样的啊,所以下边的多余的也都给它删掉啊。多余的都删掉掉,都删掉以后这个I5也给它去掉哈,然后把上面这个循环在下边再套一个。这样的话,上下的图片是对应的对吧?好,然后把这个图片也给它,内容换掉CTRLC复制放到这里。搞定了吧,好,然后把ID是不是现在都一样,哎把ID也换掉,怎么换呢,就换当前。bb.id。是不是当前以当前图片的那个叫呃这个ID作为他的ID标记啊,看到了吗。
23:05
这一步是不是搞定了,这个是哈,上面是ID啊,它它原因那就这样,我们没动别的的对不对啊,这搞定以后啊,我先把我的GS删掉,你会看到它有一个问题啊,先把GS删掉来刷新一把刷新。看这里诶找一张图啊,因为这个就一个看到吧,他是诶它怎么这么显示的。看这个显示的好像不对是吧,显示的不对啊不对啊对。然后我下边那个其实有好几张图的,看是不是都不对了,都不对了啊不对了,这个时候怎么办呢?我们看一下哈,因为我们这里边没有给任何元素去增加它的那个叫什么。对,加上面也没有,下面也没有,其实正常来讲,应该给他这个元素的默认第一个。第一张大图和第一张小图都加上那个active就完事了了,懂我意思吧,那为了实现这个效果怎么办呢?我就写了一段GI代码,J代码啊,来大家看一下一下啊,到model-body是不是找到元素啊,找到所有的模带框,然后呢,意思是循环循环遍历,明白了吧,循环遍利找到当前类,就是当前的这一个模带框,它里边的元素中的第一个那个div,第一个div增加一个active,同时它下边的那个小图里边A链接也增加1ACTIVE。
24:19
能理解这个意思吧,就是找到这个模特过程中,因为模态框这个时候是不是便利的出来了很多个啊,每一个里面的那个div大图给它增加X,第一个啊,每一个里面的小图的第一个也增加X。能理解吧,但是这样写完之后呢,一开始并不好使,问题在哪儿呢?问题在于我之前写的这个位置是GS。GS有什么问题吗?GS他是放到了最后面对不对?GS放到最后面,但是呢,它当前的那个特效在这之前就已经生效了,明白了吧,所以还不能放到这儿,所以怎么办呢?我把它选择放到了,直接放到几块肉后面又写了一个GQ,然后在继承的时候重写了一个GQ就可以了。GQ懂我意思吧,也是把我们GS往前放,往前放让他先执行,再去执行他自己的那个效果,明白这意思吧,啊不然的话顺序有问题,是不是导致你那个GS运行有问题啊啊来这这个时候我们刷新看一下页面,点击打开。
25:17
这本书是两个图片,看到吗?是两个图片啊,后面这个图片是一样的了啊对,后面图片一样的,这就不画了啊对,然后呢,诶。这个怎么回事?这个怎么都跑上面去。我看一下别的。哎,怎么变了有问题啊啊,他哪里有问题,我刚刚测完。看看哪里有问题,模态ID换了不可死里边的原素。ID去掉。泪去掉。我好像没写错呀,他有什么问题啊。走起来啊。
26:02
哎,我刚测完没有问题啊,上面这个啊,看上面那个问题没有问题啊。加F5重新刷新一次。哦,吼,好,慢慢。加过来看一下。这个对,这个效果对。诶,这个效果为什么弹到上面去了直角。哎,怎么总感觉有个延迟似的。哎,这怎么回事?看一下啊,点击。这个好使了,点击,哎,这个也好,死了死了。
27:03
是不是刚才加载的哪有问题,我什么都没弄对吧,就换了一下幼儿地址是吧?哎,是不是幼儿地址的问题啊,来这里。因为的杠一都是杠一哈,对,然后我再点这个。是不是这个问题啊题啊。一。你妹子杠123看一下啊123。我拿的这个ID是当前。图片的ID。就是我们模框打开看一下。当前图片的ID。这个ID为什么是123?刚才我还没发现这个问题,他为什么是123难的这个ID不应该是这个值吧。
28:00
bb.id不就当前这本书图片里边的ID吗?对吧,那他也不能是一样的呀,他是123567啊,每一张应该都不一样啊。刷新。看到了刷新新看一下下。啊。一呢?怎么光显示个二一哪去了去了。不能吧?bb.d我没写错啊,这本书。的所有数据,这本书它对应的图片吗?图片里面的BB应该不一样啊。啊,而且怎么感觉打印的好像不太对是吧。
29:00
看一下啊,这里面。第三张图。这小图哪去了?哎呀,都跑到里面去了,你妹杠三。为什么是三呢?而且都加了。应该就一个才对。应该是就一个团队。是不是还是图片的问题啊。没这么多图片,非让我整那么多图片麻烦。我看下一妹子杠二。下边那个,诶怎么那是他自己加的应该。那对我们这个怎么有影响呢。他这个页面设计的也真是受够了。不好用,一点都不好用用。咱换也没时间了,没功夫换。我看一下哪里看有没有写错的地方啊,哎,我去他大爷的,刚才没事啊。
30:04
而且我写的这个没有问题啊啊井号杠元素,然后在一开始看一下啊,G q block g,找到那个猫模态里边的body,然后找元素下边的第一个增加元素。明明没有问题。就效果也实现了,唯独就是你画完图片以后,你如果不刷新,你点击其他图片,它就有问题,看到吧,对吧,就是这个位置。等会我看看,我看看哪里问,我把这个删了。现在是好的是吧,嗯,他会有个效果出来,但是对我们来讲没有什么太大影响。跳早了。哦,你不写这个,不写这个,这个谁就不管用是吧,这个。怎么才能让他?
31:03
嗯,我们想一下啊。怎么把那个井号那个东西去掉。那去掉的话,页面就会刷新了。为什么点击第一个的时候没有刷新新。等会啊,我好像多图的那个那个书籍点的时候好像没有问题,来点击这个个,比如说他现在是第一张吧,点击第二张,你看它上面是不是没有出现井号。但是我再点的时候,它是不是就出了。我不点了,这样我再给他添加几本书,他我就不信了,再再给那本书添加那个几个图片好吧,或者我随便添加几个好吧,找找找一本,找找找几个图片。哎呀,愁死我了。图片呢,图片呢,图片呢。算了,从那个网上下下下下这几个吧。
32:13
我只要图片啊,对,然后对不对账号也无所谓了,好吧,你就是加一下图片就行了啊。图片另存。图片另存。好了好了,这三张图片啊,图片测试一下啊。这三张是吧,来CTRLC复制啊,放到我们项目的这个。图片目录里边来啊CD,然后放到里边,然后这三张来CTRLC复制复制一下。这一个。这个地方选二。
33:01
第二个选二,第三个。小二,可以吧,就是第二本书这个图片它有很多,看到了吧,来复制一下啊。行了哈,来测试一下,看是不是图片多了就OK了啊,刷新一下下。这个点。第二个,第三个是没问题。嗯,就还是图片少的问题,对吧。对不对,好诶。他GS怎么又?就是你点完别的元素之后,这个元素。
34:03
不显示了。真是醉了,我操。太我想想啊。摩太空的关闭。在茅台关关闭的时候重新执行啊,执行一下我们这个戒指,也就是说,嗯,问题很简单,就是你第一个那个这个I给他去给他删了。虽然说你页面加载完第一次给他搞定了,但是往后他点完之后又没了。
35:07
又没了,所以就没显示,你显示怎么显示呢。第一次增加,然后之后调模态框,我看一下啊模态框。模态框。这东西有没有回调。有没有回调函数?啊,你只要点一个就好使。我想一想啊。想想有没有别的办法处理?
36:06
我把它换掉。就是让图片重复一个。看重重复一个行不行哈,不确定啊。不确定行不行不行。不行。重复不行。重复也不谢谢。重复就会变得有问题。重复就变得有问题。
37:02
重复也不行,对呀,就是关键就是我找不到他的那个事件,你不知道他什么时候掉的,他也没给你留回调。给灰掉。他第一次好使,第一次好使。之后说诶怎么回事。怎么回事?搞什么飞机啊?怎么四号是坏的?哎,你看。你看。有问题了是吧。
38:03
还是图片量,图片量少。要不干脆这样,我们不做多图了,就这位置不显示多图。费什么劲,就这位置就显示第一张图片。可以吧,不是在这个位置不做的图。别的地方,这不是香精页,香精页可以做图。费劲。就一张图片,你也不要给我点来刷新。点开就这一张行吗?费劲,我的天呐,接下来接下来那个加入购物车,或者说那个在这里。你看人家要想看列表,是不是在这里点击能跳到那个详情页页详情页你多图可以放到详情页,但我还不,我还没见他这个详情页呢。我还不知道他这个详情页是什么样的样的,知道吧,很麻烦JS写的他们那个。模板也不太好用。失败失败找到这个模板真失败失败行了行了,先这样吧,可以吧,这个这个位置就先这样样,本来我连详情连这个模态光都不想做的做。
39:08
后来我发现改了一下好使,我就把它写上了,结果你看又做了一遍,不好使,他还老有问题,行吧,你们要想做的可以尝试着用,行吧,不想做也没关系啊,OK吧啊,然后看一下我们那个手机端能不能兼容哈,既然他能他自己做了兼容啊,我们就尽量看一下他。有没有兼容效果?这个链接接。可以吧,还行是吧,对,然后稍微缩小一点七十五可以吧,还行是吧,嗯。但是你看这个效果有点问题。他得点击一下才能出来点击一下,而且你刷新的时候第一次好像并不管用,那第一次得单击一下,然后再进行处理才行,对吧?嗯,就这个稍微麻烦点啊好好,那这个那兼容性还可以啊,可以行,那就那这个就这么地可以吧,啊就是说这个页面呢,呃,这个页面的这个位置啊,这个位置好剩下的这个位置啊,就是你可以去写那个叫什么呢?咱们的单独分类的,这里我就不再花功夫写了,行吗?
40:13
你,你想写就写,不想写我也。也无所谓行吧,嗯,说白了,因为这个东西你让我自己写就。我就写完就完事了,对吧。要不然我带你们写,我还得写完它,然后再带你给你们讲一遍,但实际上也没啥了,就是无非就是查出来,然后放在这里,对吧,他要不好用,你们就换一个可以吧,啊这个模板反正给到大家了,我估计。模板啊,我给到你们也,你们也就是看到我怎么弄啊,你们自自己几乎也就没没用那个模板对吧吧,因为目前前台的整个页面,你们还没自己写一点东西呢。对吧。详情页要不留给你们?好了,那这个这个首页里边的这个内容就那么多可以吧,行们就讲这么多吧。
我来说两句