喵喵项目-后台登入（上）

最新推荐文章于 2023-12-14 19:39:02 发布
最新推荐文章于 2023-12-14 19:39:02 发布
阅读量1.2k 收藏 2
点赞数
文章标签： mongodb nodejs 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56428769/article/details/116138000
版权

喵喵项目-后台登入接口（上）

一、项目预览

登入页

在这里插入图片描述

注册页

在这里插入图片描述

找回密码

在这里插入图片描述

登入成功页

在这里插入图片描述

二、开发前准备

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.验证是否修改成功
在这里插入图片描述

curryLing
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue搭建喵喵电影
ltians95817的博客
05-27 328
Vue搭建喵喵电影（一） 本地电脑已安装node，vue-cli2 一. 搭建对应项目模板 1.使用vue脚手架（vue-cli）创建一个项目vue_movies vue init webpack vue_movies 2.参数如下： <font-size=12px> Project name:直接回车，默认创建项目时命名 Project description：给项目添加描述，可以回车，默认为(A Vue.js project) Author：作者 Vue build (Use arrow
微信小程序-喵喵小说（完整带后台）小程序源码
06-17
微信小程序-喵喵小说（完整带后台）小程序源码
喵喵项目-后台登入（下）
weixin_56428769的博客
04-28 210
喵喵项目-后台登入实现（下）一、开发前讲解二、开发组件1.创建组件2.配置组件路由3.新建提示框组件三、功能实现1.配置反向代理2.实现Login功能2.实现Center功能3.实现Register功能4.实现FindPassword功能四、构建发布五、项目展示与分享1.项目展示电影页影院页登入页2.资源分享 一、开发前讲解 上篇已经开发完代理所需要的接口，然后可以直接去miaomiao项目里使用这些接口，从而实现登入的功能 二、开发组件 1.创建组件 在views下的Mine中新建center.vue文件
喵喵电影-前端页面开发
weixin_56428769的博客
04-25 2444
喵喵电影前端页面开发 文章目录喵喵电影前端页面开发前言一、项目预览二、开发前准备1.Vue脚手架：vue-cli2.node环境：npm cnpm3.安装插件三、实战开发1.创建项目 miaomiao总结 前言 提示：这是第一次开发项目写博客。本博客主要讲Vue实战之开发喵喵电影中的过程和代码 一、项目预览 主页 影院 电影详情 二、开发前准备 1.Vue脚手架：vue-cli 代码如下（示例）： npm install -g @vue/cli-service-global 2.node环境：
喵API
02-20
喵API 我同时使用和时的列表中的Project Idea 像一样，此小应用程序是使用React构建的，而不是使用fecth调用API数据，此应用程序使用async函数和axios从不同的API调用获取多个数据。 特征： 设计预览： 使用效果 在功能组件中执行副作用是一个好主意，这是获取数据的情况。 通过fetch调用API 我在CatInfo组件中使用了fecthData()函数，该函数使用Promises和async / await从2个不同的API获取数据。 然后使用javascript方法来处理数据。 安装 安装npm npm install 开始项目 npm start
Golang的喵喵哈希-Golang开发
05-26
meow Meow哈希（一种非常快速的非加密哈希）的Golang实现。 警告官方实现不断变化，因此这一步也是如此。 Travis CI针对Meow哈希（极快的非加密哈希）的喵Golang实现的master分支构建测试。 警告官方实现不断变化，...
52.CNN感受野计算 - 喵喵帕斯 - 博客园1
08-03
1. **第一层卷积层**：对于网络的第一层卷积层，其输出特征图上的每个像素的感受野大小与使用的过滤器（kernel）大小相同。例如，如果使用3x3的过滤器，那么每个特征图像素的感受野也是3x3。 2. **深层卷积层**：...
喵喵折+-crx插件
04-01
“喵喵折”是简单易用的购物助手，为您提供商品的历史价格、同款比价、商品收藏、降价提醒以及一键海淘等服务。 喵喵折(原购物小蜜)是一个简单易用的购物助手。安装后，在您浏览电商网站时，为您提供商品的历史价格...
CatBookApp.Api:“喵喵看书”（v3版本）微信小程序初始化Api接口项目源码-看
03-24
原始码说明 当前项目是[喵喵看书]微信小程序的初始化api数据接口项目，也是管理后台的api接口项目；将源码下载到本地后用vs2019打开后会看到有两个web应用程序：WechatMiniProgram.Api ，Backstage.Api，就是分别对应小程序端和管理后台的api数据接口程序 项目是基于.net core 3.1，使用abp（5.5.0）框架进行开发，若要阅读理解项目源码，建议先了解abp ... 数据库使用的是MySQL（不能低于5.7版本），如果想替换其他数据库，需要自己去百度一下怎么改，很简单的 项目启动 step1：vs2019打开项目，生成解决方案，确保没有编译异常。如果有，请自行百度解决... step2：修改数据库连接字符串，文件位置：Configs / appsettings.json，两个api项目都要改哦。因为涉及到微信小程序的授权登录，所以Confi
miaomiaoym:B站vue实战项目喵喵
03-22
千峰vue实战喵喵电影项目原始码及接口文档 连接文档 正在热映 http://39.97.33.178/api/movieOnInfoList?cityId=10 即将上映 http://39.97.33.178/api/movieComingList?cityId=10 搜索 http://39.97.33.178/api/searchList?cityId=10&kw=a 城市 http://39.97.33.178/api/cityList 电影详情 http://39.97.33.178/api/detailmovie?movieId=345808 影院 http://39.97.33.178/api/cinemaList?city=10 城市定位 http://39.97.33.178/api/getLocation
超级网搜(SuperSearch) - 2.1.2.4
01-01
简介(Introduction) 免费、轻量、快速的多引擎搜索工具，拥有详细的搜索分类。 * 免费：无须注册，无任何功能限制； * 轻量：可执行文件的大小只有不到 150KB； * 快速：多线程加快搜索速度，多个引擎的搜索汇集，给你更高的搜索效率。 下载(Download) http://boomworks.googlecode.com/files/supersearch-2.1.2.4.zip 主要功能和特点(Features) * 集成数十个搜索引擎，并详细分类 * 多线程搜索，具有更快的速度 * 引擎支持自定义配置，用户可自己添加 最新版本发布(What's New) * SuperSearch?(超级网搜) 2.0.2.4 版 ！- Boom 2006-3-4 o 更新日文搜索引擎 * SuperSearch?(超级网搜) 2.0.1.4 版 ！- Boom 2006-2-22 o 更换工具栏图标 o 增加[使用多线程]设定项 o 增加 Special thanks * SuperSearch?(超级网搜) 1.6.8.4 版 ！- Boom 2006-2-13 o 增加工具栏按钮 o 增加检测更新功能 o 增加 TabCtrl? 的状态图标 o bugfix File->New 菜单 联系我们(Contact) * boomworks@gmail.com * boomworks@hotmail.com
安装喵版yunzai-bot（Miao-Yunzai）安装云崽bot超详细，Linux（centos）
最新发布
枫的博客
12-14 4636
云崽bot安装，yunzai-bot安装。1、安装包准备：1） Node.js（ 版本至少v16以上 ）官网地址：2） Redis密码:da9bshell可以远程连接服务器，ftp可以上传文件到服务器，具体安装步骤，安装包文件里面有介绍，这里就不介绍了3、上传文件①② 输入③ 会话管理就会出现你新增的地址，双击④ 输入用户名 ，并且打钩下面的记住用户名，点击确认⑤ 输入密码，并且记住密码，点击确认⑥点击如图的绿色图图标，跳转ftp软件⑦ 上传上面下载的安装包到服务器，从本地文件传输到远程准备完毕！
如何创建一个简单的API，建议萌新食用。
XuNiDingWeiYSHuo的博客
08-09 5379
如何创建一个简单的API
NJUST 喵助理照夜景
蚂蚁大战大象
06-08 649
线段树+扫描线. 终于把扫描线给搞懂了. #include #include #include #include using namespace std; #define lson l, m, rt << 1 #define rson m + 1, r, rt << 1 | 1 const int maxn = 100010; struct seg{ int p, h, f; se
VUE实战项目之喵喵电影
05-09
2019全新打造Web前端教程，Vue实战项目之喵喵电影，详细讲解项目演示与开发流程。
Vue项目-喵喵电影-打包跨域问题
weixin_30919429的博客
07-30 683
最近跟着老师的教程做了一个vue的实战项目——喵喵电影。 先放几张图，看看你学的是不是和我一样。 一路顺风顺水，最后打包出来，老师用nginx解决的跨域问题。 吐槽一下，自己写的后台就不能允许跨域吗？ so，自己打包的项目没有用代理时无法get到数据的， so too，用php做了个中转站，差一丢丢完美解决跨域问题。 网址：http://api.youngam.cn/mi...
超级网际搜索(SuperSearch) - 3月30日最新版V5.1.28.94，内置140个搜索引擎
boom's works
03-30 7114
版本更新5.1.28.94 - BOOM 2010-3-30 支持自定义搜索引擎的显示顺序 4.8.10.55 - BOOM 2010-3-27 增加搜索引擎到１４０个 4.6.32.51 - BOOM 2010-3-24 修正关闭程序时的页面闪烁问题 修正由引擎较多页面切换到引擎较少页面后，IE页面显示和刷新不正
喵喵supersearch超级搜索系统
07-14
综上所述，喵喵SuperSearch超级搜索系统以其高效、精确和全面的搜索能力，为用户提供了便捷、智能的搜索服务。无论是日常生活中的问题解答，还是学习和工作中的资料查询，该系统都能够快速地满足用户需求，为用户...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值