rails怎么给前端写api实现前后端分离

Python015

rails怎么给前端写api实现前后端分离,第1张

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

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

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

def indexjson_str = {"xx" =>"hello"}.to_jsonrender :json=>json_str, status=>'200'end

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

接着我们就可以滚去前端了：

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

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

.then(function(res) {console.log(res) angular.forEach(res.data, function(value, key) {$scope.message.push({author: key, content: value}) })})

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

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

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

在Controller 详解中我们知道：

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

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

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

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

def createjson_str = params[:article]json_str = json_str.to_jsonrender :json=>json_str, status=>'200'end

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

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

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

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

.success(function(res) {console.log(res) $scope.message.push({author: res.author, content: res.content})})

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

#断言

def assert_true(actual, expect)

expect(actual).to eq(expect)

end

def assert_false(actual, expect)

expect(actual).not_to eq(expect)

end

def assert_include(actual, expect)

expect(actual).to include(expect)

end

def assert_not_include(actual, expect)

expect(actual).not_to include(expect)

end

#关闭当前的tab

Driver.close

#获取浏览器的tab数

Driver.window_handles.length

#根据location来点击元素

Driver.action.move_to_location(location_x, location_y).click.perform

#页面scroll up

Driver.execute_script('window.scrollTo(0,0))

#页面scroll down

Driver.execute_script('window.scrollTo(0,document.body.scrollHeight))

#scroll到特定的元素

Driver.execute_script('arguments[0].scrollintoView(), element)

#获取当前的page的url

Driver.current_url

#获取当前浏览器的title

Driver.title

# switch to特定的frame

Driver.switch_to.frame(target)

#返回到原来的frame

Driver.switch_to.default_content

#删除所有的cookies

Driver.manage.delete_all_cookies

#浏览器返回上一页

Driver.navigate.back

# switch to一个新的tab页：

def switch_to_new_window

current_handle = Driver.window_handle rescue nilDriver.window_handles.each do |handle|next if current_handle == handleDriver.switch_to.window(handle)end

end

#在浏览器创建新的tab页，并且输入URL

current_window_handle =Driver.window handle

before_window_handles =Driver.window handles

Driver.execute_script('window.open())

switch_to_new_window

Driver.navigate.to(new_url)

#浏览器页面刷新

Driver.navigate.refresh

#获取页面元素的，X,Y坐标值

target = Driver.find_element(:id,‘elemeny_id_01')

target.rect.y

target.rect.x

#获取元素的个数

target.size

#获取元素的css

target.css_value(attri)

#获取元素的attribute.target.attribute(attri)