nodejs

node.js学习笔记1

1、fs 模块

1.1概念

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

1.2文件写入

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

方法说明
writeFile异步写入
writeFileSync同步写入
appendFile / appendFileSync追加写入
createWriteStream流式写入
1.2.1 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('写入成功')
})
1.2.2 writeFileSync 同步写入

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

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

//同步
fs.writeFileSync('./data.txt','test')
console.log(1+1);
1.2.3 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('写入成功');
  });
1.2.4createWriteStream 流式写入

语法: 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 适合于 写入频率较低的场景

1.3文件读取

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

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

语法: 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())
})
1.3.2readFileSync 同步读取

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

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

返回值: string | Buffer

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

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

语法: 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('读取完成');
  });
1.3.4练习
/**
 * 需求:
 *   复制『资料』文件夹下的『笑看风云.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);

1.4文件移动与重命名

在 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('操作成功');
  })

1.5文件删除

在 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')

1.6文件夹操作

借助 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('删除成功');
  });

1.7查看资源状态

在 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.8相对路径问题

//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)

2、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))

3、HTTP 协议

3.1概念

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

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

3.2请求报文的组成

  • 请求行
  • 请求头
  • 空行
  • 请求体
3.2.1HTTP 的请求行
  • 请求方法(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协议版本号

3.2.2HTTP 请求头

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

请求头解释
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后面单独讲
3.2.3HTTP 的请求体

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

  • 字符串:keywords=手机&price=2000
  • JSON:{“keywords”:“手机”,“price”:2000}

3.3响应报文的组成

  • 响应行

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:响应体的长度,单位为字节

  • 空行
  • 响应体

3.4创建 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 等

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

3.5获取 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('服务启动中....');
})

3.6设置 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('服务已经启动....')
});

3.7静态资源服务

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

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

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

3.7.2网页中的 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.csshttp://www.atguigu.com/course/css/app.css
js/app.jshttp://www.atguigu.com/course/js/app.js
…/img/logo.pnghttp://www.atguigu.com/img/logo.png
…/…/mp4/show.mp4http://www.atguigu.com/mp4/show.mp4

3.8设置资源类型(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 请求则没有大小限制

4、node.js模块化

4.1介绍

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

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

4.2模块暴露数据

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

​ 1.创建me.js

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

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

​ 2.创建index.js

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

//调用函数
tiemo()

4.3暴露数据

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

  • 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

4.4导入(引入)模块

在模块中使用 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()

4.5导入模块的基本流程

这里我们介绍一下 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');

5、包管理工具

5.1概念介绍

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

5.2包管理工具

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

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

  • npm
  • yarn
  • cnpm

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

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

5.3.1npm 基本使用
  • 初始化

    创建一个空目录,然后以此目录作为工作目录启动命令行工具 ,执行 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 中寻找同名的文件夹,直至找到磁盘根目录
5.3.2生产环境与开发环境
  • 开发环境是程序员专门用来写代码的环境,一般是指程序员的电脑,开发环境的项目一般只能程序员自己访问
  • 生产环境是项目代码正式运行的环境,一般是指正式的服务器电脑,生产环境的项目一般每个客户都可以访问
5.3.3生产依赖与开发依赖

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

类型命令补充
生产依赖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 属性
5.3.4全局安装

我们可以执行安装选项 -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

5.5cnpm

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

5.6补充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

6、express框架

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

6.1express 下载

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

npm init / npm i express

6.2express 初体验

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

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

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

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

6.3express 路由

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

一个路由的组成有请求方法,路径和回调函数组成
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正在监听中...');
})
6.3.1获取请求参数

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正在监听中...');
})
6.3.2获取路由参数

路由参数指的是 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正在监听中...');
})
6.3.3express 响应设置

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') //响应文件内容
})

6.4express 中间件

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

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

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

6.4.1定义全局中间件

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

/*
* 记录每个请求的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();
})
6.4.2定义路由中间件

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

//格式
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正在监听中...')
})

6.5静态资源中间件

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. 路由响应动态资源,静态资源中间件响应静态资源

6.6获取请求体数据 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' }
*/

6.7图片防盗链

//导入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正在监听中...');
})



6.8Router

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 端口启动....')
})

6.9EJS 模板引擎

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

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 %>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Citizen-L

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值