ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

nodejs简单开发web的demo

2022-04-09 10:02:29  阅读:132  来源: 互联网

标签:web http err nodejs demo Content html res Type


一.nodejs简单编写 http 服务程序

步骤:

    1. 加载http模块
    2. 创建http服务
    3. 为http服务对象添加 request 事件处理程序
    4. 开启http服务监听,准备接收客户端请求

注意:

    1. 浏览器显示可能是乱码,所以可以通过 `res.setHeader('Content-Type', 'text/plain; charset=utf-8');`设置浏览器显示时所使用的编码。
    2. Chrome 浏览器默认无法手动设置编码,需要安装"Set Character Encoding"扩展。
    3. 演示一下设置`Content-Type=text/html` 和 `Content-Type=text/plain`的区别。

  demo:

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

// 2. 创建http服务
var server = http.createServer();

// 3. 开始监听'request'事件
// 详细解释一下request对象和response对象
server.on('request', function (req, res) {
  // body...
  console.log('有人请求了~~');
});

// 4. 启动服务,开始监听
server.listen(9000, function () {
  console.log('服务已经启动,请访问: http://localhost:9000');
});

 

二.编写 http 服务程序 - 通过读取静态 HTML 文件来响应用户请求

步骤:

    1. 创建index.html、login.html、register.html、list.html、404.html文件。 
    2. 演示通过读取最简单的 HTML 文件来响应用户。
    3. 演示通过读取"具有引入外部CSS样式表"的HTML文件来响应用户。
    4. 演示通过读取"具有img标签"的HTML文件来响应用户。

注意:

- 1、注意在发送不同类型的文件时,要设置好对应的`Content-Type`
  - Content-Type参考: http://tool.oschina.net/commons
  - Content-Type参考: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
- 2、HTTP状态码参考
  - w3org参考:https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
  - w3schools参考: https://www.w3schools.com/tags/ref_httpmessages.asp
- 3、在html页面中写相对路径'./' 和 绝对路径 '/'的含义 。
  - 网页中的这个路径主要是告诉浏览器向哪个地址发起请求用的
  - './' 表示本次请求从相对于当前页面的请求路径(即服务器返回当前页面时的请求路径)开始
  - '/' 表示请求从根目录开始

补充知识点:

    1. path 模块的 join() 方法

  demo:

// 1. 加载 http 模块
var http = require('http');
// 加载文件操作模块
var fs = require('fs');
// 加载path模块,这个模块主要用来处理各种路径。
var path = require('path');



// 2. 创建http server
var server = http.createServer(function (req, res) {
  // 1. 获取用户请求的URL
  var url = req.url.toLowerCase();

  // 2. 根据用户的不同请求,做出不同响应
  if (url === '/' || url === '/index') {
    // 读取index.html文件,把该文件响应给用户
    fs.readFile(path.join(__dirname, 'index.html'), function (err, data) {
      if (err) {
        throw err;
      }
      res.writeHead(200, 'OK', {
        'Content-Type': 'text/html; charset=utf-8'
      });
      // res.setHeader('Content-Type', 'text/html; charset=utf-8');
      res.end(data);

    });
  } else if (url === '/login') {
    // 读取login.html文件,把该文件响应给用户
    fs.readFile(path.join(__dirname, 'login.html'), function (err, data) {
      if (err) {
        throw err;
      }
      res.writeHead(200, 'OK', {
        'Content-Type': 'text/html; charset=utf-8'
      });
      // res.setHeader('Content-Type', 'text/html; charset=utf-8');
      res.end(data);

    });
  } else if (url === '/register') {
    // 读取register.html文件,把该文件响应给用户
    fs.readFile(path.join(__dirname, 'register.html'), function (err, data) {
      if (err) {
        throw err;
      }
      res.writeHead(200, 'OK', {
        'Content-Type': 'text/html; charset=utf-8'
      });
      // res.setHeader('Content-Type', 'text/html; charset=utf-8');
      res.end(data);

    });
  } else if (url === '/404') {
    // 读取register.html文件,把该文件响应给用户
    fs.readFile(path.join(__dirname, '404.html'), function (err, data) {
      if (err) {
        throw err;
      }
      res.writeHead(200, 'OK', {
        'Content-Type': 'text/html; charset=utf-8'
      });
      // res.setHeader('Content-Type', 'text/html; charset=utf-8');
      res.end(data);

    });
  }
  
});



