node.js前后台交互示例 -- 使用node.js實現用戶注冊功能

本文轉載自查看原文 2017-04-17 15:11 4704 node.js/ node.js注冊功能

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

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

<!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，點擊注冊，會把數據提交到服務器（這里跨域了奧），再寫入數據庫，就實現了注冊功能。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 使用Servlet實現用戶注冊基於PHP實現用戶注冊登錄功能簡單使用JDBC和Servlet實現用戶注冊和登錄功能 DjangoRestFramework實現用戶注冊 Django實現用戶注冊登錄 Node.js實現登錄注冊功能如何巧妙地在基於 TCP Socket 的應用中實現用戶注冊功能？利用ajax技術實現用戶注冊。【ajax】ajax異步實現用戶注冊驗證 Flask 實現用戶注冊/登錄表單