Question

我想尝试在Racket中编写一些博客或个人网站或本地Web服务。我已经完成了教程here，然后我找到了this邮件列表条目。除此之外，我还使用了documenation中的信息。基于URL的调度似乎比教程更容易，所以我去了，并获得了以下代码：

#lang racket

(provide/contract
  (start (-> request? response?)))

(require
  web-server/templates
  web-server/servlet-env
  web-server/servlet
  web-server/dispatch)

;; =====
;; STATE
;; =====
(define (get-vocabulary-for-topic topic)
  ;; for now always returns the same
  (list
    (list "sich fuer eine Person entscheiden" "xuǎnzé" "32" "选择")
    (list "teilnehmen" "cānyù" "14" "参与")
    (list "die Wahl" "dàxuǎn" "43" "大选")))

;; ======================
;; APPS HANDLING REQUESTS
;; ======================

(define (vocabulary-app request topic)
  (response/full
    200 #"OK"
    (current-seconds) TEXT/HTML-MIME-TYPE
    empty
    (list (string->bytes/utf-8 (render-vocabulary-page topic)))))

(define (vocabulary-overview-app request)
  (response/xexpr
    `(html
       (head (title "Vocabulary Overview")
             (link ((rel "stylesheet") (href "css/general.css") (type "text/css"))))
       (body (p "This is an overview of vocabulary pages.")))))

(define (overview-app request)
  (response/full
    200 #"OK"
    (current-seconds) TEXT/HTML-MIME-TYPE
    empty
    (list (string->bytes/utf-8 (render-overview-page)))))

;; ===============
;; RENDERING STUFF
;; ===============

(define (render-vocabulary-page topic)
  (let
    ([vocabulary (get-vocabulary-for-topic topic)])
    (let
      ([content (render-vocabulary-table vocabulary)]
        [page-title "Vocabulary"]
        [special-css-imports
          (render-css-include "css/vocabulary-table.css")]
        [special-js-imports ""]
        [header ""]
        [footer ""]
        [navigation ""])
      (include-template
        "templates/base.html"))))

(define (render-vocabulary-table vocabulary)
  (let
    ([table-headers (list "German" "Pinyin" "Tones" "Chinese")]
      [word-list vocabulary])
    (include-template "templates/vocabulary-table.html")))

(define (render-overview-page)
  (let
    ([content
       (let
         ([subpage-titles (list "vocabulary")])
         (include-template "templates/overview.html"))]
      [page-title "Overview"]
      [special-css-imports ""]
      [special-js-imports ""]
      [header ""]
      [footer ""]
      [navigation ""])
    (include-template
      "templates/base.html")))

(define (render-css-include path)
  (let
    ([path path])
    (include-template "templates/css-link.html")))


;; ====================
;; ROUTES MANAGING CODE
;; ====================
(define (start request)
  ;; for now only calling the dispatch
  ;; we could put some action here, which shall happen before dispatch
  (blog-dispatch request))

(define-values (blog-dispatch blug-url)
  (dispatch-rules
    [("index") overview-app]
    [("vocabulary") vocabulary-overview-app]
    [("vocabulary" (string-arg)) vocabulary-app]))

(define (respond-unknown-file req)
  (let
    ([content (include-template "templates/unknown-file.html")]
      [page-title "unknown file"]
      [special-css-imports ""]
      [special-js-imports ""]
      [header ""]
      [footer ""]
      [navigation ""])
    (response/full
      404 #"ERROR"
      (current-seconds) TEXT/HTML-MIME-TYPE
      empty
      (list
        (string->bytes/utf-8
          (include-template "templates/base.html"))))))

;; ===========================
;; ADDED FOR RUNNING A SERVLET
;; ===========================
(serve/servlet
  start
  #:servlet-path "/index"  ; default URL
  #:extra-files-paths (list (build-path (current-directory) "static"))  ; directory for static files
  #:port 8000 ; the port on which the servlet is running
  #:servlet-regexp #rx""
  #:launch-browser? true  ; should racket show the servlet running in a browser upon startup?
  ;; #:quit? false  ; ???
  #:listen-ip false  ; the server will listen on ALL available IP addresses, not only on one specified
  #:server-root-path (current-directory)
  #:file-not-found-responder respond-unknown-file)

到目前为止这个工作正常，除了当我导航到任何“子页面”时，我的静态目录中的任何文件，实际上都在static目录的子目录中，即css。 / p>

我的意思是，“主页”类似localhost:8000/index或localhost:8000/vocabulary，子页面就像localhost:8000/vocabulary/something一样。

似乎模板呈现错误，并不总是从应用程序目录的根目录访问静态目录，而只是查看localhost:8000/vocabulary/css/general.css，而它应该查看localhost:8000/css/general.css，当我去任何“主页”时它会这样做。

以下是主页上的截图：

这是在子页面上：

因此静态目录似乎会根据访问的URL而改变。起初我以为我终于明白了如何提供静态文件，但似乎我没有，我不知道如何以最佳方式解决问题。

这是我的目录结构：

/home/xiaolong/development/Racket/blog2
  - static/
    - css/
      general.css
      vocabulary-table.css
    + img/
    + js/
  - templates/
    base.html
    css-link.html
    js-link.html
    overview.html
    unknown-file.html
    vocabulary-table.html
  blog-demo.rkt
  blog.rkt

如何修复静态文件的路径？

我希望能够在代码中简单地键入css/something.css，无论哪个应用程序或路由，都应该提供文件，我不想根据我正在处理的路由更改包含路径在代码中。

我用来运行服务器的命令就是：

racket blog.rkt

来自项目的根目录。

Answer 1

这里的问题不是理解绝对路径与相对路径的概念，基本URL的概念，以及它们如何协同工作以形成给定资源的完全限定URL。

RFC 3986是如何构建和处理URL的参考。注意，它实际上使用术语统一资源标识符，URI而不是URL。它取代了以前使用旧的和不推荐使用的URL术语的文档。

但我会继续使用网址术语，以便与原始问题保持一致。

了解RFC 3986第4.1节中相对引用的概念非常重要，它可以写成相对路径或绝对路径。

在这里，解释URL的代理是您的浏览器，它只是使用RFC 3986处理您的服务器发送回的URL，作为URL应该如何工作的基础。

完全限定的URL包括协议和主机域以及端口号（如果需要），以及提供文档或资源相对于协议和主机域的位置的路径。

因此，在您的情况下，CSS文件的正确完全限定URL将是 http：// localhost：8000 / css / general.css

From RFC 3986 Section 3 http 和 localhost：8000 分别称为协议方案和权限组件，并构成您网站的主要标识符， http：// localhost：8000 在该标识符后面的任何内容称为路径组件，它位于以＆＃34;？＆＃34;开头的查询或URL片段组件之前。或＆＃34;＃＆＃34;分别

路径组件旨在模拟UNIX文件路径约定并构造树层次结构，允许您表达某些给定资源相对于您网站标识符的位置。您需要考虑一些规则。

相对参考分辨率在Section 5 of RFC 3986中给出。关键概念是基本URL，它与相对引用一起使用以构造完全限定的URL。

当您的浏览器访问位于 http：// localhost：8000 /词汇/某物的页面时，它会看到 css / general.css ，这是一个相对参考书面作为相对路径。根据解析算法，基本URL被视为最初用于访问 http：// localhost：8000 /词汇/某事

页面的URL

由于末尾没有尾部斜杠，因此最右侧斜杠右侧的路径子组件将被删除，从而为您提供 http：// localhost：8000 /词汇/ 。然后在重写的基本URL路径的末尾附加URL相对引用 css / general.css ，为您提供 http：// localhost：8000 / vocabulary / css / general.css < / strong>，当浏览器尝试检索不存在的资源时导致404错误。

如果相反，浏览器会看到 /css/general.css ，这是一个写为绝对路径的相对引用。基本URL再次是 http：// localhost：8000 /词汇/某事。由于相对引用是绝对路径，因此将删除网站标识符右侧的整个路径给你 http：// localhost：8000 。然后将相对引用附加到重写的基本URL，为您提供 http：// localhost：8000 / css / general.css ，这是正确的完全限定URL。

注意，如果您碰巧访问的网页包含以下网址 http：// localhost：8000 /词汇/某事/ ，其中包含一个斜杠。然后，任何相对路径引用（例如 css / general.css ）将合并为构造完整的URL http：// localhost：8000 / vocabulary / something / css / general.css 因为遵循该算法，浏览器会看到原始基本URL的末尾有一个尾部斜杠，并且不要删除最后一个路径子组件（或者将空子组件放到尾部斜杠的右侧）

Answer 2

我肯定认为这是一个HTML问题，而不是球拍问题。具体来说，看起来您需要将这些指定为绝对路径，而不是相对路径。因此，在您的代码中，您可能想要更改

(define (vocabulary-overview-app request)
  (response/xexpr
    `(html
       (head (title "Vocabulary Overview")
             (link ((rel "stylesheet") (href "css/general.css") (type "text/css"))))
       (body (p "This is an overview of vocabulary pages.")))))

到

(define (vocabulary-overview-app request)
  (response/xexpr
    `(html
       (head (title "Vocabulary Overview")
             (link ((rel "stylesheet") (href "/css/general.css") (type "text/css"))))
       (body (p "This is an overview of vocabulary pages.")))))

（注意css文件路径中的前导斜杠）

这会回答你的问题吗？

Racket servlet提供静态文件

2 个答案: