NodeJS博客实战09_用户登录的实现

川长思鸟来 2022-05-28 02:12 191阅读 0赞

用户登录与用户注册功能类似，都是将获取的数据发送给后端进行合法性判断，然后在执行数据库操作

前端使用ajax将获取的登录信息发送给后端；

将返回的信息展示在前端页面上，若登录成功，展示出欢迎面板，并附上用户名和隐藏登录面板；

public/js/index.js:

$(function(){
    	var toLogin = $('a.toLogin'),
    		toRegister = $('a.toRegister'),
    		loginInfo = $('div.loginInfo'),
    		registerInfo = $('div.registerInfo'),
    		loginBtn = $('input.loginBtn'),
    		registerBtn = $('input.registerBtn'),
    		registerRemind = $('.registerRemind'),
    		loginRemind = $('.loginRemind'),
    		showInfo = $('.showInfo');
    	toLogin.on('click',function(){
    		registerInfo.hide();
    		loginInfo.show();
    	})
    	toRegister.on('click',function(){
    		loginInfo.hide();
    		registerInfo.show();
    	})
    	//注册
    	registerBtn.on('click',function(){
    		$.ajax({
    			type:'post',
    			url: '/api/user/register',
    			data: {
    				username:registerInfo.find('[name="username"]').val(),
    				password:registerInfo.find('[name="pwd"]').val(),
    				repassword:registerInfo.find('[name="rpwd"]').val()
    			},
    			dataType: 'json',
    			success: function(res){
    				registerRemind.html(res.message);//返回提示信息
    				if(!res.code){
    					setTimeout(function(){
    						registerInfo.hide();
    						loginInfo.show();
    					},1000);//这是1秒延迟跳转
    				}
    			}
    		})
    	})
    	//登录
    	loginBtn.on('click',function(){
    		$.ajax({
    			type: 'post',
    			url: '/api/user/login',
    			data: {
    				username:loginInfo.find('[name="user2"]').val(),
    				password:loginInfo.find('[name="pwd2"]').val()
    			},
    			dataType: 'json',
    			success: function(res){
    				loginRemind.html(res.message);//返回提示信息
    				if(!res.code){
    					setTimeout(function(){
    						loginInfo.hide();
    						showInfo.show();
    						showInfo.find('.name').html(res.userInfo.username);
    						showInfo.find('.info').html('你好，欢迎光临我的博客');
    					},1000);//这是1秒延迟跳转
    				}
    			}
    		})
    	})
    })

在后端api.js接受并处理用户登录数据，若用户名或者密码不为空，则将用户名和密码在数据库中进行匹配，匹配成功则返回用户信息；

同样使用moogoose的模型类findOne方法查询数据库：

var express = require('express');
    var router = express.Router();
    var User = require('../models/User');//引入模型类
    //定义返回变量格式
    var resData; 
    router.use(function(req,res,next){
    	resData = {
    		code:0,
    		message:''
    	};
    	next();
    })
    //注册逻辑
    router.post('/user/register',function(req,res,next){
    	var username = req.body.username;
    	var password = req.body.password;
    	var repassword = req.body.repassword;
    	//用户名不能空
    	if(username == ''){
    		resData.code = 1;
    		resData.message = '用户名不能为空';
    		res.json(resData); //使用res.json的方法返回前端数据
    		return;
    	}
    	//密码不能为空
    	if(password == ''){
    		resData.code = 2;
    		resData.message = '密码不能为空';
    		res.json(resData);
    		return;
    	}
    	//两次密码不能不一样
    	if(password != repassword){
    		resData.code = 3;
    		resData.message = '两次输入的密码不一致';
    		res.json(resData);
    		return;
    	}
    	//验证用户名是否已经注册，需要通过模型类查询数据库
    	User.findOne({
    		username:username
    	}).then(function(userInfo ){
    		// console.log(userInfo); //若控制台返回空表示没有查到数据
    		if(userInfo){
    			//若数据库有该记录
    			resData.code = 4;
    			resData.message = '用户名已被注册';
    			res.json(resData);
    			return;
    		}
    		//用户名没有被注册则将用户保存在数据库中
    		var user = new User({
    			username:username,
    			password:password
    		});//通过操作对象操作数据库
    		return user.save();
    	}).then(function(newUserInfo){
    		resData.message = '注册成功';
    		res.json(resData);
    	});
    
    })
    
    router.post('/user/login',function(req,res){
    	var username = req.body.username;
    	var password = req.body.password;
    	if(username == '' || password == ''){
    		resData.code = 1;
    		resData.message = '用户名或密码不能为空';
    		res.json(resData);
    		return;
    	}
    	//查询数据库验证用户名和密码
    	User.findOne({
    		username: username,
    		password: password
    	}).then(function(userInfo){
    		if(!userInfo){
    			resData.code = 2;
    			resData.message = '用户名或密码错误';
    			res.json(resData);
    			return;
    		}
    		//验证通过则登录
    		resData.message = '登录成功';
    		resData.userInfo = {
    			_id: userInfo._id,
    			username: userInfo.username
    		};
    		res.json(resData);
    		return;
    	})
    })
    
    module.exports = router;

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关 NodeJS博客实战16_博客分类的修改和删除

