项目登录功能实现

1、 创建用户集合,初始化用户

真实的登录功能是需要用户信息做支撑,能登录的用户一定是网站的注册用户,用户的信息是存储在服务器端的数据库中的所以要实现登录功能就要先连接数据库,创建用户集合,初始化一个用户用来实现登录功能。

① 连接数据库

在项目根目录中的model文件夹中新建一个conmon.js文件,用于写数据库连接的代码。

// 引入mongoose第三方模块
const mongoose = require('mongoose');
// 连接数据库
mongoose.set('useCreateIndex', true) ;
mongoose.connect('mongodb://localhost/blog', {useUnifiedTopology: true})
	.then(() => console.log('数据库连接成功'))
	.catch(() => console.log('数据库连接失败'));
②创建用户集合

在项目根目录中的model文件夹中新建一个user.js文件,用于写用户集合的相关代码,即创建用户集合规则并应用规则等。

// 创建用户集合
// 引入mongoose第三方模块
const mongoose = require('mongoose');
// 创建用户集合规则
const userSchema = new mongoose.Schema({
	username: {
		type: String,
		required: true,
		minlength: 2,
		maxlength: 20
	},
	email: {
		type: String,
		// 保证邮箱地址在插入数据库时不重复
		unique: true,
		required: true
	},
	password: {
		type: String,
		required: true
	},
	// admin 超级管理员
	// normal 普通用户
	role: {
		type: String,
		required: true
	},
	// 0 启用状态
	// 1 禁用状态
	state: {
		type: Number,
		default: 0
	}
});

// 创建集合并应用集合规则
const User = mongoose.model('User', userSchema);
// 将用户集合做为模块成员进行导出
module.exports = {
    //在ES6当中当对象的键和值相同时可以省略值
    // User:User
    User
}
③初始化用户

向数据库中添加一个用户

User.create({
	username:'司夏',
	email:'[email protected]',
	password:123,
	role:'admin',
	state:0
	}).then((result)=>{console.log(result)})

在这里插入图片描述

2、 为登录表单项设置请求地址、请求方式以及表单项name属性

在这里插入图片描述

3、 当用户点击登录按钮时,获取用户输入内容

想要验证客户端用户是否填写了登录表单,首先就要先获取到用户在表单中填写的内容,如何获取呢?
现在使用js定义一个函数用于获取表单中用户输入的内容,返回值就是一个对象,如下面的对象

{email: '邮箱地址', password: '密码'}

下面代码就是客户端用于获取用户输入内容的代码,我是将这个代码放到了项目根目录下的public文件夹中的js文件夹下的common.js中,因为获取表单内容可能不只是在这里用到在其他地方可能也会用到,所以我把它变成了一个公共模块,需要时只需引用该模块即可。

//获取用户输入内容
function serializeToJson(form) {
    var result = {};
    // [{name: 'email', value: '用户输入的内容'}]
    var f =  form.serializeArray();  
	//使用forEach循环数组,将数组转换成对象
    f.forEach(function (item) {
        // result.email
        result[item.name] = item.value;
    });
    return result;
};

在登录模块中引用common.js;
在这里插入图片描述

4、客户端验证用户是否填写了登录表单, 如果其中一项没有输入,阻止表单提交

获取到用户输入的内容之后就可以对用户输入的内容进行验证了,接下来就是当用户点击登录按钮时,在客户端验证用户是否填写了登录表单,在这里我使用jQuery的方式进行验证。

<script type="text/javascript">
    // 为表单添加提交事件
    $('#loginForm').on('submit', function () {
        // 获取到表单中用户输入的内容
        var result = serializeToJson($(this))
        // 如果用户没有输入邮件地址的话
        if (result.email.trim().length == 0) {
            alert('请输入邮件地址');
            // 阻止程序向下执行
            return false;
        }
        // 如果用户没有输入密码
        if (result.password.trim().length == 0) {
            alert('请输入密码')
            // 阻止程序向下执行
            return false;
        }
    });
</script>

5、 服务器端接收请求参数,验证用户是否填写了登录表单

因为在客户端可以禁用JavaScript,所以在客户端验证用户是否填写了登录表单用时候会失效,这样就需要在服务器端进行二次验证。那现在第一个问题就是如何在服务器端获取用户填写的表单内容,在这里我使用的是body-parser模块去获取并处理post表单内容。

关于body-parser模块基本使用请看这篇:Express请求处理和express-art-template模板引擎(三)

6、 如果其中一项没有输入,为客户端做出响应,阻止程序向下执行

//引入body-parser模块
const bodyPaser = require('body-parser');
//处理post请求参数
app.use(bodyPaser.urlencoded({extended: false}));
	//接收post请求参数进行二次验证
    const {email,password} = req.body;
    // 如果用户没有输入邮件地址或密码
    if(email.trim().length == 0 || password.trim().length == 0 ){
       return res.status(400).render('admin/error',{msg :'邮件地址或者密码错误',time :'2秒后跳转到登录页面页面···'});
    };

error.art代码,里面设置了一个定时器,两秒后跳转到登录页面

{{extend './common/layout.art'}}

{{block 'main'}}
	<h3 class="bg-danger error">{{msg}}</h3>
	<p class="bg-danger">{{time}}</p>
{{/block}}

{{block 'script'}}
	<script type="text/javascript">
		setTimeout(function () {
			location.href = '/admin/login';
		}, 2000)
	</script>
{{/block}}

7、 根据邮箱地址查询用户信息

根据邮箱地址在数据库中查询相关用户信息。

8、 如果用户不存在,为客户端做出响应,阻止程序向下执行

9、 如果用户存在,将用户名和密码进行比对

10、 比对成功,用户登录成功

11、 比对失败,用户登录失败

12、 保存登录状态

13、 密码加密处理

发布了306 篇原创文章 · 获赞 263 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/qq_44721831/article/details/104167824