Nodejs實現用戶註冊_ZenDei技術網路在線

1創建連接池對象 2導出連接池對象 1 /** 2 * 1.引入mysql模塊 3 * 2.創建連接池對象 4 * 3.導出連接池對象 5 */ 6 const mysql = require('mysql'); 7 var pool = mysql.createPool({ 8 host:'loc ...

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>Document</title>
 7         <!--<link rel="stylesheet" type="text/css" href="/code.css" />-->
 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 user's 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">Register</button>
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

界面展示：