Question

好的，所以我再次陷入困境。我正在使用Laravel和Angular进行todo-list应用程序。我可以通过Laravel和Angular控制器从数据库中获取数据，但是当我尝试写数据时，我无法使其工作。

所以我有一个表单，用ng-submit发布数据。当我 - 在Angular控制器中 - 将数据记录到控制台时，表单中的数据是正确的。但是当我试图将它传递给Laravel控制器时，我就陷入困境。

我不知道什么是错的，浏览网页寻找答案并没有帮助我。

Laravel路线：

<?php
Route::get('/', function () {
    return view('index');
});
Route::get('/notes', 'NoteController@index');
Route::delete('/notes', 'NoteController@destroy');
Route::post('/notes', 'NoteController@store');
//Route::post('/notes', 'NoteController@update');
Route::get('/projects', 'ProjectController@index');
Route::get('/users', 'UserController@index');
Route::group(['middleware' => ['web']], function () {
    //
});
?>

Laravel控制器：

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Note;
use App\User;
use App\Project;
use Input;
use Response;
use Redirect;
class NoteController extends Controller
{
    public function index()
    {
        try {
            $statusCode = 200;
            $notes = Note::where('removed', 0)->get()->toArray();
            $response = [];
            foreach ($notes as $note) {
                $user = User::find($note['user_id']);
                $project = Project::find($note['project_id']);

                $this_row = array(
                    'id' => $note['id'],
                    'user' => $user['uname'],
                    'project' => $project['pname'],
                    'content' => $note['content'],
                    'completed' => $note['completed'],
                    'removed' => $note['removed'],
                    'created' => $note['time_created'],
                    'deadline' => $note['time_deadline']
                );
                $response[] = $this_row;
            }
        } catch (Exception $e) {
            $statusCode = 400;
        } finally {
            return Response::json($response, $statusCode);
        }
    }

    public function store()
    {
        $note = Input::json()->get()->toArray();
        var_dump($note);
        /*
        $note->user_id = $note['user'];
        $note->project_id = $note['project'];
        $note->content = $note['content'];
        $note->time_deadline = $note['deadline'];
        $note->save();*/
    }
}

class ProjectController extends Controller
{
    public function index()
    {
        try {
            $statusCode = 200;
            $projects = Project::orderBy('pname', 'asc')->get()->toArray();
            $response = [];
            foreach ($projects as $project) {
                $this_row = array(
                    'id' => $project['id'],
                    'name' => $project['pname'],
                );
                $response[] = $this_row;
            }
        } catch (Exception $e) {
            $statusCode = 400;
        } finally {
            return Response::json($response, $statusCode);
        }
    }
}

class UserController extends Controller
{
    public function index()
    {
        try {
            $statusCode = 200;
            $users = User::orderBy('uname', 'asc')->get()->toArray();
            $response = [];
            foreach ($users as $user) {
                $this_row = array(
                    'id' => $user['id'],
                    'name' => $user['uname'],
                );
                $response[] = $this_row;
            }
        } catch (Exception $e) {
            $statusCode = 400;
        } finally {
            return Response::json($response, $statusCode);
        }
    }
}

角度控制器：

angular.module('todoApp', []).controller('MainController', function($scope, $http) {
    var thisApp = this;

    $http({method : 'GET', url : 'http://localhost:8000/notes'})
        .then (function(response) {
            thisApp.todos = response.data;
        }, function() {
            alert("Error getting todo notes");
        });

    $http({method : 'GET',url : 'http://localhost:8000/users'})
        .then(function(response) {
            thisApp.users = response.data;
        }, function() {
            alert("Error getting users");
        });
    $http({method : 'GET', url : 'http://localhost:8000/projects'})
        .then(function(response) {
            thisApp.projects = response.data;
        }, function() {
            alert("Error getting projects");
        });
    thisApp.addTodo = function(note) {
        console.log($scope.note);
        $http({
            method : 'POST', 
            url : 'http://localhost:8000/notes',
            data : $.param($scope.note),
            headers : {'Content-Type': 'application/x-www-form-urlencoded'}
        });
    };
});

HTML：

<!doctype html>
<html ng-app="todoApp">
    <head>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="/js/MainController.js"></script>
    </head>
    <body ng-controller="MainController as myControl">
        <h2>Todo</h2>
        <div>
            <table>
                <tr>
                    <th>Note:</th>
                    <th>Author:</th>
                    <th>Project:</th>
                    <th>Created:</th>
                    <th>Deadline:</th>
                </tr>
                <tr ng-repeat="todo in myControl.todos">
                    <td> {{ todo.content }} </td>
                    <td> {{ todo.user }} </td>
                    <td> {{ todo.project }} </td>
                    <td> {{ todo.created }} </td>
                    <td> {{ todo.deadline }} </td>
                    <td><button>Update</button></td>
                    <td><button>Delete</button></td>
                </tr>
            </table>
        </div>
        <h2>Add new:</h2>
        <div>
            <form ng-submit="myControl.addTodo()">
                User:<br/>
                <select ng-model="note.user">
                    <option ng-repeat="user in myControl.users" value="{{ user.id }}">{{ user.name }}</option>
                </select><br/>
                Project:<br/>
                <select ng-model="note.project">
                    <option ng-repeat="project in myControl.projects" value="{{ project.id }}">{{ project.name }}</option>
                </select><br/>
                Note:<br/>
                <textarea rows="5" cols="30"  ng-model="note.content"></textarea><br/>
                Deadline (format YYYY-MM-DD HH:MM):<br/>
                <input type="text" ng-model="note.deadline" /><br/>
                <input type="submit" value="Add" />
            </form>
        </div>
    </body>
</html>

结果如下图所示：http://imgur.com/60hIzSb

我不知道我做错了什么。我想我的问题出现在addTodo函数的Angular控制器中，但我真的不知道。有什么建议吗？

我还想知道是否有人知道如果我想使用PUT方法创建新笔记，我是否还要做其他事情而不是将method : 'POST'更改为method : 'PUT'？

Answer 1

我觉得这与此有关：

distort()

在角度中，您发送的是表格编码数据而不是json。我相信Laravel无论如何都会自动解码收到的json，所以这应该有效：

$note = Input::json()->get()->toArray();
var_dump($note);

Answer 2

如果是CSRF令牌，则将CSRF TOKEN注入您的视图

Time#to_date

并且标题中的addTodo函数传递令牌....

assert_equal @organization.exp, expiration.to_date

将数据从Angular发送到Laravel

2 个答案: