node第三天---显示静态页面

浏览器和 Web 服务器是如何通信的？

1. 浏览器中输入 IP 和 端口

2. 浏览器向服务器要求通信(想要建立通信的链接)

3. 服务器判断是否有资源处理该浏览器的通信

4. 如果服务器有资源处理，则建立一个通信的链接

5. 链接建立好以后，浏览器向服务器发送 HTTP 请求，服务器处理请求，并返回 HTTP 响应

HTTP协议

HTTP(Hyper Text Transfer Protocol)超文本传输协议

 

 

const fs = require('fs');
const path = require('path');
//导入http模块
const http = require('http');
//创建server对象
const server = http.createServer();

//监听端口3000
server.listen(3000, () => {
    console.log('开始监听3000');
});


// 监视浏览器的请求，注册 request 事件
server.on('request', (request, response) => {
  // console.log(request.url);
  if (request.url === '/' || request.url === '/index.html') {
    // 设置content-type
    // 设置响应头
    response.setHeader('Content-Type', 'text/html');

    //  找物理文件的路径，使用fs模块读取文件
    fs.readFile(path.join(__dirname, './views/index.html'), 'utf-8', (err, data) => {
      if (err) throw err;
      //  把内容返回给浏览器
      response.end(data);
    });
  } else if (request.url.includes('/public/')) {
    // 统一处理静态资源  css jpg png js
    // 如何设置 content-type
    let ext = path.extname(request.url);
    // 判断后缀名，根据不同的后缀，生成对应的content-type
    let contentType = '';
    switch (ext) {
      case '.css':
        contentType = 'text/css';
        break;
      case '.jpg':
        contentType = 'image/jpeg';
        break;
    }
    response.setHeader('Content-Type', contentType);


    // 读取对应的文件，返回给浏览器
    fs.readFile(path.join(__dirname ,'views', request.url), (err, data) => {
      if (err) throw err;
      response.end(data);
    })
  } else {
    response.end('404 Not Found');
  }
 

//fs.readFile('相对路径')

//相对路径,是相对于node程序执行的目录

 

//所以 使用 fs.readFile 读取文件的时候,使用绝对路径

//fs.readFile(patj.join(__dirname,'xxx'))