其实在这里,我并没有把数据进行删除,而是把数据库中设置了一个状态值,0代表着正常,而1代表着已经删除,本着数据保护的原则,便于记录用户的操作数据,便于后期的查找以及维护,废话不多说,上代码!
路由设置
代码语言:javascript复制Route::delete('pic/destroy/{id}', 'PicController@destroy'); //图片单个删除控制器
前台代码
代码语言:javascript复制<table class="layui-table" id="table">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>标题</th>
<th>排序</th>
<th>缩略图</th>
<th>操作</th>
</tr>
</thead>
<tbody>
@foreach($data as $value)
<tr>
<td>
<div class="layui-form">
<input type="checkbox" value="{{ $value->id }}" lay-skin="primary" lay-filter="RandomCheckbox">
</div>
</td>
{{--按序号输出数值--}}
<td>{{ $value->id }}</td>
<td>{{ $value->title }}</td>
<td>
<input type="text" onchange="change(this, {{ $value->id }});" class="layui-input" value="{{ $value->sort }}" name="sort">
</td>
<td>
<img class="admin-pic-index-img" src="{{ url($value->img) }}" alt="{{ $value->title }}">
</td>
<td>
<a class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius" href="/adminhttps://img.yuanmabao.com/zijie/pic/edit/{{ $value->id }}">
<i class="layui-icon layui-icon-edit"></i>
</a>
<button class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius" href="javascript:;" onclick="del(this, {{ $value->id }});">
<i class="layui-icon layui-icon-delete"></i>
</button>
</td>
</tr>
@endforeach
</tbody>
</table>
前台JS处理代码
代码语言:javascript复制/**
* 删除单个元素方法
* @param obj
* @param id
*/
function del(obj, id){
layer.confirm('确定要删除么?', {
btn: ['确定','取消']
}, function(){
$.post(
//请求地址及参数
'/adminhttps://img.yuanmabao.com/zijie/pic/destroy/' id,
//数据 & 方式 & CSRF认证
{'id':id,'_method':'delete', '_token':'{{ csrf_token() }}'},
//回调结果处理函数
function(res){
//如果大于0,则表示成功
if(res.code>0){
layer.alert(res.msg,{icon:2})
}else{
layer.msg(res.msg);
setTimeout(function(){window.location.reload();}, 1000)
}
},
'json'
);
});
}
后端处理代码
代码语言:javascript复制/**
* 删除图片操作
* @param Request $request
*/
public function destroy(Request $request){
$id = $request->id;
$sql = DB::update('update pic set status=1 where id=?',[$id]);
if($sql){
exit(json_encode(array('code'=>0, 'msg'=>'删除成功')));
}else{
exit(json_encode(array('code'=>1, 'msg'=>'删除出现异常')));
}
}
本文链接:https://cloud.tencent.com/developer/article/1557707
本文采用CC BY-NC-SA 3.0 Unported协议进行许可,转载请保留此文章链接