day1 基础学习

1、初识node.js【后端开发】

是一个基于Chorme V8 引擎的javaScript运行时（环境）

  1. 浏览器是javaScript的前端开发运行环境
  2. Node.js是javaScript的后端运行环境
  3. Node.js中无法调用DOM和BOM、Ajax等浏览器内置的API

2、Node.js的路径学习

javaScript基础语法----Node.js内置API模块（fs、path、http等）+第三方API模块（expres、mysql等）

3、Node.js环境的按照

官网地址：https://nodejs.org/zh-cn/

项目建议使用【LTS版本】

下载之后，双击点击运行，一直点击next下一步，所有的配置都按默认的来

4、查看已按照的Node.js版本

打开终端【Win+R】打开运行面板，输入cmd+回车，即可打开终端

在终端里面输入命令【node -v】+回车

C:\Users\86156>node -v
v14.17.5

5、了解终端

终端是专门为开发人员设计的，用于实现人机交互的一种方式

作为一个合格的程序员，我们有必要记住一些常用的终端命令，来辅助我们使用计算机

6、在Node.js环境中执行javaScript代码

  1. 打开终端

    • 方法一：在文件的顶部地址栏中（点击清空地址栏输入cmd），输入cmd+回车

    • 方法二：单击地址栏复制，在终端中输入【cd + 文件路径】

      cd D:\Node.js基础学习（2021-8-19）\src

    • 方法三：文件位置【Shift+鼠标右键】，选择Windows PowerShell（新）终端，就会直接定位到文件位置

  2. 输入 node 要执行的js文件

    D:\Node.js基础学习（2021-8-19）\src>node 1.js
在Node.js中运行javaScript

7、终端中的快捷键

键盘【上箭头】键：快速定位到上一条命令

键盘【Tab】键：快速不全文件路径

键盘【esc】：快速清空当前已输入的命令

键盘【cls】：清空所有终端命令

8、fs文件系统模块

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

例如：

fs.feadFile()方法：用来读取指定文件中的内容

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

如果要在javaScript代码中，使用fs模块来操作文件，则需要用到下面方法导入fs模块：

cost fs = require('fs')
// 调用方法
fs.feadFile() // 读写指定文件内容
fs.writeFile() // 写入文件

  • 读取指定文件中的内容

    fs.feadFile()方法：用来读取指定文件中的内容

    fs.feadFile(path[,options],callback)
// 参数一：必选参数，字符串，表示文件的路径
// 参数二：可选参数，表示以什么编码格式来读取文件，默认是utf-8
// 参数三：必选参数，文件读取完成后，提供回调函数拿到读取的结果 （err dataStr）

    // 导入fs模块，操作文件
const fs = require('fs');

// 参数一：必选参数，字符串，表示文件的路径
// 参数二：可选参数，表示以什么编码格式来读取文件,默认是utf-8
// 参数三：必选参数，文件读取完成后，提供回调函数拿到读取的结果 （err dataStr）
fs.readFile('../file/1.txt','utf-8',function(err,dataStr){
    // 读取成功，则err为null
    // 读取失败，则err的值为 错误对象，dataStr的值为undefinend
    console.log(err); // 打印失败
    console.log("-------");
    console.log(dataStr); // 打印成功
});

  • 判断文件是否读取成功还是失败

    fs.readFile('../file/1.txt','utf-8',function(err,dataStr){
    // 读取成功，则err为null
    if(err){
        return console.log("文件读取失败"+err.message);
    }
    console.log("读取文件成功"+dataStr);
});

  • 向指定的文件写入内容

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

    const fs = require('fs');

// 参数一：表示文件路径
// 参数二：表示要写入的内容
// 参数三：回调函数
fs.writeFile('../file/1.txt','abcd',function(err){
    console.log(err);
    // 如果文件写入成功，则err的值等于null
    // 如果文件写入失败，则err的值等于一个错误对象
});

  • 判断文件是否写入成功

    const fs = require('fs');

// 参数一：表示文件路径
// 参数二：表示要写入的内容
// 参数三：回调函数
fs.writeFile('../file/1.txt','abcd',function(err){
    if(err){
        return console.log("文件写入失败"+err.message);
    }
    console.log("文件写入成功");
});

考试成绩整理

核心步骤：

  1. 导入需要的fs文件系统模块

  2. 使用fs.readFile()方法，读取【成绩.text】文件

  3. 判断文件是否读取失败

  4. 文件读取成功之后，处理判断成绩数据

  5. 将处理完成的成绩数据，使用fs.writeFile()方法，写入到【成绩-ok.text】

  6. const fs = require('fs');
