使用 MEAN 进行全栈开发基础篇——5、接着前面玩儿编辑_laravel 路由中 resource 第三个中的回调方法-优快云博客

修改用户信息

在本节中，你将看到另一个 API 端点，Angular 视图，控制器和路由的示例。

我们将以类似的方式来处理这一部分。首先，我们创建两个 API 端点：一个用于获取具有 ID 的用户，另一个用于更新用户。然后，我们会在首页中为每个用户添加一个链接。当用户点击此链接时，他们将被重定向到填充了用户详细信息的表单。当他们点击保存，修改的信息将被保存，然后他们将被返回到主页。

1. 创建一个 API 端点

这一步应该已经很熟悉了。我们将创建两个新路由：

GET /api/users/{id}
PUT /api/users/{id}

所以，打开 routes->users.js。并添加以下路由：

router.get('/:id', function(req, res) {
    var collection = db.get('users');
    collection.findOne({
        _id: req.params.id
    }, function(err, user) {
        if (err) throw err;
        res.json(user);
    });
});

注意，这里我们有一个路由参数，由冒号（:id）表示。你可以使用 req.params.id 访问此参数的值。

除此之外，这个路由配置的其余部分类似于你以前见过的。唯一的区别是，我们使用集合的 findOne 方法只返回一个对象。此方法的第一个参数是条件对象。因此，我们正在寻找一个 _id 等于 req.params.id 的用户。

现在，创建另一个路由：

router.put('/:id', function(req, res) {
    var collection = db.get('users');
    collection.update({
        _id: req.params.id
    }, {
        name: req.body.name,
        age: req.body.age,
        gender: req.body.gender
    }, function(err, user) {
        if (err) throw err;
        res.json(user);
    });
});

注意，我们使用 router.put 定义了这个路由。只有当发生到该端点的 HTTP PUT 请求时，才会调用此处理程序。

我们使用集合对象的 update 方法来更新数据。第一个参数是条件对象。第二个参数表示需更新的值。

其余的很简单。

2. 创建一个编辑页

首先，我们需要在首页上为每个用户添加一个链接。打开 partials->home.html 并更改 li，如下所示：

<li ng-repeat="user in users">
    <a href="/#!/user/{{user._id}}">
        {{user.name}}
    </a>
</li>

我们使用 Angular 绑定表达式根据用户的 ID 呈现动态网址。同样，请注意，为了与旧版本的浏览器兼容，URL 前面加上 /#!

现在我们需要一个视图和一个表单来编辑用户。但是，我们已经有一个带表单的视图。所以，最好重用它。

在 forusers.js 中，添加此新路由：

.when('/user/:id', {
    templateUrl: 'partials/user-form.html'
})

因为我们还没有创建控制器，也没有设置路由的控制器。我们只是回顾一下我们的工作。

返回浏览器，转到主页，并确保刷新页面。现在，每个用户都应该使用超链接来表示。点击任一用户。应该看到一个空表单，但是 URL 发生了变化。在下一步中，我们将向此表单添加行为。我们将在加载时填充表单，并添加单击保存按钮的处理操作。

3. 实现控制器

现在我们有两个选择。我们可以创建一个新的控制器，如 EditUserCtrl，或重用现有的控制器（AddUserCtrl）。你认为最好的解决方案是什么？答案是：没有最佳解决方案。这一切都取决于所处的环境中。如果两种情况（添加和编辑）有很多相似之处，只有很小的差异，那么创建一个处理这两种情况的控制器是有意义的。你需要一些条件语句来区分添加和编辑方案。另一方面，如果这两个场景中的行为大不相同，那么在一个控制器中最终会出现很多糟糕的条件语句。在这种情况下，最好将它们分成两个不同的控制器。

在开始编写本教程的这一步之前，我重复使用了相同的控制器，我不太满意其最终结果。所以，我决定把它们分成两个不同的控制器以便于大家理解。

在 forusers.js 中，创建一个新的控制器如下：

app.controller('EditUserCtrl', ['$scope', '$resource', '$location', '$routeParams',
    function($scope, $resource, $location, $routeParams) {
        var Users = $resource('/api/users/:id', { id: '@_id' }, {
            update: { method: 'PUT' }
        });
        Users.get({ id: $routeParams.id }, function(user) {
            $scope.user = user;
        });
        $scope.save = function() {
            Users.update($scope.user, function() {
                $location.path('/');
            });
        }
    }
]);

解释一下。

首先，这个控制器与我们的 AddUserCtrl 不同，它有四个依赖。我们在这里有一个额外的依赖：$routeParams，用来访问路由中的参数（URL）。在这种情况下，要编辑的用户 ID 将是我们的路由参数。

在控制器的主体中，之前我们使用 $resource 服务获取一个对象来使用我们的 API 端点。但这一次，我们以不同的方式来使用 $resource 服务。

var Users = $resource('/api/users/:id', { id: '@_id' }, {
    update: { method: 'PUT' }
});

第一个参数是到我们的端点的 URL。但是，这里我们有一个由冒号（:id）指示的路由参数。我们这里使用了路由参数，因为我们在本节前面创建的两个 API 端点也用到了路由参数。

GET /api/users/:id
PUT /api/users/:id

此方法的第二个参数是一个对象，它为路由中的 id 参数提供默认值。

{ id: '@_id' }

这里，@_id 告诉 Angular 在请求的对象中查找名为 _id 的属性。因此，当我们发送 PUT /api/users/:id 请求时，Angular 将使用用户对象的 _id 属性在路由中作为 :id 参数。

$resource 方法的第三个参数用于扩展 $resource 服务。

{ update: { method: 'PUT' } }

由于某些原因只有 Angular 的开发人员知道，默认情况下您不能使用 $resource 服务发送 HTTP PUT 请求。您需要通过添加使用 HTTP PUT 的更新方法来扩展它。

接下来，我们使用 Users.get 获取具有给定 ID 的用户。

Users.get({ id: $routeParams.id }, function(user) {
    $scope.user = user;
});

这是在页面加载时填充表单。Users.get 的第一个参数提供了路由中的 :id 参数的值。我们使用 $routeParams.id，它允许我们访问浏览器地址栏中的参数。还记得编辑页面的路由声明？

.when('/user/:id', {
    templateUrl: 'partials/user-form.html'
})

在那里，我们使用了一个路由参数（:id）。所以，我们可以访问它得到 $routeParams。

在 Users.get 的回调方法。我们获取从数据库返回的用户并将其存储在 $scope 中。这样，使用 Angular 的双向绑定在后台运行时表单将自动填充我们的用户对象。还记得 ng-model？我们将输入字段绑定到 $scope 上用户对象的属性。输入字段中的任何更改都将反馈在 $scope 中，反之亦然。

最后，在控制器的主体中，我们定义了一个保存方法，当用户单击保存按钮时将调用该方法。

$scope.save = function() {
    Users.update($scope.user, function() {
        $location.path('/');
    });
}

注意，在这里我们使用 Users.update 而不是 Users.save。这是我们在扩展 $resource 服务时定义的新方法。因此，这将向我们的 API 端点发出 HTTP PUT 请求。

我们差不多完成了。新的控制器准备就绪。我们只需要在路由配置中引用它。更改路由配置如下：

.when('/user/:id', {
    templateUrl: 'partials/user-form.html',
    controller: 'EditUserCtrl'
})

让我们来测试这个新功能。返回浏览器，然后刷新主页。选择其中一个用户。进行一些更改，然后单击保存按钮。一切都应该正常执行。

在下一节中，我们将向用户管理应用添加用户删除功能，以构建完整的 CURD（增删改查）功能。