nodejs简单开发web的demo
一.nodejs简单
步骤： 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'); });
二.
步骤： 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'); });
三.
步骤： - 单独创建一个目录来实现，比如：创建一个"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'); });
四.
- 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. - 给定的路径不是目录
五.
1. 设置 `Content-Type: application/octet-stream` 2. 设置 `Content-Disposition: attachment; filename=demo.txt`
demo:
var http = require('http'); var server = http.createServer(function (req, res) { // body... res.writeHead(200, { 'Content-Type': 'application/octet-stream', 'Content-Disposition': 'attachment; filename=demo.txt' }); res.end('hello node.js'); }); server.listen(9000, function () { // body... console.log('server is running...'); });
