首页 / NODEJS / node.js+express+mongodb+ajax实现注册、登陆、验证码

node.js+express+mongodb+ajax实现注册、登陆、验证码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了node.js+express+mongodb+ajax实现注册、登陆、验证码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8257字，纯文字阅读大概需要12分钟。

内容图文

完整项目在这里，欢迎star。

本项目借鉴了这个项目，大家也可以去star。

结果展示

实现的功能：

主页面，登陆页面，注册页面
注册密码两次输入
验证码检验

使用的技术

使用MongoDB作为后端数据库保存用户信息
使用node.js部署前端
采用ajax实现前端与服务器交换数据

直接输入网址（http://localhost:8008/）进入主界面，提示需要登陆

node.js+express+mongodb+ajax实现注册、登陆、验证码 - 文章图片

进入注册界面注册账号

node.js+express+mongodb+ajax实现注册、登陆、验证码 - 文章图片

注册成功进入主页面

node.js+express+mongodb+ajax实现注册、登陆、验证码 - 文章图片

也可以从登陆界面进入
node.js+express+mongodb+ajax实现注册、登陆、验证码 - 文章图片

环境配置

MongoDB

在ubuntu20.04下安装MongoDB

sudo apt-get install mongodb

在项目目录下建立MongoDB的数据和日志目录

mkdir log
mkdir data

启动MongoDB

mongod --dbpath ./data/ --logpath ./log/mongod.log --fork

检查MongoDB是否已经启动

ps aux|grep mongo

输出为

node.js+express+mongodb+ajax实现注册、登陆、验证码 - 文章图片

说明启动成功。

检查MongoDB监听的默认端口

lsof -i:27017

输出为

node.js+express+mongodb+ajax实现注册、登陆、验证码 - 文章图片

和上图的pid一致，说明端口已经被打开。

或者在OSX上安装MongoDB

brew tap mongodb/brew 
brew install mongodb-community@4.2

启动和关闭

brew services start mongodb-community@4.2
brew services stop mongodb-community@4.2

配置node.js

sudo apt-get install nodejs
sudo apt-get install npm

在项目下需要安装的node.js模块

npm install express --save
npm install body-parser --save
npm install cookie-parser --save
npm install multer --save
npm install mongodb --save

其中

express是我们使用的前端框架
body-parser用于处理 JSON, Raw, Text 和 URL 编码的数据。
cookie-parser解析Cookie
multer 用于处理MIME编码的表单数据。

主要代码

后端

项目的后端是Express和MongoDB，在项目目录下启动node backend.js启动后端。

Express

启动Express

var express = require('express');
var app = express();

后端程序中需要处理浏览器的跨域请求

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

设置主页面、登录和注册界面

app.get('/main.html', function (req, res) {
    res.sendFile(__dirname + '/' + 'main.html');
})
app.get('/login.html', function (req, res) {
    res.sendFile(__dirname + '/' + 'login.html');
})
app.get('/register.html', function (req, res) {
    res.sendFile(__dirname + '/' + 'register.html');
})

将主界面作为默认界面

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/' + 'main.html');
})

为注册和登录操作添加接口

app.post('/process_login', urlencodedParser, function (req, res) {
    var userName = req.body.userName;
    var pwd = req.body.pwd; 
    if (!userName) {
        res.json({ code: -1, message: '用户名不能为空' });
    } else if (!pwd) {
        res.json({ code: -1, message: '密码不能为空' });
    } else {
        db.searchUser({ name: userName }, function (result) {
            if (result.length > 0) {
                if (result[0].name == userName && result[0].pwd == pwd) {
                    res.json({ code: 0, message: '登录成功' }); 
                } else {
                    res.json({ code: -1, message: '用户名或密码错误' });
                }
            } else {
                res.json({ code: -1, message: '不存在该用户' });
            }
        });
    }
})

app.post('/process_register', urlencodedParser, function (req, res) {
    var userName = req.body.userName;
    var pwd = req.body.pwd;
    if (!userName) {
        res.json({ code: -1, message: '用户名不能为空' });
    } else if (!pwd) {
        res.json({ code: -1, message: '密码不能为空' });
    } else {
        db.searchUser({ name: userName }, function (result) {
            if (result.length > 0 && result[0].name == userName) {
                res.json({ code: -1, message: '用户已存在，可直接登录' });
            } else {
                // res.json({ code: -1, message: '不存在该用户' });
                db.insertUser({ name: userName, pwd: pwd }, function (insertResult) {
                    console.log(insertResult)
                    if (insertResult.insertedCount > 0) {
                        res.json({ code: 0, message: '注册成功' });
                    } else {
                        res.json({ code: -1, message: '注册失败，请重新注册' });
                    }
                })
            }
        });
    }
})

