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

站长资源 2024/11/5 佚名

2 0 1

要求

了解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>

<!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>

<!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 "htmlcode">

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用户注册登陆,Node.js注册登陆

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

www.yaopr.com 丐帮资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月05日

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

vue.js封装switch开关组件的操作

vue render函数动态加载img的src路径操作

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接