nodejs

发布时间 2023-05-09 23:53:55作者: Citizen-L

node.js学习笔记1

fs 模块

概念

fs 全称为 file system ,称之为文件系统 ,是 Node.js中的内置模块,可以对计算机中的磁盘进行操作。

文件写入

文件写入就是将数据保存到文件中,我们可以使用如下几个方法来实现该效果

方法 说明
writeFile 异步写入
writeFileSync 同步写入
appendFile / appendFileSync 追加写入
createWriteStream 流式写入

writeFile异步写入

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

  • file 文件名
  • data 待写入的数据
  • options 选项设置 (可选)
  • callback 写入回调
//1.导入fs 模块
const fs = require('fs')

fs.writeFile('./座右铭.txt','三人行, 则必有我师焉',err => {
    if(err){
        console.log('写入失败')
        return
    }
    console.log('写入成功')
})

writeFileSync 同步写入

语法: fs.writeFileSync(file, data[, options])

//1.导入fs 模块
const fs = require('fs')

//同步
fs.writeFileSync('./data.txt','test')
console.log(1+1);

appendFile / appendFileSync 追加写入

appendFile 作用是在文件尾部追加内容,appendFile 语法与 writeFile 语法完全相同

fs.appendFile(file, data[, options], callback)
fs.appendFileSync(file, data[, options])

const fs = require('fs')

fs.appendFile('./座右铭.txt',',择其善者而从之, 择期不善者而改之' ,err => {
    if(err){
        console.log('写入失败~~')
        return
        }
        console.log('追加写入成功')
})
fs.appendFileSync('./座右铭.txt', '\r\n温故而知新, 可以为师矣')  //\r\n换行


//writeFile 实现追加写入  {flag: 'a'}
fs.writeFile('./座右铭.txt', 'love love love',{flag: 'a'}, err => {
    if(err) {
      console.log('写入失败~');
      return ;
    }
    console.log('写入成功');
  });

createWriteStream 流式写入

语法: fs.createWriteStream(path[, options])

参数说明:

  • path 文件路径
  • options 选项配置( 可选 )

返回值: Object

//1.导入fs模块
const fs = require('fs')

//2. 创建写入流对象 
const ws = fs.createWriteStream('./观书有感.txt')

//3. write
ws.write('半亩方塘一鉴开\r\n');
ws.write('天光云影共徘徊\r\n');
ws.write('问渠那得清如许\r\n');
ws.write('为有源头活水来\r\n');
//4. 关闭通道
// ws.close();  可选

程序打开一个文件是需要消耗资源的 ,流式写入可以减少打开关闭文件的次数。
流式写入方式适用于 大文件写入或者频繁写入 的场景, writeFile 适合于 写入频率较低的场景

文件读取

文件读取顾名思义,就是通过程序从文件中取出其中的数据,我们可以使用如下几种方式:

方法 说明
readFile 异步读取
readFileSync 同步读取
createReadStream 流式读取

readFile 异步读取

语法: fs.readFile(path[, options], callback)

参数说明:

  • path 文件路径
  • options 选项配置
  • callback 回调函数
//1. 引入 fs 模块
const fs= require('fs')

//2. 异步读取
fs.readFile('./观书有感.txt',(err,data) => {
    if(err) {
      console.log('读取失败~~')
      return
    }
    console.log(data.toString())
})

readFileSync 同步读取

语法: fs.readFileSync(path[, options])
参数说明:

  • path 文件路径
  • options 选项配置

返回值: string | Buffer

//1. 引入 fs 模块
const fs= require('fs')

//3. 同步读取
let data = fs.readFileSync('./观书有感.txt');
console.log(data.toString());

createReadStream 流式读取

语法: fs.createReadStream(path[, options])

const fs = require('fs')
//2. 创建读取流对象
const rs = fs.createReadStream('../资料/笑看风云.mp4')
//3. 绑定 data 事件   chunk 块儿  大块儿
rs.on('data',chunk => {
    console.log(chunk.length);     // 65536 字节 => 64KB
})

//4. end  可选事件
rs.on('end', () => {
    console.log('读取完成');
  });

练习

/**
 * 需求:
 *   复制『资料』文件夹下的『笑看风云.mp4』
 */
 const fs = require('fs')
 const process = require('process')
 
//方式一 readFile
//读取文件内容
  let data = fs.readFileSync('../资料/笑看风云.mp4')
// //写入文件
 fs.writeFileSync('../资料/笑看风云-2.mp4',data)
 console.log(process.memoryUsage()); // rss  110710784 字节   105MB
 
//方式二 流式操作
//创建读取流对象
 const rs = fs.createReadStream('../资料/笑看风云.mp4')
//创建写入对象
 const ws = fs.createWriteStream('../资料/笑看风云-3.mp4')
 
 
//绑定 data 事件
 rs.on('data',chunk => {
     ws.write(chunk)
 })
 
 rs.pipe(ws);

文件移动与重命名

在 Node.js 中,我们可以使用 renamerenameSync 来移动或重命名 文件或文件夹
语法:
fs.rename(oldPath, newPath, callback)
fs.renameSync(oldPath, newPath)
参数说明:

  • oldPath 文件当前的路径
  • newPath 文件新的路径
  • callback 操作后的回调
//1. 导入 fs 模块
const fs = require('fs')

//2. 调用 rename 方法
fs.rename('./座右铭.txt', './论语.txt',err => {
   if(err) {
         console.log('操作失败~')
       return
     }
       console.log('操作成功')
    })


//文件的移动
fs.rename('./data.txt', '../资料/data.txt', err => {
    if(err) {
      console.log('操作失败~');
      return;
    }
    console.log('操作成功');
  })

文件删除

在 Node.js 中,我们可以使用 unlinkunlinkSync 来删除文件
语法:
fs.unlink(path, callback)
fs.unlinkSync(path)
参数说明:

  • path 文件路径
  • callback 操作后的回调
const fs = require('fs');
fs.unlink('./test.txt', err => {
if(err) throw err;
console.log('删除成功');
});
fs.unlinkSync('./test2.txt')

文件夹操作

借助 Node.js 的能力,我们可以对文件夹进行 创建 、 读取 、 删除 等操作

方法 说明
mkdir / mkdirSync 创建文件夹
readdir / readdirSync 读取文件夹
rmdir / rmdirSync 删除文件夹
//1. 导入 fs 模块
const fs = require('fs')

//2. 创建文件夹mk(make) 制作  dir(directory)文件夹
fs.mkdir('./html', err => {
   if(err) {
      console.log('创建失败~');
       return;
    }
    console.log('创建成功');
  });

//2-2 递归创建
fs.mkdir('./a/b/c',{recursive:true},err => {
   if(err) {
       console.log('创建失败~');
        return;
       }
       console.log('创建成功');
 })

//2-3 读取文件夹   read 读取  dir  directory 文件夹
fs.readdir('../资料', (err, data) => {
    if(err){
      console.log('读取失败');
       return;
    }
    console.log(data);
   });


//2-4 删除文件夹  rm  remove 移除
fs.rmdir('./html', err => {
   if(err){
    console.log('删除失败');
   return;
  }
   console.log('删除成功');
 });

//递归删除    不推荐使用
// fs.rmdir('./a', {recursive: true},err => {
//   if(err){
//     console.log(err);
//     return;
//   }
//   console.log('删除成功');
// });


//建议使用
fs.rm('./a', {recursive: true},err => {
    if(err){
      console.log(err);
      return;
    }
    console.log('删除成功');
  });

查看资源状态

在 Node.js 中,我们可以使用 statstatSync 来查看资源的详细信息
语法:
fs.stat(path[, options], callback)
fs.statSync(path[, options])

//1. 导入 fs 模块
const fs = require('fs');

//2. stat 方法  status 缩写 状态
fs.stat('../资料/笑看风云.mp4', (err, data) => {
    if(err){
      console.log('操作失败');
      return;
    }
    //   console.log(data);
    console.log(data.isFile());  //是不是文件
    console.log(data.isDirectory());  //是不是文件夹
})

相对路径问题

//1. 导入 fs 模块
const fs = require('fs');

//相对路径
fs.writeFileSync('./index.html', 'love');    //当前目录下的
fs.writeFileSync('index.html', 'love');     //等效于上面的写法
fs.writeFileSync('../index.html', 'love');  //当前目录的上一级目录中的***

//绝对路径
fs.writeFileSync('D:/index.html', 'love');  //windows 系统下的绝对路径
fs.writeFileSync('/index.html', 'love');  //Linux 系统下的绝对路径

使用 fs 模块的时候,尽量使用 __dirname 将路径转化为绝对路径,这样可以避免相对路径产生的Bug

let data = fs.readFileSync(__dirname + '/data.txt');
console.log(data)

path模块

path 模块提供了操作路径的功能,我们将介绍如下几个较为常用的几个 API:

API 说明
path.resolve 拼接规范的绝对路径 常用
path.sep 获取操作系统的路径分隔符
path.parse 解析路径并返回对象
path.basename 获取路径的基础名称
path.dirname 获取路径的目录名
path.extname 获得路径的扩展名
const path = require('path')

//获取路径分隔符
console.log(path.sep)

//拼接绝对路径
console.log(path.resolve(__dirname, 'test'))

//解析路径
let pathname = 'D:/program file/nodejs/node.exe'
console.log(path.parse(pathname))

//获取路径基础名称
console.log(path.basename(pathname))

//获取路径的目录名
console.log(path.dirname(pathname))

//获取路径的扩展名
console.log(path.extname(pathname))

HTTP 协议

概念

HTTP(hypertext transport protocol)协议;中文叫超文本传输协议,是一种基于TCP/IP的应用层通信协议,这个协议详细规定了浏览器和万维网服务器之间互相通信的规则。
协议中主要规定了两个方面的内容:

  • 客户端:用来向服务器发送数据,可以被称之为请求报文
  • 服务端:向客户端返回数据,可以被称之为响应报文

请求报文的组成

  • 请求行
  • 请求头
  • 空行
  • 请求体

HTTP 的请求行

  • 请求方法(get、post、put、delete等)

  • 请求 URL(统一资源定位器)

    例如:http://www.baidu.com:80/index.html?a=100&b=200#logo
    http: 协议(https、ftp、ssh等)
    www.baidu.com 域名
    80 端口号
    /index.html 路径
    a=100&b=200 查询字符串

  • HTTP协议版本号

HTTP 请求头

格式:『头名:头值』
常见的请求头有:

请求头 解释
Host 主机名
Connection 连接的设置 keep-alive(保持连接);close(关闭连接)
Cache-Control 缓存控制 max-age = 0 (没有缓存)
Upgrade-Insecure-Requests 将网页中的http请求转化为https请求(很少用)老网站升级
User-Agent 用户代理,客户端字符串标识,服务器可以通过这个标识来识别这个请求来自哪个客户端 ,一般在PC端和手机端的区分
Accept 设置浏览器接收的数据类型
Accept-Encoding 设置接收的压缩方式
Accept-Language 设置接收的语言 q=0.7 为喜好系数,满分为1
Cookie 后面单独讲

HTTP 的请求体

