接口测试平台代码实现24:项目列表的删除功能实现

本节我们要做的是 项目列表页面的删除功能：

我们先看删除按钮：

首先我们设计一个js函数，让其点击之后触发删除功能，为了防止误删，所以要有个确认的对话框。

先在底部新建一个script用来存放js删除函数。

我这里取名叫做delete_project了。现在我们要想一件事，就是当用户点击删除按钮后，我们js函数怎么知道要删除哪个项目呢？

是不是应该传入个参数，比如项目id啊？

所以，我们在删除按钮中写onclick属性调用 这个删除函数的时候应该加入项目的id。这个id是一个变量，每个删除按钮都不同。

注意 这个{{}}外面也要有一层单引号，来告诉js这是个字符串。

接下来我们要学习 confirm方法，就是弹出一个是否确定的对话框：

我们别忘了给delete_project()函数加上接收id的参数，也叫id好了。

confirm里面放入我们想显示的文案。它属于调用浏览器自带的对话框，只有取消和确定俩个按钮，当用户点击删除时会显示：

这时候如果点击取消，那么这个confirm方法会返回一个false,如果点击确定，那么就返回true，我们要做的逻辑是，点击取消，返回false,那么就中止这个删除功能，如果点击确定，返回true，那么就继续走这个删除功能。

所以在js中我们要写一个判断if语句。判断这个confirm的返回值：

如果等于flase，那么就直接return，也就相当于这个程序直接返回了，下面真正删除项目的代码都不执行了。如果不是false，那么就当没看见，继续往下执行即可。

具体删除的代码，我们必须通过发出一个异步请求来实现，也就是

$.get('url',{参数},function (ret){返回之后的动作})

如上图所示，我们这样设计：

1. url设计成 /delete_project/ 了，直观简洁
2. 需要带的参数只有一个，就是id ，项目id。
3. 请求之后的动作我们设计成 刷新页面，这样可以让我们立即看到那个项目消失了。html页面就是这样静态的。你不刷新的话，那么即便断网，页面的元素也不会消失。

然后去urls.py中 写好映射：

然后去views.py中写好后台函数：delete_project

这里我们要做以下事情：

1. 获取传过来的参数项目id
2. 去数据库的项目表 中删除掉这个id的项目
3. 随便返回个空字符串给前端

.filter() 方法可以找出所有符合的数据记录，当然这里我们肯定只能找到一条。但是返回的仍然是一个类似列表的格式，虽然只有一个元素。

后接.delete()方法 ，可以删除。然后直接返回给前端，证明事办完了。前端就会自动刷新，用户看到的就是 这个项目不见了。

我们来做测试吧：

1. 确保服务在运行状态
2. 刷新页面，让页面保持最新的代码
3. 点击第二个项目的删除按钮
4. 弹出对话框点击取消 - 页面没变化，项目没删除。
5. 弹出对话框点击确定 - 页面刷新，项目删除。

好了，结果成功。

今天的教程到此为止，大家慢点来。一步一步稳扎稳打。