day05【讲师管理模块前端开发】/04-尚硅谷-谷粒学院-前端框架开发过程介绍

就是下面呢，给大家讲的就是在我们这个框架中，咱们该怎么往里边去加一个功能，比如说我现在想做一个讲师列表功能，那这功能咱要怎么加到这框架中，或者说我做个添加功能，那添加功能要怎么加到里面去，给大家先说一下这个框架一个开发过程。然后说完过程之后，咱在里边再来写我们的一个具体代码啊，这个啊是我们这节课要讲的，就这个要讲的啊，那咱们写下啊。小这位置就是我们讲的是框架，它的这个使用的一个过程，就是咱们要怎么去用这个框架啊，每一步给大家我都做一个详细说明，各位先知道过程，耽误这个过程，如果各位记不住也没关系，因为咱后面每天都按照过程具体代码你写多了也就能记住了。那我来说一下怎么做啊，咱们一个来看啊，首先这里边我说一下这个学习的方式啊。

咱怎么来学这个东西呢？比如说啊，比如说以后我们到一个实际的公司中去，大家要明确一点啊，你在实际的公司做项目中，一般来讲很少是从零开始去写个项目，这种几率有，但是几率不是特别大，你到公司里边从零开始搭建环境，这个过程应该几率不是很大。而大部分时候咱都是怎么做项目的，这各位要能想清楚啊，大部分时候怎么样，公司是不是有它已有的项目，然后你在公司已有的项目中，是不是再给他加个功能，加个模块，加一些东西啊，咱一般都是这么来做的，这过程列为叫做二次开发，在已有基础之上再加功能，所以咱现在其实同样在这个框架模板基础之上往里边加功能，那咱该怎么去做呢？一种最典型方式。比如说大家想一下，你到公司里边，你公司有它原始的项目，那比如说有一天你项目经理找你，说这个小张啊，你在里边加这么一个什么什么功能，那你说你该怎么做。

首先第一个对项目的结构，你肯定之前不知道，那你怎么来加，有一种最简单的方式。大家可以想一下怎么做呢？给大家说这种学习思路啊，一个最简方式怎么做你可以啊，看一下别人的模块是怎么开发的，然后你去模仿别人的方式，把这模块是不是加进来，就是先学会模仿，然后再学会独立开发，这是一个学习的最基本方式，先学别人怎么做，然后再独立开发。啊，这是咱中国人最喜欢用的方式啊，包括不是各位经炒看不看那种新闻，比如中国在研究那个发动机，就是航空发动机，但是中国因为没这实力，他想怎么做，先去模仿国外的，模仿之后再自己做研发，就是这个过程，就咱学习做开发这个过程，先模仿别人怎么做，然后模仿之后再独立开发，现在咱学的框架我们也这么做啊，那咱怎么做，咱就看里边的功能啊，因为它里边给咱们自带的一些功能，咱就看到这个怎么做到的，首先啊，咱看过程啊，第一部分。

比如说一会儿呢，咱要加一个叫讲师管理模块，按这过程中你看啊这一部分。我觉得应该知道咱之前讲过这一部分，咱们表面上看是不是叫菜单呀，在咱VE中这部分菜单我说过是不是叫路由啊，所以比如说一会儿咱要做讲师管理，那我在里边我是不是也要加个路由，比如就叫讲师管理啊，所以这就是我们做的第一步，就这里边，比如说一会儿这个我叫讲师管理，里边有讲师列表，添加讲师。啊，这就是第一步操作。然后写一下啊，第一步。我们就是在里边呢，添加上一个路由啊，第一步肯定做它，比如你做讲师管理，做什么课程管理，肯定第一步都要加路由，加成的效果就是里边的这个结果，那路由怎么加，给大家说一下啊，这个加的一个过程啊，咱来说一下啊，就是看一下这个框架的结构。

因为框架中把很多给咱都封装了，咱只需要做一部分，那路由怎么加，咱们找个地方啊，要各位记住。首先啊，在我上节课提到过，它这个模板的入口两个地方，一个是HTML，一个是men.js，在闷点JS中咱找到里边一个东西。这个东西你看啊，这是不是叫router router最终会加载在这个router里边，就是写路由的，那咱找到这个router的位置，它在哪里呢？在咱这个S2C下面一个地方叫router，然后router里边有个文件。叫这个文件。index.js，所以咱要加路由，就是在这个router文件夹中的index.js中，把这路由可以加上啊，这是我们要找的这个位置啊，这是第一个啊，就是咱们加路由在这个地方来加。

那怎么加，咱看一下里面的代码啊，把这打开啊，咱找看一下。首先啊，大家看啊，这里边呢，有它默认一种情况，这些代码其实咱不需要去改什么，然后咱找一个地方啊，大家看啊，它的这个路由其实是在这个里边，这个是个数组形式，然后你发现啊，里边有很多的括号。对，每个括号。是不是一个对象啊，那这个括号咱看看具体的你看啊，这个叫example，然后这叫table，这叫tree啊个example table和tree，咱看我这里边。我说各位是否能看到啊，你看这里边啊，这是不是叫example，里边是不是有table和tree，所以这个路由是怎么加的呢？它就是在里边按照这个结构加的一个路由啊，它就是这么做的，Example table和tree，比如说咱们再往下看，下面还有。