请求体内容的格式是非常灵活的,
(可以是空)> GET请求,
(也可以是字符串,还可以是JSON)
=> POST请求
例如:

  • 字符串:keywords=手机&price=2000
  • JSON:

响应报文的组成

  • 响应行

HTTP/1.1 200 OK

HTTP/1.1:HTTP协议版本号
200:响应状态码 404 Not Found 500 Internal Server Error
还有一些状态码,参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
OK:响应状态描述

  • 响应头

Cache-Control:缓存控制 private 私有的,只允许客户端缓存数据
Connection 链接设置
Content-Type:text/html;charset=utf-8 设置响应体的数据类型以及字符集,响应体为html,字符集utf-8
Content-Length:响应体的长度,单位为字节

  • 空行
  • 响应体

创建 HTTP 服务

//1. 导入 http 模块
const http = require('http')
//2. 创建服务对象 create 创建 server 服务
// request 意为请求. 是对请求报文的封装对象, 通过 request 对象可以获得请求报文的数据
// response 意为响应. 是对响应报文的封装对象, 通过 response 对象可以设置响应报文
const server = http.createServer((request, response) => {
     response.end('Hello HTTP server')
})
//3. 监听端口, 启动服务
server.listen(9000, () => {
console.log('服务已经启动, 端口 9000 监听中...')
})

http.createServer 里的回调函数的执行时机: 当接收到 HTTP 请求的时候,就会执行

注意事项

  1. 命令行 ctrl + c 停止服务

  2. 当服务启动后,更新代码 必须重启服务才能生效(后续使用nodemon管理)

  3. 响应内容中文乱码的解决办法

    response.setHeader('content-type','text/html;charset=utf-8')

  4. 端口号被占用

Error: listen EADDRINUSE: address already in use :::9000

1)关闭当前正在运行监听端口的服务 ( 使用较多 )
2)修改其他端口号

  1. HTTP 协议默认端口是 80 。HTTPS 协议的默认端口是 443, HTTP 服务开发常用端口有 3000,
    8080,8090,9000 等

如果端口被其他程序占用,可以使用 资源监视器找到占用端口的程序,然后使用任务管理器关闭对应的程序

获取 HTTP 请求报文

想要获取请求的数据,需要通过 request 对象

含义 语法 重点掌握度
请求方法 request.method *
请求版本 request.httpVersion
请求路径 request.url *
URL 路径 require('url').parse(request.url).pathname *
URL 查询字符串 require('url').parse(request.url, true).query *
请求头 request.headers *
请求体 request.on('data', function(chunk){}) request.on('end', function(){})

注意事项:

  1. request.url 只能获取路径以及查询字符串,无法获取 URL 中的域名以及协议的内容
  2. request.headers 将请求信息转化成一个对象,并将属性名都转化成了『小写』
  3. 关于路径:如果访问网站的时候,只填写了 IP 地址或者是域名信息,此时请求的路径为『 / 』
  4. 关于 favicon.ico:这个请求是属于浏览器自动发送的请求

提取HTTP报文

//1. 导入 http 模块
const http = require('http')

//2. 创建服务对象
const server = http.createServer((request, response) => {
  //获取请求的方法
  // console.log(request.method);
  //获取请求的 url
  // console.log(request.url);// 只包含 url 中的路径与查询字符串
  //获取 HTTP 协议的版本号
  // console.log(request.httpVersion);
  //获取 HTTP 的请求头
  // console.log(request.headers.host);
  response.end('http'); //设置响应体
})

//3. 监听端口, 启动服务
server.listen(9000, () => {
  console.log('服务已经启动....')
})

提取HTTP报文的请求体:

//1. 导入 http 模块
const http = require('http')

//2. 创建服务对象
const server = http.createServer((request, response) => {
  //1. 声明一个变量
  let body = ''
  //2. 绑定 data 事件
  request.on('data', chunk => {
    body += chunk
  })
  //3. 绑定 end 事件
  request.on('end', () => {
    console.log(body)
    //响应
    response.end('Hello HTTP')
  })
})

//3. 监听端口, 启动服务
server.listen(9000, () => {
  console.log('服务已经启动....')
})

提取HTTP报文中URL的路径与查询字符串:

//导入 http 模块
const http = require('http')
//1. 导入 url 模块
const url = require('url')

//创建服务对象
const server = http.createServer((request, response) => {
  //2. 解析 request.url 
  // console.log(request.url);
  let res = url.parse(request.url, true)
  //路径
  let pathname = res.pathname
  //查询字符串
  let keyword = res.query.keyword
  response.end('url')
});

//监听端口, 启动服务
server.listen(9000, () => {
  console.log('服务已经启动....')
})

------------------------------------------------------------------------------------------------------------------
//导入 http 模块
const http = require('http');

//创建服务对象
const server = http.createServer((request, response) => {
  //实例化 URL 的对象
  // let url = new URL('/search?a=100&b=200', 'http://127.0.0.1:9000');
  let url = new URL(request.url, 'http://127.0.0.1');
  //输出路径
  console.log(url.pathname);
  //输出 keyword 查询字符串
  console.log(url.searchParams.get('keyword'));
  response.end('url new');
});

//监听端口, 启动服务
server.listen(9000, () => {
  console.log('服务已经启动....')
});

HTTP请求练习:

//1、引入http模块
const http = require("http");
//2、建立服务
const server = http.createServer((request,response)=>{
let {url,method} = request; //对象的解构赋值
//设置响应头信息
//解决中文乱码
response.setHeader("Content-Type","text/html;charset=utf-8")
if(url == "/register" && method == "GET"){
response.end("注册页面");
}else if(url=="/login" && method == "GET"){
response.end("登录页面");
}else{
response.end("<h1>404 Not Found</h1>")
}
})
//3、监听端口
server.listen(8000,()=>{
console.log('服务启动中....');
})

