Node之处理Get与Post请求

文章目录

1. 关键知识点简介

GET请求用url模块的parse方法解析request.url获取参数
POST请求用request.on监听数据的接收，因为post数据是多段分发的，不像GET请求直接发送一段字符串，post数据是异步接收的，我们必须等到post数据接收完成之后再进行处理。

2. 本文最终的目录结构

windows、linux如何自动生成目录结构：点击查看

│  get.js                          ----------- 处理get请求
│  index.js                        ----------- 用户注册登录验证案例
│  post.js                         ----------- 处理post请求
│  postGet.js                      ----------- 同时处理get和post请求
│  staticServer.js                 ----------- 静态服务器模块
│  
├─public                           ----------- 存放mime.json
│      mime.json
│       
└─static                           ----------- 静态文件根目录
        form.html                  ----------- form表单：用户注册（POST方式）
        form1.html                 ----------- form表单：用户登录（GET方式）
        postGet.html               ----------  form表单（GET和POST数据同时发送）
        index.css
        index.html                 ----------- 用户登录注册首页（ajax发送）
        index.js
        jquery-3.1.1.min.js
        post.html                  ----------- post.js所需的表单

这里不会讲解node静态服务器的搭建，如果想学习请看我上一篇文章：Node之搭建静态服务器

3. 处理GET请求

新建一个get.js文件：

const http = require('http');
const url = require('url');

http.createServer( (req, res) => {
   
   

  if(req.url === '/favicon.ico') {
   
   
    res.end();
    return
  }

  console.log("req.url === > ", req.url);

  // get 数据处理
  console.log(url.parse(req.url))
  
  let {
   
   query:{
   
   a, b} } = url.parse(req.url, true);
  console.log("a === ", a);
  console.log("b === ", b);
  
  res.end("{code: 0}");     

}).listen(8080, ()=>{
   
   
  console.log('running...');
})

node get启动服务器，在网页访问 http://localhost:8080/?a=1&b=2 ，服务端打印结果如下：

可以看到，request.url是查询字符串，而url.parse(request.url)将查询字符串转换成对象的形式，最后我们想要的是对象里边的query属性，因此我们用ES6的对象解构语法将参数a和参数b给解构出来。不熟悉ES6请看：ES6学习地址
因此，get数据的处理就是通过url模块的parse方法，将字符串转换成对象，再通过query属性拿到参数。

4. 处理POST请求

新建一个post.js文件：

const http = require('http');
const querystring = require('querystring');

http.createServer( (req, res) => {
   
   

  if(req.url === '/favicon.ico') {
   
   
    res.end();
    return
  }

  console.log("req.url === > ", req.url);

  // post 数据处理
  let str = '';
  req.on('data', chunk => {
   
   

    str += chunk  //数据拼接

  })

  req.on('end', () => {
   
   

    console.log("post数据接收完毕");
    let {
   
   a, b} = querystring.parse(str);

    console.log('a====>',a);
    console.log('b====>',b);
  })
  
  res.end("{code: 0}");     

}).listen(8080, ()=>{
   
   
  console.log('running...');
})

static文件夹下，新建一个post.html文件，用来模拟post数据发送：

<!--body内容-->
<form method="POST" action="http://localhost:8080/index">
    <div>
      <input type="text" name="a">
    </div>
    <div>
      <input type="text" name="b">
    </div>
    <button type="submit">提交</button>
</form>

node post启动服务器，接着浏览器打开post.html，输入内容点击提交，将POST数据提交到刚刚运行的本地服务器里让其进行处理：

服务端打印结果：

可以看到此时request.url里面就不包含查询字符串了，因为查询字符串被放到了请求体里，在post.js中：

过滤掉favicon.ico的影响
request.on(“data”, function)的方式不断接收分段发送的POST数据，最后将结果存放到一个变量str中
request.on(“end”, function)的方式处理客户端发送过来的POST请求，end表示数据已经接收完毕。接下来的处理跟GET请求的处理大同小异，只是换了个模块而已，通过querystring模块的parse方法将str转换成对象，再取里面的值即可。
response.end()方法结束请求。

5. GET请求与POST请求处理的区别

如下图所示

6. 同时处理POST与GET请求

新建一个postGet.js文件：

const http = require('http');
const querystring = require('querystring');
const url = require('url');

http.createServer( (req, res) => {
   
   

  if(req.url === '/favicon.ico') {
   
   
    res.end();
    return
  }

  // get 数据处理
  let {
   
   query:{
   
   c, d} } = url.parse(req.url, true);
  console.log("c === ", c);
  console.log("d === ", d);


  // post 数据处理
  let str = '';
  req.on('data', chunk => {
   
   

    str += chunk

  })

  req.on('end', () => {
   
   

    console.log("post数据接收完毕");
    // console.log("str====>", str);

    let {
   
   a, b} = querystring.parse(str);
    
    console.log('a====>',a);
    console.log('b====>',b);
  })
  
  res.end("{code: 0}");     

}).listen(8080, ()=>{
   
   
  console.log('running...');
})

static下新建一个postGet.html文件：

<!--body内容-->
<form method="POST" action="http://localhost:8080/index?c=111&d=222">
  <div>
    <input type="text" name="a">
  </div>
  <div>
    <input type="text" name="b">
  </div>
  <button type="submit">提交</button>
</form>

在postGet.html里同时发送GET和POST请求，直接在form表单的action属性添加查询字符串?c=111&d=222发送GET请求，method设置为POST发送表单数据(POST请求)。

在postGet.js中，我们按照上文所讲的处理方式对POST请求与GET请求进行不同的处理。

浏览器运行postGet.html，填写如下内容：

点击提交，可以看到服务端打印结果：

7. form表单实现注册与登录功能

新建一个处理注册与登录的程序入口index.js:

const http = require('http');
const querystring = require('querystring');
const path = require('path');
const url = require('url');
const staticServer = require('./staticServer');

// 模拟已注册用户
let user = {
   
   
  zhangsan: '123456',
  lisi: 'root',
}


http.createServer( (req, res) => {
   
   
  if(req.url === '/favicon.ico') {
   
   
    res.end();
    return
  }

  // 处理get数据
  let {
   
   pathname, query: {
   
   name, password}} = url.parse(req.url, true);
  console.log('name====>',name);
  console.log('password====>',password);


  // 处理post数据
  let data = '';
  req.on('data', chunk => {
   
   
    data += chunk;
  })
  // 数据接收完毕
  req.on('end', () => {
   
   

    let {
   
   name: post_name, password: post_password} = querystring.parse(data);
    console.log('post_name====>', post_name);
    console.log('post_password====>', post_password);


    // 响应头 主要为了解决乱码问题
    res.writeHead(200, {
   
    'Content-Type': 'text/plain; charset=utf-8' });
    if(pathname === '/login'){
   
   

      if(user[name] && user[name] === password){
   
   
        res.end('{"code": 0, "message":"登录成功"}');
      }else {
   
   
        res.end('{"code": 1, "error":"用户名或密码错误"}');
      }

    }else if(pathname === '/register'){
   
   

      
      if(!post_name || !post_password){
   
   
        res.end('{"code": 1, "error":"用户名或密码为空"}');
      }else if(user[post_name]){
   
   
        res.end('{"code": 1, "error":"用户名存在"}');
      }else{
   
   
        res.end('{"code": 0, "message":"注册成功"}');
        // 存进用户列表
        user[post_name] = post_password;
      }
    }else{
   
   
      staticServer(req, res, path.join(__dirname, 'static'));
    }
  })


}).listen(8080, () => {
   
   
  console.log('running...');
})

7.1 功能点分割

模块引入：

分别是http（启动服务器）、querystring（处理POST请求）、path（静态服务器的根目录拼接）、url（处理GET请求）、staticServer(自定义静态服务器模块)。

模拟数据库用户数据：

这里定义了一个user对象，存放两个用户(用户名和密码)，可以模拟数据库已经存放的数据，用于验证。

解析数据：

POST请求用querystring模块解析，GET请求用url模块解析

设置响应头：

为了防止中文乱码，我们需要设置响应头的编码格式为utf8

根据不同行为执行不同处理：

本文定义状态码0为成功，1为失败

如果请求路径是/login，则进行登录验证处理，若用户存在且密码正确，则返回成功信息，否则发送失败信息。
如果请求路径是/register，则进行用户注册，若用户已经存在与user，则返回用户名已存在，注册失败。否则返回注册成功信息，并将用户信息添加至user。
如果请求路径并非前面两种，则默认让其访问静态服务器staticServer，成功则将静态数据展示到网页，失败则返回404页面。
其他：
另一方面，细心的人可能还注意到，这里还对了post的name和password进行了重命名，这是为了防止与上面的GET的参数命名冲突。

