46-尚硅谷-尚医通-后台系统-目录结构和登录改造

各位大家好，欢迎继续收看上硅谷视频课程。刚才呢，我们搭建了项目的前端环境，并且把项目也已经启起来了，那我下面的把这个前端的环境，包括里边的目录结构是怎么样的，给各位做个介绍，介绍之后呢，咱再把里面的登录功能做个改造，让他能登录进去，那咱下面来做一下，首先给大家介绍一下我们用这个前程框架里边的目录结构到底都是什么意思，给各位做一个基本说明，然后后面我们在开发具模块中给各位再做个相应介绍，那咱们下面我们来看一下这个目录结构。我们通过这个工作区来查看一下，大家看啊，首先我的项目中有一个很重要的文件叫拍点JC，咱之前说到过，我们项目做初始化之后，是不是会生成这个文件，然后文件中有它一些基本配置，包括里边一些相关的依赖，所以咱们现在有这么一个文件，然后这个呢，咱们刚才启动的时候呢，我们用的是不是叫NPMRUDV啊，在DV的时候大家看啊，DV什么意思？

是不是就是development开发嘛，所以它会找到这里边，然后你看在这里边呢，它就会加载到这个文件。叫build web派DVCF电池S会找到这个文件，所以咱们往下看，就这里边，首先build的文件夹中呢，是一些相关构建的文件，在构件中呢，首先他找到这个文件叫DV增F，然后你看里边啊，都会引一些相关它需要的文件包，一些基本配置。然后在这过程中呢，里边还会找这个文件，大家看这个文件叫外base.zf所以咱们看下这个文件中是什么。在一个文件中呢，也是引入一些相关内容，然后大家看这个位置有个单词叫entry。

什么意思？是不是进入，所以说给大家强调，我们这个前端框架有它的一个入口，入口就是一个电子文件，什么叫入口？我们写Java程序的时候问方法是这个入口，而咱们前端这个项目中是用这个问点GS作咱的入口，所以咱们找到这个入口在S2C下边有一个分列值S就是它会找到这个文件，然后这个文件中大家看它在干什么。我觉得这段代码各位应该都能看懂。但之前说过。是不是就是引入一些相关的组件import from，比如大家看你看第一个。这是谁？是不是就是vouee啊，包括有谁element UI，还有这个什么APP，什么router等等不同内容，然后最终他new vouee在里边做这么一个操作，所以这是一个基本介绍，然后除了这个之外，其实它的核心里边还有一个地方叫conig目录，Conig个中的这些相关配置，比如咱看第一个叫DV inv，这里边是什么呢？就是指定你访问的后端接口路径，它默认是这个路径，然后面要改成我们那个local house，比如说8201等等路径，这各位知道。

然后除了这个之外，在里边还有一个叫in带点JS，这是它里边一个配置文件，比如咱看一个主要的，大家看里边的这个位置。各位应该都知道这是什么，是当前的主机名和端口号，因为咱们这项目是不是用928访问，但是这个你可以改，就是你改成BA多号也可以做到，所这是一个配置文件，然后在配置文件中呢，还有一个地方咱需要改一下，就是里面的这句话。我说一下什么意思啊，它叫use is use是不是叫使用啊，就表示使用这个插件，这个插件是什么呢？是一个代码检查插件，当是咱现在就不用它了，我把这给它加个false，就给它禁用掉，当然你也可以使用，你要使用的话，那你在这里边下载这个插件，就叫这个ES lit，把它下载下来，然后做个安装也是可以的，我现在就不装它了，咱直接把这值改成fos就可以了，这各位注意。

