Node.js實(shí)現(xiàn)登錄注冊(cè)功能

更新時(shí)間：2022年04月26日 15:31:58 作者：Cabu_husky

這篇文章主要為大家詳細(xì)介紹了Node.js實(shí)現(xiàn)登錄注冊(cè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Node.js實(shí)現(xiàn)登錄注冊(cè)功能的具體代碼，供大家參考，具體內(nèi)容如下

目錄結(jié)構(gòu)

注冊(cè)頁(yè)面：

reg.html

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title></title>
? ? <link rel="stylesheet" href="./src/css/reg.css">
</head>
<body>
? ? <div class="reg">
? ? ? ? <h1>用戶注冊(cè)</h1>
? ? ? ? <p>
? ? ? ? ? ? <label for="">用戶名：</label>
? ? ? ? ? ? <input type="text" id="username">
? ? ? ? </p>
? ? ? ? <p>
? ? ? ? ? ? <label for="">密&emsp;碼：</label>
? ? ? ? ? ? <input type="text" id="password">
? ? ? ? </p>
? ? ? ? <button>注冊(cè)</button>
? ? </div>
</body>
</html>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
?? ?//點(diǎn)擊注冊(cè)發(fā)送ajax請(qǐng)求
? ? $('button').eq(0).on('click',()=>{
? ? ? ? $.ajax({
? ? ? ? ? ? url: '/register',
? ? ? ? ? ? type: 'POST',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? username : $('#username').val(),
? ? ? ? ? ? ? ? password : $('#password').val()
? ? ? ? ? ? },
? ? ? ? ? ? success: function(res){
? ? ? ? ? ? ? ? switch (res) {
? ? ? ? ? ? ? ? ? ? case '1':
? ? ? ? ? ? ? ? ? ? ? ? alert('成功');
? ? ? ? ? ? ? ? ? ? ? ? window.location.href = "./login.html";
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case '2':
? ? ? ? ? ? ? ? ? ? ? ? alert('失敗');
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case '3':
? ? ? ? ? ? ? ? ? ? ? ? alert('重名');
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case '4':
? ? ? ? ? ? ? ? ? ? ? ? alert('未知錯(cuò)誤');
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }?
? ? ? ? ? ? }
? ? ? ? })
? ? })
</script>

登錄頁(yè)面：

login.html

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title></title>
? ? <link rel="stylesheet" href="./src/css/reg.css">
</head>
<body>
? ? <div class="reg">
? ? ? ? <h1>用戶登錄</h1>
? ? ? ? <p>
? ? ? ? ? ? <label for="">用戶名：</label>
? ? ? ? ? ? <input type="text" id="username">
? ? ? ? </p>
? ? ? ? <p>
? ? ? ? ? ? <label for="">密&emsp;碼：</label>
? ? ? ? ? ? <input type="text" id="password">
? ? ? ? </p>
? ? ? ? <button>登錄</button>
? ? </div>
</body>
</html>

