一、使用 Node 构建 web 应用

1. PHP是后端的网站开发语言，PHP 开发出来的网站，可以通过 Apache 服务器托管运行起来；
2. Node中，可以使用 Javascript 编写后端网站，没有类似于 Apache 这样的服务器软件，来提供对应的网站服务。所以需要手动编写一个。

二、B/S 交互模型

什么是B/S：特指基于 浏览器（Browser） 和 服务器（Server） 这种交互形式；

1. 什么是服务器：在网络节点中，专门对外提供资源服务的一台电脑；
2. 什么是客户端：在网络节点中，专门用来消费服务的一台电脑；
3. HTTP 协议的通信模型：请求 - 处理 - 响应的过程；
   • 请求：由客户端发起请求；
   • 处理：由服务器端处理请求；
   • 响应：服务器端把处理的结果，通过网络发送给客户端；
4. 什么是静态资源：服务器端只需要读取并直接发送给客户端、不需要进一步处理的资源，叫做静态资源；
5. 什么是动态资源：服务器端没有现成的资源，需要服务器端动态生成的资源，叫做动态资源；

三、实现一个类似于Apache的 静态资源服务器

使用http核心模块，创建最基本的web服务器

1. 创建最基本的web服务器

• 导入http模块：const http = require("http")；
• 创建服务器：使用 const server = http.createServer() 创建服务器；
• 绑定监听事件：通过 server.on('request', function(req, res) { 请求的处理函数 }) 绑定事件 并 指定 处理函数；
• 启动服务器：通过 server.listen(端口, IP地址, 启动成功的回调函数) 来启动服务器；
• res.end() 向客户端发送内容

// 导入http核心模块
const http = require("http");
// 创建服务器
const server = http.createServer();
// 绑定request事件,监听客户端请求
server.on("request", function(req, res) {
    // end方法向客户端发送内容
    res.end("hello world");
});
// 启动服务器
server.listen(3000, "127.0.0.1", function() {
    console.log("server running at http://127.0.0.1:3000");
});

2. 防止响应内容中文乱码问题

• 通过 设置响应报文头的 Content-Type，来指定响应内容的编码类型，从而防止乱码：
  res.writeHeader(200, {
  'Content-Type': 'text/plain; charset=utf-8'
  })

3. 根据不同的URL返回不同的文本内容

• 使用 req.url 获取客户端请求的URL地址
• res.writeHeader() 指定编码格式

server.on('request', function(req, res) {
    const url = req.url
    // 防止中文乱码
    res.writeHeader(200, {
        //  text/plain 和 text/html的区别： plain表示普通的文本字符串； html 表示以 HTMl 标签的形式去解析服务器返回的内容
        // image/jpg、image/gif、image/png
        'Content-Type': 'text/plain; charset=utf-8'
    })
    if (url === '/' || url === '/views/index.html') {
        res.end('首页')
    } else if (url === '/views/movie.html') {
        res.end('电影')
    } else if (url === '/views/about.html') {
        res.end('关于')
    } else {
        res.end('请求的内容不存在！')
    }
})

4. 根据不同的URL返回不同的HTML页面

• 主要思路：使用 fs 模块 读取URL对应的HTML页面内容，并使用 res.end() 响应给客户端即可；

const http = require('http')
const fs = require('fs')
const path = require('path')
const server = http.createServer()
server.on('request', function(req, res) {
    const url = req.url
    // TODO: 判断请求的URL地址，返回对应的HTML页面内容
    if (url === '/' || url === '/views/index.html') {
        // 返回首页页面
        // 1. 使用 fs 模块，读取 首页文件
        // 2. 把读取到的首页，通过 res.end 返回即可
        fs.readFile(path.join(__dirname, './views/index.html'), 'utf-8', (err, dataStr) => {
            if (err) return res.end('404. Not found.')
            res.end(dataStr)
        })
    } else if (url === '/views/movie.html') {
        // 返回电影页面
        fs.readFile(path.join(__dirname, './views/movie.html'), 'utf-8', (err, dataStr) => {
            if (err) return res.end('404. Not found.')
            res.end(dataStr)
        })
    } else if (url === '/views/about.html') {
        // 返回关于页面
        fs.readFile(path.join(__dirname, './views/about.html'), 'utf-8', (err, dataStr) => {
            if (err) return res.end('404. Not found.')
            res.end(dataStr)
        })
    } else if (url === '/css/1.css') {
    // 读取样式表
    fs.readFile(path.join(__dirname, '/css/1.css'), (err, buf) => {
      if (err) return res.end('404. Not found.')
      res.end(buf)
    })
  } else if (url === '/js/1.js') {
    // 读取 JS 文件
    fs.readFile(path.join(__dirname, '/js/1.js'), (err, buf) => {
      if (err) return res.end('404. Not found.')
      res.end(buf)
    })
  }
})

5. 处理并返回css样式表

6. 处理并返回Javascript文件

7. 优化

// res.end() 方法，接收两种类型的数据  String  ，二进制类型的数据
// 网络传输的时候是二进制数据，所以可以省略第二个参数，dataStr为二进制数据
// 直接给res.end()方法传入二进制数据的话，就省了一步转码。
fs.readFile(path.join(__dirname, './views/about.html'), (err, dataStr) => {
    if (err) return res.end('404. Not found.')
    res.end(dataStr)
})

客户端请求任何资源，服务器处理后客户端才能拿到

监听请求代码可以优化为：

server.on('request', function(req, res) {
    const url = req.url
        // TODO: 判断请求的URL地址，返回对应的HTML页面内容
    if (url === '/' || url === '/views/index.html') {
        // 返回首页页面
        // 1. 使用 fs 模块，读取 首页文件
        // 2. 把读取到的首页，通过 res.end 返回即可
        fs.readFile(path.join(__dirname, url), 'utf-8', (err, dataStr) => {
            if (err) return res.end('404. Not found.')
            res.end(dataStr)
        })
    } else if (url === '/views/movie.html') {
        // 返回电影页面
        fs.readFile(path.join(__dirname, url), 'utf-8', (err, dataStr) => {
            if (err) return res.end('404. Not found.')
            res.end(dataStr)
        })
    } else if (url === '/views/about.html') {
        // 返回关于页面
        fs.readFile(path.join(__dirname, url), 'utf-8', (err, dataStr) => {
            if (err) return res.end('404. Not found.')
            res.end(dataStr)
        })
    } else if (url === '/css/1.css') {
        // 读取样式表
        fs.readFile(path.join(__dirname, url), (err, buf) => {
            if (err) return res.end('404. Not found.')
            res.end(buf)
        })
    } else if (url === '/js/1.js') {
        // 读取 JS 文件
        fs.readFile(path.join(__dirname, url), (err, buf) => {
            if (err) return res.end('404. Not found.')
            res.end(buf)
        })
    }
})

进一步优化, 去掉重复代码：

server.on('request', function(req, res) {
    let url = req.url

    // TODO: 判断请求的URL地址，返回对应的HTML页面内容
    // 单独处理根目录
    if (url === '/') url = '/views/index.html'
    fs.readFile(path.join(__dirname, url), (err, buf) => {
        if (err) return res.end('404. Not found.')
        res.end(buf)
    })
})