url和querystring的使用

url模块和querystring模块

url模块：能够解析req.url的模块

url.parse语法：

​ url.parse(‘解析的URL字符串’，‘query属性是否解析为对象’);

第一个参数：表示要解析的URL的字符串

第二个参数：表示是否要将这个URL中的query属性值解析为对象，默认是false，即query的属性值是一个查询字符串，设置为true，则会把这个查询字符串转成对象。

为什么设置true就能将查询字符串转成对象呢？

​ 答：因为第二个参数设置为true，那么url模块就会默认调用querystring的paese的方法，将查询字符串转成对象，url模块本身是不能将query的属性值转成对象。

url.parse的使用

获取请求的内容：

​ let id = url.parse(req.url,true).query;

获取查询字符串中的id：

​ let id = url.parse(req.url,true).query.id;

模块化的分类

什么叫模块

模块：在node中，模块指的是一个独立的js文件

特点：

​ 1.每个模块都有一个独立的作用域

​ 2.当前模块中的变量，在其他的模块引入时不能访问

如何解决不能访问模块中的变量？

答：设置导出项

前端使用的模块

前端使用的模块是require.js

请查看前端模块化！！！

nodejs模块化的分类

分类：核心模块，第三方模块，自定义模块

核心模块：node本身提供的内部模块，在node文档中能够查找到的模块，例如：fs、path、http等

引入：const 名称 = require(‘模块名称’);

第三方模块：通过npm i 等方式下载的模块，存放在node_modules文件夹中。例如：mime、art-template、jquery等

引入：const 名称 = require(‘模块名称’);

自定义模块：自己编写的js模块

引入：const 名称 = require(’./模块名称’);

注意点：核心模块和第三方模块可以直接通过require标签引入，自定义模块引入必须要写路径符号，即使同级目录下也不可省略./

问题：如果引入自定义模块，不写路径符号会怎么样？

答：引入自定义模块，如果没写路径符号，nodejs会先按照核心模块去查找，再按照第三方模块去查找，如果都没有，那么就会报错。

路由

定义：其实就是一套匹配的规则， 用于分配任务的

应用：根据不同的请求，返回不同的页面，这个过程简称为路由选择

例如hackerNews1.0

 if(req.url.startsWith('/index')||req.url=='/'){ //读取index页面
    fs.readFile(path.join(__dirname,'views','index.html'),(err,data)=>{
      if(err){
        return console.log('查找文件失败',err)
      }
      res.end(data)
    });
  }else if(req.url.startsWith('/details')){  //读取details页面
    fs.readFile(path.join(__dirname,'views','details.html'),(err,data)=>{
      if(err){
        console.log('查找文件失败',err)
      }
      res.end(data);
    });
  }else if(req.url.startsWith('/submit')){  //读取submit页面
    fs.readFile(path.join(__dirname,'views','submit.html'),(err,data)=>{
      if(err){
        return console.log('查找文件失败',err)
      }
      res.end(data);
    });
  }else{
    res.end('404');
  }
  

hackerNews2.0

1.首页

​ 1.读取data.json文件

​ 2.将json格式的字符串转成对象处理(JSON.parse())

​ 3.使用模板引擎，将data对象和模板绑定生成数据结构

​ 4.将数据结构返回给浏览器进行解析

    fs.readFile(path.join(__dirname,'data','data.json'),'utf-8',(err,data)=>{
      if(err){
        return console.log('读取文件失败',err)
      }
      //将json字符串转为对象
      data = JSON.parse(data)
      console.log(data)
      
      //按照id排序
      data.list.sort((a,b)=>b.id - a.id);

      //将模板和数据绑定
      let str = template(path.join(__dirname,'views','index.html'),data);
      res.end(str);
      // res.end(data);
    });

2.详情页

​ 1.获取传过来的id

​ 2.读取data.json文件

​ 3.将json格式的字符串转成对象处理

​ 4.查找对应id的数据，并保存

