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 相关文章推荐
javascript检查日期格式的函数[比较全]
Oct 17 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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在不同页面间传递Json数据示例代码
2013/06/08 PHP
php文件系统处理方法小结
2016/05/23 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
js 代码优化点滴记录
2012/02/19 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
python使用zip将list转为json的方法
2018/12/31 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
python3.4中清屏的处理方法
2020/07/06 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
店长助理岗位职责
2013/12/13 职场文书
学生思想表现的评语
2014/01/30 职场文书
2014学年自我鉴定
2014/02/23 职场文书
给全校老师的建议书
2014/03/13 职场文书
英语读书笔记
2015/07/02 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers
讲解MySQL增删改操作
2022/05/06 MySQL