设置 HTTP 响应报文

作用 语法
设置响应状态码 response.statusCode
设置响应状态描述 response.statusMessage ( 用的非常少 )
设置响应头信息 response.setHeader('头名', '头值')
设置响应体 response.write('xx') response.end('xxx')
//导入 http 模块
const http = require('http');

//创建服务对象
const server = http.createServer((request, response) => {
  //1. 设置响应状态码
  // response.statusCode = 203;
  // response.statusCode = 404;
  //2. 响应状态的描述 
  // response.statusMessage = 'iloveyou';
  //3. 响应头
  // response.setHeader('content-type', 'text/html;charset=utf-8');
  // response.setHeader('Server', 'Node.js');
  // response.setHeader('myHeader', 'test test test');
  // response.setHeader('test', ['a','b','c']);
  //4. 响应体的设置
  response.write('love');
  response.write('love');
  response.write('love');
  response.write('love');
  response.end('love'); //设置响应体
  response.end('xxx'); //设置响应体
});

//监听端口, 启动服务
server.listen(9000, () => {
  console.log('服务已经启动....')
});


--------------------------------------------------------
    
//write 和 end 的两种使用情况:
//1. write 和 end 的结合使用 响应体相对分散
response.write('xx');
response.write('xx');
response.write('xx');
response.end(); //每一个请求,在处理的时候必须要执行 end 方法的
//2. 单独使用 end 方法 响应体相对集中
response.end('xxx');

练习(优化版):在同级目录下新建一个html文件,然后读取

//导入 http 模块
const http = require('http');
const fs = require('fs');

//创建服务对象
const server = http.createServer((request, response) => {
  //读取文件内容
  let html = fs.readFileSync(__dirname + '/10_table.html');
  
  response.end(html); //设置响应体
});

//监听端口, 启动服务
server.listen(9000, () => {
  console.log('服务已经启动....')
});

静态资源服务

静态资源是指 内容长时间不发生改变的资源 ,例如图片,视频,CSS 文件,JS文件,HTML文件,字体文件等
动态资源是指 内容经常更新的资源 ,例如百度首页,网易首页,京东搜索列表页面等

网站根目录或静态资源目录

HTTP 服务在哪个文件夹中寻找静态资源,那个文件夹就是静态资源目录 ,也称之为网站根目录

网页中的 URL

网页中的 URL 主要分为两大类:相对路径与绝对路径

绝对路径:绝对路径可靠性强,而且相对容易理解,在项目中运用较多

形式 特点
http://ceshi.com/web 直接向目标资源发送请求,容易理解。网站的外链会用到此形式
//ceshi.com/web 与页面 URL 的协议拼接形成完整 URL 再发送请求。大型网站用的比较多
/web 与页面 URL 的协议、主机名、端口拼接形成完整 URL 再发送请求。中小型网站

相对路径:

相对路径在发送请求时,需要与当前页面 URL 路径进行计算,得到完整 URL 后,再发送请求,学习阶段用的较多
例如当前网页 url 为 http://www.atguigu.com/course/h5.html

形式 最终的 URL
./css/app.css http://www.atguigu.com/course/css/app.css
js/app.js http://www.atguigu.com/course/js/app.js
../img/logo.png http://www.atguigu.com/img/logo.png
../../mp4/show.mp4 http://www.atguigu.com/mp4/show.mp4

设置资源类型(mime类型)

媒体类型(通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 )是一种标准,用来表示文档、文件或字节流的性质和格式。

mime 类型结构: [type]/[subType]
例如: text/html text/css image/jpeg image/png application/json

HTTP 服务可以设置响应头 Content-Type 来表明响应体的 MIME 类型,浏览器会根据该类型决定如何处理资源

下面是常见文件对应的 mime 类型:

html: 'text/html',
css: 'text/css',
js: 'text/javascript',
png: 'image/png',
jpg: 'image/jpeg',
gif: 'image/gif',
mp4: 'video/mp4',
mp3: 'audio/mpeg',
json: 'application/json'

对于未知的资源类型,可以选择 application/octet-stream 类型,浏览器在遇到该类型的响应时,会对响应体内容进行独立存储,也就是我们常见的 下载 效果

require('http').createServer((request,response)=>{
    //获取请求的方法、路径
    let {url,method} = request
    //判断请求方式以及请求路径
    if(method == "GET" && url == "/index.html"){
        //需要响应文件中的内容
        let data = require('fs').readFileSync(__dirname + '/index.html')
        response.end(data)
    }else if(method == "GET" && url == "/css/app.css"){
        //需要响应文件中的内容
        let data = require('fs').readFileSync(__dirname + '/public/css/app.css')
        response.end(data)
    }else if(method == "GET" && url == "/js/app.js"){
        //需要响应文件中的内容
        let data = require('fs').readFileSync(__dirname + '/public/js/app.js')
        response.end(data)
    }
    else{
        //404响应
        response.statusCode = 404
        response.end("<h1>404 Not Found</h1>")
        }
}).listen(80,()=>{
    console.log('80端口正在启动中....')
})

很明显上面的代码,当只要有一个请求路径就需要进行判断,显然这种方式不够完美,那么我们需要封装

require('http').createServer((request,response)=>{
    //获取请求的方法已经路径
    let {url,method} = request
    //文件夹路径
    let rootDir = __dirname + '/public'
    //拼接文件路径
    let filePath = rootDir + url
    //读取文件内容
    fs.readFile(filePath,(err,data)=>{
        //判断
        if(err){
            //如果出现错误,响应404状态码
            response.statusCode = 404
            response.end('<h1>404 Not Found</h1>')
        }else{
            //响应文件内容
            response.end(data)
        }
    })
}).listen(80,()=>{
console.log('80端口正在启动中....')
})

