node+mysql+express實作登入、注冊功能

18.3、mysql+node實作注冊功能(

接着18.1

)

經驗:前端人員需要注意這個

需求

1.失焦時，查詢電話号碼是否存在，若存在，顯示已被注冊

2.當電話号碼、密碼、确認密碼全部通過才能注冊到資料庫

步驟

• 1.給項目安裝資料庫

  

• 2.實作需求一

  1.更改register.html為如下，這樣才能送出資料過去

  

  2.修改register.js

  思路

  :把前端輸入的手機号碼傳到後端，後端拿這個值查詢資料，若傳回的是空數組

  ，則沒注冊，否者為注冊了的

  注意

  result為數組 若長度為0，沒有注冊，長度不為0，為注冊了

  register.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.render('register');
});

// 檢測電話号碼是否被注冊
router.post('/selectUser', function(req, res, next) {
	// console.log(req.body)
	//擷取前端目前需要注冊的使用者名
	var username=req.body.username
	console.log(username)
	
	// 連接配接資料庫查詢該使用者名是否已經存在
	// 引入mysql
	var mysql  = require('mysql');  
	 
	 // 建立mysql的連接配接(配置連接配接資料庫的基本資訊)
	var connection = mysql.createConnection({     
	  host     : 'localhost',       
	  user     : 'root',              
	  password : 'root',   //自己設定的密碼    
	  port: '3306',                   
	  database: 'h5' //資料庫名
	}); 
	 
	 // 連接配接資料庫
	connection.connect();
	 
	var  sql = 'SELECT * FROM user where username=?';
	var sqlparams=[username]
	//查
	connection.query(sql,sqlparams,function (err, result) {
	        if(err) return console.log(err)
			
			// result為數組	若長度為0，沒有注冊，長度不為0，為注冊了
			// console.log(result)
			// res.send()發送資料到前端，	隻要後端有輸出	則為ajax請求成功的傳回值
			if(result.length){
				// 注冊了
				res.send('1')
			}else{
				//沒注冊
				res.send('2')
			}
	 
	});
	 
	connection.end();
});
module.exports = router;

           

此時效果圖

• 3.實作需求二

  為了全部正确才能跳轉，在register.js中設定三個值全為false

  

  接下來就是全部正确後通過ajax發送資料給背景，背景拿到值後寫進資料庫

• 4.總結：

  1）實作手機号通過，對應的flag為true的情況隻能是在

  未被注冊時

  ，而為false：不滿足條件指派為true

  2）第二次密碼不需要寫正則，隻判斷是否與密碼相等

  3）實作手機号、密碼、确認密碼全部通過後點選注冊才能有用更簡單的寫法

  

  4）ajax請求和點選事件會沖突，即送出表單的時候用submit，不用ajax

18.4、mysql+node+express實作登入功能

前期準備 安裝了mysql node express

效果圖

功能需求

點選登入後，如果輸入的資訊與資料庫不比對，不會跳轉到登入成功界面，否者，跳轉到登入成功頁面

思路：再表單裡面把手機号、密碼傳到後端，後端根據手機号查詢資料庫，然後比較傳過去的密碼和查出來的密碼，若相同，渲染頁面，否者，你輸入的密碼或者手機号錯誤

步驟

• 1.更改form表單的action和送出方式

  

• 2.因為action指向的/loginsuccess，是以需要再routes建立/loginsuccess，然後引入app.js，再app.js使用

  

• 3.先在loginsuccess.js裡面寫讓頁面渲染

var express = require('express');
var router = express.Router();


/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('loginsuccess');
});


router.post('/', function(req, res, next) {
   //res.render渲染頁面
   res.render('loginsuccess')
});
   


module.exports = router;

           

• 4.上一步過後就可以連接配接資料庫了，然後查找輸入的手機号對應的密碼，并比較兩個密碼，一樣就渲染頁面

  

總結

1）自己第一次寫這個功能，經驗不足，反應慢

2）ajax請求要在局部重新整理的時候用，當有表單的時候，一般送出給action的路徑，不要用ajax