接口测试平台-22：项目列表的删除功能实现

打开：project_list.html

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

给删除按钮增加点击操作：

<button onclick="delete_project('{{ i.id }}')" class="btn-danger">删除</button>

在body的最后增加js

<script>
    function delete_project(id) {
        {#   二次确认   #}
        confirm('确定要删除该项目么？')
    }
</script>

看看效果：

取消，返回false；确定，返回true；因此具体删除的代码实现为：

<script>
    function delete_project(id) {
        if (confirm('确定要删除该项目么？') === false) {return}
        $.get('/delete_project/', {
            'id': id
        }, function (ret) {
            document.location.reload()
        })
    }
</script>

2. 添加映射

url.py

url(r'^delete_project/$', delete_project),  # 删除项目

views.py

def delete_project(request):
    ...

 

这里要做以下事情：

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

def delete_project(request):
    project_id = request.GET['id']
    DB_project.objects.filter(id=project_id).delete()
    return HttpResponse('')

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

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

 

我们来做测试吧：

1. 确保服务在运行状态

2. 刷新页面，让页面保持最新的代码

3. 点击第二个项目的删除按钮

4. 弹出对话框点击取消 - 页面没变化，项目没删除。

5. 弹出对话框点击确定 - 页面刷新，项目删除。