​ 5.将该条数据绑定到模板中生成数据结构

​ 6.将该结构返回给浏览器

    //获取传来的id
    let id = url.parse(req.url,true).query.id;
  
    console.log(id)

    //读取文件
    fs.readFile(path.join(__dirname,'data','data.json'),'utf-8',(err,data)=>{
      if(err){
        return console.log('读取文件失败',err)
      }
      //将data的json字符串格式转为对象
      data = JSON.parse(data);
      //打印对象
      console.log(data)

      //使用find查找符合条件的元素
      data = data.list.find(v=> v.id == id);
      //打印符合条件的数据
      console.log(data)

      // 将数据绑定到模板当中渲染结构
      let str = template(path.join(__dirname,'views','details.html'),data);

      //将结构返回给浏览器
      res.end(str);
    });

3.处理静态资源

​ 1.根据req.url读取对应的的文件

​ 2.设置响应头的content-type的属性(mime)

​ 3.将读取的数据返回给浏览器

//响应其他的请求
    fs.readFile(path.join(__dirname,req.url),(err,data)=>{
      if(err){
        return console.log('读取其他文件出错',err)
      }
      res.setHeader('content-type',mime.getType(req.url));
      res.end(data);
    });

4.添加思路

​ get请求

​ 1.首先获取地址栏中的查询字符串，并将其转成对象保存为info

​ 2.读取data.json文件

​ 3.将json字符串转成对象

​ 4.设置info的id

​ 5.将info保存到data中的list的数组中

​ 6.将data对象转成json字符串

​ 7.将data重新写入到data.json文件中

​ 8.保存成功设置响应码和响应头

​ 9.返回响应结束标志

//使用url模块的方法，将数据取出
    let info = url.parse(req.url,true).query;

    console.log(info)

    //获取数据库中的数据
    fs.readFile(path.join(__dirname,'data','data.json'),'utf-8',(err,data)=>{
      if(err){
        return console.log('获取数据出错啦',err)
      }
      //将json格式的数据转为数组
      data = JSON.parse(data);

      //给info添加id
      info.id = data.list[data.list.length-1].id+1;

      console.log(info)

      //添加数据到数组中
      data.list.push(info);

      //将data转为json字符串保存到文件中 同时设置缩进2个字符
      data = JSON.stringify(data,null,2);   
      
      fs.writeFile(path.join(__dirname,'data','data.json'),data,err=>{
        if(err){
          return console.log('写入文件失败',err)
        }

        //设置响应码
        res.statusCode = 302;

        //设置响应头
        res.setHeader('location','/index');
        //设置响应完成的标志
        res.end();
      });
    });

​ post请求

​ 1.准备一个空的字符串变量info，用来存储接收的数据

​ 2.給req注册data事件，通过chunk来拼接数据

​ 3.给req注册end事件，后续的操作基于req的end事件中执行

​ 4.将完整的查询字符串info转为对象

​ 5.读取data.json文件

​ 6.将json字符串转成对象

​ 7.设置info的id

​ 8.将info保存到data中的list的数组中

​ 9.将data对象转成json字符串

​ 10.将data重新写入到data.json文件中

​ 11.保存成功设置响应码和响应头

​ 12.返回响应结束标志

 //准备一个空对象
    let str = "";
    //给req注册data事件，只要上传数据，data就会触发，chunk表示每次post发送的数据模块
    req.on('data',(chunk)=>{
      str += chunk;
    })

    //当数据发送完成完成后触发end事件
    req.on('end',()=>{
      //通过querystring的parse的方法，将post上传的数据转换为对象
      info = querystring.parse(str)
      //打印输出这个对象
      console.log(info)

      // 获取数据库中的数据
      fs.readFile(path.join(__dirname,'data','data.json'),'utf-8',(err,data)=>{
        if(err){
          return console.log('读取文件失败',err)          
        }
        //将获取到的json字符串转为数组
        data = JSON.parse(data);

        //给info添加id
        info.id = data.list[data.list.length-1].id+1;

        console.log(info)
        
        //将info添加到数组中
        data.list.push(info);

        //将数组转为json字符串
        data = JSON.stringify(data,null,2);
        //将data写入到data.json文件中
        fs.writeFile(path.join(__dirname,'data','data.json'),data,err=>{
          if(err){
            return console.log('使用post添加数据失败',err)
          }

          //设置响应码
          res.statusCode= 302;

          //设置响应头
          res.setHeader('location','/index');

          //设置响应结束
          res.end();
        });
      });
      
    });

