当前位置：首页 > VUE

vue实现登录注册mysql

2026-02-23 17:51:37VUE

Vue 前端实现登录注册界面

使用 Vue CLI 创建项目并安装必要依赖：

vue create vue-auth-demo
cd vue-auth-demo
npm install axios vue-router vuex

创建登录注册组件：

<template>
  <div class="auth-form">
    <input v-model="form.username" placeholder="用户名"/>
    <input v-model="form.password" type="password" placeholder="密码"/>
    <button @click="handleSubmit">{{ isLogin ? '登录' : '注册' }}</button>
    <p @click="toggleMode">{{ isLogin ? '没有账号？立即注册' : '已有账号？立即登录' }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: true,
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    toggleMode() {
      this.isLogin = !this.isLogin
    },
    async handleSubmit() {
      const url = this.isLogin ? '/api/login' : '/api/register'
      try {
        const res = await axios.post(url, this.form)
        localStorage.setItem('token', res.data.token)
        this.$router.push('/dashboard')
      } catch (err) {
        alert(err.response.data.message)
      }
    }
  }
}
</script>

Node.js 后端服务搭建

创建 Express 服务并连接 MySQL：

mkdir server
cd server
npm init -y
npm install express mysql2 body-parser cors jsonwebtoken bcryptjs

后端主要代码：

vue实现登录注册mysql

const mysql = require('mysql2/promise')
const bcrypt = require('bcryptjs')
const jwt = require('jsonwebtoken')

const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  password: 'yourpassword',
  database: 'auth_demo'
})

app.post('/api/register', async (req, res) => {
  const { username, password } = req.body
  const hashedPassword = await bcrypt.hash(password, 10)

  try {
    await pool.query(
      'INSERT INTO users (username, password) VALUES (?, ?)',
      [username, hashedPassword]
    )
    res.json({ message: '注册成功' })
  } catch (err) {
    res.status(400).json({ message: '用户名已存在' })
  }
})

app.post('/api/login', async (req, res) => {
  const { username, password } = req.body
  const [rows] = await pool.query(
    'SELECT * FROM users WHERE username = ?', 
    [username]
  )

  if (rows.length === 0 || !await bcrypt.compare(password, rows[0].password)) {
    return res.status(401).json({ message: '用户名或密码错误' })
  }

  const token = jwt.sign(
    { userId: rows[0].id },
    'your_secret_key',
    { expiresIn: '1h' }
  )

  res.json({ token })
})

MySQL 数据库准备

创建用户表结构：

CREATE DATABASE auth_demo;
USE auth_demo;

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

跨域配置与项目联调

配置 Vue 开发环境代理：

vue实现登录注册mysql

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

启动前后端项目：

# 前端
npm run serve

# 后端
node server.js

安全增强措施

密码加密存储：

const saltRounds = 10
const hashedPassword = await bcrypt.hash(plainPassword, saltRounds)

JWT 验证中间件：

function authenticateToken(req, res, next) {
  const authHeader = req.headers['authorization']
  const token = authHeader && authHeader.split(' ')[1]

  if (!token) return res.sendStatus(401)

  jwt.verify(token, 'your_secret_key', (err, user) => {
    if (err) return res.sendStatus(403)
    req.user = user
    next()
  })
}