评论

收藏

[其他] 接口测试平台代码实现150:加密算法继续实现

网络安全 网络安全 发布于:2021-07-01 17:10 | 阅读数:706 | 评论:0

  上节课我们可以成功的 打开加密算法的设置弹层。
  现在我们来立马实现一下 取消和保存功能:
  取消功能很简单,我们写个刷新即可:注意修改俩个按钮的onclick:
DSC0000.png

  好,继续开始,我们去写保存功能:
DSC0001.png

  这个函数并不复杂,但是我依然要按部就班的去实现。
  首先是获取选中的加密插入位置,是url还是body。
DSC0002.png

  注意这个单选框radio,我是怎么命名和设置属性的。以及js里是怎么提取的。
  name必须是一样的,value是要获取的值当然不一样,id是由前面相同后面不同。 
  然后提取是靠一段jquery 实现,如果是js则太过麻烦了。
  接下来是提取输入框的内容,也就是加密表达式:
DSC0003.png

  好提取成功后,我们写个请求给后台:
DSC0004.png

  注意,其中传递了项目id,和加密插入位置 和加密表达式。
  然后去urls.py中:
DSC0005.png

  然后去views.py中:
DSC0006.png

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

  执行同步命令:
DSC0008.png

  注意,提示是否修改字段,输入y 按回车继续。
  然后回到views.py中继续写:
DSC0009.png

  这里我们成功保存了这个加密算法配置。
  然后我们可以去试试看:
DSC00010.png

  如上图,我设置好,点击保存。
  没有出现任何报错,然后去后台看看 是否保存成功:
DSC00011.png

  可以注意到,是成功保存了的。
  然后,我们前端的展示旧数据的html-dom部分此时也要进行修改。
  首先是表达式部分,改成如下:
DSC00012.png

  然后是 这个单选框,单选框比较麻烦,我们必须要通过js来决定谁被选中。
  所以encryption_show()这个函数,此时要继续扩写了。
  这里我们仍然用jquery来快速实现这个功能,代码如下:
DSC00013.png

  这里我采用了拼接方案,用数据库的值直接就拼成了 目标选框的id, 这也是我一开始起id的时候故意设计,是不是很讨巧。
  别抄错少了引号哦,可以复制如下代码:

  •  
$(':radio[id="encyption_{{ project.encyption_insert }}"]').attr('checked',true)
  好了,刷新页面,打开,可以看到显示的结果如之前我保存的一样:
DSC00014.png


  
关注下面的标签,发现更多相似文章