GitHub 项目地址：https://github.com/maxsky/ForUsers
删除一个用户
在本节中，你将学习如何使用 Monk 删除文档。你还将复习一下你对 Express 和 Angular 的一次学习。在本章结束时，所有部分应该像拼图合在一起。
我们将在几个步骤实现此功能。从服务器开始，我们将构建一个用于删除用户文档的 API 端点。然后，我们会在列表中每个用户的前面添加一个删除链接。当用户点击此链接时，他们将被重定向到可以看到用户详情的页面。我们在该页面上有一个确认删除按钮。点击此按钮后，将调用我们的 API 端点，然后他们将被带回到用户列表。
但在我们在开始之前，我有一个建议。我认为，到目前为止，你应该能够自己实现这个功能。我想让你花 10 - 15 分钟实现此功能作为一个练习，以应用你迄今为止所学到的。然后，你可以回来对比我的解决方案，看看是否有任何改进的余地。在开始之前，请注意：
最好是按照我之前提到的同样的顺序，一步一步地做这个练习。完成每个步骤后，请返回此处并查看您的解决方案。
如果忘记了 Express 或 Angular API 的语法，不要担心。这是学习一个新框架的自然现象。只需浏览源代码，查看我们之前做过类似的例子就好。
如果你遇到困难，请随时进行 Google 搜索。
1. 构造 API 端点
打开 routes->users.js 并添加这个新路由：
router.delete@H_404_36@('/:id'@H_404_36@,function@H_404_36@(req,res)@H_404_36@ {@H_404_36@
var@H_404_36@ collection = db.get@H_404_36@('users'@H_404_36@);
collection.remove({
_id: req.params.id
},function@H_404_36@(err,user)@H_404_36@ {@H_404_36@
if@H_404_36@ (err) throw@H_404_36@ err;
res.json(user);
});
});
这里的一切都应该很熟悉。唯一的区别是，我们使用router.delete 注册 HTTP DELETE 请求的路由处理程序。
此外，请注意，我们正在使用用户集合对象的 remove 方法。第一个参数，你可能猜到，是条件对象。
2. 构建一个删除页
转到 partials->home.html，并在每个用户前添加一个删除链接，如下所示：
<li@H_404_36@ ng-repeat@H_404_36@='user in users'@H_404_36@>@H_404_36@ <a@H_404_36@ href@H_404_36@="/#!/user/@H_404_36@@H_404_36@@H_404_36@{{user.@H_404_36@_id@H_404_36@}}@H_404_36@"@H_404_36@>@H_404_36@ @H_404_36@{{user.name@H_404_36@}}@H_404_36@ </a@H_404_36@>@H_404_36@ <a@H_404_36@ href@H_404_36@="/#!/user/delete/@H_404_36@@H_404_36@@H_404_36@{{user.@H_404_36@_id@H_404_36@}}@H_404_36@"@H_404_36@>@H_404_36@ <i@H_404_36@ class@H_404_36@="glyphicon glyphicon-remove"@H_404_36@>@H_404_36@</i@H_404_36@>@H_404_36@ </a@H_404_36@>@H_404_36@ </li@H_404_36@>@H_404_36@@H_404_36@
这里，<i> 用于渲染图标。glyphicon 和 glyphicon-remove 都是用于渲染图标的 Bootstrap 类。Bootstrap 包括几十个用于构建应用程序的现代图标。要查看所有图标的列表，请转到 此处。要渲染图标，您需要使用两个 CSS 类。一个是 glyphicon（所有图标的基础），另一个是特定于您使用的图标的类（glyphicon-remove）。在 Bootstrap 文档中，你可以看到图标下方每个图标的 CSS 类。
点击此图标即可转到 /#!/user/delete/{{user._id}} 上的某个页面。让我们创建这个视图并为它注册一个路由。
将一个名为 user-delete.html 的新文件添加到 partials 文件夹。在此文件中编写以下代码：
<h1@H_404_36@>@H_404_36@Delete User</h1@H_404_36@>@H_404_36@ <p@H_404_36@>@H_404_36@ Are you sure you want to delete this user? </p@H_404_36@>@H_404_36@ <ul@H_404_36@>@H_404_36@ <li@H_404_36@>@H_404_36@Name: @H_404_36@{{user.name@H_404_36@}}@H_404_36@</li@H_404_36@>@H_404_36@ <li@H_404_36@>@H_404_36@Age: @H_404_36@{{user.age@H_404_36@}}@H_404_36@</li@H_404_36@>@H_404_36@ <li@H_404_36@>@H_404_36@Gender: @H_404_36@{{user.gender@H_404_36@}}@H_404_36@</li@H_404_36@>@H_404_36@ </ul@H_404_36@>@H_404_36@ <input@H_404_36@ type@H_404_36@="button"@H_404_36@ value@H_404_36@="Yes,Delete"@H_404_36@ class@H_404_36@="btn btn-danger"@H_404_36@ ng-click@H_404_36@="delete()"@H_404_36@ />@H_404_36@ <a@H_404_36@ class@H_404_36@="btn btn-default"@H_404_36@ href@H_404_36@="/#!/"@H_404_36@>@H_404_36@No,Go Back</a@H_404_36@>@H_404_36@@H_404_36@
这里没有什么特别的。我使用简单的 ul 和 li 来显示用户的不同属性。在现实的应用程序中，您可以使用更复杂的标签。
只要注意，我添加了 btn-danger 类到删除按钮使它显示为红色，和 btn-default 的后退按钮，使它呈白色。
回到 forusers.js 中，我们需要创建一个路由来注册此视图和控制器：
.when('/user/delete@H_404_36@/:id',{ templateUrl: '@H_404_36@partials/user@H_404_36@-delete@H_404_36@.html' })@H_404_36@@H_404_36@
完成以上步骤后，回到浏览器，刷新页面并点击任一用户的 x 图标，将如下所示：
接下来，我们需要一个控制器。在此控制器中，我们将调用我们的 API 以获取网页加载时用户的详细信息。此外，当用户点击删除按钮时，我们会调用 API 删除用户。
打开 forusers.js 并创建这个控制器：
app.controller('DeleteUserCtrl'@H_404_36@,['$scope'@H_404_36@,'$resource'@H_404_36@,'$location'@H_404_36@,'$routeParams'@H_404_36@,function@H_404_36@($scope@H_404_36@,$resource@H_404_36@,$location@H_404_36@,$routeParams@H_404_36@)@H_404_36@ {@H_404_36@
var@H_404_36@ Users = $resource@H_404_36@('/api/users/:id'@H_404_36@);
Users.get({ id: $routeParams@H_404_36@.id },function@H_404_36@(user)@H_404_36@ {@H_404_36@
$scope@H_404_36@.user = user;
})
$scope@H_404_36@.delete = function@H_404_36@()@H_404_36@ {@H_404_36@
Users.delete({ id: $routeParams@H_404_36@.id },function@H_404_36@()@H_404_36@ {@H_404_36@
$location@H_404_36@.path('/'@H_404_36@);
});
}
}
]);
再次，在这一点上一切都应该很熟悉。
.when('/user/delete@H_404_36@/:id',{ templateUrl: '@H_404_36@partials/user@H_404_36@-delete@H_404_36@.html',controller: '@H_404_36@DeleteUserCtrl' })@H_404_36@@H_404_36@
你完成了。让我们测试删除功能。返回浏览器，然后刷新主页。单击删除图标。删除其中一个用户。用户将被删除，你将被重定向到首页。
Wrapping Up
如果你这么做了，你已经证明你热衷于学习新事物。所以这是一个伟大的工作。我希望你喜欢这几篇博文，并学习到 Node，Express，Angular 和 MongoDB 的基础。
你使用 Node，Express，Angular 和 MongoDB 成功构建了具有完整 CRUD 功能的应用程序。
你使用 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，给你的表单和按钮添加了漂亮的外观。
欢迎指导各种意见，请在评论区提出，我将更正。
