在Node.js后端使用Express框架和MySQL数据库，Vue3前端实现登录功能的基本步骤如下：
后端（Node.js + Express）:
- 安装所需依赖：
express,mysql,cors,body-parser。 - 创建Express服务器并设置CORS。
- 连接MySQL数据库。
- 创建登录路由，验证用户凭据。
前端（Vue3）:
- 创建Vue项目。
- 设计登录表单。
- 使用axios发送登录请求。
- 处理登录结果（例如保存token）。
以下是简化的代码示例：
后端 (server.js):
const express = require('express');
const mysql = require('mysql');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const db = mysql.createConnection({
// MySQL连接配置
});
app.use(cors());
app.use(bodyParser.json());
// 连接数据库
db.connect(err => {
if (err) throw err;
console.log('Connected to MySQL database.');
});
// 登录路由
app.post('/login', (req, res) => {
const { username, password } = req.body;
db.query(
'SELECT * FROM users WHERE username = ? AND password = ?',
[username, password],
(error, results) => {
if (error) throw error;
if (results.length > 0) {
// 登录成功，返回成功响应
res.status(200).send('Logged in successfully.');
} else {
// 登录失败，返回错误响应
res.status(401).send('Invalid username or password.');
}
}
);
});
app.listen(3000, () => {
console.log('Server is running on port 3000.');
});前端 (Login.vue):
<template>
<div>
<input type="text" v-model="username" placeholder="Username" />
<input type="password" v-model="password" placeholder="Password" />
<button @click="login">Login</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '',
password: ''
};
},
methods: {
async login() {
try {
const response = await axios.post('http://localhost:3000/login', {
username: this.username,
password: this.password
});
console.log(response.data);
// 处理登录成功的情况，例如保存token或跳转页面
} catch (error) {
console.error(error);
// 处理登录失败的情况
}
}
}
};
</script>确保在启动前端应用之前启动后端服务器，并在发送请求时确保服务器端口是开放的。这只是一个简单的示例，实际应用中需要考虑更多安全性问题，比如使用加密存储密码、返回合适的HTTP状态码、处理session和token管理等。