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实现用户注册功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。
