一、创建路由
<?php
Route::prefix("admin")->name("admin.")->group(function (){
Route::group(['prefix'=>'article'],function(){
Route::match(["get","post"],"/article_add","Admin\ArticleController@article_add")->name("article.article_add");
});
});
?>二、创建验证器：
php artisan make:request CheckArticle
添加如下代码：
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Contracts\Validation\Validator; //注意引入
use Illuminate\Http\Exceptions\HttpResponseException;//注意引入
class CheckArticle extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
'title' => 'sometimes|required|max:60',
'thumb' => 'sometimes|required',
];
}
/**
* 获取已定义验证规则的错误消息。
*
* @return array
*/
public function messages()
{
return [
'title.required' => '标题不能为空',
'title.max' => '标题长度不能超过60个字',
'thumb.required' => '缩略图不能为空',
];
}
// ajax返回
public function failedValidation(Validator $validator)
{
throw (new HttpResponseException(response()->json([
'code' => 500,
'msg' => $validator->errors()->first(),
], 200)));
}
}三、创建控制器
php artisan make:controller \Admin\ArticleController
<?php
/*
* 文章添加
* */
public function article_add(CheckArticle $request){
if($request->isMethod('POST')){
$data=$request->except('_token');
$data['created_at']=date('Y-m-d H:i:s');
$data['updated_at']=date('Y-m-d H:i:s');
$res=DB::table('article')->insert($data);
if($res==true){
return response()->json(['code'=>200,'msg'=>'添加成功','url'=>route('admin.article.article')]);
}else{
return response()->json(['code'=>500,'msg'=>'添加失败']);
}
}
return view('admin.article.article_add');
}
?>前端：
<meta name="csrf-token" content="{{ csrf_token() }}">
<form role="form" method="post" id="myForm">
<div class="form-group">
<label>标题</label>
<input type="text" name="title" placeholder="标题" class="form-control" style="width: 40%;" required aria-required="true">
</div>
<div class="form-group">
<label>缩略图</label>
<div id="uploader-demo">
<div id="fileList" class="uploader-list"></div>
<div id="filePicker">选择图片</div>
</div>
<div id="show_img" style="display:none;">
<img id="thumb_img" src="" alt="图片" height="100px" width="100px">
</div>
<input type="hidden" id="thumb" name="thumb">
</div>
<div class="form-group">
<label>状态</label>
<div class="radio radio-info radio-inline">
<input type="radio" id="inlineRadio1" value="0" name="status" checked>
<label for="inlineRadio1"> 显示 </label>
</div>
<div class="radio radio-info radio-inline">
<input type="radio" id="inlineRadio2" value="1" name="status">
<label for="inlineRadio2"> 隐藏 </label>
</div>
</div>
<div class="form-group">
<label>内容</label>
<script id="content" type="text/plain" style="width:100%;height:500px;" name="content"></script>
</div>
<div>
<button class="btn btn-sm btn-primary pull-left m-t-n-xs" type="button" onclick="save()"><strong>添加</strong>
</button>
</div>
</form>js ajax代码
<script>
function save() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// 获取页面已有的一个form表单
var form = document.getElementById("myForm");
// 用表单来初始化
var formData = new FormData(form);
$.ajax({
url:"{{route('admin.article.article_add')}}",
type:'post',
data:formData,
timeout:0,
datatype:'text',
processData: false,
contentType: false,
success:function(msg){
console.log(msg)
if(msg.code==200){
layer.msg(msg.msg,{icon:1,time:3000}, function() {
window.location.href=msg.url
});
}else{
layer.msg(msg.msg, { icon:2});
}
},error:function () {
layer.msg('网络错误', { icon:2});
}
});
}
</script>