首页
所有分类
TAGS
文字工具 EMOJI BIBLE
服务器 NodeJs

Nodejs实现用户注册功能

Posted in NodeJs onApril 14, 2019

1创建连接池对象

2导出连接池对象

/**
 * 1.引入mysql模块
 * 2.创建连接池对象
 * 3.导出连接池对象
 */
const mysql = require('mysql');
var pool = mysql.createPool({
  host:'localhost',
  port:'3306',
  user:'xxx',
  password:'xxx',
  database:'xxx',
  connectionLimit:20
});
module.exports = pool;

1托管静态资源到public

2使用body-parser中间件

3使用路由器挂在到指定的位置

//引入express模块
const express = require('express');
//引入路由器
const userRouter = require('./routes/user.js');
const productRouter = require('./routes/product.js');
const myproRouter = require('./routes/mypro.js');
const demoRouter = require('./routes/demo.js');
const bodyParser = require('body-parser');
//创建web服务器
var server = express();
//监听端口
server.listen(8080);
//托管静态资源
server.use(express.static('public'));
server.use(express.static('ajaxdemo'));
server.use(express.static('mypro'));
server.use(express.static('js'));
server.use(express.static('css'));
server.use(express.static('bootstrap'));
server.use(express.static('img'));
//使用body-parser中间件
server.use(bodyParser.urlencoded({
  extended:false
}));
//挂载路由器
server.use('/user',userRouter);
server.use('/demo',demoRouter);

1引入连接池模块

2创建路由器对象

3往路由器中添加路由

4在路由中使用连接池

5导出路由器

/*
  1.引入express
  2.创建路由器对象
  3.添加路由
  4.导出路由器
  5.引入连接池对象
  6.将数据插入到数据库中
*/
const express = require('express');
const pool = require('../pool.js');
var router = express.Router();
//查看所有数据
router.get('/sele', (req, res) => {
  //验证数据是否为空
  var obj = req.query;
  //console.log('query',obj);
  for(var key in obj) {
    if(!obj[key]) {
      res.send('数据不能为空');
      return;
    }
  }
  var sqlselect = 'select * from xxx';
  pool.query(sqlselect,(err, result) => {
    if(err) throw err;
    if(result.length > 0) {
      res.send(result);
    }
  });
});
//查看用户名
router.get('/seleUname', (req, res) => {
  //验证数据是否为空
  var obj = req.query;
  //console.log('query',obj);
  for(var key in obj) {
    if(!obj[key]) {
      res.send('数据不能为空');
      return;
    }
  }
  var sqlselect = 'select uname from xxx where uname = ?';
  pool.query(sqlselect,[obj.uname],(err,result) => {
    if(err) throw err;
    if(result.length > 0) {
      console.log(result.tength);
      res.send('1');
    }else{
      res.send('0');
    }
  });
});
router.post('/reg', (req, res) => {
  var obj = req.body;
  console.log('body',obj);
  for(var key in obj){
    if(!obj[key]){
      res.send('内容不能为空');
      return;
    }
  }
  var selectInsert = 'insert into xxx set ?';
  pool.query(selectInsert, [obj], (err, result) => {
    if(err) throw err;
    if(result.affectedRows > 0) {
      console.log(result.affectedRows)
      res.send('1');
    } else {
      res.send('0');
      console.log(result.affectedRows)
    }
  });
});
//导出路由器
module.exports = router;

4.html页面

<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--<link rel="stylesheet" type="text/css" href="/code.css" />-->
    <script src="/reg.js" type="text/javascript" charset="utf-8"></script>
    <script src="/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/bootstrap.css" />
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      body{
        background: url(/true.png) no-repeat;
        background-size: cover;
        overflow-x: hidden;
        overflow-y: hidden;
      }
      #box{
        width: 700px;
        height: 500px;
        left: 50%;
        top: 50%;
        margin-left: -350px;
        margin-top: -250px;
        position: absolute;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <div class="container">
      <div class="row clearfix">
        <div class="col-md-10 column">
          <form class="form-horizontal" role="form">
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label">UserName:</label>
              <div id="uname_box" class="col-sm-6">
                <input id="uname" name="uname" type="text" class="form-control" placeholder="Please enter a user name" />
              </div>
              <div id="p1">

              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">UserPassword:</label>
              <div class="col-sm-6">
                <input id="upwd" name='upwd' type="password" class="form-control" placeholder="Please enter your user password"/>
              </div>
              <div id="p2">

              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">ConfirmPassword:</label>
              <div class="col-sm-6">
                <input id="upwd1" name='upwd' type="password" class="form-control" placeholder="Confirm user password"/>
              </div>
              <div id="p3">

              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">Email:</label>
              <div class="col-sm-6">
                <input id="email" name="email" type="text" class="form-control" placeholder="Please enter user email"/>
              </div>
              <div id="p4">

              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label">Tel:</label>
              <div class="col-sm-6">
                <input id="phone" name="phone" type="text" class="form-control" placeholder="Please enter the user's mobile phone number"/>
              </div>
              <div id="p5">

              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-8">
                <button id="reg" type="submit" class="btn col-lg-9 btn-info">Register</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

5.js前端验证以及Ajax异步交互实现用户注册

