扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
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页面
Document
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实现用户注册功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流