利用node.js搭建简易的http服务程序

最新推荐文章于 2024-08-14 09:46:22 发布

sleepwalker_1992

最新推荐文章于 2024-08-14 09:46:22 发布

阅读量2.5k

点赞数 1

分类专栏： node.js 文章标签： http 服务器

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/83059042

版权

node.js 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

1、通过http模块构建一个简单的http服务程序

// 创建一个简单的http服务器程序

// 1、加载http模块
var http = require('http');

// 2、创建一个http服务对象
var server = http.createServer();

// 3、监听用户的请求事件（request事件）
// 回调函数中有两个参数
// request 对象 包含用户请求报文中所有内容，通过request对象可以获取所有用户提交过来的数据
// response 对象 用来向用户响应一些数据，当服务器要向客户端响应数据的时候必须使用response对象
server.on('request', function (req, res) {
  res.write('Hello World!!!');
  // 对于每一个请求，服务器必须结束响应，否则，客户端（浏览器）会一直等待服务器响应结束
  res.end();
});

// 4、启动服务
server.listen(8080, function () {
  console.log('服务器启动了，请访问：http://localhost:8080');
});

node命令运行该js文件，然后就可以在浏览器打开http://localhost:8080

2、简化代码

var http = require('http');

var server = http.createServer(function (req, res) {
  res.write('Hello World!!!');
  res.end();
});

server.listen(8080, function () {
  console.log('服务器启动了，请访问：http://localhost:8080');
});

3、继续简化代码

var http = require('http');

http.createServer(function (req, res) {
  res.write('Hello World!!!');
  res.end();
}).listen(8080, function () {
  console.log('服务器启动了，请访问：http://localhost:8080');
});

4、用ES6写代码

const http = require('http');

http.createServer((req, res) => {
  res.write('Hello World!!!');
  res.end();
}).listen(8080, () => {
  console.log('服务器启动了，请访问：http://localhost:8080');
});

5、通过设置http响应报文头解决浏览器显示中文乱码的问题

var http = require('http');
var server = http.createServer();
server.on('request', function (req, res) {
  
  // 编码时默认使用的是utf-8，但是浏览器在解析时，浏览器默认的解析方法不是utf-8
  // 解决乱码的思路就是：服务器通过设置http响应报文头，告诉浏览器使用相应的编码来解析网页
  // 'text/plain'纯文本
  res.setHeader('Content-Type', 'text/plain; charset=utf-8');

  res.write('Hello World!!!您好，世界！！！');
  res.end();
});
server.listen(8080, function () {
  console.log('服务器启动了，请访问：http://localhost:8080');
});

6、通过设置http响应报文头解决浏览器显示html的问题

var http = require('http');
var server = http.createServer();
server.on('request', function (req, res) {

  // 设置http响应报文头
  // ‘text/html'告诉浏览器响应数据是html格式的
  res.setHeader('Content-Type', 'text/html; charset=utf-8');

  res.write('<h1>Hello World!!!</h1>您好，世界！！！');
  res.end();
});
server.listen(8080, function () {
  console.log('服务器启动了，请访问：http://localhost:8080');
});

7、构建http服务程序：根据不同的请求做出不同响应

// 根据用户的不同请求，服务器做出不同的响应
var http = require('http');
http.createServer(function (req, res) {
  res.setHeader('Content-Type', 'text/plain; charset=utf-8');
  // 获取用户请求的路径 req.url
  console.log(req.url);
  // 根据用户的不同请求，服务器做出不同的响应
  // 对于服务器来说，请求的 url 就是一个标识符
  if (req.url === '/' || req.url === '/index') {
    // res.write('hello index');
    // res.end();
    // 上面两行等价于下面这一行
    res.end('hello index');
  } else if (req.url === '/login') {
    res.end('login');
  } else if (req.url === '/register') {
    res.end('register');
  } else {
    res.end('404, not found! 客户端错误！');
  }
}).listen(8080, function () {
  console.log('服务器启动了，请访问：http://localhost:8080');
});

对于服务器来说，请求的 url 就是一个标识符

8、根据用户不同的请求，读取不同HTML文件响应

