Laravel入门教程: 实现简单的AJAX的CRUD页面

前端之家收集整理的这篇文章主要介绍了Laravel入门教程: 实现简单的AJAX的CRUD页面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

介绍

这段时间在写一个考试系统ChemLab,期间用到了AJAX实现增删查改(CRUD页面,现在写一个Laravel入门教程吧,一步步实现最基本的CRUD页面

项目地址,求StarLaravel_AJAX_CRUD

演示地址:http://115.159.147.250/task

博文地址:Laravel入门教程: 实现简单的AJAX的CRUD页面

先来看看效果图:

这个教程需要安装homestead环境,关于homestead可以参考我的另一篇博文:windows下安装Homestead开发环境

创建项目

  1. vagrant@homestead:~/Code$ laravel new AJAX_CRUD
  2. vagrant@homestead:~/Code$ cd AJAX_CRUD/

修改配置

修改数据库

打开.env,主要是修改数据库方面的,我们选择task数据库,如下:

  1. DB_CONNECTION=MysqL
  2. DB_HOST=127.0.0.1
  3. DB_PORT=3306
  4. DB_DATABASE=task
  5. DB_USERNAME=homestead
  6. DB_PASSWORD=secret

然后在数据库中创建task数据库

修改网址映射

注意这部分是在主机下进行的,不是在虚拟机homestead中进行的,后面我提到主机应该注意。
修改homestead配置文件~/.homestead/Homestead.yaml增加如下内容

  1. sites:
  2. - map: crud.app
  3. to: /home/vagrant/Code/AJAX_CRUD/public

修改C:\Windows\System32\drivers\etc\hosts增加一条记录:

  1. 192.168.10.10 crud.app

重启homestead虚拟机:

  1. homestead reload --provision

访问项目

浏览器访问crud.app,应该能见到如下页面

引入Bootstrap、JQuery、Toastr

刚创建的项目什么都没有,在resources/welcome.blade.PHP中加入bootstrapJQueryToastr

  1. <title>Task Manager</title>
  2.  
  3. <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  4. <link href="http://cdn.bootcss.com/toastr.js/2.1.3/toastr.min.css" rel="stylesheet">
  5. <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  6. <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  7. <script src="http://cdn.bootcss.com/toastr.js/2.1.3/toastr.min.js"></script>

将如下内容删除

  1. <style>
  2. html,body { height: 100%; }
  3.  
  4. body { margin: 0; padding: 0; width: 100%; display: table; font-weight: 100; font-family: 'Lato',sans-serif; }
  5.  
  6. .container { text-align: center; display: table-cell; vertical-align: middle; }
  7.  
  8. .content { text-align: center; display: inline-block; }
  9.  
  10. .title { font-size: 96px; }
  11. </style>
  1. ...
  2. <div class="content">
  3. <div class="title">Laravel 5</div>
  4. </div>

创建Eloquent模型、数据表

  1. vagrant@homestead:~/Code/AJAX_CRUD$ PHP artisan make:model Task -m
  2. Model created successfully.
  3. Created Migration: 2016_08_17_033029_create_tasks_table

编辑模型:app/Task.PHP,如下:

  1. class Task extends Model {
  2. protected $fillable = ['name','content'];
  3. }

编辑database/migrations/2016_08_17_033029_create_tasks_table.PHP,如下

  1. ...
  2. public function up() {
  3. Schema::create('tasks',function (Blueprint $table) {
  4. $table->increments('id');
  5. $table->text('name');
  6. $table->text('content');
  7. $table->timestamps();
  8. });
  9.  
  10. App\Task::create([
  11. 'name' => '任务1','content' => '完成crud'
  12. ]);
  13. App\Task::create([
  14. 'name' => '任务1','content' => '完成教程'
  15. ]);
  16. }
  17. ...

创建数据表:

  1. vagrant@homestead:~/Code/AJAX_CRUD$ PHP artisan migrate
  2. Migration table created successfully.
  3. Migrated: 2014_10_12_000000_create_users_table
  4. Migrated: 2014_10_12_100000_create_password_resets_table
  5. Migrated: 2016_08_17_033029_create_tasks_table

数据库中查看,你会发现task数据库中多了一些表和记录。

构建页面

创建控制器

  1. vagrant@homestead:~/Code/AJAX_CRUD$ PHP artisan make:controller TaskController
  2. Controller created successfully.

修改路由

编辑app/Http/routes.PHP

  1. Route::get('/',function () {
  2. return redirect('/task');
  3. });
  4.  
  5. Route::resource('/task','TaskController');

这样所有动作都由我们刚刚创建的控制器来执行了。

这里的Route::resource方法可以看这个:RESTful Resource Controllers,它默认帮你创建这几个http verb
* GET
* POST
* PUT
* DELETE

这样就不用自己写路由了。

修改控制器

编辑app/Http/Controllers/TaskController.PHP,在类中增加如下方法

  1. use App\Task;
  2. ...
  3. public function index() {
  4. return view('welcome',[
  5. 'tasks' => Task::all()
  6. ]);
  7. }

编辑页面

编辑resources/welcome.blade.PHP,如下

  1. <div class="container">
  2. {{--task list--}}
  3. <div class="panel panel-default">
  4. <div class="panel-heading">
  5. 任务管理器
  6. </div>
  7. <div class="panel-body">
  8. <button class="btn btn-primary" id="add">添加任务</button>
  9. </div>
  10. <table class="table table-striped">
  11. <thead>
  12. <tr>
  13. <th>id</th>
  14. <th>Name</th>
  15. <th>Content</th>
  16. <th>Created_at</th>
  17. <th>Action</th>
  18. </tr>
  19. </thead>
  20. <tbody id="task-list">
  21. @foreach($tasks as $task)
  22. <tr id="task{{ $task->id }}">
  23. <td>{{ $task->id }}</td>
  24. <td>{{ $task->name }}</td>
  25. <td>{{ $task->content }}</td>
  26. <td>{{ $task->created_at }}</td>
  27. <td>
  28. <button class="btn btn-info edit" value="{{ $task->id }}">编辑</button>
  29. <button class="btn btn-warning delete" value="{{ $task->id }}">删除</button>
  30. </td>
  31. </tr>
  32. @endforeach
  33. </tbody>
  34. </table>
  35. </div>
  36. {{--Modal--}}
  37. <div class="modal fade" id="taskModal" tabindex="-1" role="dialog">
  38. <div class="modal-dialog" role="document">
  39. <div class="modal-content">
  40. <div class="modal-header">
  41. <button type="button" class="close" data-dismiss="modal"><span >×</span></button>
  42. <h4 class="modal-title" id="task-title">编辑任务</h4>
  43. </div>
  44. <div class="modal-body">
  45. <form id="task">
  46. <div class="form-group">
  47. <label for="tname" class="control-label">Name:</label>
  48. <input id="tname" class="form-control" type="text">
  49. </div>
  50. <div class="form-group">
  51. <label for="tcontent" class="control-label">Content:</label>
  52. <textarea class="form-control" id="tcontent"></textarea>
  53. </div>
  54. {!! csrf_field() !!}
  55. </form>
  56. </div>
  57. <div class="modal-footer">
  58. <button type="button" id="tsave" class="btn btn-primary" value="update">提交</button>
  59. <input type="hidden" id="tid" name="tid" value="-1">
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64.  
  65. </div>

<head></head>中插入:

  1. <script src="{{ asset('js/app.js') }}"></script>

创建public/js/app.js

好了目前页面如图:

增删查改CRUD

下面我们来实现核心功能:增删查改。

在实现之前,我们记得添加CSRF_TOKEN,不然ajax的时候会出现500错误

编辑resources/welcome.blade.PHP,在<form></form>添加如下代码

  1. ...
  2. </div>
  3. {!! csrf_field() !!}
  4. </form>
  5. ...

增加

Task控制器中添加函数

  1. public function store(Request $request) {
  2. $this->validate($request,[
  3. 'name' => 'required','content' => 'required'
  4. ]);
  5. $task = new Task();
  6. $task->name = $request->get('name');
  7. $task->content = $request->get('content');
  8. $task->save();
  9. return response()->json($task);
  10. }

删除

Task控制器中增加函数

  1. public function destroy($id) {
  2. $task = Task::find($id);
  3. $task->delete();
  4. return response()->json(['success']);
  5. }

查、改

Task控制器中增加函数

  1. public function show($id) {
  2. $task = Task::find($id);
  3. return response()->json($task);
  4. }
  5. public function update(Request $request,$id) {
  6. $this->validate($request,'content' => 'required'
  7. ]);
  8. $task = Task::find($id);
  9. $task->name = $request->get('name');
  10. $task->content = $request->get('content');
  11. $task->save();
  12. return response()->json($task);
  13. }

