00:01
好,然后今天呢,咱们要讲的就是这个新的一个知识点了,View JS view router啊,以及view UI这样的三个内容,那么我们先来说一下VOJS啊VOJS呢,它是呃,在咱们前面已经学好了,呃,之前的这个javascript的一些基础啊。功能的一个基础上呢,又进一步对我们的应用程序呢,做一个页面渲染,那么我们先把昨天的后台应用程序呢,给它启动一下,看一看这个页面渲染呢,能够帮助我们完成一个什么样的功能。好,那么现在呢,我的应用程序呢,已经在80080端口启动起来了啊,这个是后台了哈,然后接下来呢,我们再启动前端。
01:01
前端的话呢,我们来看一下昨天我们写的。最后的这个X啊,这里面的例子X,这里面的例子有一定大小是T,我们呢,向我们的后端接口呢,发起了这样的请求,对不对啊好,然后接下来呢,我们右键运行。好,大家看我们现在的前端的这样的一个地址呢,是5500,而我们后端的这样的一个地址呢,是8080,也就是说现在其实就是一个非常明显的前后端分离开发啊前端。服务器和后端服务器,它是完全分离的。好,然后呢,接下来呢,我们昨天呢,做了一个功能呢,就是在我们的后端服务器上开发了一个接口叫做user list,它呢可以获取到我们后端数据库当中的所有的用户列表,然后呢,在前端这面,我们是通过。通过这个来向8080这台服务器发起请求,并且呢。
02:04
访问我们的user list这个接口,然后呢,我们拿到的数据。拿到哪去了呢?是不是拿到这个response里面了,好,拿到response里面之后,我们可以在哪看到呢?我们可以在这个位置看到,选F12一下。然后呢,我们来看一下。我们的network啊,再刷新一下,好,Network里面呢,就有了我们昨天发送的这个请求了,那么我们可以在response这个地方看到,也就是说后台的数据呢,已经被成功的捕获到前台了,并且呢,在preview这个地方呢,我们可以去查看这个里面的一些细节的信息,好那么后台的数据既然已经成功的被响应到我们的前端了啊,那么我们怎么样才能将我们的这个前端的数据展示在我们的页面当中呢?这个就是我们接下来要学习的内容了,那么展示数据这一部分的内容呢,实际上我们之前啊,大家应该是有一些经验的,但是呢,是非前后端分离开发的情况啊,那我们展示数据呢,用的都是一些模板语言,比如说JSP。
03:07
当中的啊,GSTL对不对啊,比如说我们的啊,Ell本来是啊,就是我们之前学的都是那种GGSP的,对吧?啊,然后有什么GSTL有ell表达式,当然这些东西是不是都是基于我们的Java环境的呀,它都要运行在后端服务器上,都要运行在他们看的服务器上,那么大家后面在学习这个spring的时候呢,实际上也接触到了time live啊这样的一个模板语言,然后那个模板语言呢,实际上也是要基于Java运行环境的啊,总之脱离Java运行环境,我们之前所接触的一些模板语言呢,你都是没有办法运行的,而现在呢,我们前端程序是独立的一个服务,零零的服务器,它是完全独立于我们的Java环境的,所以我们呢,就得用一些前端的方式来展示这个数据,那么前端方式展示这个数据呢,有非常多的。呃,一。
04:08
些技术啊,或者是说有非常多的一些框架能供我们使用,那么这个地方呢,我们使用现在前端比较主流的VIGS来帮助我们呢,进行页面的渲染工作,好,那么VJS呢,它的官方网站。就这两个哈,嗯,大家可以去看一看他的官方网站。它的作者呢,是一个。华裔的一个工程师啊,所以说呢,对于我们来说。他的这个关于view的文档啊什么的,对于我们来说还是比较友好的,嗯。因为他有这个。这个非常完善的中文文档,然后接下来呢,呃,这个里面呢。
05:01
有一个叫做起步的这样的一个菜单,然后我们点进去,点进去之后呢,如果大家想深入详细学习的话,那么可以在这个整个的这个起步的这样的一个在线的教程当中呢,对没有进行更深入更详细的学习,包括这里面它还有这个视频是吧,就每一个部分的内容都有一个小小视频配套啊,所以说这个整个的这个维度的官方网站做的还是。比较不错的,那么在课堂上呢,我们就啊不去按照他的这个官方文档的这个逻辑架构去讲了,因为这里面涉及到的内容其实也特别多,我们一两节课的时间呢,肯定是不能够涉及到方方面面的,那我们学什么,我们学我们项目当中要用到的内容啊,也就是说我们要学那个20%的内容,而这20%的内容呢,是在我们项目开发的过程当中,几乎是99%。涉及到的啊,那1%我们项目当中啊,如果遇到了的话呢,咱们再看啊,所以说对于我们后端工程师来说的话呢,其实掌握整个知识体系当中的20%已经完全可以应付我们啊平时工作当中的一些全量开发了啊,所以呢,咱们就来看看都有哪些呢,是重点啊好,那么第一个呢,就是我们首先呢要了解一下这个。
06:21
View它为什么叫渐进式框架,那么这个里面呢,有一个新的名词叫渐进式,所谓的渐进式呢,就是我们啊,可以在使用没有核心功能的基础上呢,就完成绝大部分功能,然后如果你想在呃有一些更高级的这个应用的话呢,那么可以再加它的一个扩展包,比如说后面我们说的这个VIVO root,实际上呢,就是在VIVO的基础上啊,在VIVO官官方在这个VIVO GS的基础上又出了一个关于路由的这样的一个扩展,所以呢,这个其实就是渐进式框架的一个扩展部分啊,这个view root啊,那viewvo GS呢,就是我们呃,View有这个框架的一个核心部分了,好,然后那接下来呢,我们再来看一下,它本身呢,是体积非常小的,因为它是渐进式的嘛,所以呢,它的核心内容体积就非常小啊,但是虽然它的体积小,但它的功能就很强大,那运行效率呢也比较高,相对于我们的这个接块。
07:21
会去啊,查找DOM,操作DOM啊,这样的一个设计理念呢,View呢,它是没有对我们真正的HTL文件当中的盗M进行操作的,那它呢是基于一个内存当中的虚拟到,所以说呢,它的执行效率更高啊,这个大家呢有一个了解啊,要好,然后接下来呢,它还有这个双向数据绑定的功能,让我们在开发的时候呢,会着重于业务逻辑,那这一块呢,是没有当中的非常大的一个特色,在后面呢,我们会重点的去说它啊,到底什么叫做双向数据绑定,好那这块就是对view的一个简单的介绍,接下来呢,我们就写一个的应用程序啊,然后呢,来看一看view功能它到底强大在什么地方。
我来说两句