基于vue+nodejs+mysql的登录注册
时间: 2025-06-27 21:17:17 浏览: 13
### 使用 Vue.js、Node.js 和 MySQL 实现登录注册功能
#### 后端设置(Node.js + Express)
为了建立一个完整的用户认证系统,首先需要配置后端服务器来处理用户的请求。这可以通过Express框架完成。
在项目根目录下创建一个新的文件夹 `server` 并初始化新的 Node.js 项目:
```bash
mkdir server
cd server
npm init -y
npm install express mysql body-parser cors bcryptjs jsonwebtoken dotenv
```
安装完成后,在 `server` 文件夹内创建如下结构:
- `/routes/auth.js`: 定义路由逻辑。
- `/models/User.js`: 用户模型定义。
- `.env`: 存储环境变量如数据库连接字符串和密钥。
- `app.js`: 应用入口文件[^4]。
##### app.js 设置
```javascript
const express = require('express');
require('dotenv').config();
const bodyParser = require('body-parser');
const cors = require('cors');
// 创建应用实例
const app = express();
// 中间件
app.use(bodyParser.json());
app.use(cors());
// 路由引入
const authRoutes = require('./routes/auth');
app.use('/api', authRoutes);
// 连接数据库并启动服务
const dbConfig = {
host: process.env.DB_HOST,
user: process.env.DB_USER,
password: process.env.DB_PASSWORD,
database: process.env.DB_NAME
};
// ... 数据库连接代码省略 ...
// 监听端口
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
```
#### 前端设置(Vue.js)
对于前端部分,则可以利用 Vue CLI 来快速搭建起一个单页面应用程序(SPA),并通过 Axios 或 Fetch API 发送 HTTP 请求到后端API接口来进行交互操作。
通过命令行工具创建一个新的 Vue 项目:
```bash
vue create client
cd client
npm run serve
```
接着修改 `src/views/Login.vue` 及 `Register.vue`, 添加表单用于收集用户名密码等信息,并调用相应的API方法提交数据给后端验证或保存新账户记录[^1]。
#### 数据库设计与安全措施
考虑到安全性方面的要求,建议采用哈希算法对存储于MySQL中的用户密码进行加密保护;同时还可以考虑加入JWT(JSON Web Token)机制以便更好地支持无状态会话管理。具体来说就是当用户成功登陆之后返回token令牌供后续访问受权限控制资源时携带使用[^2]。
#### 示例代码片段展示
以下是简化版的用户注册函数示例,展示了如何接收来自客户端的数据并将经过bcryptjs 加密后的密码存入数据库中:
```javascript
// /routes/auth.js
const router = require('express').Router();
const User = require('../models/User');
const bcrypt = require('bcryptjs');
router.post('/register', async (req, res) => {
try {
const { username, email, password } = req.body;
// 密码加密
const salt = await bcrypt.genSalt(10);
const hashedPassword = await bcrypt.hash(password, salt);
// 新建用户对象
const newUser = new User({
username,
email,
password: hashedPassword
});
// 将用户添加至数据库
const savedUser = await newUser.save();
res.status(201).json(savedUser);
} catch (err) {
res.status(500).send(err.message);
}
});
```
阅读全文
相关推荐


















