现在有一个前后端分离的项目，前端用vue3，后端用nodejs，现在需要实现登陆注册信息连接数据库，使用mysql模板，请说明详细的步骤和代码

好的，下面我将为您提供关于如何使用 Node.js 和 MySQL 进行注册登录功能的步骤和代码。

步骤：

1. 安装依赖包

// 在你的项目根目录下运行以下命令
npm install mysql2

2. 创建 MySQL 数据库和表

在 MySQL 数据库中创建一个名为 `users` 的表，用于存储用户数据，其结构如下：

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

3. 在 Node.js 中连接 MySQL 数据库

在 Node.js 中连接 MySQL 数据库，可以使用 `mysql2` 模块。以下是一个连接 MySQL 数据库的示例代码：

const mysql = require('mysql2');

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

connection.connect(function(err) {
  if (err) {
    console.error('Error connecting to database: ' + err.stack);
    return;
  }
  console.log('Connected to database.');
});

4. 实现注册功能

注册功能包含两个部分：前端页面和后端接口。

前端页面可以使用 Vue.js 框架实现，以下是一个示例页面：

<template>
  <div>
    <h1>注册</h1>
    <form>
      <div>
        <label>用户名:</label>
        <input type="text" v-model="username">
      </div>
      <div>
        <label>密码:</label>
        <input type="password" v-model="password">
      </div>
      <button @click.prevent="register">注册</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async register() {
      const response = await fetch('/api/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: this.username,
          password: this.password
        })
      });
      const data = await response.json();
      if (data.success) {
        alert('注册成功！');
      } else {
        alert('注册失败：' + data.message);
      }
    }
  }
}
</script>

后端接口可以使用 Express 框架实现，以下是一个示例代码：

const express = require('express');
const mysql = require('mysql2');
const bcrypt = require('bcrypt');
const bodyParser = require('body-parser');

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

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

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

  // 检查用户名是否已存在
  const [rows] = await connection.promise().query(
    'SELECT * FROM `users` WHERE `username` = ?',
    [username]
  );
  if (rows.length > 0) {
    return res.json({
      success: false,
      message: '用户名已存在'
    });
  }

  // 对密码进行加密
  const saltRounds = 10;
  const hashedPassword = await bcrypt.hash(password, saltRounds);

  // 将用户数据插入到数据库中
  await connection.promise().query(
    'INSERT INTO `users` (`username`, `password`) VALUES (?, ?)',
    [username, hashedPassword]
  );

  res.json({
    success: true
  });
});

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

5. 实现登录功能

登录功能同样包含前端页面和后端接口两个部分。

前端页面可以使用 Vue.js 框架实现，以下是一个示例页面：

<template>
  <div>
    <h1>登录</h1>
    <form>
      <div>
        <label>用户名:</label>
        <input type="text" v-model="username">
      </div>
      <div>
        <label>密码:</label>
        <input type="password" v-model="password">
      </div>
      <button @click.prevent="login">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login() {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          username: this.username,
          password: this.password
        })
      });
      const data = await response.json();
      if (data.success) {
        alert('登录成功！');
      } else {
        alert('登录失败：' + data.message);
      }
    }
  }
}
</script>

后端接口可以使用 Express 框架实现，以下是一个示例代码：

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

  // 查询用户数据
  const [rows] = await connection.promise().query(
    'SELECT * FROM `users` WHERE `username` = ?',
    [username]
  );
  if (rows.length === 0) {
    return res.json({
      success: false,
      message: '用户名或密码错误'
    });
  }

  // 验证密码
  const hashedPassword = rows[0].password;
  const passwordMatch = await bcrypt.compare(password, hashedPassword);
  if (!passwordMatch) {
    return res.json({
      success: false,
      message: '用户名或密码错误'
    });
  }

  res.json({
    success: true
  });
});

至此，注册登录功能的实现已经完成了。