139-尚硅谷-尚医通-前台用户系统-用户认证-前端整合

下面呢，我们来整合用户认证的前端部分。在前端里边的，首先我们找到相关的页面，在咱们的买head里边，大家看到啊my head里边的这个位置，我们做了一个判断，我们看之前我们写过的这个过程，如果说你这里边就是内部值等于空，那我们就显示登录注册，然后咱们进行操作，如果说它不等于空，那我们就显示你的用户的名称，然后在下面有一个下拉列表，显示里边内容，在内容中呢，各位看到有一个叫。实名认证挂号订单就人管理，所以咱们现在做的就是实名认证部分，而在实名认证中各位看到啊，在这里边呢，有一个超链接叫做杠user，也就是说我们点击实名认证，它要跳转到杠user的页面中，然后显示你的认证的这个内容，咱们做认证的尽快操作。

那这杠U侧这个路径他该怎么进行跳转呢？给各位先做个说明，然后一会儿咱来开发，不说各位同学啊，是否记得我们现在呢，开发咱的前端部分，咱们用到的是一个框架，这框架叫做NAS，是一个基于服务端的渲染技术，而在na中的一个内容，它叫做路由。路由里边呢，有两种路由，一种路由它叫做动态路由，还有一个路由叫做固定路由，动态路由咱之前说过，比如说我反路径的时候，假如说我的路径的比如说啊是这个叫hospital，后面加上你的ID，那这样的话呢，它会跳转到咱的动态路由里面去，而动态路由呢，创建方式咱们是不是以下游线开头，后面加上参数名称，点上是不是这个vuee页面，这是咱们之前说过的动态路由，而现在呢，我这里边它的路由是不是叫杠userr呀，所以杠U色呢，是一个固定值，它是一个叫固定路由，而固定路由该怎么跳转呢？给各位说一下啊，因为我们在这框架中，页面是不是都写到了配置里边的，如果说你写的路径叫杠U色，那它会到配置里边找到这个页面，我写一下。

就是配里边找到一个文件夹叫做user，然后user里边呢会找到一个叫in代点vuee的页面，也就是说咱们一会儿需要在配里边建个文件夹叫user user中呢建个页面叫index.vuee它默认会找到这个index.voe的这么页面，这个就叫固定路由，是我们说的这么一种跳转方式。所以这个给各位做介绍，一会儿咱就来创建这么页面，这个做一个说明，然后说完之后呢，咱下面就往下做，因为咱们之前呢，开发的这个就是相关的接口，在接口中呢，我们有两接口，一个是用户认证接口，一个是获取用户信息接口，所以咱们把两个接口在页面中，就在我们的前端先做一个定义，那现在我来定一下。

我们找到在API中有个JS文件叫右侧info，然后右侧info中呢，我们写上这么两个，就是相关的这个路径，那我在里边给各位来写一下啊。首先我先加上注释啊，这是咱之前写的第一个，我们做那个就是。登录的，或者说具体说是手机登录的接口，然后现在我们来写上第二个接口，第二个接口呢，就是做这个用户认证的。这是一个接口，那用户认证呢，我们看一下里边结构跟他一样，那我就从我的课件中把这个就直接复制过来了，就是里边的这个接口。

给各位拿过来，比如我们起名叫这个CU啊a uth。然后里边加上这个叫user。把这个啊改一下UU。咱们通过调用咱们里边的这个内容。然后我们看一下啊，改一下啊UA。然后这位置有它的路径，我们看一下路径啊，这个路径呢，叫A片U色，然后加上U里边这个叫做U色or，我把路径给它复制过来。写到这里。这一个不要写错啊。这样的话，我们把它就写完了第一个接口，然后写完之后里边还有第二个接口，第二个接口就是根据咱们这个UCID获取到你的这个用户的信息。

获取用户的信息，然后里边是这个接口，我把这个接口给他演示拿过来。放到我们的这个位置，所以现在这两个我们都写完了，这个接口的路径我们也是检查一下啊，它叫also get user。这个。为了防止错误，我把它重新复制过来。然后他用的是get提交上面这个用的是。POS提交，并且用的是request body，所以这样的话呢，我们在这个JS文件中把两个接口，咱们的叫把这个定义这各位给他呢，快速做到，然后做到之后呢，下面咱就实现，当我点击这个实名认证跳转到咱的页面中去，那现在把这个页面再来创建出来，按照我刚才说这个固定路由方式。在配里边呢，咱们首先一个文件夹，我们叫做user，然后user里边呢，建一个文件叫做index.voe，在index.vouee中写上我们内容，那这内容呢，我在课件中写出来了，我把这段内容给各位复制过来，然后咱们详细看一下里面的内容是什么，因为都是我们之前写过这些东西，那现在我把它复过来了，再来看一下啊，里边有什么内容。

