Node.JS入门——后台接收页面参数并保存到数据库

node.js 专栏收录该内容
2 篇文章 0 订阅




前言

在学习了nodejs和数据库mysql交互的情况下,我们来学习一下如何从页面上获取参数然后存放到数据库中,这种方式通常有两种,一种是get方式,一种是post方式

内容

背景
本篇的主要场景是获取注册中的用户名和密码,然后保存到数据库中的操作,其中保存的数据库是mysql数据库,第一步就需要下载mysql模块,关于连接mysql连接池的内容详情请看上一篇文章:
node.js入门——对mysql数据库的CRUD
开始

1.创建连接池

var mysql=require('mysql');

function OptPool(){
    this.falg=true; //是否连接过
    this.pool=mysql.createPool({
        host:'127.0.0.1',
        user:'root',
        password:'1',
        database:'test',
        port:'3306'
    });

    this.getPool=function(){
        if(this.falg){
            //监听connection事件
            this.pool.on('connection',function(connection){
                connection.query('select session auto_increment_increment');
                this.falg=false;
            })
        }

        return this.pool;
    }
}

module.exports=OptPool;

 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

2. 添加数据以及读取html方法

var OptPool=require('./OptPool');
var optPool=new OptPool();
var pool=optPool.getPool();
var fs=require('fs');
var queryString=require('querystring');
function  insertUser(data) {
    if(data.uname!==undefined&&data.pwd!==undefined){
        pool.getConnection(function(err,conn){
            if(err){
                console.log(err);
            }

            //插入方法
            var userAddSql='insert into user(uname,pwd) values(?,?)';
            var param=[data.uname,data.pwd];

            conn.query(userAddSql,param,function(err,rs){
                if(err){
                    console.log('insert err',err.message);
                    return;
                }
                console.log('insert success');
            });

        })

    }

}
function getRecall(req,res){
    res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
    function recall(data){
        res.write(data);
        res.end('');
    }
    return recall;
}
 function  readFile(path,recall) {
    fs.readFile(path,function(err,data){
        if(err){
            console.log(err);

        }else{
            console.log(data.toString());
            recall(data);
        }
    });
    console.log("异步方法执行完毕");
}
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49

读取页面HTML之后,呈现的页面是这样的
这里写图片描述

3.接收参数

  • GET请求参数接收
    html表格的method的方式是get方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
</head>
<body>
<form action="./zhuCe" method="get">
    <table align="center">
        <tr>
            <td>username</td>
            <td><input type="text" name="uname"></td>
        </tr>
        <tr>
            <td>password</td>
            <td><input type="password" name="pwd"></td>
        </tr>
        <tr>
            <td align="center"><input type="submit" value="注册"></td>
        </tr>

    </table>

</form>
</body>
</html>
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

这样在页面上面输入参数,并且点击注册方式之后,显示的页面效果如下
这里写图片描述
然后node根据url携带的参数方式进行获取

var url=require('url')
 module.exports={
    zhuCe:function (req,res) {
           var recall=getRecall(req,res);
           readFile('./file/zhuce.html',recall);//读取html文件
        //--get接收参数
            var data=url.parse(req.url,true).query;
        //收到参数,向数据库中添加!  
            insertUser(data)//insertUser方法已经在前面介绍过,是保存数据的方法
        })
       }
    }

 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • POST参数接收
    主要把上诉的html页面的method的方式改成post方式即可,页面输入参数之后,并且点击注册方法后,url的上面并没有出现参数,
    这里写图片描述
    因为是post请求,这些参数不是通过url传递的,是包含在request请求体中。请求体里的流需要以事件形式进行接收

    req.on(‘data’, function(chunk){//通过req的data事件监听函数,每当接受到请求体的数据,就累加到post变量中

         post  +=  chunk;      
    
       
    • 1
    • 2

    });
    具体代码参见如下

var querystring=require('querystring')
module.exports={
    zhuCe:function (req,res) {
        //post提交方法
        var post='';  //定义了一个post变量,用于暂时存放请求头
         req.on('data',function (chunk) {
             post+=chunk;
        })
        //--注意异步方式
         req.on('end',function () {
             var recall=getRecall(req,res);
             readFile('./file/zhuce.html',recall);
             post=queryString.parse(post);
             req.write('收到参数'+data['uname'+'\\n'])
             req.end();
             insertUser(post)
         })
        }
    }
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

4.通过路由调用上述的注册方法

var url=require('url')
var http =require('http')
var router=require('./module/mysqlpool');//该文件就是上诉写接收参数的文件
http.createServer(function (request,response) {
    if(request.url!=='/favicon.ico'){
        var pathname=url.parse(request.url).pathname//在浏览器中地址写入http://localhost:8888/zhuCe,截取到/zhuCe
        pathname=pathname.replace(/\//,'');//获取zhuCe
        console.log(pathname);
        try{
            router[pathname](request,response);//通过router[zhuCe]去执行注册方法
        }catch(err){
            console.log('出错'+err);
            response.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
            response.write(err);
            response.end();
        }
        console.log('serve执行完毕');
    }
}).listen(8888);

 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

总结

后台接收前台页面参数的方式主要就是get和post的方式,两者主要的区别不仅在于url地址参数的有无,还在于传递的方式,post采用的流的方式,接收参数的时候需要累加到变量。




  • 2
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值