这个系列的笔记重点会放在怎么样利用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() {
let tableData = ref([])
let countData = ref([])
let getImgSrc = () => {
return new URL("../../assets/images/user.png", import.meta.url).href;
}
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这些内容，所以如果你还完全不懂这些内容，估计这个系列的笔记是看不懂的。
笔记中对于怎么样在页面上展示各种各样炫酷的图表没有过多介绍，其实这一部分其实都大同小异，无非就是通过各种各样的库来渲染数据，不同的库有不同的使用方法和封装方法，