fs.readFile('../file/成绩.txt','utf-8',function(err,dataStr){
    // 判断是否读取成功
    if(err){
        return console.log("文件读取失败"+err.message);
    }
    // console.log("读取文件成功"+dataStr);

    // 先把成绩的数据，按照空格进行分割
    const arrOld = dataStr.split(' ');
    // 循环分割后的数组，对每一项数据，进行字符串的替换
    const arrNew = [];
    arrOld.forEach(item => {
        arrNew.push(item.replace('=','：'))
    });
    console.log(arrNew);
    // 把新数组中的每一项，进行合并，得到一个新的字符串
    const newStr = arrNew.join('\r\n');
    console.log(newStr);

    // 调用fs.writeFile()方法，把处理完成的数据写入新的文件中
    fs.writeFile('../file/成绩-ok.txt',newStr,function(err){
        if(err){
            return console.log("写入文件失败"+err.message);
        }
        console.log("成绩写入成功！");
    });
});

9、fs模块-路劲动态拼接的问题

在使用fs模块操作文件时，如果提供的操作路劲是以【.\或…\】开头的相对路劲时，很容易出现多态拼接错误的问题

原因：代码在运行时，会执行node命令时所处的目录，多态拼接出被操作文件的完整路径

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

在vsCods中，可以选中需要的文件，右键复制完整路径，将复制的路径粘贴到fs中即可，js完整路径里面有不少的转义，需要通过加【\】来转义

D:\\Node.js基础学习（2021-8-19）\\src\\file\\1.txt
__dirname 表示当前文件所处的目录
fs.writeFile(__dirname+'/file/1.txt','abcd',function(err){
    // console.log(err);
    // 如果文件写入成功，则err的值等于null
    // 如果文件写入失败，则err的值等于一个错误对象
    if(err){
        return console.log("文件写入失败"+err.message);
    }
    console.log("文件写入成功");
});

10、path路径模块

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

  • path.join()方法，用来将多个路径片段拼接成一个完整的路径字符串
  • path.basename()方法，用来从路径字符串中，将文件名解析出来
如何导入path模块
const path = require('path');

  1. path.join()方法：

    可以对多个路径进行拼接

    const path = require('path');
const fs = require('fs');
// 调用方法
// 注意： ../会抵消前面的路径，写多个会抵消多个
// const pathStr = path.join('/a', '/b', 'c', '../', 'd', './e', 'f');
// console.log(pathStr); // 输出 \a\b\d\e\f

// fs.readFile(__dirname + '/file/1.txt');
fs.readFile(path.join(__dirname, '/file/1.txt'), 'utf-8', function (err, dataStr) {
    if(err){
        return console.log("失败"+err.message);
    }
    console.log("成功："+dataStr);
});

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

  2. path.basename()：获取路劲文件名

    可以获取到路径中的最后一部分，经常通这个方法获取路径的文件名

    path.basename(path[,ext]);
    • path必须参数，表示一个路径字符串
    • ext可选参数，表示文件扩展名
    const path = require('path');
// 文件路径
const fpath = '/a/b/c/index.html';

// 带后缀的文件名
const fullName = path.basename(fpath);
console.log(fullName); // index.html

// 不获取后缀名
const nameWithoutExt = path.basename(fpath,'.html');
console.log(nameWithoutExt); // index

  3. path.extname()：获取文件扩展名

    path.extname(path)
    • path必选参数，表示一个路径字符串
    • 返回string扩展名字符串
    const path = require('path');
// 文件路径
const fpath = '/a/b/c/index.html';
// 获得文件扩展名
const fext = path.extname(fpath);
console.log(fext); // .html

综合案例练习（拆分.html文件的css和js同时引入）

实现步骤：

  1. 创建两个正则表达式，分别用来匹配

const fs = require('fs'); // 文件系统模块
const path = require('path'); // 路径处理模块

创建正则

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

2、使用fs模块，拂去需要被处理的html文件

  • fs.readFile()读取文件
  • path.join()拼接文件路径
  • 判断文件是否读取成功
  • 读取成功，调用对应的方法解析出css.js和html文件
// 调用fs.readFile()读取文件
fs.readFile(path.join(__dirname,'index.html'),'utf-8',function(err,dataStr){
    // 读取文件失败
    if(err) return console.log("读取HTML文件失败"+err.message);

    // 读取文件成功，调用对应的三个方法，分别拆解出css，js，html文件
    
});

3、自定义resolveCss方法，来写入index.css样式文件

// 处理css样式函数
function resolveCss(htmlStr){
    // exec()方法用于检索字符串中的正则表达式的匹配
    // 返回一个数组，未匹配返回一个null
    const re = regStyle.exec(htmlStr); // 使用正则获取页面的style标签
    // console.log(re);

    // 将提取出来的样式字符串，进行字符串的replace替换操作
    const newCss = re[0].replace('<style>','').replace('</style>','');
    // console.log(newCss);

    // 调用fs.writeFile()方法，将提取出来的样式，写入到
    fs.writeFile(path.join(__dirname,'./clock/index.css'),newCss,function(err){
        if(err) return console.log("写入css样式失败！"+err.message);
        console.log("样式写入成功！");
    });
}

