59-尚硅谷-尚医通-后台系统-数据字典前端-列表

各位，刚才内容中呢，咱们完成了数据字典接口的开发，我们实现了数据字典列表功能，那咱们下面把数据字典的前端部分我们来做实验，也就是在我们这个前端页面中完成我们这个功能，那咱们下面来做开发，因为之前呢，我们开发过这个医院设置模块。所以现在再来写前端应该会特别的容易了，因为跟之前的代都差不多，那咱下面我们来写一下，首先我们的第一步。大家需要做什么？第一步呢，咱是不是要先加个入由啊，因为咱们现在是一个新的模块，那我现在来到这个s RC route特里边的音带点G在里边，我们加上一个路由，那路由我就用之前那个，咱们给它快速改一下，我们给它改一下。首先在里边我们加上一个，因为咱们用的是数据字典，比如说我给他起个名字，我就叫这个CMN，然后这里边我叫CMN，这个我们叫粒子等。

这个名字我们就叫做数据，呃，比如咱就叫数据管理，然后下面叫数据字典。数据管理，然后第一个这个路径我们叫list，它的名字就叫数据字典，下面这个也叫数据字典。然后这个暂时不需要，因为咱们只有一个透明模块，所以现在把这个我们就加上了一个路由，这是咱们的第一步。然后路由加上之后第二部分。因为我现在点击路由是不是要跳转到某一个页面中去，所以第二步呢，我们就来创建一个页面。那我在里边做创建。首先我就在这个位置，咱们先创建一个文件夹，比如我就叫这个。DD口，然后在D里边呢，我们建一个voe的文件，我就叫list.voe这个咱就完成了，完成之后把路径改一下，这路径我们叫这个D口，这个是。

List，所以这是我们的第二部分添加页面，然后添加页面之后，因为咱要调接口，所以第三步呢，咱们也是在API中呢，建一个JS文件，然后里边写上我们的方法，那这个文件我用之前的咱们给它快速改一个，我们几个名字就叫d.JS。然后在里边咱们来写一个里面那个接口的路径的定义。我就保留第一个，然后其他的给它去掉。我们是数据。字典列表。然后这个我叫D口be。在这个地例子中呢，咱们传入的就是我们这个数据字典的ID，然后下面调用我们的接口，咱们这个接口应该是一个get提交，然后这里边加上路径，路径我就从这里边咱给它直接汇过来。

就前面是我们的这个名字INC，把这个我先拿过来放到这里，然后后面呢，加上咱的名字，我们叫find child date，后面传入一个ID。ID咱用表达式直接装进来，这样的话接口就定义完成了，然后定义完成之后，咱们下面在页面中是不是要做一个调用了，调用的话，首先我们因为上面有一个to，然后在下面是我们的Java部分，所以咱们先把Java wood完成，然后再写我们的页面的部分。那在扎损部分怎么写？各位说怎么做，首先第一个咱是不是叫接口，那接口这个文件给它是不是先要引入进来啊，那我们加上一个import d口from，加上路径at斜杠API。

D口这就引入了，引入之后在这里边写上咱们代码的结构，咱之前写过，我就快速写下了，第一个是一个叫date方法。然后在date中呢，咱们是定义变量和初始值，第二个我们叫可的，这个方法是在页面渲染之前执行，里边一般是调方法，第三个叫method，就是咱们写的具体的方法，所以这样的话把结构我们就写出来了，然后写完之后，我们在method中先写上一个方法，就是我们的那个D口，那个列表的数据，比如叫。Get d口。例子，大家写上这个方法。然后在里边，比如现在这位置，我们就传入一个ID，然后在方法中呢，咱们调用咱们接口中定义那个方法，就是这个方法，我们刚才叫D口。

