现在我们继续来进行后台主控台的开发和交互
首先是统计面板组件的开发:
首先需要拿到数据,就从提供的接口拿:
在api文件夹下创建一个index.js
import axios from '~/axios'
// 主控面板第一行数据接口
export function getStatistics1(){
return axios.get("/admin/statistics1")
}
然后再编辑Index.vue
<template>
<div>
<el-row :gutter="20">
<!-- 每块6个 -->
<el-col :span="6" :offset="0" v-for="(item, index) in panels" :key="index">
<!-- 卡片组件 -->
<!-- 去掉边框 -->
<el-card shadow="hover" class="border-0">
<template #header>
<!-- 利用flex布局的左右布局justify-between -->
<div class="flex justify-between">
<!-- 字体大小改为text-sm -->
<span class="text-sm">{
{
item.title }}</span>
<!-- 后端返回回来的颜色值是unitColor -->
<el-tag :type="item.unitColor" effect="plain">
<!-- 后端返回的值(年) -->
{
{
item.unit }}
</el-tag>
</div>
</template>
<!-- card body -->
<!-- 加大字体,加粗,灰色 -->
<span class="text-3xl font-bold text-gray-500">
<!-- 数值 -->
{
{
item.value }}
</span>
<!-- 分割线 -->
<el-divider />
<!-- 字体缩小,灰色 -->
<div class="flex justify-between text-sm text-gray-500">
<span>{
{
item.subTitle }}</span>
<span>{
{
item.subValue }}</span>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<!-- 响应式api ,ref,一个变量响应式,普通类型,script里面count.value,template里面直接{
{
count}}-->
<!-- 响应式api , reactive,用于对象 script里面form.count++,template里面直接{
{
form.count}}-->
<script setup>
import {
ref } from 'vue'
import {
getStatistics1 } from "~/api/index.js"
// 接收四个面板数据
const panels = ref([])
// 请求拦截器已经统一传了token,不用传多于参数
getStatistics1()
.then(res => {
panels.value = res.panels
// 拿到了四个面板的数据
// console.log(res)
// console.log(panels.value)
})
</script>
主要是用到了卡片组件以及layout布局,因为element plus提供的layout布局默认是占24格,而我们第一层数据面板有四条数据,所以我们就是每一块占6个,所以<el-col :span="6" :offset="0" v-for="(item, index) in panels" :key="index">
里面的:span里面的值是6.看看效果:
拿到了数据。
然后我们利用骨架屏优化体验:
这里我们要用到element提供给我们的一个骨架屏组件:
skeleton骨架屏
在index.vue里面加上骨架屏:
<template>
<div>
<el-row :gutter="20">
<!-- 只有当内容全部为0的时候,才显示骨架屏 -->
<template v-if="panels.length == 0">
<!-- 骨架屏 -->
<el-col :span="6" v-for="i in 4" :key="i">
<el-skeleton style="width:100%;" animated loading>
<template #template>
<!-- 卡片组件 -->
<!-- 去掉边框 -->
<el-card shadow="hover" class="border-0">
<template #header>
<!-- 利用flex布局的左右布局justify-between -->
<div class="flex justify-between">
<!-- 字体大小改为text-sm -->
<el-skeleton-item variant="text" style="width: 50%" />
<!-- 后端返回回来的颜色值是unitColor -->
<el-skeleton-item variant="text" style="width: 10%" />
</div>
</template>
<!-- card body -->
<!-- 加大字体,加粗,灰色 -->
<el-skeleton-item variant="h3" style="width: 80%" />
<!-- 分割线 -->
<el-divider />
<!-- 字体缩小,灰色 -->
<div class="flex justify-between text-sm text-gray-500">
<el-skeleton-item variant="text" style="width: 50%" />
<el