Node.js实现登录注册功能

本文实例为大家分享了Node.js实现登录注册功能的具体代码,供大家参考,具体内容如下

目录结构

注册页面:

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');
            }
        }
    })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 利用node.js+mongodb如何搭建一个简单登录注册的功能详解

    前言 最近突然对数据库和后台感兴趣了,就开始了漫长的学习之路,想想自己只是一个前端,只会java斯科瑞普,所以就开始看nodejs,看着看着突然发现mongodb和nodejs更配哦!,遂就开了我的mongodb之路.下面话不多说了,来一起看看详细的介绍吧. mongodb简介 就超简洁的说一下,mongo就是一个nosql的数据库,不使用sql的语法,当然其实也是大同小异的,增删改查还是差不多的,但是在概念上mongo还是跟mysql有相当大的区别的;比如在mongo中没有表的概念,而是一个集

  • 快速搭建Node.js(Express)用户注册、登录以及授权的方法

    项目准备 建立一个文件夹,这里叫 EXPRESS-AUTH npm init -y 启动服务 新建一个server.js 或者 app.js npm i express 开启端口,启动服务 // server.js // 引入 express const express = require('express') // 创建服务器应用程序 const app = express() app.get('/user', async (req, res) => { res.send('hello nod

  • Node.js+Express+MySql实现用户登录注册功能

    本文实例为大家分享了Node.js实现用户登录注册的具体代码,供大家参考,具体内容如下 IDE:WebStorm 工程目录: 数据库表 Login.js: /** * Created by linziyu on 2017/7/8. */ /** * express接收html传递的参数 */ var express=require('express'); var app=express(); var mysql=require('mysql'); /** * 配置MySql */ var con

  • node.js+jQuery实现用户登录注册AJAX交互

    最近实现了Node.js当作后台,jQuery写前台AJAX代码的,实现用户登录和注册的功能,刷新了前后端交互的三观.特记录一下. 1.login.ejs实现form框架 <form > <ul> <li><p>用户名</p></li> <li><input type="text" name="username" id="username"></

  • node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能

    同志们,经过不懈的努力,查了各种文档,终于鼓捣出了一个稍微像样一点的node项目,当然如果直接拿去项目里用,这个demo还太简单,毕竟一个完整的登录注册还有很多实际的内容,本案例mySQL的用户列表里,为便于理解,只设置了username 和password两个字段,正常的登录注册,肯定会有更多的字段的.但是对于初学node的人来说,比如笔者,还是学习到了不少内容,甚至,紧张的我不知如下下笔,肯定这个是参考了很多网上其他少年博客,以后这个登录注册demo会依据项目的需要而有所改进, 效果如下 效

  • node.js实现简单登录注册功能

    本文实例为大家分享了node.js实现简单登录注册的具体代码,供大家参考,具体内容如下 1.首先需要一个sever模块用于引入路由,引入连接数据库的模块,监听服务器2.要有model层,里面写数据库连接模块和数据库的各种model(表),并导出model对象3.工具类utils,里面存放一些功能的模块,并且封装后导出 ,例如发送验证码的功能4.写路由,需要对数据库操作就使用导出的model对象,需要功能模块就使用导出的功能对象随后返回这个路由,在sever里引入5.生成api文档 sever模块

  • node.js实现登录注册页面

    本文实例为大家分享了node.js登录注册页面展示的具体代码,供大家参考,具体内容如下 首先需要新建四个文件 一个服务器js 一个保存数据的txt 一个登陆.一个注册页面html 1.注册页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>regist</title> </head> <

  • Node.js实现登录注册功能

    本文实例为大家分享了Node.js实现登录注册功能的具体代码,供大家参考,具体内容如下 目录结构 注册页面: reg.html <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial

  • Node.js实现登陆注册功能

    本文实例为大家分享了Node.js实现登陆注册的具体代码,供大家参考,具体内容如下 1.服务器端 在项目里创建一个json文件用来存储数据,通过express创建服务器对象,fs模块对文件进行读写. 运用post请求 代码如下: var express = require('express') var fs = require("fs") var app = express() app.use(express.static("www")) app.use(expre

  • Node.js如何实现注册邮箱激活功能 (常见)

    一. 先注册一个支持发送验证邮件的邮箱,网易的126邮箱就可以 注册成功后进行登录,然后点击导航栏的设置,选择POP3/SMTP/IMAP,开启POP3/SMTP/IMAP服务,设置授权码就可以了. 二. 下载nodemailer插件 在命令行输入:npm install --save nodemailer 三. 编写发送邮件代码: 1 . 对发送激活邮件代码进行封装,然后导出: //email.js // 引入 nodemailer var nodemailer = require('node

  • Node+Express+MongoDB实现登录注册功能实例

    注入MongoDB 依赖 var mongoose = require("mongoose"); 由于需要进行表单处理,需要用到bodyParser中间件 bodyParser模块来做文件解析,将表单里的数据进行格式化 var bodyParser = require("body-parser"); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); 登录后将

  • 图解NodeJS实现登录注册功能

    该Demo根据菜鸟教程的练手项目,请提前到菜鸟教程的官网查看nodejs的相关教程,根据教程实际操作一遍,然后自己动手去实现登录.注册功能,此Demo只作参考,不符合前端相关规范. 使用的技术栈 node+express+mongodb 项目目录结构 node_modules: 第三方模块目录 public: 公共文件目录(js.css.image) login.html:登录页面 register.html:注册页面 main.html:主页面 db.js:数据库相关封装(数据库添加.查询)

  • koa2实现登录注册功能的示例代码

    本文介绍了koa2实现登录注册功能的示例代码,分享给大家,具体如下: 这个主要结合前几天的内容,做个实际案例的效果 版本: 项目结构: 前几天,我们把注册和登录的页面demo实现了,今天我们主要实现这么几个内容 注册新用户 判断该邮箱是否注册过 登录判断是否注册过 登录时的密码的正确 本文代码地址:https://github.com/xiaqijian/koa2-lessons/tree/master/lesson6 明天,我们将利用session实现登录状态判断 今天的这篇是在之前的代码基础

  • 利用Node.JS实现邮件发送功能

    第一步.配置篇 首先需要安装nodemailer库 npm install nodemailer//默认会安装最新的版本. 关于这个库的文档参见nodemailer 第二步.库的一些使用介绍 这个库使用方法很简单的.首先是要创建一个用于发送邮件的实例 var transporter = nodemailer.createTransport(transport[, defaults]) transport参数属性 属性太多了就只写一些关键的属性 port:连接的端口号,一般就是465 host:你

  • vue中uni-app 实现小程序登录注册功能

    思路: 1.使用微信的 open-type="getUserInfo" 获取用户信息,将用户信息保存到userinfoDetails对象中去. <button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">预约挂号</button> 2.使用 u

随机推荐