使用 MEAN 进行全栈开发基础篇——6、接着前面玩儿删除

GitHub 项目地址：https://github.com/maxsky/ForUsers

---

删除用户

在本节中，你将学习如何使用 Monk 删除用户。你还将复习一下你对 Express 和 Angular 的学习过程。在本章结束时，所有部分应该像拼图合在一起。

我们将在几个步骤实现此功能。从后端开始，我们将构建一个用于删除用户的 API 端点。然后，我们会在列表中每个用户的前面添加一个删除链接。当用户点击此链接时，他们将被重定向到可以看到用户详情的页面。我们在该页面上有一个确认删除按钮。点击此按钮后，将调用我们的 API 端点进行删除，然后跳转回用户列表。

但在我们在开始之前，我有一个建议。我认为到目前为止，你应该能够自己实现这个功能。我想让你花 10-15 分钟实现此功能作为一个练习，以应用你迄今为止所学到的内容。然后你可以回来对比解决方案，看看是否有任何改进的余地。在开始之前，请注意：

• 最好是按照之前提到的同样的顺序，一步一步地做这个练习。完成每个步骤后，请返回此处并查看您的解决方案。

• 如果你忘记了 Express 或 Angular API 的语法，不要担心。这是学习一个新框架的自然现象。只需浏览源代码，查看我们之前做过类似的例子就好。

• 如果你遇到困难，请随时进行 Google 搜索。

构造 API 端点

打开 routes->users.js 并添加新路由：

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

这里的一切都应该很熟悉。唯一的区别是，我们使用 router.delete 注册 HTTP DELETE 请求的路由处理程序。

此外，请注意，我们正在使用用户集合对象的 remove 方法。第一个参数，你可能猜到，是条件对象。

构建删除页

转到 partials->home.html，在每个用户前添加一个删除链接，如下所示：

<li ng-repeat='user in users'>
    <a href="/#!/user/{{user._id}}">
        {{user.name}}
    </a>
    <a href="/#!/user/delete/{{user._id}}">
        <i class="glyphicon glyphicon-remove"></i>
    </a>
</li>

这里，<i> 用于渲染图标。glyphicon 和 glyphicon-remove 都是用于渲染图标的 Bootstrap 类。Bootstrap 包括几十个用于构建应用程序的现代图标。要查看所有图标的列表，请转到 此处。要渲染图标，你需要使用两个 CSS 类。一个是 glyphicon（所有图标的基础），另一个是特定于您使用的图标的类（glyphicon-remove）。在 Bootstrap 文档中，你可以看到图标下方每个图标的 CSS 类。

点击此图标即可转到 /#!/user/delete/{{user._id}} 上的某个页面。让我们创建这个视图并为它注册一个路由。

将一个名为 user-delete.html 的新文件添加到 partials 文件夹。在此文件中编写以下代码：

<h1>Delete User</h1>
<p>
    Are you sure you want to delete this user?
</p>
<ul>
    <li>Name: {{user.name}}</li>
    <li>Age: {{user.age}}</li>
    <li>Gender: {{user.gender}}</li>
</ul>
<input type="button" value="Yes, Delete" class="btn btn-danger" ng-click="delete()" />
<a class="btn btn-default" href="/#!/">No, Go Back</a>

这里没有什么特别的。我们使用简单的 ul 和 li 来显示用户的不同属性。在实际的应用程序中，你可以使用更复杂更漂亮的标签。

只需注意我添加了 btn-danger 类到删除按钮使它显示为红色，和 btn-default 的后退按钮，使它呈白色。

回到 forusers.js 中，我们需要创建一个路由来注册此视图和控制器：

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

完成以上步骤后，回到浏览器，刷新页面并点击任一用户的 x 图标，将如下所示：
接下来，我们需要一个控制器。在此控制器中，我们将调用我们的 API 以获取网页加载时用户的详细信息。此外，当用户点击删除按钮时，我们会调用 API 删除用户。

打开 forusers.js 并创建控制器：

app.controller('DeleteUserCtrl', ['$scope', '$resource', '$location', '$routeParams',
    function($scope, $resource, $location, $routeParams) {
        var Users = $resource('/api/users/:id');
        Users.get({ id: $routeParams.id }, function(user) {
            $scope.user = user;
        })
        $scope.delete = function() {
            Users.delete({ id: $routeParams.id }, function() {
                $location.path('/');
            });
        }
    }
]);

再次，在这一点上一切都应该很熟悉。最后，将此路由添加到应用程序配置代码中：

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

你完成了，让我们测试删除功能。返回浏览器，然后刷新主页，单击删除图标删除其中一个用户，用户将被删除，你将被重定向到首页。

Wrapping Up

如果你按文章操作完，你已经证明你热衷于学习新事物，这是一个伟大的工程~。我希望你喜欢这几篇博文，并学习到 Node、Express、Angular 和 MongoDB 的基础。

让我们快速回顾在本教程中学到的内容：

• 使用 Node、Express、Angular 和 MongoDB 成功构建了具有完整 CURD 功能的应用程序。

• 使用 Robomongo 创建和填充了用户信息的数据库。

• 使用 Monk 从 Mongo 中添加，更新，删除和获取用户信息。

• 使用 Express 创建了一个 RESTful API，支持 GET、POST、PUT 和 DELETE。

• 在 Node 中了解了模块系统并使用了 require 方法。

• 了解了包管理器（NPM）并使用它来安装 Node 模块。

• 使用了 Angular 构建单页应用程序。

• 学习了 Angular 的依赖管理。

• 使用 Angular 的内置服务，例如 $scope，$resource，$location 和 $routeParams。

• 使用 Angular 指令（ng-model，ng-click）向 DOM 元素添加了行为。

• 熟悉了 Bootstrap，给你的表单和按钮添加了漂亮的外观。

---

欢迎指导各种意见，请在评论区提出，我将更正。