一、引言

在数据库和静态页面都创建好之后,下面就该接着完成后台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   主程序成功运行界面

用刚刚注册的账号  登录


注:转载请注明出处

转载于:https://www.cnblogs.com/ljq66/p/7652500.html

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

  1. node.js mysql h5_【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之功能与数据分析

    DROP DATABASE IF EXISTSjd;CREATE DATABASE jd CHARSET=UTF8;USEjd;/**用户登录表**/ CREATE TABLEt_login( uid ...

  2. centos7安装mysql日志空白_centos7安装Mysql爬坑记录 - G

    centos7安装Mysql爬坑记录 查看是否已安装 使用下列命令查看是否已经安装过mysql/mariadb/PostgreSQL 如果未安装,不返回任何结果(ECS的centos镜像默认未安装任何 ...

  3. 5.6.50 mysql 用什么驱动_日均5亿查询量的京东订单中心,为什么舍弃MySQL用ES?

    京东到家订单中心系统业务中,无论是外部商家的订单生产,或是内部上下游系统的依赖,订单查询的调用量都非常大,造成了订单数据读多写少的情况. 我们把订单数据存储在MySQL中,但显然只通过DB来支撑大量的 ...

  4. 日均5亿查询量的京东订单中心,为什么舍MySQL用ElasticSearch?

    导读:京东到家订单中心系统业务中,无论是外部商家的订单生产,或是内部上下游系统的依赖,订单查询的调用量都非常大,造成了订单数据读多写少的情况. 我们把订单数据存储在MySQL中,但显然只通过DB来支撑 ...

  5. mysql 5亿数据 查询_日均5亿查询量的京东订单中心,为什么舍MySQL用ES?

    来源:京东技术订阅号(ID:jingdongjishu) 京东到家订单中心系统业务中,无论是外部商家的订单生产,或是内部上下游系统的依赖,订单查询的调用量都非常大,造成了订单数据读多写少的情况.我们把 ...

  6. 日均 5 亿查询量的京东订单中心,为什么舍 MySQL 用 ES ?

    京东到家订单中心系统业务中,无论是外部商家的订单生产,或是内部上下游系统的依赖,订单查询的调用量都非常大,造成了订单数据读多写少的情况. 我们把订单数据存储在MySQL中,但显然只通过DB来支撑大量的 ...

  7. 日均5亿查询量的京东订单中心,为什么舍MySQL用ES?

    程序员的成长之路 互联网/程序员/成长/职场  关注 阅读本文大概需要 8 分钟. 来源:京东技术订阅号(ID:jingdongjishu) 作者:张sir 京东到家订单中心系统业务中,无论是外部商家 ...

  8. vuex modules ajax,VUE项目爬坑---6、vuex的真正存在的意义是什么

    VUE项目爬坑---6.vuex的真正存在的意义是什么 一.总结 一句话总结: a.[避免低效的数据传递]:当多个组件嵌套的时候,只能父子传递,那么中间的组件只能做传递数据之用,数据不是它用,它却传递 ...

  9. 监听mysql表内容变化 使用canal,canal 监听同步指定数据库,所有表

    canal 监听同步指定数据库,所有表 canal 监听同步指定数据库,所有表 因为工作需求,需要用到数据库同步,又从网上找了一些发现都有些问题,所以自己弄好之后写一篇总结,及配置步骤吧 先将 MyS ...

最新文章

  1. 需求编写的几点经验之谈
  2. 各种NLP操作难实现?谷歌开源序列建模框架Lingvo
  3. DW Question Answer Pro 1.3.4 DWQA问答系统插件
  4. 程序运行实例数量的控制
  5. (原創) 我有牙周病了 (日記)
  6. 【GCC】Bug 36793 - x86-64 does not get __sync_synchronize right
  7. sourcesafe的七个问题?
  8. 微信公众号敏感词检测工具
  9. qt打开xls文件_Qt操作Excel
  10. A Google Congestion Control Algorithm for Real-Time Communication
  11. 遥控汽车网页小游戏源码
  12. KKT条件的物理意义(转)
  13. ping服务器网速的工具
  14. 【单片机毕业设计】【mcuclub-200】温度控制温度检测温控恒温控制恒温箱
  15. 原创整理!计算机常用【快捷键、缩写、英语单词】不定更
  16. 活动预告:BetaEX线上春季发布会 | TokenInsight
  17. 前端性能监控相关指标
  18. 真正解决办法:WINDOWS7/WIN7提示错误:无法启动此程序,因为计算机中丢失D3DCOMPILER_47.dll。尝试重新安装该程序以解决此问题
  19. 通信算法之三:LDPC码的研究
  20. 对100M左右的数据进行保存和简单分析

热门文章

  1. pdf裁边app_哪款手机PDF阅读APP值得推荐?
  2. 【ElasticSearch】Es 源码之 SearchService 源码解读
  3. 【es】es 写入流程
  4. 【MySQL】MySQL 数据库表锁和行锁
  5. 【Clickhouse】Clickhouse Live View
  6. 【Spark】SparkStreaming的应用及其原理
  7. 谷歌浏览器添加.crx插件
  8. 大数据面试-06-大数据工程师面试题
  9. 01-windows下git远程拉取项目
  10. elastic search与mysql的数据同步