首先我们看啊，上面部分呢，是我们的页面部分，然后页面部分有它相关内容的显示，首先里边的第一部分这个位置就是显示你的相关一些信息。然后下面呢，显示它的其他内容啊，比如说你的名称，证件类型，证件编号等等，然后在这里边呢，是它那个调的部分，然后大家看啊，首先第一部分我们引入了一些相关的CS文件，是为了我们样式做准备的。

然后set文件在这个，呃，Set里边CSS中有咱们相关这些内容啊，就是里边这个hospital，包括这个person。然后包括里面那个叫hospital personal这些JS文件，就是样式文件，然后第二部分呢，引入了两个JS文件，一个是地。一个是这个U下面第几个固定值，这就是我们说那个名称，证件类型，证件编号等等，这是它的一些初始值。在初始值中有这个东西，这各位注意啊，这个是什么呢？是咱们之前写那个文件上传接口，因为咱们要上传那个证件一些相关的图片，然后这个路径呢，要跟我们写那个上传那个路径要保持一致，我们来找一下啊，之前咱们开发过的路径，就你按照我们的课件把这路径一些纸改正就可以了。

然后我这个叫A片oss fileload。这个路径，然后下面我们有这个调用，首先你看啊调用中。In need中是得到用户信息，还有这个de的那个数据字典信息，Get user INF调用咱们刚才写的方法，Get user info。得到你用户信息嘛，然后把这得到，然后得到这个之后，这部分是在那个认证的部分，在认证中，首先我们这里边就是调用这个相关的方法，我们叫save user u，好把这方法改一下啊，咱们别写错。Save user里边传入咱们这个对象。那这对象我们看一下啊，User author啊，应该是ath啊，我就写它了啊，因为这个就是这个值，然后最终我们调方法进行认证，然后把页面重新reload，包括里边得到这个地，就这个地，目的呢，咱为了得到我们那个就是证件的新闻类型，比如说我们选择类型的时候，有你的身份证号，有你的护照，有你什么军官证等等，用它自我查询，然后下面这个部分什么意思呢？就是咱们在上传之后，当我上传成功之后，它会调里面这个叫on outload的S方法，然后里边咱来做这个就内容就是把这个文件列表进行填充，在这里边传上咱那个就是相关的列表啊，就是那个路径，最终做到。

也就是说咱那个头像嘛，然后那个内容有它那个上传之后的路径。所以现在呢，我们把这个就完成了，包括咱再往上看啊，上面页面部分的这个地方，就是咱说那个上传组件，然后上传组件用到的是这个I的UI中个e uplo，这样的话呢，咱们把这前端就给它快速找出来了，各位还是重点放到这个部分，然后前端能按照我的课件中的流程把它能够整合出来就可以了。

这样的话，这个答案就完成了。然后完成之后呢，现在咱完成了用户认证的这个前端报告接口，最终咱们把它做一个测试，目前前端我们先讲到这里，然后下面咱们开始做这个测试。下面呢，我们先把服务器建行起来，我们启动一下接口部分我都已经行起来了，然后咱们把前端做个启动。启动之后，我们再进行相关的测试。咱们等他先清起来。现在已经启动了，然后咱们打开前端页面，在页面中首先我们先登录进去。登录之后呢，进行实名认证。

现在我们来登录获取手机的验证码，我现在获取一下。验证码，我这里边已经得到了374746，我在里边输入一下。374746，然后咱们点击登录，登录之后在这位置显示我们的昵称，然后显示昵称之后大家看啊，里面有一个下拉框，我们有一个叫实名认证，当咱们点实名认证之后，会跳转到刚才我们建那个user下边的index页面，那我们一点大家看是不是进入了，然后进入之后在我们的这位置，咱们能够提交一些就是认证的信息，那比如现在我在里边提交一下，首先第一个就是我们的这个名称，比如说我们给他随便起个名字，我们叫这个。张小宝，然后第二个是证件类型，有身份证或者户口本，那我选择身份证，然后第三个是证件号码，那我来写一个证件号啊，随便写一个。

199909097896，这里边要上传你的证件那个图片，就你身份证号这么一个身份证的图片，那我就随便啊找个图片再来上传了。我传一个图片，这传图片要调用咱们之前写那个oss上传接口，然后这些信息都写完之后，最后点提交就可以完成这个认证，进行添加，那现在我点击提交，现在就完成了，完成之后里边显示了我们的名称类型，还有刚才写的身份证号，所以这是关于用户认证的部分，然后认证之后呢，我们来到这个数据库表里边，在这个user表里边，我们刷新大家看啊。我这条用户的名称，身份证号码，包括里边有我们上传那个图片的路径，这些东是不是都存在了，并且这个值变成了一，目前正在认证中啊，但是这个认证过程呢，我们需要平台进行审核，审核之后才能认证，完成认证，但是目前的过程应该已经完成了，就是关于用户认证部分，咱们现在就把接口和前端都完成了。