40-尚硅谷-硅谷通用权限项目-开发角色管理前端-前端框架目录结构

各位同学大家好，刚才呢咱们完成了前端环境的搭建，那下面呢，我们往下来看，下面呢给大家介绍一下这个前端框架里边的目录结构，也就是里边目录分别都是干什么的，文件分别都是做什么的，那我下面给各位同学做个介绍。然后介绍之前特别提这么一点，希望各位注意。因为我们现在呢，用的是一个框架，框架的特点是什么呢？就是它规定好一种规范，我们按照这种规范进行代码开发，另外里边给咱们还封装了一些内容，让咱们能够少写代码就能实现这个功能，所以下面我们来看一下这个框架里边这个目录结构。这里边给各位截个图，然后咱们做一个说明。那我来截个图。首先大家看啊，这是里边的目录结构。在目录结构中呢，有这么几个目录给各位来说一下，然后我强调啊，这里边最重要的目录是这个叫SC，因为咱们后面改的内容大部分都在这里边，那其他目录给各位也做过介绍，首先各位看第一个目录叫build。

Build什么意思呢？是不是有构建意思呢？我强调啊，这个目录就类似于我们的target目录，跟这个有点类似，这是第一个，然后第二个目录叫Mo，大家看这单词啊，Mo什么意思呢？在软件英语中它有那个模拟这类意思，然后Mo具体什么意思呢？给大家说明，大家看一下啊，我们现在这个前端的框架里边，咱是不是有登录，而这个登录呢，它是能登录，但是登录怎么做的呢？注意啊，第一个它里边并没有接口，但是它怎么做，通过Mo来模拟出服务器的效果，做到接口效果，所以Mo做到就是一个模拟服务器的一个效果，这叫Mo，咱们后面要改成咱们本地接口进行实现。第三个叫node models，这个最好理解，就是咱们的各种依赖，或者下载的各个依赖都在这里边进行这么一个保存，这是我们看到。

然后除了这个之外，我们再来看啊，下面还有下一目录叫T子目录，里边就放一些单元测试的那种，主要的是SC，然后下面呢，我们重点看一下SC里面内容。我这里强调啊，因为它是框架，是一个固定的目录结构，另外是一种开发的规范，所以里边就约定好了每个目录到底都是干什么的，这是它一个框架的特点，那这部分给大家截个图，再来做一个说明。我把这个截过来，然后咱们在这个位置看一下，这里边分别都是什么意思。首先我们看第一个目录，第一个目录呢叫做API，那咱说一下这个目录是什么特点，框架中它给咱们定义的一个规范，在API中咱们干什么呢？咱们随便找一个文件看一下啊，里边有JS文件，比如我现在我要访问某个接口，然后怎么做？咱们定义接口的路径，接口的提交方式，包括接口的信息等内容，所以这里面就定义你要访问的接口信息，这个叫API目录，咱后面我们要写接口，那就会在这个目录中进行定义，我把这个给各位写一下，它的作用就是创建JS文件，定义你的接口的信息，包括你的路径、提交方式、参数等内容。这是里边的第一个目录，也是一个很重要的目录。然后咱们看第二个目录叫access目录，这个目录是什么呢？这里边一般放。

些静态资源，比如说一些图片等内容，第三个叫cons，放一些相关的组件，然后之后还有一个叫icons，这是什么呢？大家看啊，这里就放一些图标，这图标什么意思，给各位做个说明。

咱们来到我们这个框架里边，大家看我左边这个位置，你看啊，前面是不是有一些图标啊，这些图标都是从这里边取到的，这个叫is，然后这个之后呢，下面还一个叫layout layout什么意思呢？说明啊，就是咱们页面的布局，什么叫布局，大家看我现在页面你看啊，我点左边。右边是不是内容显示现在咱是左右的布局，就类似于这个样子，给大家画下啊，比如说我们现在这布局应该是长这个样子。左边有菜单一点击右边是不是那种，咱是这样的，当然布局中可能还有别的布局，比如有的网页中可能是这么一种布局。

