网络编程 
首页 > 网络编程 > 浏览文章

Nodejs实现用户注册功能

(编辑:jimmy 日期: 2024/11/16 浏览:3 次 )

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 = "htmlcode">
<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--<link rel="stylesheet" type="text/css" href="/code.css" />-->
    <script src="/UploadFiles/2021-04-02/reg.js">

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.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实现用户注册功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

上一篇:vue 实现小程序或商品秒杀倒计时
下一篇:js中async函数结合promise的小案例浅析
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。