GET 和 POST 请求场景小结

GET 请求的情况:

  • 在地址栏直接输入 url 访问
  • 点击 a 链接
  • link 标签引入 css
  • script 标签引入 js
  • img 标签引入图片
  • form 标签中的 method 为 get (不区分大小写)
  • ajax 中的 get 请求

POST 请求的情况:

  • form 标签中的 method 为 post(不区分大小写)
  • AJAX 的 post 请求

GET和POST请求的区别

GET 和 POST 是 HTTP 协议请求的两种方式。

  • GET 主要用来获取数据,POST 主要用来提交数据

  • GET 带参数请求是将参数缀到 URL 之后,在地址栏中输入 url 访问网站就是 GET 请求,POST 带参数请求是将参数放到请求体中

  • POST 请求相对 GET 安全一些,因为在浏览器中参数会暴露在地址栏

  • GET 请求大小有限制,一般为 2K,而 POST 请求则没有大小限制

node.js模块化

介绍

1.1 什么是模块化与模块 ?
将一个复杂的程序文件依据一定规则(规范)拆分成多个文件的过程称之为 模块化,其中拆分出的每个文件就是一个模块,模块的内部数据是私有的,不过模块可以暴露内部数据以便其他模块使用
1.2 什么是模块化项目 ?
编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目
1.3 模块化好处
下面是模块化的一些好处:

  • 防止命名冲突
  • 高复用性
  • 高维护性

模块暴露数据

可以通过下面的操作步骤,快速体验模块化

​ 1.创建me.js

//声明一个函数
function tiemo(){
  console.log('贴膜...')
}

//暴露数据
module.exports = tiemo;

​ 2.创建index.js

//导入模块
const tiemo = require('./me.js')

//调用函数
tiemo()

暴露数据

模块暴露数据的方式有两种:

  • module.exports = value
  • exports.name = value

使用时有几点注意:
1、module.exports 可以暴露任意数据
2、不能使用exports = value 的形式暴露数据,模块内部module与exports的隐式关系exports = module.exports = {} ,require 返回的是目标模块中 module.exports 的值

//导入模块
const me = require('./me.js');

//输出 me
console.log(me);
// me.tiemo();
// me.niejiao();
//声明一个函数
function tiemo(){
  console.log('贴膜...');
}

//捏脚
function niejiao(){
  console.log('捏脚....');
}

//暴露数据写法1
// module.exports = {
//   tiemo,
//   niejiao
// }

// exports 暴露数据写法2
// exports.niejiao = niejiao
// exports.tiemo = tiemo

//1. module.exports 可以暴露`任意`数据
// module.exports = 'iloveyou'
// module.exports = 521

//2. 不能使用 `exports = value`的形式暴露数据
// exports = 'iloveyou' // X

// exports = module.exports = {}
// console.log(module.exports)
// console.log(module.exports === exports)

exports = module.exports = {tiemo:tiemo}
exports.tiemo = tiemo
// exports = 'iloveyou' // X

导入(引入)模块

在模块中使用 require 传入文件路径即可引入文件

const test = require('./me.js')

require 使用的一些注意事项:

  • 对于自己创建的模块,导入时路径建议写相对路径,且不能省略 ./ 和 ../
  • js和 json 文件导入时可以不用写后缀,c/c++编写的 node 扩展文件也可以不写后缀,但是一般用不到
  • 如果导入其他类型的文件,会以 js 文件进行处理
  • 如果导入的路径是个文件夹,则会首先检测该文件夹下 package.json 文件中 main 属性对应的文件,如果存在则导入,反之如果文件不存在会报错。如果 main 属性不存在,或者 package.json 不存在,则会尝试导入文件夹下的 index.js 和index.json ,如果还是没找到,就会报错
  • 导入 node.js 内置模块时,直接 require 模块的名字即可,无需加 ./ 和 ../
//声明一个函数
function tiemo(){
  console.log('贴膜...')
}

//暴露数据
module.exports = tiemo
// //导入模块  // fs 
// // const tiemo = require('./me.js')

// //省略后缀 JS
// //const tiemo = require('./me')

// //导入 JSON 文件
// // const duanzi = require('./duanzi')  如果发现有同名不同类型的话,省略后缀先找js,在找json
// // console.log(duanzi)//对象

// //导入其他类型的文件 按照js形式访问
// const test = require('./test')
// console.log(test)

// // //调用函数
// // tiemo()

//导入模块
const tiemo = require('./me')
const duanzi = require('./duanzi')
console.log(duanzi)
const test = require('./test')
console.log(test)
//调用函数
tiemo()

导入模块的基本流程

这里我们介绍一下 require 导入自定义模块的基本流程

  • 将相对路径转为绝对路径,定位目标文件
  • 缓存检测
  • 读取目标文件代码
  • 包裹为一个函数并执行(自执行函数)。通过 arguments.callee.toString() 查看自执行函数
  • 缓存模块的值
  • 返回 module.exports 的值
/**
 * 伪代码
 */

function require(file){
  //1. 将相对路径转为绝对路径,定位目标文件
  let absolutePath = path.resolve(__dirname, file);
  //2. 缓存检测
  if(caches[absolutePath]){
    return caches[absolutePath];
  }
  //3. 读取文件的代码
  let code = fs.readFileSync(absolutePath).toString();
  //4. 包裹为一个函数 然后执行
  let module = {};
  let exports = module.exports = {};
  (function (exports, require, module, __filename, __dirname) {
    const test = {
      name: '强哥'
    }
  
    module.exports = test;
  
    //输出
    console.log(arguments.callee.toString());
  })(exports, require, module, __filename, __dirname)
  //5. 缓存结果
  caches[absolutePath] = module.exports;
  //6. 返回 module.exports 的值
  return module.exports;
}

