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實現用戶注冊功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
