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" />--> <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" /> <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.; }); } 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实现用户注册功能,希望对大家有所帮助