根据不同网页不一定，所以咱们目前是这种布局，所以在里边定义里的布局部分，然后之后呢，还有一个重要部分叫router，我这里写一下啊，我把重点给各位在里边都会写出来，这个叫router。大家看这个单词routeor什么意思啊，是不是有路由的意思啊，它就表示设置项目中的路由。那什么是路由呢？给大家做说明，大家看啊，我们的这个位置，其实路由呢，就是咱说的菜单指vuee里边，它叫路由，大家看我点击不同路由是不是显示不同内容，而路由部分我们就在route里边进行定义，咱后面做角色管理，做其他模块都是在root里边来定义我们的路由，这是一个重要的目录，然后下面还有其他目录，我们看一下啊，有一个叫S。是里边一些相关的功能，比如说大家看有一个user.s，咱们做的登录，在里边做一些具体实现，然后除了这个之外，还有一个叫styles，这个应该好理解，就是放一些样式文件。另外下面有一个重要的部分叫S，给各位做个说明，咱们写到这里。

U里面是什么呢？就是封装我们项目中一些工具，或者说一些工具的方法，那这里边咱们看一个主要的，大家看这个东西，Request，这次我把这个打开，各位看里边啊，首先第一个位应该都能看懂，Import from是不是引入其他的组件，这个叫I，就是咱们说的阿贾克斯，然后这是什么？IUY，它在里边做了封装，然后再往下看，在里边我们请求跟响应的时候，他都做了处理，咱们看一下，后面咱们写的时候会具体再自我介绍，大家看啊，咱就以这个response为例，各位看这一段什么意思？

大家看啊，因为咱们想的时候会返回内容，那根据内容里边的状态嘛，做了一个判断，如果状态嘛不是2万就提示错误，如果是2万成功，那就返回信息，所以以上他给我们做了一些功能上的封装，也就是相当于把这个xce做了一个二次封装，这是一个重要的部分，然后除了这个之外，还有一个叫views views里面是什么呢？就是咱们具体功能的页面，我在里边写一下。Views里边就是咱们功能的页面，在这里边我们做了一个封装，所以以上是里边的目录结构，大家注意啊，我这里写的四个是咱后面会一直用到的，比如说咱后面我们要调接口，那咱们API中定义，然后建路由，在里面封装，最终页面中进行调用，后面然后继续来写，然后下面还有几个文件，这几个文件中呢，这个咱应该没有用到，咱们主要用到是这个。

叫问点JS文件啊，把这个说一下啊，这个文件是什么呢？大家理解为就是我们当前这个项目，或者我当前框架的一个入口程序，什么叫入口呢？咱们Java里边是不是有问方法是程序入口，这是我们前端这个框架的入口叫点，也就我一启动项目一执行点S会先执行，然后里边看里边写了什么，大家看啊，你看里边干了什么事情。是不是了，各个组件，包括里边有view m u，有路由等，另外在里边你再来看这一段应该都能看懂，是不是new了viewe对象，然后里边做了一些初始化等信息，所以以上就是一个目录结构的一个介绍，那除了这个之外呢，下面还有一些相关的文件，咱看一下我的课件里边啊，比如说里边指定你开发环境的服务器，它默认是那个Mo，里边咱后面要改成咱们自己那个接口，另外里边有它的相关的配置文件等内容，以上就是框架的目录结构，然后各位重点记住啊，我这里写了这么几个，我再说一遍啊，这里边我强调我说完之后不指望各位马上就能记住，你先有个印象，咱们后面写代码中会再具体给大家再来说一遍，那咱还做做一个说明，首先A片里边定义接口router里边。

写路由，YouTube里边封装工具，Views里边写页面，Man点是它的入口程序。以上就是框架的目录结构，就是框架中约定了一种开发规范，它约定好了让每个目录里边做它自己特定的功能啊。当然我强调啊，有些人可能会说说我这个，比如API里边定义接口信息，我把接口信息放到别的目录中可不可以肯定是可以的，但是这里边就不符合框架的规范了，既然咱们用到了这个框架，那就按照框架的规范进行代码的编写，进行项目的开发。所以以上就是我们介绍的目录结构。