node.js (fs文件系统模块,path路径模块,http模块web服务器）

困在雨天

已于 2023-05-06 11:28:43 修改

阅读量493

点赞数

分类专栏： node 文章标签： node.js javascript ajax 前端服务器

于 2023-05-04 18:07:38 首次发布

本文链接：https://blog.csdn.net/weixin_44106237/article/details/130407224

版权

node 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

node.js是js的后端运行环境

浏览器是js的前端运行环境

node.js是无法调用DOM和BOM和ajax等浏览器内置API

node.js是一个基于ChromeV8引擎的JavaScript运行环境

node.js可以做什么？

node.js的学习路径

node安装

在node.js环境中执行javaScript代码

fs文件系统模块

1.fs.readFile()的语法格式

2.fs.writeFile()的语法格式

5.根据不同的url响应不同的html内容

核心实现步骤

6.案例：实现流光折线图的web服务器

实现步骤

node.js可以做什么？

node.js作为一个js的运行环境,仅仅提供了基础的功能和API.然而,基于node.js提供的这些基础功能,很多强大的工具和框架如雨后春笋,层出不穷,所以学会了node.js,可以让全段程序员胜任更多的工作和岗位。

1.基于Express框架（http://www.expressjs.com.cn/），可以快速构建web应用。

2.基于Electron框架（https://electronjs.org/),可以构建跨平台的桌面应用.

3.基于restify框架(http://restify.com)，可以快速构建API接口项目

4.读写和操作数据库、创建实用的命令行工具辅助前端开发、etc…

node.js的学习路径

JavaScript基础i语法+Node.js内置API模块(fs、path、http等)+第方API模块(express、mysql等)

node安装

Node.js官网，下载的目录最好不要改动

在node.js环境中执行javaScript代码

1.打开终端

2.输入node空格加要执行的js文件的路径

终端中的快捷键

1.使用 ↑ 键，可以快速定位到上一次执行的命令

2.使用tab键，可以快速补全路径

3.使用ESC键，能够快速清空当前已输入的命令

4.输入cls命令，可以清空终端

fs文件系统模块

fs模块是Node.js官方提供的、用来操作文件的模块。它提供了一系列的方法和属性，用来满足用户对文件的操作需求，

例如：

1.fs.readFile()方法，用来读取指定文件中的内容

2.fs.writeFile()方法，用来向指定的文件中写入内容

如果要在JavaScript代码中，使用fs模块来操作文件，则需要使用如下的方式先导入它：

const fs = require('fs')

1.fs.readFile()的语法格式

使用fs.readFile()方法，可以读取指定文件中的任务，语法格式如下：

fs.readFile(path,[options],callback)

参数解读：
参数1：必选参数，字符串，表示文件的路径
参数2：可选参数，表示以什么编码格式来读取文件
参数3：必选参数，文件读取完成后，通过回调函数拿到读取的结果

使用示例：以utf8的编码格式，读取指定文件的内容，并打印eer和dataStr的值：

const fs =require('fs')
fs.readFile('./files/11.txt','utf8',function(err,datastr){
console.log(err)
console.log('----')
console.log(datastr))

2.fs.writeFile()的语法格式

使用fs.writeFile0方法，可以向指定的文件中写入内容，语法格式如下：

fs.writeFile(file,data,[options],callback)

参数解读：
参数1：必选参数，需要指定一个文件路径的字符串，表示文件的存放路径
参数2：必选参数，表示要写入的内容。
参数3：可选参数，表示以什么格式写入文件内容，默认值是utf8。
参数4：必选参数，文件写入完成后的回调函数。

使用示例：

const fs= require('fs')
fs.writeFile('./files/2.txt','Hello Node.js!',function(err){
console.log(err)
})

3.fs模块，路径动态拼接的问题

在使用fs模块操作文件时，如果提供的操作路径是以 ./ 或 ../ 开头的相对路径时，很容易出现路径动态拼接错误的问题。
原因：代码在运行的时候，会以执行node命令时所处的目录，动态拼接出被操作文件的完整路径.

解决方案：在使用fs模块操作文件时，直接提供完整的路径，不要提供 ./ 或 ../ 开头的相对路径，从而防止路径动态拼接的问题。

__dirname（注意是双下划线）表示当前文件所处的目录，结合上述方案可以完美解决路径动态拼接问题

path路径模块

1.什么是path路径模块

path模块是Nod,js官方提供的、用来处理路径的模块。它提供了一系列的方法和属性，用来满足用户对路径的处理需求

例如：

path.join（）方法，用来将多个路径片段拼接成一个完整的路径字符串
path.basename（）方法，用来从路径字符串中，将文件名解析出来

如果要在JavaScript代码中，使用path模块来处理路径，则需要使用如下的方式先导入它：

const path = require('path')

2.路径拼接

path.join()的语法格式

使用path.join()方法，可以把多个路径片段拼接为完整的路径字符串，语法格式如下：

path.join([...paths])

参数：

...paths<string>路径片段的序列

返回值:<string>

示例：

使用path.join()方法，可以把多个路径片段拼接为完整的路径字符串：

const pathStr = path.join('/a','/b/c','../','./d','e')
console.log(pathStr)//输出\a\b\d\e   注意../会抵消前面的一段路径

const pathStr2 = path.join(__dirname,'./files/1.txt')
console.log(pathStr2)

注意：今后凡是涉及到路径拼接的操作，都要使用path.join()方法进行处理。不要直接使用+进行字符串的拼接。

3.获取路径中的文件名

path.basename()的语法格式

使用path.basename()方法，可以获取路径中的最后一部分，经常通过这个方法获取路径中的文件名，语法格式如下：

path.basename(path.[ext])

参数：

path<string>必选参数，表示一个路径的字符串

ext<string>可选参数，表示文件拓展名

返回：<string>表示路径中的最后一部分

示例：

使用path.basename0方法，可以从一个文件路径中，获取到文件的名称部分：

const fpath='/a/b/c/index.html'//文件的存放路径

var fullName path.basename(fpath)
console.log(fullName)//输出index.html

var nameWithoutExt path.basename(fpath,'.html')
console.log(nameWithoutExt)//输出index

4.获取路径中的文件拓展名

path.extname()的语法格式

使用path.extname0方法，可以获取路径中的扩展名部分，语法格式如下：

path.extname(path)

参数：

path<string>必选参数，表示一个路径的字符串

返回：<string>返回得到的拓展名字符串

示例：

使用path.extname0方法，可以获取路径中的扩展名部分：

const fpath='/a/b/c/index.html'/路径字符串
const fext path.extname(fpath)
console.log(fext)/输出.html

流光折线图案例

流光折线图的完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>折线图线条流光特效</title>
  </head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
  <link rel="stylesheet" href="../common.css" />
  <style>
    body {
      background: #343956;
    }

    .container {
      width: 600px;
      height: 400px;
      padding: 40px;
      border-radius: 20px;
      background: linear-gradient(225deg, #2f334d, #383d5c);
      box-shadow: -25px 25px 45px #282c42, 25px -25px 45px #40466a;
    }

    .chart {
      width: 100%;
      height: 100%;
    }
  </style>

  <body>
    <div class="container">
      <div class="chart" id="chart"></div>
    </div>
  </body>
  <script>
    const dom = document.getElementById("chart");
    const myChart = echarts.init(dom);
    const xData = [
      "0:00",
      "2:00",
      "4:00",
      "6:00",
      "8:00",
      "12:00",
      "16:00",
      "20:00",
      "24:00",
    ];
    const yData = [111, 600, 255, 344, 333, 555, 111, 999, 0];
    let datacoords = [
      {
        coords: [],
      },
    ];
    for (let i = 0; i < xData.length; i++) {
      datacoords[0].coords.push([xData[i], yData[i]]);
    }
    //渲染图表
    const renderChart = (myChart) => {
      const options = {
        animationDuration: 3000,
        color: ["#ec5d5f", "#f2cb58", "#64a0c8"],
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.5)",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "rgba(0,0,0,.5)",
            },
          },
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        grid: {
          left: "0%", //图表距边框的距离
          right: "3%",
          top: "11%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: [
          {
            nameGap: 3, //坐标轴名称与轴线之间的距离。
            nameTextStyle: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12,
            },
            type: "category",
            data: xData,
            boundaryGap: false, //从0开始
            axisLine: {
              //坐标轴线颜色
              rotate: 30, //坐标轴内容过长旋转
              interval: 0,
              lineStyle: {
                color: "#636E7C",
              },
            },
            axisLabel: {
              showMaxLabel: true,
              fontSize: 12,
              color: "rgba(255,255,255,.8)", //坐标的字体颜色
            },
            axisTick: {
              //是否显示坐标轴刻度  x和y不交叉
              show: false,
            },
          },
        ],
        yAxis: [
          {
            name: "苏苏_icon",
            type: "value",
            nameGap: 20,
            min: 0,
            max: function (value) {
              return Math.ceil(value.max / 5) * 5;
            },
            splitNumber: 5,
            nameTextStyle: {
              //坐标轴字体
              color: "rgba(255,255,255,.89)",
              fontSize: 12,
            },
            splitLine: {
              //网格线颜色
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.25)",
                type: "dashed",
              },
            },
            axisTick: {
              //是否显示坐标轴刻度
              show: false,
            },
            axisLine: {
              //坐标轴线颜色
              show: true,
              lineStyle: {
                color: "#636E7C",
              },
            },
            axisLabel: {
              color: "rgba(255,255,255,.8)", //坐标的字体颜色
              fontSize: 12,
            },
          },
        ],
        series: [
          {
            name: "苏苏的折线图",
            type: "line",
            smooth: 0, //可设置弧度，0-1
            lineStyle: {
              width: 1.5,
              type: "solid",
              shadowOffsetX: 0, // 折线的X偏移
              shadowOffsetY: 3, // 折线的Y偏移
              shadowBlur: 4, // 折线模糊
              shadowColor: "rgba(220,120,40,0.95)", //阴影色
              color: "#DC7828", //折线颜色
            },
            showSymbol: true,
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              color: "#2f334d",
              borderWidth: 1,
              borderColor: "#DC7828",
            },
            areaStyle: {
              // 颜色渐变函数 前四个参数分别表示四个位置依次为---右下左上
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: "rgba(220,120,40,0.3)",
                },
                {
                  offset: 0.74,
                  color: "rgba(220,120,40,0.26)",
                },
                {
                  offset: 0,
                  color: "rgba(220,120,40,0)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: yData,
          },
          // 以下代码为流光效果-配置项代码
          {
            polyline: true,
            showSymbol: false,
            name: "流动光线",
            type: "lines",
            coordinateSystem: "cartesian2d",
            effect: {
              trailLength: 0.3,
              show: true,
              period: 6,
              symbolSize: 4,
              loop: true,
            },
            lineStyle: {
              color: "#fff",
              width: 0,
              opacity: 0,
              curveness: 0,
              type: "dashed",
            },
            data: datacoords,
          },
        ],
      };
      if (options && typeof options === "object") {
        myChart.setOption(options);
      }
    };
    renderChart(myChart);
  </script>
