Node学习

1.exports 和module.exports 的区别

exports 是 module.exports的别名(地址引用关系),导出对象以module.exports为准

image1.png

当exports和module.exports指向不同的对象时,以module.exports对象为主

2.fs 文件操作

//1.模块引用

//引入fs
const fs = require('fs');
//---读取---
//2.文件读取(路径,文件的字符编码,回调函数--接收文件内容)
fs.readFile('./node01.js','utf-8',(err,doc)=>{
  if(err == null){
      console.log("文件读取成功");  
  }
}
//动态流的读取
const rs = fs.createReadStream("./index.html");

rs.on('data',(chunk)=>{
    console.log(chunk.toString());
})
rs.on('open',()=>{
    console.log("开始读取文件时触发");
})
//区别:小文件的读取 readFile  
//大文件的读取用createReadStream
// ---写入---
//文件写入(不存在则创建)
fs.writeFile('./node02.js','我是被写入的内容',(err,doc)=>{
  if(err != null){
      console.log("写入失败");
      return;  
  }
}
//{ encoding: ‘utf8’, ‘flag’: ‘w’ }：encoding表示文件编码、flag表示文件系统标志。
fs.writeFile('./a.txt','花开堪折直须折,莫待无花空折枝',{encoding:'utf8',flag:"a"},(err)=>{
    if(err){
        console.log("写入失败");
        return;
    }
    console.log("写入成功");
})
//追加的方式写入
fs.appendFile('./a.txt','我在马路边又捡了一分钱',(err)=>{
    if (err) {
        throw err
    }
})
//动态路径拼接的问题
__dirname表示当前文件所在的路径
//同步的写入
fs.writeFileSync('./a.txt',"花开堪折直须折,莫待无花空折枝");

//通过写入流写入文件
let ws = fs.createWriteStream("index.html");
ws.write("花开堪折直须折");
ws.write("莫待无花空折枝");
ws.end();
//区别:writeFile:简单的写入次数少的情况,批量写入的场景用createWriteStresam

//复制文件
//创建读取,写入流
const ws = fs.createWriteStream("./不二法门.pdf");
const rs = fs.createReadStream('./JavaScript权威指南(第6版)-中文版.pdf');

//读取成功,动态写入
rs.on('data',chunk =>{
    ws.write(chunk);
})
//管道 -->简写方法
//rs.pipe(ws);

//重命名文件  ('旧文件名','新文件名',err)
fs.rename('./不二法门.pdf','./JavaScript权威指南.pdf',err =>{
    if(err){
        return;
    }
    console.log('重命名成功');
})
//移动文件
fs.rename('./JavaScript权威指南.pdf','./ebook/JavaScript权威指南.pdf',err =>{
    if(err){
        return;
    }
    console.log('移动成功');
})
//重命名同步api renameSync

//删除文件
fs.unlink('./ebook/JavaScript权威指南.pdf',err =>{
    if(err) throw err
    console.log("删除成功");
});
//删除文件同步api  unlinkSync

//创建文件夹---文件夹存在-->err
fs.mkdir('./pic',err =>{
    if(err) throw err;
    console.log('创建成功');
});
//读取文件夹
fs.readdir('../file',(err,files)=>{
    if(err) throw err;
    //输出文件夹下文件列表
    console.log(files);
})
//删除文件夹(文件夹必须是空的,否则需要递归删除)
fs.rmdir('./ebook',err =>{
    if(err) throw err;
    console.log('删除成功');
})
//获取文件的状态
fs.stat('./a.txt',(err,stats)=>{
    if(err) throw err;
    console.log("是否是文件夹:"+stats.isDirectory());
    console.log("是否是文件:"+stats.isFile());
})

flag参数.png

2.2path模块

//引入
const path = require('path');
//可以把多个路径拼接成完整的路径字符串,../会抵消前面的路径
path.join()
//示例
path.join('/a','/b/c','../../','/d','/e');//  /a/d/e
//获取文件名
path.basename();
//示例 
var path = '/a/b/c.index.html'
path.basename(path);//index.html
path.basename(path,'.html');//index
//获取文件的拓展名
path.extname(path);//.html
//相对路径转绝对路径
let str = "/a/b/ccc.js";
path.resolve(str);

//接收一个合法的路径字符串,转换成对象
let urlStr = "/a/b/c/d.js";
let urlObj = path.parse(urlStr);
console.log(urlObj); //{ root: '/', dir: '/a/b/c', base: 'd.js', ext: '.js', name: 'd' }
//base可以用作修改文件名或后缀的方式
urlObj.base = "e.exe";
//路径对象转路径字符串
let urlStr2 = path.format(urlObj);
console.log(urlStr2);// /a/b/c\e.exe

2.3.http模块
http协议: 超文本传输协议,规定了浏览器和万维网服务器之间相互通信的规则.
1.浏览器向服务器发送的内容叫请求报文.
2.服务器向浏览器返回的的内容叫响应报文.
网页加载的过程:
先发请求获取html页面,解析页面过程获取css ,script ,img

http请求报文:(行头体)
![请求报文.png](https://img.haomeiwen.com/i4311886/946ceb92d38475ef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

//引入
cosnt http = require('http');
//四部开一个服务器
//创建web服务实例
const server = http.createServer(); 
//为服务器绑定request事件,监听客户端requset请求
server.on('request',function(req,res){
    console.log("服务器被访问了...");
    //console.log(req);
    const url = req.url;
    const method = req.method;
    const str = `Your requst url is ${url},your request method is ${method}`;
    console.log(str);
    //解决中文乱码的问题
    res.setHeader('Content-Type','text/html; charset=utf-8');
     //访问127.0.0.1 返回数据
    res.end("我的天哪...");
    //res.end(sy);
    
})
//启动服务器
server.listen(80,function() {
    console.log("server runing at 127.0.0.1");
})

//req与res 
//req 封装了请求相关的信息
//res为响应对象
//res.end()方法用来执行响应

2.4 express
2.4.1 express的基本使用

//1.引入
const express = require("express"); 
//2.创建web服务器
const app = express();

//4.监听get请求
app.get("/user",(req,res)=>{
    //向客户端发送json对象
    res.send({name:'张三',age:25})
})
app.post('/user',(req,res)=>{
    res.send({about:'我的天哪'})
})
//3.启动web服务器
app.listen(80,()=>{
    console.log('express running at 127.0.0.1');
})

2.4.2

app.get("/user",(req,res)=>{
    //默认req.query是一个空对象,如果get请求后拼接参数,可自动解析为对象
    console.log(req.query);
    //向客户端发送json对象
    res.send(req.query);
})

请求.png 参数解析.png

2.4.3

//url动态参数 :后字符串的名称为params中参数的名称
///:ids   --- req.params.ids
app.get('/user/:id',(req,res)=>{
    console.log(req.params);
    res.send(req.params);
})

image.png

2.4.4 静态资源托管

//./clock不会出现在访问路径中
app.use(express.static('./clock'));
//---访问路径示例 http://127.0.0.1/index.css
//托管多个静态资源时,存在同名的文件,自上而下的生效
//即clock和public下存在同名文件index.html,访问到的是clock下index.html
app.use(express.static('./clock'));
app.use(express.static('./public'));
//挂在路径前缀
app.use('./public',express.static('./public'))
//访问路径示例 http://127.0.0.1/public/index.css

2.4.5 中间件

//next函数  把流转关系转给下一个中间件或者路由
//包含next为中间件,只有req,res为路由
const mv = function(req,res,){
  //todo something...
  next();
//next()后不再处理逻辑
} 


//全局中间件:客户端请求到达服务器之后都会触发
app.use(mv);
//

//全局中间件的简写,多个全局中间件按顺序调用
app.use(function(req,res,next){
console.log("这是一个简单的中间件");

next();
})
//中间件的流转过程中我们可以为req添加属性,在后续的中间件及路由中可以访问到

image.png

//局部生效的中间件
const mv1 = function(req,res,){
  //todo something...
  next();
} 
const mv2 = function(req,res,){
  //todo something...
  next();
} 
const mv3 = function(req,res,){
  //todo something...
  next();
} 
app.get('/user',mv1,(req,res)=>{
  res.send("user info");
})
//多个局部中间件(两种写法完全等价)
//第一种写法
app.get('/about',mv2,mv3,(req,res)=>{
  res.send("about info");
})
//第二种写法
app.get('/about',[mv2,mv3],(req,res)=>{
  res.send("about info");
})

2.4.6中间件的分类

中间件的分类.png

2.4.7 错误级别的中间件

错误级别的中间件.png

2.4.8内置中间件
①express.static(静态资源托管)➖见2.4.4
②express.json(解析客户端发送的json数据)

express.json.png

③express.urlencoded

express.urlencoded.png
express.urlencoded

2.5跨域问题处理
2.5.1JSONP

jsonp.png

//客户端
$('#jsonp').on('click',function() {
                $.ajax({
                    method:'GET',
                    url: 'http://127.0.0.1/api/jsonp',
                    dataType:'jsonp',
                    success:function(res){
                        console.log(res);
                    }
                })
            });
//服务端
//要在设置cors之前进行jsonp请求,否者会被处理成cors
app.get('/api/jsonp',(req,res)=>{
    //拼接函数名称
    const funcName = req.query.callback;
    //定义要发送的对象
    const data = {name:'张三',age:28};
    //拼接方法的字符串
    const str = `${funcName}(${JSON.stringify(data)})` 
    res.send(str);
});

2.5.2 CROS
同源策略:浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
源（origin）就是协议、域名和端口号。
以上url中的源就是：http://www.company.com:80
若地址里面的协议、域名和端口号均相同则属于同源。
以下是相对于 http://www.a.com/test/index.html 的同源检测
• http://www.a.com/dir/page.html ----成功
• http://www.child.a.com/test/index.html ----失败，域名不同
• https://www.a.com/test/index.html ----失败，协议不同
• http://www.a.com:8080/test/index.html ----失败，端口号不同
跨域:受前面所讲的浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。

//简单代码示例
//客户端
$('#get').on('click',function() {
                $.ajax({
                    type: "GET",
                    url:'http://127.0.0.1/api/get',
                    data:{name:"张三",age:20},
                    success: function(res){
                        console.log(res);
                    }
                })
            });
//服务端(未设置CROS)
router.get('/get',(req,res)=>{
    const query = req.query;
    res.send({
        status:200,
        msg:'GET success',
        data: query
    });
});

file:///C:/Users/zhangdongshan/Desktop/nodeLearn/request.html

image.png

const cors = require("cors");
app.use(cors());

image.png cros.png

//   CROS响应头部  Access-Control-Allow-Origin
 Access-Control-Allow-Origin:*//允许来自任何域的请求

Access-Control-Allow-Header

Access-Control-Allow-Header.png 设置请求头.png Access-Control-Allow-Method.png

CROS请求分类

CROS请求分类.png

①简单请求

image.png

②预检请求

image.png

3.npm
全局安装 命令行工具 全局可用 npm install xxx -g
本地安装 库文件(当前项目可用) npm install xxx

4.glup 基于node平台开发的前端构建工具
作用:
1.项目上线,后台,html,css,js文件压缩合并
2.语法转换(es6,less...)
3.公共文件抽离
4.修改文件浏览器自动刷新
4.1glup使用:
1.npm install gulp 安装
2.根目录创建gulpfile.js文件
3.创建src目录放源代码 dist目录放构建后的代码
4.在gulpfile.js中编写任务
5.命令行执行gulp任务

gulp Api:
gulp.src() 获取任务要处理的文件
gulp.dest() 输出文件
gulp.task() 建立gulp任务
gulp.watch() 监听任务的变化

示例1:

const gulp = require("gulp");
//1.gulp.task建立任务
    //1.任务的名称
    //2.任务函数回调
gulp.task('first',()=>{
    console.log('第一个gulp任务执行了');
    //gulp.src 获取要处理的文件
     gulp.src('./src/css/base.css')
    .pipe(gulp.dest('dist/css'));
});

上述代码可能出现的错误:

image.png

解决方法1：这个问题出现的原因是：gulp 4.0 的任务函数中，如果任务是同步的，需要使用 done 回调。这样做是为了让 gulp 知道你的任务何时完成。

添加完done回调就可以顺利执行了。

gulp.task('first', (done) => {
    console.log('这是我的第一个gulp 任务');
    // 使用 gulp.src 获取要处理的文件
    gulp.src('./src/css/base.css')
        // gulp.dest 输出要处理的文件
        .pipe(gulp.dest('dist/css'));
    done()
})

解决方法2，不使用 done 回调也可以正常编译，只需把 gulp 语句 return 返回就可以了

gulp.task('first', () => {
    console.log('这是我的第一个gulp 任务');
    // 使用 gulp.src 获取要处理的文件
    return gulp.src('./src/css/base.css')
        // gulp.dest 输出要处理的文件
        .pipe(gulp.dest('dist/css'));
})

这样也可以正常编译。
4.2 gulp 插件
1.gulp-htmlmin: html文件压缩
2.gulp-csso: 压缩css
3.gulp-babel:js语法转化
4.gunp-less:less语法转换
5.gulp-uglify:压缩混淆javascript
6.gulp-file-include 公共文件包含
7.browsersync 浏览器实时同步