00:00
大家好,这节课我们来看一下这个目录结构。啊,在这个开始使用,往下找一找。在这啊。它给我们已经生成了一个完整的呃开发框架,涵盖了中后台开发的各类功能和和这个坑位,然后是在整个目录结构。呃,大家。整体来看一眼啊,你看这也可以,然后看我们这个安装的这个简单的这个脚手架啊也可以。你会发现啊,它的这个目录结构和我们之前哎讲这个物米GS的时候,我们最后优化后的目录结构是一样的,对吧。看一下。是不是一样的。嗯。它只是比我们之前哎优化后的那个五米GS多了呃一些,比如说测试相关的目录,以及哎这个呃,测试相关的等等,那其他的大部分呢,哎,都是跟我们一样的啊,这也是。
01:02
这个它确实是就是五米。就是G5米去构建的嘛,啊,那我们来看一下,那因为跟我们的这个五米结构很很像对吧,就是基本就是一致的,所以这个木结构我们介绍起来啊,大家应该就比较熟悉了。那首先是这个con菲目录,Con菲目录呢,包含了哎路由构建等一些配置,我们来看一看它的这个con菲IG里面有什么。有这个computer,这个computer呢是。呃,这个配置啊,主要的配置都在这儿。就是它的配置文件就在这儿。然后其他的这些都是呃,拆分出去的啊,跟我们之前啊,进行优化的时候进行拆分的是一致的啊。啊,那这里面配置项呢,大家可以看一下,这就是五米的一个一些配置,比如说呃,这个开启这个dva,然后这个呃,History的类型,以及呃国际化的一个设置。
02:01
然后。嗯,包括这个兼容的这个版本,嗯,使用的这个路由,路由它也是在上面导入了这个路由,然后呃,路由在这里面配的呢,对吧?啊接着往下看。呃,主题的一个颜色啊,也是从这个default setting啊,这里面去获取这个主题的颜色。接着再来看一看啊。这个标题没有写,然后代理代理呢,他也是,呃,在这个。把这个文件给抽离出去了,然后里面是定义了这样一个一个的内容,嗯,然后通过你的这个呃的APP的这个环境变量去取,如果没有这个环境变量,就默认去取这个呃,第一位的这个配置。嗯,那这些的。关于配置文件的处理呢,能给就是跟我们之前学习这个五米的时候,哎,我们处理方式一样,这是我们的主配置对吧。
03:01
然后这是我们的这个代理文件,只不过我们就只写了一个,这是我们的路由。啊,默认的一些配置。接着往下看啊。那。呃,下面的这个目录啊,我们就按照这个顺序来说吧,这个con说完了,看一下这个目啊,这个是我们的目在这里面的啊,GS或者TS都会被当做,呃,这个慕。就是我们的模拟数据啊,那之前我们也用过这个文件。那这里面呢,他给我们嗯,默认了一些数据,比如说。默认的一些用户的数据啊呃,然后。还有一个。这样的一个提醒的一个一个数据,还有一个表格的list table的一个表格的数据。好,这个是慕接着往下看啊,那这个是依赖相关的一个目录啊。Public这个放我们的静态资源在这里面的文件啊,我们在执行打包的时候,它不会呃给打包,只会原样的复制一份啊。
04:05
所以有些不需要打包的文件,比如说一些图片啊,比如说一些这个,呃,Fo icon啊等等啊,我们就放到这里面啊,包括一些其他的icon啊,就放这里面,嗯。当然我们,诶之前我们也创建了这个目录,对吧,也给大家做了演示,我们在进行呃,打包的时候,这里面的文件呢,会就相当于给原样复制了一份出具啊。啊,接着就到了我们这个。啊,Src。我们先把这个也给都给折叠一下,对比一下这个src啊,大家看一下其实也都是嗯。一样的啊,基本都是一样的。啊,首先是这个点,优米这个是。嗯,优米它啊,运行时产生的一些文件啊,这个我们不用管,每次呃,运行就是或者重新build的时候,它都会重新生成。嗯,而且他也不会进版本库。嗯,接着是我们的这个access啊,这个是放我们的静态资源,本地的静态资源,那在这里面的文件呢,会啊,会被编译啊。
05:05
然后是components,放我们的,呃,公共组件。那一些通用的组件,我们可以放在这里面,比如说它用来布局的这个啊头部。呃,用来做认证的这个呃组件。等等用来做这个。Loading的就是页面loading的那个组件,就是一些公共的组件,我们放在这里啊。然后这个是测试相关的一些,哎东西啊在这。呃,Layout模板布局相关的,嗯,我们之前在呃写例子的时候,也是有一个layout,我们把布局相关的放到这里面对吧。啊,那只不过我们就一个布局文件,它这里呢是比较多有比如说基本的布局。啊,有这个呃,空白的一个呃模板,然后有这个用来认证的一个东西,在这个认证的这里面啊,可以看一下它是。呃,判断了一下,没有登录的话,就是给给重新登录啊,这是一个呃,认证相关的一个模板。
06:03
然后是。嗯,这个就是样式啊,这是用户相关的一个模板。一些模板文件。先关掉。那这个就是本地化的一个配置了。啊,比如说我们找找这个中文的一个配置,然后它有这么几个配置项,比如说菜单的。它默认暴露的是一个对象啊,前面是K,然后后面是这个啊,这个value,那K呢。前面是这个没有,是他的一个约定啊,是他自己的一个约定啊,我们自己去写的时候呢,就写后面这个部分就可以了,然后它会根据我们当前配置的国际化的这个。那我们当前配置的这个,呃。国际化的这个就是说默认的这个国际化的配置,去选择默认显示的一个内容,然后我们在写的时候呢,还可以用上一些。嗯,翻译类的一个方法啊,会。动态的跟我们显示啊,就比如呃,这个切换语言啥的。
07:01
那这个给大家看一下。比如说在root里边。来比如说我们这个登录在这是吧,那这个登录就是我们的这个内,但是它这里面的配置呢,就是呃,没有点登录啊,这个menu呢,它是约束就是默认的,它自己去匹配这个me有点就是当我们比如说给路由指定了这个内之后。啊,他自己就会去找这个menu.log然后最终给我们显示成这个登录啊。啊。这个先关掉啊。后面再细说,我们先把目录结构都给介绍完,这是本地化的相关的一些配置啊。那这个就是。呃,Models就是我们的d va的models都在这里面。哎,我们也用过D写过一些例子,那比如说就是操作用户的啊,比如说这个是执行登录的,执行登录的时候呢,他就会诶调这个方法执行登录去。嗯。哎,请求这个就是就是说使用这个方法来执行登录啊,这是登录的一个结果,那这个方法呢,大家可以看到啊,它是从哪service里面对吧,Service里面的logo里面去。
08:10
拿到的啊,也是跟我们的。写法都是都是一致的啊,那我们在使用这个DV的时候也是啊一样,我们在获取数据的时候用这个方法对吧,那用这个靠去访问我们的get task get task也是so里面的啊get啊好接着看。呃,Model存完了就是我们的啊,配这个放我们的,呃,UI组件也就是放我们的页面啊,放我们的页面。然后呃,这个里面呢,其实我们大部分写的东西都是在这个里面去写的啊。大家可以看到,比如说它这个table list里面,这里面还有一个com,就是说呃,如果是呃这个页面啊,就是说这个路由这个页面,它用到的自己本身用到的一些组件,我们就在这个呃里面给他建这个components去用就可以了,那在外面的这个components是公有的,就大家都能用到的。
09:06
啊,然后就是呃,他的这个,比如说呃,页面的数据。就是页面的代码等等。嗯,这个是page,然后在page里面还给我们默认了几个页面,比如说一个呃,欢迎页玩科,还有一个404啊。这几个页面。可先关掉啊。好,这个service service就是放我们,嗯。呃,请求就是说我们请求数据的地方和后请求后台API获取数据的地方都在这,比如他登录的地方,刚才我们看到的这个方法啊,Log content。是在这儿对吧,然后。方法是post,然后传的数据是对吧。啊,它是在哪调的呢?刚才给大家看过,在这个login,不是在这个models里面,这个log里面去调用的这个登录的。这里啊,你看调用的这个登录这个方法,它就是从这个里面去获取的,对不对啊。
10:04
那既然说到这个service了。我们再来看一看这个service啊,可以发现他使用的这个request是从哪来的,是不是从那个U里面的request。对不对啊,那接着就到了我们这个U这个一般放我们的一些工具集啊。那我们先看看这个request吧。嗯,它也是用的这个对吧,那我们之前啊。就是说自己写的时候用的也是这个us里面的request对不对,来看看。呃,这个里面的,哎,我们说了这个u tell,这里面放我们的一些工具啊,那看看它都有什么什么工具,比如说这个request,那就是用来发送网络请求的一个工具,然后它也是从这个五米request里面,嗯,它是导出了这个extend啊,那这个这个跟我们写的不一样啊,我们之前写的是直接导入request,因为我们没有。
11:00
我们是直接导入request写了两个拦截器啊,那它这里呢,是导入这个extend,那它利用这个。往下长,往下长。他利用这个extend去创建的这个铝筷子啊。这个呢,它可以就是说呃。额外的为这个request去指定一些配置。比如说是否带上这个cookie呀,然后当出现错误的时候,嗯,处理错误的一个回答函数等等啊。啊,这个是呃,它是从这个里面导出的这个extend,再去创建的request的嘛,我们是直接呃从这里面去引出的这个request啊。那实际上这里只要我们创建好这个request之后啊,你在这就可以去写这个拦截器了啊,请求的拦截器啊,写拦截器啊,就是基于这个request的这个。这个方法去写它的连接器吗?嗯。啊,这是网络请求的工具,接着你看它还有其他的,比如说这个,呃。
12:03
这个比如说这个是用于认证的工具,哎,检验比如说用户他是什么身份对吧。呃,这个也是认证相关的一个工具,然后他是还引入了它啊,从这个里面啊,引入了这个方法。好。接着往下看啊,这个是我们全局的一个样式啊,我们在这里定义的样式全局都生效的,那它初始化的这个A和body。呃,Global,这是我们全局的这个GS啊。全局的GS。我们可以在这里面去写一些全局性的一些配置,比如说他在这里,嗯呃,监听了一些事件。呃,这个文件是我们,呃,打包成这个APP啊,或者说是打包成啊,就是说打包成iOS啊,或者安装应用等等,这个会用到这个这样的一个配置文件。
13:06
啊,这个src大概就说完了,然后就是这个test test就是我们测试相关的一些。哎,文件就写到这里面,写一下这个测试用例啥的。嗯,其他的都都差不多了,编辑器的配置文件呀,以这个ES link的这个相关的配置get的忽略文件。嗯,还有这个代码,这个格式化的一些配置。还有就是啊,我们的。啊,Pack package啊,那我们的所有可用的一些脚本。可以就是说就是给我们配置好的,我们可以用的一些启动的一些脚本啊,启动的一些命令。嗯,比如说我们之前启用的这个start对吧。然后。他所需要的一些,呃,依赖。以及这个啊,这个这个开发时的一个依赖。等等,然后是我们的项目的说明文档。
14:03
Timesscript的配置。还有亚的所文件等等啊,就这些啊,亚索文件。那这个目录结构啊,其实大家看起来应该还是比较好记的,因为跟我们之前学的这个这个五米确实。都是一样的目录结构啊。当然你和这个,呃,直接安装的这个五米它有差别,那这个木木理结构呢,是我们自己去优化后的啊,优化过后的。再来看一下这个官方文档啊,然后这里呢,它是也是对目录做了一个简单的一个介绍,呃,再给大家回顾一下,比如说哎,我们的配置文件的目录,我们的啊模拟数据的目录。呃,静态资源的一个目录对吧?Src下面的这个是本地的静态资源,然后通用的组件,呃,测试用例在这里,然后通用布局在这里。全局的这个d va model。啊对啊,这个是全局的啊,因为在这个pages里面,我们还可以写这个自己页面要用到的一些model啊。
15:03
所以严谨一点,这个最外层,这个是全局的一个model,然后配是我们的业务页面入口和常用的模板都在配里面。Service是后台接口服务,这个us是我们的工具库,然后是国际化的一个资源,全局的样式,全局GS以及测试工具,对吧,还有这个呃,说明文档,以及是呃,Package点杰啊。嗯。那这个就相当于再给大家做一个简单的回顾,接下来呢,再给大家说一下页面代码结构的一个推荐啊。就是为了让代码组织更加规范,让开发者能更方便的约定到相关的页面和呃和组件,代码定义和规范啊,只是作为参考啊,当然不强求。它只是呃,因为我们说了这个我们写我们的这个业务啊,写我们的页面主要就是在配置目录下,所以说呃,他这个说代码结构也是主要是在我们这个配置之下给我们进行的啊,主要是有这么几点需要大家注意吧。
16:03
如果我们这里面啊,直接就是一个组件的,就是直接就是一个页面,那我们这个目录啊,推荐使用大写,就是说你这里面不再去包含其他的啊子页面的等等。这样的话我们就能呃直接区分这是一个路由组件。清楚了吧,啊,就是说路由组件我们这边用大写啊,我们就一看这个文件名文件夹我们就知道,哎,这是一个路由组件啊。这也是他说的这个基于这个约定就能清楚的区分路由组件和非路由组件,对吧?然后有一些组件呢,是这个页面会要需要用到,可以就是把它给拆分到再建一个component,在这里面去写这个页面需要的一些组件啊,其他的就是比如页面的样式,页面的这个呃,组件代码等等啊。就这些东西了,好,那接着往下看,有时候呢,我们的页面还做一些深层深层次的一个嵌套,比如说user下面的login,哎,User下面的这个。
17:04
这个时候啊,像。呃,这个作为这个分组用的这个目录,因为这个组里面它包含了很多的一个组件,比如说登录用的啊,我们的业务逻辑,注册用的业务逻辑等等这些作为组来讲的。这样的页面我们推荐使用小写啊,就是小写字母。然后嗯,那路由组件呢,还是这种大写,首字母大写。这这样的一个东西,然后是这个组里面共用的组件,我们可以放到这components,那如果啊是这个login。这个页面组件,它要用到的一些组件呢,我们就在在这个login里面再建components,就跟这个一样啊,在建在这个login目录里面再建components,就这样的啊,就是。大家共用的啊,比如说我提到外面啊,就跟最外层一样,哎,大家共用的我都提到最外面,然后只是你这个组里面共用的,我就提到这个组的这个下面,然后仅仅是你组件里面自己要用到的,我就在你这个组件的目录下面,我就建立个component来这样去组织我们代码。
18:07
如果大家都去按照这个呃约定的话,其实你呃,比如说让一个没有接触过你这个项目的人来去一看你的这个代码结构,他就知道是怎么回事了啊。然后下面有对这个的一个详细的一个说明。那这小节就先到这里。
我来说两句