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