最后是开启后端，监听8008端口

var server = app.listen(8008, function () { 
    console.log("后端启动成功！")
})

MongoDB

建立MongoDB对象

var db = require('./db');

建立db.js文件，编写数据库相关操作

通过默认端口访问MongoDB

var mongoClient = require('mongodb').MongoClient;
var url = 'mongodb://127.0.0.1:27017/';

MongoDB会在我们进行数据路操作的时候自动建立相应的数据库，我们只需要负责编写插入和查询的代码，数据库的名字是login_project，下面是查找和插入的代码

function searchUser(whereStr, callBack) {
    mongoClient.connect(url, { useNewUrlParser: true }, function (err, db) {
        if (err) throw err;
        var dbo = db.db('login_project');
        dbo.collection('site').find(whereStr).toArray(function (err, result) {
            if (err) throw err;
            console.log('查询指定条件的数据...', result);
            callBack(result);
            db.close();
        })
    })
}

function insertUser(myobj, callBack) {
    mongoClient.connect(url, { useNewUrlParser: true }, function (err, db) {
        if (err) throw err;
        var dbo = db.db('login_project');
        dbo.collection('site').insertOne(myobj, function (err, res) {
            if (err) throw err;
            console.log('文档插入成功');
            callBack(res);
            db.close();
        })
    })
}

最后，允许这两个函数被外部文件调用

exports.searchUser = searchUser;
exports.insertUser = insertUser;

前端

前端主要的工作是main.html、register.html和login.html的编写。

三个界面的公共部分是导航栏

<div id="nav">
	<ul>
		<li>
			<a href="main.html">主页</a>
		</li>
		<li>
			<a href="login.html">登录</a>
		</li>
		<li>
			<a href="register.html">注册</a>
		</li>
	</ul>
</div>

main.html

main.html页面通过js通过url获得当前的用户名并给出提示

var name =  getUrlParameter('name');
console.log(name);
if(name != ""){
	document.getElementById("info").innerHTML = "当前登陆的账号为：" + name;
}