例子的。然后里边传入一个ID，咱们加上一个点阵，点阵里边呢，加上response箭头函数，通过response得到咱们的具体数据，因为它的数据咱刚才测试中也都见过了，就是里边的这么一个结构，比如说啊，这边来一个一。咱可以再测试一下，得到就是这个数据，然后咱们现在把这数据就可以给到最终得到，其实最终得到的是不是就是里边的这部分。就是里边有个date，那咱给它写一下啊，首先我在上面呢，先来一个变量，我们就叫。List里边放数据，然后这里边我们做过赋值，这点list等于response。点data。这样的话是不是就可以了，我价格出示啊，就是我们这个数据。字典。列表的这么一个数组，然后咱们往里面赋值，这个就是。

数据字典的列表。所以这样的话，这个结构咱们就完成了，然后完成之后呢，大家注意，因为现在我们一点击路由，在页面中是不是要调这方法呀，然后把数据制作查询，所以现在我在create里边来调用一下，就是这点get list，然后这里边传一个ID。但是这ID传什么呢？大家看啊。我现在这数据库中呢，已经提前把数据都导进去了，我在资料中给大家都提供了原始数据，然后咱们现在要查的是不是要查全部数据，而全部数据大家看它的ID是什么。是不是就是一呀，所以这里边我们就直接写个一，就把全部数据都查出来，然后在里边做显示，所以这样的话，咱们现在把这个过程我们就完成了一个最基本的调用，各位把这要给他知道。

然后这个完成之后，咱们再继续往下来做，我们看怎么做啊，大家看啊，首先现在呢，我们要做的话，肯定是用我们IUI中这个表格组件，也就是咱们刚才看到的这部组件，那这组件我们在里边给它直接用下就可以了。那这组件我在课件中给各位已经写出来了，然后我现在把课件中这个代码咱们直接复制到页面中，咱给他快速改一下就可以了，因为这是IUI中给咱们提供的这个代码。那我现在把它复制过来到我这个汤中。我把格式稍微调整一下，然后咱们给它快速做一个修改。就是里边的这个结构。稍微调整一下啊。然后这个结构中呢，有这么一个地方给各位特别说明啊。大家看啊，就是我现在呢，在我这表格中，比如说我们第一次进入是不是显示这个数据啊，当你点击这个箭头是不是显示里面的内容啊，所以这里边要显示出有一个层级的关系，这个咱要有个体现，比如说我现在当我第一次查我查的数据，大家看啊，比如这个值我查一，你看我的接口中，我一查出数据是不是有这个省。

医院等级、证件类型是不是有这个学历民族，比如现在我想查医院等级，下班中心是不是要查这1万呀，我想查证件类型的写法内容是不是查这2万呀，以此类推，所以咱有一个层级的这么一个查询，而这个查询如果说咱们自己写代码，写接口，咱们要写一个递归操作，依次往下查，但是现在在MUI中，他把这功能帮我们做封装，让咱们可以用最简单的方式把这就可以做到。那它怎么封装的，给各位来说一下啊，大家看啊。就是目前呢，在这里边格式我先调整一下啊，因为这里边有一个空格没有写出来啊，稍微快速调整一下。

就是这些啊。这应该可以了啊，然后咱们看啊，在组件中呢，它封装的是在里边的这三行地方，主要就是这三行，然后再看什么意思啊，第一行叫date，这date呢就是你查出来的数据，而这个数据就是咱们刚才定义这个变量list，所以你这个在里面有体现，然后除了它之外，下面还一个叫冒号漏，注意啊漏什么意思。是不是加载要自我强调，这漏什么意思呢？它就表示当我们现在点这个箭头的时候，这里边要显示它下面的另外一个层级那种，比如说我这是第一层，火电箭头是第二层，有第三层点，是不是还有第三层显示，所以漏的里边是做这个操作。但这操作中咱需要再来一个方法做这个查询，这个方法我先写到下边，咱一会儿给他完善出来，这里我写一下啊，就是咱需要再来一个方法。

这一方法做的事情就是查询你下面的。层级的那种。比如说我现在查第一级，下面的第二级或者第三级或者第四级内容，这是里边有调令方法，然后除了这个之外，下面有这部分叫tree pro，它表示什么？就是你数的这个属性值，比如它通过这个判断你在哈希丘的里面这个值是true还是false。比如咱们刚才在返回例子中，你必须有这个属性，它根据它来做个判断，这个值是处它进行显示，如果它是false，它就不往下进行显示。所以咱们在反数据中必须要包含咱们的。这个属性叫哈希children，这个我要知道，然后这些都说完之后，这里边你把值都传正确，主要是这个方法需要咱们来写一下，那怎么写大家看啊，在它的源码里边给我们都提出一个结构，就是里边的这个结构。

注意看，就这个结构。然后它里边有三个参数，第一个叫tree，第二个叫吹not，三个叫这三个方法，然后这三个什么意思呢？我把这方法给大家拿过来，然后咱们详细解释一下这个到底是什么含义，这个我先拿过来啊。然后咱们来说一下这个方法，它到底是什么意思啊。我先给它放到这里啊。呃，把这多余的去掉格式我先稍微调整一下啊，给它快速。调整一下。那我说一下它的含义是什么啊，首先现在这个方法表示它可以查询第一级下边的第二级，第二级下面的第三级，其实它里面做的就是一个递归操作。在它的递归操作里边怎么做呢？比如我第一次大家注意我查的是不是第一级啊，而第一级之后呢，当你点第一集里边那个箭头，它会怎么做？

就是什么意思呢？我现在比如说你看我这个位例啊，现在要查出是不是第一级，第一级里边当我点箭头，这是不是你第一级啊，它会查你点箭头第一级下边的第二级，如果你还有，那再查里面的第三级，所以这个方法做的就是一个递归的查询，然后里边通过这个tree.id就是你这个第一级下边的ID，然后它里面内容，最终把这内容再做一个显示。所以它里面就是这么一个过程，通过它就能实验出一个层级的显示，这一过程是由UI中做到，也就是我们之前说的递归，当你查一级，再查里面第二级，再查第三级，直到查不出数据为止。而它里面通过漏加这个方法依次给你做查询，你看我里边调的方法。是不是还是这个方法，第一次做调用就实验出一个递归，最终能做到一个层级的显示？所以咱们现在把这个功能我们就最终完成了，关于我们的数据字典列表功能实现。

然后洗完之后，咱们下面来做个测试，看一下它的效果到底是怎么样的，我们来测试一下啊，咱要通过local house528做访问，在里边我这个位置，我们来点击这个内容。数据字典啊，那我们看一下啊，这里边啊报了一个错，咱看什么问题啊。首先啊，我们先排查一下这个问题所在啊。然后现在呢，出现了错误，咱们看什么错误啊，我现在把F12点开，然后咱们看啊，在里边它报了一个错叫ne idol，那什么错误呢？给各位来特别强调一下这个问题所在啊，首先第一个咱解决一个小bug，你看啊，我这里显示是不是叫数据字典呀。而我刚才写路由的时候，咱是不是还有一个叫数据管理下面的数据字典，所以现在一个小问题就是现在他只把这个显示，这个没有显示，而这个怎么做呢？我强调它问题是哪里，因为我现在在下面只有一个子目录，所以它只显示你下面这个，而让它都显示怎么做，但在上面可以加上一个属性就可以了，这个属性我们到课件中找一下，就这个属性。

注意看，叫always show，它的指示处表示它总是显示。给它把它加上，然后咱再做个测试，你看现在是不是可以了，这个出来了，然后这个出来之后，咱看目前报这个错，这个错是什么呢？我们先把network打开，然后里面刷新。大家看里边它的问题所在啊，我们找的这个接口地方在这里，就是这位置它报的错误，那各位说这错误是什么错误。你说这个问题是怎么造成的？我希望各位能想到啊，大家看啊，它这个端口用的是不是叫8201啊，但是咱们目前的接口端口大家说是多少。

是不是叫8202啊，我们用的不是8201，所以现在仿的接口是不对的，那这不对，为什么不对？咱们在前段中曾用在一个地方做个设置，就是里边的这个地方。当时咱们的接口是不是叫8201啊，而现在用的是不是应该是8202了，那大家说这怎么改呀？你说怎么做？有同学说我这里边是不是可以再加一个叫8202可以加，但是你加了之后有问题啊，因为这个接口的地址呢，在我们这个文件中要做个调用，也就是里边的大家看是这个位置。他要把这个地址做一个调用，然后用地址和你那个接口路径拼成你的访问路径，但是如果你改的话，那这里边还需要改，另外还需要做各种判断，也就说咱们目前我们不是一个端口，而是多个端口，而你不同访问要经过不同的端口才能访问到，咱目前如果你直接这么写，那肯定访不了，因为你要设置成你不同的端口。

那这个各位说该怎么做？不知道各位是否能听懂啊，我再说一遍，因为咱们现在呢，我们在访问过程中。咱们后端就是接口中有多个端口，咱们最开始医院设置是8201，目前这数据字典叫8202，而我要实现当我做医院设置是不是要访问8201，我做数据字典是不是要去访8202，因为他们是不同服务器，而在目前的过程中，咱们只配置了8201，而没法去同时配置多个这个端口，因为后面咱会有更多端口，那大家说这问题咱怎么解决？怎么让你不同请求访问到不同的服务器中？各位说这该怎么实现？你会怎么做？给大家说明这个解决方案啊，方案肯定有多种方式，咱们现在呢，将一种比较常见的方式，就是用一个工具叫什么。

NEX做一个请求转化功能，然后咱们后面再用这个，因为网关再做个实现，我们先用NEX做个实现，那咱们一会儿先做配置。但是现在呢，咱先把这内容先让它有效果，一会咱再配上这个，那我先这么做啊，我就先改成半一半，一会儿咱们加上N这个之后再给它做个解决，N这个一会我做一个向你说明，我先这么改，然后改完之后我们再试一下这个问题啊，现在我把这个前端转给他。重启一下。重启之后我们再做测试，但是这测试中呢，其实还有一个问题，这些问题我就不演示了，之前演示过什么问题呢？给大家一个提示啊，咱之前说一个东西叫跨域。各位还记得吗？什么叫跨域？就是你的协议it端口号有任何一不一样，是不是叫跨域？咱目前多少号是不一样，所以会有跨域，那跨域怎么解决？怎么解决？

咱们在CTRL上面加上一个注解。是不是就可以了，所以目前这个问题我就直接避免掉了，咱给他直接做个访问，所以咱们现在把这个接口和前端都给它做了一个修改，然后咱们再做个测试，一会儿咱再改成N这个做最终实现目前让他先有一个基本的效果。好，现在都可以了啊，然后可以之后咱再重新回到这里面来，我把F12也点开。然后回到之后，现在我再点击数据字典。大家看里边，我们清楚的看到这数据是有了，就是现在数据就做了一个基本的一个显示。那我们就初步做到了。但是呢，各位同学啊，我们来看一下啊，目前呢，虽然说做了显示，但是有一个问题，因为咱们这个省医院等级类型，学历，民族是不是有一个层级的关系，省下没有市医院等级下面有不同等级，但是目前我们这么做，大家发现好像这些没有显出来吧，也就是说我们没有做到类似于这种效果。