4、自定义resolvjs方法，来写入index.js脚本文件

// 处理js脚本函数
function resolvjs(htmlStr){
    const r2 = regScript.exec(htmlStr);

    // 将提取出来的内容进行处理
    const newJS = r2[0].replace('<script>','').replace('</script>','');
    // 将处理的结果，写入到文件里面
    fs.writeFile(path.join(__dirname,'./clock/index.js'),newJS,function(err){
        if(err) return console.log("写入js脚本失败！"+err.message);
        console.log("写入js脚本成功！");
    });
}

5、自定义resolvhtml方法，来写index.html文件

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

注意：

fs.writeFile()方法，只能创建文件不能创建路径

重复使用fs.writeFile()方法写入同一个文件，会拿新写入的内容覆盖旧的内容

11、http模块

  1. 什么是http模块

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

    导入http模块

    const http = require("http");
  2. IP地址

    具有唯一性，例如：（127.0.0.1），以点分割的十进制整数，0-255之间

  3. 域名和域名服务器

    IP地址和域名是对应关系，这份对应关系存在一种叫做域名服务器（DNS）的电脑中

    域名服务器就是提供IP地址和域名之间的转换服务的服务器

    注意：

    本机的IP为（127.0.0.1）或者localhost，在使用上没有任何区别

    没有域名使用IP也是可以的

  4. 端口号

    具有唯一性

    客户端发送过来的网络请求，通过端口号，可以被准确地交给对应的web服务进行处理

    注意：

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

    在实际应用开发中，URL中的80端口是可以省略的，其他的不能

12、创建web服务器的基本步骤

  1. 导入http模块

    const http = require("http");

  2. 创建web服务器实例

    调用http.createServer()

    const server = http.createServer();

  3. 为服务器实例提供requst事件，监听客户端的请求

    server.on('request',(req,res) => {
    console.log("只要有客户端请求我们自己的服务器，就会触发requst事件");
})

  4. 启动服务器

    调用服务器实例的.listen(端口号,cb回调)方法，即可启动当前的web服务器实例

    server.listen(80,() => {
    console.log("调用启动服务器");
})

    测试代码

在vsCode中，如果需要运行终端命令，可以选择菜单栏的【终端】—【新终端】启动内置的vs终端命令，或者使用快捷键【CTEL+SHIFT+ ~(tab键上面)】

浏览器访问127.0.0.1:8080即可测试

CTRL+C终止服务器

// 1、导入http模块
const http = require('http');
// 2、创建web服务器实例对象
const server = http.createServer();
// 3、为服务器实例绑定request事件，监听客户端的请求
server.on('request',function(req,res){
    // 请求服务器的时候打印这一句代码
    console.log("为服务器实例绑定request事件，监听客户端的请求");
});
// 4、启动服务器
server.listen(8080,function(){
    console.log("启动服务器 http://127.0.0.1:8080");
});

13、req请求对象

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

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

server.on('request',(req)=>{
    const str = 'Your request url is ${req.url},and request method is $(req.method)';
    console.log(str);
});

建议使用箭头函数的方法写

可以安装Postman测试

url为请求文件后面的名字，不会带前面的端口号

// 创建http模块
const http = require('http');

const server = http.createServer();

// server.on('request',function(){});

// 建议使用箭头函数的方式
server.on('request',(req) =>{
    // req 是请求对象，包含了与客户端相关的数据和属性
    // req.url 是客户端请求的url地址
    const url = req.url;
    // req.method 是客户端请求的 method 类型
    const method = req.method;
    // ${req.url}为占位符
    const str = 'Your request url is ${url}'+url+',and request method is $(method)'+method+'';
    console.log(str);

});

server.listen(8080,() => {
    console.log('server running at http://127.0.0.1:8080');
});

// 以下代码为，终端打印的代码
/* PS D:\Node.js基础学习（2021-8-19）\src\node服务器js> node .\了解req请求对象.js
// Ctrl+单击可以跳转到浏览器
server running at http://127.0.0.1:8080 
// 浏览器的请求方式和url
Your request url is ${url}/,and request method is $(method)GET
// 
Your request url is ${url}/index,and request method is $(method)GET
// 借助Postman请求的about.html页面，使用的是post请求
Your request url is ${url}/about.html,and request method is $(method)POST */

14、解决中文乱码问题

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

res.setHeader('Content-Type','text/html;charset=utf-8');

修改了代码需要出现启动服务器让代码生效，CTRL+C停止