const m = require('./me.js');

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
const test = {
  name: '强哥'
}

module.exports = test;

//输出
// console.log(arguments.callee.toString());
console.log(test);

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//导入 me.js
const m = require('./me.js');
const m2 = require('./me.js');

包管理工具

概念介绍

『包』英文单词是 package ,代表了一组特定功能的源码集合

包管理工具

管理『包』的应用软件,可以对「包」进行下载安装,更新,删除 ,上传等操作;
借助包管理工具,可以快速开发项目,提升开发效率;
包管理工具是一个通用的概念,很多编程语言都有包管理工具,所以 掌握好包管理工具非常重要;

下面列举了前端常用的包管理工具

  • npm
  • yarn
  • cnpm

npm 全称 Node Package Manager ,翻译为中文意思是『Node 的包管理工具』
npm 是 node.js 官方内置的包管理工具,是 必须要掌握住的工具

node.js 在安装时会自动安装 npm,所以如果你已经安装了node.js,可以直接使用 npm
可以通过 npm -v 查看版本号测试,如果显示版本号说明安装成功,反之安装失败

npm 基本使用

  • 初始化

    创建一个空目录,然后以此目录作为工作目录启动命令行工具 ,执行 npm init

    npm init 命令的作用是将文件夹初始化为一个『包』, 交互式创建 package.json 文件
    package.json 是包的配置文件,每个包都必须要有 package.json

package.json 内容示例:

