[网络协议]Node.js(二) node的核心模块（fs，http，url，path）

1. fs 文件操作模：实现 读写文件? ?I/O? input? output

readFile  readdir mkdir rmdir  unlink writeFile appendFile  都是异步的

? ? ? ? 引入fs模块，模块是node内置模块，不要另外安装，直接导入即可

let fs = require('fs');

? ? ? ? 读取文件 fs.readFile('文件路径','文件编码 一般为utf-8',回调函数(err,data)=>{})

// readFile 是一个异步操作；
fs.readFile('./package.json','utf-8',(err,data)=>{
  // 当读取失败的时候 err 才会有内容， 读取成功的时候 err是一个null
  if(!err){
    // 证明读取成功了
    console.log(data)//data是读取的对应的数据；
  }else{
    // 证明读取失败了；
    console.log('失败了',err)
  }
})


let data = fs.readFileSync('./package-lock.json','utf-8');// 同步读取 返回结果是 读取的内容；
// 一旦读取失败 代码就会报错  下边的代码就不再执行了；

? ? ? ? 读取文件夹fs.readdir

fs.readdir('./es6',null,(err,data)=>{
  // 第一个参数是文件夹的路径
  if(!err){
    // 证明读取成功
    console.log(data)// data 是一个数组 数组中的项文件夹中的文件的名字
  }else{
    console.log(err)
  }
})

????????创造文件夹fs.mkdir

fs.mkdir('./mydir',(err)=>{
  // 创造文件夹  上边这个参数的意思 就是 在同级目录下创建一个mydir的文件夹
  // 若要创建的文件夹已经存在 那么 再去创建的时候 就会报错失败
  if(!err){
    console.log('创建成功')
  }else{
    console.log('创建失败',err)
  }
})
fs.mkdir('./js/mydir2',(err)=>{
  // 创造文件夹  上边这个参数的意思 就是 在统计目录下的js文件夹下创建一个mydir2的文件夹
  if(!err){
    console.log('创建成功')
  }else{
    console.log('创建失败',err)
  }
}) 

? ? ? ? 删除文件夹fs.rmdir

fs.rmdir('./mydir',(err)=>{
  if(!err){
    console.log('删除成功')
  }else{
    // 删除一个不存在的文件夹时 报错
    console.log('删除失败',err)
  }
}) 

fs.rmdir('./es6',(err)=>{
  // 文件夹若不为空 则删除失败
  console.log(err)
})

fs.unlink('./mytest/1.txt',(err)=>{
  // 删除文件
  console.log(err)
})

? ? ? ? 写入文件fs.writeFile

 fs.writeFile('./mytest/1.txt','hello 珠峰','utf-8',(err)=>{
  // 写入的时候 若发现不存在对应的文件 则会默认创建一个对应的文件
  // 有对应的文件 就会直接写入；
  // 写入的内容会把老内容整个替换掉
  if(!err){
    console.log('写入成功')
  }else{
    console.log('写入失败')
  }
})

? ? ? ? 在文件中添加内容

fs.appendFile('./mytest/2.txt','hello 珠峰','utf-8',(err)=>{
  // 参数等同于 writeFile  但是 这个方法是添加内容 不是替换内容；
  console.log(err)
})

使用Promise来封装这些方法

let fs = require('fs');
let obj = {
  // readFile,readdir
};
['readFile','readdir'].forEach(key=>{
  obj[key] = function(url,encoding=null){
    // 需要 对 encoding 进行判断处理； 若是 js css html txt json 等这类文件的
    // encoding 需要时 utf-8; 其他的 是null即可
    if(/\.(js|css|html|txt|json)/i.test(url)){
      encoding = 'utf-8'
    }
    return new Promise((res,rej)=>{
      fs[key](url,encoding,(err,data)=>{
        if(!err){
          res(data)
        }else{
          rej(err)
        }
      })
    })
  }
});
// mkdir  rmdir  unlink
// writeFile  appendFile
['mkdir','rmdir','unlink'].forEach(key=>{
  obj[key] = function(url){
    return new Promise((res,rej)=>{
      fs[key](url,(err)=>{
        if(!err){
          res('success')
        }else{
          rej(err)
        }
      })
    })
  }
});
['writeFile','appendFile'].forEach(key=>{
  obj[key]=function(url,data,encoding='utf-8'){
    return new Promise((res,rej)=>{
      fs[key](url,data,encoding,(err)=>{
        if(!err){
          res('success')
        }else{
          rej(err)
        }
      })
    })
  }
});

