node ajax实现登录注册,nodejs实现简易登录注册
介绍 Nodejs 登录与注册并实现与 MongoDB 数据储存与查询
背景
之前一直都有学过 Node，但是没怎么上心，然而现在有业务需求同时也希望自己多掌握点技能，因此下定决心学习 Node。本文内容还是参考《了不起的 Node.js》里面的案例，但只是参考了一部分。
项目例子采用 MVC 模式
项目结构1
2
3
4
5
6
7
8
9
|- view
| |- login.pug
| |- signup.pug
| |- layout.pug
|- model
| |- server.js
|- controller
| |-index.js
|- index.js
所需要的包，其中express-session验证用户信息的。json1
2
3
4
5
6
7
8
9
{
...
"dependencies": {
"express": "^4.16.4",
"body-parser": "^1.19.0",
"express-session": "^1.16.1"
}
...
}
注册
公共模板pug1
2
3
4
5
6
7
8
doctype 5
html
head
title MongoDB example
body
h1 My first MongoDB app
hr
block body
注册界面pug1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//- signup.pug
extends layout
block body
form(action="/signup", method="POST")
fieldset
legend Sign up
p
label First
input(name="first", type="text")
p
label Last
input(name="last", type="text")
p
label Email
input(name="email", type="text")
p
label Password
input(name="password", type="text")
p
button Submit
p
a(href="/") Go back
后端代码js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const controller = require('./controller');
const urlencodedParser = bodyParser.urlencoded({ extended: false });
app.get('/signup', (req, res) => {
res.render('signup');
});
app.post('/signup', urlencodedParser, controller.postSignUp);
app.listen(3000, () => {
console.log('start');
});
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// controller/index.js
const model = require('../model/server');
exports.postSignUp = (req, res) => {
const { first, last, email, password} = req.body;
// 交由model来存储数据
model.insert({
first,
last,
email,
password
}, (num) => {
if (num === -1) {
res.redirect('/error'); // 这里其实是跳转错误界面，这些细节就不介绍了
return;
}
if (1 === num) {
res.redirect(`/login/${email}`);
return;
}
})
};
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// model/server.js
const MongoClient = require("mongodb").MongoClient;
const url = "mongodb://localhost:27017";
const dbName = "student";
MongoClient.connect(url, function(err, client){
if (err) throw err;
const col = client.db(dbName).collection("classes");
// 插入数据
exports.insert = (data, next) => {
col.insertOne(data,
err => {
if (err) {
next(-1);
return;
}
next(1);
}
);
};
});
登录
登录界面pug1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
extends layout
block body
form(action="/login", method="POST")
fieldset
legend Log in
if (signupEmail)
p Congratulations on signing up! Please login below
p
label Email
input(name="email", type="text", value=signupEmail)
p
label Password
input(name="password", type="text")
p
button Submit
p
a(href="/") Go back
后端代码js1
2
3
4
5
6
7
8
9
10
11
12
...
app.get('/login', (req, res) => {
res.render('login');
});
app.get('/login/:signupEmail', (req, res) => {
res.render("login", { signupEmail: req.params.signupEmail });
});
app.post("/login", urlencodedParser, controller.postLogin);
...
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// controller/index.js
...
exports.postLogin = (req, res) => {
const { email, password } = req.body;
model.find({ email, password }, (num, result) => {
if (-1 === num) {
res.redirect('/error');
}
if (0 === num) {
res.send('
Email or password is not correct. Go back and try again.
');
return;
}
if (1 === num) {
// 存储用户信息
req.session.loggedIn = result._id.toString();
res.redirect('/');
}
});
}
...
js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// model/server.js
MongoClient.connect(url, function(err, client){
...
exports.find = (data, next) => {
col.findOne(
data,
(err, result) => {
if (err) {
next(-1);
return;
}
if (!result) {
next(0);
return;
}
next(1, result);
}
);
}
...
}
补充
其实项目中还有 logout 功能，显示用户功能没有讲，但是这些相对简单，因此就不展开了。
在登录的时候有一句req.session.loggedIn = result._id.toString();，如果想通过 id 查询数据，则
js1
2
3
4
5
const ObjectId = require("mongodb").ObjectId;
const ID= req.session.loggedIn;
model.find({_id: ObjectId(ID)}, (num, result) => {
//...
});
跟新于 19-05-23
使用mongoose替代mongodb保存数据, 具体文档参照mongoose 官网
主要改动在model/server.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// model/server.js
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
mongoose.connect("mongodb://localhost/student", { useNewUrlParser: true });
const personSchema = new Schema(
{
first: String,
last: String,
email: {
type: String,
unique: true
},
password: {
type: String,
unique: true
}
},
{ autoIndex: false }
);
const Person = mongoose.model('classes', personSchema);
exports.insert = (data, next) => {
const person = new Person(data);
person.save(err => {
if (err) {
next(-1);
return;
}
next(1);
});
}
exports.find = (data, next) => {
Person.findOne(data, (err, result) => {
if (err) {
next(-1);
return;
}
if (!result) {
next(0);
return;
}
next(1, result);
});
}
补充
原来的 Mongodb 获取 ObjectId 转变成 Mongoose 方式
const ObjectId = require(“mongodb”).ObjectId;
const ObjectId = require(“mongoose”).Types.ObjectId;
总结
总的来说迈出了第一步
node ajax实现登录注册,nodejs实现简易登录注册相关推荐
- node.js(node.js+mongoose小案例)_实现简单的注册登录退出
一.前言 通过node.js基本知识对node.js基本知识的一个简单应用 1.注册 2.登录 3.退出 二.基本内容 1.项目结构搭建如图所示 2.这个小案列中用到了art-template子模板以 ...
- java简单小程序_Java简易登录注册小程序
这篇文章主要介绍了Java图形界面开发,简易登录注册小程序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 登录注册小代码,将学过的一些小知识融合在一起进行了使用,加深印象.本例中如果有注释不详细的 ...
- 【Android Studio学习】第一篇、制作一个拥有登录和注册功能的简易APP
目录 第一部分.前言 1.目标效果 2.准备知识 第二部分.详细步骤 1.新建Empty工程 2.添加资源文件 3.搭建注册界面 4.搭建登录界面 5.编写注册界面和登录界面的代码 6.设置APP初 ...
- 【新手向】Python做一个简易登录注册GUI界面(无事件绑定)
Python做一个简易登录注册GUI界面 一,效果展示 (1)运行结果: (2)点击登录: 注:只有用户名:123 密码123456 会提示登录成功. 登录成功示范: 登录失败示范: (3)点击注册 ...
- 基于Java实现简易的 注册 + 登录 系统 （中级）
引言 :这个项目我以学习的角度进行补充和完善,力求把登录 + 注册做到最完美!!! 该项目适用于 学习完 基础的编程语法的同学进行进阶学习 [1]基于Java实现简易的 注册 + 登录 系统 非 数据 ...
- php简易登录注册PHP+MySQL
首先设计数据库的格式: 1:在test数据库中创建表:user(也可以在别的地方进行创建,只要对准好位置即可) 2:创建username(varchar(30)),password(varchar(3 ...
- Java图形界面开发—简易登录注册小程序
登录注册小代码,将学过的一些小知识融合在一起进行了使用,加深印象.本例中如果有注释不详细的地方,详见其它博客. Java程序操作数据库SQLserver详解 功能介绍:简单的登录注册系统,使用了数据库 ...
- 【C语言】简易登录注册系统（登录、注册、改密、文件操作）
概述: 本登录注册系统通过使用C语言中的结构体.函数.文件操作以及指针等,设计与实现了一个小型用户登录注册系统的登录.注册.修改密码等基本功能. 本系统全部功能基本运行良好.用户界面友好.操作简单.使 ...
- java 学生简易登录，注册管理系统
题目分析: *** 1.编写程序: 实现登录注册功能 程序一进来如果没有账号就选择注册,如果有账号就直接登录. 注册功能的时候要输入注册账号.设置密码.输入确认密码.输入邮箱号码.输入性别.输入个人简 ...
- nodejs+vue实现登录界面功能（一）
项目描述:一开始进入登录界面,只有登录成功才可以跳转到主页面,已注册但是忘记密码的进入忘记密码页面,找回密码后进入登录界面. 技术选型:nodejs+vue+stylus 界面效果: 切换登录方式 手 ...
最新文章
- VLC架构及流程分析
- 基于旋转轮廓的点云局部浮点型和二值化特征描述（RCS）
- Elasticsearch-05Elasticsearch之查询与过滤
- 灰度图像的腐蚀与膨胀
- jQuery经典案例【倒计时】
- android微信小程序支持横屏,微信小程序关于横屏存在的一些问题
- HTML第八章ppt,第八章 web基础教程之HTML篇v1.0.ppt
- Git 代码分支管理 / 版本管理
- mysql 备份如何使用_如何使用命令来备份和还原MySQL数据库
- 数据科学入门与实战：玩转pandas之七数据分箱技术，分组技术，聚合技术
- [设计模式] - Proxy代理模式
- 地震勘探原理名词解释
- 人脸方向学习（十二）：Face Detection-Tiny-DSOD解读
- 3049 舞蹈家怀特先生
- prelu（）的 tf 代码
- python-sklearn数据分析-线性回归和支持向量机（SVM）回归预测（实战）
- [LuoguP3503]「BZOJ2086」[POI2010] Blocks
- 记录在训练深度学习算法过程中遇到的问题及解决办法。持续更新中....
- 怎么安装Python
- 视觉SLAM中的李群李代数基础