Nodejs實現用戶注冊

番茄西紅柿發布于2019-04-23 11:40 / 819人閱讀

摘要：創建連接池對象導出連接池對象引入模塊創建連接池對象導出連接池對象托管靜態資源到使用中間件使用路由器掛在到指定的位置引入模塊引入路由器創建服務器監聽端口托管靜態資源使用中間件掛載路由器引入連接池模塊創建路

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

界面展示：

云服務器 GPU云服務器 nodejs實現聊天 asp實現注冊 php實現用戶注銷 java注冊實現原理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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