nodejs實現(xiàn)登陸驗證功能

更新時間：2022年04月26日 18:08:46 作者：孤風隨雨

這篇文章主要為大家詳細介紹了nodejs實現(xiàn)登陸驗證功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了nodejs實現(xiàn)登陸驗證的具體代碼，供大家參考，具體內(nèi)容如下

登陸驗證需要提交數(shù)據(jù)，一種使用form表單提交數(shù)據(jù)，另一種使用原生js提交數(shù)據(jù)

form表單提交

搭建后臺服務(wù)器

const express = require('express')
const app = express()
const bodyparser = require('body-parser')
//掛載參數(shù)處理的中間件
//extended:false 表示使用系統(tǒng)模塊querystring來處理 將字符串轉(zhuǎn)化為對象
app.use(bodyparser.urlencoded({extended:false}))
//掛載內(nèi)置中間件處理靜態(tài)文件
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>

但該方法已經(jīng)很很少使用了，現(xiàn)在主要使用ajax請求后臺接口地址

原生js提交

const express = require('express')
const app = express()
const bodyparser = require('body-parser')
//掛載參數(shù)處理的中間件
//extended:false 表示使用系統(tǒng)模塊querystring來處理 將字符串轉(zhuǎn)化為對象
app.use(bodyparser.urlencoded({extended:false}))
//掛載內(nèi)置中間件處理靜態(tài)文件
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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: