148-尚硅谷-尚医通-后台系统-用户管理-用户详情功能实现

各位大家好，下面呢，咱们来开发用户详情功能，那用户详情功能我们要做成什么效果呢？我们先看一下啊，之前呢，咱们在医院列表中应该做过类似功能，大家看，当我在列表中点击查看是不是显示医院的详情信息，而现在咱们做的用户详情跟这个功能一样，就是一会儿我们在里边加个按钮叫详情，当我点击详情，会根据用户ID把它的详情信息查出来，最终在页面中做个显示，所以咱们下面就来完成这个功能开发。首先我们还是先开发接口，然后再整合它的前端，那下面咱们来开发一下这个接口用户的。详细功能，然后在接口中，首先我们写一个提交方式，因为它就是根据ID查询，在这里边加上它的路径，比如说我们叫受根据用坏地咱们加一个右赛D。

然后下面加上方法public。Result，我们叫这个受，然后在里边呢，得到传来的U快D就是UID，我们加上pass注解。然后加上这个love user ID。这样的话把这值得到，然后得到值之后，下面呢，咱就可以调用user info service里边的方法，根据ID，然后得到我们的用户信息。而这用户信息呢，里边应该会包含很多的值，比如说包含咱的用户的基本信息，包含用户的就诊人信息等等，所以咱为了后面显示更加方便，我们就让他返回一个map集合，通过map集合咱给他做一个返回。

在map里边的泛型中，Key我们加上string value6咱们叫object，这样的话把这结构写出来了，然后写完之后，最后我们加一个铝做一个返回。Return result.ok里边传入这个map，这样的话CTR了，我们就变形完成了，然后变形完成之后，下面呢再来写它的service，在service中根据用户ID得到用户的详情信息，咱们下面创建出来。在interface中先创建这个方法。然后来到实现内中，把方法我们进一步实现。那这方法写法应该说很简单，咱之前写过很多很多类似这种方法，那我给他就快速写下，首先我们先创建一个map集合，因为它要返回一个map集合。

咱们等于U上一个哈希map，然后创建完map集合之后，我们先做第一步，第一步就是先根据UCID查询出用户的基本信息。然后查完之后第二步我们再根据这个用快递或者说UCIID。查询出他的就诊人的这个信息，把这两个信息我们都经行查询，那咱们先来查询第一个信息，第一个信息呢，我们调这个base map中这个方法，调select白D里边传入UCID，然后这样的话得到的就是我们的用户信息，但是得到用户信息之后，因为在里边的有一些编号，咱们需要把这编号是不是转换成对应的那个文字，比如说这个零一对应锁定正常，比如说里边这个认证状态，咱是不是要变成编号了，所以咱就调刚才咱们写过的这个方法，把它做个转换就可以了，那下面给它就快速写下啊，咱们调这个this package user info，然后调里边这个方法，得到里边这个对象，最终完成这么一个封装，这样的话就把信息得到，得到之后，咱给它放到我们的map中去，我们起个名字。

User info。它的值就是user。这样的话，我们的第一问数据就完成了，然后完成之后我们再来调用第二部份数据，根据用户ID得到我们的用户里边的就诊人信息，而就人信息呢，在user info中我们肯定调不到，所以咱们需要给他注入另外一个service。我注意一下啊，咱们之前刚写过就这个patient。Service。咱们从patient里边调方法，最终做实现。

那我现在给他就调用一下啊，调一下里面这个方法，我们写到刚才的这个位置。那咱们看一下啊，在这里边呢，咱们应该有这个用的方法，我们叫find的ou CD，根据用坏D得到咱们的就诊人信息这个列表，然后它返回的应该是一个集合的形式，比如我们叫patient list，最终把它也是放到咱的麦机构中去，咱们叫这个。Patient。List，然后这个是patient list，所以这样的话，这些数据都得到了，得到之后最后咱把map做个返回，这个接口咱就完成了，根据用户ID得到用户的详情信息，这是关于接口开发，各位把这接口快速写出来，然后写完之后下面呢，咱们快速把它的前端整合出来就可以了。

那前端怎么做呢？因为现在我们要实验就是这个位置加个按钮，当我点按钮要根据ID调用接口查数据，所以首先呢，我们先加上一个隐藏路由，这路由不在里边显示，但是为了一会儿跳转中要使用，那我们给他再加一下啊，我就从课件中直接复制了，加上这个路由。做我们这个就是详情查看的这么一个跳转使用，那咱们找到这个router里面那个index.js文件。然后在里边把这路由我们给它加上，就加到。这个位置，比如我们给他改一下啊，我们叫这个用户的查看，或者说用户的详情。现在把这加上了，然后大家看啊，在这里边呢，一会儿咱让他到我们的这个页面，就是这个售页面，在里边专门显示我们内容，然后在内容中呢，咱路径这个路径里边有一个冒号ID，需要传入咱们的ID值，那我先把这页面创建出来，防止它报错。咱们在这个。

