API + JS 单页应用程序编写教程

作者 : IT 大叔 本文共1694个字,预计阅读时间需要5分钟 发布时间: 2020-10-12

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读者!希望您喜欢这篇文章!

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » API + JS 单页应用程序编写教程

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论