本文详细介绍如何在Node.js中实现登录验证功能。通过Express搭建服务器，利用body-parser处理表单数据，分别演示了传统Form表单提交和基于原生JavaScript的AJAX异步请求两种实现方式。代码包含后端路由配置及前端HTML交互逻辑，帮助开发者掌握基础的身份验证流程。
本文分享使用Node.js实现登录验证的具体代码示例，供读者参考学习。
登录验证过程涉及数据提交，主要包含两种常见方式：一种是通过HTML Form表单直接提交数据，另一种是使用原生JavaScript发起异步请求提交数据。
Form表单提交方式
首先需要搭建后台服务器环境。
const express = require('express')
const app = express()
const bodyparser = require('body-parser')
//挂载参数处理的中间件
//extended:false 表示使用系统模块querystring来处理 将字符串转化为对象
app.use(bodyparser.urlencoded({extended:false}))
//挂载内置中间件处理静态文件
app.use(express.static('public'))
//使用form表单提交
app.post('/login',(req,res)=>{
//因为是post,所以使用body
let data = req.body;
//判断用户名和密码
if(data.username=='admin'&&data.password=='123'){
res.send('登陆成功')
}else{
res.send('登陆失败')
}
})
app.listen(3000,()=>{
console.log('running....');
})在public目录下放置login.html文件，用于前端页面展示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="http://localhost:3000/login" method="post">
用户名：
<input type="text" name="username" id="use"><br>
密码：
<input type="password" name="password" id="pwd"><br>
<!-- <input type="submit" value="登录"> -->
<input type="button" value="登录" id="btn">
</form>
</body>
</html>尽管传统Form表单提交方式已较少使用，目前主流开发更多采用AJAX请求后台接口地址的方式来实现无刷新交互。
原生JavaScript提交方式
const express = require('express')
const app = express()
const bodyparser = require('body-parser')
//挂载参数处理的中间件
//extended:false 表示使用系统模块querystring来处理 将字符串转化为对象
app.use(bodyparser.urlencoded({extended:false}))
//挂载内置中间件处理静态文件
app.use(express.static('public'))
//使用form表单提交
app.post('/login',(req,res)=>{
//因为是post,所以使用body
let data = req.body;
//判断用户名和密码
if(data.username=='admin'&&data.password=='123'){
res.send('登陆成功')
}else{
res.send('登陆失败')
}
})
app.get('/login',(req,res)=>{
let data = req.query;
if(data.username=='admin'&&data.password=='123'){
res.send({flag:1})
}else{
res.send({flag:2})
}
})
app.listen(3000,()=>{
console.log('running....');
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--引入jQuery-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(()=>{
//按钮点击事件
$('#btn').click(()=>{
//获取输入框中的值
let use = $('#use').val()
let pwd = $('#pwd').val()
$.ajax({
//type后为字符串
type:'get',
url:'http://localhost:3000/login',
data:{
username:use,
password:pwd,
},
success:(data)=>{
if(data.flag==1){
alert('登陆成功')
}else{
alert('登陆失败')
}
}
})
})
})
</script>
</head>
<body>
<form action="http://localhost:3000/login" method="post">
用户名：
<input type="text" name="username" id="use"><br>
密码：
<input type="password" name="password" id="pwd"><br>
<!-- <input type="submit" value="登录"> -->
<input type="button" value="登录" id="btn">
</form>
</body>
</html>以上就是本文的全部内容，希望上述示例能对读者的学习有所帮助，同时也欢迎大家继续支持本站获取更多技术资源。