{
"name": "1-npm", //包的名字
"version": "1.0.0", //包的版本
"description": "", //包的描述
"main": "index.js", //包的入口文件
"scripts": { //脚本配置
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "", //作者
"license": "ISC" //开源证书
}

初始化的过程中还有一些注意事项:

  1. package name ( 包名 ) 不能使用中文、大写,默认值是文件夹的名称 ,所以文件夹名称也不能使用中文和大写
  2. version ( 版本号 )要求 x.x.x 的形式定义, x 必须是数字,默认值是 1.0.0
  3. ISC 证书与 MIT 证书功能上是相同的,关于开源证书扩展阅读http://www.ruanyifeng.com/blog/2011/05/how_to_choose_free_software_licenses.html
  4. package.json 可以手动创建与修改
  5. 使用 npm init -y 或者 npm init --yes 极速创建 package.json
  • 搜索包

    搜索包的方式有两种:

  1. 命令行『npm s/search 关键字』
  2. 网站搜索网址是 https://www.npmjs.com/
  • 下载安装包

    我们可以通过 npm installnpm i 命令安装包

    运行之后文件夹下会增加两个资源

node_modules 文件夹 存放下载的包
package-lock.json 包的锁文件 ,用来锁定包的版本

安装 uniq 之后, uniq 就是当前这个包的一个 依赖包 ,有时会简称为 依赖
比如我们创建一个包名字为 A,A 中安装了包名字是 B,我们就说 B 是 A 的一个依赖包 ,也会说
A 依赖 B

  • require 导入 npm 包基本流程
  1. 在当前文件夹下 node_modules 中寻找同名的文件夹
  2. 在上级目录中下的 node_modules 中寻找同名的文件夹,直至找到磁盘根目录

生产环境与开发环境

  • 开发环境是程序员专门用来写代码的环境,一般是指程序员的电脑,开发环境的项目一般只能程序员自己访问
  • 生产环境是项目代码正式运行的环境,一般是指正式的服务器电脑,生产环境的项目一般每个客户都可以访问

生产依赖与开发依赖

我们可以在安装时设置选项来区分依赖的类型 ,目前分为两类:

类型 命令 补充
生产依赖 npm i -S uniq npm i --save uniq -S 等效于 --save, -S 是默认选项 包信息保存在 package.json 中 dependencies 属性
开发依赖 npm i -D less npm i --save-dev less -D 等效于 --save-dev 包信息保存在 package.json 中 devDependencies 属性

全局安装

我们可以执行安装选项 -g 进行全局安装npm i -g nodemon

全局安装完成之后就可以在命令行的任何位置运行 nodemon 命令,该命令的作用是自动重启 node 应用程序

修改 windows 执行策略:

windows 默认不允许 npm 全局命令执行脚本文件,所以需要修改执行策略

  1. 以 管理员身份 打开 powershell 命令行
  2. 键入命令 set-ExecutionPolicy remoteSigned
  3. 键入 A 然后敲回车

安装指定版本的包

项目中可能会遇到版本不匹配的情况,有时就需要安装指定版本的包,可以使用下面的命令的

//格式
npm i <包名@版本号>
//示例
npm i jquery@1.11.2

删除依赖:

项目中可能需要删除某些不需要的包,可以使用下面的命令

//局部删除
npm remove uniq
npm r uniq
//全局删除
npm remove -g nodemon

配置命令别名:

通过配置命令别名可以更简单的执行命令
配置 package.json 中的 scripts 属性

{
  .
  .
  .
    "scripts": {
         "server": "node server.js",
         "start": "node index.js",
  },
  .
  .
}

配置完成之后,可以使用别名执行命令

npm run server
npm run start   不过 start 别名比较特别,使用时可以省略 run

cnpm

cnpm 是一个淘宝构建的 npmjs.com 的完整镜像,也称为『淘宝镜像』,网址https://npmmirror.com/
cnpm 服务部署在国内 阿里云服务器上 , 可以提高包的下载速度,官方也提供了一个全局工具包 cnpm ,操作命令与 npm 大体相同

我们可以通过 npm 来安装 cnpm 工具

npm install -g cnpm --registry=https://registry.npmmirror.com

初始化          cnpm init / cnpm init
安装包          cnpm i uniq
               cnpm i -S uniq
               cnpm i -D uniq
               cnpm i -g nodemon
安装项目依赖    cnpm i
删除           cnpm r uniq

补充nvm包管理工具

下载地址 https://github.com/coreybutler/nvm-windows/releases

命令 说明
nvm list available 显示所有可以下载的 Node.js 版本
nvm list 显示已安装的版本
nvm install 18.12.1 安装 18.12.1 版本的 Node.js
nvm install latest 安装最新版的 Node.js
nvm uninstall 18.12.1 删除某个版本的 Node.js
nvm use 18.12.1 切换 18.12.1 的 Node.js

express框架

express 是一个基于 Node.js 平台的极简、灵活的 WEB 应用开发框架,官方网址:https://www.expressjs.com.cn/
简单来说,express 是一个封装好的工具包,封装了很多功能,便于我们开发 WEB 应用(HTTP 服务)

express 下载

express 本身是一个 npm 包,所以可以通过 npm 安装

npm init / npm i express

express 初体验

//导入express
const express = require('express')

//创建应用对象
const app = express()

//创建路由
app.get('/home',(req,res) => {
    res.end('hello express')
})

//监听窗口,启动服务
app.listen(8000, () => {
    console.log('服务已经启动,端口8000正在监听中...');
})

express 路由

官方定义: 路由确定了应用程序如何响应客户端对特定端点的请求

一个路由的组成有请求方法,路径和回调函数组成
express 中提供了一系列方法,可以很方便的使用路由,使用格式如下:

app.<method>(path,callback)
//导入express
const express = require('express')

//创建应用对象
const app = express()

//创建路由
app.get('/home',(req,res) => {
    res.end('hello express')
})


//get方法
app.get('/',(req,res) => {
    res.end('home')
})

//post方法要在表单或者ajax才能实现
app.post('/login',(req,res) => {
    res.end('login login')
})

//匹配所有方法
app.all('/test',(req,res) => {
    res.end('test test')
})

//404响应
app.all('*',(req,res) => {
    res.end('404')
})

//监听窗口,启动服务
app.listen(8000, () => {
    console.log('服务已经启动,端口8000正在监听中...');
})

获取请求参数

express 框架封装了一些 API 来方便获取请求报文中的数据,并且兼容原生 HTTP 模块的获取方式

//1.导入express
const express = require('express')

//2.创建应用对象
const app = express()

//3.创建路由
app.get('/request',(req,res) => {
    //原生操作
    console.log(req.method)
    console.log(req.url)
    console.log(req.httpVersion)
    console.log(req.headers)
    res.end('hello express')


    //express操作
    console.log(req.path)
    console.log(req.query) //获取查询字符串

    //获取ip
    console.log(req.ip)

    //获取请求头
    console.log(req.get('host'))
})

//4.监听窗口,启动服务
app.listen(8000, () => {
    console.log('服务已经启动,端口8000正在监听中...');
})

获取路由参数

路由参数指的是 URL 路径中的参数(数据)

//1.导入express
const express = require('express')

//2.创建应用对象
const app = express()

//3.创建路由
app.get('/:id.html',(req,res) => {
    //获取URL路由参数
    console.log(req.params.id)   //parmas路由的所有参数;id是路由参数的一个
    res.setHeader('content-type','text/html;charset=utf-8')
    res.end('商品详情')
})

//4.监听窗口,启动服务
app.listen(8000, () => {
    console.log('服务已经启动,端口8000正在监听中...');
})

express 响应设置

express 框架封装了一些 API来方便给客户端响应数据,并且兼容原生HTTP模块的获取方式

//获取请求的路由规则
app.get("/response", (req, res) => {
	//1.原生响应
       res.statusCode = 404
       res.statusMessage = 'xxx'
       res.setHeader('abc','xyz')
       res.write('响应体')
       res.end('xxx')
	//2. express 的响应方法
        res.status(500)  //设置响应状态码
        res.set('xxx','yyy') //设置响应头
        res.send('中文响应不乱码') //设置响应体
    //连贯操作
        res.status(404).set('xxx','yyy').send('你好朋友')
    //3. 其他响应
        res.redirect('http://atguigu.com')//重定向//跳转响应
        res.download('./package.json') //下载响应
        res.json() //响应 JSON
        res.sendFile(__dirname + '/home.html') //响应文件内容
})

express 中间件

中间件(Middleware)本质是一个回调函数

中间件函数 可以像路由回调一样访问 请求对象(request) , 响应对象(response)

中间件的作用 就是 使用函数封装公共操作,简化代码

定义全局中间件

每一个请求 到达服务端之后 都会执行全局中间件函数

/*
* 记录每个请求的url与IP地址
*/ 

//导入express
const express = require('express')
const fs = require('fs')
const path = require('path')

//创建应用对象
const app = express()

//声明中间件函数
function recordMiddleware(req,res,next){
    //获取url和ip
    let {url,ip} = req
    console.log(url,ip)
    //将文件保存在文件access.log中
    fs.appendFileSync(path.resolve(__dirname, './access.log'),`${url} ${ip}\r\n`)
    //调用next
    next()///执行next函数(当如果希望执行完中间件函数之后,仍然继续执行路由中的回调函数,必须调用next)
}

//使用中间件
app.use(recordMiddleware)


//创建路由
app.get('/home',(req,res) => {
    res.send('前台首页')
})

app.get('/admin',(req,res) => {
    res.send('后台首页')
})

app.all('*',(req,res) => {
    res.send('<h1>404NOT Found</h1>')
})
//监听窗口,启动服务
app.listen(8000, () => {
    console.log('服务已经启动,端口8000正在监听中...');
})

express 允许使用 app.use() 定义多个全局中间件

app.use(function (request, response, next) {
     console.log('定义第一个中间件');
     next();
})
app.use(function (request, response, next) {
     console.log('定义第二个中间件');
     next();
})

定义路由中间件

如果只需要对某一些路由进行功能封装 ,则就需要路由中间件

//格式
app.get('/路径',`中间件函数`,(request,response)=>{
    
})
app.get('/路径',`中间件函数1`,`中间件函数2`,(request,response)=>{
    
})

---------------------------------------------------------------------------------------------------------------  /**
 * 针对 /admin  /setting 的请求, 要求 URL 携带 code=521 参数, 如未携带提示『暗号错误』  
 */
//导入express
const express = require('express')

//创建应用对象
const app = express()

//创建路由
app.get('/home',(req,res) => {
    res.send('前台首页')
})

//声明中间件
let checkCodeMiddleware = (req,res,next) => {
    //判断url中是否参数等于521
    if(req.query.code === '521'){
       next()
    }else {
        res.send('暗号错误')
    }
}
//后台
app.get('/admin',checkCodeMiddleware, (req,res) => {
    res.send('后台首页')
})

//后台设置
app.get('/setting',checkCodeMiddleware, (req,res) => {
    res.send('设置页面')
})

app.all('*',(req,res) => {
    res.send('<h1>404NOT Found</h1>')
})
//监听窗口,启动服务
app.listen(8000, () => {
    console.log('服务已经启动,端口8000正在监听中...')
})

静态资源中间件

express 内置处理静态资源的中间件

//引入express框架
const express = require('express')
//创建服务对象
const app = express()
//静态资源中间件的设置,将当前文件夹下的public目录作为网站的根目录
    app.use(express.static('./public')) //当然这个目录中都是一些静态资源
//如果访问的内容经常变化,还是需要设置路由
//但是,在这里有一个问题,如果public目录下有index.html文件,单独也有index.html的路由,
//则谁书写在前,优先执行谁
   app.get('/index.html',(request,response)=>{
   respsonse.send('首页')
})
//监听端口
app.listen(3000,()=>{
console.log('3000 端口启动....')
})
  1. index.html 文件为默认打开的资源
  2. 如果静态资源与路由规则同时匹配,谁先匹配谁就响应
  3. 路由响应动态资源,静态资源中间件响应静态资源

获取请求体数据 body-parser

express 可以使用 body-parser 包处理请求体

//第一步:安装
npm i body-parser
//第二步:导入 body-parser 包
const bodyParser = require('body-parser')
//第三步:获取中间件函数
//处理 querystring 格式的请求体
let urlencodeParser = bodyParser.urlencoded({extended:false}))
//处理 JSON 格式的请求体
let jsonParser = bodyParser.json()
//第四步:设置路由中间件,然后使用 request.body 来获取请求体数据
app.post('/login', urlencodeParser, (request,response)=>{
    //获取请求体数据
    //console.log(request.body)
    //用户名
    console.log(request.body.username)
    //密码
    console.log(request.body.userpass)
    response.send('获取请求体数据')
})


