vue.js获取数据库数据实例代码

以下是详细讲解“vue.js获取数据库数据实例代码”的完整攻略：

1. 使用Axios获取数据库数据的示例

在vue.js中使用Axios获取数据库数据是比较常见的方法。以下是代码示例：

<template>
  <div>
    <!-- 数据列表展示 -->
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      axios.get('/api/list')
        .then(res => {
          this.list = res.data.data.list
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

在上面的代码示例中，我们使用了Axios发送GET请求获取数据库中的数据，并将获取到的数据渲染到页面上。

另外，我们还可以通过使用Axios发送POST请求，向数据库中插入数据，以下是一个示例：

<template>
  <div>
    <!-- 表单 -->
    <form>
      <label>
        姓名：
        <input type="text" v-model="user.name">
      </label>
      <label>
        年龄：
        <input type="text" v-model="user.age">
      </label>
      <button type="button" @click="addUser">添加</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      user: {
        name: '',
        age: ''
      }
    }
  },
  methods: {
    addUser () {
      axios.post('/api/addUser', {
        name: this.user.name,
        age: this.user.age
      })
        .then(res => {
          console.log(res.data)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

在上面的代码示例中，我们通过使用Axios发送POST请求，向数据库中插入了一条数据。

2. 使用Vue.js的官方插件vue-resource获取数据库数据的示例

vue-resource是Vue.js官方提供的HTTP请求插件，这里给出一个使用vue-resource获取数据库数据的示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import VueResource from 'vue-resource'

export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$http.get('/api/list')
        .then(res => {
          this.list = res.data.data.list
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

在上面的代码示例中，我们使用了Vue.js官方插件vue-resource发送GET请求获取数据库中的数据，并将获取到的数据渲染到页面上。

另外，我们还可以通过使用Vue.js官方插件vue-resource发送POST请求，向数据库中插入数据，以下是一个示例：

<template>
  <div>
    <form>
      <label>
        姓名：
        <input type="text" v-model="user.name">
      </label>
      <label>
        年龄：
        <input type="text" v-model="user.age">
      </label>
      <button type="button" @click="addUser">添加</button>
    </form>
  </div>
</template>

<script>
import VueResource from 'vue-resource'

export default {
  data () {
    return {
      user: {
        name: '',
        age: ''
      }
    }
  },
  methods: {
    addUser () {
      this.$http.post('/api/addUser', {
        name: this.user.name,
        age: this.user.age
      })
        .then(res => {
          console.log(res.data)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

在上面的代码示例中，我们通过使用Vue.js官方插件vue-resource发送POST请求，向数据库中插入了一条数据。

以上是两种获取数据库数据的示例，你可以根据自己的实际情况选择合适的方法。希望对你有所帮助！