node.js前后台交互示例 -- 使用node.js实现用户注册功能

时间：2021-12-26 09:32:22

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，点击注册，会把数据提交到服务器（这里跨域了奥），再写入数据库，就实现了注册功能。

相关文章