使用 MEAN 和 UGLI CRUD 实现响应式 Web 设计（4）

look_w

添加新字段实现持久性要向 Talk 添加新字段，必须编辑 6 个文件 — 四个用于显示，两个用于持久性：

• app/models/talk.server.model.js
• public/modules/controllers/talks.client.controller.js
• public/modules/talks/views/create-talk.client.view.html
• public/modules/talks/views/edit-talk.client.view.html
• public/modules/talks/views/view-talk.client.view.html
• public/modules/talks/views/list-talks.client.view.html

首先要处理持久性。解决方案一半用在服务器端，另一半用在客户端。
服务器端模型（在 app/models/talk.server.model.js                中定义）是应用程序的原型。您将在其中命名字段，提供数据类型，验证规则等等。
客户端控制器（在 public/modules/controllers/talks.client.controller.js                中定义）收集来自用户的数据输入，并通过 HTTP 请求将数据推到服务器。控制器还通过连接获得 JSON 数据，并提供给视图以用于演示。
此架构的一个有趣之处是对象模型永远不会离开服务器。对象是来自客户机的数据的具体化实现，并在 HTTP 响应中序列化到 JSON。
该应用程序有两个控制器（一个位于服务器端，另一个位于客户端），但是我们只关心客户端控制器。服务器端控制器只是将进入的 JSON                推入到模型对象。因此在向模型添加额外字段时不需要对服务器端控制器做任何调整。客户端控制器要进行一些调整来容纳新的字段。
打开 app/models/talk.server.model.js，向服务器端模型添加新的字段，如清单 7 所示。您可以看到展开的                name 字段（如                  所示），同时还定义了两个元数据字段：created 和 user。
清单 7. app/models/talk.server.model.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/** * Talk Schema */ var TalkSchema = new Schema({     name: {         type: String,         default: '',         required: 'Please fill Talk name',         trim: true     },     created: {         type: Date,         default: Date.now     },     user: {         type: Schema.ObjectId,         ref: 'User'     } });

这个基于 JSON 的模式无需多加解释。在定义新字段时，您可以指定数据类型、默认值和错误消息，以显示给必要的字段。您还可以做出许多其他优化。查看 Mongoose                    documentation，获得有关的更多信息。
对 description、presenter 和 slidesUrl                添加新字段，如清单 8 所示。在本例中，description 和 presenter                都是必要字段。slidesUrl 字段是可选字段。
清单 8. app/models/talk.server.model.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

/** * Talk Schema */ var TalkSchema = new Schema({     name: {         type: String,         default: '',         required: 'Please fill Talk name',         trim: true     },     description: {         type: String,         default: '',         required: 'Please fill Talk description',         trim: true     },       presenter: {         type: String,         default: '',         required: 'Please fill Talk presenter',         trim: true     },     slidesUrl: {         type: String,         default: '',         trim: true     },     created: {         type: Date,         default: Date.now     },     user: {         type: Schema.ObjectId,         ref: 'User'     } });

此时，您的服务器端后端已经准备好接收新字段。现在您需要处理客户端控制器。打开                public/modules/controllers/talks.client.controller.js，添加新的字段，如清单 9 所示。
清单 9. public/modules/controllers/talks.client.controller.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// Create new Talk $scope.create = function() {     // Create new Talk object     var talk = new Talks ({         name: this.name,         description: this.description,         presenter: this.presenter,         slidesUrl: this.slidesUrl     });     // Redirect after save     talk.$save(function(response) {         $location.path('talks/' + response._id);     }, function(errorResponse) {         $scope.error = errorResponse.data.message;     });     // Clear form fields     this.name = '';     this.description = '';     this.presenter = '';     this.slidesUrl = ''; };

在 $scope.create 函数中，表格字段将被聚集到一个 JSON                对象，并被发送给服务器，以便实现持久存储。从模型向控制器添加相应的字段后，您就实现了持久存储。
现在我们要将注意力转移到演示层，这样用户就可以查看新字段并进行交互。