function getUrlParameter(name){
  name = name.replace(/[]/,"\[").replace(/[]/,"\[").replace(/[]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec(window.parent.location.href );
  if( results == null ) return ""; 
  else {
  	return results[1];
  }
};

通过上面的js自动更改html中的信息

<div class="wrapper">
  <h1 id="info"></h1>欢迎使用NJU-SE-Web系统</h1>
	<h1 id="info">请登陆！</h1>
</div>

login.html

登陆界面如下

<div class="wrapper">
	<h1>欢迎登录NJU-SE-Web系统</h1>
	<div class="form-list">
		<div class="form-item">
			<span>用户名：</span>
			<input type="text" name="username" id="name" />
		</div>
		<div class="form-item">
			<span>密码：</span>
			<input type="password" name="userpwd" id="pwd" />
		</div>
    <div class="form-item">
      <canvas id="verifi-code" style='width:110px;height:25px'></canvas>
      <input id="input-code" type="text" placeholder="请输入验证码">
    </div>
		<div class="btn">
			<button onclick="submit()">登录</button>
		</div>
	</div>
</div>

使用js完成登陆后的页面切换和数据库查询

function submit() {
  var name = $("#name").val().trim();
  var pwd = $("#pwd").val().trim(); 
  $.ajax({
    url: "http://127.0.0.1:8008/process_login",
    type: "post",
    data: {
      userName: name,
      pwd: pwd
    },
    success: function(res) {
      console.log(res);
      if (res.code == 0) {
        window.location.href = 'main.html?name=' + name;
      } else {
        alert(res.message);
      }
    },
    error: function(){
      console.info("网络出错");
      alert("网络出错，请再试一次");
    }
  })
}

其中，通过url将登陆用户的信息传递给main.html页面。

如果ajax请求成功则页面跳转，如果登陆失败则给出提示信息。

通过js代码实现验证码生成

function createCode() {
  let code = "";
  var codeLength = 4;
  var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
  for (var i = 0; i < codeLength; i++) {
    var charIndex = Math.floor(Math.random() * 36);
    code += selectChar[charIndex];
  }
  return code;
}

在canvas上画出验证码

function draw_canvas(code) {
  if (canvas) {
    var ctx=canvas.getContext('2d');
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.font="80px Verdana";
    ctx.strokeText(code,25,110);
    console.log("canvas 绘制完成")
  }
  else
  	console.log("没有找到canvas")
}

编写函数检查字符串是否相同，并给出提示

function isequal(str,str1,alert_info){
  if(str != str1){
  	alert(alert_info);
  	return false;}
  else return true;
}

在submit函数中检查

var input_code = $("#input-code").val().trim(); 
if(!isequal(code, input_code, "验证码错误")) return;

同时，需要在加载页面时加载这个验证码

var canvas = document.getElementById('verifi-code');
var code = '';
window.onload = function () {
  code = createCode();
  draw_canvas(code);
}

以及支持验证码点击刷新

canvas.onclick = function () {
  code = createCode();
  draw_canvas(code);
}

register.html

register.html和login.html大致相同，主要的区别是register.html需要对密码进行二次验证，在submit函数中进行检验

var pwd = $("#pwd").val().trim(); 
var pwda = $("#pwda").val().trim(); 
if(!isequal(pwd, pwda, "两次输入不一致")) return;

如果验证通过，则向数据库中插入信息，如果ajax请求成功，则实现跳转

success: function(res) {
  console.log(res);
  if (res.code == 0) {
    alert("注册成功");
    window.location.href = 'main.html?name=' + name;
  } else {
  	alert(res.message);
  }
},

内容总结

以上是互联网集市为您收集整理的node.js+express+mongodb+ajax实现注册、登陆、验证码全部内容，希望文章能够帮你解决node.js+express+mongodb+ajax实现注册、登陆、验证码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/866767.html

来源：【匿名】

【上一篇】Node.js 中 mysql 事务的写法【下一篇】node.js和php的区别有哪些？

更多 ►

【node.js+express+mongodb+ajax实现注册、登陆、验证码】教程文章相关的互联网学习教程文章

nodejs教程安装express及配置app.js文件的详细步骤

来自：http://www.jb51.net/article/36710.htm express.js是nodejs的一个MVC开发框架，并且支持jade等多种模板。下面简单来说说express的安装和app.js文件的配置，然后在今后的教程中一步一步使用express.js搭建个聊天室安装express.js如果你安装了npm，安装变得很简单，只需要在终端中运行下面的代码即可：复制代码代码如下:npm install express -gd -g代表安装到NODE_PATH的lib里面，而-d代表把相依性套件也一起安装。如果沒有...

让nodejs开启服务更简单--express篇【代码】【图】

上一篇文章说到，nodejs获取客户端请求需要我们自己去处理请求参数、请求方式等，而在express框架内部集成了很多好用的方法，我们不需要从0开始编写各种处理逻辑，这样可以极大提高我们的开发效率~ 通过引入 express ，再执行express函数，生成的app对象通过中间件来进行各种操作。const express = require(‘express‘) const app = express()app.post(‘/home‘, (req, res, next)=>{res.end(‘hello express‘) })app.listen(‘...

安装nodeJs静态服务器（NodeJs Express MVC 框架）【图】

安装 NodeJs Express MVC 框架新建项目文件夹打开cmd 执行以下操作：一、使用Express框架1)安装express3 $: npm install -g express@32)目录下新建工程 $: express -e staticServer3)安装所需模块 $: cd staticServer && npm install这部执行完毕即可启动服务器 $: node appexpress默认public目录为静态资源目录，可在浏览器中访问http://localhost:3000/images/******对应资源创建完成后：1、新建wwwroot文件夹2、修改根目录下...

二：nodejs+express+redis+bootstrap table+jquery UI【代码】

介绍：做一个量化投资的实时系统。综合：添加记录，顺序改变的话，refresh之后，能正常刷新吗？可以正常刷新，只是顺序又变回去。express中用fs readfile 时，需要用path.join来写路径，如果用路由的话，会读出来数字。json的读取和存储，JSON.parse(data);会变为一个json对象； JSON.stringify(data);把json变为字符串，如果这时候写入.json中，则不会有合适的缩进。所以需要JSON.stringify(data, function(key, value){return v...

windows mean(mongodb+express+angularjs+nodejs) 一键安装脚本【图】

最近在和几个同事研究mean（mongodb+express+angularjs+nodejs），这个框架看了个皮毛，但是安装部分基本上已经掌握了，目前还没有找到好的一键部署方案，所以我给同事们做了一个基础部署的脚本，本来想的很好，但是一次次的测试也比较浪费时间，基本功能完成之后，就没有再进一步的优化，先放出来大家看看吧，用某前辈的话说：这个东西不算脚本，只能算“顺溜”，一步步完成安装和配置。系统环境：650) this.width=650;" src="/up...

Nodejs学习笔记（六）—Node.js + Express 构建网站预备知识【代码】【图】

前言　　前面经过五篇Node.js的学习，基本可以开始动手构建一个网站应用了，先用这一篇了解一些构建网站的知识！　　主要是些基础的东西...　　如何去创建路由规则、如何去提交表单并接收表单项的值、如何去给密码加密、如何去提取页面公共部分（相当于用户控件和母版页）等等...　　下面就一步步开始吧^_^!...新建express项目并自定义路由规则　　1.首先用命令行express+ejs创建一个项目sampleEjsPrecd 工作目录 express -e samp...

nodejs的web开发框架之express【图】

express框架实际上就是对nodejs上面1~6那些底层的api做了一层新的封装，形成了一些api，使基于nodejs开发web更方便快速最简单案例　　express框架实现服务器功能　　express框架静态资源（html css js 图片等资源）的托管功能---从代码上看非常简单　　express框架的路由处理（服务器动态资源（由服务器动态生成的内容）请求一般都不对应一个特定的文件名称而是只有一个路径，这种路径的处理就叫路由）　　express框架的提供的中...

nodejs框架express4.2 简单入门【图】

Perface今天看了一些nodejs，《nodejs开发指南》。看到了expres的时候，由于那本书用的express版本号跟我的不一样。导致非常多功能不能实现。所以就各种google，如今就把这个流程记录下来。遇见的bug和一些原理。要玩express就要装nodejs，假设你的操作系统是centos6.5能够參考我之前写的博客centos6.5安装nodejs。其它操作系统也大同小异。能够看Node InstallationBug1 Express Command not found最初操作：跟着《nodejs开发指南...

nodejs+express+jade配置

1、安装nodejs，比如安装在E:\program files\nodejs(这是本人的安装路径)。确保有两个环境变量用户环境变量：C:\Users\Administrator\AppData\Roaming\npm 系统环境变量：e:\program files\nodejs2、安装Express，用稳定版3.5.0，网上资料也大多以这个版本为主，不指定版本的话，默认安装最新版　　运行cmd -> npm install -g express@3.5.0 　　如果是4.X版本，再安装npm install -g express-generator（如果不装会报”...

Windows环境下，从零开始搭建Nodejs+Express+Ejs框架（二）---安装Express，ejs【图】

安装Express，ejs的前提是一定要先安装nodejs，具体安装方法请查看http://www.cnblogs.com/tfiremeteor/p/8973105.html安装Express和ejs的前提是先要创建一个项目，因为我采用的并不是全局安装的方式，顺序为，创建项目，安装Express，再安装ejs。一. 准备工作。关于Nodejs的所有操作都必须通过命令行来实现，并且需要进入项目所在的目录。所以，首先运行cmd，打开命令提示符。如下图这个是默认的路径，现在要进入项目路径，我的项...

nodejs小问题：express不是内部或外部命令【图】

一时兴起想学习点东西,准备在heroku上部署一个Node.js的小程序.公司电脑之前没有装Node.js,于是下载最新版本的Node.js,当我安装express之后发现居然提示express不是内部或外部命令.然后经过我不懈努力,终于发现端倪,下面分享给大家(我是在Windows上用的Node.js).工具/原料 Node.js安装包方法/步骤首先下载Node.js安装包,此处我用的是官方最新的v0.10.2732位版:http://nodejs.org/dist/v0.10.27/node-v0.10.27-x86.msi 64位版:ht...

CentOS安装NodeJS及Express开发框架

本文演示在Linux上安装NodeJS及Express开发框架注：本人在http://www.nodejs.org/官网上下载了nodejs最新版本号NodeJS v0.10.29 可是在./configure的时候，说没有找到路径，无奈之下。仅仅好将nodejs版本号减少到v0.10.24。如今讲执行步骤记下。以免将来忘掉，安装步骤例如以下：Step 1、确认server有nodejs编译及依赖相关软件，假设没有可通过执行下面命令安装。[root@BobServerStation local]# yum -y install gcc gcc-c++ opens...

nodejs+express开发blog（2）【代码】

npm install -g nodemon1，把ejs文件修改为html文件app.engine(‘.html‘, require(‘ejs‘).__express);app.set(‘view engine‘, ‘html‘);注意：修改views下面的后缀名，并且并且不要忘记index.html里引入的原文：http://www.cnblogs.com/holdon521/p/5307999.html

win7下安装配置nodejs、使用npm安装express

1.下载nodehttp://nodejs.cn/download/ 这里下载自己需要的我的环境是win764，下载地址是：https://nodejs.org/dist/v6.2.0/win-x64/node.exe它就一个exe文件，想要使用还要配置下环境变量win7:“我的电脑”右键点击“我的属性”，点击左边的‘高级系统设置’，在打开的系统属性面板，点击选项卡‘高级’--面板底部的‘环境变量’在系统变量找到PATH,在变量值后面，追加上‘D:\node;’ （这是存放node.exe的地方）这里顺便讲下添加...

Nodejs架构之Express初体验【代码】

参考：http://www.cnblogs.com/Darren_code/p/express4.html本文是基于node 0.12.7express 4.13.11）安装npm install -g express npm install -g express-generator2）创建项目express myapp cd myapp && npm install npm start3）目录结构app.js，程序启动文件 bin，创建项目时已经提到，是真实的执行程序 node_modules, 存放所有的项目依赖库 package.json，项目依赖配置及开发者信息 public，静态文件(css,js,img) routes，路由...

NODEJS - 技术教程分类

Node.js 教程 Node.js 安装配置 Node.js 创建第一个应用 NPM 使用介绍 Node.js REPL Node.js 回调函数 Node.js 事件循环 Node.js EventEmitter Node.js Buffer Node.js Stream Node.js 模块系统 Node.js 函数 Node.js 路由 Node.js 全局对象 Node.js 常用工具 Node.js 文件系统 Node.js GET/POST请求 Node.js 工具模块 Node.js Web 模块 Node.js Express 框架 Node.js RESTful API Node.js 多进程 Node.js MySQL Node.js MongoDB nodejs 全部

NODEJS - 最热教程

Node.js Error: Cannot find module ex...如何使用node.js实现获取微信用户授权（...node.js中的npmupdate如何使用 nodejsnpm包管理的配置方法及常用命令介...node.js+Ajax实现获取HTTP服务器返回数...nodejs调用cmd命令实现复制目录_node.j...快速搭建Node.js(Express)用户注册、登...nodejs入门教程五：连接数据库的方法分...nodejs中自动启用服务==类似于前端的热...14款NodeJS Web框架推荐

首页 / NODEJS / node.js+express+mongodb+ajax实现注册、登陆、验证码

node.js+express+mongodb+ajax实现注册、登陆、验证码

内容导读

内容图文

结果展示

环境配置

MongoDB

配置node.js

主要代码

后端

Express

MongoDB

前端

main.html

login.html

register.html

内容总结

内容备注

内容手机端

【node.js+express+mongodb+ajax实现注册、登陆、验证码】教程文章相关的互联网学习教程文章

nodejs教程安装express及配置app.js文件的详细步骤

让nodejs开启服务更简单--express篇【代码】【图】

安装nodeJs静态服务器（NodeJs Express MVC 框架）【图】

二：nodejs+express+redis+bootstrap table+jquery UI【代码】

windows mean(mongodb+express+angularjs+nodejs) 一键安装脚本【图】

Nodejs学习笔记（六）—Node.js + Express 构建网站预备知识【代码】【图】

nodejs的web开发框架之express【图】

nodejs框架express4.2 简单入门【图】

nodejs+express+jade配置

Windows环境下，从零开始搭建Nodejs+Express+Ejs框架（二）---安装Express，ejs【图】

nodejs小问题：express不是内部或外部命令【图】

CentOS安装NodeJS及Express开发框架

nodejs+express开发blog（2）【代码】

win7下安装配置nodejs、使用npm安装express

Nodejs架构之Express初体验【代码】

MONGODB - 相关标签

AJAX - 相关标签

NODEJS - 技术教程分类

NODEJS - 最新教程

NODEJS - 最热教程