这里边有一个叫。Form，那我们看这form form加的是不是这里边啊，这个叫form，然后下面还有一个就是它，你看里边有这个MENU1MENU2，然后这个MENU1MENU2。加的是这个位置啊，包括最后可能还有一个什么link等等啊，这就是它加路由的方式，比如咱们一会儿在里边呢，我要加个路由，咱就可以参考这种方式，比如我叫讲师管理，添加讲师，讲师列表，那按照他就可以加出来，而加的方式，其实咱们这个代什码要各位啊，不要求你去写一遍，你写这个意义不大，那咱就用这个代码给它复制一份改出来是不是就可以了，咱路由就这么加，比如一会儿这里边咱改成叫讲师管理，这叫添加讲师，这个叫讲师列表，咱把这个改一份就可以了，就把它再复制一份加上就可以了。

这就是怎么加路由啊，后面咱都这么来做，所以这是第一步操作啊，我再快速重一遍啊，路由在src的router的inext中，里边有很多的示例代码，咱们按照示例代码把这个改就可以了，这个代码不邀各位去写一遍啊，你写很容易写错，你直接复制改一份就可以了。啊，这就是第一步加一个路由啊，咱们就是这么来做，各位知道啊，就是改这个文件咱就做到了。比如说咱们加完之后，里边就是这俩就这样啊可以做到，然后加完之后咱来看啊，比如说咱就以里边这个tree为例啊，咱以它为例，看它怎么做到的，大家看啊，我重新演示啊。比如我现在。把这个路由点开，我一点这个tree，你看到在页面中是不是显示tree里边的内容，帮你点table显示table内容，你点form是不是要显示form内容，那咱看这个该怎么来做到啊，这是我们的第二步，当你点击某个路由，要显示路由中的内容。

啊，这是他的第二步操作。然后写一下啊，第一步咱是加个路由，第一步咱说了怎么做，然后第二步操作，当我们就是点击某个路由，它要去显示那个路由对应的这么一个页面内容。啊，这是第二步操作。那这个怎么做，给大家我来说一下啊，咱们就以刚才咱看那个税为例。也就是点这个tree显示里边内容啊，那我们看怎么做到的啊，还是来到这个router in that中，咱看这位置啊，这是它那个默认一个结构，然后它里边是JA一个复杂结构，就是有对象有数组，然后数组里边你看啊，有一个叫children，中括号里边有这个table，还有这个叫tree啊这个地方，然后刚才我们做的是当我点tree。

它会跳转到页面，那怎么做的呢？大家看这行你看啊，这叫comments里边有个叫iport，在iport里边就是引入你那个页面的位置啊，所以它里面做法就这么来做。把这给大家截一下啊，就在这里边。我们写的是这一行，这一行什么意思呢？它就是路由。对应的那个页面的一个引入啊，它的页面默认你看现在是叫waves tree inex啊，是这个页面，然后这里面加了一个叫艾特斜杠，这艾特斜杠就类似于咱说那个点杠啊，跟它类似，只是说在我们框架中，他不认识点杠，只认识这个艾特斜杠跟点杠。差不多的这么一个意思啊，所以咱们现在这就是你的页面的一个位置啊，就是在这里边。我把这图然后截过来啊，它的位置就是通过这个做到，那我们找一下它这个页面。

咱看这个地址啊，它叫。咱找wheels。大家看。就这个叫wills，在wills里边呢，有一个东西叫tree tree在这里，然后tree里边是不是有个叫index，所以它的页面就是在这个位置。在这个地方啊，在这个叫waves。里边有一个叫tree。然后里边有一个叫inex.voe啊，咱就找到它的这么一个界面。啊，就是在这个位置啊，给大家大概画一下啊。这是我们的第二部分啊，所以说呢，比如说一会儿呢，我们要写路由，假如咱们写一个叫讲师管理，里边有添加讲师讲师列表，那咱按照这种结构，然后我们企页面也这么来做，用一个port的引入，在这个views里边，咱就可以创建它的页面，比如一会儿我们建文件夹叫teacher，里边写页面，但是它的页面用的都是voe这个页面。

啊，这就是第二步操作啊，咱就这么来做。点击路由显示页面，然后咱可以就是。在这个waves里边。创建我们的VE页面啊，做这么一个对应关系。啊，这就是第二步，咱根据它这个自带功能，我们也看到了，这该怎么去做啊，就是咱写成自己的，它默认这种形式，咱要改的也就是改这个地方，然后页面都叫vuee这么一个结构。这个啊，各位给他知道啊，一会儿咱会写代码，然后这个做到之后，咱往下看，看一下里边的第三步操作。啊，咱看第三步啊。就是第一步呢，写完了路由，第二步创建了页面，第三步呢，页面中就要写你那个具体的功能，就实现我们的具体功能，那这功能怎么来做啊，咱们找一下那个页面，我把页面打开啊，就是税音代测。