5.封装读取/写入文件的函数

封装的读取文件的函数

​ 1.封装函数的名称为：readData(callback){}

​ 2.读取data.json文件

​ 3.将读取的数据转成对象

//封装读取的函数
function readData(callback) {

  fs.readFile(path.join(__dirname,'data','data.json'),'utf-8',(err,data)=>{
    if(err){
      return console.log('读取文件失败',err)
    }
    //将json字符串转为对象
    data = JSON.parse(data);
    //如果传入回调函数，则调用回调函数，否则不调用
    callback && callback(data);
  });
}

封装写入文件的函数

//封装写入的函数
function writeData(data,callback) {
  fs.writeFile(path.join(__dirname,'data','data.json'),data,err=>{
    if(err){
      return console.log('写入文件失败',err)
    }
    callback && callback(data);
  });
  
}

JSON.parse/JSON.stringify/get请求/post请求的补充

JSON.parse

JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

语法：JSON.parse(text[, reviver])

例如：let str = JSON（jsonStr，function(k,v){}）

第一个参数：**text:**必需， 一个有效的 JSON 字符串。

第二个参数：reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。（可以理解为回调处理函数，对象的每个属性）

直接将JSON字符串转成js对象

 	//准备的json字符串
    let jsonStr = '{"0":0,"1":1,"2":2,"3":3}';
    //打印输出这个字符串
    console.log(jsonStr)
    //将json字符串直接转成js对象，不做任何处理
    let jsonParse = JSON.parse(jsonStr)
    //打印输出结果
    console.log(jsonParse)

对处理转换后的对象

let jsonStr = '{"0":0,"1":1,"2":2,"3":3}';
    //打印输出这个字符串
    console.log(jsonStr)

    //准备属性的数组
    let arrK = [];
    //准备属性值的数组
    let arrV = [];
    //将json字符串转成对象，再将对象中的属性保存到数组中，将属性值保存到数组中
    //
    let str2 = JSON.parse(jsonStr, function (k, v) {
      //将对象中的属性保存到数组中
      arrK.push(k);
      // console.log(k)
    
     //将属性值保存到数组中
     arrV.push(v);

    });
    console.log(arrK) //["0", "1", "2", "3", ""]

    console.log(arrV) //[0, 1, 2, 3, {}]

    console.log(str2) //undefined

json.stringify

语法：

json.stringify(value,[,replace],[space])

• value:

  必需， 要转换的 JavaScript 值（通常为对象或数组）。

• replacer:

  可选。用于转换结果的函数或数组。

  如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

  如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。

• space:

  可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

常用的应用方式：

let obj = {
    name: '涛涛',
    age: 38,
    sex: '男',
    hobby: '鹏鹏',
    car: {
        brand: 'forever',
        color: 'green',
        pirce: 9.98
    }
}
// 转成json字符串 
// console.log(JSON.stringify(obj));
// JSON.stringify(要转换的数据, 处理函数, 格式化缩进空格个数);

console.log(JSON.stringify(obj, null, 2));

get请求和post请求的区别

get 在url后面拼接数据

特点：

​ 1.数据量小 ，

​ 2.不安全 ，

​ 3.速度快

方式：www.taobao.com ? page = 3

post

特点：

​ 1.数据放在请求主体里面

​ 2.对上传数据量没有限制

​ 3.相对安全

​ 4.速度相对于get请求慢