vue实现mysql输入功能
实现 Vue 与 MySQL 的交互
在 Vue 中直接连接 MySQL 是不安全的，通常需要通过后端服务（如 Node.js、PHP、Java 等）作为中间层。以下是基于 Vue 和 Node.js 的实现方案：
后端服务搭建（Node.js + Express）
安装必要的依赖：
npm install express mysql body-parser cors创建后端服务文件（如 server.js）：
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(bodyParser.json());
const db = mysql.createConnection({
host: 'localhost',
user: 'your_username',
password: 'your_password',
database: 'your_database'
});
db.connect(err => {
if (err) throw err;
console.log('MySQL Connected...');
});
// 插入数据接口
app.post('/api/data', (req, res) => {
const { name, email } = req.body;
const sql = 'INSERT INTO users (name, email) VALUES (?, ?)';
db.query(sql, [name, email], (err, result) => {
if (err) throw err;
res.send('Data inserted...');
});
});
app.listen(3001, () => console.log('Server started on port 3001'));前端 Vue 组件实现
安装 axios 用于 HTTP 请求：
npm install axios创建 Vue 组件：
<template>
<div>
<input v-model="formData.name" placeholder="Name">
<input v-model="formData.email" placeholder="Email">
<button @click="submitData">Submit</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
formData: {
name: '',
email: ''
}
}
},
methods: {
submitData() {
axios.post('http://localhost:3001/api/data', this.formData)
.then(response => {
console.log(response.data);
alert('Data submitted successfully');
})
.catch(error => {
console.error(error);
});
}
}
}
</script>数据库准备
确保 MySQL 中已创建对应表：
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255),
email VARCHAR(255)
);安全注意事项
- 永远不要在前端直接存储数据库凭据
- 生产环境应使用环境变量管理敏感信息
- 实现输入验证和参数化查询防止 SQL 注入
- 考虑添加身份验证机制
部署考虑
- 前后端分离部署时需配置 CORS
- 生产环境应使用 HTTPS
- 考虑使用 ORM 如 Sequelize 替代直接 SQL 查询
