如何用nodejs实现前后端传值？

nodejs前后端传值即前后端的数据交互，nodejs中的数据提交有两种方式GET方法和POST方法，下面我们来看一下如何使用这两种方法实现nodejs前后端的传值。

nodejs实现前后端传值的方法如下：

1、使用GET方式实现前后端数据提交：

GET方式数据放在url里进行提交，容量有限，有缓存

//GET表单.html
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="http://localhost:8080/aaa" method="get">
    用户：<input type="text" name="user"><br>
    密码：<input type="password" name="pwd"><br>
    <input type="submit" value="submit">
  </form>
</body>
</html>

Node服务器获取用户名与密码

//get_server.js
 
const http=require('http');
const url=require('url');
 
createServer((req,res)=>{
  let query=url.parse(req.url, true);
  console.log('user:'+query.user+',password:'+query.pwd)
}).listen(8080)

url.parse解析的是整个url

url.parse(req.url, true)打印出来的内容：
 
Url {
  protocol: null,
  slashes: null,
  auth: null,
  host: null,
  port: null,
  hostname: null,
  hash: null,
  search: '?user=123&pwd=2345',
  query: { user: '123', pwd: '2345' },
  pathname: '/aaa',
  path: '/aaa?user=123&pwd=2345',
  href: '/aaa?user=123&pwd=2345' }

2、使用POST方式实现数据提交：

POST方式数据放在http-body里，容量较大，无缓存

//post表单.html
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="http://localhost:8080/aaa" method="POST">
    用户：<input type="text" name="user"><br>
    密码：<input type="password" name="pwd"><br>
    <input type="submit" value="submit">
  </form>
</body>
</html>

//post_server.js
 
const http=require('http')
const querystring=require('querystring')
 
let server=http.createServer((req,res)=>{
  let str='';
  req.on('data',data=>{
    str+=data;
  })
  req.on('end',()=>{
    let post=querystring.parse(str);
    console.log(str,post)
  })
  res.end()
})
server.listen(8080)

例：

简单地登录注册提交与数据校验

//index.html
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-3.3.1.js"></script>
  <script src="sub.js"></script>
</head>
<body>
  用户名：<input type="text" id="user"><br>
  密  码：<input type="password" id="pwd"><br>
  <button id="btn1">注册</button>
  <button id="btn2">登录</button>
</body>
</html>

//sub.js
 
$(()=>{
  $('#btn1').click(()=>{
    $.ajax({
      url:'/reg',
      type:GET,
      data:{user:$('#user').val(),pwd:$('#pwd').val()},
      dataType:'json',
      success(data){
        if(data.err){
          alert('错误'+data.msg)
        }else{
          alert('注册成功')
        }
      },
      error(){
        alert('出错了')
      }
    })
  });
  $('#btn2').click(()=>{
    $.ajax({
      url:'/login',
      type:GET,
      data:{user:$('#user').val(),pwd:$('#pwd').val()},
      dataType:'json',
      success(data){
        if(data.err){
          alert('错误'+data.msg)
        }else{
          alert('登录成功')
        }
      },
      error(){
        alert('出错了')
      }
    })
  })
})

服务器端数据校验

//server.js
 
const http=require('http');
const url=require('url');
const querystring=require('querystring');
const fs=require('fs')
 
let users={
	
}
 
let server=http.createServer((req,res)=>{
  // GET
  let {pathname,query}=url.parse(req.url,true);
  // console.log(pathname)
	
  // POST
  let str='';
  req.on('data',data=>{
    str+=data;
  })
 
  req.on('end',()=>{
    let post=querystring.parse(str)
 
    let {user, pwd}=query;
 
    switch(pathname){
      case '/reg':    //注册
        if(!user){
          res.write('{"err":1, "msg":"user is required"')
        }else if(!pwd){
          res.write('{"err":1, "msg":"pwd is required"}')
        }else if(!/^\w{8,32}$/.test(user)){
          res.write('{"err":1, "msg":"invaild user"}')
        }else if(/^['|"]$/.test(pwd)){
          res.write('{"err":1,"msg":"invaild password"}')
        }else if(users[user]){
          res.write('{"err":1, "msg":"user is existed"}')
        }else{
          users[user]=pwd;
          res.write('{"err":0, "msg":"reg success"}')
        }
        res.end()
        break;	
      case '/login':    //登录
        if(!user){
          res.write('{"err":1, "msg":"user is required"')
        }else if(!pwd){
          res.write('{"err":1, "msg":"pwd is required"}')
        }else if(!/^\w{8,32}$/.test(user)){
          res.write('{"err":1, "msg":"invaild user"}')
        }else if(/^['|"]$/.test(pwd)){
          res.write('{"err":1,"msg":"invaild pwd"}')
        }else if(users[user]!=pwd){
          res.write('{"err":1, "msg":"username or password is inaccuracy"}')
        }else if(!users[user]){
          res.write('{"err":0, "msg":"user is not found"}')
        }else{
          res.write('{"err":0, "msg":"login success"}')
        }
        res.end()
        break;
      default:        //其他
        fs.readFile(`www${pathname}`,(err,data)=>{
        if(err){
          res.writeHeader(404);
          res.write('not found')
        }else{
          res.write(data)
        }
 
        res.end()
      })
				
    }
  })
})
 
server.listen(8080)

链接: https://www.fly63.com/article/detial/7723

如何用nodejs实现前后端传值？

关于 Node.js 里 ES6 Modules 的一次更新说明

用node.js开发一个可交互的命令行应用

Node启动https服务器

nodejs 异步转同步

基于node服务器的大文件（G级）上传

为什么要把 JavaScript 放到服务器端上运行？

了解node.js事件循环

Node.js 应用：Koa2 使用 JWT 进行鉴权

Node.js 前端开发指南

happypack提升项目构建速度