当前位置：首页 > VUE

vue mysql登录功能实现

2026-01-21 13:05:59VUE

实现 Vue 和 MySQL 的登录功能

前端 Vue 部分

安装必要的依赖：

npm install axios vue-router

创建登录表单组件 (Login.vue)：

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button @click="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
        });
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('登录失败:', error);
      }
    }
  }
}
</script>

配置路由 (router/index.js)：

import Vue from 'vue';
import Router from 'vue-router';
import Login from '../components/Login.vue';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/dashboard', component: Dashboard, meta: { requiresAuth: true } }
  ]
});

后端 Node.js + MySQL 部分

安装必要的依赖：

npm install express mysql2 body-parser jsonwebtoken bcryptjs cors

创建服务器 (server.js)：

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

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

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

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

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

  db.query(
    'SELECT * FROM users WHERE username = ?',
    [username],
    (err, results) => {
      if (err) throw err;

      if (results.length === 0) {
        return res.status(401).json({ message: '用户不存在' });
      }

      const user = results[0];
      const isMatch = bcrypt.compareSync(password, user.password);

      if (!isMatch) {
        return res.status(401).json({ message: '密码错误' });
      }

      const token = jwt.sign({ id: user.id }, 'secretkey', { expiresIn: '1h' });
      res.json({ token });
    }
  );
});

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

数据库准备

创建数据库和用户表：

CREATE DATABASE auth_db;

USE auth_db;

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

-- 插入测试用户 (密码是123456的bcrypt哈希)
INSERT INTO users (username, password) VALUES 
('testuser', '$2a$10$N9qo8uLOickgx2ZMRZoMy.MRjL1E8kS3q9VnR6Mqoq3X2YQ5z/UdG');