怎么从前端写入mysql数据库

从前端直接写入MySQL数据库并不是一个安全的做法，因为这会暴露数据库的连接信息和潜在的安全风险。通常，前端应用通过后端服务器与数据库进行交互。以下是一个基本的流程和相关概念：

基础概念

前端（Frontend）：用户直接交互的部分，通常使用HTML, CSS, JavaScript等技术构建。
后端（Backend）：处理业务逻辑和数据存储的部分，可以使用各种编程语言和框架实现。
数据库（Database）：用于存储和管理数据的系统，MySQL是一种流行的关系型数据库管理系统。
API（Application Programming Interface）：前后端交互的桥梁，定义了双方通信的规则和协议。

类型与应用场景

RESTful API：一种设计风格，用于构建网络服务，适用于各种规模的应用。
GraphQL：一种查询语言，允许客户端请求所需的数据结构，适用于数据需求多样化的应用。

实现步骤

设计数据库表结构：根据应用需求设计数据库表。
创建后端服务：使用Node.js + Express为例，创建一个简单的服务器来处理数据库操作。
编写API接口：在后端服务中定义用于写入数据库的API接口。
前端调用API：使用JavaScript通过HTTP请求调用后端API。

示例代码

后端（Node.js + Express + MySQL）

const express = require('express');
const mysql = require('mysql');
const app = express();
app.use(express.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('Database 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) return res.status(500).send(err);
    res.status(200).send('Data inserted successfully');
  });
});

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

前端（JavaScript）

async function sendData() {
  const data = { name: 'John Doe', email: 'john@example.com' };
  try {
    const response = await fetch('/api/data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    });
    const result = await response.text();
    console.log(result);
  } catch (error) {
    console.error('Error:', error);
  }
}