时间戳

首页 > 解决方案 > 我们如何使用 vue js 从数据库中检索产品数量？

mysql - 我们如何使用 vue js 从数据库中检索产品数量？

问题描述

我在 Vuejs、Laravel 和 Quasar 中一起工作，为 Admin 制作了一个仪表板。现在我想查找当前产品的数量，用户和订单分别保存在 mySQL 数据库中的一个单独的表中。我无法这样做，我的理解是我们可以通过{{products.lenght}}. 有没有办法做到这一点？这是我想显示元素数量的地方：

编辑

这些是我的代码：

模板：

<template>
  <div class="layout-padding ">
    <div class="flex wrap gutter">
      <div class="width-1of3 xl-auto">
      <q-card inline class="q-ma-sm" style="background:#00C851; color:white; padding:20px; margin:10px">
      <q-card-title>
        Products
        <span slot="subtitle">Available products</span>
      </q-card-title>
      <q-card-main>
        <a href='/#/products/index'>Products {{products.length}} </a>
      </q-card-main>
    </q-card>
      </div>
      <div class="width-1of3 sm-auto">
      <q-card inline class="q-ma-sm" style="background:#00C851; color:white; padding:20px; margin:10px">
      <q-card-title>
        Orders
        <span slot="subtitle">Available Orders</span>
      </q-card-title>
      <q-card-main>
        <a href='/admin/products'>Orders</a>
      </q-card-main>
    </q-card>
      </div>
      <div class="width-1of3 sm-auto">
      <q-card inline class="q-ma-sm" style="background:#00C851; color:white; padding:20px; margin:10px">
      <q-card-title>
        Users
        <span slot="subtitle">Current Registered Users</span>
      </q-card-title>
      <q-card-main>
        <a href='/products/users'>Users </a>
      </q-card-main>
    </q-card>
      </div>
        <div class="width-1of3 sm-auto">
      <q-card inline class="q-ma-sm" style="background:#00C851; color:white; padding:20px; margin:10px">
      <q-card-title>
        Categories
        <span slot="subtitle">Available Categories</span>
      </q-card-title>
      <q-card-main>
        <a href='/admin/products'>Categories</a>
      </q-card-main>
    </q-card>
      </div>
    </div>
      <q-card style="background:#33b5e5; color:white; padding:20px; height:250px; margin-top:10px;">
      <q-card-title>
        Categories
        <span slot="subtitle">Current Categories</span>
      </q-card-title>
      <q-card-main>
      </q-card-main>
    </q-card>
  </div>
</template>

脚本：

<script>
import axios from 'axios'

export default {
  data () {
    return {
      user: null,
      columns: [
        { name: 'id', label: 'ID', field: 'id', sortable: false, align: 'left' },
        { name: 'category_id', label: 'Cat ID', field: 'category_id', sortable: true, align: 'left' },
        { name: 'product_name', label: 'Name', field: 'product_name', sortable: true, align: 'left' },
        { name: 'product_detail', label: 'Details', field: 'product_detail', sortable: true, align: 'left' },
        { name: 'original_price', label: 'Prev Price', field: 'original_price', sortable: true, align: 'left' },
        { name: 'product_price', label: 'Price', field: 'product_price', sortable: true, align: 'left' },
        { name: 'actions', label: 'Actions', sortable: false, align: 'right' }
      ],
      selected: [],
      loading: false,
      serverPagination: {
        page: 1,
        rowsNumber: 10, // the number of total rows in DB
        rowsPerPage: 5,
        sortBy: 'id',
        descending: true
      },
      serverData: [],
      products: []
    }
  },
  methods: {
    request ({ pagination }) {
      // QTable to "loading" state
      this.loading = true
      axios
        .get(`http://127.0.0.1:8000/products/list/${pagination.page}?rowsPerPage=${pagination.rowsPerPage}&sortBy=${pagination.sortBy}&descending=${pagination.descending}`)
        .then(({ data }) => {
          // updating pagination to reflect in the UI
          this.serverPagination = pagination

          // we also set (or update) rowsNumber
          this.serverPagination.rowsNumber = data.rowsNumber

          // then we update the rows with the fetched ones
          this.serverData = data.rows

          // finally we tell QTable to exit the "loading" state
          this.loading = false
        })
        .catch(error => {
          // there's an error... do SOMETHING
          console.log(error)

          // we tell QTable to exit the "loading" state
          this.loading = false
        })
    },
    destroy (id, rowIndex) {
      this.$q.dialog({
        title: 'Delete',
        message: 'Are you sure to delete ' + name + '?',
        color: 'primary',
        ok: true,
        cancel: true
      }).then(() => {
        axios
          .delete(`http://127.0.0.1:8000/products/${id}`)
          .then(() => {
            // this.serverData[rowIndex].id = 'DELETED'
            this.$q.notify({type: 'positive', timeout: 2000, message: 'The product has been deleted.'})
          })
          .catch(error => {
            this.$q.notify({type: 'negative', timeout: 2000, message: 'An error has been occured.'})
            console.log(error)
          })
      }).catch(() => {
        // cancel - do nothing?
      })
    }
  },
  mounted () {
    // once mounted, we need to trigger the initial server data fetch
    this.request({
      pagination: this.serverPagination,
      filter: this.filter
    })
    axios
      .get('http://127.0.0.1:8000/products')
      .then(response => {
        this.products = response.data
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

添加图像

如果有人不理解这个问题，这就是我想要的。

我想要的结果

标签： mysqllaravelvue.jscountquasar-framework

解决方案

鉴于您正在使用 Laravel，我在这里假设一些事情，您可能正在尝试使用 eloquent 输出 JSON 响应。

网页.php

//Assumed Laravel Route For
//http://127.0.0.1:8000/products/list/${pagination.page}?rowsPerPage=${pagination.rowsPerPage}&sortBy=${pagination.sortBy}&descending=${pagination.descending}
Route::get('products/list','ProductController@index');

产品控制器.php

class ProductController  {

    public function index()
    {
        $products = Product::all();

        $allProductsWithProductCount = [
            'products' => $products,
            'products_count' => $products->count()
        ];

        return $allProductsWithProductCount;
    }
}

您可以做的是计算产品或您返回的任何集合，将其添加到数组并返回如上所示的输出。

Vue

data () {
    return {
        productCount: null,
    }
}

在 Axios 方法中

axios
.get(`http://127.0.0.1:8000/products/list/${pagination.page}?rowsPerPage=${pagination.rowsPerPage}&sortBy=${pagination.sortBy}&descending=${pagination.descending}`)
.then(({ data }) => {
  this.productCount = data.product_count;
})

Vue 模板

<h1>Product Count: {{productCount}}</h1>

推荐阅读