【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之注册与登录监听
2017-10-11 20:10
495 查看
一、引言
在数据库和静态页面都创建好之后,下面就该接着完成后台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 主程序成功运行界面
用刚刚注册的账号 登录
注:转载请注明出处
相关文章推荐
- 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之功能与数据分析
- 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之静态页面
- Node.js+Express+MySql实现用户登录注册
- node.js后台jquery前台-- 实现用户登录注册AJAX交互
- 基于Node.js+express+MySQL+Bootstrap实现的简单登录注册
- node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
- Node.js+Express+MySql实现用户登录注册功能
- node.js+express+jade系列五:ajax登录
- Node.js Express连接mysql完整的登陆注册系统(windows)
- nodejs+mongodb写的一个简单的登录注册
- 京东的js注册验证个人收集
- Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
- 实现原生登录注册和个人中心模块
- 利用node.js+mongodb如何搭建一个简单登录注册的功能详解
- 用node和express连接mysql实现登录注册
- 【唯星宠物】——BootStrap/Mysql/PHP/Ajax爬坑之正则验证登录注册子页
- node.js---study2 连接池连接数据库实现登录注册查询用户的功能---
- Ajax+SpringMVC+Spring+Mybatis+MySql+js用户注册实例
- 注册登录显示个人中心
- (NodeJS学习文章收集三) node.js基于express框架搭建一个简单的注册登录Web功能