// 3. 启动服务
server.listen(9090, function () {
  // body...
  console.log('please visit: http://localhost:9090');
});

 

三.模拟 Apache 实现静态资源服务器

步骤:

    - 单独创建一个目录来实现,比如:创建一个"07-Apache"的目录。
    - 在该目录下新建 `public` 目录,假设该目录为静态资源目录。
    - 根据用户请求的路径在 public 目录下寻找对应路径下的资源。
    - 如果找到了,那么将该资源返回给用户,如果没找到则返回404错误。
    - 通过 mime 模块设置不同类型资源的Content-Type
    - 实现完毕后把素材中的'An Ocean of Sky' 和 'Hacker News'分别拷贝到静态资源目录下, 测试是否成功

其他:

    - 介绍 NPM
    - 介绍 mime 第三方模块
   - `npm install mime`
   - 在代码中直接 `var mime = require('mime')`

  demo:

// 1. 加载对应模块
// 1.1 加载http模块
var http = require('http');
// 1.2 加载path模块,方便路径拼接
var path = require('path');
// 1.3 加载文件读取模块
var fs = require('fs');
// 1.4 加载判断文件MIME类型的模块
var mime = require('mime');


// 2. 创建http server
var server = http.createServer();


// 3. 监听用户request事件
server.on('request', function (req, res) {
  // 1. 获取用户的请求路径, 并转换为小写
  var url = req.url.toLowerCase();

  // 判断如果请求的路径是 '/' 那么等价于 '/index.html'
  url = (url === '/') ? '/index.html' : url;

  // 2. 根据用户请求的url路径, 去public目录下查找对应的静态资源文件。找到后读取该文件,并将结果返回给用户
  // 2.1 根据用户请求的url拼接本地资源文件的路径
  var filePath = path.join(__dirname, 'public', url);

  // 2.2 根据请求的文件路径设置Content-Type
  res.setHeader('Content-Type', mime.lookup(url));

  // 2.2 根据路径去读取对应的文件
  // 【注意】读取文件前无需判断文件是否已经存在,而是在读取文件的回调函数中根据error的错误信息来判断读取文件是否成功以及发生的错误
  fs.readFile(filePath, function (err, data) {
    // 判断是否有错误
    if (err) {

      if (err.code === 'ENOENT') { // 判断是否是请求的文件是否不存在

        res.setHeader('Content-Type', 'text/html; charset=utf8');
        res.statusCode = 404;
        res.statusMessage = 'Not Found';
        res.end('<h1>请求的资源不存在!</h1>');

      } else if (err.code === 'EACCES') { // 判断文件是否有访问权限

        res.setHeader('Content-Type', 'text/html; charset=utf8');
        res.statusCode = 403;
        res.statusMessage = 'Forbidden';
        res.end('<h1>Permission denied!</h1>');
      } else {

        throw err;  
      }

    } else {
      
      // 如果没有错误则将读取到的文件返回给用户
      res.statusCode = 200;
      res.statusMessage = 'OK';
      res.end(data);
    }
  })
});



// 4. 启动服务
server.listen(9000, function () {
  // body...
  console.log('server is running, please visit: http://localhost:9000');
});

四.Common System Errors - 常见错误号

- EACCES (Permission denied)
  - An attempt was made to access a file in a way forbidden by its file access permissions.
  - 访问被拒绝
- EADDRINUSE (Address already in use)
  - An attempt to bind a server (net, http, or https) to a local address failed due to another server on the local system already occupying that address.
  - 地址正在被使用(比如:端口号备占用)
- EEXIST (File exists)
  - An existing file was the target of an operation that required that the target not exist.
  - 文件已经存在
- EISDIR (Is a directory)
  - An operation expected a file, but the given pathname was a directory.
  - 给定的路径是目录
- ENOENT (No such file or directory)
  - Commonly raised by fs operations to indicate that a component of the specified pathname does not exist -- no entity (file or directory) could be found by the given path.
  - 文件 或 目录不存在
- ENOTDIR (Not a directory)
  - A component of the given pathname existed, but was not a directory as expected. Commonly raised by fs.readdir.
  - 给定的路径不是目录

 

五.设置 http 响应报文头实现弹框下载功能

1. 设置 `Content-Type: application/octet-stream`
2. 设置 `Content-Disposition: attachment; filename=demo.txt`

 

标签:web,http,err,nodejs,demo,Content,html,res,Type
来源: https://www.cnblogs.com/tjp40922/p/16120947.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有