55-尚硅谷-尚医通-后台系统-医院设置前端-修改

刚才那种中呢，咱们完成了医院设置的添加功能，那咱们下面来完成医院设置的修改功能。首先怎么实现，给各位先做个分析，大家看我们现在呢，在这个页面中呢，是医院设置的列表功能，而在列表功能中，咱们是不是要做一个修改功能了。那修改功能该怎么做呢？给各位说一下，首先第一个咱们同样在每条记录后面是不是要加上一个修改按钮，就每个里边都加上一个这个按钮，比如现在我给他先写上。然后加上之后大家看，比如我现在我点这个修改，大家说首先咱要干什么事情，或者说要做什么，我点修改首先是不是要到个页面中，把那条记录是不是要显示出来呀，就是咱们通俗说的做一个数据危险，这是我们的第一步。然后回显数据之后，在里边咱是不是能改变数据，最终实现出是不是一个修改功能，所以说大家注意修改什么是两步，第一步先把你数据查出来，做一个回写，然后第二步再做修改。

所以咱们下面把这功能我们就来做一下，首先第一部分咱们先在每条记录后面加上一个聚管按钮，但是加的过程中有这么一个特点给各位强调，因为我现在之前呢，有一个添加页面，我现在想把修改和添加用同一个页面，因为他们都是一个表单，而这个修改的时候呢，大家注意我修改的路径不需要代理显示吧，也就是修改的时候不需要你加个路由做显示，所以咱们首先为了能显示，咱们可以先做第一件事情做什么。我们先。添加上一个隐藏路由。什么叫隐藏路由呢？这路由能实现页面跳转，但是它在里边不会做显示，所以第一步我们先做这个事情，那这路由我就从我的课件中的前面部分给各位复制过来，就是里边的这段话，我把这段话不知道咱们这里边的路由的文件中路由在哪里，各位应该记得啊，是不是在这个root里面的indext中，在里边咱们加上这个路由。

然后路由怎么写，我们看一下啊，首先这个名字，比如说我们叫E，然后这个叫编辑，并且最终让它跳转到咱们这个页面中去，我把页面给它拿回来，这是我们写的这么一个路由，然后这个写完之后，大家看里边的这个地方。给各位强调，为什么这么写呢？因为大家看啊，我们做修改第一步是不是先查询做数据回写，然后根据ID查，而ID查的话，我们是不是要通过路径传，只也就是说你需要在这里边。传入你的ID值是不是这么来做，所以咱们现在在里面加个隐藏路由，而里边写个冒号ID，就表示这个位置需要我们传参数，它就好比说我们之前写过自语中这个问号。

是不一个占位符里边需要串参数，所以我们现在就想这个路由，然后这里边加上我们那个ID值，根据ID值我们可以做入这么一个查询功能，所以这是我们做的第一部分，先写上一个隐藏路由，然后写完隐藏路由之后，咱们下面在里面就是把这按钮先给它加上，那我这里边把这段话我就直接录过来。复制之后放到咱们的list的那个页面中的按钮，位置按钮咱们都在这个位置，那我就放到下面的这里，放到最后这里边我们用到一个标签叫这个路link，就是为了做路由跳转，然后在跳转中大家看这位置，就加上你那个路由的那个路径，因为咱们的路径是这个。

E我加一下啊，就是E，然后加上我们那个ID，就咱们刚才写的我。我们再看一下也是里边的。所以咱们现在把它就加上了，加上咱们这个互由，然后这个加上之后在里边呢，我们要传入就是你的ID值，把ID值需要传递啊，那这路径我们给他看一下啊，别写错，它的路径应该加这个hospital set，然后加上里边的E。加上你的ID。然后这里边给它加上这个空格。这些都加上了，加上之后当我们现在一点击这个路由，它就会跳转到我们这个里边来，然后跳转过程中会把你的ID通过路径传递，咱们把它得到，再做我们的相关操作，所以现在把这就完成了，完成之后下面我们继续开发下面做的适应，就是咱们在里边把那方法是不是给他要定义出来呀，那我现在给他就定一下。

我用之前的咱改一下，这是第一个医院设置那个。ID查询功能。然后第二个还有那个最终的修改功能。就是修改。医院设置，那我们先做这个查询，查询的时候呢，我们调的接口这个get hospital site，然后后面传入你的DD呢，通过它我们做一个判定。这个改个名字，我叫这个get。好的，里边CRID，咱通过表达式取ID，然后这里边应该是一个get提交，这样的话把这个我们就写出来了。然后写完之后，咱们再写这个修改的这个方法，我把这个在下面我们做定义，然后修改方法，我们改个名字，咱就叫这个。Update好set里边传对象，下面加上接口的路径，就是修改路径，Update好set。

