1创建连接池对象
2导出连接池对象
1 /** 2 * 1.引入mysql模块 3 * 2.创建连接池对象 4 * 3.导出连接池对象 5 */ 6 const mysql = require('mysql'); 7 var pool = mysql.createPool({ 8 host:'localhost', 9 port:'3306', 10 user:'xxx', 11 password:'xxx', 12 database:'xxx', 13 connectionLimit:20 14 }); 15 module.exports = pool;
1托管静态资源到public
2使用body-parser中间件
3使用路由器挂在到指定的位置
1 //引入express模块 2 const express = require('express'); 3 //引入路由器 4 const userRouter = require('./routes/user.js'); 5 const productRouter = require('./routes/product.js'); 6 const myproRouter = require('./routes/mypro.js'); 7 const demoRouter = require('./routes/demo.js'); 8 const bodyParser = require('body-parser'); 9 //创建web服务器 10 var server = express(); 11 //监听端口 12 server.listen(8080); 13 //托管静态资源 14 server.use(express.static('public')); 15 server.use(express.static('ajaxdemo')); 16 server.use(express.static('mypro')); 17 server.use(express.static('js')); 18 server.use(express.static('css')); 19 server.use(express.static('bootstrap')); 20 server.use(express.static('img')); 21 //使用body-parser中间件 22 server.use(bodyParser.urlencoded({ 23 extended:false 24 })); 25 //挂载路由器 26 server.use('/user',userRouter); 27 server.use('/demo',demoRouter);
1引入连接池模块
2创建路由器对象
3往路由器中添加路由
4在路由中使用连接池
5导出路由器
1 /* 2 1.引入express 3 2.创建路由器对象 4 3.添加路由 5 4.导出路由器 6 5.引入连接池对象 7 6.将数据插入到数据库中 8 */ 9 const express = require('express'); 10 const pool = require('../pool.js'); 11 var router = express.Router(); 12 //查看所有数据 13 router.get('/sele', (req, res) => { 14 //验证数据是否为空 15 var obj = req.query; 16 //console.log('query',obj); 17 for(var key in obj) { 18 if(!obj[key]) { 19 res.send('数据不能为空'); 20 return; 21 } 22 } 23 var sqlselect = 'select * from xxx'; 24 pool.query(sqlselect,(err, result) => { 25 if(err) throw err; 26 if(result.length > 0) { 27 res.send(result); 28 } 29 }); 30 }); 31 //查看用户名 32 router.get('/seleUname', (req, res) => { 33 //验证数据是否为空 34 var obj = req.query; 35 //console.log('query',obj); 36 for(var key in obj) { 37 if(!obj[key]) { 38 res.send('数据不能为空'); 39 return; 40 } 41 } 42 var sqlselect = 'select uname from xxx where uname = ?'; 43 pool.query(sqlselect,[obj.uname],(err,result) => { 44 if(err) throw err; 45 if(result.length > 0) { 46 console.log(result.tength); 47 res.send('1'); 48 }else{ 49 res.send('0'); 50 } 51 }); 52 }); 53 router.post('/reg', (req, res) => { 54 var obj = req.body; 55 console.log('body',obj); 56 for(var key in obj){ 57 if(!obj[key]){ 58 res.send('内容不能为空'); 59 return; 60 } 61 } 62 var selectInsert = 'insert into xxx set ?'; 63 pool.query(selectInsert, [obj], (err, result) => { 64 if(err) throw err; 65 if(result.affectedRows > 0) { 66 console.log(result.affectedRows) 67 res.send('1'); 68 } else { 69 res.send('0'); 70 console.log(result.affectedRows) 71 } 72 }); 73 }); 74 //导出路由器 75 module.exports = router;
4.html页面
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <!--<link rel="stylesheet" type="text/css" href="/code.css" />--> 8 <script src="/reg.js" type="text/javascript" charset="utf-8"></script> 9 <script src="/jquery.min.js" type="text/javascript" charset="utf-8"></script> 10 <script src="/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> 11 <link rel="stylesheet" type="text/css" href="/bootstrap.css" /> 12 <style type="text/css"> 13 *{ 14 margin: 0; 15 padding: 0; 16 } 17 body{ 18 background: url(/true.png) no-repeat; 19 background-size: cover; 20 overflow-x: hidden; 21 overflow-y: hidden; 22 } 23 #box{ 24 width: 700px; 25 height: 500px; 26 left: 50%; 27 top: 50%; 28 margin-left: -350px; 29 margin-top: -250px; 30 position: absolute; 31 } 32 </style> 33 </head> 34 35 <body> 36 <div id="box"> 37 <div class="container"> 38 <div class="row clearfix"> 39 <div class="col-md-10 column"> 40 <form class="form-horizontal" role="form"> 41 <div class="form-group"> 42 <label for="inputEmail3" class="col-sm-2 control-label">UserName:</label> 43 <div id="uname_box" class="col-sm-6"> 44 <input id="uname" name="uname" type="text" class="form-control" placeholder="Please enter a user name" /> 45 </div> 46 <div id="p1"> 47 48 </div> 49 </div> 50 <div class="form-group"> 51 <label for="inputPassword3" class="col-sm-2 control-label">UserPassword:</label> 52 <div class="col-sm-6"> 53 <input id="upwd" name='upwd' type="password" class="form-control" placeholder="Please enter your user password"/> 54 </div> 55 <div id="p2"> 56 57 </div> 58 </div> 59 <div class="form-group"> 60 <label for="inputPassword3" class="col-sm-2 control-label">ConfirmPassword:</label> 61 <div class="col-sm-6"> 62 <input id="upwd1" name='upwd' type="password" class="form-control" placeholder="Confirm user password"/> 63 </div> 64 <div id="p3"> 65 66 </div> 67 </div> 68 <div class="form-group"> 69 <label for="inputPassword3" class="col-sm-2 control-label">Email:</label> 70 <div class="col-sm-6"> 71 <input id="email" name="email" type="text" class="form-control" placeholder="Please enter user email"/> 72 </div> 73 <div id="p4"> 74 75 </div> 76 </div> 77 <div class="form-group"> 78 <label for="inputPassword3" class="col-sm-2 control-label">Tel:</label> 79 <div class="col-sm-6"> 80 <input id="phone" name="phone" type="text" class="form-control" placeholder="Please enter the user's mobile phone number"/> 81 </div> 82 <div id="p5"> 83 84 </div> 85 </div> 86 <div class="form-group"> 87 <div class="col-sm-offset-2 col-sm-8"> 88 <button id="reg" type="submit" class="btn col-lg-9 btn-info">Register</button> 89 </div> 90 </div> 91 </form> 92 </div> 93 </div> 94 </div> 95 </div> 96 </body> 97 </html>
5.js前端验证以及Ajax异步交互实现用户注册
1 window.onload = function() { 2 uname.onfocus = notNull; 3 uname.onblur = notNull; 4 upwd.onfocus = notNull; 5 upwd.onblur = notNull; 6 upwd1.onfocus = notNull; 7 upwd1.onblur = notNull; 8 email.onfocus = notNull; 9 email.onblur = notNull; 10 phone.onfocus = notNull; 11 phone.onblur = notNull; 12 upwd.onfocus = passw; 13 upwd.onblur = passw; 14 upwd1.onfocus = passw; 15 upwd1.onblur = passw; 16 //声明一个全局的xhr 17 var xhr = new XMLHttpRequest(); 18 var flag = true; 19 //验证是否为空并且用户名是否已经存在 20 function notNull() { 21 if(!uname.value) { 22 p1.innerHTML = '用户名不能为空'; 23 return; 24 } else { 25 p1.innerHTML = ''; 26 getUname(); 27 28 } 29 if(!upwd.value) { 30 p2.innerHTML = '密码不能为空'; 31 return; 32 } else { 33 p2.innerHTML = ''; 34 } 35 if(!upwd1.value) { 36 p3.innerHTML = '确认密码不能为空'; 37 return; 38 } else { 39 p3.innerHTML = ''; 40 } 41 if(!email.value) { 42 p4.innerHTML = '邮箱不能为空'; 43 return; 44 } else { 45 p4.innerHTML = ''; 46 } 47 if(!phone.value) { 48 p5.innerHTML = '手机号不能为空'; 49 return; 50 } else { 51 p5.innerHTML = ''; 52 } 53 } 54 //验证用户名是否已存在 55 function getUname() { 56 xhr.onreadystatechange = function() { 57 if(xhr.readyState == 4 && xhr.status == 200) { 58 var result = xhr.responseText; 59 console.log(result); 60 if(result === '1') { 61 p1.innerHTML = '用户名已存在'; 62 //如果用户名已存在，该按钮处于禁用状态 63 reg.setAttribute('disabled','true'); 64 } else { 65 p1.innerHTML = ''; 66 reg.disabled = false; 67 } 68 } 69 } 70 var url = "/demo/seleUname?uname=" + uname.value; 71 xhr.open('get', url, true); 72 xhr.send(null); 73 } 74 //密码验证 75 function passw() { 76 if(upwd.value != upwd1.value) { 77 p3.innerHTML = '两次密码不一致'; 78 } 79 } 80 81 reg.onclick = function() { 82 //查询所有用户信息 83 xhr.onreadystatechange = function() { 84 if(xhr.readyState == 4 && xhr.status == 200) { 85 var result = xhr.responseText; 86 console.log(JSON.parse(result)); 87 } 88 } 89 var url = "/demo/sele"; 90 xhr.open('get', url, true); 91 xhr.send(null); 92 93 //执行注册 94 xhr.onreadystatechange = function() { 95 if(xhr.readyState == 4 && xhr.status == 200) { 96 var result = xhr.responseText; 97 if(flag) { 98 getUname(); 99 if(result === '1') { 100 alert('success'); 101 setTimeout(()=>{ 102 location.href = 'http://localhost:8080/login_user.html'; 103 }); 104 } else { 105 alert('error'); 106 } 107 } 108 109 } 110 } 111 var str = "/demo/reg"; 112 xhr.open('post', str, true); 113 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 114 var formdata = "uname=" + uname.value + "&upwd=" + upwd.value + "&email=" + email.value + ""; 115 xhr.send(formdata); 116 } 117 }
界面展示：