</html>

步骤1-导入需要的模块并创建正则表达式

/1.1导入fs文件系统模块
const fs =require('fs')

/1.2导入path路径处理模块
const path= require('path')

//1.3匹配<style></sty1e>标签的正则
其中\s表示空白字符;\S表示非空白字符;*表示匹配狂意次
const regStyle =/<style>[\s\S]*<\/style>/

//1.4匹配<script></script>标签的正则
const regScript /<script>[\s\S]*<\/script>/

步骤2·使用fs模块读取需要被处理的html文件

//2.1读取需要被处理的HTML文件
fs.readFile(path.join(dirname,'..//index.html').'utf8',(err,dataStr)=>{
//2,2读取HTML文件失数
if(err)return console.log('读取HTML文件失败！·+err.message)
//2.3读取HTML文件成功后，调用对应的方法，拆解出css、j5和html文件
resolveCSS(datastr)
resolveJS(datastr)
resolveHTML(datastr)
)

步骤3-自定义resolveCSS方法

// 定义处理css样式的方法
function resolveCSS(htmlStr){
    // 使用正则提取需要的内容
    const r1 = regStyle.exec(htmlStr)
    // console.log(r1);
    // 将提取出来的样式字符串，进行字符串的replace替换操作
    const newCSS=r1[0].replace('<style>','').replace('</style>','')
    // console.log(newCSS);
    // 调用fs.writeFile()方法，将提取的样式，吸入到clock目录中index.css的文件中
    fs.writeFile(path.join(__dirname,'./clock/index.css'),newCSS,function(err){
        if(err) return console.log('写入css样式失败！'+err.message)
        console.log('写入样式成功！');
    })
}

步骤4-自定义resolveJS方法

// 定义处理js脚本的方法
function resolveJS(htmlStr){
    // 通过正则，提取对应的<script></scropt>标签的内容
    const r2 = regScript.exec(htmlStr)
    // 将提取出来的内容，做进一步的处理
    const newJS=r2[0].replace('<script>','').replace('</script>','')
    // 调用fs.writeFile()方法，将提取的js，引入到clock目录中的index.js的文件中
    fs.writeFile(path.join(__dirname,'./clock/index.js'),newJS,function(err){
        if(err) return console.log('写入js失败！'+err.message);
        console.log('写入js成功');
    })
}

步骤5_自定义resolveHTML方法

// 定义处理html结构的方法
function resolveHTML(htmlStr){
    // 将字符串调用replace方法，把内嵌的style和script标签替换为外联的link和script标签
    const newHTML=htmlStr.replace(regStyle,`<link rel='stylesheet' href='./index.css'/>`).replace(regScript,`<script src='./index.js'></script>`)
    // 写入index.html文件
    fs.writeFile(path.join(__dirname,'./clock/index.html'),newHTML,function(err){
        if(err) return console.log('写入HTML文件失败！'+ err.message);
        console.log('写入HTML文件成功！');
    })
}

案例注意点

1.fs.writeFile（）方法只能用来创建文件，不能用来创建路径

2.重复调用fs.wrritFile()写入同一个文件，新写入的内容会覆盖之前的旧内容

http模块

1.什么是http模块

回顾：什么是客户端、什么是服务器？
在网络节点中，负责消费资源的电脑，叫做客户端；负责对外提供网络资源的电脑，叫做服务器。

http模块是Node.js官方提供的、用来创健web服务器的模块。通过http模块提供http.createServer()方法，就能方便的把一台普通的电脑，变成一台Web服务器，从而对外提供Web资源服务.

如果要希望使用http模块创建Wb服务器，则需要先导入它：

const http = require('http')

2.进一步理解http模块的作用

服务器和普通电脑的区别在于，服务器上安装了web服务器软件，例妆如：IIS、Apache等。通过安装这些服务器软件，就能把一台普通的电脑变成一台web服务器。

在Node.js中，我们不需要使用IlS、Apache等这些第三方web服务器软件。因为我们可以基于Node.js提供的http模块，通过几行简单的代码，就能轻松的手写一个服务器软件，从而对外提供web服务。

3.服务器相关概念

IP地址：

IP地址就是互联网上每台计算机的唯一地址，因此IP地址具有唯一性。如果把“个人电脑”比作"一台电话”，那么“IP地址”就相当于“电话号码”，只有在知道对方IP地址的前提下，才能与对应的电脑之间进行数据通信。
IP地址的格式：通常用"点分十进制”表示成(a.b.c.d)的形式，其中，a,b,c,d都是0~255之间的十进制整数。例如：用点分十进表示的1P地址(192.168.1.1)
注意：

①互联网中每台Web服务器，都有自己的IP地址，例如：大家可以在Windows的终端中运行ping www.baidu.com命令，即可查看到百度服务器的P地址。
②在开发期间，自己的电脑既是一台服务器，也是一个客户端，为了方便测试，可以在自己的浏览器中输入127.0.0.1这个IP地址(只限测试的时候使用)，就能把自己的电脑当做一台服务器进行访问了。

域名和域名服务器

尽管IP地址能够唯一地标记网络上的计算机，但IP地址是一长串数字，不直观，而且不便于记忆，于是人们又发明了另一套字符型的地址方案，即所谓的域名(Domain Name)地址。
IP地址和域名是一一对应的关系，这份对应关系存放在一种叫做域名服务器(DNS,Domain name server)的电脑中。使用者只需通过好记的域名访问对应的服务器即可，对应的转换工作由域名服务器实现。因此，域名服务器就是提供IP地址和域名之间的转换服务的服务器。

注意：

①单纯使用IP地址，互联网中的电脑也能够正常工作。但是有了域名的特，能让互联网的世界变得更加方便。
②在开发测试期间，127.0.0.1对应的域名是localhost,它们都代表我们自己的这台电脑，在使用效果上没有任何区别。

端口号

计算机中的端口号，就好像是现实生活中的门牌号一样。通过门牌号，外卖小哥可以在整栋大楼众多的房间中，准确把外卖送到你的手中。

同样的道理，在一台电脑中，可以运行成百上千个web服务。每个web服务都对应一个唯的端口号。客户端发送过来的网络请求，通过端口号，可以被准确地交给对应的web服务进行处理。

注意：

①每个端口号不能同时被多个web服务占用。

②在实际应用中，URL中的80端口可以被省略。

4.创建基本的web服务器

1.创建web服务器的基本步骤

（1）导入http模块

如果希望在自己的电脑上创健一个web服务器，从而对外提供web服务，则需要导入http模块：

const http = require('http')

（2）创建web服务器实例

调用http.createServer(）方法，即可快速创建一个web服务器实例：

const server = http.createServer()

（3）为服务器实例绑定request事件，监听客户端的情求

为服务器实例绑定request事件，即可监听客户端发送过来的网络请求：

//使用服务器实的.on()方法，为服务器绑定一个request事件
server.on('request',(req,res)=>{
//只要有客户端来请求我们自己的服务器，就会发request事件，从而调用这个事件处理函数
console.log('Someone visit our web server.')
})

（4）启动服务器

调用服务器实例的.listen0方法，即可启动当前的web服务器实例：

//调用server.,listen(端口号，cb回调)方法，即可启动web服务器
server.listen(80,()=>{
console.log('http server running at http://127.0.0.1')
})

2.req请求对象

只要服务器接收到了客户端的请求，就会调用通过server.on（）为服务器绑定的request事件处理函数。

如果想在事件处理函数中，访问与客户端相关的数据或属性，可以使用如下的方式：

const http = require('http')
const server=http.createServer()
// req是请求对象，包含了与客户端相关的数据和属性
server.on('request',req=>{
    // req.url是客户端请求的url地址
    const url = req.url
    // req.method是客户段请求的method类型
    const method = req.method
    const str = `Your request url is ${url},and request method is ${method}`
    console.log(str);
})
server.listen(80,()=>{
    console.log('创建服务器成功');
})

3.res响应对象

在服务器的request事件处理函数中，如果想访问与服务器相关的数据或属性，可以使用如下的方式：

const http = require('http')
const server=http.createServer()
// req是请求对象，包含了与客户端相关的数据和属性
server.on('request',(req,res)=>{
    // req.url是客户端请求的url地址
    const url = req.url
    // req.method是客户段请求的method类型
    const method = req.method
    const str = `Your request url is ${url},and request method is ${method}`
    console.log(str);
    // 调用res.end()方法，向客户端响应一些内容
    res.end(str)
})
server.listen(80,()=>{
    console.log('创建服务器成功');
})

4.解决中文乱码问题

当调用res.end()方法，向客户端发送中文内容的时候，会出现乱码问题，此时，需要手动设置内容的编码格式：

const http = require('http')
const server=http.createServer()
// req是请求对象，包含了与客户端相关的数据和属性
server.on('request',(req,res)=>{
    // 定义一个字符串，包含中文的内容
    const str = `您请求的url地址是${req.url},请求的method类型为${req.method}`
    // 为了防止中文显示乱码的问题，需要设置响应头，调用res.setHeader()方法，设置Content-Type响应头
    res.setHeader('Content-Type','text/html;charset=utf-8')
    // res.end()将内容响应给客户端
    res.end(str)
})
server.listen(8055,()=>{
    console.log('http server running at http://127.0.0.1');
})

5.根据不同的url响应不同的html内容

核心实现步骤

1.获取请求的url地址
2.设置默认的响应内容为404 Not found
3.判断用户请求的是否为/或index.html首页
4.判断用户请求的是否为/about.html关于页面
5.设置Content-Type响应头，防止中文乱码
6.使用res.end()把内容响应给客户端

6.案例：实现流光折线图的web服务器

实现步骤

1.导入需要的模块
2.创建基本的web服务器
3.将资源的请求url地址映射为文件的存放路径
4.读取文件内容并响应给客户端
5.优化资源的请求路径

//1.1导入http模块
const http = require('http')
//1.2导入fs文件系统模块
const fs = require('fs')
//1.3导入path路径解决处理模块
const path = require('path')
// 2.1创建web服务器实例
const server = http.createServer()
// 2.2为服务器实例绑定request事件，监听客户端的情求
server.on('request',(req,res)=>{
    // 3.1获取客户端请求的url地址
    const url = req.url
    // 3.2把请求的url地址,映射为本地文件的存放路径
    // const fpath = path.join(__dirname,url)
    // 5 优化资源请求路径  更改3.2
    let fpath= ''
    if(url==='/'){
        fpath=path.join(__dirname,'./clock/index.html')
    }else{
        fpath=path.join(__dirname,`./clock`,url)
    }
    // 4.1根据映射过来的文件路径读取文件的内容
    fs.readFile(fpath,'utf8',(err,dataStr)=>{
        // 4.2读取失败,向客户端响应固定错误消息
        if(err) return res.end('404 not found')
        // 4.3读取成功,将读取成功的内容响应给客户端
        res.end(dataStr)
    })

})
// 2.3启动服务器
server.listen(80,()=>{
console.log('http server running at http://127.0.0.1')
})

困在雨天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node.js (fs文件系统模块,path路径模块,http模块web服务器）

node.js是js的后端运行环境浏览器是js的前端运行环境node.js张无法调用DOM和BOM和ajax等浏览器内置APInode.js是一个基于ChromeV8引擎的JavaScript运行环境。
复制链接

扫一扫