54-尚硅谷-尚医通-后台系统-医院设置前端-添加

各位大家好，在刚才内容中呢，咱们完成了医院设置的锁定和取消锁定，那咱们下面继续往下开发其他功能，下面呢再来完成医院设置的添加功能，把这个我们做到那里怎么做，给各位来做一个简单分析，大家注意。首先，现在。当我点击医院设置添加超链接的时候，咱们应该做什么事情，是不是要到一个表单医院中学，就类似于里边的是不是这种效果，在表单页面中咱们能输入医院的接换信息，然后我点确定把信息是不是加到数据库中，而加完之后咱里边怎么做，是不是可以跳转回到我们的列表医院中去，所以咱们现在就来做一个医院设置的添加功能，把这个我们给他最终开发出来，那咱下面来写一下。首先第一步我还是在这个JS文件中先定一下咱们接口的路径，就是添加。

医院。设置，那这个我在里边写一下，比如说我们起个名字叫这个C。Hospital。下一头。然后咱们添加的时候呢，咱们看一下我们之前写的接口地方找到添加方法，大家看添加方法应该是里边的这个方法。然后在方法中，大家看咱们传了什么，是不是传入一个对象，所以这里边呢，我们也是传入一个对象，然后在下面定义一下我们接口的具体路径，那这个路径我从里边复制一下，我们叫save hospital set，把它拿过来。然后拿回来之后，在里边呢，他用的提交方式，大家看是POS提交，并且用到了的body底通过Jason传数据，所以这里边首先我改成post，然后咱们通过Jason传输地在下面是不是写一个date里边加上这个。

Hospital。所以这样的话呢，咱们就完成了，在这里边进行接口定义，这就就完了，然后写完之后咱们继续往下来走，因为现在我们要实验的效果就是当我一点超链接，它是不是就进入到我们的那个就是添加页中去，所以咱们把页面给它构建一下，咱们首先找到页面，我们的添加页面应该叫A的点vouee，然后在里边呢，咱把这个表单的信息拿过去。而表单信息，咱们用的肯定也是这个IUI中的组件，因为它里边有这个表单的组件，就是这个组件。那现在这个组件我就从我的课件中给各位就直接复制过来，也就是里边的这部分，我把它直接拿过来，然后放到咱们的页面中来。这是我们复制过来这么一个表单的部分，然后这个表单我们来看一下啊，首先它用的是e form item在里边，你看哈，有这个叫e form。

包括里边有这个input是输入项，然后它里边有很多的竖项，我把这个咱们稍微先调整一下。目前里边有这么多竖项，就是这部分，然后在输入项目中大家来看一下，首先第一个就是我们这个医院名称，然后下面有医院的编号，包括它的路径，还有联系人的名称，联系人的手机，以及最后这个保存按钮，当咱点保存要触发事件，把数据调到数据库，所以现在咱把这个表单就写出来了。然后写完之后，在下面咱们写上它这个Java词汇代码，在代码中按照咱们之前说的结构，各位应该很清楚了，咱们写了很多遍了，第一个是不是写上一个date。

然后咱们加上一个铝退，在date中呢，定义我们的变量和push值，然后大家看，因为目前呢，咱们有表单，表单中是不是有一个叫V-model。V-model是什么？是不是双向绑定了，所以说我们现在这些值要放到对象中，所以我在里边的就定一个对象用于封装的这些值，然后除了这个之外，下面是不是可以有一个叫create。Create表示在页面渲染之前执行，然后下面还有一个叫这个method，里边就是定义咱们的具体方法，所以现在结构就写出来了，然后写完之后大家看，当我点保存要触发事件是不是吊顶方法，这个方法叫CO，所以在里边我们来定义这个方法，咱们先做一个。添加的方法，但是我强调哈，你看我这个方法的命名，我是不是叫save o update，所以它后面修改也在这里面做，我先写一个基本方法，然后在方法中怎么做，要调咱们的接口中内容，那这接口我在这里边先给它引入进来，这个文件我们叫hospital。

这个set啊，比如就叫set。然后from加上固定来一个斜杠API加上这个。好的，披下一套，咱们把它做一个引入。然后有之后咱就可以调用里边的就是这个方法。叫save hospital，最终完成我们的一个功能，那我们下面就把它来做这么一个调用，我们来看下这个特点啊，那我在里边调一下。Hospital set，点上这个save hospital set在里边传入咱的对象，因为咱这里边的这个对象我们做了这个V-model双向绑定，所以他可以做这个操作，然后咱们加上一个点Z。

