laravel中后台文件上传增删改查
程序员文章站
2022-07-02 11:23:21
首先设计表结构Schema::create('fangattrs', function (Blueprint $table) { // 主键 $table->bigIncrements('id'); $table->unsignedInteger('pid')->default(0)->comment('上级ID'); $table->string('field_name',50)...
首先设计表结构
Schema::create('fangattrs', function (Blueprint $table) {
// 主键
$table->bigIncrements('id');
$table->unsignedInteger('pid')->default(0)->comment('上级ID');
$table->string('field_name',50)->default('')->comment('字段名');
$table->string('name',50)->default('')->comment('属性名称');
$table->string('icon',200)->default('')->comment('图标');
$table->timestamps();
// 软删除
$table->softDeletes();
});
创建模型层
创建Fangattr模型层
模型层方法
// 获取数据
public function getList() {
// 获取全部的数据
$data = self::get()->toArray();
// 调用父类中的递归层级函数
return $this->treeLevel($data);
}
创建控制器
创建房源管理资源控制器FangAttr
展示页面方法
public function index() {
// 实例化
$model = new Fangattr();
// 取数据
$data = $model->getList();
// 指定视图并赋值
return view('admin.fangattr.index', compact('data'));
}
编写界面展示方法
public function create() {
// 获取顶部属性
$data = Fangattr::where('pid', 0)->get();
// 指定视图并赋值
return view('admin.fangattr.create', compact('data'));
}
编写文件上传
public function upfile(Request $request) {
// 默认图标
$pic = config('up.pic');
if ($request->hasFile('file')) {
// 上传
// 参数2 配置的节点名称
$ret = $request->file('file')->store('', 'fangattr');
$pic = '/uploads/fangattr/' . $ret;
}
return ['status' => 0, 'url' => $pic];
}
编写添加方法
// 添加处理
public function store(Request $request) {
// 表单验证
$this->validate($request, [
'name' => 'required',
//'field_name' => 'required'
]);
// 验证通过后,入库并跳转到列表页面
// 获取数据
$postData = $request->except(['_token', 'file']);
// 因为字段不能为null,而我们没有传数据,所以一定解决手段
$postData['field_name'] = !empty($postData['field_name']) ? $postData['field_name'] : '';
// 入库
Fangattr::create($postData);
// 跳转
return redirect(route('admin.fangattr.index'));
}
跳转修改界面
// 修改界面
public function edit(Fangattr $fangattr) {
// 获取顶部属性
$data = Fangattr::where('pid', 0)->get();
return view('admin.fangattr.edit', compact('data', 'fangattr'));
}
修改处理
public function update(Request $request, Fangattr $fangattr) {
// 表单验证
$this->validate($request, [
'name' => 'required',
]);
// 验证通过后,入库并跳转到列表页面
// 获取数据
$postData = $request->except(['_token', 'file', '_method']);
// 因为字段不能为null,而我们没有传数据,所以一定解决手段
$postData['field_name'] = !empty($postData['field_name']) ? $postData['field_name'] : '';
// 修改入库
$fangattr->update($postData);
// 跳转
return redirect(route('admin.fangattr.index'));
}
编写删除操作
// 删除操作
public function destroy(Fangattr $fangattr) {
//$fangattr->delete();
return ['status' => 0, 'msg' => '删除成功'];
}
编写视图层
编写index页面
@extends('admin.common.main')
@section('cnt')
<nav class="breadcrumb">
<i class="Hui-iconfont"></i> 首页
<span class="c-gray en">></span> 房源属性管理
<span class="c-gray en">></span> 房源属性列表
<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont"></i></a>
</nav>
{{-- 消息提示 --}}
@include('admin.common.msg')
<div class="page-container">
<form method="get" class="text-c"> 输入想要搜索的权限名称:
<input type="text" class="input-text" style="width:250px" placeholder="节点" value="{{ request()->get('name') }}" name="name" autocomplete="off">
<button type="submit" class="btn btn-success radius"><i class="Hui-iconfont"></i> 搜节点</button>
</form>
<div class="cl pd-5 bg-1 bk-gray mt-20">
<span class="l">
<a href="{{ route('admin.fangattr.create') }}" class="btn btn-primary radius">
<i class="Hui-iconfont"></i> 添加房源属性
</a>
</span>
</div>
<div class="mt-20">
<table class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr class="text-c">
<th width="80">ID</th>
<th width="100">房源属性名称</th>
<th width="100">图标</th>
<th width="100">字段名称</th>
<th width="130">加入时间</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody>
@foreach($data as $item)
<tr class="text-c">
<td>{{ $item['id'] }}</td>
<td class="text-l">
{{ $item['html'] }}
{{ $item['name'] }}
</td>
<td><img src="{{ $item['icon'] }}" style="width: 50px;"/></td>
<td>{{ $item['field_name'] }}</td>
<td>{{ $item['created_at'] }}</td>
<td class="td-manage">
<a href="{{ route('admin.fangattr.edit',['id'=>$item['id']]) }}" class="label label-secondary radius">修改</a>
<a data-href="{{ route('admin.fangattr.destroy',['id'=>$item['id']]) }}" class="delbtn label label-warning radius">删除</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
@endsection
@section('js')
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/admin/lib/laypage/1.2/laypage.js"></script>
<script>
// 删除事件绑定
$('.delbtn').click(function (evt) {
// 在html中以data-开头的属性,都在evt对象中有传递过来
//console.log(evt.target.dataset);
let _this = $(this);
// 请求的url地址
let url = _this.attr('data-href');
// 确认弹框
layer.confirm('您真的要删除此条记录信息吗?', {
btn: ['确认删除', '考虑一下']
}, () => { // 真的选择了删除
// 发起ajax
$.ajax({
url,
type: 'delete',
data: {_token: "{{csrf_token()}}"}
}).then(ret => {
layer.msg(ret.msg, {icon: 1, time: 2000}, () => {
_this.parents('tr').remove();
});
});
});
});
</script>
@endsection
编写create页面
@extends('admin.common.main')
@section('css')
{{-- webuploader上传样式 --}}
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css"/>
@endsection
@section('cnt')
<nav class="breadcrumb">
<i class="Hui-iconfont"></i> 首页
<span class="c-gray en">></span> 房源属性管理
<span class="c-gray en">></span> 添加房源属性
<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont"></i></a>
</nav>
<article class="page-container">
{{-- 表单验证提示 --}}
@include('admin.common.validate')
<form action="{{ route('admin.fangattr.store') }}" id="form-member-add" method="post" class="form form-horizontal">
@csrf
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否*:</label>
<div class="formControls col-xs-8 col-sm-9">
<span class="select-box">
<select class="select" name="pid">
<option value="0">==*==</option>
@foreach($data as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
</select>
</span>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>属性名称:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" name="name"/>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>属性图标:</label>
<div class="formControls col-xs-4 col-sm-5">
<!-- 图片上传 -->
<div id="picker">选择图标</div>
</div>
<div class="formControls col-xs-4 col-sm-4">
<input type="hidden" value="{{ config('up.pic') }}" name="icon" id="icon"/>
<img src="{{ config('up.pic') }}" id="pic" style="width: 50px;">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3">字段名称:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" name="field_name"/>
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<input class="btn btn-primary radius" type="submit" value="添加属性">
</div>
</div>
</form>
</article>
@endsection
@section('js')
<!-- webuploader上传js -->
<script type="text/javascript" src="/webuploader/webuploader.js"></script>
<!-- 前端验证 --->
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script>
// 前端表单验证
$("#form-member-add").validate({
// 规则
rules: {
// 表单元素名称
name: {
// 验证规则
required: true
}
},
// 取消键盘事件
onkeyup: false,
// 验证成功后的样式
success: "valid",
// 验证通过后,处理的方法 form dom对象
submitHandler: function (form) {
// 表单提交
form.submit();
}
});
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后,是否自动上传
auto: true,
// swf文件路径
swf: '/webuploader/Uploader.swf',
// 文件接收服务端 上传PHP的代码
server: '{{ route('admin.fangattr.upfile') }}',
// 文件上传是携带参数
formData: {
_token: '{{csrf_token()}}'
},
// 文件上传是的表单名称
fileVal: 'file',
// 选择文件的按钮
pick: {
id: '#picker',
// 是否开启选择多个文件的能力
multiple: false
},
// 压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: true
});
// 上传成功时的回调方法
uploader.on('uploadSuccess', function (file, ret) {
// 图片路径
let src = ret.url;
// 给表单添加value值
$('#icon').val(src);
// 给图片添加src
$('#pic').attr('src', src);
});
</script>
@endsection
编写edit页面
@extends('admin.common.main')
@section('css')
{{-- webuploader上传样式 --}}
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css"/>
@endsection
@section('cnt')
<nav class="breadcrumb">
<i class="Hui-iconfont"></i> 首页
<span class="c-gray en">></span> 房源属性管理
<span class="c-gray en">></span> 修改房源属性
<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont"></i></a>
</nav>
<article class="page-container">
{{-- 表单验证提示 --}}
@include('admin.common.validate')
<form action="{{ route('admin.fangattr.update',$fangattr) }}" id="form-member-add" method="post" class="form form-horizontal">
@method('PUT')
@csrf
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否*:</label>
<div class="formControls col-xs-8 col-sm-9">
<span class="select-box">
<select class="select" name="pid">
<option value="0" @if($fangattr->pid==0) selected @endif>==*==</option>
@foreach($data as $item)
<option value="{{ $item->id }}" @if($fangattr->pid==$item->id) selected @endif>{{ $item->name }}</option>
@endforeach
</select>
</span>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>属性名称:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" name="name" value="{{ $fangattr->name }}"/>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>属性图标:</label>
<div class="formControls col-xs-4 col-sm-5">
<!-- 图片上传 -->
<div id="picker">选择图标</div>
</div>
<div class="formControls col-xs-4 col-sm-4">
<input type="hidden" value="{{ $fangattr->icon }}" name="icon" id="icon"/>
<img src="{{ $fangattr->icon }}" id="pic" style="width: 50px;">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3">字段名称:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" name="field_name" value="{{ $fangattr->field_name }}"/>
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<input class="btn btn-primary radius" type="submit" value="修改属性">
</div>
</div>
</form>
</article>
@endsection
@section('js')
<!-- webuploader上传js -->
<script type="text/javascript" src="/webuploader/webuploader.js"></script>
<!-- 前端验证 --->
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script>
// 前端表单验证
$("#form-member-add").validate({
// 规则
rules: {
// 表单元素名称
name: {
// 验证规则
required: true
}
},
// 取消键盘事件
onkeyup: false,
// 验证成功后的样式
success: "valid",
// 验证通过后,处理的方法 form dom对象
submitHandler: function (form) {
// 表单提交
form.submit();
}
});
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后,是否自动上传
auto: true,
// swf文件路径
swf: '/webuploader/Uploader.swf',
// 文件接收服务端 上传PHP的代码
server: '{{ route('admin.fangattr.upfile') }}',
// 文件上传是携带参数
formData: {
_token: '{{csrf_token()}}'
},
// 文件上传是的表单名称
fileVal: 'file',
// 选择文件的按钮
pick: {
id: '#picker',
// 是否开启选择多个文件的能力
multiple: false
},
// 压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: true
});
// 上传成功时的回调方法
uploader.on('uploadSuccess', function (file, ret) {
// 图片路径
let src = ret.url;
// 给表单添加value值
$('#icon').val(src);
// 给图片添加src
$('#pic').attr('src', src);
});
</script>
@endsection
编写路由地址
// 文章管理 admin/article/upfile
Route::post('article/upfile','ArticleController@upfile')->name('article.upfile');
// 资源路由
Route::resource('article', 'ArticleController');
本文地址:https://blog.csdn.net/weixin_47716362/article/details/109369261