接下来新建一个用来用户注册的form.html:

<!--body内容-->
<form method="POST" action="http://localhost:8080/register">
  <div>
    用户名:<input type="text" name="name">
  </div>
  <div>
    密码:<input type="text" name="password">
  </div>
  <button type="submit">提交</button>
</form>

和用来用户登录的form1.html:

<!--body内容-->
<form method="GET" action="http://localhost:8080/login">
 <div>
    用户名:<input type="text" name="name">
  </div>
  <div>
    密码:<input type="text" name="password">
  </div>
  <button type="submit">提交</button>
</form>

7.2 form表单实现注册与登录功能效果展示

node index启动服务器。

首先我们先进行登录验证，由于在index.js中我们已经定义了一个user对象，因此我们可以将user里面的默认数据用来进行登录验证，首先访问我们的首页index.html，如下：

访问localhost:8080/form1.html访问登录页：

用户名输入zhangsan，密码输入123455，点击登录可以看到返回结果：

再用一个不存在的用户数据验证：

接下来进行用户注册，访问localhost:8080/form.html访问注册页：

先注册一个用户名已存在的用户，密码任意，点击提交，可以看到返回结果：

然后注册一个不存在的用户，这里注册用户名wangwu，密码123，返回结果：

接着用我们刚注册的用户信息进行登录：

在这，我们的注册登录功能就已经基本实现了，接下来我们再讲讲ajax发送请求。

8. AJAX实现注册与登录功能

首先我们把静态服务器那一章的三个静态文件index.html、index.js、index.css放置到静态服务器根目录下，传送门。然后修改index.html：

<body>
  <h1>hello nodejs</h1>

  <form>
    <div>
      用户名:<input type="text" id="name">
    </div>
    <div>
      密码:<input type="text" id="password">
    </div>
    <input type="button" value="登录" id="login"/>
    <input type="button" value="注册" id="register"/>
  </form>

  <script src="./index.js"></script>
  <script src="./jquery-3.1.1.min.js"></script>
  <script>

    $('#register').on('click', () => {
    
     
      $.ajax({
    
     
        method: 'POST',
        url: "http://localhost:8080/register",
        data: {
    
     name:$("#name").val(), password:$("#password").val()}, 
        dataType: 'json',
        success:(data) => {
    
     
          console.log("data====>",data);
        },
        error: (err) => {
    
     
          console.log("err====>",err);
        }
      })
    })

    $('#login').on('click', () => {
    
     
      $.ajax({
    
     
        method: 'GET',
        url: "http://localhost:8080/login",
        data: {
    
     name:$("#name").val(), password:$("#password").val()}, 
        dataType: 'json',
        success:(data) => {
    
     
          console.log("data====>",data);
        },
        error: (err) => {
    
     
          console.log("err====>",err);
        }
      })
    })

  </script>
</body>

这里要注意form表单可有可无，而且必须将登录和注册按钮的type设置成button而不是submit，不然它会发送两次请求！一次是form表单submit的默认请求，一次是我们自定义的ajax请求。
我们设计的注册采取的是POST请求，注册则采用GET，因此在发送AJAX请求时要设置metho。

8.1 AJAX实现注册与登录功能演示效果

再输入一个不存在的用户名验证错误数据：

接着我们注册用户：
首先我们输入一个已经存在的用户名进行注册：

然后我们用没注册过的用户名注册，并进行登录：

码了7400+个字总结，肝了好多个小时，如果对您有帮助，可以一键三连或点个赞支持一下噢！谢谢您的支持！祝您生活愉快，幸福美满！

Node之处理Get与Post请求

文章目录

1. 关键知识点简介

2. 本文最终的目录结构

3. 处理GET请求

4. 处理POST请求

5. GET请求与POST请求处理的区别

6. 同时处理POST与GET请求

7. form表单实现注册与登录功能

7.1 功能点分割

7.2 form表单实现注册与登录功能效果展示

8. AJAX实现注册与登录功能

8.1 AJAX实现注册与登录功能演示效果

OCP 071中文考試題庫-第6題

【JQuery框架】五大選擇器“全家桶”詳解！！！

Node之處理Get與Post請求

小程序列表修改條目中屬性後，頁面不能動態更新問題

一篇文章帶你喫透什麼是第三方支付

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結