本节我们要做的是 项目列表页面的删除功能:
我们先看删除按钮:
首先我们设计一个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){返回之后的动作})
如上图所示,我们这样设计:
- url设计成 /delete_project/ 了,直观简洁
- 需要带的参数只有一个,就是id ,项目id。
- 请求之后的动作我们设计成 刷新页面,这样可以让我们立即看到那个项目消失了。html页面就是这样静态的。你不刷新的话,那么即便断网,页面的元素也不会消失。
然后去urls.py中 写好映射:
然后去views.py中写好后台函数:delete_project
这里我们要做以下事情:
- 获取传过来的参数项目id
- 去数据库的项目表 中删除掉这个id的项目
- 随便返回个空字符串给前端
.filter() 方法可以找出所有符合的数据记录,当然这里我们肯定只能找到一条。但是返回的仍然是一个类似列表的格式,虽然只有一个元素。
后接.delete()方法 ,可以删除。然后直接返回给前端,证明事办完了。前端就会自动刷新,用户看到的就是 这个项目不见了。
我们来做测试吧:
- 确保服务在运行状态
- 刷新页面,让页面保持最新的代码
- 点击第二个项目的删除按钮
- 弹出对话框点击取消 - 页面没变化,项目没删除。
- 弹出对话框点击确定 - 页面刷新,项目删除。