接口测试平台代码实现93:用例库name更改

在之前的多接口用例开发中，我发现了一个遗漏的功能。

就是用例的名字，没法进行更改。新建的用例也只会变成空名字，没法更改很难受，这个问题困扰很多同学一段日子了。今天我们来快速实现这个功能。

而且也可以借此来熟悉下 如何去动旧功能，动旧功能时候要注意什么。

首先打开P_cases.html

我们找到左侧的步骤列表页面，因为这个页面是通过点击大用例的设置按钮打开的，所以理应在底部可以有针对大用例本身的名称设置功能。

我们具体要动的地方原来代码如下：

也就是这里：

每当我们要更改一个旧功能的时候，最害怕的是什么？就是这个地方很可能牵扯到其他功能，作为测试的时候，我们不知道测试范围。这个很难确定清楚，所以往往要进行全面的复测。具体回归策略有：

1. 完全回归法
2. 周边影响法
3. 指标达成法

现在我们作为开发，这里要怎么确定呢，我们凭记忆很容易出现问题，所以我们可以在这个页面全局搜索一下关键字，比如现在我们要动的这个span，

它的id是Case_name，我们按ctrl+F进行搜索，居然发现了4个匹配值，让我们逐一确定排查。

排查发现，这几处都在一个函数中，就是显示这个左侧步骤列表页的函数中，运用的功能是接收传进来的Case_name 来进行显示 ，仅此而已。

所以我们这里要进行更改的时候，就好办的多了。

首先是给这个span改成input：

为了尽量减少影响，我们还是沿用之前的id：Case_name。

效果如下：

然后我们用户可以在这里输入新的用例名，那么如何保存呢？我们可以做个按钮保存也可以简单一点设计：当输入完，光标移开，鼠标点击其他地方的时候，自动保存。

这里我们采用新方法，但是在这之前，我们要修改下面的展示代码，来让其可以展示旧名字：

很简单，就是给innerText改成value，效果如下：

我们要做的就是光标移开用例输入框的时候触发某个函数，往后台发送新名字并保存 ，就大功告成了。

这个事件也叫 失去焦点：

如上图，我们在input框里加了个onblur属性，这个属性就是当失去焦点时候会触发关联的js函数。

现在我们在这个函数中，可以进行请求了：

如上图，我们需要传送俩个参数，分别是用例的id和新名字。

返回值我们什么都不处理，以免增加修改名称的麻烦度。

然后去urls.py：

最后是views.py:

现在重启服务，刷新页面，试一下。

当我修改完，光标移开后，触发了保存名称功能，的确是保存成功了。

但是因为我们没有刷新页面，所以关闭了左侧窗体后，大用例列表上的名字也并没有变化。

这里我们简单一点处理，当点击左侧步骤列表页面的关闭按钮后，刷新当前页面，我们把这个函数之前的代码删掉，换上这句刷新：

然后再试试，发现没有违和感了。点击关闭后新用例名直接就是显示最新的了。