[翻译] Synth 官方教程2 - 一个专注于RESTful和SPA的Node Web框架

*此教程翻译现已PR同步到了此框架官网,请戳 ->Synth 教程

为“tweet”添加功能

现在我们已经能看到推文被显示出来了,但如果访问这个网站的人也能够发送推文的话,是不是就更加美妙了呢。

通过以下三个步骤来实现这个功能:

  1. 在后端创建一个接收 post 请求的方法;
  2. 在前端的 tweetsController 中创建一个发布推文的方法;
  3. 在前端页面中添加一个 textarea 文本框和一个发布按钮。

创建接收 post 请求的方法

我们需要提供一个 API 接口让这个应用去请求,它的作用是在数据库中创建一条新的推文。

synth 中添加接口的方法,就是在用来与接口交互的资源文件夹[译注:就是 back/resource/ 文件夹]中创建一个公共方法。在这个例子中,我们将会在 back/resources/tweets/ 文件夹里的 a.js 中添加一个接收 post 请求的方法。

备注.js 文件的命名跟 synth 的运行没有任何关系,你可以选择任何一个符合你需求的名称。但是在 back/resources/ 中的文件夹名称和 synth 是有关系的,它们决定了 synth 监听的路由地址。

my_app/back/resources/tweets/createTweets.js 这个文件中添加以下代码:

exports.post = function(db, params){
	if(!params.content) throw 422;
	
	return db.collection('tweets').insert({
		content: params.content.slice(0, 140),
		created_at: new Date()
	});
}

说明

你现在在 /api/tweets 这个路由上已经有了一个能够响应 POST 请求的处理程序。它通过这样的声明 exports.post = function(db, params) 来指定请求处理程序依赖于 dbparams 服务(都是默认模板的一部分[译注:作者的意思应该是说这中声明方式是默认写法,不用刻意理会])。Synth 将会在请求处理程序被调用的时候自动注入依赖[译注:即将db和params服务作为默认参数传入这个函数]。在执行的过程中,任何参数都会作为请求体的一部分被传入,可以通过 params 对象去获取这些参数,另外 db 对象将会提供进行数据库连接的组件。

如果请求体中没有附加任何内容,这段程序将会抛出 422 错误,也就是将响应状态码设置为 422 并且返回给客户端。相反,如果响应体中有内容,那么它将会在 mongoDB 中插入一个新的文档[译注:“文档”即推文实例,因为 mongoDB 是文档型数据库,所以这里称之为文档]。

也许你现在想知道:为什么这个函数会把对数据库的调用语句作为返回值呢?因为 Synth 内建了对 promise 的支持。意思是说,如果请求成功(即状态码为 200 ),你可以选择直接返回JSON数据,也可以选择返回一个 promise。而在这个应用中,db 提供了一个叫做 promised-mongo 的库,正如你在 back/service/db.js 中所能看到的那样,它被声明在了 db 这个服务中。它允许你和 mongoDB 进行交互并且将一个 promise 作为结果返回。如果返回值是一个 promise 的话,synth 将会等待这个 promise 被解决(即数据已经被写入到数据库中),然后将一个新的推文以JSON的形式和响应体一起返回给客户端。

如果不使用 synth 的 promise 特性及依赖注入,代码需要像下面这样写:

exports.post = function(req, res){
	if(!req.body.content) return res.send(422);
	
	req.db.collection('tweets').insert({
		content: req.body.content.slice(0, 140),
		created_at: new Date()
	}, function(tweet){
		res.send(JSON.stringify(tweet));
	});
}

上述代码也能完成同样的功能,但代码行数会更加多一些。有人曾说过,代码越多也就意味着 bug 出现几率越高!

tweetsController 中创建一个发布方法

现在我们已经把后端部分准备好了,如果想要通过发起 http 请求来向数据库添加推文的话,就需要在前端添加创建发送推文请求的 JS 代码。

找到 my_app/front/controllers/tweets.js ,在 tweetsController 中添加以下代码:

$scope.publish = function(){
	$http.post('/api/tweets', {content: $scope.newTweet})
	.success(function(tweet){
		$scope.tweets.unshift(tweet);
	});
	$scope.newTweet = '';
}

你还需要将 $http 服务注入给这个控制器(在代码的第 2 行):

.controller('tweetsControlls', function($scope, $http, data){

说明

如果你很熟悉 AngularJS,将会非常容易理解上述代码。它向 http://localhost:3000/api/tweets 这个地址发起了一个 POST 请求,并携带了一串 JSON 数据(例如: {"content": "An example tweet"})。

synth 一样,AngularJS 也内建了对 promise 的支持。这个 post 请求就是一个 promise,一旦它成功地被解决,就会添加一条推文到列表中并呈现给用户[译注:即 post 请求成功的话就会调用 success 回调函数去添加推文]。

为了防止意外发送两条一模一样的推文,这段代码还会在 http 请求完成之前将 newtweet 这个变量清空。

添加 textarea 和 button 表单控件

现在我们已经完成了发布推文的前后端代码,但还剩下让用户能够输入他们的推文并且触发 publish 方法的 UI 及交互部分。

找到用来显示推文列表的视图模板,它位于 my_app/front/html/tweets/getIndex.jade

打开这个文件并将以下代码添加到最顶部:

textarea(ng-model="newTweet")
button(ng-click="publis()", ng-disabled="newTweet.length == 0")

说明

也许你对 jade 并不熟悉,可一旦掌握了它的窍门,将能以更好的方式去编写 HTML。

上述 jade 代码添加了一个 textarea 文本框,并将它关联到了 newTweet 这个 Angular 数据模型上。接着它添加了一个 button 按钮并绑定了 click 事件,当点击这个按钮的时候就会去触发控制器中的 publish 方法。

进行到到这里,你已经能够发布一条新的推文了!

原文地址:

  1. https://www.synthjs.com/tutorial/#publish