Article directory
The focus of this series of notes will be on how to use Vue3 to set up the project and interact with the back-end API. It will not introduce the basic features of Vue. For the basic features of Vue, you can refer to this video. It will take you to get started with Vue in four . I just read this entry, and I think it's not bad.
Code address: https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes
Published simultaneously on personal site: http://panzhixiang.cn/article/2022/11/16/62.html
In this note, some display content will be added to the homepage, which is divided into two types, one is static display, without obtaining any data from the backend; the other is to display only after obtaining data from the backend.
Because it is not very complicated, I will not write it separately according to the above two types. Just pay attention to it when reading notes and codes.
Modify the API
The display part of the homepage needs to add two APIs to obtain data, modify it in src/api/api.js, the content of the modified file is as follows,
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,
})
},
}
As you can see, there are new methods for obtaining data through the two APIs /api/vue/courses/ and /api/vue/orders/.
Modify the home page display file
With the API, the next step is to modify the home page.
Modify src/views/home/Home.vue, the modified content is as follows,
<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>
Summarize
This series of notes ends here.
As mentioned at the beginning of each note, the focus of this series of notes is to talk about how to start from 0, set up a Vue3 project and let it communicate with the backend, and will not carefully talk about the basics of Vue and js, css and html content, so if you still don't understand these contents at all, it is estimated that the notes in this series are incomprehensible.
In the notes, there is not much introduction on how to display various cool charts on the page. In fact, this part is basically the same. It is nothing more than rendering data through various libraries. Different libraries have different usage methods and encapsulation method,