一、项目预览

登入页

注册页

找回密码

登入成功页

二、开发前准备

1.安装Express!

现在宝塔面板 软件商店中安装PM2管理器

在宝塔终端上输入以下命令

npm install -g express-generator

2.创建项目 miaomiaoserver

在终端cd进入你想要创建这个项目的目录下
在分别输入以下命令来启动程序

// 创建喵喵项目
// 进入项目文件
// 安装自带的模块
// 安装mongoose模块操纵数据库
// 启动项目

express -e miaomiaoserver
cd miaomiaoserver
cnpm -i
cnpm i -s mongoose
npm start

输入localhost:3000显示以下页面证明项目创建成功

因为是在宝塔下创建的项目 所以我在自己的电脑上输入ip地址:3000测试

3.安装MongoDB数据库

4.项目连接MongoDB数据库

在miaomiaoserver项目目录下创建untils文件夹，文件夹下新建config.js

var mongoose = require('mongoose');var Mongoose = {url : 'mongodb://localhost:27017/miaomiao',connect(){mongoose.connect(this.url,{ useNewUrlParser: true, useUnifiedTopology: true } ,(err)=>{if(err){console.log('数据库连接失败');console.log(err)console.log('数据库连接失败');return}console.log('数据库连接成功');})}
};module.exports = {Mongoose,
};

然后在app.js中引入

var { Mongoose } = require('./untils/config.js');
Mongoose.connect();

5.创建miaomiao数据库

在这里我用的是Robomong这个可视化窗口来连接mongdb然后创建数据库

提示:这边电脑上连接的是服务器里面的数据库所以要自己的服务器ip地址加上27017，而且必须要放行27017端口才能连接

然后在Robomong里创建miaomiao数据库即可

三、创建用户接口

1.创建对外的接口

在routes下的users.js文件中创建对外接口

var usersController = require('../controllers/users.js')router.post('/login' , usersController.login);
router.post('/register' , usersController.register);
router.get('/verify' , usersController.verify);
router.get('/logout' , usersController.logout);
router.get('/getUser' , usersController.getUser);
router.post('/findPassword' , usersController.findPassword);
router.get('/verifyImg' , usersController.verifyImg);

2.封装对外的接口

创建controllers文件夹，然后创建users.js文件，在文件内部写好方法

var login = async (req,res,next)=>{};var register = async (req,res,next)=>{};var verify = async (req,res,next)=>{};var logout = async (req,res,next)=>{};var getUser = async (req,res,next)=>{};var findPassword = async (req,res,next)=>{};var verifyImg = async(req,res,next)=>{}；module.exports = {login,register,verify,logout,getUser,findPassword,verifyImg,
};

3.完善verify接口

Ⅰ、开启邮箱验证

登入qq邮箱进入设置，点击账户设置，然后开启POP3/SMTP和IMAP/SMTP服务服务，记住生成的授权码

Ⅱ、启用Nodemailer

安装Nodemailer

npm i -s nodemailer

在配置untils文件下的config.js中写连接邮箱

