静态服务器Static Server

优化server.js

安装：yarn global add node-dev 
运行：node-dev server.js 8888

1.如果访问/index.html就要读取index文件，访问/style.css就要读取style文件。 每次读取新文件我都要写代码，如果有100个文件难道要写100个if else吗，如何简化？

response.statusCode = 200
response.setHeader('Content-Type', 'text/html;charset=utf-8')
const x = path
response.write(fs.readFileSync(`./public${x}`))
response.end()

2.当读取不存在的文件时浏览器就奔溃了，怎么解决?

思路：try catch下,如果报错了就把这个错处理一下。如果文件不存在，就返回404。

response.statusCode = 200
response.setHeader('Content-Type', 'text/html;charset=utf-8')
const filePath = path
let content
try { //有可能会报错的代码
  content = fs.readFileSync(`./public${filePath}`)
} catch (error) { //错误处理
  content = '文件不存在'
  response.statusCode = 404
}
response.write(content)
response.end()

如果是根目录就默认为/index.html

const filePath = path === '/' ? '/index.html' : path

实际上很多浏览器都会默认加上这句话。

3.如何替换Content-Type？

怎么知道文件请求的是html/css/js?

思路：通过获取用户请求路径的后缀。

console.log(filePath.lastIndexOf('.'))
const index = filePath.lastIndexOf('.')
const suffix = filePath.substring(index)
console.log(suffix)

index是.出现的位置。从/开始算，/是第0个

当请求的是/main.js时，此时的index等于5，suffix等于.js

得到后缀后，利用数据结构里的哈希表一一映射

const fileType = {
  '.html': 'text/html',
  '.css': 'text/css',
  '.js': 'text/javascript',
  '.png': 'image/png',
  '.jpg': 'image/jpeg'
}
response.setHeader('Content-Type', `${fileType[suffix] || 'text/html'};charset=utf-8`)

当suffer等于.js时，Content-Type值为'text/javascript'

如果不是html/css/js中的任意一个就设置保底值为'text/html'

知识点: try catch

try {
  //有可能会报错的代码
} catch (error) {
  //错误处理
}

优化后 完整代码

自动查找对应文件，即静态文件服务器

/******** 从这里开始看，上面不要看 ************/
console.log('有个傻子发请求过来啦！路径（带查询参数）为：' + pathWithQuery)

response.statusCode = 200
//默认首页
const filePath = path === '/' ? '/index.html' : path
console.log(filePath.lastIndexOf('.'))
const index = filePath.lastIndexOf('.')
const suffix = filePath.substring(index) //suffix后缀
console.log(suffix)
const fileType = {
  '.html': 'text/html',
  '.css': 'text/css',
  '.js': 'text/javascript',
  '.png': 'image/png',
  '.jpg': 'image/jpeg'
    }
response.setHeader('Content-Type', `${fileType[suffix] || 'text/html'};charset=utf-8`)

let content
try { //有可能会报错的代码
  content = fs.readFileSync(`./public${filePath}`)
} catch (error) {
  content = '文件不存在'
  response.statusCode = 404
}
response.write(content)
response.end()
/******** 代码结束，下面不要看 ************/

server.js文件可用来代替http server