window.onload = function() {
  uname.onfocus = notNull;
  uname.onblur = notNull;
  upwd.onfocus = notNull;
  upwd.onblur = notNull;
  upwd1.onfocus = notNull;
  upwd1.onblur = notNull;
  email.onfocus = notNull;
  email.onblur = notNull;
  phone.onfocus = notNull;
  phone.onblur = notNull;
  upwd.onfocus = passw;
  upwd.onblur = passw;
  upwd1.onfocus = passw;
  upwd1.onblur = passw;
  //声明一个全局的xhr
  var xhr = new XMLHttpRequest();
  var flag = true;
  //验证是否为空并且用户名是否已经存在
  function notNull() {
    if(!uname.value) {
      p1.innerHTML = '用户名不能为空';
      return;
    } else {
      p1.innerHTML = '';
      getUname();

    }
    if(!upwd.value) {
      p2.innerHTML = '密码不能为空';
      return;
    } else {
      p2.innerHTML = '';
    }
    if(!upwd1.value) {
      p3.innerHTML = '确认密码不能为空';
      return;
    } else {
      p3.innerHTML = '';
    }
    if(!email.value) {
      p4.innerHTML = '邮箱不能为空';
      return;
    } else {
      p4.innerHTML = '';
    }
    if(!phone.value) {
      p5.innerHTML = '手机号不能为空';
      return;
    } else {
      p5.innerHTML = '';
    }
  }
  //验证用户名是否已存在
  function getUname() {
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 && xhr.status == 200) {
        var result = xhr.responseText;
        console.log(result);
        if(result === '1') {
          p1.innerHTML = '用户名已存在';
          //如果用户名已存在，该按钮处于禁用状态
          reg.setAttribute('disabled','true');
        } else {
          p1.innerHTML = '';
          reg.disabled = false;
        }
      }
    }
    var url = "/demo/seleUname?uname=" + uname.value;
    xhr.open('get', url, true);
    xhr.send(null);
  }
  //密码验证
  function passw() {
    if(upwd.value != upwd1.value) {
      p3.innerHTML = '两次密码不一致';
    }
  }
  
  reg.onclick = function() {
    //查询所有用户信息
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 && xhr.status == 200) {
        var result = xhr.responseText;
        console.log(JSON.parse(result));
      }
    }
    var url = "/demo/sele";
    xhr.open('get', url, true);
    xhr.send(null);

    //执行注册
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 && xhr.status == 200) {
        var result = xhr.responseText;
        if(flag) {
          getUname();
          if(result === '1') {
            alert('success');
            setTimeout(()=>{
              location.href = 'http://localhost:8080/login_user.html';
            });
          } else {
            alert('error');
          }
        }

      }
    }
    var str = "/demo/reg";
    xhr.open('post', str, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    var formdata = "uname=" + uname.value + "&upwd=" + upwd.value + "&email=" + email.value + "";
    xhr.send(formdata);
  }
}

界面展示：

Nodejs实现用户注册功能

总结

以上所述是小编给大家介绍的Nodejs实现用户注册功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

Nodejs实现用户注册功能

- Author -

零晨三点半

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

NodeJs 相关文章推荐
使用upstart把nodejs应用封装为系统服务实例
Jun 01 NodeJs
nodejs中的fiber（纤程）库详解
Mar 24 NodeJs
详解NodeJs支付宝移动支付签名及验签
Jan 06 NodeJs
Nodejs--post的公式详解
Apr 29 NodeJs
详解Windows下安装Nodejs步骤
May 18 NodeJs
Nodejs之TCP服务端与客户端聊天程序详解
Jul 07 NodeJs
详解nodejs的express如何自动生成项目框架
Jul 12 NodeJs
用nodejs实现json和jsonp服务的方法
Aug 25 NodeJs
nodejs使用redis作为缓存介质实现的封装缓存类示例
Feb 07 NodeJs
nodejs 使用 js 模块的方法实例详解
Dec 04 NodeJs
NodeJS实现一个聊天室功能
Nov 25 NodeJs
nodejs实现百度舆情接口应用示例
Feb 07 NodeJs
使用nodejs分离html文件里的js和css详解
Apr 12 #NodeJs
nodejs分离html文件里面的js和css的方法
Apr 09 #NodeJs
NodeJs操作MongoDB教程之分页功能以及常见问题
Apr 09 #NodeJs
Nodejs核心模块之net和http的使用详解
Apr 02 #NodeJs
Nodejs中的require函数的具体使用方法
Apr 02 #NodeJs
NodeJs之word文件生成与解析的实现代码
Apr 01 #NodeJs
详解nodejs http请求相关总结
Mar 31 #NodeJs
RecyclerView(1) 九宫格(5) Simhash(1) REGEXP(1) 查询效率(1) delete in(1) 表结构(1) 字段分割(1) 控制流(1) Hadoop(1)
You might like
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP设计模式（四）原型模式Prototype实例详解【创建型】
2020/05/02 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
Javascript select控件操作大全（新增、修改、删除、选中、清空、判断存在等）
2008/12/19 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python Socket传输文件示例
2017/01/16 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
python实现数字炸弹游戏程序
2020/07/17 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
如何基于Python按行合并两个txt
2020/11/03 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
美国著名的家居用品购物网站：Bed Bath & Beyond
2018/01/05 全球购物
大学团支书的自我评价分享
2013/12/14 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
个人担保书格式范文
2014/05/12 职场文书
教师节倡议书
2014/08/30 职场文书
Python爬虫：从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python
Linux中sftp常用命令整理
2022/06/28 Servers