然后这些都看完之后，咱往下看，No model不用说了，是咱们的相关的依赖，然后在src里边有我们的句子内容，咱们写代码主要就是写到src里边，那我们先大概看一下啊，后面咱会具体说，首先API中呢，就是定义你那个接口的地址，比如说咱们做一个什么列表，什么这个登录怎么注册，里边有你接口地址，然后在这个呃，Set里边有一些相关的静态资源。比如说有图片，有什么内容等等。里边呢，是一些相关的第三方组件，包括里边有一些相应的一些。图标，以及里边有些相关的JS文件等等，所以这些都是一些目录，然后在目录中呢，比较核心的，大家看这个文件夹叫VS。

View什么意思？是不是视图，比如说咱们后面操作中写的那个页面都是在views编写，然后除了这个之外，YouTube是工具类，Style是样式，到是一些相关J文件，Root是一些路由文件，也就是咱们看一下在这里边大家看左边部分是不是很多，这些就是一个路由嘛，你点击不同路由会显示不同内容。所以这是关于我们这个前端环境目录结构一个基本介绍，各位给做个了解，而咱后面主要改的就是src里面内容，比如说咱们创建一个接口路径。然后在root里边改路由，在views里边页面中用阿贾克斯调用我们的接口，主要在后面改的是这么几个，各位对它需要一个基本的了解，这是关于目录的一个介绍，然后目录介绍之后，咱们下面呢，我们可以把我们这个。

登录的这么一个功能做改造，那我们先看一下，现在大家看。我这个项目已经启用起来了，然后现在我点登录，大家看是报了一个错呀，叫networkt I种，其实说网络错，我强调啊，这也不是网络问题，是那个接口有问题，就是你调的后端接口不对，那咱看怎么不对，我现在把F12点开。然后你点里边这个叫network，就是网络通过他能看到当前所有的请求，那比如我现在我再点个登录，然后各位看报了一个错，然后再往下看，你看这里边啊提示我们。说这个是不是失败了，然后大家看他现在去访问哪个登录接口。大家看到这个路径了嘛，这路径它默认访一个服务器叫e z Mo这个服务器，但是这个服务器呢，目前访问应该有问题，所以他现在就登不进去了，所以咱们做法就是把这个登录改成咱的本地，让他能登录进去，因为咱的重点不是做登录，咱多里面的功能，咱们让他先改造成能登录。

后面再具体完成里面的功能，所以咱们现在把这个给它改一下，这个我要知道啊，就是这个地址在哪里配置呢？在我们刚才说的这里边conig中有一个DV点大家看。是不是这个地址easy work嘛，就他默认访问这个地址，但是现在我们不需要访问地址，再让他能登录就可以了，那我说一下这登录怎么改造，我在课件中给各位应该都写到了，咱们看一下啊，首先呢，我们的做法就是咱们就是找到在我里边的一个配置文件，或者一个JS文件，那我们找一下，我说在哪里啊，在S2C里面。

有一个叫子斗。然后死到里边这个位置有一个models models中有一个user JS是不是一个登录或者用户的JS，然后咱在这里边做改造，那怎么改，大家看这位置。这个位置中呢，我把这拉大一点，就是它有actions里边有我们的基本的三个方法，第一个就是登录。然后第二个叫get info，就是登录之后你可以得到用户的信息，第三个叫lowout叫退出，他们现在这里边都去调用我们那个相关的接口，那我们现在让他就不调接口，咱直接进行操作就可以了，那怎么做给各位来改一下啊，咱们先在这个登录这部分。我把这个给各位说一下怎么改，首先大家看啊，它这里边呢，其实是log印，是调一个接口，然后里边传入的信息，最终通过response反数据这一种代码，咱之前见过response是你反数据，然后在反应数据中，咱通过这个点date，然后date中有个token，如果有token值，然后给它塞到里面去，就是放到cookie中去，最终给它返回，所以咱们现在可以这么做，如果就把这个date值呢，写个固定值。

然后里边写一段这个数据里边有token这个值，最终就可以了，所以咱现在就把这三行代码做个改造就可以了，那我现在给它改一下，首先这段先给它注掉。注掉之后。在上面改一下，首先第一个咱就把这个date改成一个固定值，我改一下啊，首先第一个它的名字叫。N。然后它这个值，比如我就叫这个good幂，现在我们就就是完成了这么一个创建，咱们写了一个K，然后加了一个幂啊，当然这里边你写成单引号，双引号都是一样的，我就改成单引号啊，双引号也是对的，现在我们就是手动构建了一个数据，然后这个数据有之后，咱们通过set token把它放到里面去，包括通过一个考虑的方法给它也放进去，通过date.token取到这么一个值，这样的话我们就完成了一个登录，咱们做了一个改造，给他写了一个固定值，而不需要去请求我们的接口。

这是第一个。然后登录改之后咱再改第二个获取用户信息，跟它的过程一样，那怎么改给大家说一下啊，咱们改的也是中间的这个记号，我把它复制出来，然后上面这部分我先给它。吐掉。就这部分啊，咱都给它注掉。就不叫了，然后再给他改一下，然后怎么改我们看啊。首先在这里边呢，咱们也是在date中给它来一个固定值，就固定一段J，然后这这中有什么，咱从往下看，首先你看啊，里面有个什么Rose，有一个name是一个va Rose是角色，Name是名字，Va是你那个头像，那我里边就写上这个值，第一个叫。

Rose就是你的角色，比如这个角色，我们就是这个蜜。然后第二个呢，是这个叫做name，就是名称名称啊，比如我也叫in。然后第三个是这个叫做A瓦，就是我们那个头像，比这用户有头像，那头像我就写一个固定路径，这路径我就从课件中直接复制出来了啊，咱找下那个路径啊，那在我这里边。呃，就是这个。头像的那个径其实就是一个图片路径，然后把它复制过来，这个复制之后，咱们下面就是判断，如果里边这个角色不为空，然后咱们就设置角色，包括这里边设置名字，设置头像，最终就完成了，这是关于获取用户信息的改造。咱给它快速改一下可以了，然后改完之后往下看，下面有这个退出，跟他方法一样，咱们也是做这个基本操作，那我现在先把这一行先注掉。

然后在里边加第三行，第一个，你看啊，把这个set token变成空，把set Rose变成空，最后。删除这个扣这样的话就完成了，然后包括这一段再给它也是不掉啊，就给它注释一下。所以这样的话呢，我们现在就把这个登录做了一个基本改造，也就是说咱们给他写一个固定的值，而不去求接口，因为咱重点不是写接口，接口其实咱也能完成，就是反映这个数据可以做到，咱目前做了一个改造，然后改造之后呢，就是还有一个地方，咱需要找到一个配置文件，就是在U中一个request，把这个名字改成这个token，因为它要取token中这个值。那我们找一下啊，就是在这个U艇。

里边有个request，然后这位置有一个叫做con.header咱里面加上一个名字叫ton，就是这个值。所以这样的话呢，咱们现在把这个登录就完成了一个改造，让他直接写成固定值能登录到我们的系统中去，因为我们他默认情况下是去访问那个e z Mo中的地址，但是e Mo服务器经常有问题，所以咱们把登录直接让它进行访问就可以了。这样的话我们就快速完成了，完成之后我把这个服务咱给他重新启动一下，然后咱们做一个最终测试，就看一下登录最终能不能登进去。咱们等着先求下啊。然后启动之后，它默认用的是9528端口，咱们来到里边，在里边呢，现在我一点登录，大家看是不是登进来了，Name Rose是我刚才写的文me，然后现在我点这个退出，它是不是能退出来。

这样的话，咱就把这个环境做这个改造，比如通过我的描述，大家先知道我们这个环境中目录结构是怎么样的，需要一个了解，然后各位把这个登录功能改成固定值，让他先能登录进去，然后登录进去之后，然后面在里边就可以加上这个路由，完成我们操作。比如咱们之前完成了医院设置接口，然后后面在里边就完成医院设置的前端开发。所以现在这个环境我们就都准备完成了。