快捷導(dǎo)航

Nodejs實(shí)現(xiàn)用戶注冊(cè)功能

更新時(shí)間：2019年04月14日 09:13:42 作者：零晨三點(diǎn)半

本文通過實(shí)例代碼給大家介紹了Nodejs實(shí)現(xiàn)用戶注冊(cè)功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1創(chuàng)建連接池對(duì)象

2導(dǎo)出連接池對(duì)象

/**
 * 1.引入mysql模塊
 * 2.創(chuàng)建連接池對(duì)象
 * 3.導(dǎo)出連接池對(duì)象
 */
const mysql = require('mysql');
var pool = mysql.createPool({
  host:'localhost',
  port:'3306',
  user:'xxx',
  password:'xxx',
  database:'xxx',
  connectionLimit:20
});
module.exports = pool;

1托管靜態(tài)資源到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');
//創(chuàng)建web服務(wù)器
var server = express();
//監(jiān)聽端口
server.listen(8080);
//托管靜態(tài)資源
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創(chuàng)建路由器對(duì)象

3往路由器中添加路由

4在路由中使用連接池

5導(dǎo)出路由器

/*
  1.引入express
  2.創(chuàng)建路由器對(duì)象
  3.添加路由
  4.導(dǎo)出路由器
  5.引入連接池對(duì)象
  6.將數(shù)據(jù)插入到數(shù)據(jù)庫中
*/
const express = require('express');
const pool = require('../pool.js');
var router = express.Router();
//查看所有數(shù)據(jù)
router.get('/sele', (req, res) => {
  //驗(yàn)證數(shù)據(jù)是否為空
  var obj = req.query;
  //console.log('query',obj);
  for(var key in obj) {
    if(!obj[key]) {
      res.send('數(shù)據(jù)不能為空');
      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) => {
  //驗(yàn)證數(shù)據(jù)是否為空
  var obj = req.query;
  //console.log('query',obj);
  for(var key in obj) {
    if(!obj[key]) {
      res.send('數(shù)據(jù)不能為空');
      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('內(nèi)容不能為空');
      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)
    }
  });
});
//導(dǎo)出路由器
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前端驗(yàn)證以及Ajax異步交互實(shí)現(xiàn)用戶注冊(cè)

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;
  //聲明一個(gè)全局的xhr
  var xhr = new XMLHttpRequest();
  var flag = true;
  //驗(yàn)證是否為空并且用戶名是否已經(jīng)存在
  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 = '確認(rèn)密碼不能為空';
      return;
    } else {
      p3.innerHTML = '';
    }
    if(!email.value) {
      p4.innerHTML = '郵箱不能為空';
      return;
    } else {
      p4.innerHTML = '';
    }
    if(!phone.value) {
      p5.innerHTML = '手機(jī)號(hào)不能為空';
      return;
    } else {
      p5.innerHTML = '';
    }
  }
  //驗(yàn)證用戶名是否已存在
  function getUname() {
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 && xhr.status == 200) {
        var result = xhr.responseText;
        console.log(result);
        if(result === '1') {
          p1.innerHTML = '用戶名已存在';
          //如果用戶名已存在，該按鈕處于禁用狀態(tài)
          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);
  }
  //密碼驗(yàn)證
  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);

    //執(zhí)行注冊(cè)
    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);
  }
}

界面展示：