Подключение конечных точек от Vue. js Frontend -> до Express, Node.js, Sequelize (API). (PostgreSQL) - PullRequest
Новая
       18

Подключение конечных точек от Vue. js Frontend -> до Express, Node.js, Sequelize (API). (PostgreSQL)

0 голосов
/ 04 февраля 2020

Я работал с различными учебными пособиями, чтобы понять и реализовать вызовы Api (конечные точки), определяя Getters, почти до такой степени, что я могу полностью вызывать операции 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 / принципалы Все соответствующие продукты также отображаются 

 {
        "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 БД.

Мой текущий раздел в продуктах. vue

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

отображение идентификатора продукта 

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

Как отобразить имя участника с ограничением внешнего ключа? Связано в моей таблице PostgreSQL в компоненте Vue.

Пожалуйста, помогите!

1 Ответ

0 голосов
/ 10 февраля 2020

Мне удалось разобраться.

Ваш раздел контроллера должен включать. 

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 }}
...