服务器 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 相关文章推荐

Nodejs进阶：如何将图片转成datauri嵌入到网页中去实例

Nov 21 NodeJs

nodejs搭建本地服务器并访问文件的方法

Mar 03 NodeJs

详解Nodejs之静态资源处理

Jun 05 NodeJs

Nodejs之TCP服务端与客户端聊天程序详解

Jul 07 NodeJs

nodejs操作mongodb的填删改查模块的制作及引入实例

Jan 02 NodeJs

详解NodeJs开发微信公众号

May 25 NodeJs

nodejs更新package.json中的dependencies依赖到最新版本的方法

Oct 10 NodeJs

NodeJs 模仿SIP话机注册的方法

Jun 21 NodeJs

Nodejs 识别图片类型的方法

Aug 15 NodeJs

nodejs脚本centos开机启动实操方法

Mar 04 NodeJs

nodeJs项目在阿里云的简单部署

Nov 27 NodeJs

分享node.js实现简单登录注册的具体代码

Apr 26 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