vue项目使用node连接数据库的方法(前后端分离)

在Vue项目中使用Node连接数据库，主要的实现方式是通过Node.js提供的MySQL模块来进行连接，这个模块可以通过npm进行安装。具体步骤如下：

安装MySQL模块

在Node的环境下，可以使用npm进行MySQL模块的安装。在项目根目录运行以下命令：

npm install mysql

连接数据库

在项目的后端代码中，使用以下代码进行数据库连接：

const mysql = require('mysql')
let connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'sampledatabase'
})
connection.connect()

这里的host、user、password、database是根据本地数据库的情况需要进行修改的参数。

查询数据

在项目的后端代码中，可以使用以下代码进行数据的读取：

app.get('/data', (req, res) => {
  connection.query('SELECT * FROM sampletable', function (error, results, fields) {
    if (error) throw error
    res.send(results)
  })
})

这里的app是Express实例，/data是路由，SELECT * FROM sampletable是查询数据的SQL语句。

插入数据

在项目的后端代码中，可以使用以下代码进行数据的插入：

app.post('/insert', (req, res) => {
  let data = { name: req.body.name, age: req.body.age }
  connection.query('INSERT INTO sampletable SET ?', data, function (error, results, fields) {
    if (error) throw error
    res.send('Data added successfully.')
  })
})

这里的app是Express实例，/insert是路由，data是要插入的数据，INSERT INTO sampletable是插入数据的SQL语句。

在前端处理过程中，可以在Vue组件中使用axios库进行后端数据的获取和提交。以下是使用axios获取数据的示例：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in data" :key="index">{{ item.name }} - {{ item.age }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      data: []
    }
  },
  mounted () {
    axios.get('/data')
      .then(response => {
        this.data = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

这里的axios.get('/data')就是向后端请求数据的操作。类似地，使用axios提交数据的示例如下：

<template>
  <div>
    <input v-model="name" placeholder="Name">
    <input v-model="age" placeholder="Age">
    <button @click="submit">Submit</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    submit () {
      axios.post('/insert', { name: this.name, age: this.age })
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

这里的axios.post('/insert', { name: this.name, age: this.age })就是向后端提交数据的操作。