API + JS =单页应用程序

借助Ruby On Rails的强大功能，我们能够快速制作出非常强大的后端。包含模型，视图和控制器。但是我们也可以选择跳过视图，而是使用Rails作为API，并使用JavaScript和AJAX创建动态前端。我们的后端看起来没有什么不同，但是我们可以忘记创建视图，现在我们将数据呈现为JSON。

入门

我们的第一个命令将创建一个新的Rails后端以及api选项，这将使我们能够生成没有视图的资源。

rails new app-name --api

我们还必须设置CORS。这是维基百科的简要定义：

跨域资源共享（CORS）是一种机制，它允许从提供第一资源的域之外的另一个域请求网页上的受限资源。

我们指定的--api选项创建了一个名为“ cors.rb”的文件，并注释了所有适当的信息。我们要做的就是取消主体的注释，并指定可以访问服务器的域起源。我们可以只输入通配符*来允许任何域访问。我们还可以指定允许使用的资源，标头和方法。

后端

我喜欢从建立数据库开始。我们需要生成一些迁移，一些模型和控制器。这些命令与我们没有制作API的命令没有什么不同。

rails g resource card

除了生成迁移，模型和控制器之外，此命令还将我们通常的RESTful路由添加到“ routes.rb”。不要忘记在“ seeds.rb”或rails控制台中添加一些数据。

渲染JSON

JSON（JavaScript对象表示法）是一种很棒的，广泛使用的格式，用于在Internet和其他地方发送信息！一些流行的基于文档的数据库甚至使用它！我们越舒适越好！我们可以明确地告诉我们的rails控制器以JSON呈现数据！毕竟，我们不会渲染任何自己的.erb.html文件。

def index
  card = Card.find(params[:card_id])
  render json: card
end

这将以JSON格式呈现我们卡的信息。

前端

现在我们已经建立了后端，我们可以创建前端。我们将需要一个HTML文件，至少一个JS文件和一个CSS文件。从技术上讲，您不需要在HTML文件中那么多的内容，因为JavaScript是为DOM操作而创建的（感谢Brendan Eich，您可以动态地添加，编辑和删除网页中的元素）。

AJAX

AJAX是一套很酷的工具，可让用户在客户端全部请求，接收和呈现内容。它是“异步JavaScript和XML”的缩写。异步过程允许代码块开始执行，而其他同步过程也将执行。因此，无需等待后端将所需的卡片发送给我们，我们就可以呈现页面的其余部分。酷吧？

取

Fetch API提供了一个JavaScript接口，用于访问和处理HTTP管道的各个部分，例如请求和响应。它还提供了全局fetch（）方法，该方法提供了一种简单，逻辑的方式来跨网络异步获取资源。

直接来自MDN。简单来说，获取是开发人员使用AJAX的简便方法。语法很简单，您可能会在野外看到以下内容：

fetch('http://localhost:3000/cards')
        .then(r => r.json())
        .then(info => {
            this.addCards(info);
        })

这部分代码从我们的cards_controller的index方法请求信息。并感谢fetch，我们收到了包含卡信息以及一些其他HTTP数据的响应。然后使用.then关键字（一种告诉我们的浏览器在获取完成之前不执行内容的方式），然后使用r.json（）将响应（r）转换为JSON。这是转换后的JSON响应的示例。

{
  "id":"1",
  "type":"card",
  "attributes":{
    "front":"Hello (informal to one person)",
    "back":"Szia"
  } 
}

我们然后把我们的JSON信息，并将其发送给我们，这将存储所有我们在数组中检索到的卡，所以我们可以将它们每个渲染到我们的页面addCards类的方法！整齐！现在，我们的用户可以学习如何用匈牙利语与一个人打招呼！互联网是一个有趣的地方！Szia也可以说再见，所以... Szia读者！希望您喜欢这篇文章！