源码地址:[https://github.com/RidingACodeToStray/Nodejs\_blog][https_github.com_RidingACodeTo

╰半橙微兮°/ 2022年05月28日 11:14/ 0 赞/ 244 阅读

相关 NodeJS博客实战15_博客分类的添加

源码地址：https://github.com/RidingACodeToStray/Nodejs\_blog 主要功能： 1）在后台管理页面添加分类管理页面 2）点击添

以你之姓@/ 2022年05月28日 07:59/ 0 赞/ 282 阅读

相关 NodeJS博客实战13_后台管理注册用户展示

源码地址：https://github.com/RidingACodeToStray/Nodejs\_blog 主要实现功能： 1）登录后台管理后进入用户管理界面，通过查询

喜欢ヅ旅行/ 2022年05月28日 07:42/ 0 赞/ 271 阅读

相关 NodeJS博客实战09_用户登录的实现

用户登录与用户注册功能类似，都是将获取的数据发送给后端进行合法性判断，然后在执行数据库操作前端使用ajax将获取的登录信息发送给后端；将返回的信息展示在前端页面上，若登

川长思鸟来/ 2022年05月28日 02:12/ 0 赞/ 192 阅读

相关 NodeJS博客实战08_用户注册和数据库验证

1.注册写入数据库在上一篇文章中在后端验证了用户注册输入信息不合法的情况，本篇主要讲解当用户输入合法后数据库写入的内容写入数据则需要对数据库进行操作，前面介绍了使用mo

灰太狼/ 2022年05月28日 00:55/ 0 赞/ 208 阅读

相关 NodeJS博客实战11_普通用户与管理员登录

普通用户和管理员的区别空通过在数据库中增加一个字段实现，给每个用户设置一个字段为idAdmn，如果该用户为管理员，则值为true，否则为false；当用户登录后返回的use

小鱼儿/ 2022年05月27日 20:57/ 0 赞/ 420 阅读

相关 NodeJS博客实战24_前台博客评论展示

源码地址：[https://github.com/RidingACodeToStray/Nodejs\_blog][https_github.com_RidingACodeTo

左手的ㄟ右手/ 2022年05月27日 08:36/ 0 赞/ 267 阅读

相关 NodeJS博客实战22_前台博客分类展示

源码地址：[https://github.com/RidingACodeToStray/Nodejs\_blog][https_github.com_RidingACodeTo

水深无声/ 2022年05月27日 08:21/ 0 赞/ 316 阅读

相关 NodeJS博客实战19_博客内容修改和删除

源码地址：[https://github.com/RidingACodeToStray/Nodejs\_blog][https_github.com_RidingACodeTo

ゝ一纸荒年。/ 2022年05月27日 08:12/ 0 赞/ 251 阅读

相关 NodeJS博客实战18_博客内容的添加功能实现

源码地址：[https://github.com/RidingACodeToStray/Nodejs\_blog][https_github.com_RidingACodeTo

左手的ㄟ右手/ 2022年05月27日 08:05/ 0 赞/ 318 阅读