使用 MEAN 进行全栈开发基础篇——4、接着前面玩儿添加

添加一个新用户

  在本节中，你将了解有关使用 Express 创建 API 端点，使用 Angular 构建表单，以及使用 Monk 在 Mongo 中存储文档的更多信息。

  与上一节类似，我们将从后端到前端的几个步骤中实现此功能。首先，我们将创建一个用于添加用户的 API 端点。我们将使用 Express 路由创建此端点并使用 Monk 在 Mongo 中存储用户文档。然后，我们将创建一个包含表单的新网页，以添加用户。我们将使用 Angular 构建此页面。

  Let’s get started.

1. 创建一个 API 端点

  打开 routes->users.js，在现有的路由之后和 module.exports 之前添加这个新路由（记住，module.exports 应该是你模块的最后一行）：

router.post('/',function(req,res) {
    var collection = db.get('users');
    collection.insert({
        // 这里应该是和之前的用户保持同样属性
        // 有姓名、年龄、性别
        name: req.body.name,age: req.body.age,gender: req.body.gender
    },function(err,user) {
        if (err) throw err;
        res.json(user);
    });
});

  这段代码应该相当熟悉。谈谈重要的部分。首先，注意使用 router.post 方法。在上一篇中，我们使用了 router.get 方法来处理 HTTP GET 请求。这里，我们使用 HTTP POST，这是用于创建新对象的 REST 约定。

  在路由处理程序中，首先我们获得对用户集合的引用，然后使用 insert 方法向 Mongo 添加一个新文档。

  此方法的第一个参数是具有三个属性的 JSON 对象：name，age 和 gender。我们使用 req.body 读取这些属性的值。此对象表示将在请求的正文中提交的数据。

  最后，在用于插入文档的回调方法中，如果我们没有得到任何错误，我们使用响应（res）的 json 方法返回一个 JSON 表示的新用户文档。

2. 创建一个表单

  好的，API 准备好了。现在我们需要一个用于添加用户的表单。

  在 public->partials 下创建一个名为 user-form.html 的新视图文件。在此视图中键入以下代码：

<h1>Add a User</h1>

<form>
    <div>
        <label>Name</label>
        <input></input>
    </div>
    <div>
        <label>Age</label>
        <input type="number"></input>
    </div>
    <div>
        <label>Gender</label>
        <input></input>
    </div>
    <input type="button" value="Save"></input>
</form>

  现在，我们需要告诉 Angular 在用户访问到 /add-user 时呈现这个视图。我们需要一个新的路由这么做。

  打开 forusers.js 并更新路由配置代码，如下所示：

