Nodejs实现用户注册

番茄西红柿发布于2019-04-23 11:40 / 636人阅读

摘要：创建连接池对象导出连接池对象引入模块创建连接池对象导出连接池对象托管静态资源到使用中间件使用路由器挂在到指定的位置引入模块引入路由器创建服务器监听端口托管静态资源使用中间件挂载路由器引入连接池模块创建路

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;

View Code

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);

View Code

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;

View Code

4.html页面

 1 doctype html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>Documenttitle>
 7         
 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 users 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">Registerbutton>
89                             div>
90                         div>
91                     form>
92                 div>
93             div>
94         div>
95         div>
96     body>
97 html>

View Code

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 }

View Code

界面展示：

idc机房托管云服务器 nodejs实现聊天 asp实现注册 php实现用户注销 java注册实现原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1006.html

快速学习nodejs系列：十三、nodejs实现restful api、cookie、session

摘要：在前面的节课程里面，我们已经基本学习完了的知识，达到基础入门的要求。英语的直译就是表现层状态转移。的特点不加密用户可删除可被修改依赖于用户禁用或清除时，读取出错。下节，会开始学习框架。在前面的12节课程里面，我们已经基本学习完了nodejs的知识，达到基础入门的要求。那为什么会在这节说下使用nodejs来实现一些功能，而不继续往下讲呢？原因有2：1.前面讲地都是理论知识，码代码比较少...

asce1885 2019-08-23 12:33 评论0 收藏0
公司项目NODEJS实践0.1[ ubuntu,nodejs,nginx...]

摘要：创建成功后进入文件夹执行执行作用创建文件，维护项目的依赖文件解释创建文件执行作用用系统的编辑器打开文件。我的技术新群上一篇前后端分离项目实践分析下一篇公司项目实践一、前言前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。网上有很多nodeJs的示例，包括和 sql /...

cppprimer 2019-07-25 13:31 评论0 收藏0
Nodejs“实现”Dubbo Provider

摘要：背景目前应用越来越广泛，但和的体系接入困难，所以我们需要实现端的逻辑。使用实现一个可用的完全没有问题，最简单的实现则是在对应集群注册接口与机器的映射关系，便可以访问对应接口。在评估了各种实现方案后，决定放弃开发端，使用的模式。背景目前nodejs应用越来越广泛，但和java的dubbo体系接入困难，所以我们需要实现node端的dubbo provider逻辑。java的dubbo ...

Charles 2019-08-23 10:30 评论0 收藏0
Nodejs“实现”Dubbo Provider

摘要：背景目前应用越来越广泛，但和的体系接入困难，所以我们需要实现端的逻辑。使用实现一个可用的完全没有问题，最简单的实现则是在对应集群注册接口与机器的映射关系，便可以访问对应接口。在评估了各种实现方案后，决定放弃开发端，使用的模式。背景目前nodejs应用越来越广泛，但和java的dubbo体系接入困难，所以我们需要实现node端的dubbo provider逻辑。java的dubbo ...

zhouzhou 2019-08-19 10:51 评论0 收藏0
解析nodeJS模块源码亲手打造基于ES6的观察者系统

摘要：为指定事件注册一个单次监听器，即监听器最多只会触发一次，触发后立刻解除该监听器。移除指定事件的某个监听器，监听器必须是该事件已经注册过的监听器。返回指定事件的监听器数组。如何创建空对象我们已经了解到，是要来储存监听事件监听器数组的。毫无疑问，nodeJS改变了整个前端开发生态。本文通过分析nodeJS当中events模块源码，由浅入深，动手实现了属于自己的ES6事件观察者系统。千万不...

csRyan 2019-08-20 15:19 评论0 收藏0
全栈最后一公里 - Node.js 项目的线上服务器部署与发布

摘要：没有耐心阅读的同学，可以直接前往学习全栈最后一公里。我下面会罗列一些，我自己录制过的一些项目，或者其他的我觉得可以按照这个路线继续深入学习的项目资源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技术软文，阅读需谨慎，长约 7000 字，通读需 5 分钟大家好，我是 Scott，本文通过提供给大家学习的方法，...

singerye 2019-05-29 19:29 评论0 收藏0