00:00
好,我把这个项目呢,我把它复制一份。我们把这个项目的购物车啊,购物车部分我们使用view加,咱们来改一改。好,我把它复制一份CTRLC。Could you wait。好了,那么这个就是称之为PROJECT29。然后呢,我写个cut。然后view。比如说好,就这样吧。稍等一下啊。OK。然后呢,我把它。这个文件把它重命名一下。OK。然后呢,我把它导入进来。找到model,点击它import。然后呢,把我们这个把它加入进来。OK。那行,嗯。
01:01
我们的。我们的library我看一下啊,Library这个好像没有是吧。我看了一下,好像没有。是不是啊?好像没有,怎么这个怎么会没有呢。我应该是从上一个上面一个项目复制过来的。啊,应该是这两个吧,那么这个呃,这个MYSM,好像我们后面好像后来做了一点小的调整的是吧。所以这个胶包还是先别用吧,我们就使用上面这个library这个胶包。也就是我们使用的是这个library,因为这个这里面是比较基础的嘛,这个肯定是要的,对吧,这三个加包肯定是要的啊,然后这个加包我们没有用,因为那个,呃,因为那个best do best do当中的那个叫叫类型的判断。对吧,另外还有一个就是我们PA中央控制器。中央控制器里面,呃,那个返回的值的判断。
02:00
我们要做一点小的修改。Best。打开我们应该应该有一个方法。叫is my type,这个方法我看一下这个,看一下这个版本里面有没有修改过。啊,也就这里面。在这里面。也就是也就是在这个当中。这个地方有大宝是吧,那说明这个best应该是问题不大。呃,另外一个就是我们的中央控制器。中央控制器里面,我们对于视图的处理在这个地方是吧。这段处理比较比较比较比较的简单,我们有redirect冒号,我们应该还应该有JA冒号是吧?然后我们还要去判断它是否是返回的是空。啊,没关系啊,我们就使用它的源代码级别的也没有问题的。好。我们把它打开。
03:01
所以我们这边使用的就是源代码级别的啊。我们再来验证,再来看一下啊,检查一下这个地方我们需要加一个,我记得当时好像是我倒针加包之前把这个追加上去的是吧。后来这个就把这个改好的这个给删掉了啊,你其实应该把源代码保留下来的。结果源代码没保留啊,就光倒了个胶包。行,我这个已经加进去了,呃,另外有一个呢,就是我们dispat这个地方。Dispat。稍等一下啊,有点卡。也就是在这个地方我们加了一个叫阶层冒号,对吧,其实这个地方我们还需要做个处理,就是说如果string有点is empty。我们method。如果你如果你给我返回的是浪,或者返回的是控制不串就表示没有吗?你没有这个返回值嘛,那么我就直接算了,就后面的就别执行了嘛。是吧,同学们就是这样。其他的应该应该这个问题不大啊。
04:01
我们早期我看一下啊,之前我们。Connection我看一下啊哦,这边这边还是写死的。其实我们最好最好把它写一个GDP。然后呢,让我们的文件去读是吧,同学们,而且我们呢,而且呢,我们把链接值加进来啊,当然这个我们在家包里面已经做过了啊,所以这边我就不重复了,就不再去修改了啊。那行。下面我要做的事情是什么呢?我要去把我们的购物车那个地方,我要去把它修改一下,我要把它改成view加的形式,也就是我们前后端分离的形式。那么,前后端分离的好处是什么呢?它能够使我们前端的工程师和后端的工程师啊,能够更专注于自己的领域。啊,要不然的话,其实我们有很多的企业,就是当分工并不明确的时候,因为人员比较少嘛。分工不明确的时候,那可能我们一个程序员要写前端,要写后端。
05:00
那往往往往我们会发现一个后盾的程序员。如果说你前端的工作也需要让他来写的话,那他这个工作效率是非常低的,因为你会发现他大量的时间全部用于调前端。啊,所以呢,我们这个前端分离啊。前后端分离是非常非常有必要的,对吧,这个叫专业的人做专业的事情嘛。啊,你如果让前端的工程师去写,去写后后端的那些内容的话,那这个也是非常非常困难的。啊,也是非常非常困难的。而且后端的后端的很多的这个业务逻辑也是非常复杂的。也是非常复杂的。更何况,你不仅要完成功能的实现,你还要考虑到性能的问题。对吧,你还要考虑到高并发的问题,你还考虑到分布式等等等等。啊,所以说后端也不是那么简单的事情。好,那这个时候呢,我们使用前后端分离,应该来说是势在必行。
06:00
我们就把购物车这个模块,咱们一起来看一看啊。好,首先呢,我先找到这个页面。我们先找到pages。好了。我这边有个index.html,这是我们的那个首页。在我们首页的右上方,我们有一个超链接,叫购物车是吧,同学们。好,我把这数字一把它去掉啊,这边也叫购物车。然后呢,我们这个购物车这个超链接呢,当我们点接的时候,点击这个超链接的时候,他会给我们卡的点度发请求。然后呢,这个卡的点度呢,就会去找到我们的CTRL了。打开找到我们cut controller,执行它里面的index,方法没错吧?因为你后面没有传递任何的operate嘛。所以他用的就是这个index方法嘛。那么调用这个index方法的时候,首先我们从线里面先去获取U字了。获取了之后,获取到user之后。我们就根据这个user取到这个购物车。取到购物车之后,我们就把购物车再重新设置到user里面去。
07:05
然后呢,把塞线里面所保存的car use子把它重新覆盖一下。最后我们再跳转到卡的页面。当然了,我们跳转的它的页面是经过time live进行帮我们做渲染的,是吧,同学们。因为我们的cut.htm页面上有大量的time的这种标签。哎,这是我们之前的思路,是这么来做的。那我刚刚说的这这这个过程大家应该没有问题吧。对吧,因为咱们已经写过了,那下面呢,我就需要把这个逻辑把它改一改。首先。首先。来,我们回到这个图当中。这是我们客户端。这是服务器端。好,那么第一次你听好了,首先用户当然看到的是index页面,他已经看到index页面一个超链接。那么当他点这个超链接,它会向服务器发请求,好,你注意了。现在他发请求,听好了,不是给CT发。他直接他会直接给我们的card.html发请求。
08:08
Cut。点HTL直接给卡点HTML发请求。那么cut.htl有这样的资源,行,我就把cut.htm页面返回给我们的客户端,或者叫响应给我们的客户端。那么浏览器就要去解释card的点HTM页面上的内容,只不过此时我们在card.htm页面上我需要有一段文字,我需要通过view加access。首先,第一步。我需要通过access发请求。我们发请求。请求购物车数据。这是第一步。第二步。第二步啊。通过。View在页面上展示购物车数据。这是我们需要做的两个步骤。
09:01
好。下面我们就一起来看一看,我们怎么来做呢?一定要听懂我说的这个内容,首先呢发请求,我们请求的是卡点HTL。然后看点里面这页面有没有,有有的话就响应给我们的客户端。然后浏览器在解析cut.htm页面的时候,它能够解析到其中的JS代码,就是我们的view加X代码。所以我们的,我们要通过access去发一个请求吧,要去请求购物车的数据。好,我们开始来改造。因此这个超链接注意了,这个超链接我要把它改掉。这个超链接我需要把它改成它只请求card.html。那么我这边怎么来修改呢,同学们。我这边应该请求配点度。是不是?然后operate等于page是不是?
10:02
然后再来page,等于cut-cut,本来我以前是这么来写的。是吧,这样的话,它就它就会经过time的渲染嘛,直接去找到这个car的点HT页面嘛。那么现在我们应该怎么做呢?现在我们应该怎么来做呢?帮我想一想。现在我们应该怎么来写?当然了,我现在我这么去这么去发请求是没有问题的。我就给配置点都发请求,然后给我跳转到card.ht页面嘛,没有问题,关键就在于我的card.htl下一步我要怎么去写。行,我暂时先这样,暂时先这样。然后呢,我找到cut。
11:01
Cut点秒经过我刚才这个窗链接,经过这个超链接那发请求,虽然说你经过time lift的渲染,无所谓了,无所谓啊,没有关系的,反正一会儿我会把cut点面页面上的这个time Le的这个标签全部都改掉。所以你即使经过timeni的渲染,但其实里面没有time标签的内容也无所谓是吧?同学们他就帮你做个跳转就可以了啊。所以说当我点这个超链接。哎,就比方说我发了请求,要请求这页面,然后这页面就能响应给我,因此我们就跑到这页面上去了。好,下面我要开始改造这个页面。刚才我说了,当这个页面浏览器解析其中代码的时候,它要经过两个步骤。第一个步骤是。请求要请求购物车的数据,行,我们我们一起来看一看怎么做啊。好,这边这边使用的是time Le的这些标签无所谓啊,留着没有关系的,这边也没问题。再往下走,呃,再往下这个地方是什么。
12:04
这个是不是我购物车里面的内容啊,我这个购物车内容以前是怎么做的呢?以前是我发个请求过来的时候,他要经过人家这个方法诶。经过这个方法,要给我把数据,把数据获取到,然后重新设置到筛选里面去,然后我们time标签再从筛选里面把这些数据再再再再解析出来。哎,我们是这么来做的,现在不是这样的了,同学们。啊,现在我们就不是这样的了。我们view,首先我在这个div。这个点位。就是购物车的这个view啊,在这个上面我来写个ID。比如说我就写个div。Cut。或者叫卡的div都可以啊。好,就这样吧。我们view加access第一步我得让我们的view和某一个节点进行绑定嘛。表示在当前这个节点内部,我们的view是有效的CTRLC。
13:00
所以我找到这个JS文件。啊,我们就使用这个JS文件。钉进去,好,我就在这边写一下。window.onload等于function,这是我们第一步。好,然后在这个内部。V2V等于6VIEW,我们是不是这么写的?然后大括号再挪到中间,我们再写个E,好,刚才的井号他拿进来吧,这第一步第二步data有哪些内容呢?不知道,先写着吧。啊,暂时先把它先写在这,就这样的。再来。再来。呃,下面一步我要怎么去做呢?下一步我要怎么去做呢?好。我们可以再写个叫before。Before mount,这是不是指的在数据渲染之前啊?
14:00
对吧,在数据加载之前。来,我们可以让他去执行一些方法。啊,这也是没有问题的,那么我们可以在这边去定义一个方法。Method。卖还能卖手子?一个S吧,有的啊,OK,好。比如说我在这边第一个方法。嗯,这个方法比如说我就称之为叫get cut。我就称叫get cut。好,这是我定义了一个方法。那么这个方法内部我是不是可以去发的请求啊。哎,就这样子,我去发一个Excel的请求。点赞。没问题吧,点开我们是这么写的吧。然后这个开启当中我们可以写个function,这没问题,然后在当中我们也可以写个function,没问题吧,好,我们再回到access里面,这里面我们怎么写啊。好。第一,我们得需要你以什么样的方式发送。
15:02
第二你的URL是什么?第三你是不是需要传参数是吧,同学们,哎,我们是这么去写的。好,把我们之前代码拿过来,如果你害怕写错的话,你把之前的代码拿过来,我们找一下在这。找到这儿随便打开一个,第十个应该差不多,好我们看一下。第一个。Access。然后呢,Method?表示你要发送的请求方式。第二个12L你给谁发请求?第三个你是是否需要传参数,要不你以per传过去,要不以data传过去,如果以pers传过去,那么它是不是在请求参数里面就能获取到。如果你date形式发过去,它是不是有个Jason的格式发过去啊,那么我们的服务器端是不是要通过request.get read,有印象不?OK,这两种方式都可以。所以呢,我们当前。当前呢,我这个地方。我就以post方式进行发送。然后U2L我把它拷过来,这个data我就不要了,我直接写成就行了,好把它粘过来,Method是post。
16:07
121121,比如说我们给卡的点度发请求。就这样的,然后pers。就是我们所需要的参数。应该是在第九个吧,我看一下啊第九个。在这啊,有的是吧,就这样子。再来。那么我们有什么样的参数要带过去呢?暂时好像没有。同学们。啊,当我们点这个超链接的时候,稍等一下啊。也就是这个窗连接。当我们点这个超链接的时候,我们要请求的是cut的点HTL,因此我们就到card.ht页面页面上去了,然后到这个页面上去的时候呢,诶我们要通过access去发个请求,那么发请求的时候要不要参数呢?我认为。当前这个场景下是不需要的,因为呢,我们的cut controller。
17:00
我们的cut controller,我们当时在写index方法的时候,我们只需要一个筛选就可以了。啊,我们没有需要其他的参数,那那行吧,那这边我们可以不带参数。因此我把这个把它去掉。就表示他给卡点度发请求再来,同学们再来。发请求之后,我们再来想一想,我们之前没有需要参数的时候,他用的是index方法。当然,现在你也可以直接调index,那么我就把这index改掉了。还有一种方法是这个方法呢,我就不动它了,我重新再写个方法,比如说我写个骄。Public。子俊。比如说我叫get叫或者叫cut in吧啊。叫cut in,行吧,同学们,我就写成这个方法好。那当然,如果说我们写出这个方法名不是index方法的话,那你的名字总得要带过去吧?因此我们把这个再重新再拿回来,那这里面就一个参数。是吧?啊,是不是就一个参数啊。
18:02
啊卡的粉要知道为什么需要加的参数行吗?同学们本来是不需要的行,现在我已经把它放在这了。那行啊,这个方法里面怎么做呢?我们不写了,直接拷贝啊,跑到这边来看。C。这样我是不是就能得到这个cut了?没错吧?这样我就得到cut了。呃,得到card之后,我要把card返回给别人。我需要把card返回给别人。我怎么返回给别人呢?是不是我们得需要他呀?New。然后点他是不是一个叫to杰森啊,这个方法我们可以把我们的cut把它放进去是吧,同学们好,斯俊。Car的Json SDR,那么我们把这个值return一下JS j son。再加上card阶层,STL。可不可以?
19:00
哎,是不是这番话我就把它写完了?那么写完之后,我们再回到这个JS文件里面,我们这边发的这个X的请求,当我们成功的时候,是不是在这个Z里面能够响应啊。那么我们就要来看一下这个叫cons.log,然后value.data是不是啊,同学们,我们看一下这个data的值到底是啥?下面我们来把它编一下。点它稍等啊,他还没有artifect点它点它。找到artifact就是他。好,我们找最后一个就是它。OK。再点进来点了它点加号。29,没错。把它删掉。好,29配置甜度好,这些都没问题,我们先来尝试一下。现在我们需要来测试一下啊,当我们点超链接,点超链接之后,我们能看到这个卡的这个这个这个card的DH里面页面。
20:05
然后呢,他会去给我加载这个JS文件。然后呢,在这个JS文件里面又有window.on。那么window点哎,它又会有这个方法,那么其中我写了一个。叫get cut方法。那么这个get get cut方法我需要在这里面进行调用。This。Get cut。看不到吗?哦,不好意思,我直接写在这了是吧,这里面我还是需要把它封装成一个方法是吧。嗯,还是需要封装成一个方法。还是需要把它封装成一个方法。那行吧,我这边就叫get cut吧。好,然后在这里面我要去调用一下this.get a cut。就这样的,或者我用vuee啊。Get,我试试啊。稍等一下啊,我把这两个方法名改成不一样的。
21:02
下面一个方法叫get cut,这个叫get cut in粉。那这样的话,我用this。This year。Get。稍等啊,点get cut就是它OK。我们来试试看啊,试试看。呃,其他的我们先不管,我们先看一下他能不能给我发一个X的请求是吧,同学们先第一步能够发X的请求,然后能C看看能不能响应。第二步,我们要测试一下他给我们获取了数据,最后得到的监测数据到底对不对。所以呢,我们要再回到这个这里面去看一下它里面的值。所以我们分成三步,第一步看能不能发请求,第二步看一下伏击的能不能正确的能够查询到,第三步看一下这边点data得到的数据格式是什么样的。
22:15
嗯,怎么感觉好像有问题啊。我感觉有点问题啊。他刚刚这个。爆红了一下,然后就停止响应了。稍等一下啊,我们找到out,打开artifect,全部删掉。Production全部删掉。然后重新再来启动。他怎么总是报best,这边有问题啊?
23:03
奇了怪了。29稍等一下我看看啊。29 29当中的这个best,这个会有什么问题呢?这边我们没没有动过吧。我们应该没有动过啊,稍等一下,选中它,点一下build build model。应该没有问题啊。应该是没有问题的。编译通过了。然后build。
24:00
Build artifact29、点击rebuild。好,这应该也是没有问题的。没问题啊。然后。再或者通开头看一眼啊,这边没问题。这里面29删掉,重新再加一个。再回到这边来。点一下应用。再点OK,再启动。Are able to open debug pot。奇了怪了,怎么会一下子报这个仇呢?
我来说两句