编辑 resources/welcome.blade.php ，在 <form></form> 中添加如下代码：

... </div> {!! csrf_field() !!} </form> ... 增加

在 Task 控制器中添加函数：

public function store(Request $request) { $this->validate($request, [ 'name' => 'required', 'content' => 'required' ]); $task = new Task(); $task->name = $request->get('name'); $task->content = $request->get('content'); $task->save(); return response()->json($task); } 删除

在 Task 控制器中增加函数：

) { $task = Task::find($id); $task->delete(); return response()->json(['success']); } 查、改

在 Task 控制器中增加函数：

public function show($id) { $task = Task::find($id); return response()->json($task); } public function update(Request $request, $id) { $this->validate($request, [ 'name' => 'required', 'content' => 'required' ]); $task = Task::find($id); $task->name = $request->get('name'); $task->content = $request->get('content'); $task->save(); return response()->json($task); } app.js

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

$(document).ready(function () { url = '/task/'; $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('#task input[name="_token"]').val() } }); $('#add').click(function () { $('#task-title').text('添加任务'); $('#tsave').val('add'); $('#taskModal').modal('show'); }); $('body').on('click', 'button.delete', function() { var tid = $(this).val(); $.ajax({ type: 'DELETE', url: url+tid, success: function (data) { console.log(data); $('#task'+tid).remove(); toastr.success('删除成功！'); }, error: function (data, json, errorThrown) { console.log(data); var errors = data.responseJSON; var errorsHtml= ''; $.each( errors, function( key, value ) { errorsHtml += '<li>' + value[0] + '</li>'; }); toastr.error( errorsHtml , "Error " + data.status +': '+ errorThrown); } }); }); $('body').on('click', 'button.edit', function() { $('#task-title').text('编辑任务'); $('#tsave').val('update'); var tid = $(this).val(); $('#tid').val(tid); $.get(url+tid, function (data) { console.log(url+tid); console.log(data); $('#tname').val(data.name); $('#tcontent').val(data.content); }); $('#taskModal').modal('show'); }); $('#tsave').click(function () { if($('#tsave').val() == 'add') { turl = url; var type = "POST"; // add } else { turl = url + $('#tid').val(); var type = "PUT"; // edit } var data = { name: $('#tname').val(), content: $('#tcontent').val() }; $.ajax({ type: type, url: turl, data: data, dataType: 'json', success: function (data) { console.log(data); $('#taskModal').modal('hide'); $('#task').trigger('reset'); var task = '>' + '<td>'+ data.id +'</td>' + '<td>'+ data.name +'</td>' + '<td>'+ data.content +'</td>' + '<td>'+ data.created_at +'</td>' + '=>编辑=>删除</button>'+ '</td>' + '<tr>'; console.log(task); if(type == 'POST') { $('#task-list').append(task); toastr.success('添加成功！'); } else { // edit $('#task'+data.id).replaceWith(task); toastr.success('编辑成功！'); } }, error: function (data, json, errorThrown) { console.log(data); var errors = data.responseJSON; var errorsHtml= ''; $.each( errors, function( key, value ) { errorsHtml += '<li>' + value[0] + '</li>'; }); toastr.error( errorsHtml , "Error " + data.status +': '+ errorThrown); } }); }); }); 问题记录

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

路由问题

之前路由是这样的：

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