一、使用 Node 构建 web 应用
- PHP是后端的网站开发语言，PHP 开发出来的网站，可以通过 Apache 服务器托管运行起来；
- Node中，可以使用 Javascript 编写后端网站，没有类似于 Apache 这样的服务器软件，来提供对应的网站服务。所以需要手动编写一个。
二、B/S 交互模型
什么是B/S：特指基于 浏览器（Browser） 和 服务器（Server） 这种交互形式；
- 什么是服务器：在网络节点中，专门对外提供资源服务的一台电脑；
- 什么是客户端：在网络节点中，专门用来消费服务的一台电脑；
- HTTP 协议的通信模型：请求 - 处理 - 响应的过程；
- 请求：由客户端发起请求；
- 处理：由服务器端处理请求；
- 响应：服务器端把处理的结果，通过网络发送给客户端；
- 什么是静态资源：服务器端只需要读取并直接发送给客户端、不需要进一步处理的资源，叫做静态资源；
- 什么是动态资源：服务器端没有现成的资源，需要服务器端动态生成的资源，叫做动态资源；
三、实现一个类似于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)
})
})