Question

修改：发现一些有趣的内容。 CSS适用于IE8，但不适用于Firefox。我猜这是一个字符编码问题？

我正在尝试学习如何编写自己的Web服务器，并设法让服务器启动并运行，但由于某种原因它不会显示css。然而，Javascript工作得很好。加载了css文件，但样式没有显示在Firebug中。谁能告诉我这里我做错了什么？

服务器代码如下所示。要运行服务器，只需将“start”称为空列表即可。或者，如果您需要，可以在此处提取整个代码库：https://github.com/dm9600/webserver

require 'socket'

def start(args)
   webserver = create_server args
   basepath = './app/'

   while (session = webserver.accept)
      puts "HTTP/1.1 200/OK\nContent-type:text/html\n\n"
      session.print "HTTP/1.1 200/OK\nContent-type:text/html\n\n"
      request = session.gets
      puts "request" + request
      trimmedrequest = trim_request(request)
      filename = trimmedrequest.chomp
      begin
         displayfile = find_file(filename)
         content = displayfile.read()
         session.print content
      rescue Errno::ENOENT
         session.print "File not found"
      end
      session.close
   end
end 

def create_server(args)
   command = args[0]
   #default port is going to be 3333
   port = 3333
   #default address will be localhost
   address = "localhost"
   port = args[1] if args[0].instance_of? String and args[0].eql? "p"
   puts "Server created at #{address} and port #{port}"
   TCPServer.new address, port
end 

def trim_request(request)
   request.gsub(/GET\ \//, '').gsub(/\ HTTP.*/, '')
end 

def find_file(path)
   basepath = "./app/"
   if path.empty?
      full_path = basepath + 'index.html'
   else
      full_path = basepath + path
   end 
   File.open full_path, 'r'
end

我正在运行的HTML。它位于/app/index.html。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script src="js/application.js"></script>
      <title>CSS-Test</title>

      <link type="text/css" href="css/application.css" rel="stylesheet"></link>
   </head>
   <body>

      <h1>CSS-Test</h1>

      <div id="box-one">
         <p>This is box one.</p>
      </div>

      <div id="box-two">
         <p>This is box two.</p>
      </div>

   </body>
</html>

我正试图运行的CSS。它位于/app/css/application.css

.someclass {
   background: blue;
}

* {
   background: black;
}

编辑：此处有错误的css文件位置。

Answer 1

由于“mu太短”在评论中指出，我犯了一个巨大的新手错误，用Content-type: text/html发回一切，这显然是个大问题！我所要做的就是将正确的文件与正确的内容类型相关联，一切正常。这是固定的server.rb文件：

require 'socket'

def start(args)
   webserver = create_server args
   basepath = './app/'

   while (session = webserver.accept)
      request = session.gets
      trimmedrequest = trim_request(request)
      ct = get_content_type trimmedrequest
      session.print "HTTP/1.1 200/OK\nContent-type:#{ct}\n\n"
      puts"HTTP/1.1 200/OK\nContent-type:#{ct}\n\n" 
      filename = trimmedrequest.chomp
      begin
         displayfile = find_file(filename)
         content = displayfile.read()
         session.print content
      rescue Errno::ENOENT
         session.print "File not found"
      end
      session.close
   end
end 

def create_server(args)
   command = args[0]
   #default port is going to be 3333
   port = 3333
   #default address will be localhost
   address = "localhost"
   port = args[1] if args[0].instance_of? String and args[0].eql? "p"
   puts "Server created at #{address} and port #{port}"
   TCPServer.new address, port
end 

def trim_request(request)
   request.gsub(/GET\ \//, '').gsub(/\ HTTP.*/, '')
end 

def find_file(path)
   basepath = "./app/"
   if path.empty?
      full_path = basepath + 'index.html'
   else
      full_path = basepath + path
   end 
   File.open full_path, 'r'
end 

def get_content_type(path)
    ext = File.extname(path)
    return "text/html"  if ext.include? ".html" or ext.include? ".htm"
    return "text/plain" if ext.include? ".txt"
    return "text/css"   if ext.include? ".css"
    return "image/jpeg" if ext.include? ".jpeg" or ext.include? ".jpg"
    return "image/gif"  if ext.include? ".gif"
    return "image/bmp"  if ext.include? ".bmp"
    return "text/plain" if ext.include? ".rb"
    return "text/xml"   if ext.include? ".xml"
    return "text/xml"   if ext.include? ".xsl"
    return "text/html"
end

Web服务器正在加载css文件，但样式未显示

1 个答案: