首页 > 代码库 > node.js前后台交互示例 -- 使用node.js实现用户注册功能

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

2024-09-15 13:15:11   215人阅读

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

 

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


联系
我们