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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
May 29 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
解决Vue watch里调用方法的坑
Nov 07 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小程序自动提交到自助友情连接
2009/11/24 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
js中的如何定位固定层的位置
2014/06/15 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
js获取url传值的方法
2015/12/18 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
python实现数据库跨服务器迁移
2018/04/12 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
浅谈Python3多线程之间的执行顺序问题
2020/05/02 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
毕业研究生的自我鉴定
2013/11/30 职场文书
我的画教学反思
2014/04/28 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
团日活动总结报告
2014/06/25 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
采购员工作总结范文
2015/08/12 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL