vue中json数据存入mysql数据库 详细代码

首先，需要在后端搭建一个接口，用于接收前端传来的json数据并存入数据库中。以下是一个示例的Node.js代码：

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

// 解析json请求体
app.use(bodyParser.json());

// 连接数据库
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'test_db'
});
connection.connect();

// 接收post请求
app.post('/saveJsonData', (req, res) => {
  const jsonData = req.body;

  // 将json数据转换成字符串
  const jsonString = JSON.stringify(jsonData);

  // 存入数据库
  const sql = `INSERT INTO json_data (data) VALUES ('${jsonString}')`;
  connection.query(sql, (error, results) => {
    if (error) throw error;
    console.log('Json data saved successfully!');
    res.send('Json data saved successfully!');
  });
});

app.listen(port, () => {
  console.log(`Server started at http://localhost:${port}`);
});

在前端中，可以使用axios库来发送post请求，并将json数据作为请求体发送到后端接口。

<template>
  <div>
    <h1>Vue App</h1>
    <button @click="saveJsonData">Save Json Data</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    saveJsonData() {
      const jsonData = { name: 'John', age: 30 };

      axios.post('http://localhost:3000/saveJsonData', jsonData)
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

当点击“Save Json Data”按钮时，会发送post请求到后端接口，并将json数据存入数据库中。需要注意的是，这只是一个简单的示例代码，实际情况中还需要添加一些错误处理和安全性措施。