静态资源服务器

创建文件 

|-public
|-public/index.html
|-public/stye.css
|-public/1.png
|-server.js

 把所有的静态资源全放在public下面,然后使用server.js来启动web服务器。

// 目标
// 完成server.js代码
// http://localhost:8082/index.html   <----- public/index.html
// http://localhost:8082/style.css   <----- public/style.css

const http = require('http')
const path = require('path')
const fs = require('fs')


// 策略模式
// .png --> 'image/png'
// .html --> 'text/html;charset=ytf8'
// .js --> 'application/javascript;charset=utf8'
// .css --> 'text/css;charset=utf8'
const obj = {
  ".png ": " 'image/png'",
  ".jpg": "image/jpg",
  ".html ": " 'text/html;charset=ytf8'",
  ".js ": " 'application/javascript;charset=utf8'",
  ".css ": " 'text/css;charset=utf8'"
}

const server = http.createServer((req, res) => {

  const url = req.url === '/' ? 'index.html' : req.url

  // 如果 req.url 要访问的文件在public能找到,就读出来,返回
  const filePath = path.join(__dirname, 'public', url)
  console.log('要访问的地址是', filePath);
  fs.readFile(filePath, (err, data) => {
    if (err) {
      res.statusCode = 404
      res.end('not found')
    } else {
      const extName = path.extname(filePath)
      console.log('本次请求的资源', extName, filePath)
      // 设置响应头的content-type
      // .png --> 'image/png'
      // .html --> 'text/html;charset=ytf8'
      // .js --> 'application/javascript;charset=utf8'
      // .css --> 'text/css;charset=utf8'

      // if (extName === '.png') {
      //   res.setHeader('content-type', 'image/png')
      // } else if (extName === '.html') {
      //   res.setHeader('content-type', 'text/html;charset=ytf8')
      // } else if (extName === '.js') {
      //   res.setHeader('content-type', 'application/javascript;charset=utf8')
      // } else if (extName === '.css') {
      //   res.setHeader('content-type', 'text/css;charset=utf8')
      // }
      if (obj[extName]) {
        res.setHeader('content-type', obj[extName])
      }
      res.end(data)
    }
  })
  // if(filePath存在){
  //     读出来,返回
  // } else{ 
  //     返回404
  // }
  // res.end(filePath)
})

server.listen(8082)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值