Node.js实现登录注册

最新推荐文章于 2024-06-02 13:09:53 发布
最新推荐文章于 2024-06-02 13:09:53 发布
阅读量3k 收藏 12
点赞数 2
分类专栏： Node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cabu_husky/article/details/107235310
版权

目录结构
在这里插入图片描述
注册页面：
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>用户注册</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>
	//点击注册发送ajax请求
    $('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('未知错误');
                    break;
                } 
            }
        })
    })
</script>

登录页面：
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>
	//点击登录发送ajax请求
    $('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('密码错误');
                        break;
                    case '4':
                        alert('未知错误');
                        break;
                }
            }
        })
    })
</script>

app.js

const http = require("http");
const fs = require("fs");
const url = require("url");
const querystring = require("querystring");
const post = 3000;
//通过http模块创建服务器，并监听端口3000
const server = http.createServer();
server.on("request",(req,res)=>{
    const dataurl = url.parse(req.url);
    //静态伺服
    //默认进入reg.html页面 
    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);

注册接口：
/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');
            }
        }
    })
}
Cabu_husky
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node.js实现注册和登录
qq_41949802的博客
08-29 1万+
一.Window 上安装Node.js 32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi 64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi 步骤 1 : 双击下载后的安装包 v0.10.26，如下所示： 步骤 2 : 点击以上的...
NodeJS -- 简单的实现一个登录功能
热门推荐
wust_cyl的博客
06-03 1万+
实现目标：默认起始页面时登录页面，输入账号密码，如果没有此账号那么跳到注册页面，注册成功后进入个人页面。登录时，如果账号密码不匹配，那么跳到错误页面，三秒后跳到登录页面。 我们还需要保证如果用户没有登录，那么就不能进入个人页面（通过url)。简单使用express mongoDB. 实现效果图： 此时数据库里面没有任何数据，那么就不会匹配成功，会跳转到注册页面。 点击注册，那么...
【Node】使用Node.js实现简单的登录系统
Dora_5537的博客
07-29 2390
前言：直接上代码（VSCode），解释都在注释里了，好好看。 1. 注册页面（main.html） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> ...
Node.js实现登陆注册
m0_54089303的博客
11-12 4643
1.服务器端 在项目里创建一个json文件用来存储数据，通过express创建服务器对象，fs模块对文件进行读写。 运用post请求 代码如下： var express = require('express') var fs = require("fs") var app = express() app.use(express.static("www")) app.use(express.urlencoded({extended:false})) // 先获取user.json里面的数据和req.
nodejs学习，前后端项目分离初次搭建登录页注册页！✌
最新发布
weixin_56075623的博客
06-02 172
【代码】nodejs学习，前后端项目分离初次搭建登录页注册页！✌。
node.js实现简单的登录注册页面
weixin_30532973的博客
04-08 545
首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆、一个注册页面html 1、注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>regist</title> <...
[Node]node.js实现登录注册
stay hungry stay foolish
01-06 4044
背景 补充学习下node知识，课程来自imooc。个人学习笔记，如有侵权，会删除。 node课程 笔记 node基础 node介绍 脱离浏览器运行JS 后台API编写 Webpack,gulp,Npm等等 中间层：服务器中负责IO读写的中间层服务器 node 可以 优化性能 异步io 处理数据 安全性 案例login，signup node介绍 node优势 便于前端开发入门 性能高 利于前端代码整合 环境搭建 官网下载 node -v检验 node 1.js 清屏幕 cls
创建nodejs项目实现登录注册接口
Archer的博客
04-12 5500
第一部分：项目搭建 1. 初始化 npm init 2. 安装第三方拓展包 按需安装 ##安装express框架 npm install express 3. 创建app.js 编写代码 const express = require('express'); const app = express(); // start server const port = process.env.NODE_ENV === 'production' ? (process.env.PORT || 80) : 3
node.js连接数据库实现注册登录拼接添加到页面 （增删改查）
weixin_58020179的博客
07-15 3030
目录 注册前端页面 登录页面 登录进去的首页面 Node.js内容 注册前端页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <script src="js源文件/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script
二、nodejs连接数据库实现登录功能
Wang3317866410的博客
05-03 713
/ 数据库下载可以用这个。
node.js实现登录注册页面
10-20
在本文中，我们将深入探讨如何使用Node.js来创建一个简单的登录注册系统。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务器端使用JavaScript，这使得前后端开发更加统一。以下是对实现...
nodejs用户登录注册demo示例
08-24
Nodejs Express 用户登录注册示例，数据库使用mysql，实现用户注册、登录及登录成功跳转到系统界面简单功能
node.js登录注册界面.zip
09-20
《Node.js实现登录注册界面详解》 在现代Web开发中，构建用户登录、注册界面是不可或缺的功能，这通常涉及到前端的交互设计以及后端的数据验证和处理。本篇将深入探讨如何利用Node.js、Ajax以及HTML来实现这样一个...
Node.js+Express+MySql实现用户登录注册功能
10-19
主要为大家详细介绍了Node.js+Express+MySql实现用户登录注册，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
node.js+jQuery实现用户登录注册AJAX交互
10-19
本篇文章主要介绍了用Node.js当作后台、jQuery写前台AJAX代码实现用户登录和注册的功能的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
NodeJS实现登录注册功能（图文）
weixin_30488313的博客
09-12 4226
该Demo根据菜鸟教程的练手项目，请提前到菜鸟教程的官网查看nodejs的相关教程，根据教程实际操作一遍，然后自己动手去实现登录、注册功能，此Demo只作参考，不符合前端相关规范。 使用的技术栈 node+express+mongodb 项目目录结构 node_modules: 第三方模块目录 public: 公共文件目录（js、css、image） login.html：登录页面...
node.js实现用户登录注册简单示例
wisdom_bo的博客
08-25 8162
在前面已经讲述如何创建一个nodejs项目，此处不在做介绍，具体可查看http://blog.csdn.net/hh12211221/article/details/77555344，选择一个视图工具打开nodejs项目。 在正式写功能之前，先做一些准备工作，创建数据库及下载所需要的模板 创建数据库 创建数据库userdb及表userinfo CREATE DATABASE IF
node.js 使用express模板 写登录 注册界面
y943711797的博客
04-20 692
view文件夹： 登录网页： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/h
nodejs实现用户登录注册---前台通过ajax请求数据
maidu_xbd的博客
01-23 5162
1.通过http模块创建服务器，并监听端口8080 const http = require('http'); var server = http.createServer(function (req, res){}); server.listen(8080); 2.解析数据 通过‘querystring’和'url'模块解析数据 req.on('data', function (d...
node.js实现登录注册
06-10
好的，下面是一个简单的 Node.js 实现登录注册的示例代码： 首先，需要引入 Express 和 body-parser 模块： ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); ``` 然后，定义一个数组 users 来存储用户信息： ```javascript const users = []; ``` 接下来，实现注册功能： ```javascript app.post('/register', (req, res) => { const { username, password } = req.body; if (!username || !password) { return res.status(400).json({ message: '用户名或密码不能为空' }); } const user = users.find(u => u.username === username); if (user) { return res.status(400).json({ message: '用户名已存在' }); } const newUser = { username, password }; users.push(newUser); res.status(201).json({ message: '注册成功' }); }); ``` 这段代码首先从请求体中获取用户名和密码，然后判断是否为空。接着，在 users 数组中查找是否已经存在该用户名，如果存在，则返回错误信息。最后，将新用户信息添加到 users 数组中，并返回注册成功的信息。 接下来，实现登录功能： ```javascript app.post('/login', (req, res) => { const { username, password } = req.body; if (!username || !password) { return res.status(400).json({ message: '用户名或密码不能为空' }); } const user = users.find(u => u.username === username && u.password === password); if (!user) { return res.status(401).json({ message: '用户名或密码错误' }); } res.json({ message: '登录成功' }); }); ``` 这段代码与注册功能类似，首先从请求体中获取用户名和密码，然后判断是否为空。接着，在 users 数组中查找是否存在该用户名和密码，如果不存在，则返回错误信息。最后，返回登录成功的信息。 完整的代码如下： ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); const users = []; app.post('/register', (req, res) => { const { username, password } = req.body; if (!username || !password) { return res.status(400).json({ message: '用户名或密码不能为空' }); } const user = users.find(u => u.username === username); if (user) { return res.status(400).json({ message: '用户名已存在' }); } const newUser = { username, password }; users.push(newUser); res.status(201).json({ message: '注册成功' }); }); app.post('/login', (req, res) => { const { username, password } = req.body; if (!username || !password) { return res.status(400).json({ message: '用户名或密码不能为空' }); } const user = users.find(u => u.username === username && u.password === password); if (!user) { return res.status(401).json({ message: '用户名或密码错误' }); } res.json({ message: '登录成功' }); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 希望这个示例代码对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值