Vue3入门笔记八----实现首页的展示内容

panzhixiang

发布于 2024-10-30 19:33:22

640

发布于 2024-10-30 19:33:22

文章被收录于专栏：panzhixiang

这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动，不会介绍Vue的基础特性，关于Vue的基础特性可以参考这个视频四个小时带你快速入门Vue，我是看这个入门的，觉得还不错。

代码地址： https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes

在这篇笔记中，会为首页添加一些展示内容，分为两种类型，一种是静态展示，不用从后端获取任何数据；还要一种是要从后端获取数据后才能展示的。

因为不是很复杂，就不按照上面两种类型单独写了，看笔记和代码的时候稍微注意一下就好了。

修改API

首页展示部分需要添加两个API以便获取数据，在src/api/api.js中修改，修改后文件内容如下，

import request from "./request.js";


export default {
    login(params) {
        return request({
            url: '/api/token/',
            method: 'post',
            data: params,
        })
    },
    refreshToken(params) {
        return request({
            url: '/api/token/refresh',
            method: 'post',
            data: params,
        })
    },
    getHomeTableData(params) {
        return request({
            url: '/api/vue/courses/',
            method: 'get',
            data: params,
        })
    },
    getHomeCountData(params) {
        return request({
            url: '/api/vue/orders/',
            method: 'get',
            data: params,
        })
    },
}

可以看到，新增了通过 /api/vue/courses/ 和 /api/vue/orders/ 这两个API获取数据的方法。

修改首页展示文件

有了API，接下来就是修改首页的页面了。

修改src/views/home/Home.vue，修改后内容如下，

<template>
    <el-row class="home" :gutter="20">
        <el-col :span="8" style="margin-top: 20px;">
            <el-card shadow="hover">
                <div class="user-info">
                    <img class="user-image" :src="getImgSrc()" alt="用户头像">
                    <div class="display-info">
                        <p class="name">Admin</p>
                        <p class="role">超级管理员</p>
                    </div>
                </div>
                <div class="login-info">
                    <p>上次登录时间： 2022-10-10</p>
                    <p>上次登录地点：上海</p>
                </div>
            </el-card>
            <el-card shadow="hover" style="margin-top:20px;">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="name" label="课程"></el-table-column>
                    <el-table-column prop="today_buy" label="今日购买"></el-table-column>
                    <el-table-column prop="month_buy" label="本月购买"></el-table-column>
                    <el-table-column prop="total_buy" label="总购买"></el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="16" style="margin-top: 20px;">
            <div class="nums">
                <el-card :body-style="{display: 'flex', padding: 0}" v-for="item in countData" :key="item.name">
                    <component class="icons" :is="item.icon" :style="{background: item.color}"></component>
                    <div class="detail">
                        <p class="txt">{{item.name}}</p>
                        <p class="num">￥：{{item.value}}</p>
                    </div>
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    ref
} from 'vue'
import axios from 'axios'
export default defineComponent({
    setup() {
        // vue3中实现js中的数据双向绑定需要使用ref
        let tableData = ref([])
        let countData = ref([])
        let getImgSrc = () => {
            return new URL("../../assets/images/user.png", import.meta.url).href;
        }
        // getTableData和getCountData是通过API获取数据
        // 可以看到通过这种方式调用API还是很方便的
        const { proxy } = getCurrentInstance()
        const getTableData = async () => {
            let res = await proxy.$api.getHomeTableData();
            tableData.value = res.data
        }
        const getCountData = async () => {
            let res = await proxy.$api.getHomeCountData();
            countData.value = res.data
        }
        onMounted(() => {
            getTableData(),
                getCountData()
        })
        return {
            getImgSrc,
            tableData,
            countData,
        }
    }
})
</script>

<style lang="less" scoped>
.home {
    .user-info {
        display: flex;
        border-bottom: 1px solid #ccc;
        // align-items: center;
        .user-image {
            margin-left: 30px;
            height: 150px;
            width: 150px;
            border-radius: 50%;
            margin-bottom: 15px;
        }
        .display-info {
            margin-left: 60px;
            padding-top: 50px;
        }
    }
    .login-info {
        margin-left: 30px;
        margin-top: 15px;
        line-height: 200%;
    }
    .nums {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .el-card {
            width: 31%;
            margin-bottom: 20px;
            .icons {
                width: 24%
            }
            .detail {
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .num {
                    font-size: 26px;
                }
                .txt {
                    color: #999;
                    text-align: center;
                }
            }
        }
    }
}
</style>