const http = require('http');
const server = http.createServer();
server.on('request',(req,res) => {
    // 定义一个字符串，包含中文
    const str = '您请求的URL地址是${req.url}%req.url,请求的method类型为${req.metgod}';
    // 调用res.setHeader()方法，设置Content-Type响应头，解决中文乱码问题
    res.setHeader('Content-Type','text/html;charset=utf-8');
    // res.end() 将内容响应给客户端
    res.end(str);
});
server.listen(8080,() => {
    console.log('server running at http://127.0.0.1:8080');
});

15、res响应对象

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

server.on('request',(req,res) => {
	const str = '您请求的URL地址是${req.url},请求的method类型为${req.metgod}';
    res.end(str);
});

16、根据不同的url响应不同的内容

  1. 获取请求的url地址
  2. 设置默认的响应内容为 404Not found
  3. 判断用户请求是否为 / 或 /index.html首页
  4. 判断用户请求的是否为 /about.html关于页面
  5. 设置Content-Type响应头，防止中文乱码
  6. 使用res.end()把内容响应给客户端
// 创建http模块
const http = require('http');
// 创建服务器
const server = http.createServer();
// 实例服务器
server.on('request',(req,res) => {
    const url = req.url; 
    let content = '<h1>404 Not found!</h1>';
    if(url == '/' || url == '/index.html'){
        content = '<h/>首页</h1>';
    }else if(url == '/about.html'){
        content = '<h1>关于页面</h1>'
    }
    res.setHeader('Content-Type', 'text/html; charset=utf-8');
    // res.end() 将内容响应给客户端
    res.end(content);
});
// 启动、监听服务器
server.listen(8080,() => {
    console.log('server running at http://127.0.0.1:8080');
});

实现clock时钟的web服务器

  1. 核心思路

    • 把文件的实际存放路径，作为每一个资源的请求url地址

      浏览器请求-------自己写的web服务器------读取磁盘目录-----读取完成---------自己写的服务器-----响应浏览器

  2. 实现步骤

    • 导入需要的模块

      // http模块
const http = require('http');
// fs模块
const fs = require('fs');
// path路径处理模块
const path = require('path')

    • 创建基本web服务器

      // 创建服务器
const server = http.createServer();
// 实例服务器
server.on('request',(req,res) => {});
// 启动服务器
server.listen(8080,() => {
    console.log('server running at http://127.0.0.1:8080');
});

    • 将资源的请求url地址映射为文件的存放路径

      // 获取到客户端请求的url地址
const url = req.url;
// /clock/index.html

// 把请求的地址映射为具体文件的存放路径
const fpath = path.join(__dirname,url);

    • 读取文件的内容并响应给客户端

      // 获取到客户端请求的url地址
    const url = req.url;
    // /clock/index.html

    // 把请求的地址映射为具体文件的存放路径
    const fpath = path.join(__dirname,url);

    // 根据映射过来的文件路径读取文件的内容
    fs.readFile(fpath,'utf-8',(err,dataStr) => {
        // 读取失败，向客户端响应固定的错误信息
        if(err) return res.end('404 Not found');
        // 读取成功，将读取的内容，响应给客户端
        res.end(dataStr);
    });

    • 优化资源的请求路径

      // 将上面拼接的url路径改为下面的方式
    let fpath = '';
    if(url == '/'){
        fpath = path.join(__dirname,'/clock/index.html');
    }else{
        // 拼接一个/clock
        fpath = path.join(__dirname,'/clock',url);
    }
    • 完整代码
      // http模块
const http = require('http');
// fs模块
const fs = require('fs');
// path路径处理模块
const path = require('path')

// 创建服务器
const server = http.createServer();
// 实例服务器
server.on('request',(req,res) => {
    // 获取到客户端请求的url地址
    const url = req.url;
    // /clock/index.html

    // 把请求的地址映射为具体文件的存放路径
    // const fpath = path.join(__dirname,url);

    // 将上面拼接的url路径改为下面的方式
    let fpath = '';
    if(url == '/'){
        fpath = path.join(__dirname,'/clock/index.html');
    }else{
        // 拼接一个/clock
        fpath = path.join(__dirname,'/clock',url);
    }
    // 根据映射过来的文件路径读取文件的内容
    fs.readFile(fpath,'utf-8',(err,dataStr) => {
        // 读取失败，向客户端响应固定的错误信息
        if(err) return res.end('404 Not found');
        // 读取成功，将读取的内容，响应给客户端
        res.end(dataStr);
    });

});
// 启动服务器
server.listen(8080,() => {
    console.log('server running at http://127.0.0.1:8080');
});
# node.js # javascript # vue.js
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

Kaldi之父，IEEE Fellow，小米首席语音科学家Daniel Povey将出席2024全球机器学习技术大会并发表演讲！

avatar CSDN学习社区
cover

探索神经网络在商品销售和图像识别中的应用

avatar CSDN学习社区
cover

基于stm32F103的座面声控台灯

avatar CSDN学习社区