console.log(obj)
module.exports = obj;

2.url 解析url使用

????????引入url模块

let url = require('url');

? ? ? ? url.parse

let str = 'https://www.baidu.com/qqq?w=123&x=abc&name=baidu#hash';
console.log(url.parse(str)) // 里边的query是前端传给后台的 search部分； query只是一个字符串
console.log(url.parse(str,true))// 这时的 query就变成了一个对象；
console.log(url.parse(str,true).query.name)

?3.path?主要用来处理路径问题

????????引入path模块

let path = require('path');

????????path.resolve

console.log('resolve结果：',path.resolve('./qqq','www'));// 根据当前路径和参数 
拼接出参数的绝对路径 C:\Users\T\Desktop\WebstormProjects\untitled\js\node\qqq\www

????????path.join

console.log('join结果:',path.join('./qqq','www','eee'));// 参数拼接成路径 qqq\www\eee
console.log('join__dirname:',path.join(__dirname,'qqq','www'))

4.http?是一个起服务的模块

????????引入http模块

let http = require('http');

? ? ? ? http基础用法

    let http = require('http');
    http.createServer(()=>{

    }).listen(端口号,()=>{
      
    })

? ? ? ? ?http定义接口

文档结构：static中保存的是静态页面结构，index.html文档引入了css，js文件,所以要想在页面展示完整的静态页面，所以处理html，还会请求其所引入的css和js文件

?

let http = require('http');
let { readFile } = require('./js/promiseFs.js');
let url = require('url');
http.createServer((request, response) => {
  // 前端向我们后端发送请求的时候 会执行这个回调函数；
  //request 存放的是请求信息
  //response 存放的是响应信息；

  // 若想在前端展示页面 则 前端 请求内容时 我们给前端 html文档
  // 需要我们后端把html文档读出来 然后发给前端；
  // readFile('./static/index.html').then(data => {
  //   // data 就是 读出来的html文档的内容；
  //   response.end(data); 响应，想前端发送响应的数据
  // })
  // 真实情况应该是 前端要什么文件 我们给什么文件 
  console.log(request.url)// 前端的请求路径； 根据这个 我么你来判断给前端什么内容
  switch (request.url) {
    case '/':
      readFile('./static/index.html').then(data => {
         // 这是前端给后端的响应 参数就是响应信息
        // data 就是 读出来的html文档的内容；
        response.end(data);
      })
      break;
    case '/index.css':
      readFile('./static/index.css').then(data => {
        response.end(data)
      })
      break;
    case '/index.js':
      readFile('./static/index.js').then(data => {
        response.end(data)
      })
      break;
    case '/result.png':
      readFile('./static/result.png').then(data => {
        response.end(data)
      })
      break;
    case '/favicon.ico':
      readFile('./static/favicon.ico').then(data => {
        response.end(data)
      })
      break;
    default:
      response.end('666')
      break;
  }

}).listen(8889, function () {
  console.log('服务启动成功 端口是8889')
})

精简一下上面的代码

let http = require('http');
let { readFile } = require('./js/promiseFs.js');
let url = require('url');// 专门用来解析路径的；
http.createServer((request, response) => {
  // console.log(request.url)
  // console.log(url.parse(request.url,true))
  let {pathname} = url.parse(request.url,true);//pathname 这个属性 是不带 参数的
  if(pathname == '/'){
    readFile('./static/index.html').then(data => {
      // data 就是 读出来的html文档的内容；
      response.end(data);
    }).catch(err=>{
      // 若后端出现问题 则 返回前端500的错误
      response.statusCode = 500;
      response.statusMessage = 'hahaha';
      response.end('error');
    })
  }else{
    readFile('./static'+pathname).then(data => {
      response.end(data)
    }).catch(err=>{
      // 若后端出现错误 则 返回前端404的错误
      console.log(err)
      response.statusCode = 444;
      response.statusMessage = 'not found';
      response.end('error');
    })
  }

}).listen(8889, function () {
  console.log('服务启动成功 端口是8889')
})

