《起跑吧,Opa》 -- 中译本 第三章 服务器、资源、统一资源定位符

时间:2021-10-18 19:12:53

《起跑吧,Opa》 -- 中译本  第三章 服务器、资源、统一资源定位符

第三章 服务器、资源、统一资源定位符


应用程序包含资源(图片,脚本,样式等等),这些资源在不同页面被嵌入成不同的URL。本章,我们将探讨如何创建一个更加通用的应用程序。


Web资源

资源可以通过服务器被发送到客户端,下图表示了不同类型的资源,包括:

  • HTML 内容

  • JavaScript 代码

  • 层叠样式表 (CSS)

  • 图片 (PNG, JPG, 或GIF 格式)

  • XML 文件


嵌入(静态)资源

关于嵌入资源Opa有专门的指令。最简单的指令莫过于@static_resource:

resource logo = @static_resource("img/logo.png")

其中的字符串参数即资源路径,它是一个相对(于项目根目录)的路径。

该指令其实是一个函数,这意味着你可以将其函数结果绑定到任意变量以便后续使用。绑定完变量后,该变量类型为资源类型,它可以通过服务器被发送给客户端请求的响应结果。

《起跑吧,Opa》 -- 中译本  第三章 服务器、资源、统一资源定位符

图 3-1. 不同类型的Web资源


有时你可能想要使用多个资源,比如某个目录下所有文件均为图片资源而你不想一个图片一个图片地使用它们,这时,你可以使用@static_resource_directory指令:

resources = @static_resource_directory("resources")

该指令会将指定目录下(包含子目录)所有资源都包含进来。


该变量是什么类型呢?实际上是一个文件名到具体文件资源的映射(map)。关于映射我们后续会详细讨论。


服务资源

嵌入资源只是第一步,接下来需要通知web服务器将嵌入的资源返给特定的请求。还记得最开始写的那个Hello, World小程序中的Server.start函数的参数么?其中的第二个参数定义了针对请求的响应内容,下面我们将把资源也显示出来,当然,第一步先定义资源

resources = @static_resource_directory("resources")

接着就应该创建资源服务器,此处我们将定义的资源作为参数传递,这样当应用需要请求资源时会实际到这个资源服务器来查找。

Server.start(Server.http, {resources:resources})

假设本地资源目录结构如下:

+- resources

+- imgs

| +- opa-logo.png

+- css

| +- style.css

此时使用 http://

localhost:8080/resources/css/style.css 你会看到style.css的内容,而如果你使用其它URL呢?你会得到声(臭)名(名)显(卓)赫(著)的404错误"Error 404: Not Found"。

那么,如果我们想要得到我们可爱的web页面并且在该web页面使用资源该怎么办?答案是,使用2个服务器:

// serve resources

Server.start(Server.http, {resources: @static_resource_directory("resources")})

// serve the main page

function page() {

<img src="resources/img/logo.png" alt="Opa"/>

<hr/>

<h1>This is a demo of a very simple Opa app.</h1>

}

Server.start(Server.http, { title: "Hello web", page:page })

在定义服务器的同时嵌入对资源的定义,在Opa中是完全允许的。


如果定义多个服务器会咋样?是这样的,当一个请求到达时,会按照服务器的定义先后顺序挨个轮询,如果该请求可以被第一个服务器响应,那么响应并返回响应结果,如果不能,轮询下一个服务器……直到找到可以响应该请求的服务器。


《起跑吧,Opa》 -- 中译本  第三章 服务器、资源、统一资源定位符服务器的定义先后顺序很重要。本例中如果你将两个服务器的定义顺序颠倒,那么页面响应时资源服务器尚未定义,那么资源也就无法访问(表现在现象上图片就显示不出来)。


还有一个方法也可达同等效果,在Server.start的第二个参数中使用服务器定义列表:

function page() {

<img src="resources/img/logo.png" alt="Opa"/>

<hr/>

<h1>This is a demo of a very simple Opa app.</h1>

}

Server.start(Server.http,

[ { resources: @static_resource_directory("resources") },

{ register: {css:["/resources/css/style.css"]} },

{ title: "Database Demo", page: page }

]

)

编译:

Demo:~ ida$ opa simple_demo.opa

运行:

Demo:~ ida$ ./simple_demo.js

效果图如下:

《起跑吧,Opa》 -- 中译本  第三章 服务器、资源、统一资源定位符
图 3-2. 我们第一个使用资源的程序


至于如何嵌入CSS资源,会在后续章节介绍。



对该文任何意见,建议请直接与译者联系。

译者微信号:liu_matureshadow