// 根据用户的不同请求，服务器做出不同的响应（响应现有的HTML文件）
var http = require('http');
var fs = require('fs');
var path = require('path');
http.createServer(function (req, res) {
  // 根据用户的不同请求，服务器做出不同的响应
  if (req.url === '/' || req.url === '/index') {
    // 读取index.html文件
    fs.readFile(path.join(__dirname, 'htmls', 'index.html'), function (err, data) {
      if (err) throw err;
      // 把读取到的index.html中的内容直接发送给浏览器
      // 这个时候在浏览器中显示的中文不会乱码，是因为在html文件中设置了utf-8
      res.end(data);
    })
  } else if (req.url === '/login') {
    // 读取login.html文件
    fs.readFile(path.join(__dirname, 'htmls', 'login.html'), function (err, data) {
      if (err) throw err;
      res.end(data);
    })
  } else if (req.url === '/register') {
    // 读取register.html文件
    fs.readFile(path.join(__dirname, 'htmls', 'register.html'), function (err, data) {
      if (err) throw err;
      res.end(data);
    })
  } else {
    // 读取404.html文件
    fs.readFile(path.join(__dirname, 'htmls', '404.html'), function (err, data) {
      if (err) throw err;
      res.end(data);
    })
  }
}).listen(8080, function () {
  console.log('服务器启动了，请访问：http://localhost:8080');
});

9、根据用户不同的请求，读取不同HTML文件（带图片和css样式）响应

// 根据用户的不同请求，服务器做出不同的响应（响应现有的HTML文件）
var http = require('http');
var fs = require('fs');
var path = require('path');
http.createServer((req, res) => {
  if (req.url === '/' || req.url === '/index') {
    // 读取index.html文件
    fs.readFile(path.join(__dirname, 'htmls', 'index.html'), (err, data) => {
      if (err) throw err;
      res.end(data);
    })
  } else if (req.url === '/login') {
    // 读取login.html文件
    fs.readFile(path.join(__dirname, 'htmls', 'login.html'), (err, data) => {
      if (err) throw err;
      res.end(data);
    })
  } else if (req.url === '/register') {
    // 读取register.html文件
    fs.readFile(path.join(__dirname, 'htmls', 'register.html'), (err, data) => {
      if (err) throw err;
      res.end(data);
    })
  } else if (req.url === '/images/index.jpg') {
    // 读取images/index.jpg文件
    fs.readFile(path.join(__dirname, 'images', 'index.jpg'), (err, data) => {
      if (err) throw err;
      // 不设置该响应头，在谷歌和IE中也可以显示图片，但为兼容所有浏览器，最好设置响应头
      res.setHeader('Content-Type', 'image/jpeg');
      res.end(data);
    })
  } else if (req.url === '/css/index.css') {
    // 读取/css/index.css文件
    fs.readFile(path.join(__dirname, 'css', 'index.css'), (err, data) => {
      if (err) throw err;
      // 不设置该响应头，在谷歌有样式，但在IE中没有样式，为兼容所有浏览器，设置响应头
      res.setHeader('Content-Type', 'text/css');
      res.end(data);
    })
  } else {
    // 读取404.html文件
    fs.readFile(path.join(__dirname, 'htmls', '404.html'), (err, data) => {
      if (err) throw err;
      res.end(data);
    })
  }
}).listen(8080, function () {
  console.log('服务器启动了，请访问：http://localhost:8080');
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index</title>

  <link rel="stylesheet" href="../css/index.css">

</head>
<body>

  <h1>首页</h1>
  <img src="../images/index.jpg" alt="index图片">

</body>
</html>

当index.html文件中有图片的时候，加载这个图片的时候也是在请求图片，所以也要在服务器中配置这个请求，才能正常显示这个图片

当index.html文件中引入样式文件的时候，加载这个样式文件也是在请求文件，所以也要在服务器中配置这个请求，才能正常在页面中渲染样式

就是说，向服务器请求不同的资源，就需要在响应头中配置不同的Content-Type类型，才能在浏览器页面正常显示请求到的资源。

但是，当HTML文件中有很多的图片、css文件等的时候，每一个都需要去配置是很麻烦的。