【译】基于MEAN的全栈开发实例教程6(完)

原文地址 https://blog.udemy.com/node-js-tutorial
感谢来自Udemy的Samantha来信分享

删除一个视频

在本节中,你将学习如何通过Monk删除文档。你也会再一次回顾你所学到的关于Express和Angular的知识。到这一节的结尾,所有的知识点都会像拼图一样放在一起。

我们将在后面几步中实现这一功能。从服务器开始,我们将建立一个用于删除视频文档的接口。然后,我们将在列表中为每个视频前面添加一个删除链接。当用户点击这个链接,他们将被重定向到一个页面,在那里他们可以看到视频的细节。我们将在该页上有一个确认删除按钮。一旦他们点击这个按钮,页面将调用API端点,跳转带回的视频列表。

但在我们实现功能之前,我有一个建议。我认为你所学的到目前为止,应该能够独自实现这一功能。我想让你花10~15分钟来实现这个功能,作为一个练习,以检验你所学到的。然后,你可以回顾你的解决方案与我的对比,看看是否有任何改进的空间。在你开始之前,请注意:

  • 最好的方式是像我之前提到那样一步一步地完成。一旦你完成每一步,回到这里,回顾你的解决方案。
  • 如果你忘记了Express的语法或者Angular的接口,不要担心。这是学习一个新的框架时的自然现象。只需要浏览源代码,查看我们早期的类似例子就好。
  • 如果你被卡住了,谷歌一下。

第1步:构建一个API端点

打开 routes>videos.js 然后添加一个新的路由:

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

这些代码和之前的差不多,唯一的区别是我们使用了 router.delete 来为HTTP DELETE请求注册一个路由处理器。

同时注意我们这里使用了视频文档对象的 remove 方法。第1个参数你可能已经猜到了,正是一个标准对象。

第2步:构建删除页面

回到 partials > home.html,在每一个视频链接前添加一个删除链接:

<li ng-repeat='video in videos'>
    <a href="/#/video/{{video._id}}">
        {{video.title}}
    </a>
    <a href="/#/video/delete/{{video._id}}">
        <i class="glyphicon glyphicon-remove"></i>
    </a>
</li>

在这里用来渲染一个图标。glyphicon和glyphicon-remove都是Bootstrap用来绘制图标的类。Bootstrap包括几十个用来构建应用的现代图标。为了看到所有图标的列表,可以去这里。绘制一个图标,你需要使用两个CSS类。一是glyphicon(所有图标的基础类),另一个就是你使用的类(glyphicon-remove)。在Bootstrap文档中,你可以在每个图标下面看到这个CSS类。

点击图标页面将跳转到 /#/video/delete/。让我们创建一个试图并为它注册一个路由。

partials 文件夹中添加一个叫做 video-delete.html 的新文件。文件中写下如下代码:

<h1>Delete Video</h1>
<p>
    Are you sure you want to delete this video?
</p>
<ul>
    <li>Title: {{video.title}}</li>
    <li>Description: {{video.description}}</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 让它变成白色。

当我们完成这些步骤之后,页面看起来是这个样子的:

接下来,我们需要为视图编写一个控制器。在控制器中,我们将调用API来获取视频的详细信息并加载到页面上。当用户点击删除按钮我们将调用API来删除这个视频。

打开 Vidzy.js 并创建这个控制器:

app.controller('DeleteVideoCtrl', ['$scope', '$resource', '$location', '$routeParams',
    function($scope, $resource, $location, $routeParams){
        var Videos = $resource('/api/videos/:id');
        Videos.get({ id: $routeParams.id }, function(video){
            $scope.video = video;
        })
        $scope.delete = function(){
            Videos.delete({ id: $routeParams.id }, function(video){
                $location.path('/');
            });
        }
    }]);

最后我们创建一个路由来注册视图和控制器。添加路由到应用的配置中:

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

现在已经完成了。测试一下这个删除功能。回到浏览器并且刷新首页。点击删除图标。删除一个视频。这个视频将被删除然后调回首页。

总结

如果你按照教程做到这一步了,你已经证明了你对学习新事物充满热情。这非常不错~我希望你喜欢这个教程并且能学习到Node,Express,Angular和MongoDB的基础知识。

  • 你使用了Node,Express,Angular和MongoDB成功地建立了一个完整的CRUD应用。
  • 你使用了robomongo创建和填充数据库视频文档。
  • 你使用了Monk在Mongo中来添加、更新、删除和查询视频文档。
  • 你用Express创造了一个RESTful API:GET,POST,PUT,DELETE。
  • 你了解了Node的模块系统,并使用了require方法。
  • 你了解了Node的软件包管理器(NPM),用它来安装Node模块。
  • 你用Angular度来构建一个单页应用程序。
  • 你学到了关于Angular的依赖性管理。
  • 你使用了Angular的内置服务,如$scope、$resource、$location和$routeparams。
  • 你用Angular指令(ng-model, ng-click)将行为添加到DOM元素。
  • 你熟悉了使用Bootstrap的类来给你的表单和按钮添加漂亮、流行的外观。

下一步是什么?Node不仅仅是你目前所学的这些,这就是为什么我计划创建一个全面的课程,来教你使用Node做许多令人惊奇的事情。我将重点教会你:

  • 认证和授权
  • 预防常见安全攻击
  • 数据验证
  • 缓存
  • 实时应用
  • 更多…

如果你很喜欢我的教学风格并且想从我这里学习更多,欢迎订阅我的时事通讯。一旦我的课程准备好了将发送通知给你。

源代码

教程中提到的代码已上传到github:
https://github.com/yalishizhude/Vidzy

如果觉得阅读这篇文章有收获,不妨点个赞吧^_^

亚里士朱德 wechat
更多WEB技术分享请订阅微信公众号“WEB学习社”