/*
获取到的请求体数据:
[Object: null prototype] { username: 'admin', userpass: '123456' }
*/

图片防盗链

//导入express
const express = require('express')

//创建应用对象
const app = express()

//声明中间件
app.use((req,res,next) => {
    //检测请求头中的referer是否为127.0.0.1
    //获取referer
    let referer = req.get('referer')
    if(referer){
    //实例化
    let url = new URL(referer)
    //获取hostname
    let hostname = url.hostname
    //判断
    if(hostname !== '127.0.0.1'){
        //响应404
        res.status(404).send('<h1>404 NOT Found</h1>')
        return
    }
    }
    next()
})

//静态资源中间件设置
app.use(express.static(__dirname + '/public')) //express.static()中间件函数       '/public'静态资源路径



//监听窗口,启动服务
app.listen(8000, () => {
    console.log('服务已经启动,端口8000正在监听中...');
})



Router

express 中的 Router 是一个完整的中间件和路由系统,可以看做是一个小型的 app 对象。对路由进行模块化,更好的管理路由。

Router 使用:

创建独立的 JS 文件(homeRouter.js)

//1. 导入 express
const express = require('express')
//2. 创建路由器对象
const router = express.Router()
//3. 在 router 对象身上添加路由
router.get('/', (req, res) => {
    res.send('首页')
})
router.get('/cart', (req, res) => {
    res.send('购物车')
})
//4. 暴露
module.exports = router

主文件:

const express = require('express')
const app = express()
//5.引入子路由文件
const homeRouter = require('./routes/homeRouter')
//6.设置和使用中间件
app.use(homeRouter)
app.listen(3000,()=>{
    console.log('3000 端口启动....')
})

EJS 模板引擎

模板引擎是分离 用户界面和业务数据 的一种技术

EJS 是一个高效的 Javascript 的模板引擎

官网: https://ejs.co/
中文站:https://ejs.bootcss.com/

下载安装EJS: npm i ejs --save

//1.引入ejs
const ejs = require('ejs')
//2.定义数据
let person = ['张三','李四','王二麻子']
//3.ejs解析模板返回结构
//<%= %> 是ejs解析内容的标记,作用是输出当前表达式的执行结构
let html = ejs.render('<%= person.join(",") %>', {person:person})
//4.输出结果
console.log(html)

EJS 常用语法:

执行JS代码

<% code %>

输出转义的数据到模板上

<%= code %>

输出非转义的数据到模板上

<%- code %>