详解vue+nodejs获取多个表数据的方法

关于“详解vue+nodejs获取多个表数据的方法”的完整攻略，以下是详细步骤和示例说明。

步骤：

1. 创建一个Vue项目:

vue create project_name

1. 安装axios和vue-resource：

npm install axios vue-resource --save

1. 在main.js中引入Vue和vue-resource：

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)

1. 封装接口请求方法：

// 封装post请求
export const postRequest = (url, params) => {
  return Vue.http.post(url, params)
}

// 封装get请求
export const getRequest = (url, params) => {
  return Vue.http.get(url, {params: params})
}

1. 在组件中使用接口请求方法：

示例1：获取多个表数据-方法一

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(user, index) in userList" :key="user.id">
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>{{user.gender}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { getRequest } from '@/utils/request'

export default {
  data() {
    return {
      userList: []
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      getRequest('/api/userList').then(res => {
        this.userList = res.data
      })
    }
  }
}
</script>

示例2：获取多个表数据-方法二

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>类别名称</th>
          <th>创建时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(category, index) in categoryList" :key="category.id">
          <td>{{category.id}}</td>
          <td>{{category.name}}</td>
          <td>{{category.createTime}}</td>
        </tr>
      </tbody>
    </table>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>商品名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(product, index) in productList" :key="product.id">
          <td>{{product.id}}</td>
          <td>{{product.name}}</td>
          <td>{{product.price}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { getRequest } from '@/utils/request'

export default {
  data() {
    return {
      categoryList: [],
      productList: []
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      getRequest('/api/categoryList').then(res => {
        this.categoryList = res.data
      })
      getRequest('/api/productList').then(res => {
        this.productList = res.data
      })
    }
  }
}
</script>

总结

以上是使用Vue和nodejs获取多个表数据的方法的详细说明。需要注意的是，我们可以根据实际情况选择适合的方法进行实现。同时，可以封装一些常用的接口请求方法，以便在项目中多次重复使用。