var nodemailer = require('nodemailer');var Email = {config : {host: "smtp.qq.com", //指定为qq邮箱port: 587,auth: {user: '********', // qq邮箱账号pass: '********', // 生成的授权码}},get transporter(){return nodemailer.createTransport(this.config);},get verify(){return Math.random().toString().substring(2,6);},
};module.exports = {   Email
};

Ⅲ、开启邮箱验证

var { Email } = require('../untils/config.js'); // 引入模块var verify = async (req,res,next)=>{var email = req.query.email;var verify = Email.verify;req.session.verify = verify;req.session.email = email;var mailOptions ={from: '喵喵网',to: email,subject: "喵喵网邮箱验证码",text: "验证码" + verify};Email.transporter.sendMail(mailOptions,(err)=>{if(err){res.send({msg : '验证码发送失败',status : -1})}else{res.send({msg : '验证码发送成功',status : 0})}});};

Ⅳ、验证接口

验证接口我是在Postman中进行验证
1.选择get方法
2.选择需要验证的接口
3.输入需要接受验证码的邮箱
4.发送请求
5.当看到验证码发送成功的时候证明输入发送成功
6.收到验证码

4.完善register接口

Ⅰ、接收注册信息

为了让在verify 接口中接受到的数据能够在register接口中得到
1.安装第三方模块session中间件

npm install express-session

2.在app.js中进行配置

var session = require('express-session');
app.use(session({secret: '$#$#$#', //用来加密的属性，复杂一点都行name : 'sessionId',resave: false,saveUninitialized: false,cookie: { // 过期时间maxAge : 1000*60*60}
}));

Ⅱ、完善models层-数据库存储

新建models文件创建users.js文件用来在mongdb数据库存储交互

var mongoose = require('mongoose');
mongoose.set('useCreateIndex',true);var UserSchema = new mongoose.Schema({username : { type : String , require : true , index : { unique : true } },password : { type : String , require : true },email : { type : String , require : true , index : { unique : true } },date : { type : Date , default : Date.now() },
});var UserModel = mongoose.model('user',UserSchema);
UserModel.createIndexes();var save = (data)=>{var user = new UserModel(data);return user.save().then(()=>{return true;}).catch(()=>{return false;});
};module.exports = {save,
}

Ⅲ、验证注册信息是否匹配

var UserModel = require('../models/users.js');
var register = async (req,res,next)=>{var { username , password , email , verify } = req.body;if( email !== req.session.email || verify !== req.session.verify ){res.send({msg : '验证码输入错误',status : -1});return;}var result = await UserModel.save({username,password,email});if(result){res.send({msg : '注册成功',status : 0});}else{res.send({msg : '注册失败',status : -2});}};

Ⅳ、验证接口

先用verify接口发送验证码

需要注意的点:
1.选择post方法
2.选择Body数据 x-www-form-urlencoded
3.输入正确数据
4.发送请求
5.注册成功
6.在数据库可视化工具中查看到注册的信息

5.完善login接口

Ⅰ、寻找匹配用户

在models下的users.js写个方法用来查找数据库里的数据

var findLogin = (data)=>{return UserModel.findOne(data);
}
module.exports = {findLogin,
}

Ⅱ、验证注册信息是否匹配

var login = async (req,res,next)=>{var { username , password ,verifyImg} = req.body;var result = await UserModel.findLogin({username,password});if(result){req.session.username = username;// 用于记录是否登入账户res.send({msg : '登入成功',status : 0});}else{res.send({msg : '用户名或密码输入错误',status : -1});}
};

Ⅲ、验证接口

输入刚注册的账户和密码，出现登入成功即表示登入成功

6.完善logout、getUser接口

Ⅰ、logout接口

var logout = async (req,res,next)=>{req.session.username = '';res.send({msg : '退出成功',status : 0});
};

Ⅱ、getUser接口

var getUser = async (req,res,next)=>{if(req.session.username){res.send({msg : '获取用户信息成功',status : 0,data : {username : req.session.username,}});}else{res.send({msg : '获取用户信息失败',status : -1});}
};

Ⅲ、验证接口

1.先登入

2.获取用户信息

3.退出登入

4.再次尝试获取用户信息

7.完善findPassword接口

Ⅰ、新建updatePassword方法

在models在的users.js文件下新建一个updatePassword方法，并添加对外接口

var updatePassword = (email , password)=>{return UserModel.update({email} , { $set : {password} }).then(()=>{return true;}).catch(()=>{return false;});
}
module.exports = {updatePassword,
}

Ⅱ、findPassword接口

var findPassword = async (req,res,next)=>{var { email , password , verify } = req.body;if( email === req.session.email && verify === req.session.verify ){var require = await UserModel.updatePassword(email , password);if(require){res.send({msg : '修改密码成功',status : 0})}else{res.send({msg : '修改密码失败',status : -1});}}else{res.send({msg : '验证码错误',status : -1});}
};

Ⅲ、验证接口

1.发送验证码

2.修改密码

3.验证是否修改成功

喵喵项目-后台登入（上）相关推荐

1. Fastadmin后台登入问题

   最近更新了fastadmin框架的最新版,发现后台登入有个很不好的体验. 每次更换不同的网络,相同的账号会需要重新登入,这样会显得很麻烦. 经过排查,原来是新版本做个IP地址比对,就是每次有更新IP地 ...

2. Magento 安装后台登不上的解决方法

   刚安装进入后台在后台那输入错误的密码提示密码出错,正确的密码还是跳到登陆页面. C:\wamp\www\magento\app\code\core\Mage\Core\Model\Session\Ab ...

3. 后台登入万能密码合集

   asp aspx万能密码 1: "or "a"="a    2: ')or('a'='a    3:or 1=1--    4:'or 1=1--    5:a ...

4. 实现账号在一端登入_跟我学spring security 基于数据库实现一个基本的登入登出...

   第一章我们基于内存中的用户信息实现了一个基本的登入功能,不过实际的项目中用户信息一般都是存在数据库中的.本章我们来实现一个比较接近真实项目的登入登出,同时引入UserDetailsService的概念 ...

5. android项目实战博学谷源码_Vue框架：史上最详细的Vue实战项目之喵喵电影（视频+源码）...

   Vue是web前端中重要的框架之一,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.所以,对于web前端开 ...

6. [小白的Web全栈之旅]独立开发电子商务网站--管理员后台开发（二、登入实现+管理商品【上】）

   哈喽大家好,今天博主要讲解的是独立开发电子商务网站的第五篇--项目创建+数据库开发,想要预览整个系列博客的参考目录请点击这里 在本博客,博主会讲解: 通过查询MySQL实现管理员登入 查询已上架商品 ...

7. 详细介绍：如何用Vue完成喵喵电影项目？

   Vue是web前端中重要的框架之一,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.所以,对于web前端开 ...

8. 最最最详细的springboot项目中集成微信扫码登入功能.步骤代码超级详细(OAuth2)

   说到登录注册,就会想到先要注册一个用户名,在进行登入,但是现在大多数的网站都集成了微信登入,不需要注册,给你一个二维码,微信一扫直接登录.这确实是十分便捷的.所以我们会尽量在项目中实现这一功能.减少用 ...

9. SpringBoot + Vue 用户登入token 之租房管理系统后台 模板

   SpringBoot 项目构建:SpringBoot + MySQL8 + MyBatis-Plus + Redis +定时任务框架(elastic-job) + Spring Security + ...

最新文章

1. python 实现HMAC_SHA1算法
2. C#设计模式学习资料--原型模式
3. c#中字节数组byte[]、图片image、流stream，字符串string、内存流MemoryStream、文件file，之间的转换
4. Mysql对字符串去掉前后空格(trim)或者指定字符
5. 滋润万物的173dmba
6. 再谈 Linux下的nanosleep函数
7. toolbox、library 的组织
8. 【转】JAVA错误：The public type *** must be defined in its own file***
9. MySQL8的新特性ROLE
10. 数据库索引选择的探索（二）之直方图
11. SCU 4487 king's trouble I
12. 单栏插入脚注删除数字编号及黑色线条（Word 2010）
13. intel 电脑棒一代linux,英特尔的新一代电脑棒内建 Core m3 / m5 处理器
14. java 比较当前时间_java时间比较
15. 最大流之Dinic算法
16. 匹配问题： 匈牙利算法 、最优指派、相等子图、库恩—曼克莱斯 (Kuhn-Munkres) 算法
17. 66亡灵app隐私政策
18. 四年级学生要用计算机吗,四年级计算机的教学计划
19. js解析json报错
20. synergy linux 无法切换,Synergy 变得越来越易用

热门文章

1. 基于天池淘宝用户100万条行为数据分析——SQL、Tableau
2. 盘点10大热门区块链开源软件，你知道几个？
3. BotVS开发基础—2.5 状态信息显示表格
4. PTA - 数据库合集56
5. 自用--选择问题（P85）
6. Q1业绩成长超预期，没了左晖的贝壳未来谁能掌舵？
7. Mac版Cornerstone破解方法
8. BeagleBoneBlack学习（一）：BBB相关文档及链接
9. 怎么批量删除word文档超链接？
10. Lucene bm25 结合 jieba中文分词搜索