找到啊，User里边的user info中先来建那个受点不。这么一个页面。让他先报错，所以现在这个隐藏路由我们就加进去了，然后接完之后呢，下步操作在user info中把这个接口路径我们做个定义。用户详情的这个路径跟上面基本一致，那我从里边直接给大家说过来，就是这么一个方法。我们写过来啊，咱们调这个。API内幕中的受，然后后面传入你的ID。它里边的参数就是这个值啊，它是用get提交啊，这是一个定义，然后这个定义之后，咱下面做这么两件事情，第一件事情在我的操作的位置加上一个详情或者查看按钮，然后第二步在详情页面中写入我们的内容，那咱先把按钮加上，这里边我加的一个叫router link，咱们放到这个列表页面中那个操作位置，就刚才我们写这个。

这个地方。我们在里边加一下啊，咱们加上一个叫router link，然后router link里边大家看我们写的是user user info受也就是刚才里边的。这个地方u INF photo后面传入当前ID，然后这个名字我们叫查看，查看之后它会跳转到咱这个售页面，在售页面中再来调用一下我们的接口，最终做显示可以了，那我把受页面给各位复制过来，来，我们来详细看一下里面的结构。我们来看到啊，首先里边我们会显示我们的用户信息。

我往右给它格式调整一下啊。是用户信息部分，然后在用户信息中我们主要显示有这么几个值，第一个就是他这个手机号。然后包括有用户姓名，用户状态等等内容啊，也就是这些内容你看都是我们从里边能得到的，然后除了这个之外，下面啊，咱看这状态状态中我这里做了一个判断，如果它的状态值是零，我们是锁定啊，否则就是正常等等这些值的显示，然后下面有它这个。注册时间相关的信息，所以这是关于我们在里边做一个显示，但是这个属性名字如果一会儿缺少，咱再给他再还站出来啊。呃，这里少了一个箭空号啊，加上。然后除了这个之外，下面是我们这个认证的一些相关的信息，也就是在我们的这个位置。然后把这个也是调整一下这个格式，然后在这个认证信息中，大家看到啊，在里边有咱们这个姓名。

包括有里边那个证件类型，证件号，包括证件的图片等等信息，这个位置应该都进行了这么一个。显示啊，都是写到这里边，然后这位置这个证件类型呢，咱是通过那个user info取出来的，那比如说我们看一下这个user侧音里边那个证件类型的那个属性应该是它。这个证件类型呢，因为咱们存到里边直接就存这个身份证，并没有存这个编号，所以这个值我们应该是直接能给它取出来就可以了，就是里边的这个。然后除了他之外，下面你看啊，有这个就诊人的这个相关的信息，比如说里边的这一部分，关于这个就诊人，然后就诊人信息部分，我给他也是在里边写出来啊，包括你看啊，就是有这个咱们把它，因为它是一个集合嘛，所以咱把这集合需要给他做一个便利。

然后便利之后，我们得到里边那个具体这些内容，最终咱给他做这么一个显示啊，也就是里边的这个地方。这个我们看一下啊，就是这些显示最终能在页面中出来就可以了。这格式我先调整一下啊。然后这些页面部分呢，我们都看完之后呢，最后那就是咱们的调用部分，在调用里边大家看写法中啊，首先引入JS文件，然后引用之后date中定义它的变量和初始值啊，这里边我们都做了这么一个定义。然后定义之后咱往下看，下面呢，我们有一个的方法在create里边，我们就是执行这个叫f date by d，根据外地提到里面这个值啊，包括你看MY中有咱们这个调用的这个地方。

也就是在这个位置根据ID把值取到，而这个ID值呢，我们注意是在里边的这个地方取到的啊，那我们找一下这个ID值这个位置啊，就是这个受的这个地方。大家看啊，这个地方呢，就是在这里，咱通过路由这次点route.pid，那把值是不是取到，因为咱是把ID值直接给它传过来的，所以这样的话，最终我们这个过程应该就能实现出来，这就是咱们整合的。用户详情部分，咱把它就最终做到了，所以各位能按照这个过程把咱这代码给它能够最终写出来，接口部分包括简单部分，现在这咱们就完成了，完成之后呢，最后呢，咱们把这个代码我们来做一个最终的测试，就看一下最后的效果，能不能得到我们的讲的结果，咱这结构就是查看响应部分，那下面我们来测试一下。

咱们打开这个页面，然后页面中，比如说现在我点击查看，大家看里边是不是显出内容啊，当然第一个这个用户，它里边没有什么数据，咱们找一个有数据的点查看。各位看到数据是不是显示了，包含里边的信息，认证就诊人信息，包含这个图片是不是都显示了，然后里面一个小问题啊，大家看手机号是没有显示，那我们看一下是不是这个属性写的不对啊，然后手机号这里写的叫mobile，然后咱们看一下我user info里边这个手机号是不是叫phone，所以然给他改一下啊，这名字写的不对，应该叫做phone。改完之后到里边我们再看一下。手机号是不是显示出来了，所以现在咱就把这个用户的详情部分就完成了，包括在这个里边主要有这么几个功能，第一个功能用户列表功能，第二个功能用户锁定功能，第三个功能用户奖金功能，现在这三个功能我们都完成了开发。