这个是没有，所以咱要看一下到底为什么没有出现，首先我们检查一下代码，代码呢，其实咱是参考里面的这个代码，做到了大家看代码中data中是你的数据。然后里边有个漏斗，包括有一个tree pro，然后在下面它里边是对应的这段数据，在数据中各位看到里边有一个叫哈希丘疹，是true，然后它会加载这个数据，所以咱看一下我们这个结果中跟他应该基本上是一样的，只是咱的方法名字不一样，别的都对，比如我这个数据中有哈西丘队，然后咱们在接口中也有这个值是true或者false，如果true的话，它理论上应该会这么显示，就是里边有一个箭头。然后咱一点应该能得到我们的数据，但是目前它是没有的，那我们就看一下到底是什么问题产生的，首先咱们先把F12点开，我们先看一下目前这过程中，比如我现在刷新。

大家看到目前应该没有报错所证明这个代码，这过程应该没有问题，那我们看一下这到底是什么产生的，这个问题我们来看一下啊，首先我说问题所在在哪里，各位看到目前的这个IM的UY一个版本是不是叫2.14.1是它目前的最新版本，而咱们看一下我们这个项目中用的IUI是哪个版本，所以咱们怀疑是它的版本问题造成的，那我们来找一下啊，咱看一下版本。首先我们看怎么看版本，在项目中有个文件叫pater.Jason咱们把它打开，然后各位看目前的版本是不是比较低呀，是2.4.6，而它最新版本各位也看到是多少，是不是2.14.1啊，所以咱们找一个高的版本来试一下，比如说找这个2.12.0版本应该差不多，那我们给他改一个版本啊，2.12。

点零改一个新的版本，然后改完版本之后，咱把它那个相关的依赖给他先重新下载一下，然后咱们再做测试，那下载之前呢，我们先把它里边已有的依赖先给它删掉，那我来找到给它删下啊，在我们这里，我们的项目中有一个node models里边有那个iman的UI，那咱把它找到。就是E开头的M的U。我们来找一下啊。应该在里边的就是。这些位置啊，我们找到找到那个IUI，然后给它删掉，删掉之后咱把依赖给它重新下载一下。好，我们看在这里啊，那我现在把它就删掉。

然后删掉之后到这个位置咱们重新下一下怎么下载，之前咱们说过用NPM。因此都是不是可以了，那我们用命令把这依赖我们给它快速下载一下，咱们先联网，等它下载完成，下载完成之后我们再做个测试，那我们先稍微等一下，然后咱们最终看一下实际的效果。好，各位看啊，目前已经下载完成了，他下的是2.12.06版本，就是这个版本应该已经下过了，然后下完之后，我们下面把这项目给他再重新启动一下，然后咱们再做一个最终的测试，看一下最终的结果能不能出来。我们等他启动。然后咱们测试。现在已经挺起来了，那我们来到这个数据管理中的数据字典部分，看一下最终的效果到底对不对。

那咱们现在点一下，我们来看一下啊，大家看现在效果是不就对了，我们点这个首下边是不是有是是下边是不是有曲线，是不是效果都出来了，包括比如我们点医院等级有一级二级，三级，点这个证件类型，点学历，包括点民族，我们清楚看到里边这个层级关系是不是都做了一个显示，所以这样的话，咱就把这个数据字典列表我们就完成了。然后完成过程中呢，在里边呢，还有一个细节给各位说一下，咱们看他这个官方的示意代码中有一个地方就一个单词叫LA。这什么意思啊？Lazy是不是有懒惰的意思，所以现在这个过程其实是一个懒加载过程，或者说叫延迟加载过程。什么叫延迟加载？就是我第一次查只查你第一层的数据，当我点的话才查第二层，我再点的话才查第三层，就是你什么时候用，我什么时候再去查数据库，这个叫延迟加载，或者说叫懒加载。所以现在咱们就完成了数据字典列表的前端开发，把这个功能我们就最终实现出来了。

然后这过程中用到就是I的UI中的组件就能做到，因为它里边帮我们把这个就是树形结构显示已经做到了，所以在用的时候注意就是刚才我们这个版本问题。我们最开始版本比较低，它不能显示，所以咱们找了一个高点的版本，或者说你用最新的2.14.1，那它肯定可以显示，所以这是关于数据字典列表功能的最终实现。