Nodejs实现用户注册功能

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

以上是 Nodejs实现用户注册功能 的全部内容, 来源链接: utcz.com/z/328579.html

回到顶部