当前位置：首页 > VUE

vue mysql实现登录注册

2026-02-21 06:05:17VUE

使用Vue和MySQL实现登录注册功能

前端部分（Vue.js）

创建Vue项目并安装axios用于HTTP请求

npm install axios

在Vue组件中实现注册表单

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button @click="register">注册</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    register() {
      axios.post('http://localhost:3000/register', {
        username: this.username,
        password: this.password
      }).then(response => {
        console.log(response.data);
      });
    }
  }
}
</script>

实现登录表单类似结构，只需修改方法和API端点

methods: {
  login() {
    axios.post('http://localhost:3000/login', {
      username: this.username,
      password: this.password
    }).then(response => {
      localStorage.setItem('token', response.data.token);
    });
  }
}

后端部分（Node.js + MySQL）

安装必要依赖

npm install express mysql2 body-parser bcryptjs jsonwebtoken cors

创建Express服务器并连接MySQL

const express = require('express');
const mysql = require('mysql2');
const bodyParser = require('body-parser');
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const cors = require('cors');

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

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

db.connect(err => {
  if (err) throw err;
  console.log('MySQL connected');
});

实现注册API

vue mysql实现登录注册

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

  db.query(
    'INSERT INTO users (username, password) VALUES (?, ?)',
    [username, hashedPassword],
    (err, result) => {
      if (err) return res.status(500).send('注册失败');
      res.status(200).send('注册成功');
    }
  );
});

实现登录API

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

  db.query(
    'SELECT * FROM users WHERE username = ?',
    [username],
    (err, results) => {
      if (err) return res.status(500).send('服务器错误');
      if (results.length === 0) return res.status(404).send('用户不存在');

      const passwordIsValid = bcrypt.compareSync(password, results[0].password);
      if (!passwordIsValid) return res.status(401).send('密码错误');

      const token = jwt.sign({ id: results[0].id }, 'secretkey', {
        expiresIn: 86400 // 24小时
      });

      res.status(200).send({ auth: true, token });
    }
  );
});

MySQL数据库准备

创建数据库和用户表

CREATE DATABASE auth_demo;

USE auth_demo;

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(255) NOT NULL UNIQUE,
  password VARCHAR(255) NOT NULL
);

运行项目

vue mysql实现登录注册