app.js

最后的public/js/app.js如下:

  1. $(document).ready(function () {
  2. url = '/task/';
  3. $.ajaxSetup({
  4. headers: {
  5. 'X-CSRF-TOKEN': $('#task input[name="_token"]').val()
  6. }
  7. });
  8.  
  9. $('#add').click(function () {
  10. $('#task-title').text('添加任务');
  11. $('#tsave').val('add');
  12. $('#taskModal').modal('show');
  13. });
  14.  
  15. $('body').on('click','button.delete',function() {
  16. var tid = $(this).val();
  17. $.ajax({
  18. type: 'DELETE',url: url+tid,success: function (data) {
  19. console.log(data);
  20. $('#task'+tid).remove();
  21. toastr.success('删除成功!');
  22. },error: function (data,json,errorThrown) {
  23. console.log(data);
  24. var errors = data.responseJSON;
  25. var errorsHtml= '';
  26. $.each( errors,function( key,value ) {
  27. errorsHtml += '<li>' + value[0] + '</li>';
  28. });
  29. toastr.error( errorsHtml,"Error " + data.status +': '+ errorThrown);
  30. }
  31. });
  32. });
  33.  
  34. $('body').on('click','button.edit',function() {
  35. $('#task-title').text('编辑任务');
  36. $('#tsave').val('update');
  37. var tid = $(this).val();
  38. $('#tid').val(tid);
  39. $.get(url+tid,function (data) {
  40. console.log(url+tid);
  41. console.log(data);
  42. $('#tname').val(data.name);
  43. $('#tcontent').val(data.content);
  44. });
  45.  
  46. $('#taskModal').modal('show');
  47. });
  48.  
  49. $('#tsave').click(function () {
  50. if($('#tsave').val() == 'add') {
  51. turl = url;
  52. var type = "POST"; // add
  53. }
  54. else {
  55. turl = url + $('#tid').val();
  56. var type = "PUT"; // edit
  57. }
  58. var data = {
  59. name: $('#tname').val(),content: $('#tcontent').val()
  60. };
  61.  
  62. $.ajax({
  63. type: type,url: turl,data: data,dataType: 'json',success: function (data) {
  64. console.log(data);
  65. $('#taskModal').modal('hide');
  66. $('#task').trigger('reset');
  67. var task = '<tr id="task' + data.id + '">' +
  68. '<td>'+ data.id +'</td>' +
  69. '<td>'+ data.name +'</td>' +
  70. '<td>'+ data.content +'</td>' +
  71. '<td>'+ data.created_at +'</td>' +
  72. '<td><button class="btn btn-info edit" value="'+ data.id +'">编辑</button> <button class="btn btn-warning delete" value="'+ data.id +'">删除</button>'+ '</td>' +
  73. '<tr>';
  74. console.log(task);
  75. if(type == 'POST') {
  76. $('#task-list').append(task);
  77. toastr.success('添加成功!');
  78. }
  79. else { // edit
  80. $('#task'+data.id).replaceWith(task);
  81. toastr.success('编辑成功!');
  82. }
  83. },"Error " + data.status +': '+ errorThrown);
  84. }
  85. });
  86.  
  87. });
  88.  
  89. });

问题记录

写这个教程遇到的问题也蛮大的,记录下来。

路由问题

之前路由是这样的:

  1. Route::resource('/','TaskController');

但是会出现404问题,于是只好重定向/task中,问题解决

  1. Route::get('/','TaskController');

新元素事件绑定问题

之前是这样绑定事件的:

  1. $('.delete').click(function () {
  2. ...
  3. }

但是会出现增加记录,无法点击触发事件的问题,将事件绑定到body解决

  1. $('body').on('click',function() {
  2. ...
  3. }

参考链接Event binding on dynamically created elements?

响应Json

Laravel返回模型的时候默认以json方式返回,所以无需response()->json()

猜你在找的Ajax相关文章