把这个拿回来，然后它的提交方式我们看一下是这个post递交，并且它也是用Jason传递，所以我们写到这个date里边传过来，所以这样的话两个接口就定出来了，D之后最终咱在页面中做一个调用，咱我们看这个该怎么做。给各位来写一下。首先各位注意啊，因为咱们现在呢，添加和修改用的是不是同一个页面，比如说我添加是这个页面，修改是不是还是这个页面，但是这两个它里边有一个区别，各位注意啊，就是咱们添加的时候这个位置不需要ID址吧，但是我修改的时候，这里边是不是需要你的ID址，比如说我现在点修改。这位是不是传ID值，所以根据它可以做区分。但是修改的时候都有一个特点，当我们一点修改，这里面是不是就要把你的值查出来做显示啊，也就是说我们一进入到页面就要得到ID值，并且把这数据查出来，所以咱们下面来做这个事情。

那大家考虑一下，咱之前说过，比如说我们现在一进入页面，哪个方法就会知晓。大家说哪个会知晓？用这个方法create，因为create的表示在你的页面渲染之前是不是执行，所以在这方法中咱觉可以做一些事情，是不是可以获取到。写下啊，获取你路由里边的ID值，也就是说把这得到，然后得到这个之后咱就可以调用接口。得到咱们医院设置那个信息，并且在页面中做个显示是不是就可以了，所以现在我们可以这么做，获取路由中你传的ID值，因为咱们刚才写了一个隐藏路由，把这值可以传过来，就是这个值，然后可以传过来之后要把它得到，再调接口做这么一个显示。

那我们来做一下，首先给大家说一下，我们在页面中啊，怎么把这个录用中的值取到呢？在里边有一个固定的方法，大家看这个方法。它叫做。Z4点route.p.ID通过这个可以把你的值得到，那咱下面它就得到一下，但是得知前我们先做一个简单判断，因为这里面添加的时候是没这个值的，所以咱们判断一下，然后写一下啊，就是如果说这里边有参数。并且它里边有这个ID参数，那咱就把这值给到得到，就是这点root.p.ID得到，得到之后咱就调方法做一个操作，那比如说我们来一个cast ID。然后咱们调一个方法，这些方法我写到下边。

根据ID查询医院设置，比如叫get这个。啊，就叫盖头。你写一下啊呃，这括号刚才去多了啊，Get这个好下。得到一元设置，然后在里边我们传入一个ID。咱们调一下，我们刚才写那个接口。好的P。Set，然后你看这个啊，Hospital set，点上我们刚才定的方法就叫hospital set里边传入ID值，加上这么一个就是点份。然后我们加上一个response。箭头函数。通过response可以得到里面数据，就是来一个点data。因为咱们之前在放的时候，咱就直接把这值直接就放进去了，就这个值，所以咱们直接来一个点对，就把这对象得到，然后得到对象之后咱们做个负值，这次点这个set给它，直接就放到我们上面定义的对象中去，因为这个对象在V-model中有双向绑定，所以它就可以实现这么一个显示，然后这个写完之后，在这里边我们给它调一下。

这次点get好的S。里边传入这个ID值，这样的话，这功能我们就完成了，就是现在一进入页面我们就做这个方法执行，然后在里边把你路由中的ID值得到，得到之后咱们去调用接口中的方法，根据外地值得到医院设置的信息，把信息在页面中做个显示。这是关于我们实现的修改中的第一步，就是我们通俗说的数据亏线。在这过程中，各位特别注意第一点，咱们加了一个隐藏路由，就一个hidden处不显示，里边可以传递到参数。然后第二个页面中我们加了一个按钮，传入你的ID值，最终在这个添加或者修改页面中咱们得到ID值调方法做显示，而这过程需要在进入页面就执行，所以我们写到了create的方法中。

这样的话我们就写完了，写完之后最终咱来做个测试，看一下效果什么样的。比如现在我点第一个修改。大家看。这里边咱发现啊，我现在修改之后，咱发现数据好像是没有显示，那咱看一下为什么没有显示，咱把问题来找一下，我们来看一下啊，首先我先点F12，大家看在F12中应该是。没有出现错误啊，里面没有错，但是内容呢没有显示出来，那我们来排查一下，看到底是哪里出现了问题啊，那我们来找一下。我们来看一下啊。

好，各位看啊，比如现在我们怎么试呢？咱在里边啊，给它加一个alert弹出值，看值到底有没有，那我们加到什么地方，这是第一个，我把这个ID咱先阐述一下，看这个值能不能得到，咱先第一步测试，就看能不能得到路由中的ID值，那我现在刷新。大家看这值是不是得到了，就是这个值可以得到，证明这一步没有错，然后这步没有问题之后往下看，因为下面要调咱们接口的方法，就这个方法，那我在这里边，比如说我就把这个response中的值输出，咱来一个response.date比如我点上它那个ID这个数字下，看它这值有没有，然后到里边，比如咱们也是刷新。各位看这个值是不是也可以啊，所以证明到这一步都是对的，然后再往下看，这次点这个值，我们看到问题，或者各位是不是能看到啊，这名字是不是写错了，咱们这里边要复制的变量叫hospital set，刚才我根据提示，比如他给我生成这个名字是不对的，应该给他这点好披S是不是就对了，这样的话，他可以从这个对象中法值取到用V-model是不是做过显示。

所以这样的话我们就完成了，然后比如说我们在刷新。数据是不是都显示出来了，这样的话咱就完成了数据回显的功能，也就是。修改中的第一步操作我们就做到了，然后做到之后我们继续往下来看，下面呢，在里边咱把值是不是可以做一个修改，然后修改之后我一点保存，那这个数据是不是就去改咱们数据库中内容。所以咱们下面把这个功能，我们给它快速完成一下打开怎么做啊，那我们来看一下，首先第一个当咱们点这个保存按钮，是不是要做修改的，但是里边啊有一个小问题大家看啊。之前这里边咱们是不是做了添加呀，而现在这个按钮是不是还要做修改，比如说咱要区分一下这个按钮是做添加，是不是还是做修改。

那大家说我们这个该怎么区分，我是添加还是修改，你说怎么做。希望各位要知道啊，给大家一个提示，我添加的时候。不需要ID值修改的时候，是不是需要ID才可以修改的，所以咱们根据它是不能做判断，也就是说咱们判断我当前的这个对象里边。有没有ID址，如果说有ID址，那我们就做修改，没有ID址就做添加，所以下面我们来做个操作，那我来写一下啊，首先我这么来做，我在这里边呢，先把这个添加方法给它先拿出来，咱们先写到外边，然后最终再来判断调用，这是添加，也就是咱们之前写的。就在那边。我给他先。拿出来。放到我们的外边这添加，然后除了这个之外，下面我们再写一个修改的方法，跟这个方法应该说差不多，咱用它快速改一下，这是修改。

然后修改里边，我给他改个名字啊，我就叫这个。Update，然后修改调咱们刚才定义的这个方法叫update hospital site里边传入对象，最终提示用户说这个修改成功，并且跳转到列表页面，这个方法咱们也完成了，然后完成之后咱在这里边最终做判断，因为咱们现在点保存的话，是不是调这个CO的这个方法。掉它，所以这里边咱就判断一下。我们是添加还是旧改，那怎么判断，刚才给大家说过了，咱们直接判断这个就是this点好PIS这个对象里边有没有ID值就不可以了，就是现在这么写表示有ID，如果说我加个感叹号C表示是没有ID，各位应该知道，如果说里边没有ID，那我们做的。

就是添加操作，如果说里边有ID，那咱做的肯定就是修改操作。这是修改。所以现在我们来调一下啊，添加的话，咱们就是这点这个。C方法做添加，然后修改的话，我们调这个这点。Update方法做一个修改，这样的话，咱们现在把这个最终的修改功能我们就快速完成了，也就是说咱的做法就是调用接口，然后在方法中做判断，如果说对象中没有ID做添加，有ID就来做修改功能。这是咱们编写这个做法，然后写完之后，咱们下面来做个测试，比如现在在里边我改一下，然后我现在啊，把这个西和医院咱就加个一，就为了区分一下啊，加个一。

然后加上之后，现在我点这个保存，这个时候做的是不是应该是修改操作呀，那我们来试一下啊，提示咱们是不是成功，你看里面数据。是不是多了一个一啊就可以了，那这修改做完之后，咱们添加也在做个测试啊，比如咱就简单写几个值，为了它有值就可以，比如现在我做个测试都是四，然后点保存。大家看这数据。是不是也添加进去了，所以这样的话，咱们现在就把修改医院设置功能，我们就最终完成了。各位要牢牢记住啊，修改操作有两步，第一步就是点击修改，先做一个数据回写，然后第二步当你改完内容之后，再点保存，才去改咱们数据库中的这种内容，这是关于我们实验的医院设置的增删改查功能，我们就都完成了。