NodeJS+Express+Redis实现一个简单用户注册＋登录功能展示

NodeJS+Express+Redis实现一个简单用户注册＋登录功能展示

RT。 前段使用JQueryMobile进行展示。 实现了用户注册，登陆，列表基本功能 非常简洁。 如果想了解Redis存储，Express的处理可以提供一些基础的示范。

下载地址： https://github.com/guola/NodeJS_Express_Redis_User_Login 评论： @会罗比塔的蝌蚪

7 回复

NodeJS + Express + Redis 实现一个简单用户注册+登录功能展示

概述

本文将介绍如何使用Node.js、Express和Redis来实现一个简单的用户注册和登录功能。前端界面使用jQuery Mobile进行展示。

技术栈

  • Node.js: 后端运行环境
  • Express: Web应用框架
  • Redis: 缓存数据库
  • jQuery Mobile: 前端框架

项目结构

project/
├── app.js
├── package.json
├── routes/
│   ├── index.js
│   └── users.js
├── views/
│   └── index.ejs
└── public/
    └── js/
        └── main.js

安装依赖

首先，确保安装了Node.js和npm。然后，在项目目录中运行以下命令安装所需的依赖：

npm init -y
npm install express redis ejs body-parser cookie-parser

配置文件

app.js

const express = require('express');
const redis = require('redis');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');

const app = express();
const client = redis.createClient();

app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

// 路由配置
app.use('/', require('./routes/index'));
app.use('/users', require('./routes/users'));

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

用户路由

routes/users.js

const express = require('express');
const redis = require('redis');
const router = express.Router();

const client = redis.createClient();

router.post('/register', (req, res) => {
    const { username, password } = req.body;
    client.hset('users', username, password, (err, reply) => {
        if (err) throw err;
        res.redirect('/');
    });
});

router.post('/login', (req, res) => {
    const { username, password } = req.body;
    client.hget('users', username, (err, reply) => {
        if (err) throw err;
        if (reply === password) {
            res.cookie('username', username);
            res.redirect('/');
        } else {
            res.send('Login Failed');
        }
    });
});

module.exports = router;

前端页面

views/index.ejs

<!DOCTYPE html>
<html>
<head>
    <title>User Login</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>User Login</h1>
        </div>
        <div role="main" class="ui-content">
            <form action="/users/login" method="post">
                <label for="username">Username:</label>
                <input type="text" name="username" id="username">
                <label for="password">Password:</label>
                <input type="password" name="password" id="password">
                <button type="submit">Login</button>
            </form>
            <form action="/users/register" method="post">
                <label for="newUsername">New Username:</label>
                <input type="text" name="username" id="newUsername">
                <label for="newPassword">New Password:</label>
                <input type="password" name="password" id="newPassword">
                <button type="submit">Register</button>
            </form>
        </div>
    </div>
</body>
</html>

运行项目

启动服务器后，访问http://localhost:3000即可看到登录和注册页面。

GitHub链接

该项目的完整代码可以在以下链接找到: GitHub Repository

评论

如果您有任何问题或建议，请留言。

以上是一个简单的用户注册和登录功能的实现示例。通过使用Node.js、Express和Redis，我们可以快速搭建一个高效的Web应用。希望这个示例对您有所帮助！


能发布一个出来展示下么，发这代码我们都还要自己跑一遍呢

用的是这个ORM https://github.com/wdavidw/node-ron 怪不得看不到Redis的Node Module呢.

楼主，这个用户模块貌似密码没加密、也没有实现持久化登录

var db = require(’…/db’); var doctors = db.get(‘doctors’); 弱弱的问一句，db.js并没有声明get方法,db.get是继承的哪里的方法啊？

https://github.com/maritz/nohm

人气貌似没这个高…

在这个示例中，我们将使用Node.js、Express和Redis来实现一个简单的用户注册和登录功能。以下是如何实现这一功能的基本步骤：

环境配置

首先确保安装了Node.js、Express和Redis客户端（如ioredis）：

npm install express ioredis body-parser

示例代码

用户模型

创建一个简单的用户模型，用于存储用户名和密码哈希值。

// models/user.js
const bcrypt = require('bcrypt');

async function hashPassword(password) {
    return await bcrypt.hash(password, 10);
}

module.exports = class User {
    constructor(username, password) {
        this.username = username;
        this.passwordHash = null;
        this.setPassword(password);
    }

    async setPassword(password) {
        this.passwordHash = await hashPassword(password);
    }

    async comparePassword(password) {
        return await bcrypt.compare(password, this.passwordHash);
    }
};

Express服务器设置

创建一个Express服务器，添加注册和登录API端点。

// server.js
const express = require('express');
const Redis = require('ioredis');
const bodyParser = require('body-parser');
const User = require('./models/user');

const app = express();
app.use(bodyParser.json());

const redis = new Redis();

app.post('/register', async (req, res) => {
    const { username, password } = req.body;
    const user = new User(username, password);

    try {
        await redis.set(username, JSON.stringify(user));
        res.status(201).send({ message: 'User registered successfully' });
    } catch (error) {
        res.status(500).send({ error: 'Registration failed' });
    }
});

app.post('/login', async (req, res) => {
    const { username, password } = req.body;

    try {
        const storedUserJSON = await redis.get(username);
        if (!storedUserJSON) {
            return res.status(401).send({ error: 'Invalid credentials' });
        }

        const storedUser = JSON.parse(storedUserJSON);
        const isMatch = await storedUser.comparePassword(password);

        if (isMatch) {
            res.send({ message: 'Login successful' });
        } else {
            res.status(401).send({ error: 'Invalid credentials' });
        }
    } catch (error) {
        res.status(500).send({ error: 'Login failed' });
    }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

前端页面

前端使用JQuery Mobile展示登录和注册表单。例如，注册页面可以是这样的：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header"><h1>Register</h1></div>
    <div role="main" class="ui-content">
        <form id="register-form">
            <label for="username">Username:</label>
            <input type="text" name="username" id="username" />
            <label for="password">Password:</label>
            <input type="password" name="password" id="password" />
            <button type="submit">Register</button>
        </form>
    </div>
</div>

<script>
$(document).ready(function() {
    $("#register-form").on("submit", function(event) {
        event.preventDefault();
        $.ajax({
            url: '/register',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                username: $('#username').val(),
                password: $('#password').val()
            }),
            success: function(data) {
                alert(data.message);
            },
            error: function(error) {
                alert(error.responseJSON.error);
            }
        });
    });
});
</script>
</body>
</html>

这样就完成了一个简单的用户注册和登录功能。用户可以在前端通过JQuery Mobile提交数据到后端，后端则使用Express和Redis进行处理。

回到顶部