接下来实现前端页面想后端请求数据

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css?qweqew">
  <link rel="stylesheet" href="./css/1.css">
</head>
<body>
  <h1>哈哈哈</h1>
  <img src="./result.png?ergdgd" alt="">
  <img src="./favicon.ico?dgdgdg" alt="">

  <input type="text" id='todo'>

  <button id='btn'>按钮</button>

  <ul id='ul'>
    <li>12313</li>
  </ul>


  <script src="./index.js?ergdgdgd"></script>
  <script src="./index2.js"></script>
</body>
</html>

index.js

let btn = document.querySelector('#btn');
点击按钮后发送ajax请求，将input框中的数据添加到后端的数据中
btn.onclick = function(){
    // todo input标签的id
  let val = todo.value;
  todo.value = '';
  let xhr = new XMLHttpRequest;
    // 将input中的值当作url中的参数传递，添加到list的数据中
  xhr.open('get','/add?val='+val);
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      console.log(xhr.response)
        // 数据改变后重新获取数据
      render();
    }
  }
  xhr.send();
}

发送ajax请求list中的数据
function render(){
  let xhr = new XMLHttpRequest;
  xhr.open('get','/list');
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
      let str = '';
      let ary = JSON.parse(xhr.response);
      ary.forEach(item=>{
        str += `<li>${item}<button>X</button></li>`
      })
      ul.innerHTML = str;
    }
  }
  xhr.send();
}
render();

后端实现

let http = require('http');
let { readFile,writeFile } = require('./js/promiseFs.js');
let url = require('url');// 专门用来解析路径的；
http.createServer((request, response) => {
  // console.log(request.url)
  // console.log(url.parse(request.url,true))
  let {pathname,query} = url.parse(request.url,true);//pathname 这个属性 是不带 参数的
  // console.log(query)
  if(pathname == '/'){
    readFile('./static/index.html').then(data => {
      // data 就是 读出来的html文档的内容；
      response.end(data);
    }).catch(err=>{
      // 若后端出现问题 则 返回前端500的错误
      response.statusCode = 500;
      response.statusMessage = 'hahaha';
      response.end('error');
    })
  }else{
    // 当前端的请求路径是/list的时候 我们后端要把data/list.json 中的内容返给前端；
    // 路径行带后缀的 我们正常读取staic中的内容
    // 我们请求list 是不带后缀的 我们去data文件夹中获取
    if(/\.\w+/.test(pathname)){
      // 有后缀的
      readFile('./static'+pathname).then(data => {
        response.end(data)
      }).catch(err=>{
        console.log(err)
        response.statusCode = 444;
        response.statusMessage = 'not found';
        response.end('error');
      })
    }else{
      // 当前端 调用 add接口时  我们后端 1 怎么获取前端传递的参数 ？
      // 2 拿到传递的参数之后 怎么写入到list.json中？
      switch (pathname) {
        case '/add':
          // console.log(query.val)// 可以获取前端传递的参数
          // response.end('666')
          readFile('./data/list.json').then(data=>{
            // data 是读取到的json文件中的数据 是一个json字符串
            data = JSON.parse(data);//把data从字符串转成了数组
            data.push(query.val);// query.val获取url中的参数，是一个对象，再把修改之后的数组写入到JSON文件中
            writeFile('./data/list.json',JSON.stringify(data)).then(data=>{
              // 走到这里才是写入成功了
                // response.end 返回的必须是一个字符串
              response.end(JSON.stringify({
                code:0,
                msg:'你成功了'
              }))
            }).catch(err=>{
              console.log(err);
              
            })
          })
          break;
        case '/list':
          readFile('./data'+pathname+'.json').then(data=>{
            response.end(data)
          })
          break;
        default:
          break;
      }
      
    }
    
  }

}).listen(8889, function () {
  console.log('服务启动成功 端口是8889')
})