Node.js利用Express实现用户注册登陆功能(推荐)


Posted in Javascript onOctober 26, 2020

要求

  • 了解Express框架
  • 了解node.js常用模块:express,body-parser,mysql
  • 了解express Router
  • 了解HTML form表单
  • 了解MySQL Server 及安装使用
  • 了解SQLyog使用

环境

  • OS: Win10
  • Node.js: v12.19.0
  • Express: v4.17.1
  • Yarn: v1.22.10
  • 使用VScode IDE
  • body-parser:1.19.0
  • mysql: 2.18.1
  • MySQL Server:5.7
  • SQLyog:V12.9

准备

首先在Win10上安装Mysql,一路Next就行。安装完成使用SQLyog连接MySQL Server。连接成功需要创建数据库和数据表

Schema:

CREATE TABLE user (
username char(20) NOT NULL,
password char(20) NOT NULL,
email char(30) DEFAULT NULL,
address char(20) DEFAULT NULL,
phonenumber char(20) DEFAULT NULL,
logintime int(20) DEFAULT NULL,
id int(20) NOT NULL AUTO_INCREMENT,
PRIMARY KEY (id),
KEY username (username)
) ENGINE=InnoDB DEFAULT CHARSET=utf8

实战

前端

3个page, login.html, register.html.

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
			<title>登陆注册</title>
			<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
		</head>
		<body>
			<a href="./register.html" rel="external nofollow" >注册</a>
			<a href="./login.html" rel="external nofollow" >登录</a>
		</body>
	</head>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
			<title>登陆注册</title>
			<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
		</head>
		<body>
			<form action="/login" method="GET" >  
				<label for="">账号:</label> 
				<input name="user" type="text" placeholder="请输入账号"> 
				<br> 
				<label for="">密码:</label> 
				<input type="password" name="password" placeholder="请输入密码"> 
				<br>
				<input type="submit" value="登录">
			</form>
		</body>
	</head>
</html>

register.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
			<title>登陆注册</title>
			<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
		</head>
		<body>
			<form action="/register" method="POST">
				<label for="">账号:</label> 
				<input name="user" type="text" placeholder="请输入账号">
				<br> 
				<label for="">密码:</label> 
				<input name="psw" type="password" placeholder="请输入密码"> 
				<br> 
				<label for="">重复密码:</label> 
				<input name="pswa" type="password" placeholder="请重复密码"> 
				<br> 
				<input type="submit" value="注册">
			</form>
		</body>
	</head>
</html>

后端 server.js

var express = require("express");
var bodyParser = require("body-parser");
var router = require("./routers");

var app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.use('/', router);

module.exports = app;

Router

router/index.js, 调用封装好的数据库接口:queryUer, addUser

const express=require("express");
const dao = require("../dao/db");

const router=express.Router();

router.get("/login", function(req,res){
 console.dir(req.query);
 try{
  dao.queryUser({username:req.query.user},function(err,record){
   if(err){
    console.log(err);
    throw error;
   }
   console.log(record);
   if(record && record.password == req.query.password){
    res.send(`${req.query.user}:登陆成功`);
   }else{
    res.send(`${req.query.user}:登陆失败,检查登陆信息是否正确`);
   }
  });
 } catch(error){
  console.log(error);
  res.send(`${req.body.user}: 登陆失败`);
 } 
})

router.post("/register", function(req,res){
 console.dir(req.body); 
 try{
  if(req.body.psw == req.body.pswa){
   dao.addUser({username:req.body.user,password:req.body.psw});
   res.send(`${req.body.user}: 注册成功`);
  } else {
   console.log(error);
   res.send(`${req.body.user}: 注册失败:,检查登陆信息是否正确`);
  }  
 } catch(error){
  console.log(error);
  res.send(`${req.body.user}: 注册失败`);
 }
 
})
module.exports = router;

数据库接口db.js

dao/db.js

var mysqlClient= require("./mysql");

function addUser (userInfo,callabck){
 console.log("addUser:"+ userInfo);
 var sql= `insert into user(username,password) values('${userInfo.username}','${userInfo.password}')`;
 console.log("sql:"+ sql);
 mysqlClient(sql,function(err,rows){
  if(err){
   console.log("err:"+err);
   callabck(err,null);
  } else{
   console.log("addUser result:");
   console.log(rows);
   callabck(null,rows);
  }
 })
}

function queryUser (userInfo,callabck){
 console.log("queryUser:"+ userInfo);
 var sql= `select * from user where username='${userInfo.username}'`;
 console.log("sql:"+ sql);
 mysqlClient(sql, function(err,rows){
  if(err){
   console.log("err:"+err);
   callabck(err,null);
  } else{   
   rows && rows.length>0 ? callabck(null,rows[0]): callabck(null,null);
  }
 })
}
exports.addUser = addUser;
exports.queryUser = queryUser;

dao/mysql.js

const mysql = require("mysql");
const pool = mysql.createPool({
 host:"localhost",
 user:"root",
 password:"*****",
 database:"test"
});

function query(sql,callback){
 pool.getConnection(function(err,connection){
  if(err){
   callback(err,null);
   return
  }
  connection.query(sql, function (err,rows) {   
   callback(err,rows);
   connection.release();
  });
 });
}

module.exports = query;

mysql module

yarn add mysql

运行index.js

cd src/ && node index.js

结果及演示

浏览器看效果及整个过程。
Node.js利用Express实现用户注册登陆功能(推荐)

到此这篇关于Node.js利用Express实现用户注册登陆功能的文章就介绍到这了,更多相关Node.js用户注册登陆内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
javascrip关于继承的小例子
May 10 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
vue render函数动态加载img的src路径操作
Oct 26 #Javascript
vue实现简单的登录弹出框
Oct 26 #Javascript
让你30分钟快速掌握vue3教程
Oct 26 #Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 #Javascript
vue3+typescript实现图片懒加载插件
Oct 26 #Javascript
原生js实现简单轮播图
Oct 26 #Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 #Javascript
You might like
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
开源Web应用框架Django图文教程
2017/03/09 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
python递归下载文件夹下所有文件
2019/08/31 Python
通过实例解析Python调用json模块
2019/12/11 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
python程序输出无内容的解决方式
2020/04/09 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
python ETL工具 pyetl
2020/06/07 Python
如何写python的配置文件
2020/06/07 Python
Python 如何实现访问者模式
2020/07/28 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
充分就业社区汇报材料
2014/05/07 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
合伙购房协议样本
2014/10/06 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
责任书范本大全
2015/05/11 职场文书
居住证明范文
2015/06/17 职场文书
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js