JavaScript

超轻量级php框架startmvc

Nodejs实现用户注册功能

更新时间:2020-08-21 06:06:01 作者:startmvc
1创建连接池对象2导出连接池对象/***1.引入mysql模块*2.创建连接池对象*3.导出连接池对象*/con

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实现用户注册功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!