Laravel 5.5 利用ajax为用户管理提供添加、编辑和删除操作
一、创建应用程序
composer create-project laravel/laravel AjaxCrud --prefer-dist "5.5.*"
二、创建Post的模型和表格
php artisan make:model Post -m
编辑create_post_table文件
database\migrations\create_post_table
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
更改模型文件
Post model : app\Post.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $table = 'posts';
}
三、添加路由
Post route : routes\web.php
Route::group(['middleware' => ['web']], function() {
Route::resource('post','PostController');
Route::POST('addPost','PostController@addPost');
Route::POST('editPost','PostController@editPost');
Route::POST('deletePost','PostController@deletePost');
});
四、创建控制器
php artisan make:controller PostController
Controlllers : app\http\controllers\PostController
为控制器添加一下代码
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
use Validator;
use Response;
use Illuminate\Support\Facades\Input;
use App\http\Requests;
class PostController extends Controller
{
public function index(){
$post = Post::paginate(4);
return view('post.index',compact('post'));
}
public function addPost(Request $request){
$rules = array(
'title' => 'required',
'body' => 'required',
);
$validator = Validator::make ( Input::all(), $rules);
if ($validator->fails())
return Response::json(array('errors'=> $validator->getMessageBag()->toarray()));
else {
$post = new Post;
$post->title = $request->title;
$post->body = $request->body;
$post->save();
return response()->json($post);
}
}
public function editPost(request $request){
$post = Post::find ($request->id);
$post->title = $request->title;
$post->body = $request->body;
$post->save();
return response()->json($post);
}
public function deletePost(request $request){
$post = Post::find ($request->id)->delete();
return response()->json();
}
}
五、 创建模板文件
View : resources\views\post\index.blade.php
{{-- calling layouts \ app.blade.php --}} @extends('layouts.app') @section('content') <div class="row"> <div class="col-md-12"> <h1>Simple Laravel CRUD Ajax</h1> </div> </div> <div class="row"> <div class="table table-responsive"> <table class="table table-bordered" id="table"> <tr> <th width="150px">No</th> <th>Title</th> <th>Body</th> <th>Create At</th> <th class="text-center" width="150px"> <a href="#" class="create-modal btn btn-success btn-sm"> <i class="glyphicon glyphicon-plus"></i> </a> </th> </tr> {{ csrf_field() }} <?php $no=1; ?>
@foreach ($post as $value)
<tr class="post{{$value->id}}">
<td>{{ $no++ }}</td>
<td>{{ $value->title }}</td>
<td>{{ $value->body }}</td>
<td>{{ $value->created_at }}</td>
<td>
<a href="#" class="show-modal btn btn-info btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
<i class="fa fa-eye"></i>
</a>
<a href="#" class="edit-modal btn btn-warning btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
<i class="glyphicon glyphicon-pencil"></i>
</a>
<a href="#" class="delete-modal btn btn-danger btn-sm" data-id="{{$value->id}}" data-title="{{$value->title}}" data-body="{{$value->body}}">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
@endforeach
</table>
</div>
{{$post->links()}}
</div>
{{-- Modal Form Create Post --}}
<div id="create" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group row add">
<label class="control-label col-sm-2" for="title">Title :</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title" name="title"
placeholder="Your Title Here" required>
<p class="error text-center alert alert-danger hidden"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="body">Body :</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="body" name="body"
placeholder="Your Body Here" required>
<p class="error text-center alert alert-danger hidden"></p>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="submit" id="add">
<span class="glyphicon glyphicon-plus"></span>Save Post
</button>
<button class="btn btn-warning" type="button" data-dismiss="modal">
<span class="glyphicon glyphicon-remobe"></span>Close
</button>
</div>
</div>
</div>
</div></div>
{{-- Modal Form Show POST --}}
<div id="show" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="">ID :</label>
<b id="i"/>
</div>
<div class="form-group">
<label for="">Title :</label>
<b id="ti"/>
</div>
<div class="form-group">
<label for="">Body :</label>
<b id="by"/>
</div>
</div>
</div>
</div>
</div>
{{-- Modal Form Edit and Delete Post --}}
<div id="myModal"class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="modal">
<div class="form-group">
<label class="control-label col-sm-2"for="id">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="fid" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"for="title">Title</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="t">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"for="body">Body</label>
<div class="col-sm-10">
<textarea type="name" class="form-control" id="b"></textarea>
</div>
</div>
</form>
{{-- Form Delete Post --}}
<div class="deleteContent">
Are You sure want to delete <span class="title"></span>?
<span class="hidden id"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn actionBtn" data-dismiss="modal">
<span id="footer_action_button" class="glyphicon"></span>
</button>
<button type="button" class="btn btn-warning" data-dismiss="modal">
<span class="glyphicon glyphicon"></span>close
</button>
</div>
</div>
</div>
</div>
@endsection
六、常见js和css
View : resources\views\layouts\app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Crud</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-ststic-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="{{route('post.index')}}">CodELog</a>
</div>
</div>
</nav>
<div class="container">
@yield('content')
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
{{-- ajax Form Add Post--}}
$(document).on('click','.create-modal', function() {
$('#create').modal('show');
$('.form-horizontal').show();
$('.modal-title').text('Add Post');
});
$("#add").click(function() {
$.ajax({
type: 'POST',
url: 'addPost',
data: {
'_token': $('input[name=_token]').val(),
'title': $('input[name=title]').val(),
'body': $('input[name=body]').val()
},
success: function(data){
if ((data.errors)) {
$('.error').removeClass('hidden');
$('.error').text(data.errors.title);
$('.error').text(data.errors.body);
} else {
$('.error').remove();
$('#table').append("<tr class='post" + data.id + "'>"+
"<td>" + data.id + "</td>"+
"<td>" + data.title + "</td>"+
"<td>" + data.body + "</td>"+
"<td>" + data.created_at + "</td>"+
"<td><button class='show-modal btn btn-info btn-sm' data-id='" + data.id + "' data-title='" + data.title + "' data-body='" + data.body + "'><span class='fa fa-eye'></span></button> <button class='edit-modal btn btn-warning btn-sm' data-id='" + data.id + "' data-title='" + data.title + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-pencil'></span></button> <button class='delete-modal btn btn-danger btn-sm' data-id='" + data.id + "' data-title='" + data.title + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-trash'></span></button></td>"+
"</tr>");
}
},
});
$('#title').val('');
$('#body').val('');
});
// function Edit POST
$(document).on('click', '.edit-modal', function() {
$('#footer_action_button').text(" Update Post");
$('#footer_action_button').addClass('glyphicon-check');
$('#footer_action_button').removeClass('glyphicon-trash');
$('.actionBtn').addClass('btn-success');
$('.actionBtn').removeClass('btn-danger');
$('.actionBtn').addClass('edit');
$('.modal-title').text('Post Edit');
$('.deleteContent').hide();
$('.form-horizontal').show();
$('#fid').val($(this).data('id'));
$('#t').val($(this).data('title'));
$('#b').val($(this).data('body'));
$('#myModal').modal('show');
});
$('.modal-footer').on('click', '.edit', function() {
$.ajax({
type: 'POST',
url: 'editPost',
data: {
'_token': $('input[name=_token]').val(),
'id': $("#fid").val(),
'title': $('#t').val(),
'body': $('#b').val()
},
success: function(data) {
$('.post' + data.id).replaceWith(" "+
"<tr class='post" + data.id + "'>"+
"<td>" + data.id + "</td>"+
"<td>" + data.title + "</td>"+
"<td>" + data.body + "</td>"+
"<td>" + data.created_at + "</td>"+
"<td><button class='show-modal btn btn-info btn-sm' data-id='" + data.id + "' data-title='" + data.title + "' data-body='" + data.body + "'><span class='fa fa-eye'></span></button> <button class='edit-modal btn btn-warning btn-sm' data-id='" + data.id + "' data-title='" + data.title + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-pencil'></span></button> <button class='delete-modal btn btn-danger btn-sm' data-id='" + data.id + "' data-title='" + data.title + "' data-body='" + data.body + "'><span class='glyphicon glyphicon-trash'></span></button></td>"+
"</tr>");
}
});
});
// form Delete function
$(document).on('click', '.delete-modal', function() {
$('#footer_action_button').text(" Delete");
$('#footer_action_button').removeClass('glyphicon-check');
$('#footer_action_button').addClass('glyphicon-trash');
$('.actionBtn').removeClass('btn-success');
$('.actionBtn').addClass('btn-danger');
$('.actionBtn').addClass('delete');
$('.modal-title').text('Delete Post');
$('.id').text($(this).data('id'));
$('.deleteContent').show();
$('.form-horizontal').hide();
$('.title').html($(this).data('title'));
$('#myModal').modal('show');
});
$('.modal-footer').on('click', '.delete', function(){
$.ajax({
type: 'POST',
url: 'deletePost',
data: {
'_token': $('input[name=_token]').val(),
'id': $('.id').text()
},
success: function(data){
$('.post' + $('.id').text()).remove();
}
});
});
// Show function
$(document).on('click', '.show-modal', function() {
$('#show').modal('show');
$('#i').text($(this).data('id'));
$('#ti').text($(this).data('title'));
$('#by').text($(this).data('body'));
$('.modal-title').text('Show Post');
});
</script>
</body>
</html>