get请求和post请求

作为一个刚学前端的小白，刚刚接触node.js，所以想要在这里记录一下自己每天所学，总结一下知识，方便自己回顾。如果有错，还请大佬指教，先感谢。

get 和post就是用于前端发起数据请求的两种请求方式，在写关键代码之前我们先把准备工作做好。

首先，新建一个文件夹，右击文件夹选择在集成终端中打开，进入到终端，先输入npm init 初始化会看到以下一些代码：（当然他们是一行行出现需要你自己输入设置的）

关键的就是package name :包名，设置你的包名称，entry point:入口文件，在此你设置的是什么，在该文件夹下需要创建相同的文件，二者必须一致，其他项想要设置也可以输入，完成之后直接enter就会看到左边的文件夹下已经创建了package.josn文件。

然后在终端输入npm install express，下载一个数据请求模块，创建完成之后你可以看到左边的文件夹下自动出现了node_modules文件，OK，目前你已经完成了准备工作。

然后在index,js中写入以下代码，（index.js属于后台代码）

//引入数据请求基础模块
var express = require('express')

//创建数据请求实例对象
var web = express()

//使用静态资源文件夹public 让所有前端代码放入到这个文件夹下，
允许这个文件夹以内的请求来访问后台接口
 不在这个文件里面的接口不允许访问后台接口
web.use(express.static('public'))

//设置接口  req是前端发过来的请求，res是后端返回给前端的数据
//注意后台必须给前端返回数据哪怕返回空也要返回
// get就是get请求方式
web.get('/login',function(req,res){
  //req.query用来查询前端发送过来的数据
console.log(req.query.account);
//每一个接口必须返回数据，而且只能返回一次数据
res.send("登录成功:账号是："+req.query.account+"密码是："+req.query.password)
})
//使用post请求需要写下面两行代码,该模块用来解析post请求的数据
var bodyParser=require('body-parser')
web.use(bodyParser.urlencoded({extended:false}))

web.post("/getinfo",function(req,res){
  console.log(req.body);
res.send("今天很开心")
})
//设置监听的端口
web.listen('3000',function(){
  console.log("3000端口启动");
})

在public文件夹下创建index.html文件，写入前端页面代码

 <!-- action设置路径 -->
  <!-- name属性给服务器提供唯一标识 -->
  <!-- 默认请求方式为get -->
  <form action="/login">
    <label for="">账号：
      <input type="text" name="account">
    </label>
    <label for="">密码：
      <input type="text" name="password">
    </label>
    <input type="submit" value="登录">
  </form>
  <hr>
  <!-- method方法，此处使用post数据请求方式 -->
  <form action="/getinfo" method="POST">
      <label for="">填写信息:</label>
      <input type="text" name="info">
      <br>
      <input type="submit" value="查询">
  </form>

get请求和post请求的区别

 1.get请求会将参数放在URL当中，直接可见，数据不安全 。   

 post请求将参数放在 请求体 当中 ，不可直接看见，相对来说，更加安全

 因此在做登录 ，支付 ，等涉及到隐私信息功能的时候 ，要用post

2.浏览器当中的url的大小不能超过1KB ，get请求参数放在url当中 ，因此get不能超过1KB ，

 post没有限制，因此上传头像 ，文件等操作的时候 ，只能用post

以上是使用form表单发起的数据请求，但是form表单具有一定的局限性，因此可以用XML方法来发起数据请求

 <button onclick="clickGet()">发送get请求</button>

  <button onclick="clickPost()">发送post请求</button>
   <script>
       function clickGet(){
          //  原生js 发起数据请求
          // 创建一个数据请求对象
          var xhr = new XMLHttpRequest()
          // 设置请求方式 以及 请求接口 和 请求参数
          // 地址和参数之间用?隔开
          // 参数和参数之间用&给开
          xhr.open("get" , '/info?name=张三&age=14')
          // 发送数据请求
          xhr.send()

          // 接受------------------------------

          xhr.onreadystatechange = function(){
              if(xhr.readyState == 1){
                  console.log('send方法已经调用 服务器还未接受');
              }
              if(xhr.readyState == 2){
                  console.log('数据已经传递到服务器，但是服务器还未返回数据');
              }
              if(xhr.readyState == 3){
                  console.log('服务器开始返回部分数据');
              }
              if(xhr.readyState == 4){
                  console.log('服务器返回全部数据');
                  console.log(xhr.response);
              }                      
          }
       }
   
       function clickPost(){
          // 创建一个数据请求对象 
          var xhr = new XMLHttpRequest()
          xhr.open('post' , '/message')
          // xhr的post请求 在发送的时候需要设置一下 请求头类型
          xhr.setRequestHeader("Content-Type" , 'application/x-www-form-urlencoded')
          xhr.send('fond=吃鸡&friend=刘诗诗')
          
          xhr.onreadystatechange = function(){
              if(xhr.readyState == 4){
                  console.log(xhr.response);
              }
          }
       }
   </script>

//引入expres模块
var express = require('express')
//创建数据实例对象
var web=express()

var bodyParser = require('body-parser')
web.use(bodyParser.urlencoded({extended:false}))

//创建静态文件夹用来放前端代码
web.use(express.static('public'))

web.get('/info',function(req ,res){
  console.log(req.query);
  res.send('中意你')
})

web.post('/message',function(req ,res){
  console.log(req.body);
  res.send("你好" + req.body.friend)
})

//设置端口号
web.listen("8080",function(){
  console.log("8080启动成功......")
})

总结：前端设置请求方式，后端接收前端发送的请求并且给前端返回数据