【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之注册与登录监听

一、引言

在数据库和静态页面都创建好之后，下面就该接着完成后台Node.js监听注册和登录的部分了。这个部分主要使用的技术是：Node.js的Express框架和ajax异步请求。登录和注册的代码实现过程基本相同，现在重点以注册监听为例进行叙述。

二、js文件-功能实现

在注册按钮<input......>中添加id：bg-register，提供监听接口，然后在js/register.js文件中监听“注册”按钮的单击事件，并使用ajax将客户端数据异步提交给服务器

<div class="form-group">
   <div class="col-sm-5 col-sm-offset-2">
         <input id="bt-register" class="btn btn-success btn-block" type="button" value="注册">
   </div>
</div>

<script src="js/register.js"></script>

//监听“注册”按钮的单击事件
$('#bt-register').click(function(){
    var n = $('#uname').val();//用户名
    var p = $('#upwd').val();//密码
    //将客户端数据异步提交给服务器
    $.ajax({
        type:'POST',
        url:'/user/register',
        data:{uname:n,upwd:p},
        success:function(result){
           if(result.code===1){
               alert('注册成功！3s后自动跳转到登录页面...')
               setTimeout(function(){
                   location.href='login.html';
               },3000);
           }else{
               alert('注册失败！请稍后重试！')
           }
        },
        error:function(result){}
    })
});

找到主程序app.js,向客户端提供动态资源的响应

/*整个项目的主模块文件：
* 负责创建web服务器对象，监听指定端口
* 并向客户端提供静态资源+动态资源服务*/

//mysql连接数据库会另建模块对应订单等页面，
//这里主模块只负责创建web服务器
const http = require('http');
const express = require('express');
const user = require('./user');

var app = express();//请求处理函数
http.createServer(app).listen(8080);

//向客户端提供静态资源的响应
app.use(express.static('public'));

//向客户端提供动态资源的响应
app.post('/user/register',user.register);
app.post('/user/login',user.login);

在app.js同级目录，创建自定义模块use.js,向外提供login()和register()两个请求处理函数，并且接收客户端POST提交的请求数据：uname、upwd保存入数据库，向客户端返回JSON字符串

/**用户相关功能模块
 * 向外提供
 * login()和register()
 * 两个请求处理函数**/

const qs = require('querystring'); //使用qs模块解析POST数据
const pool = require('./dbpool');  //使用连接池模块获取连接

module.exports = {
    //接收POST提交的请求数据：uname、upwd
    //保存入数据库，返回JSON字符串，形如：
    // {"code":1,"msg":"注册成功","uid":31}

    register:(req,res)=>{
        //读取POST数据：req.on('data',(buf)=>{})
        req.on('data',(buf)=>{
            //解析出请求数据
            var obj = qs.parse(buf.toString());
            //获取数据库连接，提交SQL给数据库
            pool.getConnection((err,conn)=>{
                conn.query('INSERT INTO t_login VALUES (NULL,?,?)',[obj.uname,obj.upwd],(err,result)=>{
                    var output = {//要输出给客户端的数据
                        code:1,
                        msg:'注册成功',
                        uid:result.insertId
                    };
                    res.json(output);//把数据转换为JSON字符串并输出
                    conn.release();
                })
            });
        })
    },
    login:(req,res)=>{
        req.on('data',(buf)=>{
            var obj = qs.parse(buf.toString());
            pool.getConnection((err,conn)=>{
                conn.query(
               'SELECT uid FROM t_login WHERE uname=? AND upwd=?',[obj.uname,obj.upwd],
                    (err,result)=>{
                        if(result.length>0){//查询到数据了
                           var output = {
                               code:1,
                               msg:'登录成功',
                               uid:result[0].id
                           }
                        }else{//未查询到数据
                            var output ={
                                code:2,
                                msg:'用户名或密码错误'
                            }
                        }
                        res.json(output);//把数据转化为JSON
                        conn.release();
                   
                    })
            })
        })
    }
}

因为注册和登录需要很多的数据库访问，所以在app.js同级目录下，还要再创建一个自定义数据库连接池模块dbpool.js，向外提供pool对象。

/**数据库连接池模块
 * 向外提供pool对象**/
const mysql = require('mysql');

var pool = mysql.createPool({
    host:'127.0.0.1',
    user:'root',
    password:'',
    database:'jd',
    port:3306,
    connectionLimit:5  //连接池最大容量  一般5~10个
});

module.exports = pool;

三、测试-实现效果

只运行主执行程序app.js即可，然后在127.0.0.1:8080/.......地址端访问测试,效果如下：

数据库 t_login表中添加数据成功：

app.js 主程序成功运行界面

用刚刚注册的账号登录

注：转载请注明出处