00:00
啊。那我们先把,嗯,先看一下我们昨天讲的东西,再去看一下这个测试题啊。啊,上课呢,是我们。做项目的第一天。首先第一个呢,我们讲的是关于项目开发的一个准备工作,这个准备工作有几个重要点啊,第一个呢,叫关于项目的描述,大家需要能够去跟面试官能够去描述你的项目。还记得从哪几个方面去说吗?首先大概说一下你的项目是一个什么样的项目,比如说你需要是哪方面的做什么的,对吧?嗯,是一个前台分离的,呃,SPA应用,对不啊,我们当前不是一个外卖的嘛,对吧?那下面还有什么可以说的。啊,我们那个项目呢,到底有哪些功能模块是吧,现在还有什么可以说的。
01:03
就是我们的项目用的主要用到哪些,呃,主要的技术对不对,嗯,最后一个可以说什么,我们项目的一个开发模式,还其实三个特点吧。啊,模块化组件化和什么工程化。其实你像这么去描述的话,其实就有很多东西,他很多点他可以去问啊,这样的话呢,就不会泄露他准备的问题,就他如果都想去问你,你涉及到的一些点的话,其实他就很有可能就不太问他准备的一些问题,或者问的少一些。这样对你来说是不是也有利一点,对吧?啊,再一个你的这个描述里面啊,是有一些点是他是觉得是有深度的啊。第二个大的方面叫技术选型。啊,或者说你的这个项目的技术架构是什么。
02:03
其实是类似的一个问题,那其实就是要告诉你,呃,告诉面试官啊,你这个当前这个项目主要用到了哪些技术。啊,因为你用的技术比较多啊,这个技设计的技术主要是用到哪些库啊,用哪些工具啊什么的,对吧。那你不能就是每一个工具一个一个的去列啊,这样不太好,你先有一个,我把所有相关的库和工具做一个分类,就我有哪些方面可以说对吧?那第一个方面,因为我是一个前后台分类项目,首先是我的前台应用的一些,嗯,数据展现呢,交互啊,对吧,这些方面啊,我们是我们最重要的一个方面,也就是我们用的。是不是view以及它相关的一些插件呢?呃,View以及它相关的插件,我们有一个统一的名称叫view技术站,或者叫全家桶啊。
03:01
别人跟你交流的时候,你一定要能听懂,他是在问说什么对不对?啊,这里面啊,一旦用上view,必然是组件化开发的吧。对吧,这个要知道,嗯,那说完嗯,第一个方面以后,下面我下一个方面说什么。交互啊,前后台交互我们该怎么做对不对,那前后台交互就设了东西影响前后台交互发价格请求是不是用什么发呢?是不是我们是不是也有专门的呃加请求的库啊,还有什么。还有什还有什么东西,就是我说过了,就是这个这个点说库说完了以后还说什么呢?还有什么可以说的呢。呃,我们有一个接口的测试,或者测试接口是吧?OK,还有一个我们涉及到后面涉及到模拟数据对不对啊Mo JS啊,测试接口呢,我们可以用post是吧。
04:05
啊,而且我们的那个呃将请求的编码方式啊,除了用promise嗯还及promise用啊这都是可以说的呀,这些特点对不对。不是说去说一下你的一些项目里面所用的一些重要技术吗?这都可以说。因为think wait相当于是ES7里面的内容。对吧,那也能说明你的项目的编码啊,用的语法是比较先进的,是比较比较流行的,比较新的一些语法。好,那钱回来说了,下面说什么?还记得我们那个编码的特点,不有不有几个三个特点了吗?咱才说了一个对不对。啊,我们要模块编码需要用到什么ES6的语法对不对,我们用到ES6的模块是吧?啊,那既然用到E6,必然会用到什么Bible对不对?那除了啊组件化模还有一个什么工程化,那工程化就涉及到是不是项目构建呢对不对?那项目构建我们用的什么外派,那我们要创建工程化的项目用什么脚手架对不对?我们工程化的项目一般都会对你的下面的代码进行检查,用的什么ES Li。
05:32
对呀,这些都可以说啊,对吧。那啊后面呢,我们还有一个我们的那个CS预变器用的谁s style对不对,用的还有当然还有一些其他的一些库啊,这个就不可说可不说了。嗯,这些要知道啊,下面一个API接口啊,需要对它以及它相关的一些概念有理解,首先啊,这API接口是什么东西呢?
06:06
一那也就说一个API接口是指前后台交互的接口吧,那前后台交互接口到底是个什么东西呢?什么东西首先得告诉他,这里面包含三个方面的信息,也就是说一个接口是三个信息的集合,对吧?啊,应该说四个对不对,四个方面的信息哪四个啊,Ul请求方式,请求参数的格式,以及什么响应数据的格式,前三个是关于请求的,后一个是关于响应的,对不对啊,也就是说你一个接口应该告诉我,我怎么样发请求,怎么样去解析响应数据,对吧?啊。啊,有对他有了一个理解,下面有一个概念叫接口文档,就是我项目里面可能好一些接口,对吧,还记得我们那个项目有几个接口来着,十个接口,那也就是说我的文档里面是不是应该有这十个接口的所有的信息。
07:09
对不对啊,那后面呢,还有一些类似的一些概念,叫什么测接口调接口啊,对接口其实都是同样一个概念啊,需要去测两个方面,第一个通不通对吧,通了以后再看是不是跟文档一致。那人说,老师跟文档要不一致了。对吧。就很有可能需要去改文档,因为接口不一致,很有可能是因为接口改了以后,后台就改以后文档没有更新,对吧,你说老师有没有可能性啊,是那个接口啊,接口没问题,后台有问题。这也不是说完全没有可能,只是说这种可能性更小一些,对吧?啊,这个要知道啊,上次我们不就改过接口文档嘛,对不对。这个要知道啊,下一个你从项目中能学到一些什么啊,有几个方面,第一个方面呢,你可以去学到一些开发的一些方式啊,一些模式啊,再一个呢,会涉及到很多的一些插件呢,很多的一些库,对不对啊,以及我们啊在布局上面啊,样式布局上面的一些相关的一些东西。
08:21
这个呢,到时候大学的过程中,自己可以回过头来再去看那个什么东西,我就不再一个一个去说了。好,有了这个准备工作以后,我们的下一步是干嘛,是不是开启项目的开发,要开启项目的开发,首先第一步干嘛回去。开启项目开发,首先第一步你不得创建项目呀,对不对,把项目是不是创建出来,用什么脚手架。那创建项目以后,记得要去安装所有依赖,或者是指定的依赖,对不对啊,再一个我们要有两种运行的方式啊,一种是叫开环运行,一种叫什么生产环境打包运行啊,这里面强调一个必须要先打包,也就打包它运行了吗?没有。
09:11
啊,这个打包指的是生成打包文件对不对?你说我的开环运行有没有打包,有只是在哪打包内存。啊,没有生成本地的打包文件而已,你说老师你怎么知道在内层打包了呢?你在想啊,你通过浏览器访问了,而且你浏览器也得到了打包文件,对不对。不然的话要怎么运行呢?但是你得看本地有生产文件吗。没有,那你说在那只能在内存里面了,这必然的。能不能?行。下面呢,我们啊,把项目准备好了以后,下一步我们就是要去搭建项目的整体界面结构,以就是这个。我们整个界面这种类似的界面是非常常见的,对吧,而且呢,大家啊后面啊,自己做实战的时候也会写这样类似的一个结构啊,其实基本上差不多很多移动端的项目都这样嘛,对吧,那好啦。
10:18
那这样的话呢,我们需要去做什么呢?首先啊,啊,我们这里面涉及到大项目,首先我们这里面用到的样式,用的style,这个理解和使用,这个应该是没什么问题啊什么这有几个方面啊几个话。需要与谁一致啊?这里说的结构化是一是一个什么情况?啊,是不是有有嵌套的层次结构啊,HTM层次结构要一致对不对啊,这个是有可以定义变量,可以定义函数或者mix啊混合这个其实用的挺多的啊好,那这里面呢,我们要去搭整个项目结构,就需要涉及到是不是有路由啊。
11:00
对吧,因为我们这里面是不是有table切换呢。我跟你说table切换啊,如果我不用路由怎么做?显示隐藏对啊,就是譬如说这里面我就四个div对吧,四个大的div来显示页面内容啊,我点不同的table选项呢,去对div呢进行显示隐藏。有人说老师用显示隐藏不就可以吗?嗯,这个地方会你要这你要那么做的,会导致你整个页面非常非常大,你的那就不能体现出我们组件化编码懂不懂,我们组件化维码的思想,是不是最新想法,就是我的界面非常复杂对不对?那我是不是要把它拆解出来?开始啊,第一次拆是拆路由组件。拆完路由组件以后,再在路由组件内部就可能去拆什么。一般的主见。这个能懂吧,啊,你看我们的这个首页的路由组件,它是不是会有几个一半的组件来的,对吧,譬如我们头部,譬如说我们的这个商家列表。
12:10
能理解吧,嗯。好,这个地方呢,就用到一个库叫root view-root啊,其实它跟我们,呃,提供了这么两个变量吧,或两个属性,是不是可以访问啊,一个是多root,一个是什么do fruit,所有的组件对象都有,就是啊,不仅是路由组件,所有组件对象都可以访问。你没发现我们的AP也在访问吗?大家看一下我们的PA是路由主页吗?是啊,是不是啊,你怎么知道他不是的啊,你看我们用的时候,我写成是这样,相当于写成标签的形式,对不对,能不懂,我有去映射路由吗?没有,所以它根本就不是,但是呢,我们能不能访问这个多少?
13:05
各位可以说明这一个属性是给所有组件是不是都加上了啊,这个需要去啊知道一下啊,其实这种稿是用起来是比较轻松的啊。啊,这里面一定要把这两个属性啊区别开来,一个代表了什么。路由器一个代表了什么?当前路由,那当前路由相当于是个容器啊。数据容器嘛,存储的一些信息嘛,对不对,而路由器主要做的事情是不是能够去控制路由进行跳转呢,对吧,那除了这两个还提供了什么,还记得不。还提供什么,是不是有几个组件来着,还记得吗?有几个组件标签,什么root w这个我们用过了吧,还有什么啊,Root-link是还一个什么keep。
14:04
能懂不啊,这个要能懂啊,就是这么一个事情啊,其实语法就这么些,前面我其实我们也讲过啊,这一个是大家需要去掌握的技巧。啊,不是像这种技术性的啊,它完全是技巧性的,就是你要学会如何来对项目中的路由进行拆分,这是大家必须要掌握的一个能力,也是大家一开启项目就要涉及到的一个问题。如果你不会拆,那你做不下去。其实拆起来很简单,你就要确定啊,哪哪里有一些,比如说哪里有些table切换。如果看到这种,那十有八九是要有路由了,对不对,这个能懂不。能看到吧,呃,还有一些路由的链接,比如像这种。因为你要知道啊,你要知道我们的应用里面是一整个就是一个页面。对不对,所以这必然是个路由跳转,能不能。
15:01
能懂吧,啊,只是我们要去确定一个东西,确定什么呢?确定它到底是一个呃,同级的路由还是一个嵌套路由。你觉得这两个界面是父子关系还是兄弟关系?能不能?那如何确定是兄弟关系还是父子关系啊?如果是父子关系是个什么样的?一个感觉。就是我下一个路由是在当前这个路由的取物界面显示的。对吧,但这个是吗?这明显他不是那么回事啊。这个能不懂啊,这个能懂,好这是这个。呃,后面呢,我们还是拆解了一个底部的一个导航的组件,这是我们的foot together,就是我们底部的,这是一个一般组件吧,这是个一般组件,也就是说我们一上来是不对我们的整个应用的界面进行了拆解,我们整个应用界面不就是我的APP吗?这个能确定吗?那APP它一上来这个里面是不是有一个底部导航啊?
16:11
导航,那必然会涉及到一些好几个路由,对不对,而且这里面我们导航有几个选项,四个,而在每一个是不是对应对应一个不同的路由组件。分,那这个我们整个就可以把它啊,抽取成一个together这样一个底部导航的组件,而上面的部分就是什么的部分。是路由组件的部分,那这里面我们一共设计了这么四个m set啊,设计word以及profile。啊,是这么来的,大家一定要去学会啊,去处理啊。啊。做完整个搭建以后呢,那后面呢,我们去呃,抽取了一个,抽取了一个进一步抽取组件,也就我们把这些东西写出来了,尤其在这里。
17:03
对吧。在这里我们抽取了这么几个组件啊,一个是头部是不是抽出来了,头部怎么抽的,大家想想看,头部的想法是我们这四个是不是路由组件都有相同的头部,对吧,这种做法了,这种做法啊。有两种做法,其实是一种,这个头部是固定的。是路由组件外部的一个结构,跟那个福呢等同,能懂我意思吧?啊,这是一种设计,还有一种设计呢,就是我们每一个路由组件都有自己的头入,能不能啊,如果你生成外部的就跟下面的是一个搞法,所以我就没有用那那种方式了,我们就用一下啊,它是各个路由组件都有,那我们是不是要将他们抽成一个组件,在每个路由组件里面去引入使用,对不对?那这里面用到了两个技术来传递啊,组件跟通信还记得吧?啊,一个是我们用到了什么slo。
18:06
来传递什么标签对不对,还有什么pros来传递了什么一般的属性数据,也就是这个标题。文本对不对啊。啊,主要是我要把这个lo给大家去用一下啊。这是这个。那下面呢,后面呢,我们下一步是拆解的是商家的列表,把这个列表给拆解出来了,对吧。真的吗?诶,我们这个。怎么现在哦对我们数据还没还没搞是吧,啊,我还纳闷,我说数据怎么还是还是一些静态的,因为我们现在就写的静态的组件是吧,那我们接着来把那个商品商家的,应该说商家的列表给它抽取出来了,抽取出什么名字shop,其实这也没什么难度啊。
19:00
真的没什么难度。好,那进一步我们在这个里面啊,需要去搞这个登录的这个路由之源,首先登录的这个路由是一级路由还是二二级路由一级对吧,这个要知道啊,再一个这里面涉及到一个together的显示隐藏,也就是说在我这个一级路由组件里,按数来说应该选谁去了。正常情况下是不会显示这个底部导航,当然实在显示没有没有没有,实际上现在那个对象在不在,在只是被什么隐藏了。那如何来去实现我这一部分的显示隐藏呢?对不啊,是不是有一个配置叫什么路由里面一个配置叫Meta对吧,就这么个事。好,这个需要去指导一下啊,你用一次你就已能知道怎么用了,都不难,好,那后面呢,我们把前面的准备工作都做好了,那后面我们肯定要去做交互,在做交互之前,先得把我的后台应用是否运行起来。
20:10
这一次我们没有亲自去写后台应用啊,因为上一次我们写过了,因为写法都类似。啊,我们重点还是放在啊前台应用上面。好,那后台应用启动呢,这个啊启动非常简单,是n PM start是不是就可以启动,而且我现在相当于已经启动了啊,已经给他启动了,这都比较简单啊,主要是让大家通过这个来理解前后台分离这样一个概念啊。简单来说就是两个项目,一个前台项目,一个什么后台项目啊,再一个啊,有了前后台分离以后,后台应用是不是主要提供数据接口啊。提供数据结构,那我们就有一个概念叫什么测试后台接口,使用什么post man,嗯,如出了问题了,需要去修正一下啊,如果这个接口问题啊,需要去修正一下接口文档,或者是修正一下接口都有可能。
21:02
好,那把这些东西都整过以后,那就回到前台应用了吧,也就前台应用最终是不是要发请求去请求接口。对吧,那这个时候首先我们要想到我们要用一个请求的库,叫什么access啊,接下来我们要去封装什么请求函数。嗯,这个地方我们用到了两个技术,一个是一个什么promise,我们是不是自己搞了一个。我们为什么要自己整promise?这个地方我们想通过直接得到我想要的什么数据,而不仅仅是对不对。默认access的promise是不是得到的是response啊?我不想要,我想要。不像里面对应的那个我们response里面的什么那个date。C是吧,嗯,好,那接着呢,我们进一步的去封装了什么接口请求函数。
22:08
啊,每一个后台接口都基本上会对应一个什么接口请求函数,或者说我们后面要想去请求后台的某一个接口,必须要干嘛。调用某一个接口请求函数对吧?哎,那上一次呢,我们就写到这里啊,讲到这里就结束了。大家都做完了吗?应该都做完了,因为花了一天多的时间,你要再不做完之后就很恐怖了。
我来说两句