数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

Nodejs实现用户注册功能

来源:脚本之家  责任编辑:小易  

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="http://www.zgxue.com/code.css" />-->
    <script src="http://img.zgxue.com/reg.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://img.zgxue.com/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://img.zgxue.com/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="http://www.zgxue.com/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图片处理工具gm用法小结
  • nodejs中函数的调用实例详解
  • yarn与npm的命令行小结
  • node.js如何实现注册邮箱激活功能 (常见)
  • nodejs和c语言插入mysql数据库乱码问题的解决方法
  • express如何使用session与cookie的方法
  • 利用yarn代替npm管理前端项目模块依赖的方法详解
  • nodejs中使用captchapng模块生成图片验证码
  • 搭建基于express框架运行环境的方法步骤
  • nodejs express4.x开发框架随手笔记
  • 基于node.js的强大爬虫 能直接发布抓取的文章哦
  • node.js+express配置入门教程详解
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved