2. 程式人生 > >Node.JS入門（五）——後臺接收頁面引數並儲存到資料庫

Node.JS入門（五）——後臺接收頁面引數並儲存到資料庫

阿新 • • 發佈：2019-01-20

前言

在學習了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;

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("非同步方法執行完畢");
}

讀取頁面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>

這樣在頁面上面輸入引數，並且點選註冊方式之後，顯示的頁面效果如下
這裡寫圖片描述
然後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方法已經在前面介紹過，是儲存資料的方法
        })
       }
    }

  • POST引數接收
    主要把上訴的html頁面的method的方式改成post方式即可，頁面輸入引數之後，並且點選註冊方法後，url的上面並沒有出現引數，
    這裡寫圖片描述
    因為是post請求，這些引數不是通過url傳遞的，是包含在request請求體中。請求體裡的流需要以事件形式進行接收

    req.on(‘data’, function(chunk){//通過req的data事件監聽函式，每當接受到請求體的資料，就累加到post變數中 

         post  +=  chunk;

    });
    具體程式碼參見如下

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)
         })
        }
    }

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);

總結

後臺接收前臺頁面引數的方式主要就是get和post的方式，兩者主要的區別不僅在於url地址引數的有無，還在於傳遞的方式，post採用的流的方式，接收引數的時候需要累加到變數。

相關推薦

Node.JS入門（五）——後臺接收頁面引數並儲存到資料庫

前言 在學習了nodejs和資料庫mysql互動的情況下，我們來學習一下如何從頁面上獲取引數然後存放到資料庫中，這種方式通常有兩種，一種是get方式，一種是post方式 內容 背景 本篇的主要場景是獲取註冊中的使用者名稱和密碼，然後儲存到資

Node.js筆記（七）讀取mongoDB的資料並顯示

雖然以前接觸了mysql的內容，但做網站的時候，感覺NoSQL資料庫還是繞不過去。 很多書籍上都提到了node.js和MongoDB的配合使用，這裡記錄一下學習過程。 MongoDB的基本命令： use dbname 新建或者使用現有資料庫 show

Python爬蟲學習6：scrapy入門（一）爬取汽車評論並儲存到csv檔案

一、scrapy 安裝：可直接使用Anaconda Navigator安裝， 也可使用pip install scrapy安裝二、建立scrapy 爬蟲專案：語句格式為 scrapy startproject project_name生成的爬蟲專案目錄如下，其中spiders

JavaScript入門（五）JS類與物件

前言       本章學習JS類和物件的相關知識 方法 1.基本概念 到這裡，你可能懵了!我靠，JS也有類和物件。經常聽老鳥說，JS也是比較難的，尤其是深入的去學，但是我們不要怕！你要相信，他沒有Java難就足夠了！ 2.類的宣告 funct

方便大家學習的Node.js教程（一）：理解Node.js

圖形 -1 iter pri attribute set run 相對 mage 理解Node.js 為了理解Node.js是如何工作的，首先你需要理解一些使得Javascript適用於服務器端開發的關鍵特性。Javascript是一門簡單而又靈活的語言，這種靈

Hibernate入門（五）

brush cti ride pack ng- gin import source builds 一 Hibernate繼承映射 　　我們可以將繼承層次結構類與數據庫的表映射。 1. 每個層次類一張表 這個層次結構有三個類，Employee是Regular_Employ

JS基礎（五）自定義函數

調用函數 pre 基礎 clas 自定義 語句 ... 全局 blog 作用：是為了讓重復使用的語句，方便進行調用。 定義格式： function 自定義函數名 (參數1, 參數2,...) { 執行的語句 } 函數的封裝：把語句放到函數中去的過程。 參數：通過

HTML入門（三）後臺系統顯示頁面_框架標簽

row http head span 技術分享 target html top logs <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

canvas入門（五）

疊加 ans sla idt 分享 com 位移 res gree canvas一樣可以使用圖形變換。 位移，translate（x, y）； 旋轉：retate(deg)； 縮放：scale(sx，sy)； 但這個過程有個陷阱，如 canvas.width =

cesium編程入門（五）繪制形狀

cnblogs eve acf gem 場景 編程入門 host 元素 pos 通過Entity添加形狀 先來看一個添加立方體的例子 var viewer = new Cesium.Viewer(‘cesiumContainer‘); var redBox = **view

Spring Boot快速入門（五）：使用MyBatis（註解形式）進行數據庫操作

訪問 ins name ont clas assert xxx main apach 原文地址：https://lierabbit.cn/articles/7 添加依賴 新建項目選擇web,MyBatis,MySQL三個依賴 對於已存在的項目可以在bulid.gradle

python入門（五）函數的定義

函數 高階函數 python中函數的定義以def開頭，後面跟函數定義的名稱和（））‘括號中定義參數’ 以冒號開始，並且進行縮放，return結束如： def hello (ming): print ming return 傳遞參數： ming=[1,2,3]m

Python3入門（五）——函數式編程

rabl rom pytho 介紹 計算 並且 span 但是 pan 一、高階函數 　　1.可以通過變量指向函數，達到類似別名的效果： >>> f = abs >>> f(-10) 10 　　2.函數的參數可以是函數，

進擊Node.js基礎（二）

內部 socket ada cte 通過 func onf hello 語言 一.一個牛逼閃閃的知識點Promise　　npm install bluebird 二.牛逼閃閃的Promise只需三點1.Promise是JS針對異步操作場景的解決方案　　針對異步的場景，業

08慕課網《進擊Node.js基礎（一）》事件events

匿名函數 李白 function func 之前 慕課網 nod TP 不可 引用events模塊中的EventEmitter 事件的監聽和發射 相同的事件發射數量有限，可以通過setMaxListeners設置峰值 var EventEmitter = require

10慕課網《進擊Node.js基礎（一）》初識promise

ima script 改變 ack 一次 margin ML rom 指定 首先用嘴簡單的方式實現一個動畫效果 <!doctype> <html> <head> <title>Promise animation</ti

11慕課網《進擊Node.js基礎（一）》Buffer和Stream

edi str ole com node adf In 類型 base Buffer (logo.png) 以下代碼讀取logo.png為buffer類型 然後將buffer轉化為string 可以將字符串配置： data:image/png;Base64,Buffer.t

區塊鏈快速入門（五）——區塊鏈技術的演化

學術 出了 計算機系 blog 供應鏈 img 相關信息 擴容 actions 區塊鏈快速入門（五）——區塊鏈技術的演化 一、區塊鏈技術的發展 比特幣區塊鏈面向轉賬場景，支持簡單的腳本計算。如果引入更多復雜的計算邏輯，將能支持更多應用場景，即智能合約(Smart Contr

05 React快速入門（五）——react中優化程式碼

      在之前的文章中，react程式碼的書寫有很多冗餘，所以接下來對程式碼進行一下優化。       首先優化的是關於this指向這一塊的程式碼，我們不必在每次的繫結後面加bind(this)語句，只需在建構函式裡做處理就可以

java程式設計師菜鳥進階（十七）linux基礎入門（五）linux檔案/目錄的許可權和歸屬管理

在linux中的每一個檔案或目錄都包含有訪問許可權，這些訪問許可權決定了誰能訪問和如何訪問這些檔案和目錄。相應的每一個檔案和目錄都有所屬的屬主和屬組，合理的設定檔案和目錄的屬組和屬主在檔案/目錄管理中佔據著很重要的地位，所以，今天我就和大家一起來看一下有關檔案/目錄的許可權和歸屬的相關設定