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

这个系列的笔记重点会放在怎么样利用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中修改,修改后文件内容如下,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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, 修改后内容如下,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<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>

总结

这个系列的笔记到这里就结束了。

每篇笔记的开头都提到过,这个系列笔记的重点是讲怎么样从0开始,架设一个Vue3项目并且让它能够跟后端通信,不会仔细的讲Vue的基础知识以及js, css和html这些内容,所以如果你还完全不懂这些内容,估计这个系列的笔记是看不懂的。

笔记中对于怎么样在页面上展示各种各样炫酷的图表没有过多介绍,其实这一部分其实都大同小异,无非就是通过各种各样的库来渲染数据,不同的库有不同的使用方法和封装方法,