在html中的删除按钮中绑定js文件中的事件,带上参数,点击即触发(删除按钮不能是a链接,不然报错)
<div v-for="blog in blogs" class="blogs">
需求:[[ blog.contents ]]
<br>
用户:[[ blog.user ]]
<br>
联系方式:[[ blog.mobile ]]
<br>
时间:[[ blog.times ]]
<br>
地址:[[ blog.province ]] [[ blog.city ]] [[ blog.district ]] [[ blog.address ]]
<button style="float: right;" @click="on_delete(blog.user, blog.id)">删除</button>
</div>
js文件中实现该功能,发起ajax请求到后端视图中对数据库进行操作
var vm = new Vue({
el: '#app',
// 修改Vue变量的读取语法,避免和django模板语法冲突
delimiters: ['[[', ']]'],
data: {
host,
username:'',
blogs:[]
},
mounted(){
...
},
methods: {
...
// 删除博客
on_delete(user, id){
var url = this.host + '/delmyblogs/' + id;
axios.delete(url, {
data: {
blog_user: user,
blog_id: id
},
headers: {
'X-CSRFToken': getCookie('csrftoken')
},
responseType: 'json'
}).then(response => {
if(response.data.code == '0') {
alert("删除成功");
// 刷新页面
location.href = '/myblogs';
}else {
alert("删除失败");
}
}).catch(error => {
alert("连接失败");
})
}
}
});
路由导入文章来源:https://www.toymoban.com/news/detail-540925.html
urlpatterns = [
...
re_path(r'^delmyblogs', views.DelmyblogsView.as_view(), name='del_myblogs'),
]
在视图里面实现删除功能文章来源地址https://www.toymoban.com/news/detail-540925.html
class DelmyblogsView(LoginRequiredMixin, View):
def delete(self, request):
# 获取数据
data = json.loads(request.body.decode())
blog_user = data.get('blog_user')
blog_id = data.get('blog_id')
if request.user.is_authenticated and str(request.user) == str(blog_user):
# 查询数据库
try:
blog = Blogs.objects.get(id=blog_id)
except Blogs.DoesNotExist:
return http.JsonResponse({'code': RETCODE.NODATAERR, 'errmsg': '暂无此数据'})
# 删除
try:
blog.delete()
except Exception as e:
logger.error(e)
return http.JsonResponse({'code': RETCODE.DBERR, 'errmsg': '删除失败'})
# 返回响应
return http.JsonResponse({'code': RETCODE.OK, 'errmsg': 'ok'})
else:
return http.JsonResponse({'code': RETCODE.SESSIONERR, 'errmsg': 'fail'})
到了这里,关于django框架——实现MySQL数据库数据的删除的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!