AI-Chat对话，并实现注册登录功能

最近学习到了openAI的相关知识，以下是我的一些的学习过程以及成果，希望大家友好交流及指正。

用 Node.js 构建登录注册与 AI 聊天系统的完整流程在现代 Web 应用中，用户认证（登录和注册）是一个基本功能，而 AI 聊天系统则提供了一种有趣的交互方式。在本篇文章中，我们将创建一个包含登录、注册、以及与 AI 进行对话的完整系统。这不仅能帮助你理解用户认证的实现过程，还能体验到通过 API 集成 AI 聊天的乐趣。

项目概述

我们将用 Express.js 作为后端框架，使用 MySQL 数据库来存储用户信息和聊天记录，并使用 JWT（JSON Web Token）来管理用户会话。同时，我们会通过前端与用户进行交互，实现注册、登录功能，并与 AI 模型进行对话。

一、准备工作

 技术栈

后端：Node.js（Express.js、JWT、Bcrypt、MySQL）
数据库：MySQL
-前端：HTML、CSS、JavaScript

安装依赖

在项目文件夹中执行以下命令来安装必要的依赖：

npm install express mysql cors bcrypt jwt-simple axios

二、后端实现：用户认证与 AI 聊天接口

1. 初始化服务器与数据库连接

我们首先创建一个基础的 Express 服务器，连接 MySQL 数据库：

const express = require('express');
const mysql = require('mysql');
const cors = require('cors');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');

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

const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'authdb'
});

db.connect(err => {
    if (err) {
        console.error('Error connecting to MySQL:', err.message);
    } else {
        console.log('Connected to MySQL');
    }
});

const jwtSecret = 'your_jwt_secret';

 2. 注册用户 API

我们创建一个注册 API，处理用户提交的用户名和密码，并在存入数据库前对密码进行加密。

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

    const hashedPassword = await bcrypt.hash(password, 10);
    const query = 'INSERT INTO users (username, password) VALUES (?, ?)';

    db.query(query, [username, hashedPassword], (err) => {
        if (err) return res.status(500).json({ message: 'Server error' });
        res.status(201).json({ message: 'User registered successfully' });
    });
});

 

3. 用户登录 API

登录时，验证用户名和密码，并生成一个 JWT 令牌，方便前端在后续请求中验证用户身份。

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

    db.query('SELECT * FROM users WHERE username = ?', [username], async (err, results) => {
        if (err) return res.status(500).json({ message: 'Server error' });
        if (!results.length || !(await bcrypt.compare(password, results[0].password))) {
            return res.status(400).json({ message: 'Invalid credentials' });
        }

        const token = jwt.sign({ userId: results[0].id }, jwtSecret, { expiresIn: '1h' });
        res.json({ token, message: 'Login successful' });
    });
});

4. AI 聊天 API

在验证用户身份后，用户可以发送消息，后端通过外部 AI 接口生成响应并返回。

app.post('/chat', authenticate, async (req, res) => {
    const { message } = req.body;
    try {
        const aiResponse = await getAIResponse(message);
        res.json({ message: 'Message sent successfully', aiResponse });
    } catch (error) {
        res.status(500).json({ message: 'AI response error' });
    }
});

getAIResponse` 函数调用外部 AI API，如 OpenAI 或其他类似服务。

三、前端实现：用户界面与交互

1. 登录注册界面

前端使用 HTML 和 CSS 构建一个简单的登录注册页面，并用 JavaScript 处理用户的输入和交互。

<div id="auth-interface">
    <form id="login-form">
        <input type="text" id="login-username" placeholder="Username" required>
        <input type="password" id="login-password" placeholder="Password" required>
        <button type="submit">Login</button>
    </form>

    <form id="register-form" style="display: none;">
        <input type="text" id="register-username" placeholder="Username" required>
        <input type="password" id="register-password" placeholder="Password" required>
        <button type="submit">Register</button>
    </form>
</div>

2. 发送消息并获取 AI 响应

当用户登录成功后，将显示聊天窗口。用户发送的消息会通过前端 JavaScript 将其发送到后端的 /chat 路由。

async function sendMessage() {
    const message = document.getElementById("messageInput").value;
    const token = localStorage.getItem("token");

    const response = await fetch("http://localhost:3001/chat", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${token}`
        },
        body: JSON.stringify({ message })
    });
    const data = await response.json();
    document.getElementById("messages").innerHTML += `<div class="user-message">${message}</div>`;
    document.getElementById("messages").innerHTML += `<div class="ai-message">${data.aiResponse}</div>`;
}

 3. 美化前端界面

通过一些 CSS 样式，使得消息显示更加直观、友好。

.user-message {
    background-color: #d4edda;
    text-align: right;
}
.ai-message {
    background-color: #e9ecef;
    text-align: left;
}

四、效果展示

 五、总结

通过 Node.js 和 Express 构建了一个简单的登录注册系统，并实现了与 AI 对话的功能。通过 JWT 管理用户会话，用户可以方便地注册、登录并安全地与系统交互。将 AI 接入聊天系统不仅增强了功能，还使得应用更加智能化。希望你在实践后能更好地理解后端与前端交互、用户验证、以及与外部 API 的集成方式。