47-尚硅谷-尚医通-后台系统-框架开发流程介绍

各位大家好，欢迎继续收看上硅谷视频课程，我们继续来开发上移通项目，之前内容中呢，咱们完成了前端环境搭建，并且我们项目也已经运行起来了，咱们把登录功能做了一个改造，当我们点登录之后，我们可以登录进去，那我下面给大家来介绍一下在我们这个。框架里面进行一个模块开发，我们的开发过程是怎么样的，咱们先做个说明，然后说完之后我们来开发我们的具体模块，那我下面给各位来介绍一下，就是我们现在用这个框架模板在里面进行开发，它的一个开发过程到底是怎么样的，那我下面给各位来说一下。我们看怎么做。首先大家看我们怎么来看呢？各位看到啊，在这个框架中，它本身是不是有自带的功能，那我们就仿照它的自带功能看一下它是怎么做到的，然后咱们按照它的方式就能完成这个框架的使用开发，那我们看怎么做。

首先第一个各位看啊，在我的这个页面的左边的就是这个位置，当我点击就会显示不同内容了，而这个东西是什么呢？在我们的框架中，或者说在我们的V记中有一种说法，它叫做路由，比如说我们一会儿咱们做一个叫医院设置模块，那我们在里边是不是要加个医院设置，包括里边。我们可以有医院的设置添加，包括医院设置列表，所以咱开发中第一步大家都做什么，咱是不是就要加一个路由啊，而做成是不是就类似于这种效果，所以这是我们的第一步开发，我在里边给大家写一下。第一步咱们来添加上一个路由，那这路由怎么做，给各位来做介绍，咱们看一下啊，在我们的框架中，之前给大家介绍到在src下B文件。

叫问点宅，而问点宅中有文件叫这个root root里边呢就是放我们的路由信息，然后咱们现在把这root打开，在root中大家看到有一个文件叫index.js，而我们开发路由，我们就是在这个rootper的in that点摘中进行这么一个编写，那咱们来看一下这里边我们该怎么做。首先大家看到它里边呢，有给我们写好的示例程序，比如说咱们看这里边有一个example，然后里边有table，是不有tree，对应的是不是这种一个example table和tree，而我们要加个路由，大家说怎么做？你说怎么做，咱们把这段复制一份，然后改成我们的效果，是不是就可以了，所以这就是我们的第一步操作，在里边加路由，比如里边我们改成这个医院设置管理，包括医院设置添加，包括医院设置列表，这是我们的第一部分，就是添加上一个路由，这各位先知道。

然后添加完路由之后，我们看一下里边的第二步，咱们要做什么事情，给各位来说一下，大家看啊，在这个路由里边呢，我们发现有很多内容大家看，首先它的第一层的目录是这个example。也就是name，包括这里面的值是example，然后example下边有table，还有这个tree，也就是对应的咱们看到的里边的这个值。Example table是不是tree，所以它有一个层级结构，所以咱们可以做开发，然后在里边咱主要看里面这个结构，首先有一个pass pass是什么呢？就是我们的访问路径，这是大家看啊，这是第一层，这是第二层，这是大家看，现在我点那个tree。你看你们的路径变成什么？是不是叫一个example-tree，而这个路径它是怎么构成的呢？你看啊，在我第一层的PA是一个example，第二层的PA是不是叫tree，这两个加一起是构成咱路径，所以它是这个结构，比如咱仿table，那构成就是example加table，然后里边有一个叫con con是它那个布局，还有一个跳转的，以及它的名字在children准里边是它第二层，在第二层中呢，大家看啊，里边有这段话。

我说一下这段话是什么意思，也是我们开发的第二步。因为大家注意，当我点击某一个路由，是不是要进入到某个页面中去了，而这一行做的事情是什么？就是来编写你的页面的那个路径，比如说设置我们那个要跳转的页面路径。这是我们的第二步，它这个路径就是在里边写了这行代码，这行代码咱看一下comment，然后里边加了一个箭头函数引port什么意思，是不是引入，引入就是页面路径，这个页面在waves table里边的index，那我们看到waves。

里边有一个table，里边是that.vouee所以它找到的就是这么一个页面，这是里面的第二步，比如咱U开发，我们也是写上它的这个pass路径，然后咱们在里边这个页面，页面的后缀名是这个in that.v所以它就到了我们的这个地方。这个也知道，也就是我们的第二步，咱们来设置一下，你跳转那个路径，并且把这个页面给它就可以创建出来。这个各位知道，然后这个创建之后，下面的咱们进入到里边的第三步。给各位写一下第三步我们要做什么事情？那我写到这里大家看啊，现在呢，我把这页面咱们打开，然后咱们看页面中有什么，上边部分呢，是显示内容，比如我们之前说那个IUI，而下面是咱编写的扎部分，这个结构咱之前说过，然后大家看第一行代码咱应该讲过。

这什么意思啊？是不是咱们之前讲那个模块化操作，它能引入其他的文件，而现在他又引入其他文件，然后在里边呢，就做这个调用，比如里边有data。Created methods method中有方法用的请求，Create里边做执行，所以我们现在在里面就写着操作，但是它引入了这个文件，然后这个文件中是什么？就是API中这个table里面。大家看。是不是一个叫table.x大家看里面做什么事情。你看这是什么，是定义了的路径了，所以说我们开发中的第三步做什么事情呢？咱们就在这个API文件夹里面创建一个文件，然后定一下你那个接口的那个路径，比如说这里边的路径，那就是table list子路径，但是这个路径大家发现啊，如果说反我们的接口就应该加个local house端口号，这里边只有后面一部分，所以它的一个构成怎么构成呢？大家看在con这里边的这个文件。

咱之前说过，它默认用的是e Mo，就是他用这个路径，然后和我们刚才的路径一起构成，咱们最终的反路径，就是两个在一起共同构成，它是这么一个结构，所以在后面呢，这路径要改成咱们本地的local house，比如说8201，比如说其他路径，这各位给他知道。所以咱们的第三步就做这个事情，在我们这个API里边建一个JS文件，然后里边定一下你要访问的那个接口的路径，比如说我们，比如说我们的列表还是什么接口，那在里边都完成这么一个定义，所以这是我们的里边的第三步，我们就这么做。然后这个做完之后，咱第四步那就来到我们最终的页面中，页面中引入，然后用AXFS2X请求是不是做过调用啊，也就是最后一步，就是第四步我写一下。

第四步，我们在页面中引入你的JS文件，然后使用axs进行这么一个接口的调用，调用之后把接口返回的数据在我们的页面中是做过显示，所以最后一步做的就是这个事情。所以咱们现在就把这个框架的一个开发过程给各位做了一个说明，咱们开发就按照这个流程进行操作，而在开发过程中大家看啊，在这个API的宅子里边，我们又引入了一个相关的文件。这个是由框架帮我们写好的，那我们看一下啊，它在U里边的request，我们打开，打开里面是什么。

大家看啊，这一行大家应该都认识，是不是引入一些相关的内部，比如它引入了asxx，引入了其他内容，包括M以外，然后在里边你看啊，它就创建了这个AXLS对象，然后在里边呢，给我们做这么一个封装，就给我们反映数据，包括他给我们返回到response.date然后最终直接把人退。也就是说咱们之前讲AX los时候，咱是不是在页面中直接写，比如点get.pose但是现在不需要它里边已经给咱做的封装，咱们只需要把路径定义在里面引入，然后在页面中呢，直接去调用咱的方法可以了，所以你看这里边他就直接去调了里面那个get例子有这个方法最终是不是现出来了？就达到我们最终的效果，所以咱们开发就按照这个流程进行开发。第一步加入油。第二步，设置你跳转的页面路径，包括创意页面，然后第三步，在API中定一个JS文件，里边有我们接口路径。最后一步，页面中引入用AXFX进行阿请求，把接口数据在页面中进行显示。

所以这就是关于咱们这个框架的一个开发过程，给各位做一个介绍。然后这个介绍之后，下面咱们就按照这个过程来完成我们的医院设置管理前端的开发，之前咱把接口已经都完成了，包括它的增删、改、查、锁定、取消等等功能，然后咱们下面就开始完成它的前端的开发功能。