Nodejs實現(xiàn)用戶注冊功能

2024-05-06 16:49:56

字體：大中小

供稿：網(wǎng)友

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

2導出連接池對象

/** * 1.引入mysql模塊 * 2.創(chuàng)建連接池對象 * 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托管靜態(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服務器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)建路由器對象

3往路由器中添加路由

4在路由中使用連接池

5導出路由器

/*  1.引入express  2.創(chuàng)建路由器對象  3.添加路由  4.導出路由器  5.引入連接池對象  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) => {  //驗證數(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) => {  //驗證數(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)    }  });});//導出路由器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異步交互實現(xiàn)用戶注冊

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;  //驗證是否為空并且用戶名是否已經(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 = '確認密碼不能為空';      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 = '用戶名已存在';          //如果用戶名已存在，該按鈕處于禁用狀態(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);  }  //密碼驗證  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í)行注冊    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,用戶注冊