我们如何使用 vue js 从数据库中检索产品数量？
Posted
技术标签:
【中文标题】我们如何使用 vue js 从数据库中检索产品数量？【英文标题】：How can we retrieve count of products from database using vue js? 【发布时间】：2019-05-10 21:18:47 【问题描述】：一起使用 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>
添加图片
如果有人不理解这个问题，这就是我想要的。
【问题讨论】：
如何在 vue.js 端取回这些数据？ 使用axios.get'('http://127.0.0.1:8000/products/list')
能否请您添加整个代码？
我更新了我的问题并添加了代码。
那么问题出在哪里？我看你做对了
【参考方案1】：
鉴于您正在使用 Laravel，我在这里假设了一些事情，您可能正在尝试使用 eloquent 输出 JSON 响应。
web.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');
ProductController.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>
【讨论】：
我不知道，现在连我以前的数字0都看不到了，我按照你说的设置了所有的代码，但还是卡住了。console.log(data) 请为我将 JSON 响应复制到 codepen 中。
有没有关系，将代码放在脚本中的什么位置？我的意思是在哪里放置 productCount: null, ?
我删除了我的答案。谢谢你的帮助。我真的很想有一个正确的答案，以便用户可以再次使用它。我真的没有注意到我可以编辑你的答案。再次感谢您。
没问题。谢谢。以上是关于我们如何使用 vue js 从数据库中检索产品数量？的主要内容，如果未能解决你的问题，请参考以下文章