CodeSky 代码之空

随手记录自己的学习过程

Rails+AngularJS 实现Ajax前后端完全分离

2015-08-18 21:50分类: JavaScript评论: 0

因为网上的教程字数太多,而且都是英文的(没错这才是重点)。想要前后端完全分离的我完全懒得考虑这么多,就自己开始折腾能不能很轻松的完全只是用Control和Model而不管View,不引入gem,现在简单的小demo终于成功了。

Rails的初始准备见:Rails 处理跨站请求

准备完这个,接下来我们就只要管Control怎么写就行了。

首先来尝试一下get,最简单。

1	def index
2		json_str = {"xx" => "hello"}.to_json
3		render :json=>json_str, status=>'200'
4	end
5

在这里我们用了一个to_json方法来处理,把Hash转换为json格式,to_json方法是Rails中特有的,并非Ruby本身的方法。

接着我们就可以滚去前端了: 在需要调用的位置使用:$http.get('http://localhost:3000');,这是最简单的获取方法,当然我们自然不可能获取了就走人,这只是一个测试,接下来我们要使用then来进行get之后的操作。

提示:使用$http接收之后json都会经过fromJson等一系列方法,务必保证收到的是JSON,否则会报错。

1.then(function(res) {
2	console.log(res);
3	angular.forEach(res.data, function(value, key) {
4		$scope.message.push({author: key, content: value});
5	});
6});
7

我们把get的分号去掉,加上这个,为了确定res收到的是什么,我们可以在控制台输出看一下,res.data里存储的就似乎收到的json(Object),用angular.forEach遍历即可。

这样一个简单的get就完成了。

POST相比较之下就比较折腾了,但也不是很复杂,最主要的是要确定怎么样才能获取POST的值,这里并没有像$_POST这样简单的变量。

Controller 详解中我们知道:

如果在初始化脚本中开启了 config.wrap_parameters 选项,或者在控制器中调用了 wrap_parameters 方法,可以放心的省去 JSON 格式参数中的根键。Rails 会以控制器名新建一个键,复制参数,将其存入这个键名下。因此,上面的参数可以写成:

1{ "name": "acme", "address": "123 Carrot Street" }
2

会自动进行转换,然后就可以用对应控制器名来访问。

这里我们检查config>initializers的对应文件夹,发现默认开启,,使用这个黑科技。

1	def create
2		json_str = params[:article]
3		json_str = json_str.to_json
4		render :json=>json_str, status=>'200'
5	end
6

我们的Controller是ArticlesController,所以很明显的这样子获取传进来的值,转换为json,接着传出(只是一个测试,理论上接下来要实验写入数据库)。

接下来开始写前端的部分:$http.post('http://localhost:3000/create', message)简单的POST操作,尝试是否成功获取到值。

post的参数非常有意思:post(url, data, [config]);其中data可以传入任意类型,他会尽可能的转换成json传入,之后获取到的值也会用fromJson尽可能的转换,供之后使用。

在post的之后是由是否成功来进行分支处理的,这里我们只写success。

1.success(function(res) {
2	console.log(res);
3	$scope.message.push({author: res.author, content: res.content});
4});
5

一样,可以在控制台看看输出的值,会发现是一个json的Object,没有其他信息,直接使用即可。

评论 (0)