然后咱看怎么做啊，首先在页面中的这部分，就是这部分用的是咱们说那个叫element UI部分啊，那我们找一个更详细点，比如找这个这里边东西更多，它上面用的叫IUI的这部分，嗯，才会做到啊，然后呢，往下看，大家看这行。我觉得各位应该能看懂啊，咱在模块化中讲过import from。是不是引入其他的JS文件呀，所以咱们在页面中你需要引入文件，而这文件中干什么呢？咱看文件的地址啊，在这个位置叫API table。这里边是什么？就是定义你那个接口的地址啊，所以说我们的第三步，咱就先做这个事情，在API中的，比如一会儿我们做讲师，那咱建一个叫t.JS，然后里边创建一个你接口那个方法，那个定义，比如说我们列表加上你的地址调方式，也是添加加上他的地址消方式啊，这是我们的第三步。

我写一下啊，做法就是咱们在API文件夹里边创建一个JS文件，然后定义你的接口的那个地址和它相关的参数，啊，这是我们的第三步，我们就这么来做。当然这个定义咱其实完全可以参考这个写法啊，这是它一个固定写法，而写法中我强调啊，咱主要改的应该就是这个地方。帮你的名的这个地方，其他地方是固定的，第一个地方是直接有一个组件，就是它我们封装好的那个叫AX iOS部分啊，刚才咱们刚看过啊，比咱们啊，咱再看一下啊，比如咱再具体看，你看里边它创建了一个叫。AXLS把这个给咱做了封装，所以咱们在里边把这个就是引入进来。这个引入，引入之后，下面定义它那个具体方法，比如你的接口地址，接口提交方式和对应的那个参数。

这个啊，一会怎么写，我具体咱们写例子啊，这是它的第三步API中定义你这个内容啊。第三步这么来做，然后做完之后，咱们下面进入到我们的第四步。第四步干什么呢？在你的那个创建的VE页面中引入这个这文件，然后调用方法实现我们的功能，第四步就是做这个事情，那我们来看个具体的啊，咱就看这个。你看里边啊，先引入了这个文件，然后引入之后，按照咱们之前说那个结构就是data。Create methods包你看写这个方法做调用A定义初始值，所以咱在页面中就来做这个事情，先引入，然后再写这个结构。啊，这各位给他知道啊，我大概写一下这个结构啊，第一个先引入。咱就用个import，比如说我叫user from啊，然后加上你那个地址。

啊，加上这个地址，先引入这是第一个，然后有之后在我们代码中咱写那个结构，就是咱之前写那个，比如date。大概写一下啊date还有一个叫。这是一个在线之前执行，然后除了克之外还有一个叫MYS。在method中定义方法，Create里边调用啊，Date中定义初始值，但是这个方法咱在这里边引入中调这个方法，所以咱们写的是这么一个结构啊，这是它里边的第四步，我们就这么来做，把数据就能得到，然后都得到之后，咱最后再用到，我们学那个叫MUY，包括在页面中，最终我们就做个显示，这一部分用到就是。Element UI中的组件做了一个显示，所以咱们这个过程我写一下啊。就是显示之后，我们最后。

使用那个叫element UI来显示我们的数据的内容。啊，主要就是这么一个基本过程。啊，所以咱把它这个步骤给大家做一个说明啊，这就是我们开发一个完整的一个流程啊，我再说一遍，然后咱一会儿按照过程，咱们把这个具体效果给大家来写一下，就是现在你记不住没关系啊，先用一个印象，然后后面会写这个代码。我先再说一遍啊，首先第一步咱要做开发，现在这里边加上一个路由，比如说一会儿咱做讲师管理，那我加个讲师管理的路由，里边就要添加讲师讲师列表，这是第一步。然后第二步，当我们点击某个路由，它肯定要显示你不同的页面，所以第二步操作咱就来创建一个页面，页面创建在路由中来设置地址，在views里边创建页面，页面都是VE页面，这是第二步。

然后第三步，因为咱们页面中要调接口，所以咱们在API的文件夹中创建一个文件，这文件中专门做那个接口地址的定义啊，是一个固定结构，因为咱会定义我们的讲师的自然改方法，然后定义之后最后一步在我们的页面中引入这个文件，然后调方法进行操作，就是咱们写那个AX iOS过程，Date created methods，用它调用，都调用之后也得到了数据，咱最后用MUI显示数据内容。啊，所以它主要就是这么一个开发过程，咱的这个就是voe和in com的框架，我们做前端就这么来做。这个啊，保存一下啊。咱这个前端框架。开发过程的一个介绍，主要这么一个流程啊，咱们后面写的就是这个过程，这些路由在写页面，在定义方法，最后页面中调用做显示，包括我们自然给他操作传递过程，后面写前端也都是按照这个逻辑去写的。

所以大家啊，把这个先有一个印象啊，你知道这过程该怎么去做。