node.js前後臺交互示例——使用node.js實現用戶註冊功能

MySQL 技術 科技優家 2017-04-18

node.js環境自行搭建,參考菜鳥教程的node.js就可以。

1 通過ajax提交index.html中form表單

register.html文件如下:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="jquery.js"></script>
    <script src="ajax.js"></script>
    <style>
        form{padding: 100px;border: 1px solid red;width: 350px;margin: 0 auto;}
        form input{display: block;margin: 0 auto;margin-bottom: 20px;}
    </style>
</head>
<body>
    <form id="register" action="" method="get">
        <input type="hidden" name="action" value="register" />
        用&ensp;戶&ensp;名: <input type="text" name="name" placeholder="請輸入用戶名..." />
        密&emsp;&emsp;碼: <input type="password" name="pass" placeholder="請輸入密碼..." />
        電子郵件:<input type="email" name="email" placeholder="請輸入合法郵件名..." />
        <input id="register-sub" type="submit" value="註冊" />
    </form>
</body>
</html>

ajax.js文件如下:

$(function{
    $('#register-sub').on('click',function{
        var info = $('form').serialize;
        $.ajax({
 type:"get",
 url:"http://127.0.0.1:8081",
 data:info,
 success:function(response,status,xhr){
 alert(response);
 localStorage.name = $('input[name="name"]').val;
 }
        });
        return false;
    });
    
    $('#login-sub').on('click',function{
        return false;
    });
});

2 重點node.js後臺:接收數據、寫入數據庫、給前臺返回信息

首先創建服務器文件:server.js: res.writeHead;後邊的那個是為了跨域訪問

var http = require('http');
var url = require('url');
var util = require('util');
var mysql = require('./mysql');//這個是自己寫的用來向數據庫寫入用戶的文件

http.createServer(function(req,res){
    res.writeHead(200,{"Content-Type":'text/plain','charset':'utf-8','Access-Control-Allow-Origin':'*','Access-Control-Allow-Methods':'PUT,POST,GET,DELETE,OPTIONS'});
    //解析URL參數
    var params = url.parse(req.url,true).query;
    mysql.reg(params.action,params.name,params.pass,params.email);
    res.write("註冊成功");
    res.end;
}).listen(8081);

其次mysql.js文件連接數據庫:

exports.reg = function (action,name,pass,email){
    var mysql  = require('mysql');  
   
    var connection = mysql.createConnection({     
      host     : 'localhost',
      user     : 'root',
      password : '123456',
      port: '3306',     
      database: 'test', 
    }); 
    
    connection.connect;
     
    var modSql = "insert into user (name,pass,email) values ('"+name+"','"+pass+"','"+email+"')";
    
    connection.query(modSql,function (err, result) {
       if(err){
 console.log('[UPDATE ERROR] - ',err.message);
 return;
       }
    });
    connection.end;
}

這樣其實一個註冊功能就基本實現了,在瀏覽器中打開register.html,點擊註冊,會把數據提交到服務器(這裡跨域了奧),再寫入數據庫,就實現了註冊功能。