文章目录

修改API
修改首页展示文件
总结

这个系列的笔记重点会放在怎么样利用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,})},
}

可以看到，新增了通过 /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中的数据双向绑定需要使用reflet 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这些内容，所以如果你还完全不懂这些内容，估计这个系列的笔记是看不懂的。

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

Vue3入门笔记----实现首页的展示内容相关推荐

Vue3入门笔记----后端框架解释
文章目录配置后端运行环境这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动,不会介绍Vue的基础特性,关于Vue的基础特性可以参考这个视频四个小时带你快速入门Vue,我是 ...
Vue3入门笔记—2022年1月9日
1. 响应式值(ref和reactive) 一般: 1.ref用于单个值, 2.reactive用于对象类型的数据. 例如: const name = ref("zhangsan" ...
深度学习入门笔记（一）：机器学习基础
专栏--深度学习入门笔记推荐文章深度学习入门笔记(一):机器学习基础深度学习入门笔记(二):神经网络基础深度学习入门笔记(三):感知机深度学习入门笔记(四):神经网络深度学习入门笔记(五) ...
HTML入门笔记案例展示(1)
一: html标签&html书写规则 Html 的标签分为如下这两种 : 单标签: 单标签一般用于特殊的含义, 例如 : <br/> 表示换行, <hr/> ...
html缩进快捷键_HTML 入门笔记
HTML 入门笔记 HTML (HyperText Markup Language) 不是一门编程语言,而是一种用来告知浏览器如何组织页面的标记语言. HTML 可复杂.可简单,一切取决于开发者. 它 ...
go web框架_golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web
micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go- ...
【HTML/CSS】从放弃到入门-笔记1
从放弃到入门1 ⇒ 从放弃到入门2 了解浏览器浏览器和服务器(了解) 浏览器是一款软件,浏览器功能:1将网页渲染出来给用户查看,2让用户通过浏览器与网页交互不同浏览器的内核不同,渲染效果会有小的差 ...
Pytorch快速入门笔记
Pytorch 入门笔记 1. Pytorch下载与安装 2. Pytorch的使用教程 2.1 Pytorch设计理念及其基本操作 2.2 使用torch.nn搭建神经网络 2.3 创建属于自己的D ...
python语言支持函数式编程_Python语言之Pyhton入门笔记函数式编程
本文主要向大家介绍了Python语言之Pyhton入门笔记函数式编程,通过具体的内容向大家展示,希望对大家学习Python语言有所帮助. 一,匿名函数 def add(x,y) return x+y ...

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

文章目录

修改API

修改首页展示文件

总结

Vue3入门笔记----实现首页的展示内容相关推荐

最新文章

热门文章