表示调用成功，里边写一个response箭头函数，这样的话就完成了，添加这个咱们就做到了，然后添加之后我们怎么做第一个。是不是可以来一个提示信息啊，然后让它是不是要跳转回到咱们的列表页面中去，所以咱要做这个事情，而这里边的提示信息咱之前写过了，我就把之前的给各位拿过来，咱就改一下，就这个信息。比如说咱们其实用户说这个添加。成功，然后添加之后注意啊，这里边我们要做件事情，咱们要跳转回到我们那个列表页面中去，就要跳回去，但是这里边有这么一个问题，因为咱们之前呢，在这个列表页面中，咱这调方法是不是能跳过去啊，但是目前他跳不过去，因为现在我们在不同的页面中，那怎么做呢？给各位强调这个方式。

咱可以使用一种做法叫做路由跳转方式进行实现。什么叫路由跳转，大家看啊，之前我也提到过，比如我现在点击里边那个医院设置列表，这里边的路径是不是叫hospital set list，我点医院设置添加是不是叫hospital a，所以咱通过这个A的这个路径是是到我们的。例子中就可以了，这个叫路由跳转，那路由跳转怎么做，在我们这个里边有这么一个方法可以实现，咱们可以先看一下，就是这个方法。这次点router，点上push，里边加上你要跳转的路径就可以实现，那我下来给大家写上。我们写一个C点。这个叫R。点上push，然后在里边加上这个pass，再加上咱们跳的路径，我们的路径就是hospital set list，所以这样的话，咱们现在就可以把这个添加医院设置功能我们就开发出来了，主要这一过程。

然后这个开发之后给大家强调啊，这个方法你不要再写到create里边了，因为的表示是不是页面渲之前执行，而咱这方法什么时候执行，是不是在你点这个按钮的时候才执行，所以这一点各位注意，这样的话功能我们就最终做到了，然后做到之后咱们下面把这功能我们来做一个测试，看一下最终的效果是什么样的，那我们来测试一下啊。首先这里边我先点击。医院设置添加，大家看是不是到了咱们的表单页面，在表单里边，比如说我现在写上一些医院，咱们就随便写医院有这个。北京儿童医院，然后里边写个编号，比如是100啊，这个五，然后下面写一个路径，比如TP冒号杠杠，Local house，这个9999，然后这里边写个名字，比如这个名字我们这个就是。

啊，什么。比如这个什么熊二啊，然后手机号有这个110，然后现在都选完之后，我一边保存，如果效果正确的话，先提示信息，再跳转回到是不是个页面，那我们试一下啊，我点保存。大家看，当我点保存之后，咱发现目前是没有反应了，那咱们看什么问题啊，我强调就你怎么看你点保存没反应，你可以点击你的F12，咱们看F12中啊是否报了错。大家看。这边是报错了，你看啊，what.f12里面就提示我们错误信息，挨着说这个好的批set is not DeFine，就说它没有定义，那我们看一下它是哪里没有定义，我们到页面中来找一下，看我是哪里写的不对，好的Peter set没有定义，那我们来看一下啊，这里边问题到底在哪里，那我们来看一下啊。

首先我们看啊，好的，Set应该在里边，是咱们的V-model中是不是有这个东西在里边，我们需要做一个设置。然后大家看啊，因为我这里边它里边要传这个参数，而这参数用的是不是它呀，所以当传的时候，你要用当年这个就是变量和它的值，所以这里边呢，我们需要加个关键字，就是这个this this.hospital side，那我们才能使用，你直接用它里边肯定用不了，就我们少写了一个this。然后加上之后，比如咱们现在再给他试一下啊，现在我重新刷新，比如说我再重新填写医院名称。北京儿童医院，然后医院编号100这个五。路径，我们就来一个local house，然后这个姓名，比如我们是这个熊二电话119，现在我点保存，大家看提示咱们成功，然后在里边把数据是不是加进去了，所以这样的话咱把功能就完成了。刚才问题是咱们少写的一个Z，它找不到你要用的这个对象。

现在我们加上之后，最终这样来操作，咱们到表里边刷新大家看。这个熊二是不是加进来了，包括它的基本信息，包括里边的这些都有，所以这样的话，添加医院设置功能我们就完成了。