「从零开始」前端node够用指北(三)⚡---网络操作

🎉 前言

• 记得我第一次接触学习node的时候还是跟着菜鸟教程一个个学起来，时间过得也挺久了，平时如果没有怎么使用的话也会慢慢淡忘些许😅。
• 当时学的时候就感觉有点迷茫，不知道学来干嘛🤯，有些公司很少需要你会node甚至不用，我相信有挺多入门选手也是这样的想法的🤧，带着这个想法我想重新学习一下node，并站在学习者的角度感同身受的分享一下这个够用指北系列，希望对大家有所帮助😆。
• 相信大家想学习node也是为了能够自己写点数据展示一下，实现一下增删查改，本系列为了照顾新手同学会讲的比较基础，目的就是为了满足前端node的够用目标。
• 本文主要分享的是node的文件操作，全文大概1800+字,阅读可能需要十分钟。具体的指北向导放在文章最下方，会持续更新喔，欢迎点赞收藏❤️❤️~

👻 NodeJS创建Web服务器

• 用百度百科的话说：Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以处理浏览器等Web客户端的请求并返回相应响应，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。目前最主流的三个Web服务器是Apache、 Nginx 、IIS。
• 而NodeJS提供了http模块可以帮组我们搭建HTTP服务端和客户端。

🚴 简单的例子

/* learnNode.js */
var http = require('http');//引入http模块
// 创建服务器
http.createServer(function (request, response) {
    response.writeHead(200, { 'Content-Type': 'text-plain' });
    response.end('Hello 小卢\n');
}).listen(8080);
复制代码

• 我们可以通过http的createServer()创建一个服务器，可以接受一个requestListener请求处理函数，自动添加到request事件，函数可以传递两个参数分别是request和response。

• request  请求对象。
• response   响应对象，收到请求后要做出的响应。

• response对象的writeHead方法设置响应头，end结束响应。
• 该writeHead函数在一个请求内最多只能调用一次，如果不调用，则会自动生成一个响应头
• 在终端执行node learnNode.js就成功建立一个服务器啦，我们在网页上输入http://localhost:8080/可以看到

• 咦怎么乱码了？？那是因为我们没有给增加编码响应头，只需要在服务器加上一句response.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});即可

• 可以看到虽然我们服务器搭建起来了，但是我们对于不同的文件要设置不同的响应头，比如html、css等都是需要不同的响应头的。

🚴 加入html

• 那我们来试试如何加载一个网页吧。

/* learnNode.js */
var http = require('http');//引入http模块
let fs = require("fs");// 引入 fs 模块
// 创建服务器
http.createServer(function (request, response) {
    // 获取learnHtml.html
    fs.readFile('./learnHtml.html', (error, data) => {
        if(error) {
        console.log(error);
        } else {
        response.writeHead(200, {
            "Content-Type": "text/html; charset='utf-8'"
        });
        // 读取html的信息写入文件
        response.write(data);
        // 结束响应
        response.end();
        }
    })
}).listen(8080);
复制代码

• 这里我们也引入了上篇学到的fs模块,用来读取我们的html文件。
• 设置请求头是html和utf-8的，再将我们读取的数据data写入服务器响应对象中。
• 此时文件结构是这样的。

• 可以看到我们html也引入了一个样式文件，我们执行node learnNode.js并在浏览器输入http://localhost:8080/试试。

• 可以看到我们的html成功加载了!!但是也没完全加载，可以看到我们的CSS样式完全没有用,这是为什么呢？原来是我们没有给对象增加css的响应头。

🚴 引入css

• 我们引入一个html的时候可能会有css也可能会有js那我们要怎么判断什么时候用哪个响应头呢？
• 那我们肯定不能写死了，我们要设定一个方法可以自动识别请求的文件后缀来添加对应的响应头。

/* learnNode.js */
var http = require('http');//引入http模块
let fs = require("fs");// 引入 fs 模块
let url = require("url");// 引入 url 模块
let path = require("path");// 引入 path 模块
// 创建服务器
http.createServer(function (request, response) {
    // 获取learnHtml.html
    // 获取 路径
    let pathName = url.parse(request.url).pathname;
    // console.log(pathName)
    if(pathName == '/'){
        pathName="learnHtml.html"
    }
    // 获取文件的后缀名
    let extName = path.extname(pathName);
    // console.log(extName)
    if(pathName !== '/favicon.ico'){
        fs.readFile('./learnHtml.html', (error, data) => {
            if(error) {
            console.log(error);
            } else {
            // 获取文件类型
            let type = getType(extName);
            // 设置响应头
            response.writeHead(200, {
                "Content-Type": type + "; charset='utf-8'"
            });
            // 读取html的信息写入文件
            response.write(data);
            // 结束响应
            response.end();
            }
        })
    }
}).listen(8080);
getType = (extName) => {
  switch(extName) {
    case '.html': return 'text/html';
    case '.css': return 'text/css';
    case '.js': return 'text/js';
    default: return 'text/html';
  }
}
复制代码

• 这里我们需要用到另外两个模块urlpath模块来获取后缀名，根据后缀名来判断是什么类型再填加相应的响应头。
• 我们可以看到先使用url.parse(request.url).pathname获取路径。
• url.parse()方法接受一个URL字符串，解析它，然后返回一个URL对象

• 打印后发现可以查询到我们请求了什么文件，但是多出来了一个/favicon.ico和/，我们需要对这两个进行特殊处理，当路径为/时改成我们请求的文件，当遇到/favicon.ico时我们跳过它不进行处理。
• 接下来使用path.extname()获取后缀名，可以获取到.css的后缀名，我们将获取到的后缀跟我们提前写好的函数进行匹配返回一个对应的响应头并在服务里面添加，这样一来我们的样式就添加上去啦。

👋 写在最后

• 总的来说NodeJS提供了http网络模块，我们可以利用这个来创建简单的服务器。
• 本文够用指北就到这里结束了，为了照顾新人讲的特别基础，请大佬们见谅哈~~
• 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛

🌅 指北向导

「从零开始」前端node够用指北(一)⚡---安装与模块

「从零开始」前端node够用指北(二)⚡---文件操作

「从零开始」前端node够用指北(三)⚡---网络操作

「从零开始」前端node够用指北(四)⚡---Express框架

「从零开始」前端node够用指北(五)⚡---连接数据库

「从零开始」前端node够用指北(六)⚡---实战之数据大屏