使用vue2前端框架和egg后端框架，请求后端数据库中的数据，并在前端页面以表格的方式展现

在Vue 2前端框架和Egg后端框架结合的项目中，获取后端数据库数据并显示在前端表格中，通常涉及以下几个步骤：

1. **在后端（Egg）**：
- 定义API路由：在Egg的controllers文件夹下创建一个控制器函数，使用Express或Koa等中间件提供的HTTP方法（如GET）访问数据库。例如，使用`this.app.db.query`执行SQL查询，获取你需要的数据。

   export default async handleGetData (ctx) {
     try {
       const data = await ctx.service.dataModel.find();
       ctx.body = data;
     } catch (error) {
       ctx.throw(500, error);
     }
   }

2. **在前端（Vue 2）**：
- 创建组件：编写一个Vue组件，比如`TableComponent.vue`，它负责接收后端传来的数据并渲染成表格。

   <template>
     <table>
       <thead>
         <tr>
           <th v-for="column in headers">{{ column }}</th>
         </tr>
       </thead>
       <tbody>
         <tr v-for="item in items">
           <td v-for="(value, key) in item">{{ value }}</td>
         </tr>
       </tbody>
     </table>
   </template>

   <script>
   import axios from 'axios';

   export default {
     props: ['headers', 'items'],
     async mounted() {
       const response = await axios.get('/api/data');
       this.headers = response.headers;
       this.items = response.data;
     }
   };
   </script>

3. **数据绑定和调用API**：
- 在Vue实例的created钩子或某个合适的生命周期内，通过axios发起请求到后端API `/api/data`，并将返回的数据属性绑定给组件的`headers`和`items`。

4. **路由设置**：
- 在Vue的`main.js`或`router.js`里设置API路径对应的路由，确保用户可以访问到这个数据展示页面。