app.config(['$routeProvider',function($routeProvider) {
    $routeProvider
        .when('/',{
            templateUrl: 'partials/home.html',controller: 'HomeCtrl'
        })
        // 添加这一部分
        .when('/add-user',{
            templateUrl: 'partials/user-form.html'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

  注意，我没有在这里设置控制器，因为我们还没有。我们将在下一步中这样做。

  视图和路由准备就绪。最后，我们需要在我们的主页中添加一个 /add-user 的链接。打开 partials->home.html 并在 ul上方添加一个新链接：

<p>
    <a href="/#!/add-user">Add a User</a>
</p>

  请注意，你应该在你的 Angular 应用程序中的链接前面加上 /#!【注：原教程和译文均为 /#，现在多了一个感叹号】。这用于兼容不支持单页应用程序的旧版浏览器。

  让我们预览我们迄今为止做了什么。返回浏览器，然后刷新主页。你应该会看到添加用户的链接。点击链接并查看添加用户页面。

  我不得不承认，这个表单看起来真的很丑陋，它离一个真正的应用程序很远。让我们给它加上一个漂亮的外观。

添加并使用 Bootstrap

  我们将使用 Bootstrap 为我们的表单添加一点风格。 如果你不熟悉 Bootstrap，它是一个前端 CSS 框架，用于构建现代和响应式Web应用程序。在这一步中，我们将引用 Bootstrap CSS 文件并使用一些 Bootstrap 类来装饰我们的表单元素。

  打开 views->layout.jade 文件
  添加如下行在 head 中的 link 下:

link(rel="stylesheet",href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css")

  确保它与上一行具有相同的缩进级别。
  现在，回到 partials->user-form.html。添加下面的类到 HTML 元素中：

<h1>Add a User</h1>

<form>
    <div class="form-group">
        <label>Name</label>
        <input class="form-control"></input>
    </div>
    <div class="form-group">
        <label>Age</label>
        <input class="form-control" type="number"></input>
    </div>
    <div class="form-group">
        <label>Gender</label>
        <input class="form-control"></input>
    </div>
    <input class="btn btn-primary" type="button" value="Save"></input>
</form>

  这些类是用于创建表单的标准 Bootstrap 类。有关如何使用 Bootstrap 创建现代表单的更多信息，请参阅 Bootstrap 文档。

  让我们回到浏览器并刷新页面。嗯…现在看起来好多了

  现在，这个表单没有行为。如果点击保存按钮，是没有任何反应的。这也是我们接下来要实现的东西。

实现添加的控制器

  正如我之前告诉所说，在 MVC 框架中，控制器负责处理视图引发的事件。我们将创建一个 Angular 控制器来处理 Save 按钮的点击事件。

  打开 forusers.js 并在文件末尾键入以下代码：

app.controller('AddUserCtrl',['$scope','$resource','$location',function($scope,$resource,$location) {
        $scope.save = function() {
            var Users = $resource('/api/users');
            Users.save($scope.user,function() {
                $location.path('/');
            });
        };
    }
]);

  这个控制器有三个依赖：$scope 作为控制器和视图之间的胶水，$resource 用于使用我们的 RESTful API，$location 用于改变浏览器地址栏中的 URL。所有这些都是内置的 Angular 服务。

  在这个控制器的主体中，我们在 $scope 上定义了 save 方法。当用户单击保存按钮时将调用此方法。我们很快就会把这个方法链接到我们的视图。现在，让我们看看这个方法里面发生了什么。

  首先，我们调用 $resource 方法传递我们的 API（/api/users）地址。这将返回一个对象的方法来使用 API。在最后一节中，我们使用查询方法来获取所有用户。在这里，我们使用 save 方法将用户提交到我们的 API。

  Users.save 方法有两个参数：要提交的对象和回调函数，这将指示异步调用完成。在回调中，我们使用 $location 服务将浏览器的地址更改为网站的根目录。Angular 知道（根据我们的路由）根 URL 绑定到主视图。它将向用户显示主页。

  现在，打开 partials->user-form.html 并更改输入字段如下：

<h1>Add a User</h1>

<form>
    <div class="form-group">
        <label>Name</label>
        <input class="form-control" ng-model="user.name"></input>
    </div>
    <div class="form-group">
        <label>Age</label>
        <input class="form-control" type="number" ng-model="user.age"></input>
    </div>
    <div class="form-group">
        <label>Gender</label>
        <input class="form-control" ng-model="user.gender"></input>
    </div>
    <input class="btn btn-primary" type="button" value="Save"></input>
</form>

  ng-model 属性是我们用于数据绑定的另一个指令。这样，我们告诉 Angular，任何时候我们的输入字段中的值被改变，它应该自动更新 $scope 被引用的属性。在第一个示例中，当标题文本框的值更改时，Angular 将自动在 $scope.user.title 中设置它。

  接下来，更改按钮声明如下：

<input class="btn btn-primary" type="button" value="Save" ng-click="save()"></input>

  ng-click 属性是我们用来处理 HTML 元素的点击事件的另一个 Angular 指令。有了这个指令，我们告诉 Angular，如果用户点击这个按钮，它应该在 $scope 上执行 save 方法，这是我们在前几分钟定义的。

  最后，在路由中注册这个新的控制器：

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

  我们完成了。让我们测试一下应用程序。返回浏览器，填写表单并提交。您应该会在列表中看到一个新用户。
  【当然，我们这个页面是没有做数据验证的，如果你什么都不输入直接点 Save，也会存入一条空数据】

  让我们快速回顾一下在本节中学到的内容。我们使用 Express 创建了一个新的 API 端点，并使用 Monk 在 Mongo 中存储用户文档。然后，我们创建了一个带有表单的 Angular 视图来添加用户。我们使用 Bootstrap 美化了表单。最后，我们为此视图创建了控制器来处理点击事件。在点击事件的处理程序中，我们使用 $resource 服务将数据提交到服务器。

  在下一部分中，我们将添加修改现有用户的功能。