<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
?? ?//點(diǎn)擊登錄發(fā)送ajax請(qǐng)求
? ? $('button').eq(0).on('click',()=>{
? ? ? ? $.ajax({
? ? ? ? ? ? url: '/login',
? ? ? ? ? ? type: 'GET',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? username: $('#username').val(),
? ? ? ? ? ? ? ? password: $('#password').val()
? ? ? ? ? ? },
? ? ? ? ? ? success: function(res){
? ? ? ? ? ? ? ? console.log(res);
? ? ? ? ? ? ? ? switch (res){
? ? ? ? ? ? ? ? ? ? case '1':
? ? ? ? ? ? ? ? ? ? ? ? alert('成功');
? ? ? ? ? ? ? ? ? ? ? ? window.location.href = "./index.html";
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case '2':
? ? ? ? ? ? ? ? ? ? ? ? alert('失敗');
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case '3':
? ? ? ? ? ? ? ? ? ? ? ? alert('密碼錯(cuò)誤');
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case '4':
? ? ? ? ? ? ? ? ? ? ? ? alert('未知錯(cuò)誤');
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? })
</script>

app.js

const http = require("http");
const fs = require("fs");
const url = require("url");
const querystring = require("querystring");
const post = 3000;
//通過(guò)http模塊創(chuàng)建服務(wù)器，并監(jiān)聽(tīng)端口3000
const server = http.createServer();
server.on("request",(req,res)=>{
? ? const dataurl = url.parse(req.url);
? ? //靜態(tài)伺服
? ? //默認(rèn)進(jìn)入reg.html頁(yè)面?
? ? if((req.url == "/" || req.url == "/reg.html") && req.method == "GET" && req.url != "/favicon.ico"){
? ? ? ? fs.readFile("./reg.html","utf8",(err,data)=>{
? ? ? ? ? ? if(err){
? ? ? ? ? ? ? ? fs.readFile("./404.html","utf8",(err,data)=>{
? ? ? ? ? ? ? ? ? ? res.end(data);
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? res.setHeader("Content-type","text/html");
? ? ? ? ? ? res.end(data);
? ? ? ? })
? ? //讀取login.html
? ? }else if(req.url == "/login.html" && req.method == "GET"){
? ? ? ? fs.readFile("./login.html","utf8",(err,data)=>{
? ? ? ? ? ? if(err){
? ? ? ? ? ? ? ? fs.readFile("./404.html","uft8",(err,data)=>{
? ? ? ? ? ? ? ? ? ? res.end(data);
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? res.setHeader("Content-type","text/html");
? ? ? ? ? ? res.end(data);
? ? ? ? })
? ? //讀取index.html
? ? }else if(req.url == "/index.html" && req.method == "GET"){
? ? ? ? fs.readFile("./index.html","utf8",(err,data)=>{
? ? ? ? ? ? if(err){
? ? ? ? ? ? ? ? fs.readFile("./404.html","uft8",(err,data)=>{
? ? ? ? ? ? ? ? ? ? res.end(data);
? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
? ? ? ? ? ? res.setHeader("Content-type","text/html");
? ? ? ? ? ? res.end(data);
? ? ? ? })
? ? //讀取reg.css
? ? }else if(req.url == "/src/css/reg.css" && req.method == "GET"){
? ? ? ? fs.readFile("src/css/reg.css","utf8",(err,data)=>{
? ? ? ? ? ? if(err){
? ? ? ? ? ? ? ? console.log(err);
? ? ? ? ? ? }
? ? ? ? ? ? res.setHeader("Content-type","text/css");
? ? ? ? ? ? res.end(data);
? ? ? ? })
? ? //讀取jquery
? ? }else if(req.url == "/node_modules/jquery/dist/jquery.js" && req.method == "GET"){
? ? ? ? fs.readFile("./node_modules/jquery/dist/jquery.js","utf8",(err,data)=>{
? ? ? ? ? ? if(err){
? ? ? ? ? ? ? ? console.log(err);
? ? ? ? ? ? }
? ? ? ? ? ? res.end(data);
? ? ? ? })
? ? }
})
server.listen(post);

注冊(cè)接口：

/register

else if(req.url == "/register" && req.method == "POST"){
? let str = '';
? ? req.on('data',(chunk)=>{
? ? ? ? str += chunk;
? ? })
? ? req.on('end',()=>{
? ? ? ? let dataObj = querystring.parse(str);
? ? ? ? fs.readFile("./data.json","utf8",(err,data)=>{
? ? ? ? ? ? let obj = JSON.parse(data); ??
? ? ? ? ? ? for(let i = 0; i < obj.length; i++){
? ? ? ? ? ? ? ? if(obj[i].username == dataObj.username){
? ? ? ? ? ? ? ? ? ? return res.end('3');
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? obj.push(dataObj);
? ? ? ? ? ? fs.writeFile('./data.json',JSON.stringify(obj),'utf8',(err,result)=>{
? ? ? ? ? ? ? ? if(err){
? ? ? ? ? ? ? ? ? ? return res.end('2');
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return res.end('1');
? ? ? ? ? ? })
? ? ? ? })
? ? })
}

登錄接口：

/login

else if(dataurl.pathname == "/login" && req.method == "GET"){
? ?console.log(dataurl);
? ? var userInput = querystring.parse(dataurl.query);
? ? fs.readFile("./data.json","utf8",(err,data)=>{
? ? ? ? let obj = JSON.parse(data);
? ? ? ? for(let i = 0; i < obj.length; i++){
? ? ? ? ? ? if(obj[i].username == userInput.username && obj[i].password == userInput.password){
? ? ? ? ? ? ? ? return res.end('1');
? ? ? ? ? ? }else if(obj[i].username == userInput.username && obj[i].password != userInput.password){
? ? ? ? ? ? ? ? return res.end('3');
? ? ? ? ? ? }
? ? ? ? }
? ? })
}

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

您可能感興趣的文章: