（十一）处理网站中的静态资源以及404页面

1. 搭建服务器

注意，监听请求和启动端口合并了

var http = require('http')
var fs = require('fs')

http.createServer((req, res) => {
  console.log(req.url)
  if (req.url === '/') {
    fs.readFile('./views/index.html', (err, data) => {
      if (err) {
        return res.end('404 Page')
      } else {
        res.end(data)
      }
    })
  }
}).listen(8000, () => {
  console.log('server is running at 8000')
})

/views/index.html :

  
  
  
  


  
test
  
  

运行后： 

注意：在服务端中，文件中的路径就不要写相对路径了，因为这时候所有的资源同时通过 req.url 这个路径去获取的

当浏览器收到 HTML 响应内容之后，会从上到下解析内容，当在解析的过程中，如果发现

link、script、img、iframe、video、audio 等带有 src 或者 href (link标签) 等具有外部访问资源能力的时候，浏览器会自动对这些资源发起请求。

所以控制台会输出：

（二）解决方案

新建一个 public 文件夹，将请求的资源放进去，像请求文件一样请求他们

var http = require('http')
var fs = require('fs')

http.createServer((req, res) => {
  console.log(req.url)
  if (req.url === '/') { // 首页
    fs.readFile('./views/index.html', (err, data) => {
      if (err) {
        return res.end('404 Page')
      } else {
        res.end(data)
      }
    })
  } else if (req.url.indexOf('/public') > -1) {
    // 服务器上 public 文件夹是可以供用户访问的，其他文件夹允许访问，服务端的好处，控制用户访问权限
    fs.readFile(`.${req.url}`, (err, data) => {
      if (err) {
        return res.end('404')
      } else {
        res.end(data)
      }
    })
  } else {
    // 输入其他路由 跳到 404
    fs.readFile('./views/404.html', (err, data) => {
      if (err) {
        return res.end('404 Page')
      } else {
        res.end(data)
      }
    })
  }
}).listen(8000, () => {
  console.log('server is running at 8000')
})

index.html 的代码：

  
  
  
  
  


  
test
  
  
  
  

页面展示成功：