node.js+vue3 +mysql 实现登录功能

在Node.js后端使用Express框架和MySQL数据库，Vue3前端实现登录功能的基本步骤如下：

后端（Node.js + Express）:

1. 安装所需依赖：express, mysql, cors, body-parser。
2. 创建Express服务器并设置CORS。
3. 连接MySQL数据库。
4. 创建登录路由，验证用户凭据。

前端（Vue3）:

1. 创建Vue项目。
2. 设计登录表单。
3. 使用axios发送登录请求。
4. 处理登录结果（例如保存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管理等。