接口测试平台代码实现150：加密算法继续实现

上节课我们可以成功的 打开加密算法的设置弹层。

现在我们来立马实现一下 取消和保存功能：

取消功能很简单，我们写个刷新即可：注意修改俩个按钮的onclick：

好，继续开始，我们去写保存功能：

这个函数并不复杂，但是我依然要按部就班的去实现。

首先是获取选中的加密插入位置，是url还是body。

注意这个单选框radio，我是怎么命名和设置属性的。以及js里是怎么提取的。

name必须是一样的，value是要获取的值当然不一样，id是由前面相同后面不同。

然后提取是靠一段jquery 实现，如果是js则太过麻烦了。

接下来是提取输入框的内容，也就是加密表达式：

好提取成功后，我们写个请求给后台：

注意，其中传递了项目id，和加密插入位置 和加密表达式。

然后去urls.py中：

然后去views.py中：

注意，这里我们发现了一个设计上的遗漏，就是这个配置应该包括 俩部分，即插入位置，和表达式子。 而我们数据库一开始的时候只新增了一个字段。所以这里我们要去变更一下 数据库models.py的字段才行，改成如下：

执行同步命令：

注意，提示是否修改字段，输入y 按回车继续。

然后回到views.py中继续写：

这里我们成功保存了这个加密算法配置。

然后我们可以去试试看：

如上图，我设置好，点击保存。

没有出现任何报错，然后去后台看看 是否保存成功：

可以注意到，是成功保存了的。

然后，我们前端的展示旧数据的html-dom部分此时也要进行修改。

首先是表达式部分，改成如下：

然后是 这个单选框，单选框比较麻烦，我们必须要通过js来决定谁被选中。

所以encryption_show()这个函数，此时要继续扩写了。

这里我们仍然用jquery来快速实现这个功能，代码如下：

这里我采用了拼接方案，用数据库的值直接就拼成了 目标选框的id， 这也是我一开始起id的时候故意设计，是不是很讨巧。

别抄错少了引号哦，可以复制如下代码：

 $(':radio[id="encyption_{{ project.encyption_insert }}"]').attr('checked',true)

好了，刷新页面，打开，可以看到显示的结果如之前我保存的一样：