Vue3入门笔记----实现首页的展示内容_vue3 设置首页 csdn

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

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

同步发表于个人站点：http://panzhixiang.cn/article/2022/11/16/62.html

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

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

修改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,
        })
    },
}
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

可以看到，新增了通过 /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>
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

总结

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

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

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