连接 Vue.js 前端 -> 通过 Express、Node.js、Sequelize (API) 端点。 (PostgreSQL)答案

【问题标题】：Connecting Vue.js Frontend -> through Express, Node.js, Sequelize (API) endpoints. (PostgreSQL)连接 Vue.js 前端 -> 通过 Express、Node.js、Sequelize (API) 端点。 (PostgreSQL)
【发布时间】：2020-02-10 21:02:27
【问题描述】：

我已经通过各种教程来理解和实现 API 调用（端点），定义 Getter，几乎到了我可以通过相应地指向它们的路由完全调用 CRUD 操作的地步。

我可以通过sequelize创建外键，完美创建我的PostgreSQL表

async showAll (req, res) {
    try {
      const products = await Product.findAll({
        where: {}        
      })
      res.send(products)
    } catch (err) {
      res.status(500).send({
        error: 'An Error has occured trying to retrieve Products'
      })
    }
  },

在邮递员中当到达我的端点 GET /principals 还显示所有相关产品

 {
        "id": 2,
        "name": "Company B",
        "telephoneNumber": "012 111 1111",
        "address": "Betha Str\nBedrasDorp",
        "logo": "",
        "registrationNumber": "2020/123/1234",
        "taxNumber": "123",
        "monthEnd": 1,
        "createdAt": "2020-01-31T09:29:39.692Z",
        "updatedAt": "2020-01-31T09:29:39.692Z",
        "products": [
            {
                "id": 18,
                "stockCode": "U7U5U",
                "nappiCode": "NULL",
                "barCode": "NULL",
                "description": "Silver",
                "sysPrice": 297.43,
                "image": "",
                "createdAt": "2020-01-31T09:25:22.620Z",
                "updatedAt": "2020-01-31T09:25:22.620Z",
                "principalId": 2
            },

我的问题如何在 Vue 组件中显示我的主体名称，而不仅仅是根据我的 postgreSQL DB 上的 sequelize 创建的列的 principalID。

products.vue 中我当前的部分

<script>
....
async mounted () {
      // do request to list all products
      this.products = (await ProductsService.showAll()).data
  }
 ...
 </script>

显示productId

....
<template
  slot="items"
  slot-scope="{ item }">
  <td>{{ item.stockCode }}</td>
  <td>{{ item.description }}</td>
  <td class="text-xs-left"> {{ item.principalId }} </td>
</template>
...

如何显示外键约束中的 Principal - 名称？在 Vue 组件中链接到我的 PostgreSQL 表中。

请帮忙！

【问题讨论】：

您也可以在作用域中传递它（主\父对象），甚至可以通过 this.$parent 访问它。使用 $parent 的第二种方法使组件的可重用性降低，因为它在父级上中继以保存该信息。
我会试一试的。谢谢

标签： postgresql express vue.js sequelize.js

【解决方案1】：

我设法解决了。

你的控制器部分应该包括。

async showAll (req, res) {
    try {
      const products = await Product.findAll({
        where: {},
        include: [
          {
            model: ParentName
          }
        ]        
      })        
      res.send(products)      
    } catch (err) {
      res.status(500).send({
        error: 'An Error has occured trying to retrieve Products'
      })
    }
  }

你的 .vue 组件脚本部分

    async mounted () {this.products = (await ProductsService.showAll()).data
  }

并且在 vue 的模板组件中调用它变得容易

{{ props.item.Principal.name }}

【讨论】：

{{ props.item.Principal.name }} 应该是 {{ props.item.ParentName.name }}