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

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

删除一个用户

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

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

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

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

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

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

1. 构造 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 方法。第一个参数，你可能猜到，是条件对象。

2. 构建一个删除页

转到 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 成功构建了具有完整 CRUD 功能的应用程序。

• 你使用 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，给你的表单和按钮添加了漂亮的外观。

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