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 相关文章推荐
推荐4个原生javascript常用的函数
Jan 12 Javascript
JavaScript数组和循环详解
Apr 27 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
深入理解javascript中的this
Feb 08 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 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类
2008/04/09 PHP
PHP集成FCK的函数代码
2008/09/27 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
python实现单向链表详解
2018/02/08 Python
深入浅析Python的类
2018/06/22 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python调试神器PySnooper的使用
2019/07/03 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
个人简历中的自我评价怎么写
2014/01/26 职场文书
小学语文教研活动总结
2014/07/01 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
课外活动总结
2015/02/04 职场文书
办公室岗位职责范本
2015/04/11 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
长江七号观后感
2015/06/11 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书