首页
所有分类
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 相关文章推荐
Nodejs学习笔记之NET模块
Jan 13 NodeJs
NodeJS学习笔记之MongoDB模块
Jan 13 NodeJs
详解nodejs与javascript中的aes加密
May 22 NodeJs
Nodejs多站点切换Htpps协议详解及简单实例
Feb 23 NodeJs
angular2+nodejs实现图片上传功能
Mar 27 NodeJs
详解nodejs爬虫程序解决gbk等中文编码问题
Apr 06 NodeJs
NodeJs使用Mysql模块实现事务处理实例
May 31 NodeJs
nodeJS实现路由功能实例代码
Jun 08 NodeJs
nodejs项目windows下开机自启动的方法
Nov 22 NodeJs
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
Nov 01 NodeJs
nodejs制作小爬虫功能示例
Feb 24 NodeJs
node快速搭建后台的实现步骤
Feb 18 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
道歉信(39) 欢迎词(65) 检讨书(456) 介绍信(57) 邀请函(127) 辞职信(98) 表扬信(62) 广播稿(323) 教学反思(909) 事迹材料(636)
You might like
php 数学运算验证码实现代码
2009/10/11 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
解决使用bootstrap的dropdown部件时报错：error：Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
Python程序语言快速上手教程
2012/07/18 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
Python聊天室程序（基础版）
2018/04/01 Python
实践Vim配置python开发环境
2018/07/02 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
《油菜花开了》教学反思
2014/02/22 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
2014政府领导班子对照检查材料思想汇报（3篇）
2014/09/26 职场文书
检讨书范文300字
2015/01/28 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android