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 type="text/css" href="https://www.jb51.net/code.css" />--> <script src="https://www.jb51.net/reg.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.jb51.net/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://www.jb51.net/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <link type="text/css" href="https://www.jb51.net/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> <div> <div> <div> <form role="form"> <div> <label for="inputEmail3">UserName:</label> <div> <input type="text" placeholder="Please enter a user name" /> </div> <div> </div> </div> <div> <label for="inputPassword3">UserPassword:</label> <div> <input type="password" placeholder="Please enter your user password"/> </div> <div> </div> </div> <div> <label for="inputPassword3">ConfirmPassword:</label> <div> <input type="password" placeholder="Confirm user password"/> </div> <div> </div> </div> <div> <label for="inputPassword3">Email:</label> <div> <input type="text" placeholder="Please enter user email"/> </div> <div> </div> </div> <div> <label for="inputPassword3">Tel:</label> <div> <input type="text" placeholder="Please enter the user's mobile phone number"/> </div> <div> </div> </div> <div> <div> <button type="submit">Register</button> </div> </div> </form> </div> </div> </div> </div> </body> </html>
5.js前端验证以及Ajax异步交互实现用户注册