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实现用户注册的更多相关文章

  1. Nodejs使用coffeescript编写的用户注册/登陆代码(MySQL)

    记录一下,以备后用 Settings = require '../../settings.js' exports.register = (req, res) -> nick_name = req ...

  2. nodejs学习笔记三(用户注册、登录)

    1.定接口      /user 接口               输入    act=reg&user=aaa&pass=123456               输出     {& ...

  3. 基于NodeJS的秘室聊天室

    借着放假期间将NodeJS重新回顾了一下并玩了一下sketch来进行设计界面,很不错.(注:代码整理后会放到github上,请关注.) 本次聊天室我给它定义了一个名称叫“秘密聊天室”. 需求: 技术选 ...

  4. NodeJS 模块开发及发布详解

    NodeJS 是一门年轻的语言,扩展模块并不太全,经常我们想用某个模块但是却找不到合适的.比如前两天我需要使用hmac和sha1来做签名,就没有找到一个比较好用的模块,这时候就需要我们自己来实现相应的 ...

  5. 大熊君大话NodeJS之------基于Connect中间件的小应用(Bigbear记事本应用之第一篇)

    一,开篇分析 大家好哦,大熊君又来了,昨天因为有点个人的事没有写博客,今天又出来了一篇,这篇主要是写一个记事本的小应用,前面的文章, 我也介绍过“Connect”中间件的使用以及“Mongodb”的用 ...

  6. nodeJS---express4+passport实现用户注册登录验证

    网上有很多关于passport模块使用方法的介绍,不过基本上都是基于express3的,本文介绍在express4框架中使用passport模块. 前言 passport是一个功能单一,但非常强大的一 ...

  7. 基于Cloud Foundry平台部署nodejs项目上线

    Cloud Foundry(以下简称CF),CF是Vmware公司的PaaS服务平台,Paas(Platform as a Service,平台即服务), 是为开发者提供一个应用运行的平台,有了这人平 ...

  8. nodejs开发指南读后感

    nodejs开发指南读后感 阅读目录 使用nodejs创建http服务器; supervisor的使用及nodejs常见的调式代码命令了解; 了解Node核心模块; ejs模板引擎 Express 理 ...

  9. NodeJs开发的CLI——与telnet进行通信的聊天程序

    前言: (在NodeJs中,我们想要开启一个tcp协议的做法就是引入net内置对象:      const net = require('net'); ——ES6      var net = req ...

随机推荐

  1. mysql管理工具navicat的快捷键

    1. ctrl + q  或者 ctrl+n: 打开新查询窗口 2. ctrl + r: 运行当前窗口内的所有语句 3. ctrl + shit + r: 只运行选中的语句 4. ctrl + w: ...

  2. xinetd被动服务唤醒

    rsync设置: 1.打开rsync控制开关(修改文件 /etc/default/rsync)2.sudo cp /usr/share/doc/rsync/examples/rsyncd.conf / ...

  3. Ubuntu系统下解决“YourUserName不在sudoers文件中。此事将被报告”的问题

    本文由荒原之梦原创,原文链接:http://zhaokaifeng.com/?p=624 问题描述: 之前在使用Fedora系统时遇到过在使用 sudo 时提示"YourUserName不在 ...

  4. JS for循环有关变量类型的问题/魔兽世界样式的tooltip

    <script> var num = 100; for (var i=num-5;i<num+5;i++){ // console.log(typeof(i)); console.l ...

  5. Effective java-对象的创建和销毁

    说到java对象的创建,首先应该提下java的内存机制,最主要的两块应该就是堆内存和栈内存. 简单点来说栈内存主要是保存基本数据类型的值和保存引用变量,堆内存主要用来存放new产生的对象,数组. 堆是 ...

  6. Java 字符流文件读写

    上篇文章,我们介绍了 Java 的文件字节流框架中的相关内容,而我们本篇文章将着重于文件字符流的相关内容. 首先需要明确一点的是,字节流处理文件的时候是基于字节的,而字符流处理文件则是基于一个个字符为 ...

  7. Golang错误和异常处理的正确姿势

    Golang错误和异常处理的正确姿势 错误和异常是两个不同的概念,非常容易混淆.很多程序员习惯将一切非正常情况都看做错误,而不区分错误和异常,即使程序中可能有异常抛出,也将异常及时捕获并转换成错误.从 ...

  8. 【组合数学】Bzoj2916 [Poi1997]Monochromatic Triangles

    Description 空间中有n个点,任意3个点不共线.每两个点用红线或者蓝线连接,如果一个三角形的三边颜色相同,那么称为同色三角形.给你一组数据,告诉你哪些点间有一条红线,计算同色三角形的总数. ...

  9. BZOJ_1030_[JSOI2007]文本生成器_AC自动机+DP

    BZOJ_1030_[JSOI2007]文本生成器_AC自动机+DP Description JSOI交给队员ZYX一个任务,编制一个称之为“文本生成器”的电脑软件:该软件的使用者是一些低幼人群, 他 ...

  10. BZOJ_3048_[Usaco2013 Jan]Cow Lineup _双指针

    BZOJ_3048_[Usaco2013 Jan]Cow Lineup _双指针 Description Farmer John's N cows (1 <= N <= 100,000) ...