API + JS 单页应用程序编写教程
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
- 没有金币/金币不足 怎么办?
- 本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
- 所有资源普通会员都能下载吗?
- 本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。